diff --git a/src/components/canvas/SelectionToolbar.tsx b/src/components/canvas/SelectionToolbar.tsx
index 1676906..c734d25 100644
--- a/src/components/canvas/SelectionToolbar.tsx
+++ b/src/components/canvas/SelectionToolbar.tsx
@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 import { CheckIcon, XIcon } from "lucide-react";
 
 import { CanvasContext } from "@/context/Canvas";
@@ -10,6 +10,8 @@ function SelectionToolbar() {
 	const { blocks, setBlocks } = useContext(CanvasContext);
 	const { layerBlocks, setLayerBlocks } = useContext(SelectionContext);
 
+	const [isVisible, setIsVisible] = useState(false);
+
 	const confirmSelection = () => {
 		const combinedBlocks = [...blocks, ...layerBlocks];
 		const uniqueBlocks = Array.from(new Map(combinedBlocks.map((block) => [`${block.x},${block.y}`, block])).values());
@@ -18,20 +20,25 @@ function SelectionToolbar() {
 		setLayerBlocks([]);
 	};
 
-	return (
-		layerBlocks.length != 0 && (
-			<div className="absolute left-1/2 -translate-x-1/2 bottom-4 flex items-center bg-white dark:bg-zinc-950 rounded shadow-xl border border-zinc-200 dark:border-zinc-800">
-				<span className="mr-4 ml-2">Selection</span>
+	useEffect(() => {
+		setIsVisible(layerBlocks.length !== 0);
+	}, [layerBlocks]);
 
-				{/* todo: place back blocks removed */}
-				<Button variant="ghost" className="w-8 h-8" onClick={() => setLayerBlocks([])}>
-					<XIcon />
-				</Button>
-				<Button variant="ghost" className="w-8 h-8" onClick={confirmSelection}>
-					<CheckIcon />
-				</Button>
-			</div>
-		)
+	return (
+		<div
+			className={`absolute left-1/2 -translate-x-1/2 bottom-4 flex items-center bg-white dark:bg-zinc-900 rounded-lg shadow-xl border border-zinc-200 dark:border-zinc-800 transition-all duration-300
+				${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6 pointer-events-none"}
+			`}
+		>
+			{/* todo: place back blocks removed */}
+			<Button variant="ghost" className="w-8 h-8" onClick={() => setLayerBlocks([])}>
+				<XIcon />
+			</Button>
+			<span className="mx-2 text-[0.85rem]">Confirm selection?</span>
+			<Button variant="ghost" className="w-8 h-8" onClick={confirmSelection}>
+				<CheckIcon />
+			</Button>
+		</div>
 	);
 }
 
diff --git a/src/index.css b/src/index.css
index 736e2a6..abf6c2b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -33,5 +33,5 @@ body {
 }
 
 .info-child {
-	@apply bg-white dark:bg-zinc-950 px-2 py-1 rounded shadow-xl w-fit border border-zinc-200 dark:border-zinc-800;
+	@apply bg-white dark:bg-zinc-900 px-2 py-1 rounded shadow-xl w-fit border border-zinc-200 dark:border-zinc-800;
 }