diff --git a/.yarn/versions/bbd33299.yml b/.yarn/versions/bbd33299.yml
new file mode 100644
index 00000000..5b878624
--- /dev/null
+++ b/.yarn/versions/bbd33299.yml
@@ -0,0 +1,2 @@
+releases:
+  beatmapper: minor
diff --git a/src/components/app/forms/settings/controls.tsx b/src/components/app/forms/settings/controls.tsx
index ebdee8f2..c1a11ba0 100644
--- a/src/components/app/forms/settings/controls.tsx
+++ b/src/components/app/forms/settings/controls.tsx
@@ -1,9 +1,29 @@
+import { createListCollection } from "@ark-ui/react/collection";
+import { toPascalCase } from "@std/text/to-pascal-case";
+
+import { Field, RadioGroup } from "$/components/ui/compositions";
+import { updateObstaclePlacementMode } from "$/store/actions";
+import { useAppDispatch, useAppSelector } from "$/store/hooks";
+import { selectUserObstaclePlacementMode } from "$/store/selectors";
+import { ObstaclePlacementMode } from "$/types";
 import { Stack, Wrap } from "$:styled-system/jsx";
 
+const OBSTACLE_PLACEMENT_MODE_COLLECTION = createListCollection({
+	items: [ObstaclePlacementMode.LEGACY, ObstaclePlacementMode.MODERN, ObstaclePlacementMode.VISUAL],
+	itemToString: toPascalCase,
+});
+
 function AppControlsSettings() {
+	const dispatch = useAppDispatch();
+	const obstaclePlacementMode = useAppSelector(selectUserObstaclePlacementMode);
+
 	return (
 		<Stack gap={4}>
-			<Wrap gap={2}>Soon™</Wrap>
+			<Wrap gap={2}>
+				<Field label="Obstacle Placement Mode" helperText="Determines the behavior of how obstacles are placed along the grid. [Learn more](/docs/manual/notes#obstacle-placement-modes)">
+					<RadioGroup collection={OBSTACLE_PLACEMENT_MODE_COLLECTION} value={obstaclePlacementMode} onValueChange={(x) => dispatch(updateObstaclePlacementMode({ value: x.value as ObstaclePlacementMode }))} />
+				</Field>
+			</Wrap>
 		</Stack>
 	);
 }
diff --git a/src/components/app/forms/settings/index.tsx b/src/components/app/forms/settings/index.tsx
index 3cb653b6..9ec7d2eb 100644
--- a/src/components/app/forms/settings/index.tsx
+++ b/src/components/app/forms/settings/index.tsx
@@ -17,7 +17,6 @@ const collection = createListCollection({
 		{ value: "advanced", label: "Advanced", render: () => <AppAdvancedSettings /> },
 		//
 	],
-	isItemDisabled: (item) => !["user", "graphics", "audio", "advanced"].includes(item.value),
 });
 
 function AppSettings() {
diff --git a/src/components/app/templates/editor/action-panel-groups/grid.tsx b/src/components/app/templates/editor/action-panel-groups/grid.tsx
index 45b3f366..6d253ed1 100644
--- a/src/components/app/templates/editor/action-panel-groups/grid.tsx
+++ b/src/components/app/templates/editor/action-panel-groups/grid.tsx
@@ -16,7 +16,7 @@ function GridActionPanelGroup({ finishTweakingGrid }: Props) {
 	const { sid } = useParams({ from: "/_/edit/$sid/$bid/_" });
 
 	const dispatch = useAppDispatch();
-	const { numRows, numCols, colWidth, rowHeight } = useAppSelector((state) => selectGridSize(state, sid));
+	const { numRows, numCols, colWidth, rowHeight, colOffset, rowOffset } = useAppSelector((state) => selectGridSize(state, sid));
 
 	const { trigger: triggerSaveGridPreset } = usePrompt({
 		title: "Save Grid Preset",
@@ -45,6 +45,12 @@ function GridActionPanelGroup({ finishTweakingGrid }: Props) {
 				<Field label="Cell Height">
 					<FieldInput type="number" min={0.1} step={0.1} value={rowHeight} onKeyDown={(ev) => ev.stopPropagation()} onValueChange={(details) => sid && dispatch(updateGridSize({ songId: sid, changes: { rowHeight: details.valueAsNumber } }))} />
 				</Field>
+				<Field label="X Offset">
+					<FieldInput type="number" step={0.25} value={colOffset} onKeyDown={(ev) => ev.stopPropagation()} onValueChange={(details) => sid && dispatch(updateGridSize({ songId: sid, changes: { colOffset: details.valueAsNumber } }))} />
+				</Field>
+				<Field label="Y Offset">
+					<FieldInput type="number" step={0.25} value={rowOffset} onKeyDown={(ev) => ev.stopPropagation()} onValueChange={(details) => sid && dispatch(updateGridSize({ songId: sid, changes: { rowOffset: details.valueAsNumber } }))} />
+				</Field>
 			</ActionPanelGroup.ActionGroup>
 			<ActionPanelGroup.ActionGroup>
 				<Button variant="subtle" size="sm" unfocusOnPress onClick={triggerSaveGridPreset}>
diff --git a/src/components/scene/layouts/placement-grid/helpers.ts b/src/components/scene/layouts/placement-grid/helpers.ts
index de931b75..73f00167 100644
--- a/src/components/scene/layouts/placement-grid/helpers.ts
+++ b/src/components/scene/layouts/placement-grid/helpers.ts
@@ -1,12 +1,14 @@
 import { NoteDirection } from "bsmap";
 import type { Vector2Like } from "three";
 
+import type { NotePlacementMode } from "$/types";
 import { convertCartesianToPolar, convertRadiansToDegrees, normalizeAngle } from "$/utils";
 
 const CHUNK_SIZE = 45; // We have 8 possible directions in a 360-degree circle, so each direction gets a 45-degree wedge.
 const CHUNK_DIRECTIONS = [NoteDirection.RIGHT, NoteDirection.DOWN_RIGHT, NoteDirection.DOWN, NoteDirection.DOWN_LEFT, NoteDirection.LEFT, NoteDirection.UP_LEFT, NoteDirection.UP, NoteDirection.UP_RIGHT];
 
 interface Options {
+	mode: NotePlacementMode;
 	usePrecisionPlacement: boolean;
 	threshold?: number;
 	selectedDirection?: NoteDirection;
diff --git a/src/components/scene/layouts/placement-grid/machine.ts b/src/components/scene/layouts/placement-grid/machine.ts
index b1d2c230..96beea5b 100644
--- a/src/components/scene/layouts/placement-grid/machine.ts
+++ b/src/components/scene/layouts/placement-grid/machine.ts
@@ -1,7 +1,7 @@
 import type { ThreeEvent } from "@react-three/fiber";
 import { createMachine, type MachineSchema, type Service } from "@zag-js/core";
 
-import type { IGrid, IGridCell, ObjectPlacementMode } from "$/types";
+import type { IGrid, IGridCell, NotePlacementMode, ObstaclePlacementMode } from "$/types";
 import type { ThreeProps } from "$/types/vendor";
 import { isMetaKeyPressed } from "$/utils";
 import { BLOCK_CELL_SIZE } from "../../constants";
@@ -15,7 +15,8 @@ export interface IPlacementContext {
 
 export interface PlacementGridSchema extends MachineSchema {
 	props: {
-		mode: ObjectPlacementMode;
+		notePlacementMode: NotePlacementMode;
+		obstaclePlacementMode: ObstaclePlacementMode;
 		grid: IGrid;
 		onPointerUp?: (event: PointerEvent, payload: Pick<IPlacementContext, "cellDownAt" | "cellOverAt" | "direction">) => void;
 		onCellPointerDown?: (event: ThreeEvent<PointerEvent>, payload: Pick<IPlacementContext, "cellDownAt">) => void;
@@ -48,14 +49,16 @@ export const machine = createMachine<PlacementGridSchema>({
 });
 
 export function connect({ prop, context, refs }: Service<PlacementGridSchema>) {
-	const mode = prop("mode");
+	const notePlacementMode = prop("notePlacementMode");
+	const obstaclePlacementMode = prop("obstaclePlacementMode");
 	const grid = prop("grid");
 	const mouseDownAt = refs.get("mouseDownAt");
 
 	const scaleIndex = (value: number) => value * BLOCK_CELL_SIZE;
 
 	return {
-		mode,
+		notePlacementMode,
+		obstaclePlacementMode,
 		grid,
 		mouseDownAt,
 		cellDownAt: context.get("cellDownAt"),
@@ -65,8 +68,8 @@ export function connect({ prop, context, refs }: Service<PlacementGridSchema>) {
 		getCellProps: ({ colIndex, rowIndex }: IGridCell): ThreeProps<"group"> => {
 			const currentCell = { colIndex, rowIndex };
 
-			const x = scaleIndex((grid.numCols * -0.5 + 0.5 + colIndex) * grid.colWidth);
-			const y = scaleIndex(rowIndex * grid.rowHeight - 1);
+			const x = scaleIndex((grid.numCols * -0.5 + 0.5 + colIndex + grid.colOffset) * grid.colWidth);
+			const y = scaleIndex(rowIndex * grid.rowHeight - 1 + grid.rowOffset);
 
 			return {
 				"position-x": x,
@@ -110,6 +113,7 @@ export function connect({ prop, context, refs }: Service<PlacementGridSchema>) {
 						mouseDownAt,
 						{ x: event.pageX, y: event.pageY },
 						{
+							mode: notePlacementMode,
 							usePrecisionPlacement: isMetaKeyPressed(event),
 						},
 					);
diff --git a/src/components/scene/layouts/placement-grid/tentative-object.tsx b/src/components/scene/layouts/placement-grid/tentative-object.tsx
index b9352820..6aff46e3 100644
--- a/src/components/scene/layouts/placement-grid/tentative-object.tsx
+++ b/src/components/scene/layouts/placement-grid/tentative-object.tsx
@@ -1,15 +1,16 @@
 import { type ReactNode, useMemo } from "react";
 
-import type { IGrid, ObjectPlacementMode } from "$/types";
+import type { IGrid, NotePlacementMode, ObstaclePlacementMode } from "$/types";
 import { usePlacementGridContext } from "./context";
 import type { IPlacementContext } from "./machine";
 
-interface Props<T> {
-	createObject: (ctx: IPlacementContext, mode: ObjectPlacementMode, grid: IGrid) => T | null;
+interface Props<T, TMode extends NotePlacementMode | ObstaclePlacementMode> {
+	mode: TMode;
+	createObject: (ctx: IPlacementContext, mode: TMode, grid: IGrid) => T | null;
 	children: (data: NonNullable<T>) => ReactNode;
 }
-function TentativeObject<T>({ createObject, children }: Props<T>) {
-	const { mode, grid, mouseDownAt, cellDownAt, cellOverAt, direction } = usePlacementGridContext();
+function TentativeObject<T, TMode extends NotePlacementMode | ObstaclePlacementMode>({ mode, createObject, children }: Props<T, TMode>) {
+	const { grid, mouseDownAt, cellDownAt, cellOverAt, direction } = usePlacementGridContext();
 
 	const data = useMemo(() => {
 		if (mouseDownAt?.button !== 0) return null;
diff --git a/src/components/scene/templates/placement-grid.tsx b/src/components/scene/templates/placement-grid.tsx
index 1daf543f..92b024b3 100644
--- a/src/components/scene/templates/placement-grid.tsx
+++ b/src/components/scene/templates/placement-grid.tsx
@@ -13,7 +13,7 @@ import { createBombNoteFromMouseEvent, createColorNoteFromMouseEvent } from "$/h
 import { createObstacleFromMouseEvent } from "$/helpers/obstacles.helpers";
 import { addObstacle, addToCell } from "$/store/actions";
 import { useAppDispatch, useAppSelector } from "$/store/hooks";
-import { selectBeatDepth, selectColorScheme, selectDefaultObstacleDuration, selectGridSize, selectNotesEditorDirection, selectNotesEditorSelectionMode, selectNotesEditorTool, selectPlacementMode } from "$/store/selectors";
+import { selectBeatDepth, selectColorScheme, selectDefaultObstacleDuration, selectGridSize, selectNotePlacementMode, selectNotesEditorDirection, selectNotesEditorSelectionMode, selectNotesEditorTool, selectObstaclePlacementMode } from "$/store/selectors";
 import { ObjectTool } from "$/types";
 
 function EditorPlacementGrid({ onCellPointerDown, onCellWheel, ...rest }: Assign<ComponentProps<"group">, Pick<PlacementGrid.Schema["props"], "onCellPointerDown" | "onCellWheel">>) {
@@ -21,7 +21,8 @@ function EditorPlacementGrid({ onCellPointerDown, onCellWheel, ...rest }: Assign
 
 	const dispatch = useAppDispatch();
 	const selectionMode = useAppSelector(selectNotesEditorSelectionMode);
-	const mode = useAppSelector((state) => selectPlacementMode(state, sid));
+	const notePlacementMode = useAppSelector((state) => selectNotePlacementMode(state, sid));
+	const obstaclePlacementMode = useAppSelector((state) => selectObstaclePlacementMode(state, sid));
 	const grid = useAppSelector((state) => selectGridSize(state, sid));
 	const colorScheme = useAppSelector((state) => selectColorScheme(state, sid, bid));
 	const selectedTool = useAppSelector(selectNotesEditorTool);
@@ -30,7 +31,8 @@ function EditorPlacementGrid({ onCellPointerDown, onCellWheel, ...rest }: Assign
 	const beatDepth = useAppSelector(selectBeatDepth);
 
 	const service = useMachine(PlacementGrid.machine, {
-		mode,
+		notePlacementMode,
+		obstaclePlacementMode,
 		grid,
 		onCellPointerDown,
 		onCellWheel,
@@ -40,17 +42,17 @@ function EditorPlacementGrid({ onCellPointerDown, onCellWheel, ...rest }: Assign
 			switch (selectedTool) {
 				case ObjectTool.LEFT_NOTE:
 				case ObjectTool.RIGHT_NOTE: {
-					const note = createColorNoteFromMouseEvent(ctx, mode, grid, { direction: Math.round(ctx.direction ?? selectedDirection) });
+					const note = createColorNoteFromMouseEvent(ctx, notePlacementMode, grid, { direction: Math.round(ctx.direction ?? selectedDirection) });
 					if (note) return dispatch(addToCell({ songId: sid, tool: selectedTool, posX: note.posX, posY: note.posY, direction: note.direction }));
 					break;
 				}
 				case ObjectTool.BOMB_NOTE: {
-					const note = createBombNoteFromMouseEvent(ctx, mode, grid);
+					const note = createBombNoteFromMouseEvent(ctx, notePlacementMode, grid);
 					if (note) return dispatch(addToCell({ songId: sid, tool: selectedTool, posX: note.posX, posY: note.posY }));
 					break;
 				}
 				case ObjectTool.OBSTACLE: {
-					const obstacle = createObstacleFromMouseEvent(ctx, mode, grid, { duration: defaultObstacleDuration });
+					const obstacle = createObstacleFromMouseEvent(ctx, obstaclePlacementMode, grid, { duration: defaultObstacleDuration });
 					if (obstacle) return dispatch(addObstacle({ songId: sid, obstacle }));
 					break;
 				}
@@ -63,17 +65,17 @@ function EditorPlacementGrid({ onCellPointerDown, onCellWheel, ...rest }: Assign
 			<PlacementGrid.Layout>{(cell) => <PlacementGrid.Cell key={`${cell.colIndex}-${cell.rowIndex}`} data={cell} layers={!selectionMode ? 1 : 2} />}</PlacementGrid.Layout>
 			<Switch>
 				<Match when={!selectionMode && (selectedTool === ObjectTool.LEFT_NOTE || selectedTool === ObjectTool.RIGHT_NOTE)}>
-					<PlacementGrid.TentativeObject createObject={(ctx, mode, grid) => createColorNoteFromMouseEvent(ctx, mode, grid, { direction: Math.round(ctx.direction ?? selectedDirection) })}>
+					<PlacementGrid.TentativeObject mode={notePlacementMode} createObject={(ctx, mode, grid) => createColorNoteFromMouseEvent(ctx, mode, grid, { direction: Math.round(ctx.direction ?? selectedDirection) })}>
 						{(data) => <ColorNote data={data} position={resolvePositionForGridObject(data, { beatDepth, zOffset: SONG_OFFSET })} color={resolveColorForItem(selectedTool, { colorScheme })} />}
 					</PlacementGrid.TentativeObject>
 				</Match>
 				<Match when={!selectionMode && selectedTool === ObjectTool.BOMB_NOTE}>
-					<PlacementGrid.TentativeObject createObject={(ctx, mode, grid) => createBombNoteFromMouseEvent(ctx, mode, grid)}>
+					<PlacementGrid.TentativeObject mode={notePlacementMode} createObject={(ctx, mode, grid) => createBombNoteFromMouseEvent(ctx, mode, grid)}>
 						{(data) => <BombNote data={data} position={resolvePositionForGridObject(data, { beatDepth, zOffset: SONG_OFFSET })} color={resolveColorForItem(selectedTool, { colorScheme })} />}
 					</PlacementGrid.TentativeObject>
 				</Match>
 				<Match when={!selectionMode && selectedTool === ObjectTool.OBSTACLE}>
-					<PlacementGrid.TentativeObject createObject={(ctx, mode, grid) => createObstacleFromMouseEvent(ctx, mode, grid, { duration: defaultObstacleDuration })}>
+					<PlacementGrid.TentativeObject mode={obstaclePlacementMode} createObject={(ctx, mode, grid) => createObstacleFromMouseEvent(ctx, mode, grid, { duration: defaultObstacleDuration })}>
 						{(data) => <Obstacle data={data} beatDepth={beatDepth} position={resolvePositionForObstacle(data, { beatDepth, zOffset: SONG_OFFSET })} color={resolveColorForItem(selectedTool, { colorScheme })} />}
 					</PlacementGrid.TentativeObject>
 				</Match>
diff --git a/src/constants/editor.constants.ts b/src/constants/editor.constants.ts
index b3b4af06..8876aca2 100644
--- a/src/constants/editor.constants.ts
+++ b/src/constants/editor.constants.ts
@@ -10,6 +10,8 @@ export const DEFAULT_GRID = {
 	numCols: DEFAULT_NUM_COLS,
 	colWidth: DEFAULT_COL_WIDTH,
 	rowHeight: DEFAULT_ROW_HEIGHT,
+	colOffset: 0,
+	rowOffset: 0,
 } as const;
 
 export const SNAPPING_INCREMENTS = [
diff --git a/src/content/docs/manual/notes/index.mdx b/src/content/docs/manual/notes/index.mdx
index 6095b4ae..31e93ec9 100644
--- a/src/content/docs/manual/notes/index.mdx
+++ b/src/content/docs/manual/notes/index.mdx
@@ -59,20 +59,29 @@ You can also cycle through tools with <Shortcut>tab</Shortcut> and <Shortcut>shi
 
 ## Placing Obstacles
 
-Obstacles are a bit different - they take up multiple cells at the same time, and come in two variants: **full-height** and **crouch** walls.
+Obstacles are a bit different - they deplete your health when your head collides with them, 
+encouraging the player to physically dodge or crouch in order to avoid them.
 
 ![](../../../media/images/obstacle.png)
 
-To place a full-height wall, click and drag across the _bottom 2 rows_ in the placement grid.
-
-Crouch walls are placed the same way, but by clicking on the top row of squares. You can flip between ceilings and walls by moving the mouse up and down, before releasing:
+To create an obstacle, simply click and drag across the cells of the placement grid.
 
 ![](../../../media/images/place-obstacle.gif)
 
+### Obstacle Placement Modes
+
+Three unique placement behaviors are available for obstacles, which you can swap between via the Controls tab of the [Settings](/docs/manual/navigation#app-settings) menu:
+
+![](../../../media/images/free-obstacle-placement.gif)
+
+- For "Legacy" placement mode, you will be restricted to placement of full-height and crouch-height walls (as shown above). Useful if you're targeting legacy map formats.
+- For "Modern" placement mode, obstacles may be placed freely *within the constraints of the default placement grid*. If you're coming from the official editor, this mode should feel right at home.
+- For "Visual" placement mode, the placement grid will be re-adjusted to match the vanilla boundaries for obstacle placement. 
+  This mode also adds two additional columns to each side, just for good measure.
+
 > [!note]
-> You'll notice that for full-height walls, you're limited to placing walls that are 1 or 2 columns wide, no wider. 
-> This is a safety precaution; 3-column-thick walls can be hazardous, as folks try to leap out of the way. 
-> If you really want to place a super-wide wall, you'll need to do it in another editor.
+> For all placement modes, you may notice the inability to create a "dodge" obstacle that obstructs line of sight across the two center lanes. 
+> This is an intentional design choice, which primarily serves as a safety precaution for players. 
 
 ### Tweaking Duration
 
diff --git a/src/content/docs/mods/index.mdx b/src/content/docs/mods/index.mdx
index 265f35c6..dd368ed7 100644
--- a/src/content/docs/mods/index.mdx
+++ b/src/content/docs/mods/index.mdx
@@ -47,7 +47,8 @@ Maybe you want a section of the song to be in a 5×4 grid, or maybe you want to
 Once Mapping Extensions has been enabled for your map, a new button appears in the "Beatmap" view's right-hand sidebar: `Customize Grid`.
 
 Clicking this button swaps the side-panel to one that allows you to customize the number of rows and columns in the grid. 
-You can also change the width and height of each cell, so that a larger number of columns doesn't need to take up more physical space in the world!
+You can also change the width and height of each cell, as well as the X and Y offset of the entire placement grid itself, 
+so that a larger number of columns doesn't need to take up more physical space in the world!
 
 ![](../../media/images/customize-grid.gif)
 
diff --git a/src/content/media/images/free-obstacle-placement.gif b/src/content/media/images/free-obstacle-placement.gif
new file mode 100644
index 00000000..56048005
Binary files /dev/null and b/src/content/media/images/free-obstacle-placement.gif differ
diff --git a/src/helpers/grid.helpers.ts b/src/helpers/grid.helpers.ts
index 1af6fb24..d63da85f 100644
--- a/src/helpers/grid.helpers.ts
+++ b/src/helpers/grid.helpers.ts
@@ -7,15 +7,15 @@ import type { IGrid, IGridCell } from "$/types";
 // For example, in an 8x3 grid (2 extra columns on each side), the top-left corner would have a position of [0,2] in our custom grid,
 // but that translates to a position of [-2,2] in our natural game grid.
 
-function transformIndex(index: number, scale: number, pivot: number, shift: number = 0) {
-	return (index - shift - pivot) * scale + pivot;
+function transformIndex(index: number, scale: number, pivot: number, shift: number = 0, offset = 0) {
+	return (index - shift - pivot) * scale + pivot + offset;
 }
 
-export function convertGridColumn(colIndex: number, { numCols, colWidth }: Pick<IGrid, "numCols" | "colWidth">) {
-	return transformIndex(colIndex, colWidth, (DEFAULT_NUM_COLS - 1) / 2, (numCols - DEFAULT_NUM_COLS) / 2);
+export function convertGridColumn(colIndex: number, { numCols, colWidth, colOffset }: Pick<IGrid, "numCols" | "colWidth" | "colOffset">) {
+	return transformIndex(colIndex, colWidth, (DEFAULT_NUM_COLS - 1) / 2, (numCols - DEFAULT_NUM_COLS) / 2, colOffset);
 }
-export function convertGridRow(rowIndex: number, { rowHeight }: Pick<IGrid, "numRows" | "rowHeight">) {
-	return transformIndex(rowIndex, rowHeight, 0, 0);
+export function convertGridRow(rowIndex: number, { rowHeight, rowOffset }: Pick<IGrid, "numRows" | "rowHeight" | "rowOffset">) {
+	return transformIndex(rowIndex, rowHeight, 0, 0, rowOffset);
 }
 
 export function convertGridCell({ colIndex, rowIndex }: IGridCell, grid: IGrid = DEFAULT_GRID) {
diff --git a/src/helpers/notes.helpers.ts b/src/helpers/notes.helpers.ts
index d10a22d1..28b97c1a 100644
--- a/src/helpers/notes.helpers.ts
+++ b/src/helpers/notes.helpers.ts
@@ -2,7 +2,7 @@ import { createBombNote, createColorNote } from "bsmap";
 import type { wrapper } from "bsmap/types";
 
 import type { IPlacementContext } from "$/components/scene/layouts/placement-grid/machine";
-import { type IGrid, ObjectPlacementMode } from "$/types";
+import { type IGrid, NotePlacementMode } from "$/types";
 import { convertGridCell } from "./grid.helpers";
 import { serializeCoordinate } from "./item.helpers";
 
@@ -20,10 +20,10 @@ export function resolveNoteId<T extends Pick<wrapper.IWrapBaseNote, "time" | "po
 }
 
 function createNotePlacementFactory<T extends wrapper.IWrapBaseNote>(createNote: (data: Partial<T>) => T) {
-	return ({ cellDownAt }: IPlacementContext, mode: ObjectPlacementMode, grid: IGrid, data: Partial<T> = {}) => {
+	return ({ cellDownAt }: IPlacementContext, mode: NotePlacementMode, grid: IGrid, data: Partial<T> = {}) => {
 		if (!cellDownAt) return null;
 
-		const isExtended = mode === ObjectPlacementMode.EXTENSIONS;
+		const isExtended = mode === NotePlacementMode.EXTENSIONS;
 
 		const { colIndex, rowIndex } = convertGridCell(cellDownAt, grid);
 
diff --git a/src/helpers/obstacles.helpers.ts b/src/helpers/obstacles.helpers.ts
index 16e305fa..02e188aa 100644
--- a/src/helpers/obstacles.helpers.ts
+++ b/src/helpers/obstacles.helpers.ts
@@ -2,7 +2,7 @@ import { createObstacle } from "bsmap";
 import type { wrapper } from "bsmap/types";
 
 import type { IPlacementContext } from "$/components/scene/layouts/placement-grid/machine";
-import { type IGrid, ObjectPlacementMode } from "$/types";
+import { type IGrid, ObstaclePlacementMode } from "$/types";
 import { convertGridCell } from "./grid.helpers";
 import { serializeCoordinate } from "./item.helpers";
 
@@ -22,7 +22,33 @@ export function isFastObstacle<T extends Pick<wrapper.IWrapObstacle, "duration">
 	return duration < 0;
 }
 
-export function createObstacleFromMouseEvent({ cellDownAt, cellOverAt }: IPlacementContext, mode: ObjectPlacementMode, { numCols, numRows, colWidth, rowHeight }: IGrid, data: Partial<wrapper.IWrapObstacle>) {
+function clampObstacle<T extends Pick<wrapper.IWrapObstacle, "posX" | "posY" | "width" | "height">>(obstacle: T, rawWidth: number, { cellDownAt, cellOverAt }: Required<Pick<{ [key in keyof IPlacementContext]: NonNullable<IPlacementContext[key]> }, "cellDownAt" | "cellOverAt">>, { numCols }: Pick<IGrid, "numCols">) {
+	const offset = (numCols - 4) / 2;
+	const half = Math.round(numCols / 2);
+
+	if (isDodgeObstacle(obstacle)) {
+		const downAt = cellDownAt.colIndex - offset;
+		const overAt = cellOverAt.colIndex - offset;
+
+		if (!((downAt < 2 && overAt > 1) || (downAt > 1 && overAt < 2))) {
+			return obstacle;
+		}
+
+		obstacle.width = rawWidth - half;
+
+		if (cellOverAt.colIndex >= half) {
+			obstacle.posX = half - offset;
+			obstacle.width += cellDownAt.colIndex;
+		} else {
+			obstacle.posX = cellOverAt.colIndex - offset;
+			obstacle.width += numCols - 1 - cellDownAt.colIndex;
+		}
+	}
+
+	return obstacle;
+}
+
+export function createObstacleFromMouseEvent({ cellDownAt, cellOverAt }: IPlacementContext, mode: ObstaclePlacementMode, { numCols, numRows, colWidth, rowHeight, colOffset, rowOffset }: IGrid, data: Partial<wrapper.IWrapObstacle>) {
 	if (!cellDownAt || !cellOverAt) return null;
 
 	// 1. Determine the raw bounding box from the mouse event
@@ -31,45 +57,30 @@ export function createObstacleFromMouseEvent({ cellDownAt, cellOverAt }: IPlacem
 	const minRowIndex = Math.min(cellDownAt.rowIndex, cellOverAt.rowIndex);
 	const maxRowIndex = Math.max(cellDownAt.rowIndex, cellOverAt.rowIndex);
 
-	const { colIndex, rowIndex } = convertGridCell({ colIndex: minColIndex, rowIndex: minRowIndex }, { numCols, numRows, colWidth, rowHeight });
+	const { colIndex, rowIndex } = convertGridCell({ colIndex: minColIndex, rowIndex: minRowIndex }, { numCols, numRows, colWidth, rowHeight, colOffset, rowOffset });
 
 	const rawWidth = maxColIndex - minColIndex + 1;
 	const rawHeight = maxRowIndex - minRowIndex + 1;
 
-	const obstacle = createObstacle({
-		posX: colIndex,
-		width: rawWidth,
-		posY: cellOverAt.rowIndex === 2 ? 2 : 0,
-		height: cellOverAt.rowIndex === 2 ? 3 : 5,
-		...data,
-	});
+	const obstacle = createObstacle({ posX: colIndex, width: rawWidth, ...data });
 
 	switch (mode) {
-		case ObjectPlacementMode.NORMAL: {
-			if (isDodgeObstacle(obstacle)) {
-				const offset = (numCols - 4) / 2;
-
-				const downAt = cellDownAt.colIndex - offset;
-				const overAt = cellOverAt.colIndex - offset;
-
-				if (!((downAt < 2 && overAt > 1) || (downAt > 1 && overAt < 2))) return obstacle;
-
-				const half = Math.round(numCols / 2);
-				obstacle.width = rawWidth - half;
-
-				if (cellOverAt.colIndex >= half) {
-					obstacle.posX = half - offset;
-					obstacle.width += cellDownAt.colIndex;
-				} else {
-					obstacle.posX = cellOverAt.colIndex - offset;
-					obstacle.width += numCols - 1 - cellDownAt.colIndex;
-				}
-			}
-
-			return obstacle;
+		case ObstaclePlacementMode.LEGACY: {
+			obstacle.posY = cellOverAt.rowIndex === 2 ? 2 : 0;
+			obstacle.height = cellOverAt.rowIndex === 2 ? 3 : 5;
+			return clampObstacle(obstacle, rawWidth, { cellDownAt, cellOverAt }, { numCols });
 		}
-
-		case ObjectPlacementMode.EXTENSIONS: {
+		case ObstaclePlacementMode.MODERN: {
+			obstacle.posY = 2 * minRowIndex;
+			obstacle.height = 2 * rawHeight - 1;
+			return clampObstacle(obstacle, rawWidth, { cellDownAt, cellOverAt }, { numCols });
+		}
+		case ObstaclePlacementMode.VISUAL: {
+			obstacle.posY = minRowIndex;
+			obstacle.height = rawHeight;
+			return clampObstacle(obstacle, rawWidth, { cellDownAt, cellOverAt }, { numCols });
+		}
+		case ObstaclePlacementMode.EXTENSIONS: {
 			const isExtended = true;
 
 			obstacle.posX = serializeCoordinate(colIndex, isExtended);
diff --git a/src/helpers/song.helpers.ts b/src/helpers/song.helpers.ts
index 74dc7dbb..769db87d 100644
--- a/src/helpers/song.helpers.ts
+++ b/src/helpers/song.helpers.ts
@@ -91,16 +91,19 @@ export function getColorScheme<T extends Pick<App.ISong, "environment" | "colorS
 		envColorWhiteBoost: resolveColor("envColorWhiteBoost"),
 	};
 }
-export function getGridSize<T extends Pick<App.ISong, "modSettings" | "difficultiesById" | "environment" | "colorSchemesById">>(song: T): IGrid {
+
+export function getGridSize<T extends Pick<App.ISong, "modSettings" | "difficultiesById" | "environment" | "colorSchemesById">>(song: T, grid: IGrid = DEFAULT_GRID): IGrid {
 	const mappingExtensions = song.modSettings.mappingExtensions;
-	// In legacy states, `mappingExtensions` was a boolean, and it was possible to not have the key at all.
-	const isLegacy = typeof mappingExtensions === "boolean" || !mappingExtensions;
-	const isDisabled = mappingExtensions?.isEnabled === false;
-	if (isLegacy || isDisabled) return DEFAULT_GRID;
-	return deepAssign<IGrid>(DEFAULT_GRID, {
+
+	if (!mappingExtensions?.isEnabled) {
+		return grid;
+	}
+	return deepAssign<IGrid>(grid, {
 		numRows: mappingExtensions.numRows,
 		numCols: mappingExtensions.numCols,
 		colWidth: mappingExtensions.colWidth,
 		rowHeight: mappingExtensions.rowHeight,
+		colOffset: mappingExtensions.colOffset,
+		rowOffset: mappingExtensions.rowOffset,
 	});
 }
diff --git a/src/store/actions.ts b/src/store/actions.ts
index 3f5a99e1..eccd5847 100644
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -55,7 +55,7 @@ export const rehydrate = createAction("@@STORAGE/rehydrate", (args: { songId: So
 	return { payload: { ...args } };
 });
 
-export const { dismissPrompt, updateUsername, updateProcessingDelay, updateRenderScale, updateBloomEnabled, updatePacerWait } = user.actions;
+export const { dismissPrompt, updateUsername, updateProcessingDelay, updateRenderScale, updateBloomEnabled, updateObstaclePlacementMode, updatePacerWait } = user.actions;
 
 export const startLoadingMap = createAction("startLoadingMap", (args: { songId: SongId; beatmapId: BeatmapId }) => {
 	return { payload: { ...args } };
diff --git a/src/store/features/songs.slice.ts b/src/store/features/songs.slice.ts
index 9a1f6c68..daf7cbcb 100644
--- a/src/store/features/songs.slice.ts
+++ b/src/store/features/songs.slice.ts
@@ -3,11 +3,11 @@ import { distinct } from "@std/collections/distinct";
 
 import { convertMillisecondsToBeats } from "$/helpers/audio.helpers";
 import { deriveEventTracksForEnvironment } from "$/helpers/events.helpers";
-import { createAppBeatmap, createAppSong, getColorScheme, getEnvironment, getGridSize, resolveSongId } from "$/helpers/song.helpers";
+import { createAppBeatmap, createAppSong, getColorScheme, getEnvironment, resolveSongId } from "$/helpers/song.helpers";
 import { importMapArchiveToFilestore } from "$/services/packaging.service";
 import { finishLoadingMap, hydrateSongs, loadGridPreset, startLoadingMap } from "$/store/actions";
 import { createSlice } from "$/store/helpers";
-import { type App, type BeatmapId, type ColorSchemeKey, type IColorScheme, type IGrid, ObjectPlacementMode, type SongId } from "$/types";
+import type { App, BeatmapId, ColorSchemeKey, IColorScheme, IGrid, SongId } from "$/types";
 import { deepAssign } from "$/utils";
 
 const adapter = createEntityAdapter<App.ISong, SongId>({
@@ -100,12 +100,6 @@ const slice = createSlice({
 		selectEventTracksForEnvironment: createSelector([selectById, (_1: ReturnType<typeof adapter.getInitialState>, _2: SongId, beatmapId?: BeatmapId) => beatmapId], (song, beatmapId) => {
 			return deriveEventTracksForEnvironment(getEnvironment(song, beatmapId));
 		}),
-		selectGridSize: createSelector(selectById, (song) => {
-			return getGridSize(song);
-		}),
-		selectPlacementMode: createSelector(selectById, (song) => {
-			return song.modSettings.mappingExtensions?.isEnabled ? ObjectPlacementMode.EXTENSIONS : ObjectPlacementMode.NORMAL;
-		}),
 	},
 	reducers: (api) => {
 		const fetchContentsFromFile: AsyncThunkPayloadCreator<{ songId: SongId; songData: App.ISong }, { file: File | Blob; options: Parameters<typeof importMapArchiveToFilestore>[1] }> = async (args, api) => {
diff --git a/src/store/features/user.slice.ts b/src/store/features/user.slice.ts
index 14c6c151..f0f929c8 100644
--- a/src/store/features/user.slice.ts
+++ b/src/store/features/user.slice.ts
@@ -1,6 +1,7 @@
 import { createSlice, isAnyOf } from "@reduxjs/toolkit";
 
 import { addSong, addSongFromFile, finishLoadingMap, hydrateUser, updateSong } from "$/store/actions";
+import { ObstaclePlacementMode } from "$/types";
 
 const initialState = {
 	isNewUser: true,
@@ -9,6 +10,7 @@ const initialState = {
 	processingDelay: 60,
 	renderScale: 1,
 	isBloomEnabled: true,
+	obstaclePlacementMode: ObstaclePlacementMode.LEGACY as ObstaclePlacementMode,
 	pacerWaitMs: 50,
 };
 
@@ -22,6 +24,7 @@ const slice = createSlice({
 		selectProcessingDelay: (state) => (typeof state.processingDelay === "number" ? state.processingDelay : initialState.processingDelay),
 		selectRenderScale: (state) => state.renderScale,
 		selectBloomEnabled: (state) => state.isBloomEnabled,
+		selectObstaclePlacementMode: (state) => state.obstaclePlacementMode,
 		selectPacerWait: (state) => state.pacerWaitMs,
 	},
 	reducers: (api) => {
@@ -47,6 +50,10 @@ const slice = createSlice({
 				if (checked) return { ...state, isBloomEnabled: checked };
 				return { ...state, isBloomEnabled: !state.isBloomEnabled };
 			}),
+			updateObstaclePlacementMode: api.reducer<{ value: ObstaclePlacementMode }>((state, action) => {
+				const { value } = action.payload;
+				return { ...state, obstaclePlacementMode: value };
+			}),
 			updatePacerWait: api.reducer<{ value: number }>((state, action) => {
 				const { value } = action.payload;
 				return { ...state, pacerWaitMs: value };
@@ -55,13 +62,14 @@ const slice = createSlice({
 	},
 	extraReducers: (builder) => {
 		builder.addCase(hydrateUser, (state, action) => {
-			const { "user.new": isNewUser, "user.announcements": seenPrompts, "user.username": stickyMapAuthorName, "audio.offset": processingDelay, "graphics.scale": renderScale, "graphics.bloom": isBlooming } = action.payload;
+			const { "user.new": isNewUser, "user.announcements": seenPrompts, "user.username": stickyMapAuthorName, "audio.offset": processingDelay, "graphics.scale": renderScale, "graphics.bloom": isBlooming, "controls.obstacles": obstaclePlacementMode } = action.payload;
 			if (isNewUser !== undefined) state.isNewUser = isNewUser;
 			if (seenPrompts !== undefined) state.seenPrompts = seenPrompts;
 			if (stickyMapAuthorName !== undefined) state.stickyMapAuthorName = stickyMapAuthorName;
 			if (processingDelay !== undefined) state.processingDelay = processingDelay;
 			if (renderScale !== undefined) state.renderScale = renderScale;
 			if (isBlooming !== undefined) state.isBloomEnabled = isBlooming;
+			if (obstaclePlacementMode !== undefined) state.obstaclePlacementMode = Object.values(ObstaclePlacementMode)[obstaclePlacementMode];
 		});
 		builder.addCase(addSongFromFile.fulfilled, (state) => {
 			return { ...state, isNewUser: false };
diff --git a/src/store/selectors.ts b/src/store/selectors.ts
index 47f665a4..a3a9da61 100644
--- a/src/store/selectors.ts
+++ b/src/store/selectors.ts
@@ -3,10 +3,12 @@ import { calculateNps, sortObjectFn } from "bsmap";
 import type { wrapper } from "bsmap/types";
 import { shallowEqual } from "react-redux";
 
+import { DEFAULT_GRID } from "$/constants";
 import { convertBeatsToMilliseconds, convertMillisecondsToBeats, snapToNearestBeat } from "$/helpers/audio.helpers";
 import { calculateVisibleRange } from "$/helpers/editor.helpers";
 import { isLightEffectActive, resolveBasicEventColor, resolveBasicEventEffect } from "$/helpers/events.helpers";
-import { type App, type BeatmapId, type ILightState, type SongId, View } from "$/types";
+import { getGridSize } from "$/helpers/song.helpers";
+import { type App, type BeatmapId, type ILightState, NotePlacementMode, ObjectTool, ObstaclePlacementMode, type SongId, View } from "$/types";
 import { floorToNearest } from "$/utils";
 import clipboard from "./features/clipboard.slice";
 import beatmap from "./features/editor/beatmap.slice";
@@ -59,8 +61,6 @@ export const {
 	selectDemo,
 	selectModuleEnabled,
 	selectCustomColors,
-	selectGridSize,
-	selectPlacementMode,
 } = songs.getSelectors((state: Pick<RootState, "songs">) => {
 	return state.songs;
 });
@@ -94,10 +94,12 @@ export const {
 	selectProcessingDelay: selectAudioProcessingDelay,
 	selectRenderScale,
 	selectBloomEnabled,
+	selectObstaclePlacementMode: selectUserObstaclePlacementMode,
 	selectPacerWait,
 } = user.getSelectors((state: Pick<RootState, "user">) => {
 	return state.user;
 });
+
 export const selectAudioProcessingDelayInBeats = createSelector(selectAudioProcessingDelay, selectBpm, (processingDelay, bpm) => {
 	return convertMillisecondsToBeats(processingDelay, bpm);
 });
@@ -112,6 +114,15 @@ export const selectSurfaceDepth = createSelector(selectRenderScale, (renderScale
 	return Math.max(renderScale * 75, 25);
 });
 
+export const selectNotePlacementMode = createSelector(selectSongById, (song) => {
+	if (song.modSettings.mappingExtensions?.isEnabled) return NotePlacementMode.EXTENSIONS;
+	return NotePlacementMode.NORMAL;
+});
+export const selectObstaclePlacementMode = createSelector(selectSongById, selectUserObstaclePlacementMode, (song, userPlacementMode) => {
+	if (song.modSettings.mappingExtensions?.isEnabled) return ObstaclePlacementMode.EXTENSIONS;
+	return userPlacementMode;
+});
+
 export const { selectWaveformData } = visualizer.getSelectors((state: RootState) => {
 	return state.waveform;
 });
@@ -128,6 +139,19 @@ export const {
 	return state.editor.notes;
 });
 
+export const selectGridSize = createSelector(selectSongById, selectNotesEditorTool, selectObstaclePlacementMode, (song, tool, obstaclePlacementMode) => {
+	switch (tool) {
+		case ObjectTool.OBSTACLE: {
+			const visualGridSize = { ...DEFAULT_GRID, numCols: 8, numRows: 5, rowOffset: -0.5 };
+			if (obstaclePlacementMode === ObstaclePlacementMode.VISUAL) return getGridSize(song, visualGridSize);
+			return getGridSize(song);
+		}
+		default: {
+			return getGridSize(song);
+		}
+	}
+});
+
 export const {
 	selectTool: selectEventsEditorTool,
 	selectColor: selectEventsEditorColor,
diff --git a/src/store/setup.ts b/src/store/setup.ts
index 6202904c..26170908 100644
--- a/src/store/setup.ts
+++ b/src/store/setup.ts
@@ -12,7 +12,7 @@ import { default as ss } from "unstorage/drivers/session-storage";
 import { patchEnvironmentName } from "$/helpers/packaging.helpers";
 import { createDriver, type LegacyStorageSchema } from "$/services/storage.service";
 import { setupAppBeatmapFilestore, setupAppToaster } from "$/setup";
-import { type App, type BeatmapId, EventColor, EventEditMode, EventTool, type IGridPresets, type Member, ObjectTool } from "$/types";
+import { type App, type BeatmapId, EventColor, EventEditMode, EventTool, type IGridPresets, type Member, ObjectTool, ObstaclePlacementMode } from "$/types";
 import { init, loadGridPresets, loadSession, loadSongs, loadUser, tick, updateEventsEditorCursor } from "./actions";
 import { default as root } from "./features";
 import { createAllSharedMiddleware, createStorageMiddleware, type StorageObserver } from "./middleware";
@@ -47,6 +47,7 @@ import {
 	selectTickType,
 	selectTickVolume,
 	selectUsername,
+	selectUserObstaclePlacementMode,
 } from "./selectors";
 
 const STORAGE_PREFIX = location.hostname === "localhost" ? "beatmapper" : "";
@@ -58,6 +59,7 @@ export type UserStorageObservers = {
 	"audio.offset": StorageObserver<RootState, number>;
 	"graphics.scale": StorageObserver<RootState, number>;
 	"graphics.bloom": StorageObserver<RootState, boolean>;
+	"controls.obstacles": StorageObserver<RootState, number>;
 	"advanced.wait": StorageObserver<RootState, number>;
 };
 export type SessionStorageObservers = {
@@ -176,6 +178,7 @@ export async function createAppStore() {
 			"audio.offset": { selector: selectAudioProcessingDelay },
 			"graphics.scale": { selector: selectRenderScale },
 			"graphics.bloom": { selector: selectBloomEnabled },
+			"controls.obstacles": { selector: (state) => Object.values(ObstaclePlacementMode).indexOf(selectUserObstaclePlacementMode(state)) },
 			"advanced.wait": { selector: selectPacerWait },
 		},
 	});
diff --git a/src/types/editor/index.ts b/src/types/editor/index.ts
index 574e242f..48256531 100644
--- a/src/types/editor/index.ts
+++ b/src/types/editor/index.ts
@@ -42,6 +42,8 @@ export interface IGrid {
 	numRows: number;
 	colWidth: number;
 	rowHeight: number;
+	colOffset: number;
+	rowOffset: number;
 }
 
 export type IGridPresets = Record<string, IGrid>;
diff --git a/src/types/editor/shared.ts b/src/types/editor/shared.ts
index e814437b..f8c0ad29 100644
--- a/src/types/editor/shared.ts
+++ b/src/types/editor/shared.ts
@@ -24,12 +24,6 @@ export const ObjectTool = {
 } as const;
 export type ObjectTool = Member<typeof ObjectTool>;
 
-export const ObjectPlacementMode = {
-	NORMAL: "original",
-	EXTENSIONS: "mapping-extensions",
-} as const;
-export type ObjectPlacementMode = Member<typeof ObjectPlacementMode>;
-
 export const ObjectSelectionMode = {
 	SELECT: "select",
 	DESELECT: "deselect",
@@ -37,6 +31,20 @@ export const ObjectSelectionMode = {
 } as const;
 export type ObjectSelectionMode = Member<typeof ObjectSelectionMode>;
 
+export const NotePlacementMode = {
+	NORMAL: "normal",
+	EXTENSIONS: "mapping-extensions",
+} as const;
+export type NotePlacementMode = Member<typeof NotePlacementMode>;
+
+export const ObstaclePlacementMode = {
+	LEGACY: "legacy",
+	MODERN: "modern",
+	VISUAL: "visual",
+	EXTENSIONS: "mapping-extensions",
+} as const;
+export type ObstaclePlacementMode = Member<typeof ObstaclePlacementMode>;
+
 export const EventTool = {
 	ON: "on",
 	OFF: "off",