diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index ebe641f8..76e5d2d9 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -109,7 +109,7 @@
       background: var(--color2);
       padding: 0px;
       overflow-y: overlay;
-  
+
       .list-group-item {
         border-radius: 0px;
       }
@@ -193,11 +193,11 @@
 
       .list-group-item {
         padding: 12px 6px;
-  
+
         &:hover {
           filter: brightness(1.2);
         }
-  
+
         &:active {
           filter: brightness(0.8);
         }
@@ -210,7 +210,7 @@
       padding: 0px;
       width: 100%;
       overflow: hidden;
-      
+
       .stylestack-editor {
         padding-bottom: 16px;
       }
@@ -1233,6 +1233,10 @@
     min-height: 80vh;
   }
 
+  &.animated .artist-header-compact {
+    min-height: 40vh;
+  }
+
   .artist-header {
     //background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
     color: white;
@@ -2248,7 +2252,7 @@
     .settings-tab-content {
       height:100%;
     }
-    
+
     &.no-sidebar {
       .gh-header {
         >.row {
diff --git a/src/renderer/views/components/settings-window.ejs b/src/renderer/views/components/settings-window.ejs
index 38f5dd33..d7881130 100644
--- a/src/renderer/views/components/settings-window.ejs
+++ b/src/renderer/views/components/settings-window.ejs
@@ -547,6 +547,14 @@
                                                :disabled="app.cfg.visual.customAccentColor" switch/>
                                     </div>
                                 </div>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.visual.compactArtistHeader')}}
+                                    </div>
+                                    <div class="md-option-segment_auto">
+                                        <input type="checkbox" v-model="app.cfg.visual.compactArtistHeader" switch/>
+                                    </div>
+                                </div>
                                 <div class="md-option-line">
                                     <div class="md-option-segment">
                                         {{$root.getLz('settings.option.visual.hardwareAcceleration')}}<br>
@@ -771,19 +779,19 @@
                                                 <option value='afrikaans'>Afrikaans</option>
                                                 <option value='albanian'>Albanian</option>
                                                 <option value='arab'>Arabic</option>
-                                                <option value='armenian'>Armenian</option>                                    
+                                                <option value='armenian'>Armenian</option>
                                                 <option value='azerbaijani'>Azerbaijani</option>
                                                 <option value='bengali'>Bengali</option>
                                                 <option value='bosnian'>Bosnian</option>
-                                                <option value='brazilian'>Brazilian</option>  
-                                                <option value='bulgarian'>Bulgarian</option>   
+                                                <option value='brazilian'>Brazilian</option>
+                                                <option value='bulgarian'>Bulgarian</option>
                                                 <option value='chinese'>Chinese (Simplified)</option>
-                                                <option value='chinese-trad'>Chinese (Traditional)</option>                      
+                                                <option value='chinese-trad'>Chinese (Traditional)</option>
                                                 <option value='chinese-romaji'>Romanized Chinese</option>
                                                 <option value='croatian'>Croatian</option>
                                                 <option value='czech'>Czech</option>
-                                                <option value='danish'>Danish</option> 
-                                                <option value='dutch'>Dutch</option>                       
+                                                <option value='danish'>Danish</option>
+                                                <option value='dutch'>Dutch</option>
                                                 <option value='estonian'>Estonian</option>
                                                 <option value='english'>English</option>
                                                 <option value='farsi'>Farsi</option>
diff --git a/src/renderer/views/pages/artist.ejs b/src/renderer/views/pages/artist.ejs
index 539393dc..c1046d7e 100644
--- a/src/renderer/views/pages/artist.ejs
+++ b/src/renderer/views/pages/artist.ejs
@@ -1,7 +1,7 @@
 <script type="text/x-template" id="cider-artist">
     <div class="content-inner artist-page"
          :class="[(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9) || hasHero()) ? 'animated' : '']">
-        <div class="artist-header" :key="data.id" v-observe-visibility="{callback: isHeaderVisible}">
+        <div :class="['artist-header', { 'artist-header-compact': app.cfg.visual.compactArtistHeader }]" :key="data.id" v-observe-visibility="{callback: isHeaderVisible}">
             <animatedartwork-view
                     :priority="true"
                     v-if="hasAnimated()"