diff --git a/src/renderer/less/bootstrap.less b/src/renderer/less/bootstrap.less
index b1384a8a..6bf3368d 100644
--- a/src/renderer/less/bootstrap.less
+++ b/src/renderer/less/bootstrap.less
@@ -7670,160 +7670,132 @@ fieldset:disabled .btn {
 
 .popover {
   position: absolute;
-  top     : 0;
-  left    : 0
-    /* rtl:ignore */
-  ;
-  z-index         : 1070;
-  display         : block;
-  max-width       : 276px;
-  font-family     : var(--bs-font-sans-serif);
-  font-style      : normal;
-  font-weight     : 400;
-  line-height     : 1.5;
-  text-align      : left;
-  text-align      : start;
-  text-decoration : none;
-  text-shadow     : none;
-  text-transform  : none;
-  letter-spacing  : normal;
-  word-break      : normal;
-  word-spacing    : normal;
-  white-space     : normal;
-  line-break      : auto;
-  font-size       : 0.875rem;
-  word-wrap       : break-word;
-  background-color: #fff;
-  background-clip : padding-box;
-  border          : 1px solid rgba(0, 0, 0, 0.2);
-  border-radius   : 0.3rem;
+  top: 0;
+  left: 0 /* rtl:ignore */;
+  z-index: 1070;
+  display: block;
+  max-width: 276px;
+  font-family: var(--bs-font-sans-serif);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-break: normal;
+  word-spacing: normal;
+  white-space: normal;
+  line-break: auto;
+  font-size: 0.875rem;
+  word-wrap: break-word;
+  background-color: var(--modalBackground);
+  background-clip: padding-box;
+  box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-ShadowSubtle);
+  border-radius: var(--mediaItemRadius);
 }
-
 .popover .popover-arrow {
   position: absolute;
-  display : block;
-  width   : 1rem;
-  height  : 0.5rem;
+  display: block;
+  width: 1rem;
+  height: 0.5rem;
 }
-
-.popover .popover-arrow::before,
-.popover .popover-arrow::after {
-  position    : absolute;
-  display     : block;
-  content     : "";
+.popover .popover-arrow::before, .popover .popover-arrow::after {
+  position: absolute;
+  display: block;
+  content: "";
   border-color: transparent;
   border-style: solid;
 }
 
-.bs-popover-top>.popover-arrow,
-.bs-popover-auto[data-popper-placement^=top]>.popover-arrow {
+.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
   bottom: calc(-0.5rem - 1px);
 }
-
-.bs-popover-top>.popover-arrow::before,
-.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before {
-  bottom          : 0;
-  border-width    : 0.5rem 0.5rem 0;
+.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
+  bottom: 0;
+  border-width: 0.5rem 0.5rem 0;
   border-top-color: rgba(0, 0, 0, 0.25);
 }
-
-.bs-popover-top>.popover-arrow::after,
-.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after {
-  bottom          : 1px;
-  border-width    : 0.5rem 0.5rem 0;
+.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
+  bottom: 1px;
+  border-width: 0.5rem 0.5rem 0;
   border-top-color: #fff;
 }
 
-.bs-popover-end>.popover-arrow,
-.bs-popover-auto[data-popper-placement^=right]>.popover-arrow {
-  left  : calc(-0.5rem - 1px);
-  width : 0.5rem;
+.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
+  left: calc(-0.5rem - 1px);
+  width: 0.5rem;
   height: 1rem;
 }
-
-.bs-popover-end>.popover-arrow::before,
-.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before {
-  left              : 0;
-  border-width      : 0.5rem 0.5rem 0.5rem 0;
+.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
+  left: 0;
+  border-width: 0.5rem 0.5rem 0.5rem 0;
   border-right-color: rgba(0, 0, 0, 0.25);
 }
-
-.bs-popover-end>.popover-arrow::after,
-.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after {
-  left              : 1px;
-  border-width      : 0.5rem 0.5rem 0.5rem 0;
+.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
+  left: 1px;
+  border-width: 0.5rem 0.5rem 0.5rem 0;
   border-right-color: #fff;
 }
 
-.bs-popover-bottom>.popover-arrow,
-.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow {
+.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
   top: calc(-0.5rem - 1px);
 }
-
-.bs-popover-bottom>.popover-arrow::before,
-.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before {
-  top                : 0;
-  border-width       : 0 0.5rem 0.5rem 0.5rem;
+.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {
+  top: 0;
+  border-width: 0 0.5rem 0.5rem 0.5rem;
   border-bottom-color: rgba(0, 0, 0, 0.25);
 }
-
-.bs-popover-bottom>.popover-arrow::after,
-.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after {
-  top                : 1px;
-  border-width       : 0 0.5rem 0.5rem 0.5rem;
+.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
+  top: 1px;
+  border-width: 0 0.5rem 0.5rem 0.5rem;
   border-bottom-color: #fff;
 }
-
-.bs-popover-bottom .popover-header::before,
-.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
-  position     : absolute;
-  top          : 0;
-  left         : 50%;
-  display      : block;
-  width        : 1rem;
-  margin-left  : -0.5rem;
-  content      : "";
+.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  display: block;
+  width: 1rem;
+  margin-left: -0.5rem;
+  content: "";
   border-bottom: 1px solid #f0f0f0;
 }
 
-.bs-popover-start>.popover-arrow,
-.bs-popover-auto[data-popper-placement^=left]>.popover-arrow {
-  right : calc(-0.5rem - 1px);
-  width : 0.5rem;
+.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
+  right: calc(-0.5rem - 1px);
+  width: 0.5rem;
   height: 1rem;
 }
-
-.bs-popover-start>.popover-arrow::before,
-.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before {
-  right            : 0;
-  border-width     : 0.5rem 0 0.5rem 0.5rem;
+.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
+  right: 0;
+  border-width: 0.5rem 0 0.5rem 0.5rem;
   border-left-color: rgba(0, 0, 0, 0.25);
 }
-
-.bs-popover-start>.popover-arrow::after,
-.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after {
-  right            : 1px;
-  border-width     : 0.5rem 0 0.5rem 0.5rem;
+.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
+  right: 1px;
+  border-width: 0.5rem 0 0.5rem 0.5rem;
   border-left-color: #fff;
 }
 
 .popover-header {
-  padding                : 0.5rem 1rem;
-  margin-bottom          : 0;
-  font-size              : 1rem;
-  background-color       : #f0f0f0;
-  border-bottom          : 1px solid rgba(0, 0, 0, 0.2);
-  border-top-left-radius : calc(0.3rem - 1px);
+  padding: 0.5rem 1rem;
+  margin-bottom: 0;
+  font-size: 1rem;
+  background-color: #f0f0f0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  border-top-left-radius: calc(0.3rem - 1px);
   border-top-right-radius: calc(0.3rem - 1px);
 }
-
 .popover-header:empty {
   display: none;
 }
 
 .popover-body {
   padding: 1rem 1rem;
-  color  : #212529;
+  color: var(--textColor);
 }
 
 // carousel
diff --git a/src/renderer/less/directives.less b/src/renderer/less/directives.less
index 2c99f41a..b8de2888 100644
--- a/src/renderer/less/directives.less
+++ b/src/renderer/less/directives.less
@@ -184,7 +184,6 @@
           width: var(--size);
           height: var(--size);
           margin: 0 calc(var(--offset) / var(--marginOffset)) 0 calc(var(--offset) / var(--marginOffset));
-          cursor: pointer;
 
           .mediaitem-artwork,
           img {
diff --git a/src/renderer/less/helpers.less b/src/renderer/less/helpers.less
index 6a92501d..35ffc268 100644
--- a/src/renderer/less/helpers.less
+++ b/src/renderer/less/helpers.less
@@ -485,4 +485,25 @@
       }
     }
   }
+}
+
+.mediainfo-popover {
+  user-select: none;
+  .popover-artwork {
+    width: 200px;
+    height: 200px;
+    margin: 0 0 20px 0;
+  }
+
+  .song-name {
+    font-weight: 600;
+  }
+  .song-artist,.song-album {
+    opacity: 0.75;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/renderer/views/app/chrome-bottom.ejs b/src/renderer/views/app/chrome-bottom.ejs
index 82c0e429..0ff0028f 100644
--- a/src/renderer/views/app/chrome-bottom.ejs
+++ b/src/renderer/views/app/chrome-bottom.ejs
@@ -4,9 +4,25 @@
             <template v-if="mkReady()">
                 <div class="app-playback-controls" @mouseover="chrome.progresshover = true"
                      @mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
-                    <div class="artwork" @click="drawer.open = false; fullscreen(true)">
+                    <div class="artwork" id="artworkLCD">
                         <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
                     </div>
+                    <b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="right">
+                        <div class="popover-artwork">
+                            <mediaitem-artwork :size="210" :url="currentArtUrlRaw"></mediaitem-artwork>
+                        </div>
+                        <div class="song-name">{{ mk.nowPlayingItem["attributes"]["name"] }}</div>
+                        <div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">{{ mk.nowPlayingItem["attributes"]["artistName"] }}</div>
+                        <div class="song-album" @click="getNowPlayingItemDetailed(`album`)">
+                            {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
+                            (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
+                        </div>
+                        <hr>
+                        <div class="btn-group" style="width:100%;">
+                            <button class="md-btn md-btn-small" style="width: 100%;" @click="drawer.open = false; miniPlayer(true)">{{ $root.getLz("term.miniplayer") }}</button>
+                            <button class="md-btn md-btn-small" style="width: 100%;" @click="drawer.open = false; fullscreen(true)">{{ $root.getLz("term.fullscreenView") }}</button>
+                        </div>
+                    </b-popover>
                     <div class="playback-info">
                         <div class="song-name"
                              :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']">
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index b6baea7a..c0297f73 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -76,9 +76,25 @@
             <template v-if="mkReady()">
                 <div class="app-playback-controls" @mouseover="chrome.progresshover = true"
                      @mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
-                    <div class="artwork" @click="drawer.open = false; fullscreen(true)">
+                    <div class="artwork" id="artworkLCD">
                         <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
                     </div>
+                    <b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="bottom">
+                        <div class="popover-artwork">
+                            <mediaitem-artwork :size="210" :url="currentArtUrlRaw"></mediaitem-artwork>
+                        </div>
+                        <div class="song-name">{{ mk.nowPlayingItem["attributes"]["name"] }}</div>
+                        <div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">{{ mk.nowPlayingItem["attributes"]["artistName"] }}</div>
+                        <div class="song-album" @click="getNowPlayingItemDetailed(`album`)">
+                            {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
+                            (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
+                        </div>
+                        <hr>
+                        <div class="btn-group" style="width:100%;">
+                            <button class="md-btn md-btn-small" style="width: 100%;" @click="drawer.open = false; miniPlayer(true)">{{ $root.getLz("term.miniplayer") }}</button>
+                            <button class="md-btn md-btn-small" style="width: 100%;" @click="drawer.open = false; fullscreen(true)">{{ $root.getLz("term.fullscreenView") }}</button>
+                        </div>
+                    </b-popover>
                     <div class="playback-info">
                         <div class="chrome-icon-container">
                             <div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div>
@@ -170,10 +186,11 @@
                        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')"
+                        @click="cfg.advanced.AudioContext ? modals.castMenu = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))"
                         v-b-tooltip.hover
-                        @click="drawer.open = false; miniPlayer(true)"></button>
+                        ></button>
             </div>
             <div class="app-chrome-item generic">
                 <button class="playback-button--small queue"
@@ -196,14 +213,6 @@
                 </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">