diff --git a/src/qml/HeaderBar.qml b/src/qml/HeaderBar.qml
index 5e5a4e7d..d06a393f 100644
--- a/src/qml/HeaderBar.qml
+++ b/src/qml/HeaderBar.qml
@@ -1,3 +1,6 @@
+// SPDX-FileCopyrightText: 2021 Swapnil Tripathi <swapnil06.st@gmail.com>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
 import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
@@ -5,13 +8,19 @@ import QtMultimedia 5.15
 import QtGraphicalEffects 1.15
 
 import org.kde.kirigami 2.14 as Kirigami
+import org.kde.kcoreaddons 1.0 as KCoreAddons
 
 import org.kde.kasts 1.0
 
 Rectangle {
     id: headerBar
     anchors.fill: parent
+
+    //set background color
+    Kirigami.Theme.inherit: false
+    Kirigami.Theme.colorSet: Kirigami.Theme.Header
     color: Kirigami.Theme.backgroundColor
+
     RowLayout {
         anchors.left: parent.left
         anchors.right: parent.right
@@ -116,17 +125,41 @@ Rectangle {
                     }
                 }
             }
-            Slider {
-                id: durationSlider
-                enabled: AudioManager.entry
+            RowLayout {
                 Layout.fillWidth: true
-                Layout.fillHeight: true
-                Layout.rightMargin: Kirigami.Units.largeSpacing
-                padding: 0
-                from: 0
-                to: AudioManager.duration
-                value: AudioManager.position
-                onMoved: AudioManager.seek(value)
+                Label {
+                    text: KCoreAddons.Format.formatDuration(AudioManager.position)
+                }
+                Slider {
+                    id: durationSlider
+                    enabled: AudioManager.entry
+                    Layout.fillWidth: true
+                    padding: 0
+                    from: 0
+                    to: AudioManager.duration
+                    value: AudioManager.position
+                    onMoved: AudioManager.seek(value)
+                }
+
+                Item {
+                    Layout.preferredHeight: endLabel.implicitHeight
+                    Layout.preferredWidth: endLabel.implicitWidth
+                    Layout.rightMargin: Kirigami.Units.largeSpacing
+                    Label {
+                        id: endLabel
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        text: (SettingsManager.toggleRemainingTime) ?
+                                "-" + KCoreAddons.Format.formatDuration(AudioManager.duration-AudioManager.position)
+                                : KCoreAddons.Format.formatDuration(AudioManager.duration)
+
+                    }
+                    MouseArea {
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        onClicked: SettingsManager.toggleRemainingTime = !SettingsManager.toggleRemainingTime
+                    }
+                }
             }
         }
     }
diff --git a/src/qml/main.qml b/src/qml/main.qml
index ce281fda..19fcc6e0 100644
--- a/src/qml/main.qml
+++ b/src/qml/main.qml
@@ -19,7 +19,7 @@ Kirigami.ApplicationWindow {
 
     property var miniplayerSize: Kirigami.Units.gridUnit * 3 + Kirigami.Units.gridUnit / 6
     property int tabBarHeight: Kirigami.Units.gridUnit * 2
-    property int bottomMessageSpacing: Kirigami.Units.largeSpacing * 9 + ( ( AudioManager.entry && Kirigami.Settings.isMobile ) ? ( footerLoader.item.contentY == 0 ? miniplayerSize : 0 ) : 0 ) + tabBarActive * tabBarHeight
+    property int bottomMessageSpacing: Kirigami.Units.largeSpacing * 9
     property int tabBarActive: 0
     property int originalWidth: Kirigami.Units.gridUnit * 10
 
@@ -54,6 +54,7 @@ Kirigami.ApplicationWindow {
         }
         // make room at the bottom for miniplayer
         handle.anchors.bottomMargin: (( AudioManager.entry && Kirigami.Settings.isMobile ) ? (footerLoader.item.contentY == 0 ? miniplayerSize : 0) : 0) + Kirigami.Units.smallSpacing + tabBarActive * tabBarHeight
+        handleVisible: Kirigami.Settings.isMobile ? !AudioManager.entry || footerLoader.item.contentY === 0 : false
         showHeaderWhenCollapsed: true
         actions: [
             Kirigami.PagePoolAction {
@@ -134,7 +135,7 @@ Kirigami.ApplicationWindow {
         id: contextDrawer
         // make room at the bottom for miniplayer
         handle.anchors.bottomMargin: ( (AudioManager.entry && Kirigami.Settings.isMobile) ? ( footerLoader.item.contentY == 0 ? miniplayerSize : 0 ) : 0 ) + Kirigami.Units.smallSpacing + tabBarActive * tabBarHeight
-        handleVisible: !( AudioManager.entry && Kirigami.Settings.isMobile) || footerLoader.item.contentY == 0
+        handleVisible: Kirigami.Settings.isMobile ? !AudioManager.entry || footerLoader.item.contentY === 0 : false
     }
 
     Mpris2 {