diff --git a/src/lib/editor/Canvas.svelte b/src/lib/editor/Canvas.svelte
index ee4a76e..653c980 100644
--- a/src/lib/editor/Canvas.svelte
+++ b/src/lib/editor/Canvas.svelte
@@ -7,6 +7,7 @@
 	import ImageIcon from 'phosphor-svelte/lib/ImageIcon';
 	import ClipboardIcon from 'phosphor-svelte/lib/ClipboardIcon';
 	import demoImage from '$lib/assets/demo.webp';
+	import FloatingBar from './FloatingBar.svelte';
 
 	let fileInputRef = $state<HTMLInputElement | null>(null);
 	let isDragOver = $state(false);
@@ -28,8 +29,6 @@
 		img.src = src;
 	});
 
-	/* ---------------- layout ---------------- */
-
 	const layout = $derived.by(() => {
 		if (!naturalSize) {
 			return { width: 400, height: 300, canvasWidth: '100%', canvasHeight: '100%' };
@@ -69,8 +68,6 @@
 		return { width, height, canvasWidth, canvasHeight };
 	});
 
-	/* ---------------- styles ---------------- */
-
 	const backgroundStyle = $derived.by(() => {
 		if (mockupStore.backgroundImage) {
 			return `
@@ -142,8 +139,6 @@
 		return style;
 	});
 
-	/* ---------------- clipboard paste ---------------- */
-
 	$effect(() => {
 		const onPaste = async (e: ClipboardEvent) => {
 			const file = Array.from(e.clipboardData?.items ?? [])
@@ -179,8 +174,6 @@
 		return () => document.removeEventListener('paste', onPaste);
 	});
 
-	/* ---------------- upload helpers ---------------- */
-
 	const hexToRgb = (hex: string) => ({
 		r: parseInt(hex.slice(1, 3), 16),
 		g: parseInt(hex.slice(3, 5), 16),
@@ -279,7 +272,6 @@
 	};
 </script>
 
-<!-- ✅ Single svelte:window binding — both props on one object -->
 <svelte:window bind:innerWidth={viewport.width} bind:innerHeight={viewport.height} />
 
 <div
@@ -382,4 +374,5 @@
 			class="hidden"
 		/>
 	</div>
+	<FloatingBar />
 </div>
diff --git a/src/lib/editor/FloatingBar.svelte b/src/lib/editor/FloatingBar.svelte
index 0a6557a..bd9e4eb 100644
--- a/src/lib/editor/FloatingBar.svelte
+++ b/src/lib/editor/FloatingBar.svelte
@@ -2,7 +2,6 @@
 	import { mockupStore } from '$lib/contexts/store.svelte';
 	import { Separator } from 'bits-ui';
 
-	import ArrowLeftIcon from 'phosphor-svelte/lib/ArrowLeftIcon';
 	import PerspectiveIcon from 'phosphor-svelte/lib/PerspectiveIcon';
 	import ArrowsOutCardinalIcon from 'phosphor-svelte/lib/ArrowsOutCardinalIcon';
 	import SelectionIcon from 'phosphor-svelte/lib/SelectionIcon';
@@ -69,7 +68,7 @@
 		</div>
 	</div>
 {:else if hasImage}
-	<div class="fixed bottom-6 left-[38%] z-30 -translate-x-1/2">
+	<div class="absolute inset-x-auto bottom-6 z-30">
 		<div
 			class="flex items-center gap-1 rounded-full border-2 border-border bg-bg p-1.5 shadow-2xl backdrop-blur-lg"
 		>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e0d238b..1f5f996 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,7 +3,6 @@
 	import Navbar from '$lib/editor/Navbar.svelte';
 	import { mockupStore } from '$lib/contexts/store.svelte';
 	import { onMount } from 'svelte';
-	import FloatingBar from '$lib/editor/FloatingBar.svelte';
 
 	let { children } = $props();
 
@@ -35,8 +34,6 @@
 		<div class="flex flex-1 overflow-hidden">
 			{@render children()}
 		</div>
-
-		<FloatingBar />
 	</div>
 {:else}
 	<div class="grid h-screen place-items-center">