diff --git a/src/App.vue b/src/App.vue
index 5dc74884..7fe4341f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,13 +20,19 @@
         <div id="acontent" v-element-size="updateContentElemSize">
             <div id="contentresizer" ref="appcontent"></div>
             <BalancerProvider>
-                <RouterView />
+                <RouterView v-slot="{ Component }">
+                    <Transition name="slide" mode="out-in">
+                        <component :is="Component" />
+                    </Transition>
+                </RouterView>
             </BalancerProvider>
         </div>
         <RightSideBar v-if="settings.use_sidebar && xl" />
+<RightSideBar v-if="settings.use_sidebar && xl" />
         <BottomBar />
         <!-- <BubbleManager /> -->
     </section>
+    <MobilePlayer v-if="isMobile" />
 </template>
 
 <script setup lang="ts">
@@ -54,6 +60,7 @@ import { xl, xxl } from "./composables/useBreakpoints";
 import ContextMenu from "@/components/ContextMenu.vue";
 import Modal from "@/components/modal.vue";
 import Notification from "@/components/Notification.vue";
+import MobilePlayer from "@/components/MobilePlayer.vue";
 
 // @app-grid-components
 import BottomBar from "@/components/BottomBar/BottomBar.vue";
@@ -176,4 +183,23 @@ export default defineComponent({
         display: none;
     }
 }
+
+.slide-enter-active,
+.slide-leave-active {
+    transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.slide-enter-from,
+.slide-leave-to {
+    opacity: 0;
+    transform: translateY(10px);
+}
+
+* {
+    -webkit-tap-highlight-color: transparent;
+}
+
+#app-grid {
+    overflow-x: hidden;
+}
 </style>
diff --git a/src/components/BottomBar/Left.vue b/src/components/BottomBar/Left.vue
index dd0d3ece..f8b8d69c 100644
--- a/src/components/BottomBar/Left.vue
+++ b/src/components/BottomBar/Left.vue
@@ -1,32 +1,24 @@
 <template>
-    <div v-auto-animate class="left-group">
+    <div ref="leftGroupRef" v-auto-animate class="left-group">
         <HeartSvg
             v-if="settings.use_np_img && !isMobile"
             :state="queue.currenttrack?.is_favorite"
             @handleFav="$emit('handleFav')"
         />
-        <RouterLink
+        <div
             v-else
             title="Go to Now Playing"
-            :to="{
-                name: Routes.nowPlaying,
-                params: {
-                    tab: 'home',
-                },
-                replace: true,
-            }"
             class="np-image rounded-sm no-scroll"
+            @click="goToNowPlaying"
         >
             <img :src="paths.images.thumb.small + queue.currenttrack?.image" alt="" />
-            <div class="expandicon">
-                <ExpandSvg />
-            </div>
-        </RouterLink>
+        </div>
         <div
             class="track-info"
             :style="{
                 color: getShift(colors.theme1, [0, -170]),
             }"
+            @click="goToNowPlaying"
         >
             <div v-tooltip class="title">
                 <span class="ellip">
@@ -47,16 +39,18 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useSwipe } from '@vueuse/core'
 import { paths } from '@/config'
 import { Routes } from '@/router'
 import { getShift } from '@/utils/colortools/shift'
 
 import useColorStore from '@/stores/colors'
-import { isLargerMobile, isMobile } from '@/stores/content-width'
+import { isLargerMobile, isMobile, isMobilePlayerOpen } from '@/stores/content-width'
 import useQStore from '@/stores/queue'
 import useSettingsStore from '@/stores/settings'
 
-import ExpandSvg from '@/assets/icons/expand.svg'
 import ArtistName from '@/components/shared/ArtistName.vue'
 import HotKeys from '../LeftSidebar/NP/HotKeys.vue'
 import HeartSvg from '../shared/HeartSvg.vue'
@@ -67,10 +61,34 @@ import ExplicitIcon from '@/assets/icons/explicit.svg'
 const queue = useQStore()
 const settings = useSettingsStore()
 const colors = useColorStore()
+const router = useRouter()
+const leftGroupRef = ref<HTMLElement | null>(null)
+
+const { lengthY } = useSwipe(leftGroupRef, {
+    onSwipeEnd(e, direction) {
+        if (direction === 'UP' && Math.abs(lengthY.value) > 30) {
+            goToNowPlaying()
+        }
+    },
+})
 
 defineEmits<{
     (e: 'handleFav'): void
 }>()
+
+function goToNowPlaying() {
+    if (isMobile.value) {
+        isMobilePlayerOpen.value = true
+        return
+    }
+
+    router.push({
+        name: Routes.nowPlaying,
+        params: {
+            tab: 'home',
+        },
+    })
+}
 </script>
 
 <style lang="scss">
@@ -87,44 +105,12 @@ defineEmits<{
     .np-image {
         position: relative;
         height: 3rem;
+        cursor: pointer;
 
         img {
             height: 100%;
         }
 
-        .expandicon {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(51, 51, 51, 0.6);
-
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            opacity: 0;
-            transition: opacity 0.2s ease-out, height 0.2s ease-out, transform 0.2s ease-out,
-                background-color 0.2s ease-out;
-
-            svg {
-                transform: rotate(-90deg) scale(0.92);
-            }
-        }
-
-        &:hover {
-            .expandicon {
-                transform: translateY(-$medium);
-                height: 130%;
-            }
-        }
-
-        &:active {
-            .expandicon {
-                background-color: rgba(51, 51, 51, 0.74);
-            }
-        }
-
         @include largePhones {
             flex-shrink: 0;
             margin-right: $medium;
@@ -143,6 +129,8 @@ defineEmits<{
     }
 
     .track-info {
+        cursor: pointer;
+
         .title {
             color: $white;
             display: flex;
@@ -185,3 +173,4 @@ defineEmits<{
     }
 }
 </style>
+
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index 8d8e5f82..0330a43e 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -67,7 +67,7 @@ context.$subscribe((mutation, state) => {
   top: 0;
   left: 0;
   width: 13rem;
-  z-index: 1000 !important;
+  z-index: 100001 !important;
   height: min-content;
   padding: $small;
   background: $context;
diff --git a/src/components/MobilePlayer.vue b/src/components/MobilePlayer.vue
new file mode 100644
index 00000000..6957e65b
--- /dev/null
+++ b/src/components/MobilePlayer.vue
@@ -0,0 +1,494 @@
+<template>
+    <div
+        ref="playerRef"
+        class="mobile-player"
+        :style="playerStyle"
+    >
+        <div class="drag-handle"></div>
+        
+        <DynamicScroller
+            ref="scrollerRef"
+            :items="scrollerItems"
+            :min-item-size="64"
+            class="scroller"
+            :class="{ isSmall, isMedium }"
+            style="height: 100%"
+        >
+            <template #before>
+                <div class="now-playing-header">
+                    <div class="centered">
+                        <div class="header-row">
+                            <button class="close-btn" @click="closePlayer">
+                                <ExpandSvg />
+                            </button>
+                            <PlayingFrom />
+                        </div>
+                        <div class="np-image">
+                            <img v-motion-fade class="rounded" :src="paths.images.thumb.large + queue.currenttrack?.image" />
+                        </div>
+                        <NowPlayingInfo @handle-fav="handleFav" />
+                        <Progress />
+                        
+                        <div class="time-row">
+                            <div class="time">{{ formatSeconds(queue.duration.current) }}</div>
+                            <div class="time">{{ formatSeconds(queue.duration.full) }}</div>
+                        </div>
+
+                        <div class="controls-row">
+                            <button title="Shuffle" @click="queue.shuffleQueue" class="control-btn shuffle">
+                                <ShuffleSvg />
+                            </button>
+                            
+                            <div class="hotkeys-wrapper">
+                                <HotKeys />
+                            </div>
+                            
+                            <button
+                                class="control-btn repeat"
+                                :class="{ 'repeat-disabled': settings.repeat == 'none' }"
+                                :title="settings.repeat == 'all' ? 'Repeat all' : settings.repeat == 'one' ? 'Repeat one' : 'No repeat'"
+                                @click="settings.toggleRepeatMode"
+                            >
+                                <RepeatOneSvg v-if="settings.repeat == 'one'" />
+                                <RepeatAllSvg v-else />
+                            </button>
+                        </div>
+                        <h3 class="nowplaying_title" v-if="queue.next">Up Next</h3>
+                        <SongItem
+                            v-if="queue.next"
+                            :track="queue.next"
+                            :index="queue.nextindex + 1"
+                            :source="dropSources.folder"
+                            @play-this="queue.playNext"
+                        />
+                        <h3 class="nowplaying_title">Queue</h3>
+                    </div>
+                </div>
+            </template>
+            <template #default="{ item, index, active }">
+                <DynamicScrollerItem
+                    :item="item"
+                    :active="active"
+                    :size-dependencies="[item.props]"
+                    :data-index="index"
+                >
+                    <component
+                        :is="item.component"
+                        :key="index"
+                        v-bind="item.props"
+                        @playThis="playFromQueue(item.props.index - 1)"
+                    ></component>
+                </DynamicScrollerItem>
+            </template>
+        </DynamicScroller>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useWindowSize } from '@vueuse/core'
+import { Routes } from '@/router'
+import { paths } from '@/config'
+import { dropSources, favType } from '@/enums'
+import favoriteHandler from '@/helpers/favoriteHandler'
+import { isMobilePlayerOpen, isSmall, isMedium } from '@/stores/content-width'
+import useLyrics from '@/stores/lyrics'
+import useQueueStore from '@/stores/queue'
+import useSettingsStore from '@/stores/settings'
+import useTracklist from '@/stores/queue/tracklist'
+import { formatSeconds } from '@/utils'
+import { ScrollerItem } from '@/interfaces'
+
+import Progress from '@/components/LeftSidebar/NP/Progress.vue'
+import SongItem from '@/components/shared/SongItem.vue'
+import NowPlayingInfo from '@/components/NowPlaying/NowPlayingInfo.vue'
+import PlayingFrom from '@/components/NowPlaying/PlayingFrom.vue'
+import HotKeys from '@/components/LeftSidebar/NP/HotKeys.vue'
+import ExpandSvg from '@/assets/icons/expand.svg'
+import ShuffleSvg from '@/assets/icons/shuffle.svg'
+import RepeatAllSvg from '@/assets/icons/repeat.svg'
+import RepeatOneSvg from '@/assets/icons/repeat-one.svg'
+
+const route = useRoute()
+const queue = useQueueStore()
+const lyrics = useLyrics()
+const settings = useSettingsStore()
+const store = useTracklist()
+
+watch(() => queue.currenttrackhash, (newHash) => {
+    if (newHash && queue.currenttrack?.trackhash) {
+        lyrics.checkExists(queue.currenttrack.filepath, queue.currenttrack.trackhash)
+    }
+}, { immediate: true })
+
+watch(() => route.name, (newName) => {
+    if (newName === Routes.Lyrics) {
+        isMobilePlayerOpen.value = false
+    }
+})
+const playerRef = ref<HTMLElement | null>(null)
+const scrollerRef = ref<any>(null)
+const { height } = useWindowSize()
+
+// Logic for manual simple drag/swipe
+const offset = ref(0)
+const isDragging = ref(false)
+const startY = ref(0)
+const currentY = ref(0)
+
+const closePlayer = () => {
+    isMobilePlayerOpen.value = false
+}
+
+function handleFav() {
+    favoriteHandler(
+        queue.currenttrack?.is_favorite,
+        favType.track,
+        queue.currenttrack?.trackhash || '',
+        () => null,
+        () => null
+    )
+}
+
+function playFromQueue(index: number) {
+    queue.play(index)
+}
+
+const scrollerItems = computed(() => {
+    const items: ScrollerItem[] = []
+    
+    // We only show the queue tracks here (not Up Next, because that's in the header)
+    // Wait, NowPlaying view logic: Up Next is queue.next.
+    // The list in NowPlaying view usually starts from specific point?
+    // main.vue: store.tracklist.map...
+    // store.tracklist usually contains the current context tracks.
+    // If I map ALL tracks, I get the whole list.
+    // I should filter? No, standard view shows all.
+    
+    // HOWEVER, I already render queue.next manually in the header.
+    // I should probably ensure the list here reflects what the user expects.
+    // If I just show the full list, it's fine.
+    
+    const trackComponents = store.tracklist.map((track, index) => {
+        track.index = index;
+        return {
+            id: index, // Use index or trackhash? index is used in main.vue
+            component: SongItem,
+            props: {
+                track,
+                index: index + 1,
+                isCurrent: index === queue.currentindex,
+                isCurrentPlaying: index === queue.currentindex && queue.playing,
+                isQueueTrack: true,
+                source: store.from.type,
+            },
+        };
+    });
+
+    return items.concat(trackComponents);
+});
+
+// Touch Handling manually for full control
+const onTouchStart = (e: TouchEvent) => {
+    // If scrolling, don't drag sheet
+    // DynamicScroller root element is what scrolls? 
+    // scrollerRef.$el is likely the .vue-recycle-scroller element.
+    if (scrollerRef.value && scrollerRef.value.$el.scrollTop > 5) return
+
+    isDragging.value = true
+    startY.value = e.touches[0].clientY
+    currentY.value = startY.value
+}
+
+const onTouchMove = (e: TouchEvent) => {
+    if (!isDragging.value) return
+    currentY.value = e.touches[0].clientY
+    const delta = currentY.value - startY.value
+    
+    // Only allow dragging down (positive delta)
+    if (delta > 0) {
+        offset.value = delta
+         if(e.cancelable) e.preventDefault();
+    }
+}
+
+const onTouchEnd = () => {
+    isDragging.value = false
+    if (offset.value > height.value * 0.2) {
+        closePlayer()
+    }
+    offset.value = 0
+}
+
+watch(playerRef, (el) => {
+    if (el) {
+        el.addEventListener('touchstart', onTouchStart, { passive: false })
+        el.addEventListener('touchmove', onTouchMove, { passive: false })
+        el.addEventListener('touchend', onTouchEnd)
+    }
+})
+
+const playerStyle = computed(() => {
+    const transform = isMobilePlayerOpen.value 
+        ? `translateY(${offset.value}px)` 
+        : `translateY(100%)`
+    return {
+        transform,
+        transition: isDragging.value ? 'none' : 'transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1)'
+    }
+})
+
+</script>
+
+<style lang="scss" scoped>
+.mobile-player {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100%;
+    height: 100dvh;
+    background-color: var(--color-bg, #000); 
+    background: $black; 
+    z-index: 9999;
+    overflow: hidden;
+    overflow-x: hidden;
+    will-change: transform;
+    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
+}
+
+.drag-handle {
+    width: 40px;
+    height: 5px;
+    background-color: $gray3;
+    border-radius: 99px;
+    margin: 0.75rem auto;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
+}
+
+.scroller {
+    width: 100%;
+    height: 100%;
+    padding: 0 1.25rem;
+    box-sizing: border-box;
+}
+
+.now-playing-header {
+    padding-bottom: $smaller;
+    padding-top: 1.5rem;
+    
+    .header-row {
+        display: grid !important;
+        grid-template-columns: 3rem 1fr 3rem !important;
+        align-items: center;
+        margin-bottom: 2rem;
+        width: 100%;
+
+        .close-btn {
+            background: transparent;
+            border: none;
+            padding: 0;
+            width: 3rem;
+            height: 3rem;
+            display: flex;
+            align-items: center;
+            justify-content: start;
+            
+            svg {
+                transform: rotate(90deg);
+                width: 1.5rem;
+                height: 1.5rem;
+            }
+        }
+    }
+
+    :deep(.now-playing-top) {
+        display: contents !important;
+    }
+
+    :deep(.now-playling-from-link) {
+        grid-column: 2;
+        justify-self: center;
+        max-width: 100%;
+        overflow: hidden;
+        margin: 0 !important;
+        
+        .from {
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            text-align: center !important;
+        }
+    }
+
+    :deep(.options) {
+        grid-column: 3;
+        justify-self: end;
+        background: transparent !important;
+        border: none;
+        padding: 0;
+        width: 3rem;
+        height: 3rem;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        
+        svg {
+            transform: scale(1.25) rotate(90deg) !important;
+        }
+    }
+
+    .centered {
+        margin: 0 auto;
+        width: 100%;
+        max-width: 500px;
+    }
+
+    .np-image {
+        position: relative;
+        margin-bottom: 2rem;
+
+        img {
+            width: 100%;
+            height: auto;
+            aspect-ratio: 1;
+            object-fit: cover;
+            border-radius: $medium;
+            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+        }
+    }
+    
+    .time-row {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 1rem;
+        font-size: 0.95rem;
+        font-weight: 500;
+        color: $gray1;
+        font-variant-numeric: tabular-nums;
+    }
+
+    .controls-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 1rem;
+        margin-bottom: 2rem;
+        width: 100%;
+        box-sizing: border-box;
+
+        .control-btn {
+            background: transparent;
+            border: none;
+            padding: 0;
+            width: 3rem;
+            height: 3rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            
+            &.repeat-disabled {
+                opacity: 0.5;
+            }
+            
+            svg {
+                width: 1.5rem;
+                height: 1.5rem;
+            }
+        }
+
+        .hotkeys-wrapper {
+            flex: 1;
+            min-width: 0;
+
+            :deep(.hotkeys) {
+                display: grid !important;
+                grid-template-columns: repeat(3, 1fr) !important;
+                gap: 0 !important;
+                margin: 0 !important;
+                padding: 0 !important;
+                width: 100% !important;
+                
+                button {
+                    margin: 0 !important;
+                    padding: 0 !important;
+                    display: flex !important;
+                    justify-content: center !important;
+                    align-items: center !important;
+                    background: transparent !important;
+                    width: 100% !important;
+                    height: 3rem !important;
+
+                    svg {
+                        transform: scale(1.1); 
+                    }
+                }
+
+                button:nth-child(2) svg { 
+                    transform: scale(1.4);
+                }
+                
+                button:first-child svg {
+                     transform: rotate(180deg) scale(1.1);
+                }
+            }
+        }
+    }
+    
+    :deep(#progress) {
+        width: 100%;
+        margin-top: 1.25rem;
+    }
+    
+    .nowplaying_title {
+        margin: 1.25rem 0;
+        font-size: 1.1rem;
+        font-weight: bold;
+
+        &:last-child {
+            padding-top: $large;
+            margin: 1rem 0;
+        }
+    }
+}
+
+:deep(.now-playing-info) {
+    min-width: 0;
+    align-items: center !important;
+    
+    .text {
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    .title {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 1.25rem;
+        font-weight: 700;
+        margin-bottom: 2px;
+    }
+}
+
+// Mobile Queue Item Overrides
+:deep(.songlist-item) {
+    max-width: 500px;
+    overflow: hidden;
+    grid-template-columns: 2fr 3.5rem !important;
+    width: 100%;
+    box-sizing: border-box;
+    
+    .title {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+</style>
diff --git a/src/components/NowPlaying/Header.vue b/src/components/NowPlaying/Header.vue
index 829165be..1febdd4f 100644
--- a/src/components/NowPlaying/Header.vue
+++ b/src/components/NowPlaying/Header.vue
@@ -1,7 +1,9 @@
 <template>
     <div class="now-playing-header">
         <div class="centered">
-            <PlayingFrom />
+            <div class="header-row">
+                <PlayingFrom />
+            </div>
             <RouterLink
                 :to="{
                     name: Routes.album,
@@ -15,15 +17,18 @@
                 <img v-motion-fade class="rounded" :src="paths.images.thumb.large + queue.currenttrack?.image" />
             </RouterLink>
             <NowPlayingInfo @handle-fav="handleFav" />
-            <Progress v-if="isMobile" />
+            
             <div class="below-progress">
-                <div v-if="isMobile" class="time">
-                    {{ formatSeconds(queue.duration.current) }}
-                </div>
-                <Buttons v-if="isSmallPhone" :hide-heart="true" @handleFav="() => {}" />
-                <div v-if="isMobile" class="time">
-                    {{ formatSeconds(queue.duration.full) }}
-                </div>
+             <!-- Desktop progress/time usually handled in bottom bar, 
+                  but NowPlaying view might show it. 
+                  Checking original file: header included PlayingFrom, Image, Info, Progress (if Mobile), 
+                  and .below-progress (if Mobile). 
+                  
+                  Since we are fixing DESKTOP view, and desktop has BottomBar always visible,
+                  we probably don't need progress/controls here at all? 
+                  The original file had `Progress v-if="isMobile"`.
+                  So for desktop, it was just Image + Info + Up Next.
+             -->
             </div>
         </div>
         <h3 class="nowplaying_title" v-if="queue.next">Up Next</h3>
@@ -43,12 +48,8 @@ import { paths } from '@/config'
 import { dropSources, favType } from '@/enums'
 import favoriteHandler from '@/helpers/favoriteHandler'
 import { Routes } from '@/router'
-import { isMobile, isSmallPhone } from '@/stores/content-width'
 import useQueueStore from '@/stores/queue'
-import { formatSeconds } from '@/utils'
 
-import Progress from '@/components/LeftSidebar/NP/Progress.vue'
-import Buttons from '../BottomBar/Right.vue'
 import SongItem from '../shared/SongItem.vue'
 import NowPlayingInfo from './NowPlayingInfo.vue'
 import PlayingFrom from './PlayingFrom.vue'
@@ -75,6 +76,13 @@ function handleFav() {
     padding-bottom: $smaller;
     position: relative;
 
+    .header-row {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 1rem;
+    }
+
     .nowplaying_title {
         padding-left: 1rem;
         margin: 1.25rem 0;
@@ -87,100 +95,28 @@ function handleFav() {
         @media only screen and (max-width: 724px) {
             padding-left: 0.5rem;
         }
-
-        /* Somehow has to be replaced by above now
-        @include largePhones {
-            padding-left: 0.5rem;
-        }
-        */
-    }
-
-    .below-progress {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-top: 1rem;
-
-        .time {
-            font-size: $medium;
-            font-weight: 500;
-            background-color: $gray3;
-            padding: 1px $smaller;
-            min-width: 2.5rem;
-            text-align: center;
-            border-radius: $smaller;
-            font-variant-numeric: tabular-nums;
-        }
-
-        /* Responsive */
-        @include allPhones {
-            .right-group button.speaker {
-                border-top: 1px solid transparent !important;
-                border-top-left-radius: 0 !important;
-                border-top-right-radius: 0 !important;
-            }
-        }
-
-        @include smallestPhones {
-            position: relative;
-            flex-direction: column;
-            align-items: unset;
-            gap: $small;
-
-            .time:first-child {
-                align-self: baseline;
-                margin-left: 4px;
-            }
-
-            .time:last-child {
-                align-self: end;
-                position: absolute;
-                top: 0;
-                right: 4px;
-            }
-
-            .right-group {
-                width: 100% !important;
-                display: flex;
-                justify-content: space-between;
-            }
-        }
     }
 
     .centered {
         margin: 0 auto;
         width: 26rem;
         max-width: 100%;
+        padding: 0 1rem;
     }
 
     .np-image {
         position: relative;
         margin-bottom: 1rem;
+        display: block;
 
         img {
             width: 100%;
-            height: 100%;
-            max-width: 30rem;
-            // aspect-ratio: 1;
+            height: auto;
+            aspect-ratio: 1;
             object-fit: cover;
-        }
-    }
-
-    #progress {
-        margin-top: 1rem;
-        margin-right: 0;
-
-        &::-moz-range-thumb {
-            height: 0.8rem;
-        }
-
-        &::-webkit-slider-thumb {
-            height: 0.8rem;
-        }
-
-        &::-ms-thumb {
-            height: 0.8rem;
+            border-radius: $medium;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
         }
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/NowPlaying/NowPlayingInfo.vue b/src/components/NowPlaying/NowPlayingInfo.vue
index e94b6ae8..eebfc82f 100644
--- a/src/components/NowPlaying/NowPlayingInfo.vue
+++ b/src/components/NowPlaying/NowPlayingInfo.vue
@@ -12,6 +12,7 @@
       </span>
     </div>
     <div class="actions">
+      <LyricsButton />
       <HeartSvg :state="queue.currenttrack?.is_favorite" @handle-fav="$emit('handleFav', queue.currenttrackhash)" />
       <OptionSvg class="optionsvg" :class="{ context_menu_showing }" @click="showMenu" />
     </div>
@@ -23,6 +24,7 @@ import { ref } from "vue";
 
 import ArtistName from "../shared/ArtistName.vue";
 import HeartSvg from "../shared/HeartSvg.vue";
+import LyricsButton from "../shared/LyricsButton.vue";
 
 import OptionSvg from "@/assets/icons/more.svg";
 import { showTrackContextMenu } from "@/helpers/contextMenuHandler";
@@ -59,10 +61,33 @@ function showMenu(e: MouseEvent) {
   .actions {
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: 1.25rem;
+
+    button {
+      background: transparent;
+      border: none;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+    }
+
+    .lyrics {
+      opacity: 0.25;
+      color: $white;
+
+      &.showStatus {
+        opacity: 1;
+      }
+    }
 
     .optionsvg {
-      transform: scale(1.5) rotate(90deg);
+      transform: rotate(90deg);
       border-radius: $small;
       transition: background-color 0.2s ease-out;
 
diff --git a/src/stores/content-width.ts b/src/stores/content-width.ts
index c0c36324..7b78ace6 100644
--- a/src/stores/content-width.ts
+++ b/src/stores/content-width.ts
@@ -85,4 +85,7 @@ export {
     updateCardWidth,
     win_width,
     track_limit,
+    isMobilePlayerOpen
 }
+
+const isMobilePlayerOpen = ref(false)
diff --git a/src/views/LyricsView/Head.vue b/src/views/LyricsView/Head.vue
index ebd45681..68bf6620 100644
--- a/src/views/LyricsView/Head.vue
+++ b/src/views/LyricsView/Head.vue
@@ -17,20 +17,32 @@
     </div>
     <div class="right">
       <div v-if="lyrics.lyrics.length && !lyrics.synced" class="lyricstype">unsynced</div>
+      <button class="close-btn" @click="closeLyrics">
+        <ExpandSvg />
+      </button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useRouter } from "vue-router";
+import { isMobilePlayerOpen } from "@/stores/content-width";
 import useLyrics from "@/stores/lyrics";
 import useQueue from "@/stores/queue";
 
 import ArtistName from "@/components/shared/ArtistName.vue";
+import ExpandSvg from "@/assets/icons/expand.svg";
 import { paths } from "@/config";
 import { Routes } from "@/router";
 
 const queue = useQueue();
 const lyrics = useLyrics();
+const router = useRouter();
+
+function closeLyrics() {
+  isMobilePlayerOpen.value = true;
+  router.back();
+}
 
 defineProps<{
   bgColor: string;
@@ -68,6 +80,30 @@ defineProps<{
     font-size: 0.8rem;
   }
 
+  .right {
+    display: flex;
+    align-items: center;
+    gap: $small;
+
+    .close-btn {
+      background: transparent;
+      border: none;
+      padding: 0;
+      width: 2.5rem;
+      height: 2.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      cursor: pointer;
+
+      svg {
+        width: 1.5rem;
+        height: 1.5rem;
+        transform: rotate(90deg);
+      }
+    }
+  }
+
   .lyricstype {
     border-radius: $smaller;
     font-size: 12px;