diff --git a/src/main/base/win.ts b/src/main/base/win.ts
index 9f7586c1..724863d4 100644
--- a/src/main/base/win.ts
+++ b/src/main/base/win.ts
@@ -406,6 +406,13 @@ export class Win {
             this.win.webContents.setZoomFactor(parseFloat(scale));
         });
 
+        // Set scale
+        electron.ipcMain.on("windowresize", (event, width, height, lock = false) => {          
+            this.win.setMinimumSize(300,300);
+            this.win.setContentSize(width, height);
+            this.win.setResizable(!lock);
+        });
+
         //Fullscreen
         electron.ipcMain.on('setFullScreen', (event, flag) => {
             this.win.setFullScreen(flag)
diff --git a/src/renderer/assets/pip.svg b/src/renderer/assets/pip.svg
new file mode 100644
index 00000000..76253ddc
--- /dev/null
+++ b/src/renderer/assets/pip.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 fill="white" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+	<path id="XMLID_11_" d="M418.5,139.4H232.4v139.8h186.1V139.4z M464.8,46.7H46.3C20.5,46.7,0,68.1,0,93.1v325.9
+		c0,25.8,21.4,46.3,46.3,46.3h419.4c25.8,0,46.3-20.5,46.3-46.3V93.1C512,67.2,490.6,46.7,464.8,46.7z M464.8,418.9H46.3V92.2h419.4
+		v326.8H464.8z"/>
+</svg>
diff --git a/src/renderer/index.js b/src/renderer/index.js
index ff7ce7be..0602ac8b 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -259,6 +259,8 @@ const app = new Vue({
                 platform: "web"
             }
         },
+        tmpHeight : '',
+        tmpWidth : '',
         tmpVar: [],
         notification: false,
         chrome: {
@@ -3275,6 +3277,17 @@ const app = new Vue({
                 app.appMode = 'player';
             }
         },
+        miniPlayer(flag) {
+            if (flag) {
+                this.tmpWidth = screen.width;
+                this.tmpHeight = screen.height;
+                ipcRenderer.send('windowresize', 350, 350, false)
+                app.appMode = 'mini';
+            } else {
+                ipcRenderer.send('windowresize', this.tmpWidth, this.tmpHeight, false)
+                app.appMode = 'player';
+            }
+        },
         formatTimezoneOffset: (e = new Date) => {
             let leadingZeros = (e, s = 2) => {
                 let n = "" + e;
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 0d54cfb2..1f314d35 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1511,6 +1511,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   background-image: url("./assets/cast_white.svg");
 }
 
+.playback-button--small.miniplayer {
+  background-image: url("./assets/pip.svg");
+}
+
 .playback-button--small.queue {
   background-image: url("./assets/list.svg");
 }
@@ -4693,6 +4697,377 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+.mini-view {
+  width: 100%;
+  height: 100%;
+  background: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .fs-row {
+    flex-grow: 1;
+  }
+
+  .playback-button--small.active {
+    background-color: rgba(200, 200, 200, 0.7);
+  }
+
+  .playback-button--small {
+    opacity: 0.7;
+  }
+
+  .right-col {
+    height: 50vh;
+  }
+
+  @media only screen and (max-width: 1023px) {
+    .display--large {
+      display: flex !important;
+    }
+  }
+
+  .display--large {
+    display: flex;
+
+    .slider {
+      width: 100%;
+      z-index: 1;
+    }
+
+    .input-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%
+    }
+
+    .volume-button--small {
+      border-radius: 6px;
+      color: inherit;
+      background-size: 16px;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-color: transparent;
+      height: 15px;
+      width: 30px;
+      border: 0px;
+      box-shadow: unset;
+      opacity: 0.70;
+      background-image: url("./assets/feather/volume-2.svg");
+    }
+
+    .volume-button--small:active {
+      transform: scale(0.9);
+    }
+    
+    .volume-button--small.active {
+      background-image: url("./assets/feather/volume.svg");
+    }
+
+    input[type=range] {
+      -webkit-appearance: none;
+      height: 4px;
+      background: rgba(255, 255, 255, 0.4);
+      border-radius: 5px;
+      background-size: 70% 100%;
+      background-repeat: no-repeat;
+
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        height: 14px;
+        width: 14px;
+        border-radius: 50%;
+        background: rgb(50 50 50);
+        cursor: default;
+        box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
+        transition: all var(--appleTransition);
+      }
+      
+      &::-webkit-slider-thumb:hover {
+        background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
+        transform: scale(1.2);
+      }
+      
+      &::-webkit-slider-thumb:active {
+        background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
+        transform: scale(1);
+      }
+
+      &::-webkit-slider-runnable-track {
+        -webkit-appearance: none;
+        box-shadow: none;
+        border: none;
+        background: transparent;
+      }
+    }
+  }
+
+
+  .background {
+    position: absolute;
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+    -webkit-user-select: none;
+    -webkit-app-region: drag;
+
+    .bgArtworkMaterial {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+
+      .bg-artwork-container {
+        z-index: unset;
+      }
+
+      .bg-artwork-container .bg-artwork {
+        filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9);
+      }
+
+      .no-animation {
+        animation: unset;
+      }
+    }
+  }
+
+
+  .lyrics-col {
+
+    height: 62vh;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    width: 80%;
+
+    ::-webkit-scrollbar-thumb {
+      box-shadow: unset;
+    }
+
+    &:hover ::-webkit-scrollbar-thumb {
+      box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
+    }
+
+    .no-lyrics {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .lyric-line {
+      font-size: 35px;
+    }
+
+  }
+
+  .queue-col {
+
+    width: 60vh;
+    height: 50vh;
+
+    .queue-title {
+      opacity: 0.6;
+    }
+
+    .queue-panel > * {
+      z-index: 3;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      box-shadow: unset;
+    }
+
+    &:hover ::-webkit-scrollbar-thumb {
+      box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
+    }
+  }
+
+  .tab-toggles {
+    display: flex;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 15vh;
+    height: 5vh;
+    justify-content: space-evenly;
+
+    .volume {
+      background-image: url("./assets/feathers/volume.svg");
+      padding: 0.5vh;
+      width: 2vh;
+      height: 2vh;
+      background-origin: content-box;
+      background-repeat: no-repeat;
+    }
+
+    .queue {
+      background-image: url("./assets/list.svg");
+      padding: 0.5vh;
+      width: 2.5vh;
+      height: 2.5vh;
+      background-origin: content-box;
+      background-repeat: no-repeat;
+    }
+
+    .lyrics {
+      background-image: url("./assets/quote-right.svg");
+      padding: 0.5vh;
+      width: 2.5vh;
+      height: 2.5vh;
+      background-origin: content-box;
+      background-repeat: no-repeat;
+    }
+
+    .active {
+      background-color: rgba(200, 200, 200, 0.7);
+      border-radius: 3px;
+    }
+  }
+
+  .artwork-col {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    .artwork {
+      width: 50vh;
+      height: 50vh;
+      -webkit-app-region: no-drag;
+    }
+
+    .controls-parents {
+      width: 50vh;
+    }
+
+    .app-playback-controls {
+      -webkit-app-region: no-drag;
+
+      .song-artist, .song-name {
+        font-weight: 600;
+        text-align: center;
+        font-size: 0.9em;
+        height: 1.2em;
+        line-height: 0.9em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 360px;
+
+        .song-name-normal {
+          height: inherit;
+        }
+
+        &.song-artist-marquee {
+          > marquee {
+            //margin-bottom: -3px;
+          }
+        }
+      }
+
+      .song-artist {
+        font-size: 0.875em;
+        font-weight: 400;
+      }
+
+      .song-name {
+        width: unset !important;
+        margin-top: 0.15vh;
+        display: -webkit-box;
+        line-height: 1.2;
+        text-overflow: ellipsis;
+        text-align: center;
+      }
+    }
+
+    .app-playback-controls .playback-info {
+      margin-top: 0.5vh;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      position: relative;
+
+      input[type="range"] {
+        width: 100%;
+      }
+
+      > div {
+        width: 100%;
+        text-align: center;
+      }
+
+
+    }
+
+    .app-playback-controls .song-progress {
+      @bgColor: transparent;
+      //height: 16px;
+      position: absolute;
+      bottom: -1.5vh;
+      left: 0px;
+      background: @bgColor;
+
+      .song-duration p {
+        font-weight: 400;
+        font-size: 10px;
+        height: 1.2em;
+        line-height: 1.3em;
+        overflow: hidden;
+        margin: 0 0 0 0.25em;
+      }
+
+      &:hover {
+        > input[type=range] {
+          &::-webkit-slider-thumb {
+            opacity: 1;
+            transform: scale(1);
+            z-index: 1;
+          }
+        }
+      }
+
+      input[type=range] {
+        appearance: none;
+        width: 100%;
+        height: 4px;
+        background-color: rgb(200 200 200 / 10%);
+        border-radius: 2px;
+
+        &::-webkit-slider-thumb {
+          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);
+        }
+
+        &::-moz-range-thumb {
+          width: 8px;
+          height: 8px;
+          border-radius: 100%;
+          background: var(--keyColor);
+          cursor: default;
+        }
+      }
+    }
+
+    .control-buttons {
+      margin-top: 2vh;
+      display: inline-flex;
+      width: 100%;
+      justify-content: center;
+    }
+
+  }
+}
+
 /* Cider */
 
 .settings-page {
diff --git a/src/renderer/views/components/fullscreen.ejs b/src/renderer/views/components/fullscreen.ejs
index b93a27e5..21d3292a 100644
--- a/src/renderer/views/components/fullscreen.ejs
+++ b/src/renderer/views/components/fullscreen.ejs
@@ -26,7 +26,7 @@
                                 {{ app.mk.nowPlayingItem["attributes"]["name"] }}
                             </div>
                             <div
-                                 style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap; margin-top: 0.25vh;">
+                                 style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap; margin-top: 0.25vh; overflow: hidden;">
                                 <div class="item-navigate song-artist" style="display: inline-block;"
                                      @click="app.getNowPlayingItemDetailed(`artist`)">
                                     {{ app.mk.nowPlayingItem["attributes"]["artistName"] }}
diff --git a/src/renderer/views/components/miniplayer.ejs b/src/renderer/views/components/miniplayer.ejs
new file mode 100644
index 00000000..94b18eff
--- /dev/null
+++ b/src/renderer/views/components/miniplayer.ejs
@@ -0,0 +1,152 @@
+<script type="text/x-template" id="mini-view">
+    <div class="mini-view" tabindex="0">
+        <div class="background">
+        </div>    
+        <div class="col artwork-col">
+            <div class="artwork"  @click="app.miniPlayer(false)">
+                <mediaitem-artwork
+                        :size="600"
+                        :url="image ?? ''"
+                ></mediaitem-artwork>
+            </div>
+            <div class="controls-parents">
+            <template v-if="app.mkReady()">
+                <div class="app-playback-controls" @mouseover="app.chrome.progresshover = true"
+                     @mouseleave="app.chrome.progresshover = false" @contextmenu="app.nowPlayingContextMenu">
+                    <div class="playback-info">
+                        <div class="song-name">
+                            {{ app.mk.nowPlayingItem["attributes"]["name"] }}
+                        </div>
+                        <div
+                             style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap; margin-top: 0.25vh; overflow: hidden;">
+                            <div class="item-navigate song-artist" style="display: inline-block;"
+                                 @click="app.getNowPlayingItemDetailed(`artist`)">
+                                {{ app.mk.nowPlayingItem["attributes"]["artistName"] }}
+                            </div>
+                            <div class="song-artist item-navigate" style="display: inline-block;"
+                                 @click="app.getNowPlayingItemDetailed('album')">
+                                {{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ? (" — " +
+                                app.mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
+                            </div>
+                        </div>
+
+                        <div class="song-progress">
+                            <div class="song-duration" style="justify-content: space-between; height: 1px;"
+                                 :style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
+                                <p style="width: auto">{{ app.convertToMins(app.getSongProgress()) }}</p>
+                                <p style="width: auto">{{ app.convertToMins(app.mk.currentPlaybackDuration) }}</p>
+                            </div>
+
+                            <input type="range" step="0.01" min="0" :style="app.progressBarStyle()"
+                                   @input="app.playerLCD.desiredDuration = $event.target.value;app.playerLCD.userInteraction = true"
+                                   @mouseup="app.mk.seekToTime($event.target.value);app.playerLCD.desiredDuration = 0;app.playerLCD.userInteraction = false"
+                                   :max="app.mk.currentPlaybackDuration" :value="app.getSongProgress()">
+                        </div>
+                    </div>
+                <div class="control-buttons">    
+                    <div class="app-chrome-item">
+                        <button class="playback-button--small shuffle" v-if="app.mk.shuffleMode == 0"
+                                @click="app.mk.shuffleMode = 1"></button>
+                        <button class="playback-button--small shuffle active" v-else
+                                @click="app.mk.shuffleMode = 0"></button>
+                    </div>
+                    <div class="app-chrome-item">
+                        <button class="playback-button previous" @click="app.prevButton()"></button>
+                    </div>
+                    <div class="app-chrome-item">
+                        <button class="playback-button pause" @click="app.mk.pause()" v-if="app.mk.isPlaying"></button>
+                        <button class="playback-button play" @click="app.mk.play()" v-else></button>
+                    </div>
+                    <div class="app-chrome-item">
+                        <button class="playback-button next" @click="app.mk.skipToNextItem()"></button>
+                    </div>
+                    <div class="app-chrome-item">
+                        <button class="playback-button--small repeat" v-if="app.mk.repeatMode == 0"
+                                @click="app.mk.repeatMode = 1"></button>
+                        <button class="playback-button--small repeat active" @click="app.mk.repeatMode = 2"
+                                v-else-if="app.mk.repeatMode == 1"></button>
+                        <button class="playback-button--small repeat repeatOne" @click="app.mk.repeatMode = 0"
+                                v-else-if="app.mk.repeatMode == 2"></button>
+                    </div>
+                </div>
+                <div class="app-chrome-item volume display--large">
+                    <div class="input-container">
+                    <button class="volume-button--small volume" @click="app.muteButtonPressed()" :class="{'active': app.cfg.audio.volume == 0}"></button>
+                    <input type="range" class="slider" @wheel="app.volumeWheel" step="0.01" min="0" max="1" v-model="app.mk.volume"
+                           v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()">
+                    </div>       
+                </div>
+                </div>
+            </template>
+            </div>
+        </div>
+        <!-- <div class="row fs-row">
+           
+            <div class="col right-col" v-if="tabMode != ''">
+                 <div class="fs-info">
+                    <div>Name</div>
+                    <div>Name</div>
+                    <div>Name</div>
+                </div> 
+                <div class="lyrics-col" v-if="tabMode == 'lyrics'">
+                    <lyrics-view :yoffset="120" :time="time" :lyrics="lyrics"
+                    :richlyrics="richlyrics"></lyrics-view>
+                </div>
+                <div class="queue-col" v-if="tabMode == 'queue'">    
+                    <cider-queue v-if="tabMode == 'queue'" ref="queue" ></cider-queue>    
+                </div>
+            </div>
+        </div> -->
+        <!-- <div class="tab-toggles">
+            <div class="lyrics" :class="{active: tabMode == 'lyrics'}" @click="tabMode = (tabMode == 'lyrics') ? '' : 'lyrics'"></div>
+            <div class="queue"  :class="{active: tabMode == 'queue'}" @click="tabMode =  (tabMode == 'queue') ? '' :'queue'"></div>
+        </div>  -->
+    </div>
+ 
+
+
+</script>
+
+<script>
+    Vue.component('mini-view', {
+        template: '#mini-view',
+        props: {
+            time: {
+                type: Number,
+                required: false
+            },
+            lyrics: {
+                type: Array,
+                required: false
+            },
+            richlyrics: {
+                type: Array,
+                required: false
+            },
+            image: {
+                type: String,
+                required: false
+            },
+        },
+        data: function () {
+            return {
+                app: this.$root,
+                tabMode: "",
+            }
+        },
+        beforeMount() {
+            window.addEventListener('keyup', this.onEscapeKeyUp);
+        },
+        beforeDestroy() {
+            window.removeEventListener('keyup', this.onEscapeKeyUp)
+        },
+        methods: {
+            onEscapeKeyUp(event) {
+                if (event.which === 27) {
+                    app.miniPlayer(false);
+                    console.log('js')
+                }
+            },
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index cb13e468..18ff55e4 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -150,6 +150,10 @@
                             <%- include("svg/cast.svg") %>
                         </button>
                     </div>
+                    <div class="app-chrome-item generic">
+                        <button class="playback-button--small miniplayer"
+                        @click="drawer.open = false; miniPlayer(true)"></button>
+                    </div>
                     <div class="app-chrome-item generic">
                         <button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
                                 @click="invokeDrawer('queue')"></button>
@@ -593,6 +597,12 @@
                              :lyrics="lyrics" :richlyrics="richlyrics"></fullscreen-view>
         </div>
     </transition>
+    <transition name="fsModeSwitch">
+        <div class="fullscreen-view-container" v-if="appMode == 'mini'">
+            <mini-view :image="currentArtUrl.replace('50x50', '600x600')" :time="lyriccurrenttime"
+                             :lyrics="lyrics" :richlyrics="richlyrics"></mini-view>
+        </div>
+    </transition>
     <transition name="wpfade">
         <div class="bg-artwork-container" v-if="cfg.visual.window_background_style == 'artwork'"
              :class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
@@ -774,6 +784,10 @@
 <%- include('components/fullscreen')
 %>
 
+<!-- Miniplayer View -->
+<%- include('components/miniplayer')
+%>
+
 <script
         src="musickit.js?v=1"></script>
 <script>