diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts
index bdee578f..26570d76 100644
--- a/src/main/base/browserwindow.ts
+++ b/src/main/base/browserwindow.ts
@@ -75,6 +75,7 @@ export class BrowserWindow {
         "pages/plugin-renderer",
         "pages/oobe",
         "pages/cider-profile",
+        "components/c2-upgrade",
         "components/app-content",
         "components/sidebar",
         "components/mediaitem-artwork",
diff --git a/src/renderer/assets/c1-c2.png b/src/renderer/assets/c1-c2.png
new file mode 100644
index 00000000..1a1619f3
Binary files /dev/null and b/src/renderer/assets/c1-c2.png differ
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 87ee858f..e7682416 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -190,6 +190,7 @@ const app = new Vue({
       windowControlPosition: "right",
       contentAreaScrolling: true,
       showCursor: false,
+      noC2Upgrade: localStorage.getItem("noC2Upgrade") == "true" ? true : false,
     },
     collectionList: {
       response: {},
@@ -220,6 +221,7 @@ const app = new Vue({
       moreInfo: false,
       airplayPW: false,
       settings: false,
+      c2Upgrade: false,
     },
     socialBadges: {
       badgeMap: {},
@@ -1283,6 +1285,15 @@ const app = new Vue({
       if (this.cfg.general.themeUpdateNotification && !this.isDev) {
         this.checkForThemeUpdates();
       }
+
+      if (!localStorage.getItem("noC2Startup")) {
+        const c2UpgradeDate = 1688172351000;
+        if (Date.now() <= c2UpgradeDate) {
+          setTimeout(() => {
+            app.modals.c2Upgrade = true;
+          }, 2000);
+        }
+      }
     },
     setWindowScaleFactor() {
       let scale = (((window.devicePixelRatio * window.innerWidth) / 1280) * window.innerHeight) / 720;
@@ -1295,6 +1306,9 @@ const app = new Vue({
       }
       document.documentElement.style.setProperty("--windowRelativeScale", scale);
     },
+    c2offer() {
+      app.modals.c2Upgrade = true;
+    },
     showFoo(querySelector, time) {
       clearTimeout(this.idleTimer);
       if (this.idleState == true) {
diff --git a/src/renderer/views/app/app-navigation.ejs b/src/renderer/views/app/app-navigation.ejs
index bf6da9dc..098ee2bd 100644
--- a/src/renderer/views/app/app-navigation.ejs
+++ b/src/renderer/views/app/app-navigation.ejs
@@ -1,28 +1,29 @@
-<div class="app-navigation" v-cloak>
+<div
+  class="app-navigation"
+  v-cloak>
   <transition name="wpfade">
-    <div class="usermenu-container" v-if="chrome.menuOpened">
+    <div
+      class="usermenu-container"
+      v-if="chrome.menuOpened">
       <div class="usermenu-body">
-        <button class="app-sidebar-button" style="width: 100%" @click="appRoute('apple-account-settings')">
-          <img class="sidebar-user-icon" loading="lazy"
+        <button
+          class="app-sidebar-button"
+          style="width: 100%"
+          @click="appRoute('apple-account-settings')">
+          <img
+            class="sidebar-user-icon"
+            loading="lazy"
             :src="getMediaItemArtwork(chrome.hideUserInfo ? './assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)" />
 
-          <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
+          <div
+            class="sidebar-user-text"
+            v-if="!chrome.hideUserInfo">
             <template v-if="chrome.userinfo.id || mk.isAuthorized">
               <div class="fullname text-overflow-elipsis">
-                {{
-                chrome.userinfo != null &&
-                chrome.userinfo.attributes != null
-                ? chrome.userinfo.attributes.name ?? ""
-                : ""
-                }}
+                {{ chrome.userinfo != null && chrome.userinfo.attributes != null ? chrome.userinfo.attributes.name ?? "" : "" }}
               </div>
               <div class="handle-text text-overflow-elipsis">
-                {{
-                chrome.userinfo != null &&
-                chrome.userinfo.attributes != null
-                ? chrome.userinfo.attributes.handle ?? ""
-                : ""
-                }}
+                {{ chrome.userinfo != null && chrome.userinfo.attributes != null ? chrome.userinfo.attributes.handle ?? "" : "" }}
               </div>
             </template>
             <template v-else>
@@ -31,88 +32,102 @@
               </div>
             </template>
           </div>
-          <div class="sidebar-user-text" v-else>
+          <div
+            class="sidebar-user-text"
+            v-else>
             {{ $root.getLz("app.name") }}
           </div>
         </button>
         <!-- Use 20px SVG for usermenu icon -->
-        <button class="usermenu-item" v-if="cfg.general.privateEnabled" @click="cfg.general.privateEnabled = false">
-          <span class="usermenu-item-icon">
-            <%- include("../svg/x.svg") %>
-          </span>
-          <span class="usermenu-item-name">{{
-            $root.getLz("term.disablePrivateSession")
-            }}</span>
+        <button
+          class="usermenu-item"
+          v-if="cfg.general.privateEnabled"
+          @click="cfg.general.privateEnabled = false">
+          <span class="usermenu-item-icon"> <%- include("../svg/x.svg") %> </span>
+          <span class="usermenu-item-name">{{ $root.getLz("term.disablePrivateSession") }}</span>
         </button>
-        <button class="usermenu-item" @click="appRoute('remote-pair')">
-          <span class="usermenu-item-icon">
-            <%- include("../svg/smartphone.svg") %>
-          </span>
-          <span class="usermenu-item-name">{{
-            $root.getLz("action.showWebRemoteQR")
-            }}</span>
+        <button
+          class="usermenu-item"
+          @click="appRoute('remote-pair')">
+          <span class="usermenu-item-icon"> <%- include("../svg/smartphone.svg") %> </span>
+          <span class="usermenu-item-name">{{ $root.getLz("action.showWebRemoteQR") }}</span>
         </button>
-        <button class="usermenu-item" @click="modals.castMenu = true">
-          <span class="usermenu-item-icon">
-            <%- include("../svg/cast.svg") %>
-          </span>
-          <span class="usermenu-item-name">{{
-            $root.getLz("term.cast")
-            }}</span>
+        <button
+          class="usermenu-item"
+          @click="modals.castMenu = true">
+          <span class="usermenu-item-icon"> <%- include("../svg/cast.svg") %> </span>
+          <span class="usermenu-item-name">{{ $root.getLz("term.cast") }}</span>
         </button>
-        <button class="usermenu-item" @click="modals.audioSettings = true">
-          <span class="usermenu-item-icon">
-            <%- include("../svg/headphones.svg") %>
-          </span>
-          <span class="usermenu-item-name">{{
-            $root.getLz("term.audioSettings")
-            }}</span>
+        <button
+          class="usermenu-item"
+          @click="modals.audioSettings = true">
+          <span class="usermenu-item-icon"> <%- include("../svg/headphones.svg") %> </span>
+          <span class="usermenu-item-name">{{ $root.getLz("term.audioSettings") }}</span>
         </button>
-        <button class="usermenu-item" v-if="pluginInstalled" @click="modals.pluginMenu = true">
-          <span class="usermenu-item-icon">
+        <button
+          class="usermenu-item"
+          v-if="pluginInstalled"
+          @click="modals.pluginMenu = true">
+          <span class="usermenu-item-icon"> <%- include("../svg/grid.svg") %> </span>
+          <span class="usermenu-item-name">{{ $root.getLz("term.plugin") }}</span>
+        </button>
+        <button
+          class="usermenu-item"
+          @click="appRoute('about')">
+          <span class="usermenu-item-icon"> <%- include("../svg/info.svg") %> </span>
+          <span class="usermenu-item-name">{{ $root.getLz("term.about") }}</span>
+        </button>
+        <button
+          class="usermenu-item"
+          @click="modals.settings = true">
+          <span class="usermenu-item-icon"> <%- include("../svg/settings.svg") %> </span>
+          <span class="usermenu-item-name">{{ $root.getLz("term.settings") }}</span>
+        </button>
+        <button
+          class="usermenu-item"
+          v-for="entry in $root.pluginMenuTopEntries"
+          @click="entry.onClick()">
+          <span
+            class="usermenu-item-icon"
+            style="right: 2.5px">
             <%- include("../svg/grid.svg") %>
           </span>
-          <span class="usermenu-item-name">{{
-            $root.getLz("term.plugin")
-            }}</span>
+          <span class="usermenu-item-name">{{ entry.name }}</span>
         </button>
-        <button class="usermenu-item" @click="appRoute('about')">
-          <span class="usermenu-item-icon">
-            <%- include("../svg/info.svg") %>
-          </span>
-          <span class="usermenu-item-name">{{
-            $root.getLz("term.about")
-            }}</span>
-        </button>
-        <button class="usermenu-item" @click="modals.settings = true">
-          <span class="usermenu-item-icon">
-            <%- include("../svg/settings.svg") %>
-          </span>
-          <span class="usermenu-item-name">{{
-            $root.getLz("term.settings")
-            }}</span>
-        </button>
-        <button class="usermenu-item" v-for="entry in $root.pluginMenuTopEntries" @click="entry.onClick()">
-          <span class="usermenu-item-icon" style="right: 2.5px">
-            <%- include("../svg/grid.svg") %>
-          </span>
-          <span class="usermenu-item-name">{{entry.name}}</span>
-        </button>
-        <button class="usermenu-item" @click="unauthorize()">
-          <span class="usermenu-item-icon" style="right: 2.5px">
+        <button
+          class="usermenu-item"
+          @click="unauthorize()">
+          <span
+            class="usermenu-item-icon"
+            style="right: 2.5px">
             <%- include("../svg/log-out.svg") %>
           </span>
-          <span class="usermenu-item-name">{{
-            $root.getLz("term.logout")
-            }}</span>
+          <span class="usermenu-item-name">{{ $root.getLz("term.logout") }}</span>
         </button>
-        <button class="usermenu-item" @click="quit()">
-          <span class="usermenu-item-icon" style="right: 2.5px">
+        <button
+          class="usermenu-item"
+          @click="quit()">
+          <span
+            class="usermenu-item-icon"
+            style="right: 2.5px">
             <%- include("../svg/x.svg") %>
           </span>
-          <span class="usermenu-item-name">{{
-            $root.getLz("term.quit")
-            }}</span>
+          <span class="usermenu-item-name">{{ $root.getLz("term.quit") }}</span>
+        </button>
+        <button
+          v-if="!chrome.noC2Upgrade"
+          class="usermenu-item"
+          @click="c2offer()">
+          <span
+            class="usermenu-item-icon"
+            style="right: 1.5px">
+            <img
+              class="sidebar-user-icon"
+              loading="lazy"
+              style="height: 16px; width: 16px"
+              src="./assets/logocut.png" />
+          </span>
+          <span class="usermenu-item-name">Cider 2 Upgrade</span>
         </button>
       </div>
     </div>
@@ -122,30 +137,48 @@
   </transition>
   <app-content-area></app-content-area>
   <transition name="drawertransition">
-    <div class="app-drawer"
+    <div
+      class="app-drawer"
       v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0">
       <div class="bgArtworkMaterial">
         <div class="bg-artwork-container">
-          <img v-if="(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork a"
-            :src="$store.state.artwork.playerLCD">
-          <img v-if="(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork b"
-            :src="$store.state.artwork.playerLCD">
-          <img v-if="!(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork no-animation"
-            :src="$store.state.artwork.playerLCD">
+          <img
+            v-if="(cfg.visual.bg_artwork_rotation && animateBackground)"
+            class="bg-artwork a"
+            :src="$store.state.artwork.playerLCD" />
+          <img
+            v-if="(cfg.visual.bg_artwork_rotation && animateBackground)"
+            class="bg-artwork b"
+            :src="$store.state.artwork.playerLCD" />
+          <img
+            v-if="!(cfg.visual.bg_artwork_rotation && animateBackground)"
+            class="bg-artwork no-animation"
+            :src="$store.state.artwork.playerLCD" />
         </div>
       </div>
-      <lyrics-view v-if="drawer.panel == 'lyrics'" :time="mk.currentPlaybackTime - lyricOffset" :lyrics="lyrics"
+      <lyrics-view
+        v-if="drawer.panel == 'lyrics'"
+        :time="mk.currentPlaybackTime - lyricOffset"
+        :lyrics="lyrics"
         :richlyrics="richlyrics"></lyrics-view>
-      <div v-if="drawer.panel == 'lyrics'" class="lyric-footer">
-        <button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ?
-          $root.getLz('term.defaultView'): $root.getLz('term.fullscreenView')}}
+      <div
+        v-if="drawer.panel == 'lyrics'"
+        class="lyric-footer">
+        <button
+          class="md-btn"
+          @click="modularUITest(!fullscreenLyrics)">
+          {{ fullscreenLyrics ? $root.getLz("term.defaultView") : $root.getLz("term.fullscreenView") }}
         </button>
       </div>
     </div>
   </transition>
   <transition name="drawertransition">
-    <div class="app-drawer" v-if="drawer.open && drawer.panel == 'queue'">
-      <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
+    <div
+      class="app-drawer"
+      v-if="drawer.open && drawer.panel == 'queue'">
+      <cider-queue
+        ref="queue"
+        v-if="drawer.panel == 'queue'"></cider-queue>
     </div>
   </transition>
 </div>
diff --git a/src/renderer/views/app/panels.ejs b/src/renderer/views/app/panels.ejs
index da47e60f..5da27c0c 100644
--- a/src/renderer/views/app/panels.ejs
+++ b/src/renderer/views/app/panels.ejs
@@ -1,136 +1,201 @@
-<cider-menu-panel v-if="menuPanel.visible">
-</cider-menu-panel>
+<cider-menu-panel v-if="menuPanel.visible"> </cider-menu-panel>
 <transition name="wpfade">
-    <div class="bg-artwork-container" v-if="cfg.visual.window_background_style == 'artwork'"
-         :class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
-        <img @load="chrome.artworkReady = true" class="bg-artwork a ">
-        <img class="bg-artwork b">
-    </div>
+  <div
+    class="bg-artwork-container"
+    v-if="cfg.visual.window_background_style == 'artwork'"
+    :class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
+    <img
+      @load="chrome.artworkReady = true"
+      class="bg-artwork a" />
+    <img class="bg-artwork b" />
+  </div>
 </transition>
 <transition name="wpfade">
-    <div class="bg-artwork--placeholder"></div>
+  <div class="bg-artwork--placeholder"></div>
 </transition>
 <transition name="modal">
-    <add-to-playlist :playlists="playlists.listing" v-if="modals.addToPlaylist"></add-to-playlist>
+  <c2-upgrade
+    v-if="modals.c2Upgrade"></c2-upgrade>
 </transition>
 <transition name="modal">
-    <audio-controls v-if="modals.audioControls"></audio-controls>
+  <add-to-playlist
+    :playlists="playlists.listing"
+    v-if="modals.addToPlaylist"></add-to-playlist>
 </transition>
 <transition name="modal">
-    <audio-playbackrate v-if="modals.audioPlaybackRate"></audio-playbackrate>
+  <audio-controls v-if="modals.audioControls"></audio-controls>
 </transition>
 <transition name="modal">
-    <audio-settings v-if="modals.audioSettings"></audio-settings>
+  <audio-playbackrate v-if="modals.audioPlaybackRate"></audio-playbackrate>
 </transition>
 <transition name="modal">
-    <castmenu v-if="modals.castMenu"></castmenu>
+  <audio-settings v-if="modals.audioSettings"></audio-settings>
 </transition>
 <transition name="modal">
-    <pathmenu v-if="modals.pathMenu"></pathmenu>
+  <castmenu v-if="modals.castMenu"></castmenu>
 </transition>
 <transition name="modal">
-    <airplay-modal v-if="modals.airplayPW"></airplay-modal>
+  <pathmenu v-if="modals.pathMenu"></pathmenu>
 </transition>
 <transition name="modal">
-    <plugin-menu v-if="modals.pluginMenu"></plugin-menu>
+  <airplay-modal v-if="modals.airplayPW"></airplay-modal>
 </transition>
 <transition name="modal">
-    <settings-window v-if="modals.settings"></settings-window>
+  <plugin-menu v-if="modals.pluginMenu"></plugin-menu>
 </transition>
 <transition name="modal">
-    <eq-view v-if="modals.equalizer"></eq-view>
+  <settings-window v-if="modals.settings"></settings-window>
 </transition>
 <transition name="modal">
-    <qrcode-modal v-if="modals.qrcode" :src="webremoteqr" :url="webremoteurl"></qrcode-modal>
+  <eq-view v-if="modals.equalizer"></eq-view>
 </transition>
 <transition name="modal">
-    <moreinfo-modal v-if="modals.moreInfo" :data="moreinfodata"></moreinfo-modal>
+  <qrcode-modal
+    v-if="modals.qrcode"
+    :src="webremoteqr"
+    :url="webremoteurl"></qrcode-modal>
 </transition>
-<div id="apple-music-video-container" :class="{'mini': mvViewMode == 'mini'}">
-    <div id="apple-music-video-player-controls">
-        <div id="player-exit" title="Close" @click="exitMV();fullscreen(false);">
-            <svg fill="white" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
-                 aria-role="presentation" focusable="false" @click="exitMV();fullscreen(false);">
-                <path
-                        d="M10.5 21C4.724 21 0 16.275 0 10.5S4.724 0 10.5 0 21 4.725 21 10.5 16.276 21 10.5 21zm-3.543-5.967a.96.96 0 00.693-.295l2.837-2.842 2.85 2.842c.167.167.41.295.693.295.552 0 1.001-.461 1.001-1.012 0-.281-.115-.512-.295-.704L11.899 10.5l2.85-2.855a.875.875 0 00.295-.68c0-.55-.45-.998-1.001-.998a.871.871 0 00-.668.295l-2.888 2.855-2.862-2.843a.891.891 0 00-.668-.281.99.99 0 00-1.001.986c0 .269.116.512.295.678L9.088 10.5l-2.837 2.843a.926.926 0 00-.295.678c0 .551.45 1.012 1.001 1.012z"
-                        fill-rule="nonzero" />
-            </svg>
-        </div>
-        <div id="captions" v-if="lyricon && mvViewMode == 'full'">{{((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] &&
-            lyrics[currentLyricsLine].line ) ?
-            lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : '') + ((lyricon) ?
-            ((lyrics.length
-            > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ) ?
-            (lyrics[currentLyricsLine].translation ? ('\n\r' + lyrics[currentLyricsLine].translation) : ""): "")
-            :
-            '')}}
-        </div>
-        <div class="playback-info music-player-info">
-            <div class="song-artist-album-content" v-if="mvViewMode == 'full'"
-                 style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
-                <div class="song-artist" style="display: inline-block">
-                    {{ mk.nowPlayingItem?.attributes?.artistName ?? '' }}
-                </div>
-            </div>
-            <div class="song-name" v-if="mvViewMode == 'full'">
-                {{ mk.nowPlayingItem?.attributes?.name ?? '' }}
-                <div class="explicit-icon"
-                     v-if="mk.nowPlayingItem?.attributes?.contentRating == 'explicit'"
-                     style="display: inline-block"></div>
-            </div>
-            <div class="song-progress" v-if="mvViewMode == 'full'">
-                <p style="width: auto">{{ convertTime(getSongProgress()) }}</p>
-                <input type="range" step="0.01" min="0" :style="progressBarStyle()" style="width: 95%"
-                       @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()">
-                <p style="width: auto">{{ convertTime(mk.currentPlaybackDuration) }}
-            </div>
-            <div class="app-chrome-item display--large">
-                <div class="app-chrome-item volume display--large" v-if="mvViewMode == 'full'">
-                    <button class="volume-button--small volume" @click="muteButtonPressed()"
-                            :class="{'active': this.cfg.audio.volume == 0}"
-                            :title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
-                            v-b-tooltip.hover></button>
-                    <input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0"
-                           :max="cfg.audio.maxVolume"
-                           v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()"
-                           v-b-tooltip.hover :title="formatVolumeTooltip()">
-                </div>
-                <template v-if="mvViewMode == 'full'">
-                <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"
-                        :title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
-                <button class="playback-button play" @click="mk.play()" v-else
-                        :title="$root.getLz('term.play')" v-b-tooltip.hover></button>
-                </template>
-                <div class="app-chrome-item generic" v-if="mvViewMode == 'full'">
-                    <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
-                        <button class="playback-button--small lyrics"
-                                :title="$root.getLz('term.lyrics')"
-                                v-b-tooltip.hover
-                                :class="{'active': drawer.panel == 'lyrics'}"
-                                @click="invokeDrawer('lyrics')"></button>
-                    </template>
-                    <template v-else>
-                        <button class="playback-button--small lyrics"
-                                :style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
-                    </template>
-                </div>
-                <div id="player-pip" :class="{'mini': mvViewMode == 'mini'}"
-                     @click="pip()"
-                     title="Picture-in-Picture"
-                     v-b-tooltip.hover>
-                    <%- include("../svg/pip.svg") %>
-                </div>
-                <div id="player-fullscreen" v-if="mvViewMode == 'full'"
-                     @click="fullscreen(!fullscreenState, true)"
-                     title="Fullscreen"
-                     v-b-tooltip.hover>
-                    <%- include("../svg/fullscreen.svg") %>
-                </div>
-            </div>
-        </div>
+<transition name="modal">
+  <moreinfo-modal
+    v-if="modals.moreInfo"
+    :data="moreinfodata"></moreinfo-modal>
+</transition>
+<div
+  id="apple-music-video-container"
+  :class="{'mini': mvViewMode == 'mini'}">
+  <div id="apple-music-video-player-controls">
+    <div
+      id="player-exit"
+      title="Close"
+      @click="exitMV();fullscreen(false);">
+      <svg
+        fill="white"
+        xmlns="http://www.w3.org/2000/svg"
+        width="21"
+        height="21"
+        viewBox="0 0 21 21"
+        aria-role="presentation"
+        focusable="false"
+        @click="exitMV();fullscreen(false);">
+        <path
+          d="M10.5 21C4.724 21 0 16.275 0 10.5S4.724 0 10.5 0 21 4.725 21 10.5 16.276 21 10.5 21zm-3.543-5.967a.96.96 0 00.693-.295l2.837-2.842 2.85 2.842c.167.167.41.295.693.295.552 0 1.001-.461 1.001-1.012 0-.281-.115-.512-.295-.704L11.899 10.5l2.85-2.855a.875.875 0 00.295-.68c0-.55-.45-.998-1.001-.998a.871.871 0 00-.668.295l-2.888 2.855-2.862-2.843a.891.891 0 00-.668-.281.99.99 0 00-1.001.986c0 .269.116.512.295.678L9.088 10.5l-2.837 2.843a.926.926 0 00-.295.678c0 .551.45 1.012 1.001 1.012z"
+          fill-rule="nonzero" />
+      </svg>
     </div>
-    <div id="apple-music-video-player"></div>
+    <div
+      id="captions"
+      v-if="lyricon && mvViewMode == 'full'">
+      {{ (lyricon ? (lyrics.length > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ? lyrics[currentLyricsLine].line.replace("lrcInstrumental", "") : "") : "") + (lyricon ? (lyrics.length > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ? (lyrics[currentLyricsLine].translation ? "\n\r" + lyrics[currentLyricsLine].translation : "") : "") : "") }}
+    </div>
+    <div class="playback-info music-player-info">
+      <div
+        class="song-artist-album-content"
+        v-if="mvViewMode == 'full'"
+        style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap">
+        <div
+          class="song-artist"
+          style="display: inline-block">
+          {{ mk.nowPlayingItem?.attributes?.artistName ?? "" }}
+        </div>
+      </div>
+      <div
+        class="song-name"
+        v-if="mvViewMode == 'full'">
+        {{ mk.nowPlayingItem?.attributes?.name ?? "" }}
+        <div
+          class="explicit-icon"
+          v-if="mk.nowPlayingItem?.attributes?.contentRating == 'explicit'"
+          style="display: inline-block"></div>
+      </div>
+      <div
+        class="song-progress"
+        v-if="mvViewMode == 'full'">
+        <p style="width: auto">{{ convertTime(getSongProgress()) }}</p>
+        <input
+          type="range"
+          step="0.01"
+          min="0"
+          :style="progressBarStyle()"
+          style="width: 95%"
+          @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()" />
+        <p style="width: auto">{{ convertTime(mk.currentPlaybackDuration) }}</p>
+      </div>
+
+      <div class="app-chrome-item display--large">
+        <div
+          class="app-chrome-item volume display--large"
+          v-if="mvViewMode == 'full'">
+          <button
+            class="volume-button--small volume"
+            @click="muteButtonPressed()"
+            :class="{'active': this.cfg.audio.volume == 0}"
+            :title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
+            v-b-tooltip.hover></button>
+          <input
+            type="range"
+            @wheel="volumeWheel"
+            :step="cfg.audio.volumeStep"
+            min="0"
+            :max="cfg.audio.maxVolume"
+            v-model="mk.volume"
+            v-if="typeof mk.volume != 'undefined'"
+            @change="checkMuteChange()"
+            v-b-tooltip.hover
+            :title="formatVolumeTooltip()" />
+        </div>
+        <template v-if="mvViewMode == 'full'">
+          <button
+            class="playback-button pause"
+            @click="mk.pause()"
+            v-if="mk.isPlaying"
+            :title="$root.getLz('term.pause')"
+            v-b-tooltip.hover></button>
+          <button
+            class="playback-button play"
+            @click="mk.play()"
+            v-else
+            :title="$root.getLz('term.play')"
+            v-b-tooltip.hover></button>
+        </template>
+        <div
+          class="app-chrome-item generic"
+          v-if="mvViewMode == 'full'">
+          <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
+            <button
+              class="playback-button--small lyrics"
+              :title="$root.getLz('term.lyrics')"
+              v-b-tooltip.hover
+              :class="{'active': drawer.panel == 'lyrics'}"
+              @click="invokeDrawer('lyrics')"></button>
+          </template>
+          <template v-else>
+            <button
+              class="playback-button--small lyrics"
+              :style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
+          </template>
+        </div>
+        <div
+          id="player-pip"
+          :class="{'mini': mvViewMode == 'mini'}"
+          @click="pip()"
+          title="Picture-in-Picture"
+          v-b-tooltip.hover>
+          <%- include("../svg/pip.svg") %>
+        </div>
+        <div
+          id="player-fullscreen"
+          v-if="mvViewMode == 'full'"
+          @click="fullscreen(!fullscreenState, true)"
+          title="Fullscreen"
+          v-b-tooltip.hover>
+          <%- include("../svg/fullscreen.svg") %>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="apple-music-video-player"></div>
 </div>
diff --git a/src/renderer/views/components/c2-upgrade.ejs b/src/renderer/views/components/c2-upgrade.ejs
new file mode 100644
index 00000000..bfb977b5
--- /dev/null
+++ b/src/renderer/views/components/c2-upgrade.ejs
@@ -0,0 +1,104 @@
+<template
+  type="text/x-template"
+  id="c2-upgrade">
+  <div
+    class="modal-fullscreen addtoplaylist-panel"
+    @click.self="closePromo"
+    @contextmenu.self="closePromo">
+    <div class="modal-window">
+      <div class="modal-header">
+        <div class="modal-title">Cider 2 Free Upgrade - Last Call!</div>
+        <button
+          class="close-btn"
+          @click="closePromo"
+          :aria-label="app.getLz('action.close')"></button>
+      </div>
+      <div
+        class="modal-content"
+        style="text-align: center">
+        <img
+          src="./assets/c1-c2.png"
+          style="margin: 12px 22px 0; pointer-events: none" />
+        <p
+          class="p-3"
+          style="font-size: 14px">
+          Earlier this year, we released Cider 2, a complete rewrite of Cider.
+          <br />Cider 2 is a paid upgrade, but we're offering it for free to all Cider users who purchased Cider 1 <b>on or before November 30th, 2022.</b>
+
+          <br />
+          <br />
+          If you are eligible for a free upgrade, you can download Cider 2 from the Microsoft Store.
+          <br />
+
+          <br />
+          <b> The cutoff date for this upgrade is: <br />June, 30th 2023. </b>
+          <br />
+          <br />
+          <label>
+            <input
+              type="checkbox"
+              style="accent-color: var(--keyColor)"
+              v-model="showOnStartup" />
+            Show this offer again on next startup
+          </label>
+          <template v-if="hasSeen">
+            <br />
+            <label>
+              <input
+                type="checkbox"
+                style="accent-color: var(--keyColor)"
+                v-model="removeItemFromMainMenu" />
+              Remove upgrade item from Main Menu
+            </label>
+          </template>
+        </p>
+      </div>
+      <div
+        class="modal-search"
+        style="padding: 12px">
+        <button
+          class="btn btn-primary"
+          @click="openStore"
+          style="width: 100%">
+          Open in Microsoft Store
+        </button>
+        <button
+          class="btn btn-secondary"
+          @click="closePromo"
+          style="width: 100%; margin-top: 1em">
+          Close
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  Vue.component("c2-upgrade", {
+    template: "#c2-upgrade",
+    data: function () {
+      return {
+        app: this.$root,
+        showOnStartup: true,
+        hasSeen: localStorage.getItem("seenC2Upgrade"),
+        removeItemFromMainMenu: false,
+      };
+    },
+    methods: {
+      closePromo() {
+        this.app.modals.c2Upgrade = false;
+        if (!this.showOnStartup) {
+          localStorage.setItem("noC2Startup", true);
+        }
+        if (this.removeItemFromMainMenu) {
+          localStorage.setItem("noC2Upgrade", true);
+          app.chrome.noC2Upgrade = true;
+        }
+        localStorage.setItem("seenC2Upgrade", true);
+      },
+      openStore() {
+        window.open("https://www.microsoft.com/store/productId/9PL8WPH0QK9M");
+      },
+    },
+  });
+</script>