diff --git a/src/assets/icons/IdeaDrawnNewLogo.png b/src/assets/icons/IdeaDrawnNewLogo.png
index 8b74766..d30f9a9 100644
Binary files a/src/assets/icons/IdeaDrawnNewLogo.png and b/src/assets/icons/IdeaDrawnNewLogo.png differ
diff --git a/src/assets/icons/IdeaDrawnNewLogo_invert.png b/src/assets/icons/IdeaDrawnNewLogo_invert.png
index 79e23e0..b3b3b56 100644
Binary files a/src/assets/icons/IdeaDrawnNewLogo_invert.png and b/src/assets/icons/IdeaDrawnNewLogo_invert.png differ
diff --git a/src/assets/icons/IdeaDrawnNewLogo_transparent.png b/src/assets/icons/IdeaDrawnNewLogo_transparent.png
deleted file mode 100644
index 6d9a791..0000000
Binary files a/src/assets/icons/IdeaDrawnNewLogo_transparent.png and /dev/null differ
diff --git a/src/components/Canvas/Canvas.tsx b/src/components/Canvas/Canvas.tsx
index db93ca3..8536fde 100644
--- a/src/components/Canvas/Canvas.tsx
+++ b/src/components/Canvas/Canvas.tsx
@@ -89,7 +89,7 @@ const Canvas = forwardRef<HTMLCanvasElement, CanvasProps>(function Canvas(
 			throw new Error("Couldn't get the 2D context of the canvas.");
 		}
 
-		ctx.globalAlpha = opacity.current;
+		ctx.globalAlpha = mode === "eraser" ? 1 : opacity.current;
 
 		// Clip the drawing to the bounds of the canvas
 		ctx.save();
@@ -157,7 +157,6 @@ const Canvas = forwardRef<HTMLCanvasElement, CanvasProps>(function Canvas(
 			mode === "eraser" ? "destination-out" : "source-over";
 		ctx.fillStyle = color.current;
 		ctx.strokeStyle = color.current;
-		// ctx.globalAlpha = mode === "eraser" ? 0 : opacity.current;
 		ctx.lineWidth = strokeWidth.current * dpi;
 		const currentShapeMode = shapeMode.current;
 
diff --git a/src/components/CanvasPane/CanvasPane.tsx b/src/components/CanvasPane/CanvasPane.tsx
index 78aba4b..8afa626 100644
--- a/src/components/CanvasPane/CanvasPane.tsx
+++ b/src/components/CanvasPane/CanvasPane.tsx
@@ -190,8 +190,13 @@ function CanvasPane({ loading }: CanvasPaneProps): ReactNode {
 			if (!canvasSpace) return;
 
 			if (e instanceof WheelEvent) {
-				console.log(e.deltaY);
-				performZoom(e.clientX, e.clientY, e.deltaY / 10);
+				if (e.ctrlKey) {
+					// Ctrl key means we are zooming.
+					performZoom(e.clientX, e.clientY, e.deltaY / 10);
+				} else if (e.shiftKey) {
+					// Shift key means we are panning horizontally.
+					changeX(-e.deltaY);
+				}
 				// Handle the click event
 			} else if (e instanceof MouseEvent) {
 				if (!isClickingOnSpace(e)) return;
diff --git a/src/components/DrawingToolbar/DrawingToolbar.tsx b/src/components/DrawingToolbar/DrawingToolbar.tsx
index 3b8a77d..51eab43 100644
--- a/src/components/DrawingToolbar/DrawingToolbar.tsx
+++ b/src/components/DrawingToolbar/DrawingToolbar.tsx
@@ -115,6 +115,7 @@ function DrawingToolbar(): ReactNode {
 		<Fragment key="settings_Strength">
 			<span className="text-sm">Stroke Width</span>
 			<input
+				className="mx-2"
 				name={`${mode}_strength`.toUpperCase()}
 				type="range"
 				min={strengthSettings.min}
@@ -137,6 +138,7 @@ function DrawingToolbar(): ReactNode {
 		<Fragment key="settings_Brush">
 			<Brush />
 			<input
+				className="mx-2"
 				type="range"
 				id="brush-size"
 				min={0.01}
diff --git a/src/components/LayerPane/LayerPane.tsx b/src/components/LayerPane/LayerPane.tsx
index 8d13ab5..a6f2d87 100644
--- a/src/components/LayerPane/LayerPane.tsx
+++ b/src/components/LayerPane/LayerPane.tsx
@@ -34,7 +34,7 @@ function LayerPane(): ReactNode {
 		}
 	};
 	const newLayerButtonCss =
-		"inline-flex justify-center p-1 text-lg bg-[rgb(36,36,36)] hover:bg-[#d1836a] rounded-t-[5px] border border-[rgb(56,55,55)] disabled:bg-[#242424] disabled:text-gray-500";
+		"inline-flex justify-center p-1 text-lg bg-[rgb(36,36,36)] hover:bg-accent rounded-t-[5px] border border-[rgb(56,55,55)] disabled:bg-[#242424] disabled:text-gray-500";
 
 	const newLayerButton =
 		totalLayers >= MAX_LAYERS ? (
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 1a4e6dc..a72756c 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -1,5 +1,5 @@
 // Lib
-import logo from "@/assets/icons/IdeaDrawnNewLogo_transparent.png";
+import logo from "@/assets/icons/IdeaDrawnNewLogo.png";
 import { useRef, useCallback, useEffect, useState } from "react";
 import { useShallow } from "zustand/shallow";
 import useStore from "@/state/hooks/useStore";
diff --git a/src/state/slices/canvasElementsSlice.ts b/src/state/slices/canvasElementsSlice.ts
index 3ba116b..f4918a4 100644
--- a/src/state/slices/canvasElementsSlice.ts
+++ b/src/state/slices/canvasElementsSlice.ts
@@ -44,7 +44,7 @@ export const createCanvasElementsSlice: StateCreator<
 			...properties, // Override the default properties with the provided properties, if any.
 			drawType: shapeMode,
 			strokeWidth,
-			opacity
+			opacity: type === "eraser" ? 1 : opacity
 		};
 
 		set((state) => ({
diff --git a/src/state/slices/canvasSlice.ts b/src/state/slices/canvasSlice.ts
index 9140efd..7d61043 100644
--- a/src/state/slices/canvasSlice.ts
+++ b/src/state/slices/canvasSlice.ts
@@ -425,6 +425,7 @@ export const createCanvasSlice: StateCreator<
 		ctx.beginPath();
 		ctx.rect(x, y, width, height);
 		ctx.globalCompositeOperation = "destination-over";
+		ctx.globalAlpha = 1;
 
 		if (background === "transparent" && !preview) {
 			// If the background is transparent, fill with a checkerboard pattern.
@@ -649,8 +650,7 @@ export const createCanvasSlice: StateCreator<
 		width: 400,
 		height: 400,
 		mode: "move",
-		// background: "#00FFFF",
-		background: "transparent",
+		background: "#ffffff",
 		shape: "rectangle",
 		shapeMode: "fill",
 		color: "#000000",