diff --git a/img/ellipse.png b/img/ellipse.png
new file mode 100644
index 0000000..5bf165b
Binary files /dev/null and b/img/ellipse.png differ
diff --git a/img/flipX.png b/img/flipX.png
new file mode 100644
index 0000000..94e6a7e
Binary files /dev/null and b/img/flipX.png differ
diff --git a/img/flipY.png b/img/flipY.png
new file mode 100644
index 0000000..f335393
Binary files /dev/null and b/img/flipY.png differ
diff --git a/img/line.png b/img/line.png
new file mode 100644
index 0000000..e3a3bc4
Binary files /dev/null and b/img/line.png differ
diff --git a/img/rectangle.png b/img/rectangle.png
new file mode 100644
index 0000000..94c70f7
Binary files /dev/null and b/img/rectangle.png differ
diff --git a/img/rotate.png b/img/rotate.png
new file mode 100644
index 0000000..6d9f4ab
Binary files /dev/null and b/img/rotate.png differ
diff --git a/index.html b/index.html
index b5a2e81..6308382 100644
--- a/index.html
+++ b/index.html
@@ -9,52 +9,64 @@
 	<body>
 		<div id="blanket-around-body">
 			<div id="toolbar">
-				<div class="no-select undoImg toolbarButton" id="undo-button">
-					<span class="tooltipText">undo <span class="hotkeyText">(Z)</span></span>
+				<div class="toolbar-row">
+					<div class="no-select undoImg toolbarButton" id="undo-button">
+						<span class="tooltipText">undo <span class="hotkeyText">(Z)</span></span>
+					</div>
+					<div class="no-select redoImg toolbarButton" id="redo-button">
+						<span class="tooltipText">redo <span class="hotkeyText">(X)</span></span>
+					</div>
+					<div class="no-select pencilImg toolbarButton" id="pencil-button">
+						<span class="tooltipText"></span>
+					</div>
+					<div class="no-select fillImg toolbarButton" id="fill-button">
+						<span class="tooltipText"></span>
+					</div>
+					<div class="no-select eraserImg toolbarButton" id="eraser-button">
+						<span class="tooltipText"></span>
+					</div>
+					<div class="no-select selectionImg toolbarButton" id="selection-button">
+						<span class="tooltipText"></span>
+					</div>
+					<div class="no-select colorpickerImg toolbarButton" id="colorpicker-button">
+						<span class="tooltipText"></span>
+					</div>
+					<div class="no-select gridImg toolbarButton" id="grid-button">
+						<span class="tooltipText">grid <span class="hotkeyText">(G)</span></span>
+					</div>
+					<div class="no-select saveImg toolbarButton" id="save-button">
+						<span class="tooltipText">save</span>
+					</div>
+					<div id="popup-message" class="fadeOutAnimation"></div>
 				</div>
-
-				<div class="no-select redoImg toolbarButton" id="redo-button">
-					<span class="tooltipText">redo <span class="hotkeyText">(X)</span></span>
-				</div>
-
-				<div class="no-select pencilImg toolbarButton" id="pencil-button">
-					<span class="tooltipText"></span>
-				</div>
-
-				<div class="no-select fillImg toolbarButton" id="fill-button">
-					<span class="tooltipText"></span>
-				</div>
-				
-				<div class="no-select eraserImg toolbarButton" id="eraser-button">
-					<span class="tooltipText"></span>
-				</div>
-
-				<div class="no-select selectionImg toolbarButton" id="selection-button">
-					<span class="tooltipText"></span>
-				</div>
-
-				<div class="no-select colorpickerImg toolbarButton" id="colorpicker-button">
-					<span class="tooltipText"></span>
-				</div>
-
-				<div class="no-select gridImg toolbarButton" id="grid-button">
-					<span class="tooltipText">grid <span class="hotkeyText">(G)</span></span>
-				</div>
-
-				<div class="no-select saveImg toolbarButton" id="save-button">
-					<span class="tooltipText">save</span>
+				<div class="toolbar-row">
+					<div class="no-select lineImg toolbarButton" id="line-button">
+						<span class="tooltipText">line <span class="hotkeyText">(L)</span></span>
+					</div>
+					<div class="no-select rectangleImg toolbarButton" id="rectangle-button">
+						<span class="tooltipText">rectangle <span class="hotkeyText">(R)</span></span>
+					</div>
+					<div class="no-select ellipseImg toolbarButton" id="ellipse-button">
+						<span class="tooltipText">ellipse <span class="hotkeyText">(O)</span></span>
+					</div>
+					<div class="no-select rotateImg toolbarButton" id="rotate-button">
+						<span class="tooltipText">rotate <span class="hotkeyText">(T)</span></span>
+					</div>
+					<div class="no-select flipXImg toolbarButton" id="flip-x-button">
+						<span class="tooltipText">flip X <span class="hotkeyText">(F)</span></span>
+					</div>
+					<div class="no-select flipYImg toolbarButton" id="flip-y-button">
+						<span class="tooltipText">flip Y <span class="hotkeyText">(Y)</span></span>
+					</div>
 				</div>
-
-				<div id="popup-message" class="fadeOutAnimation"></div>
-
 				<div class="active_indicator active-color-preview" id="active-color-preview-1"></div>
 				<div class="active-color-preview" id="active-color-preview-2"></div>
-
 				<label id="active-color-label"></label>
 			</div>
 
-			<div id="canvas-div"></div>
-			<div id="drop-shadow-preview"></div>
+			<div id="canvas-div">
+				<div id="drop-shadow-preview"></div>
+			</div>
 			<div id="palette-select">
 				<label class="container">
 					<span class="checkmark"></span>
@@ -78,6 +90,9 @@
 				<tr><td>Pencil Mode</td><td>P</td></tr>
 				<tr><td>Bucket Mode</td><td>B</td></tr>
 				<tr><td>Eraser Mode</td><td>E</td></tr>
+				<tr><td>Line Tool</td><td>L</td></tr>
+				<tr><td>Rectangle Tool</td><td>R</td></tr>
+				<tr><td>Ellipse Tool</td><td>O</td></tr>
 				<tr><td>Colorpicker Mode</td><td>V</td></tr>
 				<tr><td>Color Swap</td><td>C</td></tr>
 
@@ -94,6 +109,9 @@
 				<tr><td>Paste</td><td>Ctrl + V</td></tr>
 				<tr><td>Undo</td><td>Z</td></tr>
 				<tr><td>Redo</td><td>X</td></tr>
+				<tr><td>Rotate Canvas</td><td>T</td></tr>
+				<tr><td>Flip X</td><td>F</td></tr>
+				<tr><td>Flip Y</td><td>Y</td></tr>
 
 				<!-- General -->
 				<tr><td>Toggle Grid</td><td>G</td></tr>
diff --git a/js/eventHandlers.js b/js/eventHandlers.js
index ebb8e09..d2f4f43 100644
--- a/js/eventHandlers.js
+++ b/js/eventHandlers.js
@@ -1,3 +1,160 @@
+// Track shift key state
+let shiftKeyDown = false;
+document.addEventListener('keydown', function(e) {
+	if (e.key === 'Shift') shiftKeyDown = true;
+});
+document.addEventListener('keyup', function(e) {
+	if (e.key === 'Shift') shiftKeyDown = false;
+});
+// Flip canvas along X axis (across Y axis, horizontal flip)
+function Flip_Along_X_Axis() {
+	const size = CELLS_PER_ROW;
+	const pixels = Get_Canvas_Pixels();
+	const flipped = new Array(size * size);
+	for (let y = 0; y < size; y++) {
+		for (let x = 0; x < size; x++) {
+			flipped[y * size + x] = pixels[y * size + (size - 1 - x)];
+		}
+	}
+	for (let i = 0; i < size * size; i++) {
+		const cell = document.getElementById(Pad_Start_Int(i, 4));
+		cell.style.backgroundColor = flipped[i];
+	}
+	HISTORY_STATES.pushToPtr([...flipped]);
+}
+
+// Flip canvas along Y axis (across X axis, vertical flip)
+function Flip_Along_Y_Axis() {
+	const size = CELLS_PER_ROW;
+	const pixels = Get_Canvas_Pixels();
+	const flipped = new Array(size * size);
+	for (let y = 0; y < size; y++) {
+		for (let x = 0; x < size; x++) {
+			flipped[y * size + x] = pixels[(size - 1 - y) * size + x];
+		}
+	}
+	for (let i = 0; i < size * size; i++) {
+		const cell = document.getElementById(Pad_Start_Int(i, 4));
+		cell.style.backgroundColor = flipped[i];
+	}
+	HISTORY_STATES.pushToPtr([...flipped]);
+}
+// Rotates the canvas pixels 90 degrees clockwise
+function Rotate_Canvas_90deg() {
+	const size = CELLS_PER_ROW;
+	const pixels = Get_Canvas_Pixels();
+	const rotated = new Array(size * size);
+	for (let y = 0; y < size; y++) {
+		for (let x = 0; x < size; x++) {
+			// (x, y) maps to (y, size - 1 - x)
+			rotated[y * size + x] = pixels[x * size + (size - 1 - y)];
+		}
+	}
+	// Update canvas cells
+	for (let i = 0; i < size * size; i++) {
+		const cell = document.getElementById(Pad_Start_Int(i, 4));
+		cell.style.backgroundColor = rotated[i];
+	}
+	// Save new state
+	HISTORY_STATES.pushToPtr([...rotated]);
+}
+
+// Shared shape preview helpers
+function Draw_Line_Preview(startX, startY, endX, endY) {
+	// If shift is held, snap to axis or diagonal
+	if (shiftKeyDown) {
+		let dx = endX - startX;
+		let dy = endY - startY;
+		let absDx = Math.abs(dx);
+		let absDy = Math.abs(dy);
+		// Snap to diagonal if close enough
+		if (Math.abs(absDx - absDy) <= Math.min(absDx, absDy)) {
+			// Diagonal: use sign of drag and max length
+			let length = Math.max(absDx, absDy);
+			let signX = dx < 0 ? -1 : 1;
+			let signY = dy < 0 ? -1 : 1;
+			endX = startX + signX * length;
+			endY = startY + signY * length;
+		} else if (absDx > absDy) {
+			// Horizontal
+			let signX = dx < 0 ? -1 : 1;
+			endX = startX + signX * absDx;
+			endY = startY;
+		} else {
+			// Vertical
+			let signY = dy < 0 ? -1 : 1;
+			endX = startX;
+			endY = startY + signY * absDy;
+		}
+	}
+	Bresenham_Line_Algorithm(startX, startY, endX, endY, cell => {
+		cell.style.backgroundColor = STATE[ACTIVE_COLOR_SELECT];
+	});
+}
+
+function Draw_Rect_Preview(startX, startY, endX, endY) {
+	let dx = endX - startX;
+	let dy = endY - startY;
+	let absDx = Math.abs(dx);
+	let absDy = Math.abs(dy);
+	// If shift is held, snap to square
+	if (shiftKeyDown) {
+		let size = Math.max(absDx, absDy);
+		let signX = dx < 0 ? -1 : 1;
+		let signY = dy < 0 ? -1 : 1;
+		endX = startX + signX * size;
+		endY = startY + signY * size;
+	}
+	const rx0 = Math.min(startX, endX), rx1 = Math.max(startX, endX);
+	const ry0 = Math.min(startY, endY), ry1 = Math.max(startY, endY);
+	for (let xi = rx0; xi <= rx1; xi++) {
+		const idTop = Pad_Start_Int(Get_CellInt_From_CellXY(xi, ry0));
+		const cellTop = document.getElementById(idTop);
+		cellTop.style.backgroundColor = STATE[ACTIVE_COLOR_SELECT];
+		const idBottom = Pad_Start_Int(Get_CellInt_From_CellXY(xi, ry1));
+		const cellBottom = document.getElementById(idBottom);
+		cellBottom.style.backgroundColor = STATE[ACTIVE_COLOR_SELECT];
+	}
+	for (let yi = ry0; yi <= ry1; yi++) {
+		const idLeft = Pad_Start_Int(Get_CellInt_From_CellXY(rx0, yi));
+		const cellLeft = document.getElementById(idLeft);
+		cellLeft.style.backgroundColor = STATE[ACTIVE_COLOR_SELECT];
+		const idRight = Pad_Start_Int(Get_CellInt_From_CellXY(rx1, yi));
+		const cellRight = document.getElementById(idRight);
+		cellRight.style.backgroundColor = STATE[ACTIVE_COLOR_SELECT];
+	}
+}
+
+function Draw_Ellipse_Preview(startX, startY, endX, endY) {
+	let dx = endX - startX;
+	let dy = endY - startY;
+	let absDx = Math.abs(dx);
+	let absDy = Math.abs(dy);
+	// If shift is held, snap to circle
+	if (shiftKeyDown) {
+		let size = Math.max(absDx, absDy);
+		let signX = dx < 0 ? -1 : 1;
+		let signY = dy < 0 ? -1 : 1;
+		endX = startX + signX * size;
+		endY = startY + signY * size;
+	}
+	const ex0 = Math.min(startX, endX), ex1 = Math.max(startX, endX);
+	const ey0 = Math.min(startY, endY), ey1 = Math.max(startY, endY);
+	const a = (ex1 - ex0) / 2.0, b = (ey1 - ey0) / 2.0;
+	const cx = ex0 + a, cy = ey0 + b;
+	Draw_Ellipse_Outline(cx, cy, a, b, cell => {
+		cell.style.backgroundColor = STATE[ACTIVE_COLOR_SELECT];
+	});
+}
+
+function Restore_And_Draw_Shape(type, startX, startY, endX, endY) {
+	ShapePreviewManager.restoreSnapshotToScreen();
+	switch (type) {
+		case 'line': Draw_Line_Preview(startX, startY, endX, endY); break;
+		case 'rect': Draw_Rect_Preview(startX, startY, endX, endY); break;
+		case 'ellipse': Draw_Ellipse_Preview(startX, startY, endX, endY); break;
+	}
+}
 const CLIPBOARD = {
     "hasData": false,
     "colorArray": [],
@@ -11,6 +168,91 @@ let previousCursorY = null;
 let lastMouseX = 0;
 let lastMouseY = 0;
 
+// Global line preview state so canvas-div and canvas-cell handlers share it
+// Generic preview manager for shapes (line, rectangle, etc.)
+const ShapePreviewManager = {
+	active: false,
+	type: null, // 'line' | 'rect' | etc.
+	startX: null,
+	startY: null,
+	savedSnapshot: null,
+	lastPreviewed: {x: null, y: null},
+	begin(type, startX, startY) {
+		this.active = true;
+		this.type = type;
+		this.startX = startX;
+		this.startY = startY;
+		this.lastPreviewed = {x: startX, y: startY};
+		this.savedSnapshot = Get_Canvas_Pixels();
+		// push to history so undo will remove the committed shape
+		HISTORY_STATES.pushToPtr([...this.savedSnapshot]);
+		// provide immediate visual feedback by restoring snapshot and drawing the start cell
+		this.restoreSnapshotToScreen();
+		const startId = Pad_Start_Int(Get_CellInt_From_CellXY(startX, startY));
+		const startCell = document.getElementById(startId);
+		if (startCell) startCell.style.backgroundColor = STATE[ACTIVE_COLOR_SELECT];
+	},
+	restoreSnapshotToScreen() {
+		if (!this.savedSnapshot) return;
+		const canvasCellsRestore = document.querySelectorAll('.canvasCell');
+		for (let si = 0; si < canvasCellsRestore.length; si++) {
+			canvasCellsRestore[si].style.backgroundColor = this.savedSnapshot[si];
+		}
+	},
+	clear() {
+		this.active = false;
+		this.type = null;
+		this.startX = null;
+		this.startY = null;
+		this.savedSnapshot = null;
+		this.lastPreviewed = {x: null, y: null};
+	}
+};
+
+// Draw an ellipse outline by sampling parametric points and connecting them
+// with Bresenham lines. cx,cy are center in cell coordinates; a,b are radii
+// in cells. drawCallback(cell) will be called for each cell on the outline.
+function Draw_Ellipse_Outline(cx, cy, a, b, drawCallback) {
+	// If both radii are effectively zero, draw single pixel
+	if ((!a || a <= 0) && (!b || b <= 0)) {
+		const id = Pad_Start_Int(Get_CellInt_From_CellXY(Math.round(cx), Math.round(cy)));
+		const cell = document.getElementById(id);
+		if (cell) drawCallback(cell);
+		return;
+	}
+
+	// Choose number of samples proportional to ellipse size (keeps it smooth)
+	const maxRadius = Math.max(Math.abs(a), Math.abs(b));
+	let samples = Math.ceil(8 * maxRadius);
+	samples = Math.max(12, Math.min(samples, 512));
+
+	let prevX = null, prevY = null;
+	let firstX = null, firstY = null;
+
+	for (let i = 0; i <= samples; i++) {
+		const t = (i / samples) * 2 * Math.PI;
+		const fx = cx + a * Math.cos(t);
+		const fy = cy + b * Math.sin(t);
+		const ix = Math.round(fx);
+		const iy = Math.round(fy);
+
+		if (prevX === null) {
+			prevX = ix; prevY = iy;
+			firstX = ix; firstY = iy;
+			continue;
+		}
+
+		// Connect previous sample to current with Bresenham for continuity
+		Bresenham_Line_Algorithm(prevX, prevY, ix, iy, drawCallback);
+		prevX = ix; prevY = iy;
+	}
+
+	// Close loop (last -> first)
+	if (firstX !== null && (prevX !== firstX || prevY !== firstY)) {
+		Bresenham_Line_Algorithm(prevX, prevY, firstX, firstY, drawCallback);
+	}
+}
+
 function Copy_Selection() {
     const selection = document.getElementById("selection");
     if (STATE["activeTool"] === "selection" && selection && STATE["selection"]["isLocked"]) {
@@ -137,27 +379,45 @@ function Add_EventHandlers_To_Canvas_Div()
 		STATE["brushDown"] = true;
 		isDrawingOutside = false;
 	});
+
+
 	canvasDiv.addEventListener("mousemove", Update_Cursor_Coordinates_On_Screen);
 	canvasDiv.addEventListener("mousemove", Track_Mouse_Position);
 	canvasDiv.addEventListener("mouseup", function () {
 		STATE["brushDown"] = false;
 		previousCursorX = previousCursorY = null;
+
+		// If a shape preview is active but the mouseup didn't fire on a canvas cell,
+		// commit the shape using the last known mouse coordinates.
+		if (ShapePreviewManager.active) {
+			const endX = Math.max(0, Math.min(lastMouseX, CELLS_PER_ROW - 1));
+			const endY = Math.max(0, Math.min(lastMouseY, CELLS_PER_ROW - 1));
+			Restore_And_Draw_Shape(ShapePreviewManager.type, ShapePreviewManager.startX, ShapePreviewManager.startY, endX, endY);
+			ShapePreviewManager.clear();
+			Save_Canvas_State();
+			return;
+		}
+
 		Save_Canvas_State();
 	});
 	canvasDiv.addEventListener("mouseleave", function (e) {
 		if (STATE["brushDown"]) {
 			const canvasRect = canvasDiv.getBoundingClientRect();
-			const x = Math.max(0, Math.min(e.clientX - canvasRect.left, canvasRect.width - 1));
-			const y = Math.max(0, Math.min(e.clientY - canvasRect.top, canvasRect.height - 1));
-			const targetCell = document.elementFromPoint(x + canvasRect.left, y + canvasRect.top);
-
-			if (targetCell && targetCell.classList.contains('canvasCell')) {
-				const targetX = targetCell.offsetLeft / CELL_WIDTH_PX;
-				const targetY = targetCell.offsetTop / CELL_WIDTH_PX;
-				// console.log(`Previous Cursor: (${previousCursorX}, ${previousCursorY}) Exit Target: (${targetX}, ${targetY})`);
-				if (previousCursorX !== null && previousCursorY !== null) {
-					Bresenham_Line_Algorithm(previousCursorX, previousCursorY, targetX, targetY, Get_Tool_Action_Callback());
-				}
+			// Clamp mouse position to canvas bounds
+			let x = Math.max(0, Math.min(e.clientX - canvasRect.left, canvasRect.width - 1));
+			let y = Math.max(0, Math.min(e.clientY - canvasRect.top, canvasRect.height - 1));
+			// Convert to cell coordinates
+			let cellX = Math.floor(x / CELL_WIDTH_PX);
+			let cellY = Math.floor(y / CELL_WIDTH_PX);
+			cellX = Math.max(0, Math.min(cellX, CELLS_PER_ROW - 1));
+			cellY = Math.max(0, Math.min(cellY, CELLS_PER_ROW - 1));
+
+			// If drawing a shape, just update the preview at clamped position (do NOT commit)
+			if (ShapePreviewManager.active) {
+				Restore_And_Draw_Shape(ShapePreviewManager.type, ShapePreviewManager.startX, ShapePreviewManager.startY, cellX, cellY);
+				ShapePreviewManager.lastPreviewed = {x: cellX, y: cellY};
+			} else if (previousCursorX !== null && previousCursorY !== null) {
+				Bresenham_Line_Algorithm(previousCursorX, previousCursorY, cellX, cellY, Get_Tool_Action_Callback());
 				previousCursorX = previousCursorY = null;
 			}
 			document.addEventListener("mousemove", Track_Mouse_Outside);
@@ -384,53 +644,53 @@ function Add_EventHandlers_To_Canvas_Cells()
 				Set_Cursor("move");
 				let dx = (cursorXY[0] / CELL_WIDTH_PX) - STATE["selectionMove"]["initCursorX"];
 				let dy = (cursorXY[1] / CELL_WIDTH_PX) - STATE["selectionMove"]["initCursorY"];
-			  
+
 				let newLeft = STATE["selectionMove"]["initLeft"] + dx;
 				let newTop = STATE["selectionMove"]["initTop"] + dy;
-			  
+
 				let selectionWidth = (Px_To_Int(selection.style.width) + 1) / CELL_WIDTH_PX;
 				let selectionHeight = (Px_To_Int(selection.style.height) + 1) / CELL_WIDTH_PX;
-			  
+
 				if (
-				  newLeft < 0 || newTop < 0 ||
-				  (newLeft + selectionWidth) > CELLS_PER_ROW ||
-				  (newTop + selectionHeight) > CELLS_PER_ROW
+					newLeft < 0 || newTop < 0 ||
+					(newLeft + selectionWidth) > CELLS_PER_ROW ||
+					(newTop + selectionHeight) > CELLS_PER_ROW
 				) {
-				  return;
+					return;
 				}
-			  
+
 				if (!STATE["selection"]["originalCleared"]) {
-				  for (let y = 0; y < selectionHeight; y++) {
-					for (let x = 0; x < selectionWidth; x++) {
-					  let index = (STATE["selectionMove"]["initTop"] + y) * CELLS_PER_ROW +
-								  (STATE["selectionMove"]["initLeft"] + x);
-					  HISTORY_STATES.getCurrentState()[index] = "transparent";
+					for (let y = 0; y < selectionHeight; y++) {
+						for (let x = 0; x < selectionWidth; x++) {
+							let index = (STATE["selectionMove"]["initTop"] + y) * CELLS_PER_ROW +
+										(STATE["selectionMove"]["initLeft"] + x);
+							HISTORY_STATES.getCurrentState()[index] = "transparent";
+						}
 					}
-				  }
-				  STATE["selection"]["originalCleared"] = true;
+					STATE["selection"]["originalCleared"] = true;
 				}
-			  
+
 				for (let i = 0; i < CELLS_PER_ROW * CELLS_PER_ROW; i++) {
-				  let cell = document.getElementById(Pad_Start_Int(i, 4));
-				  cell.style.backgroundColor = HISTORY_STATES.getCurrentState()[i];
+					let cell = document.getElementById(Pad_Start_Int(i, 4));
+					cell.style.backgroundColor = HISTORY_STATES.getCurrentState()[i];
 				}
-			  
+
 				let cell0 = Get_CellInt_From_CellXY(newLeft, newTop);
 				for (let y = 0; y < selectionHeight; y++) {
-				  for (let x = 0; x < selectionWidth; x++) {
-					let id = Pad_Start_Int(cell0 + y * CELLS_PER_ROW + x);
-					let cell = document.getElementById(id);
-					let idx = x + y * selectionWidth;
-					let color = STATE["selectionCopy"]["colorArray"][idx];
-					if (color && color !== "transparent") {
-					  cell.style.backgroundColor = color;
+					for (let x = 0; x < selectionWidth; x++) {
+						let id = Pad_Start_Int(cell0 + y * CELLS_PER_ROW + x);
+						let cell = document.getElementById(id);
+						let idx = x + y * selectionWidth;
+						let color = STATE["selectionCopy"]["colorArray"][idx];
+						if (color && color !== "transparent") {
+							cell.style.backgroundColor = color;
+						}
 					}
-				  }
 				}
-			  
+
 				selection.style.left = newLeft * CELL_WIDTH_PX + "px";
 				selection.style.top = newTop * CELL_WIDTH_PX + "px";
-			  } else 
+			} else 
 			if (CursorXY_In_Selection(cursorXY, selection) && STATE["altKeyDown"] === true) {
 				Set_Cursor("move");
 			}
@@ -483,6 +743,10 @@ function Add_EventHandlers_To_Canvas_Cells()
 
 	function Tool_Action_On_Canvas_Cell(e)
 	{
+		// If a shape tool (line, rectangle or ellipse) is active, drawing is handled separately (preview/commit).
+		if (STATE["activeTool"] === "line" || STATE["activeTool"] === "rectangle" || STATE["activeTool"] === "ellipse") {
+			return;
+		}
 		const cell = e.target;
 		const x = Math.floor(cell.offsetLeft / CELL_WIDTH_PX);
 		const y = Math.floor(cell.offsetTop / CELL_WIDTH_PX);
@@ -505,6 +769,19 @@ function Add_EventHandlers_To_Canvas_Cells()
 		canvasCells[i].addEventListener("mousedown", function (e) {
 			Reset_Previous_Cursor_Position();
 			Selection_Mousedown(e);
+			// Handle shape tools (line, rectangle, ellipse) mousedown specially: mark start and begin preview
+			if (STATE["activeTool"] === "line" || STATE["activeTool"] === "rectangle" || STATE["activeTool"] === "ellipse") {
+				STATE["brushDown"] = true;
+				const cell = e.target;
+				const x = Math.floor(cell.offsetLeft / CELL_WIDTH_PX);
+				const y = Math.floor(cell.offsetTop / CELL_WIDTH_PX);
+				let shapeType = 'line';
+				if (STATE["activeTool"] === "line") shapeType = 'line';
+				else if (STATE["activeTool"] === "rectangle") shapeType = 'rect';
+				else if (STATE["activeTool"] === "ellipse") shapeType = 'ellipse';
+				ShapePreviewManager.begin(shapeType, x, y);
+				return;
+			}
 			Tool_Action_On_Canvas_Cell(e);
 		});
 		canvasCells[i].addEventListener("mousemove", Selection_Mousemove);
@@ -512,18 +789,39 @@ function Add_EventHandlers_To_Canvas_Cells()
 		canvasCells[i].addEventListener("mousedown", Tool_Action_On_Canvas_Cell);
 
 		canvasCells[i].addEventListener("mousemove", function (e) {
+			// If a shape tool is active (line, rectangle or ellipse) and brush is down, show preview
+			if ((STATE["activeTool"] === "line" || STATE["activeTool"] === "rectangle" || STATE["activeTool"] === "ellipse") && ShapePreviewManager.active && STATE["brushDown"]) {
+				const cell = e.target;
+				const x = Math.floor(cell.offsetLeft / CELL_WIDTH_PX);
+				const y = Math.floor(cell.offsetTop / CELL_WIDTH_PX);
+				if (ShapePreviewManager.lastPreviewed.x === x && ShapePreviewManager.lastPreviewed.y === y) return;
+				Restore_And_Draw_Shape(ShapePreviewManager.type, ShapePreviewManager.startX, ShapePreviewManager.startY, x, y);
+				ShapePreviewManager.lastPreviewed = {x, y};
+				return;
+			}
 			if (STATE["brushDown"]) {
 				Tool_Action_On_Canvas_Cell(e);
 			}
 		});
 
 		canvasCells[i].addEventListener("mouseup", function (e) {
+			// If a shape preview was active, commit the previewed shape
+			if (ShapePreviewManager.active) {
+				const cell = e.target;
+				const x = Math.floor(cell.offsetLeft / CELL_WIDTH_PX);
+				const y = Math.floor(cell.offsetTop / CELL_WIDTH_PX);
+				Restore_And_Draw_Shape(ShapePreviewManager.type, ShapePreviewManager.startX, ShapePreviewManager.startY, x, y);
+				ShapePreviewManager.clear();
+				Save_Canvas_State();
+				Reset_Previous_Cursor_Position();
+				return;
+			}
 			let cursor = Get_Cursor();
 			if (cursor.includes("fill.png")) {
 				let cell_id = e.target.id;
 				let target_color = e.target.style.backgroundColor;
 				let replacement_color = STATE[ACTIVE_COLOR_SELECT];
-
+				
 				Flood_Fill_Algorithm(cell_id, target_color, replacement_color);
 			}
 			Reset_Previous_Cursor_Position();
@@ -544,6 +842,23 @@ function Add_EventHandlers_To_Canvas_Cells()
 	document.addEventListener("mouseup", function (e) {
 		Exit_Drawing_Mode();
 		Reset_Previous_Cursor_Position();
+
+		// If a shape preview is active, commit it on any mouseup
+		if (ShapePreviewManager.active) {
+			let endX, endY;
+			if (e.target && e.target.classList && e.target.classList.contains('canvasCell')) {
+				endX = Math.floor(e.target.offsetLeft / CELL_WIDTH_PX);
+				endY = Math.floor(e.target.offsetTop / CELL_WIDTH_PX);
+			} else {
+				endX = Math.max(0, Math.min(lastMouseX, CELLS_PER_ROW - 1));
+				endY = Math.max(0, Math.min(lastMouseY, CELLS_PER_ROW - 1));
+			}
+			Restore_And_Draw_Shape(ShapePreviewManager.type, ShapePreviewManager.startX, ShapePreviewManager.startY, endX, endY);
+			ShapePreviewManager.clear();
+			Save_Canvas_State();
+			return;
+		}
+
 		if (e.target.id !== "undo-button" && e.target.id !== "redo-button") {
 			Save_Canvas_State();
 		}
@@ -576,6 +891,24 @@ function Add_EventHandlers_To_Toolbar_Buttons()
 			case "colorpicker-button":
 				button.addEventListener("click", () => Activate_Tool("colorpicker"));
 				break;
+			case "line-button":
+				button.addEventListener("click", () => Activate_Tool("line"));
+				break;
+			case "rectangle-button":
+				button.addEventListener("click", () => Activate_Tool("rectangle"));
+				break;
+			case "ellipse-button":
+				button.addEventListener("click", () => Activate_Tool("ellipse"));
+				break;
+			case "rotate-button":
+				button.addEventListener("click", Rotate_Canvas_90deg);
+				break;
+			case "flip-x-button":
+				button.addEventListener("click", Flip_Along_X_Axis);
+				break;
+			case "flip-y-button":
+				button.addEventListener("click", Flip_Along_Y_Axis);
+				break;
 			case "grid-button":
 				button.addEventListener("click", Toggle_Grid);
 				break;
diff --git a/js/script.js b/js/script.js
index 9a24aec..b8d2391 100644
--- a/js/script.js
+++ b/js/script.js
@@ -332,7 +332,7 @@ function Show_Drop_Shadow(e) {
 
     dropShadowPreview.style.display = "block";
 
-    if (STATE["activeTool"] === "pencil" || STATE["activeTool"] === "fill") {
+    if (STATE["activeTool"] === "pencil" || STATE["activeTool"] === "fill" || STATE["activeTool"] === "line" || STATE["activeTool"] === "rectangle" || STATE["activeTool"] === "ellipse") {
         if (STATE[ACTIVE_COLOR_SELECT].startsWith("#aN")) {
             dropShadowPreview.style.display = "none";
         } else {
@@ -345,7 +345,7 @@ function Show_Drop_Shadow(e) {
         dropShadowPreview.style.display = "none"; 
     }
     dropShadowPreview.style.left = `${cellX}px`;
-    dropShadowPreview.style.top = `${cellY + 2.38 * CELL_WIDTH_PX}px`;
+    dropShadowPreview.style.top = `${cellY}px`;
 }
 
 function Hide_Drop_Shadow() {
diff --git a/js/tools.js b/js/tools.js
index 85df46b..ec456b2 100644
--- a/js/tools.js
+++ b/js/tools.js
@@ -24,6 +24,21 @@ const Tools = {
 		"hotkey": "KeyS",
 		"cursor": "crosshair",
 	},
+	"line": {
+		"button-id": "line-button",
+		"hotkey": "KeyL",
+		"cursor": "crosshair",
+	},
+	"rectangle": {
+		"button-id": "rectangle-button",
+		"hotkey": "KeyR",
+		"cursor": "crosshair",
+	},
+	"ellipse": {
+		"button-id": "ellipse-button",
+		"hotkey": "KeyO",
+		"cursor": "crosshair",
+	},
 }
 
 function Activate_Tool(label)
@@ -57,6 +72,12 @@ function Activate_Tool(label)
 function Get_Tool_Action_Callback()
 {
 	const cursor = Get_Cursor();
+	// If the active tool is explicitly set to line, prefer that behavior
+	if (STATE["activeTool"] === "line") {
+		return function (cell) {
+			cell.style.backgroundColor = STATE[ACTIVE_COLOR_SELECT];
+		};
+	}
 	if (cursor.includes("eraser.png")) {
 		return function (cell) {
 			cell.style.backgroundColor = CANVAS_INIT_COLOR;
diff --git a/main.css b/main.css
index c2c99ae..7266e13 100644
--- a/main.css
+++ b/main.css
@@ -61,7 +61,7 @@ body {
 	position: relative;
 	background-color: var(--blanket-background-color);
 	width: 606px;
-	height: 530px;
+	height: 570px;
 	padding-right: 20px;
 	padding-bottom: 20px;
 }
@@ -193,18 +193,35 @@ body {
 	visibility: visible;
 }
 
+/* Toolbar with two rows */
 #toolbar {
 	position: relative;
 	width: var(--toolbar-width);
-	height: var(--toolbar-height);
+	height: calc(2 * var(--toolbar-height) + 4px);
 	margin-bottom: 4px;
 	cursor: default;
 	border: 1px solid white;
 	border-radius: var(--border-radius);
 	background-color: var(--toolbar-background-color);
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: flex-start;
+	padding: 2px 0;
+}
+
+.toolbar-row {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-bottom: 2px;
+	width: 100%;
+}
+
+.toolbar-row:last-child {
+	margin-bottom: 0;
 }
 
-/* for toolbar icons */
 .undoImg {
 	background-image: url(img/undo.png);
 	background-position: center;
@@ -241,6 +258,38 @@ body {
 	background-repeat: no-repeat;
 }
 
+/* new toolbar icons */
+.lineImg {
+    background-image: url(img/line.png);
+    background-position: center;
+    background-repeat: no-repeat;
+}
+.rectangleImg {
+    background-image: url(img/rectangle.png);
+    background-position: center;
+    background-repeat: no-repeat;
+}
+.ellipseImg {
+    background-image: url(img/ellipse.png);
+    background-position: center;
+    background-repeat: no-repeat;
+}
+.rotateImg {
+    background-image: url(img/rotate.png);
+    background-position: center;
+    background-repeat: no-repeat;
+}
+.flipXImg {
+    background-image: url(img/flipX.png);
+    background-position: center;
+    background-repeat: no-repeat;
+}
+.flipYImg {
+    background-image: url(img/flipY.png);
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
 /* other toolbar buttons */
 .gridImg {
 	background-image: url(img/grid.png);
@@ -390,6 +439,7 @@ input[type="radio"] {
 }
 
 #info-section {
+	font-size: 0.75rem;
 	position: fixed;
 	top: 15%;
 	right: 30%;
@@ -401,9 +451,9 @@ input[type="radio"] {
 }
 
 #keyboard-shortcut-hover {
-	position: fixed;
+	position: absolute;
 	right: 0%;
-	top: 95%;
+	bottom: 0%;
 	
   	background-color: #e9e9a2;
   	padding: 0 4px;
