diff --git a/web/src/lib/components/app-sidebar.svelte b/web/src/lib/components/app-sidebar.svelte
index e52a21c..e2e1bcf 100644
--- a/web/src/lib/components/app-sidebar.svelte
+++ b/web/src/lib/components/app-sidebar.svelte
@@ -3,6 +3,7 @@
 	import Send from '@lucide/svelte/icons/send';
 	import TvIcon from '@lucide/svelte/icons/tv';
 	import LayoutPanelLeft from '@lucide/svelte/icons/layout-panel-left';
+	import {PUBLIC_VERSION} from '$env/static/public';
 
 	const data = {
 		navMain: [
@@ -72,7 +73,7 @@
 							<img class="size-12" src={logo} alt="Media Manager Logo"/>
 							<div class="grid flex-1 text-left text-sm leading-tight">
 								<span class="truncate font-semibold">Media Manager</span>
-								<span class="truncate text-xs">version? or smth else?</span>
+								<span class="truncate text-xs">v{PUBLIC_VERSION}</span>
 							</div>
 						</a>
 					{/snippet}
diff --git a/web/src/lib/components/logo-side-by-side.svelte b/web/src/lib/components/logo-side-by-side.svelte
index df1f0b7..aebd7d8 100644
--- a/web/src/lib/components/logo-side-by-side.svelte
+++ b/web/src/lib/components/logo-side-by-side.svelte
@@ -6,5 +6,5 @@
 
 <div {...props} class="flex items-center">
     <img alt="Logo" class="mr-2 h-12 w-12" src={logo}/>
-    <span class="text-3xl font-bold">Media Manager</span>
+    <span class="text-3xl font-bold dark:text-white">Media Manager</span>
 </div>
diff --git a/web/src/lib/images/pawel-czerwinski-NTYYL9Eb9y8-unsplash.jpg b/web/src/lib/images/pawel-czerwinski-NTYYL9Eb9y8-unsplash.jpg
new file mode 100644
index 0000000..cb542e0
Binary files /dev/null and b/web/src/lib/images/pawel-czerwinski-NTYYL9Eb9y8-unsplash.jpg differ
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index 1e14841..b8db001 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -1,15 +1,33 @@
 <script lang="ts">
     import LoginForm from '$lib/components/login-form.svelte';
-    import Logo from '$lib/components/logo-side-by-side.svelte';
+    import logo from '$lib/images/logo.svg';
+    import background from '$lib/images/pawel-czerwinski-NTYYL9Eb9y8-unsplash.jpg';
+    import {toOptimizedURL} from "sveltekit-image-optimize/components";
 </script>
 
-<div class="flex h-screen w-full items-center justify-center px-4 pt-16">
-    <div class="flex flex-col items-center">
-        <!-- Ensure Logo doesn't inherit conflicting styles -->
-        <div class="mb-16 scale-150">
-            <Logo/>
+<div class="grid min-h-svh lg:grid-cols-2">
+    <div class="flex flex-col gap-4 p-6 md:p-10">
+        <div class="flex justify-center gap-2 md:justify-start">
+            <a class="flex items-center gap-2 font-medium" href="##">
+                <div
+                        class="text-primary-foreground flex size-16 items-center justify-center rounded-md"
+                >
+                    <img alt="MediaManager Logo" class="size-12" src={logo}/>
+                </div>
+                <h1 class="scale-110">Media Manager</h1>
+            </a>
+        </div>
+        <div class="flex flex-1 items-center justify-center">
+            <div class="w-full max-w-xs">
+                <LoginForm/>
+            </div>
         </div>
-
-        <LoginForm/>
     </div>
-</div>
+    <div class="relative hidden lg:block">
+        <img
+                alt="background"
+                class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale rounded-l-3xl "
+                src="{toOptimizedURL(background)}"
+        />
+    </div>
+</div>
\ No newline at end of file