diff --git a/src/renderer/assets/fonts/Pretendard/pretendardvariable.css b/src/renderer/assets/fonts/Pretendard/pretendardvariable.css
new file mode 100644
index 00000000..3a807600
--- /dev/null
+++ b/src/renderer/assets/fonts/Pretendard/pretendardvariable.css
@@ -0,0 +1,16 @@
+/*
+Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
+https://github.com/orioncactus/pretendard
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+*/
+
+@font-face {
+	font-family: 'Pretendard Variable';
+	font-weight: 45 920;
+	font-style: normal;
+	font-display: swap;
+	src: local('Pretendard Variable'), url('./woff2/PretendardVariable.woff2') format('woff2-variations');
+}
diff --git a/src/renderer/assets/fonts/Pretendard/woff2/PretendardVariable.woff2 b/src/renderer/assets/fonts/Pretendard/woff2/PretendardVariable.woff2
new file mode 100644
index 00000000..98125beb
Binary files /dev/null and b/src/renderer/assets/fonts/Pretendard/woff2/PretendardVariable.woff2 differ
diff --git a/src/renderer/less/directives.less b/src/renderer/less/directives.less
index 5c9253da..15e07a07 100644
--- a/src/renderer/less/directives.less
+++ b/src/renderer/less/directives.less
@@ -4,22 +4,72 @@
 
 #app.twopanel {
   --chromeHeight1: 46px;
-  --chromeHeight2: 76px;
-  --chromeHeight : calc(var(--chromeHeight1) + var(--chromeHeight2));
+  --chromeHeight2: 90px;
+  --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2));
 
   .app-chrome {
     .app-mainmenu {
-      width : 30px;
+      width: 30px;
       height: 30px;
     }
 
+    .search-input {
+      width: 300px;
+    }
+
     height: var(--chromeHeight1);
 
     &.chrome-bottom {
+      background: var(--color2);
       -webkit-app-region: no-drag;
-      height    : var(--chromeHeight2);
+      height: var(--chromeHeight2);
       box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
-      z-index   : 1;
+      z-index: 1;
+
+      .app-chrome-playback-duration-bottom {
+        width: 100%;
+
+        .col {
+          display: flex;
+        }
+
+        .col-sm-auto {
+          width: 4em;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 0.8em;
+        }
+
+        input[type=range] {
+          appearance: none;
+          width: 100%;
+          height: 5px;
+          background-color: rgb(200 200 200 / 10%);
+          border-radius: 6px;
+          box-shadow: 0px 0px 0px 1px rgba(0 0 0 / 10%);
+          align-self: center;
+
+          &::-webkit-slider-thumb {
+            opacity: 0;
+            transform: scale(1);
+            -webkit-appearance: none;
+            appearance: none;
+            width: 16px;
+            height: 16px;
+            border-radius: 100%;
+            background: var(--keyColor);
+            cursor: default;
+            transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
+          }
+
+          &:hover {
+            &::-webkit-slider-thumb {
+              opacity: 1;
+            }
+          }
+        }
+      }
     }
   }
 
@@ -31,43 +81,44 @@
     .app-playback-controls .actions {
       align-self: center;
     }
+
     -webkit-app-region: no-drag;
 
     .playback-button.play,
     .playback-button.pause {
-      width           : 42px;
-      height          : 42px;
-      background-color: rgb(200 200 200 / 20%);
-      border-radius   : 50%;
-      margin          : 6px;
-      box-shadow      : 0px 0px 0px 2px var(--keyColor);
+      width: 42px;
+      height: 42px;
+      //background-color: rgb(200 200 200 / 20%);
+      border-radius: 50%;
+      margin: 6px;
+      //box-shadow: 0px 0px 0px 2px var(--keyColor);
     }
 
     .app-chrome--center {
-      display       : flex;
+      display: flex;
       flex-direction: column;
 
       .app-chrome-playback-controls {
-        display         : flex;
-        z-index         : 1;
+        display: flex;
+        z-index: 1;
         // margin-bottom: 12px;
       }
 
       .app-chrome-playback-duration {
-        position          : relative;
-        width             : 80%;
+        position: relative;
+        width: 80%;
         -webkit-app-region: no-drag;
-        height            : 16px;
+        height: 16px;
 
         .song-progress {
-          @bgColor  : transparent;
-          height    : 16px;
-          position  : absolute;
-          bottom    : 4px;
-          left      : 0px;
-          right     : 4px;
+          @bgColor: transparent;
+          height: 16px;
+          position: absolute;
+          bottom: 4px;
+          left: 0px;
+          right: 4px;
           background: @bgColor;
-          z-index   : 0;
+          z-index: 0;
 
 
           .song-duration {
@@ -76,41 +127,41 @@
 
           .song-duration p {
             font-weight: 400;
-            font-size  : 10px;
-            height     : 1.2em;
+            font-size: 10px;
+            height: 1.2em;
             line-height: 1.3em;
-            overflow   : hidden;
-            margin     : 0 0 0 0.25em;
+            overflow: hidden;
+            margin: 0 0 0 0.25em;
           }
 
           &:hover {
-            >input[type=range] {
+            > input[type=range] {
               &::-webkit-slider-thumb {
-                opacity  : 1;
+                opacity: 1;
                 transform: scale(1);
-                z-index  : 1;
+                z-index: 1;
               }
             }
           }
 
           input[type=range] {
-            appearance      : none;
-            width           : 100%;
-            height          : 4px;
+            appearance: none;
+            width: 100%;
+            height: 4px;
             background-color: rgb(200 200 200 / 10%);
-            border-radius   : 2px;
+            border-radius: 2px;
 
             &::-webkit-slider-thumb {
-              opacity           : 0;
-              transform         : scale(0.5);
+              opacity: 0;
+              transform: scale(0.5);
               -webkit-appearance: none;
-              appearance        : none;
-              width             : 12px;
-              height            : 12px;
-              border-radius     : 100%;
-              background        : var(--keyColor);
-              cursor            : default;
-              transition        : opacity .10s var(--appleEase), transform .10s var(--appleEase);
+              appearance: none;
+              width: 12px;
+              height: 12px;
+              border-radius: 100%;
+              background: var(--keyColor);
+              cursor: default;
+              transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
             }
           }
         }
@@ -119,42 +170,49 @@
     }
 
     .app-chrome--left {
-      width          : 30%;
+      width: 30%;
       justify-content: flex-start;
-      align-items    : flex-start;
-      -webkit-app-region: no-drag!important;
+      align-items: flex-start;
+      -webkit-app-region: no-drag !important;
+
       .playback-controls {
-        -webkit-app-region: no-drag!important;
+        -webkit-app-region: no-drag !important;
+
         .artwork {
-          width     : var(--chromeHeight2);
-          height    : var(--chromeHeight2);
-          margin    : 0px 6px 0px 0px;
-          box-shadow: unset;
-          border    : 0px;
+          --offset: 20px;
+          --marginOffset: 2;
+          --size: calc(var(--chromeHeight2) - var(--offset));
+          width: var(--size);
+          height: var(--size);
+          margin: 0 calc(var(--offset) / var(--marginOffset)) 0 calc(var(--offset) / var(--marginOffset));
+          cursor: pointer;
 
           .mediaitem-artwork,
           img {
-            border-radius: 0px;
-            box-shadow   : unset;
-            border       : 0px;
+            border-radius: calc(var(--mediaItemRadius) / 2);
           }
         }
 
         .playback-info {
           align-items: flex-start;
-          margin     : 6px;
+          margin: 6px;
 
           .song-name {
-            text-align        : left;
-            font-size         : 15px;
-            font-weight       : initial;
-            width             : 100%;
+            text-align: left;
+            font-size: 0.98em;
+            font-weight: 500;
+            width: 100%;
             -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
           }
 
-          .song-artist-album {
-            width             : 100%;
-            -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
+          .song-artist, .song-album {
+            font-size: 0.75em;
+            opacity: 0.8;
+            cursor: pointer;
+
+            &:hover {
+              text-decoration: underline;
+            }
           }
 
           .audio-type {
@@ -163,23 +221,23 @@
 
           .song-artist-album-content {
             text-align: left;
-            font-size : 12px;
+            font-size: 12px;
           }
         }
 
 
-        width    : 100%;
-        height   : 100%;
+        width: 100%;
+        height: 100%;
         max-width: 100%;
-        border   : 0px;
+        border: 0px;
       }
 
       flex: 0 0 auto;
     }
 
     .app-chrome--right {
-      width        : 30%;
-      flex         : 0 0 auto;
+      width: 30%;
+      flex: 0 0 auto;
       padding-right: 8px;
     }
   }
diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index 01fef618..048f2694 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -897,8 +897,10 @@
 
 /* mediaitem-square */
 .cd-mediaitem-square {
-  width: 220px;
-  height: 238px;
+  --scaleRate: 1.25;
+  --scaleRateArtwork: 1;
+  width: 200px;
+  height: 200px;
   display: inline-flex;
   flex: 0 0 auto;
   flex-direction: column;
@@ -911,8 +913,8 @@
     position: relative;
 
     .artwork {
-      height: 190px;
-      width: 190px;
+      height: 150px;
+      width: 150px;
       background: blue;
       border-radius: var(--mediaItemRadius);
       background: var(--artwork);
@@ -920,7 +922,6 @@
       flex: 0 0 auto;
       margin: 6px;
       cursor: pointer;
-
       .mediaitem-artwork {
         box-shadow: unset;
       }
@@ -993,6 +994,15 @@
     }
   }
 
+  @media (min-width: 1600px) {
+    width: calc(200px * var(--scaleRate));
+    height: calc(200px * var(--scaleRate));
+    .artwork-container>.artwork {
+      width: calc(190px * var(--scaleRateArtwork));
+      height: calc(190px * var(--scaleRateArtwork));
+    }
+  }
+
   .info-rect {
     width: 90%;
     height: 100%;
@@ -1074,8 +1084,6 @@
     background: var(--spcolor);
     height: 298px;
     width: 230px;
-    max-width: 250px;
-    max-height: 500px;
     overflow: hidden;
     position: relative;
     border-radius: calc(var(--mediaItemRadius) * 2);
@@ -1157,6 +1165,15 @@
       pointer-events: none;
       border-radius: inherit;
     }
+
+    //@media (min-width: 1600px) {
+    //  width: calc(230px * 1.25);
+    //  height: calc(298px * 1.25);
+    //  .artwork-container>.artwork {
+    //    width: calc(230px * 1.25);
+    //    height: calc(230px * 1.25);
+    //  }
+    //}
   }
 }
 
@@ -1532,7 +1549,7 @@ input[type=checkbox][switch]:checked:active::before {
   border-radius: 6px;
   font-size: 1em;
   color: inherit;
-  background-size: 14px;
+  background-size: 0.98em;
   background-repeat: no-repeat;
   background-position: center;
   background-color: transparent;
@@ -1563,6 +1580,7 @@ input[type=checkbox][switch]:checked:active::before {
 
 .playback-button--small.cast {
   background-image: url("./assets/cast_white.svg");
+  background-size: 1.25em;
 }
 
 .playback-button--small.miniplayer {
diff --git a/src/renderer/less/helpers.less b/src/renderer/less/helpers.less
index 431947c4..6a92501d 100644
--- a/src/renderer/less/helpers.less
+++ b/src/renderer/less/helpers.less
@@ -333,6 +333,7 @@
       position  : relative;
       width     : 100%;
       padding   : 9px 14px;
+      align-items: center;
 
       &::before {
         background   : var(--hover);
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index c4065435..0d8c12c2 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -3730,7 +3730,7 @@ const app = new Vue({
                 if (app.getThemeDirective("lcdArtworkSize") != "") {
                     artworkSize = app.getThemeDirective("lcdArtworkSize")
                 } else if (this.cfg.visual.directives.windowLayout == "twopanel") {
-                    artworkSize = 80
+                    artworkSize = 110
                 }
                 this.currentArtUrl = '';
                 this.currentArtUrlRaw = '';
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 4aea6127..b01ea126 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1,4 +1,4 @@
-@import url("assets/fonts/Inter/inter.css");
+@import url("assets/fonts/pretendard/pretendardvariable.css");
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100;300;400;500;700;900&display=swap");
@@ -63,7 +63,7 @@ body {
   background-size: cover;
   background-position: center;
   background: #0000;
-  font-family: "Inter var experimental", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   transition: opacity .10s var(--appleEase);
 }
 
@@ -146,8 +146,16 @@ body.notransparency::before {
 }
 
 #app {
-  --color1: rgba(15, 15, 15, 30%);
-  --color2: rgba(30, 30, 30, 50%);
+  @panelBrightness  : 0%;
+  @panelTransparency: 50%;
+  @msColor1           : #202020;
+  @msColor2           : #272727;
+  @msColor3           : #2b2b2b;
+  --panelColor1     : darken(mix(@msColor1, transparent, @panelTransparency), @panelBrightness);
+  --panelColor2     : darken(mix(@msColor2, transparent, @panelTransparency), @panelBrightness);
+  --color1  : var(--panelColor2);
+  --color2  : var(--panelColor1);
+  --color3  : rgb(0 0 0 / 20%);
   --bgColor: transparent;
   --bgWidth: 0px;
   --bgHeight: 0px;
@@ -399,7 +407,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 #app-content {
-  background-color: var(--color2);
+  background-color: var(--color3);
   height: 100%;
   width: 100%;
   overflow-y: scroll;
@@ -827,6 +835,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   color: #eee;
   transition: transform 0.1s;
   text-align: left;
+  align-items: center;
 
   &.app-sidebar-item-playlist {
     -webkit-user-drag: element;
@@ -1006,22 +1015,12 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   height: 14px;
   width: 14px;
   border-radius: 50%;
-  background: rgb(50 50 50);
+  background: #A5A8BA;
+  box-shadow: 0px 0px 0px 1px rgba(0 0 0 / 10%);
   cursor: default;
-  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
   transition: all var(--appleTransition);
 }
 
-.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:hover {
-  background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
-  transform: scale(1.2);
-}
-
-.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:active {
-  background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
-  transform: scale(1);
-}
-
 .app-chrome .app-chrome-item.volume > input[type=range] {
   -webkit-appearance: none;
   height: 4px;
diff --git a/src/renderer/themes/sweetener.less b/src/renderer/themes/sweetener.less
index 28c65ddd..18e029f4 100644
--- a/src/renderer/themes/sweetener.less
+++ b/src/renderer/themes/sweetener.less
@@ -46,6 +46,13 @@
 
 }
 
+.cd-mediaitem-square {
+  --transition: width 1s, height 1s;
+  transition: var(--transition);
+  .artwork {
+    transition: var(--transition);
+  }
+}
 
 .cd-mediaitem-square:not(.mediaitem-card) {
     transition      : transform .2s var(--appleEase);
@@ -53,7 +60,7 @@
     padding         : 12px;
 
     // background-color: red;
-    height: 250px;
+    height: 220px;
 
 
     .artwork-container {}
diff --git a/src/renderer/views/app/chrome-bottom.ejs b/src/renderer/views/app/chrome-bottom.ejs
index 3917244a..82c0e429 100644
--- a/src/renderer/views/app/chrome-bottom.ejs
+++ b/src/renderer/views/app/chrome-bottom.ejs
@@ -15,27 +15,17 @@
                                  v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
                                  style="display: inline-block"></div>
                         </div>
+                        <div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">
+                            {{ mk.nowPlayingItem["attributes"]["artistName"] }}
+                        </div>
+                        <div class="song-album" @click="getNowPlayingItemDetailed('album')" v-if='mk.nowPlayingItem["attributes"]["albumName"]'>
+                            {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
+                            (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
+                        </div>
                         <div class="chrome-icon-container">
                             <div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div>
                             <div class="audio-type ppe-icon" v-if="cfg.audio.maikiwiAudio.ciderPPE === true"></div>
                         </div>
-                        <div class="song-artist-album">
-                            <div class="song-artist-album-content"
-                                 :class="[isElementOverflowing('#app-main > .app-chrome .app-chrome-item > .app-playback-controls > div >.song-artist-album > .song-artist-album-content') ? 'marquee' : '']"
-                                 style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
-                                <div class="item-navigate song-artist" style="display: inline-block"
-                                     @click="getNowPlayingItemDetailed(`artist`)">
-                                    {{ mk.nowPlayingItem["attributes"]["artistName"] }}
-                                </div>
-                                <div class="song-artist item-navigate" style="display: inline-block"
-                                     @click="getNowPlayingItemDetailed('album')"
-                                     v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
-                                    <div class="separator" style="display: inline-block;">{{"—"}}</div>
-                                    {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
-                                    (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
-                                </div>
-                            </div>
-                        </div>
                     </div>
                     <template v-if="mk.nowPlayingItem['attributes']['playParams']">
                         <div class="actions">
@@ -53,6 +43,19 @@
 
     </div>
     <div class="app-chrome--center">
+        <div class="app-chrome-playback-duration-bottom">
+            <b-row>
+                <b-col sm="auto">{{ convertTime(getSongProgress()) }}</b-col>
+                <b-col>
+                    <input type="range" step="0.01" min="0" :style="progressBarStyle()"
+                           @input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
+                           @mouseup="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
+                           @touchend="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
+                           :max="mk.currentPlaybackDuration" :value="getSongProgress()">
+                </b-col>
+                <b-col sm="auto">{{ convertTime(mk.currentPlaybackDuration) }}</b-col>
+            </b-row>
+        </div>
         <div class="app-chrome-playback-controls">
             <div class="app-chrome-item">
                 <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" :class="isDisabled() && 'disabled'"
@@ -90,22 +93,6 @@
                         v-b-tooltip.hover></button>
             </div>
         </div>
-        <div class="app-chrome-playback-duration">
-            <div class="song-progress">
-                <div class="song-duration"
-                     style="justify-content: space-between; height: 1px;">
-                    <p style="width: auto">{{ convertTime(getSongProgress()) }}</p>
-                    <p style="width: auto">{{ convertTime(mk.currentPlaybackDuration) }}
-                    </p>
-                </div>
-
-                <input type="range" step="0.01" min="0" :style="progressBarStyle()"
-                       @input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
-                       @mouseup="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
-                       @touchend="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
-                       :max="mk.currentPlaybackDuration" :value="getSongProgress()">
-            </div>
-        </div>
     </div>
     <div class="app-chrome--right">
         <div class="app-chrome-item volume">
@@ -118,10 +105,10 @@
                    v-b-tooltip.hover :title="formatVolumeTooltip()">
         </div>
         <div class="app-chrome-item generic">
-            <button class="playback-button--small miniplayer"
-                    :title="$root.getLz('term.miniplayer')"
+            <button class="playback-button--small cast"
+                    :title="$root.getLz('term.cast')"
                     v-b-tooltip.hover
-                    @click="drawer.open = false; miniPlayer(true)"></button>
+                    @click="cfg.advanced.AudioContext ? modals.castMenu = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))"></button>
         </div>
         <div class="app-chrome-item generic">
             <button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index 7a49dbf0..b6baea7a 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -138,8 +138,24 @@
             </template>
 
         </div>
-        <div class="app-title-text" v-if="false">
-            Cider
+        <div class="app-chrome-item" v-else>
+            <div class="search-input-container">
+                <div class="search-input--icon"></div>
+                <input type="search" spellcheck="false" @click="showSearch()" @focus="search.showHints = true"
+                       @blur="setTimeout(()=>{search.showHints = false}, 300)"
+                       v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();"
+                       @input="getSearchHints()" :placeholder="$root.getLz('term.search') + '...'" v-model="search.term"
+                       ref="searchInput" class="search-input">
+
+                <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
+                    <div class="search-hints">
+                        <button class="search-hint text-overflow-elipsis" v-for="hint in search.hints"
+                                @click="search.term = hint;search.showHints = false;searchQuery(hint)">
+                            {{ hint }}
+                        </button>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
     <div class="app-chrome--right">
@@ -180,6 +196,14 @@
                 </template>
             </div>
         </template>
+        <template v-else>
+            <div class="app-chrome-item generic">
+                <button class="playback-button--small miniplayer"
+                        :title="$root.getLz('term.miniplayer')"
+                        v-b-tooltip.hover
+                        @click="drawer.open = false; miniPlayer(true)"></button>
+            </div>
+        </template>
         <div class="app-chrome-item full-height" id="window-controls-container"
              v-if="chrome.windowControlPosition == 'right' && !chrome.nativeControls">
             <div class="window-controls">
diff --git a/src/renderer/views/app/sidebar.ejs b/src/renderer/views/app/sidebar.ejs
index 84e43e8e..bb76868b 100644
--- a/src/renderer/views/app/sidebar.ejs
+++ b/src/renderer/views/app/sidebar.ejs
@@ -1,22 +1,26 @@
 <div id="app-sidebar">
-    <div class="app-sidebar-header">
-        <div class="search-input-container">
-            <div class="search-input--icon"></div>
-            <input type="search" spellcheck="false" @click="showSearch()" @focus="search.showHints = true"
-                @blur="setTimeout(()=>{search.showHints = false}, 300)"
-                v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();"
-                @input="getSearchHints()" :placeholder="$root.getLz('term.search') + '...'" v-model="search.term"
-                ref="searchInput" class="search-input">
+    <template v-if="getThemeDirective('windowLayout') != 'twopanel'">
+        <div class="app-sidebar-header">
+            <div class="search-input-container">
+                <div class="search-input--icon"></div>
+                <input type="search" spellcheck="false" @click="showSearch()" @focus="search.showHints = true"
+                       @blur="setTimeout(()=>{search.showHints = false}, 300)"
+                       v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();"
+                       @input="getSearchHints()" :placeholder="$root.getLz('term.search') + '...'" v-model="search.term"
+                       ref="searchInput" class="search-input">
+
+                <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
+                    <div class="search-hints">
+                        <button class="search-hint text-overflow-elipsis" v-for="hint in search.hints"
+                                @click="search.term = hint;search.showHints = false;searchQuery(hint)">
+                            {{ hint }}
+                        </button>
+                    </div>
+                </div>
+            </div>
         </div>
-    </div>
-    <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
-        <div class="search-hints">
-            <button class="search-hint text-overflow-elipsis" v-for="hint in search.hints"
-                @click="search.term = hint;search.showHints = false;searchQuery(hint)">
-                {{ hint }}
-            </button>
-        </div>
-    </div>
+    </template>
+
     <div class="app-sidebar-content" scrollaxis="y">
         <div class="app-sidebar-header-text"
         @click="cfg.general.sidebarCollapsed.cider = !cfg.general.sidebarCollapsed.cider"