diff --git a/modules/user/modules/quickshell/1920x1080.png b/modules/user/modules/quickshell/1920x1080.png
deleted file mode 100644
index ce3f7bf..0000000
Binary files a/modules/user/modules/quickshell/1920x1080.png and /dev/null differ
diff --git a/modules/user/modules/quickshell/5120x1440.png b/modules/user/modules/quickshell/5120x1440.png
deleted file mode 100644
index 855835b..0000000
Binary files a/modules/user/modules/quickshell/5120x1440.png and /dev/null differ
diff --git a/modules/user/modules/quickshell/BackgroundImage.qml b/modules/user/modules/quickshell/BackgroundImage.qml
deleted file mode 100644
index 53cbac5..0000000
--- a/modules/user/modules/quickshell/BackgroundImage.qml
+++ /dev/null
@@ -1,9 +0,0 @@
-import QtQuick
-import Quickshell
-
-Image {
-	required property ShellScreen screen;
-	source: Qt.resolvedUrl(screen.name == "DP-1" ? "5120x1440.png" : "1920x1080.png")
-	asynchronous: false
-	cache: false
-}
diff --git a/modules/user/modules/quickshell/shell/background/1920x1296.png b/modules/user/modules/quickshell/shell/background/1920x1296.png
new file mode 100644
index 0000000..72507a8
Binary files /dev/null and b/modules/user/modules/quickshell/shell/background/1920x1296.png differ
diff --git a/modules/user/modules/quickshell/shell/background/5120x1728.png b/modules/user/modules/quickshell/shell/background/5120x1728.png
new file mode 100644
index 0000000..aa8cf5d
Binary files /dev/null and b/modules/user/modules/quickshell/shell/background/5120x1728.png differ
diff --git a/modules/user/modules/quickshell/shell/background/BackgroundImage.qml b/modules/user/modules/quickshell/shell/background/BackgroundImage.qml
new file mode 100644
index 0000000..c2d48c2
--- /dev/null
+++ b/modules/user/modules/quickshell/shell/background/BackgroundImage.qml
@@ -0,0 +1,19 @@
+import QtQuick
+import Quickshell
+import "../lock" as Lock
+
+Item {
+	id: root
+
+	required property ShellScreen screen;
+	property real slideAmount: 1.0 - Lock.Controller.bkgSlide
+	property alias asynchronous: image.asynchronous;
+
+	readonly property real remainingSize: image.sourceSize.height - root.height
+
+	Image {
+		id: image
+		source: Qt.resolvedUrl((screen?.name == "DP-1" ?? false) ? "5120x1728.png" : "1920x1296.png")
+		y: -(root.slideAmount * root.remainingSize)
+	}
+}
diff --git a/modules/user/modules/quickshell/shell/bar/BarContainment.qml b/modules/user/modules/quickshell/shell/bar/BarContainment.qml
index 87ad94d..94d858d 100644
--- a/modules/user/modules/quickshell/shell/bar/BarContainment.qml
+++ b/modules/user/modules/quickshell/shell/bar/BarContainment.qml
@@ -16,7 +16,6 @@ PanelWindow {
 	}
 
 	width: 70
-	margins.left: Lock.Controller.locked ? -width : 0
 	exclusiveZone: width - margins.left
 
 	color: "transparent"
@@ -38,10 +37,13 @@ PanelWindow {
 	Rectangle {
 		id: barRect
 
+		x: 10 - Lock.Controller.bkgSlide * (barRect.width + 10)
+		width: parent.width - 15
+
 		anchors {
-			fill: parent
+			top: parent.top
+			bottom: parent.bottom
 			margins: 10
-			rightMargin: 5
 		}
 
 		color: ShellGlobals.colors.bar
diff --git a/modules/user/modules/quickshell/shell/lock/Controller.qml b/modules/user/modules/quickshell/shell/lock/Controller.qml
index 36384f1..32a1d45 100644
--- a/modules/user/modules/quickshell/shell/lock/Controller.qml
+++ b/modules/user/modules/quickshell/shell/lock/Controller.qml
@@ -8,13 +8,32 @@ import Quickshell.Wayland
 import Quickshell.Hyprland
 import Quickshell.Services.Pam
 import ".."
-import "../.."
+import "../background"
 
 Singleton {
 	id: root
 	function init() {}
 
 	property bool locked: false;
+	property bool animState: false;
+	property real lockSlide: animState ? 1.0 : 0.0
+	property real bkgSlide: animState ? 1.0 : 0.0
+
+	Behavior on lockSlide {
+   	NumberAnimation {
+   		duration: 600
+   		easing.type: Easing.BezierSpline
+   		easing.bezierCurve: [0.0, 0.75, 0.15, 1.0, 1.0, 1.0]
+   	}
+	}
+
+	Behavior on bkgSlide {
+		NumberAnimation {
+			duration: 600
+			easing.type: Easing.OutCirc
+		}
+	}
+
 	onLockedChanged: {
 		if (locked) {
 			lockContextLoader.active = true;
@@ -101,7 +120,7 @@ Singleton {
 				id: backgroundImage
 				anchors.fill: parent
 				screen: lockSurface.screen
-				visible: !lockAnim.running
+				visible: root.lockSlide == 1.0
 				asynchronous: true
 			}
 
@@ -112,23 +131,13 @@ Singleton {
 				visible: false
 				width: lockSurface.width
 				height: lockSurface.height
-			}
-
-			NumberAnimation {
-				id: lockAnim
-				target: lockContent
-				property: "y"
-				to: 0
-				duration: 600
-				easing.type: Easing.BezierSpline
-				easing.bezierCurve: [0.0, 0.75, 0.15, 1.0, 1.0, 1.0]
+				y: -lockSurface.height * (1.0 - root.lockSlide)
 			}
 
 			onVisibleChanged: {
 				if (visible) {
-					lockContent.y = -lockSurface.height
 					lockContent.visible = true;
-					lockAnim.running = true;
+					root.animState = true;
 				}
 			}
 
@@ -137,8 +146,7 @@ Singleton {
 
 				function onLockedChanged() {
 					if (!locked) {
-						lockAnim.to = -lockSurface.height
-						lockAnim.running = true;
+						root.animState = false;
 					}
 				}
 			}