diff --git a/front/scripts/fix-fomantic-css.py b/front/scripts/fix-fomantic-css.py
index 4979e705a..eb5b3d156 100755
--- a/front/scripts/fix-fomantic-css.py
+++ b/front/scripts/fix-fomantic-css.py
@@ -175,6 +175,9 @@ def discard_unused_icons(rule):
         ".chevron",
         ".right",
         ".left",
+        ".compress",
+        ".expand",
+        ".image",
     ]
     if ":before" not in rule["lines"][0]:
         return False
diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 11354cef4..24dfc3f13 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -62,7 +62,11 @@ const labels = computed(() => ({
   previous: $pgettext('*/*/*', 'Previous track'),
   next: $pgettext('*/*/*', 'Next track'),
   pause: $pgettext('*/*/*', 'Pause'),
-  play: $pgettext('*/*/*', 'Play')
+  play: $pgettext('*/*/*', 'Play'),
+  fullscreen: $pgettext('*/*/*', 'Fullscreen'),
+  exitFullscreen: $pgettext('*/*/*', 'Exit fullscreen'),
+  showCoverArt: $pgettext('*/*/*', 'Show cover art'),
+  showVisualizer: $pgettext('*/*/*', 'Show visualizer')
 }))
 
 watchEffect(async () => {
@@ -204,41 +208,61 @@ const coverType = ref(CoverType.COVER_ART)
                 ref="milkdrop"
               />
 
-              <div class="cover-buttons">
-                <button
-                  v-if="coverType === CoverType.COVER_ART"
-                  class="ui secondary button"
-                  @click="coverType = CoverType.MILK_DROP"
+              <Transition name="queue">
+                <div
+                  v-if="!fullscreen || !idle"
+                  class="cover-buttons"
                 >
-                  <i class="icon signal" />
-                </button>
-                <button
-                  v-else-if="coverType === CoverType.MILK_DROP"
-                  class="ui secondary button"
-                  @click="coverType = CoverType.COVER_ART"
-                >
-                  <i class="icon image outline" />
-                </button>
-                <button
-                  v-if="!fullscreen"
-                  class="ui secondary button"
-                  @click="enter"
-                >
-                  <i class="icon expand arrows alternate" />
-                </button>
-              </div>
-            </div>
+                  <button
+                    v-if="coverType === CoverType.COVER_ART"
+                    class="ui secondary button"
+                    :aria-title="labels.showVisualizer"
+                    :title="labels.showVisualizer"
+                    @click="coverType = CoverType.MILK_DROP"
+                  >
+                    <i class="icon signal" />
+                  </button>
+                  <button
+                    v-else-if="coverType === CoverType.MILK_DROP"
+                    class="ui secondary button"
+                    :aria-title="labels.showCoverArt"
+                    :title="labels.showCoverArt"
+                    @click="coverType = CoverType.COVER_ART"
+                  >
+                    <i class="icon image outline" />
+                  </button>
 
-            <Transition name="queue">
-              <div
-                v-if="fullscreen && (!idle || showTrackInfo)"
-                class="track-info"
-                @click="loadRandomPreset()"
-              >
-                <h1>{{ currentTrack.title }}</h1>
-                <h2>{{ currentTrack.artistName }} &mdash; {{ currentTrack.albumTitle }}</h2>
-              </div>
-            </Transition>
+                  <button
+                    v-if="!fullscreen"
+                    class="ui secondary button"
+                    :aria-title="labels.fullscreen"
+                    :title="labels.fullscreen"
+                    @click="enter"
+                  >
+                    <i class="icon expand" />
+                  </button>
+                  <button
+                    v-else
+                    class="ui secondary button"
+                    :aria-title="labels.exitFullscreen"
+                    :title="labels.exitFullscreen"
+                    @click="exit"
+                  >
+                    <i class="icon compress" />
+                  </button>
+                </div>
+              </Transition>
+              <Transition name="queue">
+                <div
+                  v-if="fullscreen && (!idle || showTrackInfo)"
+                  class="track-info"
+                  @click="loadRandomPreset()"
+                >
+                  <h1>{{ currentTrack.title }}</h1>
+                  <h2>{{ currentTrack.artistName }} &mdash; {{ currentTrack.albumTitle }}</h2>
+                </div>
+              </Transition>
+            </div>
           </div>
           <h1 class="ui header">
             <div class="content ellipsis">
@@ -475,9 +499,3 @@ const coverType = ref(CoverType.COVER_ART)
     </div>
   </section>
 </template>
-
-<style scoped>
-.icon.image::before {
-  content: "\f03e";
-}
-</style>
diff --git a/front/src/style/components/_queue.scss b/front/src/style/components/_queue.scss
index 418407a68..4b49b0239 100644
--- a/front/src/style/components/_queue.scss
+++ b/front/src/style/components/_queue.scss
@@ -1,10 +1,10 @@
 
 .queue-controls {
-
   @include media("<desktop") {
     height: $bottom-player-height;
   }
 }
+
 .ui.clearing.segment {
   background-color: var(--site-background);
   box-shadow: var(--secondary-menu-box-shadow);
@@ -13,14 +13,14 @@
 
 .queue-enter-active,
 .queue-leave-active {
-  transition: all 0.2s ease;
-  will-change: transform, opacity;
+  transition: all 0.2s ease !important;
+  will-change: transform, opacity !important;
 }
 
 .queue-enter-from,
 .queue-leave-to {
-  opacity: 0;
-  transform: translateY(5vh);
+  opacity: 0 !important;
+  transform: translateY(5vh) !important;
 }
 
 .component-queue {
@@ -292,33 +292,33 @@
       .cover-container {
         width: 50vh;
         max-width: 90%;
+        display: flex;
 
         &.idle {
           cursor: none;
         }
 
+        &.fullscreen canvas {
+          transform: translateY(calc(50vh - 50vw));
+        }
+
         .cover {
-          height: 0;
           width: 100%;
-          padding-bottom: 100%;
           position: relative;
 
           canvas,
           img {
-            height: 100%;
             width: 100%;
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-            z-index: 1;
-            margin: 0 auto;
+            height: 100%;
+          }
+
+          canvas {
+            aspect-ratio: 1;
           }
 
           img {
-            max-width: 100vh;
-            max-height: 100vh;
+            object-fit: contain;
+            object-position: center;
           }
 
           &:hover .cover-buttons {
@@ -330,22 +330,33 @@
             transform: scale(1.2);
             filter: blur(15vh);
             border-radius: 22vh;
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: -1;
           }
 
           .cover-buttons {
             position: absolute;
             bottom: 1em;
             right: 1em;
-            z-index: 2;
+            z-index: 3;
             display: flex;
             flex-direction: row-reverse;
-            transition: all 0.2s ease-in-out;
-            opacity: 0;
-            transform: translateY(0.5em);
+            pointer-events: none;
+
+            @include media(">tablet") {
+              transition: all 0.2s ease-in-out;
+              opacity: 0;
+              transform: translateY(0.5em);
+            }
 
             button {
               z-index: 2;
               padding: 0.78571429em;
+              pointer-events: all;
 
               &:first-child {
                 margin-right: 0 !important;
@@ -369,7 +380,7 @@
 
         .track-info {
           position: absolute;
-          z-index: 3;
+          z-index: 2;
           bottom: 0;
           left: 0;
           width: 100%;
diff --git a/front/yarn.lock b/front/yarn.lock
index 2b1e0471e..970b6cacc 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -2191,14 +2191,14 @@ buntis@0.2.1:
   resolved "https://registry.yarnpkg.com/buntis/-/buntis-0.2.1.tgz#a043aabc7d64f2243bfaa53e34e999c2dd790e82"
   integrity sha512-5wszfQlsqJmZrfxpPkO5yQcEoBAmfUYlXxXU/IM6PhPZ8DMnMMJQ9rvAHfe5WZmnB6E1IoJYylFfTaf1e2FJbQ==
 
-butterchurn-presets@^3.0.0-beta.4:
+butterchurn-presets@3.0.0-beta.4:
   version "3.0.0-beta.4"
   resolved "https://registry.yarnpkg.com/butterchurn-presets/-/butterchurn-presets-3.0.0-beta.4.tgz#393d3f7863d546bdef2c52aec90da76bdbcacd3b"
   integrity sha512-TbQLUPvGOYMZAtWKoCmBtludh9aQZ6NaMGQU4lvPeadBPy3Du3yNmwBjlTMLP5c5mRWElxQPjTL1PtR7FZK3OQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-butterchurn@^3.0.0-beta.4:
+butterchurn@3.0.0-beta.4:
   version "3.0.0-beta.4"
   resolved "https://registry.yarnpkg.com/butterchurn/-/butterchurn-3.0.0-beta.4.tgz#f459d8b81decd4f28f4c90b5c0fc40611ad3d86f"
   integrity sha512-hiY1ktHYHQ8MT65nnZi7GjrgZZ6sl/ipT5rBqEfaYJd90L4SvOtB6lVxtKadtzAyJo2TQJc4gJfEca4cpZo0DA==