diff --git a/tests/e2e/states.spec.ts b/tests/e2e/states.spec.ts
new file mode 100644
index 00000000..2cba3dcf
--- /dev/null
+++ b/tests/e2e/states.spec.ts
@@ -0,0 +1,90 @@
+import {test, expect} from "@playwright/test";
+
+test.describe("States", () => {
+  test.beforeEach(async ({context, page}) => {
+    await context.clearCookies();
+
+    await page.goto("/");
+    await page.evaluate(() => {
+      localStorage.clear();
+      sessionStorage.clear();
+    });
+
+    // Navigate with seed parameter and wait for full load
+    await page.goto("/?seed=test-states&width=1280&height=720");
+
+    // Wait for map generation to complete
+    await page.waitForFunction(() => (window as any).mapId !== undefined, {timeout: 60000});
+
+    // Additional wait for any rendering/animations to settle
+    await page.waitForTimeout(500);
+  });
+
+  test("removing a state via UI should allow military regeneration without errors", async ({page}) => {
+    // First click the options trigger (►) to open the menu
+    await page.click("#optionsTrigger");
+    await page.waitForTimeout(300);
+
+    // Open the Tools tab
+    await page.click("#toolsTab");
+    await page.waitForTimeout(200);
+
+    // Click "States" button to open States Editor
+    await page.click("#editStatesButton");
+    await page.waitForSelector("#statesEditor", {state: "visible", timeout: 5000});
+    await page.waitForTimeout(300);
+
+    // Find a state row and get its ID
+    const stateId = await page.evaluate(() => {
+      const stateRow = document.querySelector("#statesBodySection > div[data-id]") as HTMLElement;
+      return stateRow ? parseInt(stateRow.dataset.id!, 10) : null;
+    });
+
+    expect(stateId).not.toBeNull();
+
+    // Verify this state is in neighbors of other states before removal
+    const neighborsBefore = await page.evaluate((id: number) => {
+      const {states} = (window as any).pack;
+      return states.filter((s: any) => s.i && !s.removed && s.neighbors && s.neighbors.includes(id)).length;
+    }, stateId!);
+
+    // Click the trash icon to remove the state
+    await page.click(`#statesBodySection > div[data-id="${stateId}"] .icon-trash-empty`);
+
+    // Confirm the removal in the jQuery dialog - look for "Remove" button in the dialog buttonpane
+    await page.waitForSelector(".ui-dialog:has(#alert) .ui-dialog-buttonpane", {state: "visible", timeout: 3000});
+    await page.click(".ui-dialog:has(#alert) .ui-dialog-buttonpane button:first-child"); // "Remove" is first button
+    await page.waitForTimeout(500);
+
+    // Verify the state is no longer in neighbors of any other state
+    const neighborsAfter = await page.evaluate((id: number) => {
+      const {states} = (window as any).pack;
+      return states.filter((s: any) => s.i && !s.removed && s.neighbors && s.neighbors.includes(id)).length;
+    }, stateId!);
+
+    expect(neighborsAfter).toBe(0);
+
+    // Close the States Editor - the close button is in the jQuery UI dialog wrapper
+    await page.click(".ui-dialog:has(#statesEditor) .ui-dialog-titlebar-close");
+    await page.waitForTimeout(200);
+
+    // Now click "Military" regenerate button and verify no errors
+    await page.click("#regenerateMilitary");
+    await page.waitForTimeout(1000);
+
+    // Verify military was regenerated without throwing
+    const militaryResult = await page.evaluate(() => {
+      const {states} = (window as any).pack;
+      const validStates = states.filter((s: any) => s.i && !s.removed);
+      // Check that at least some states have military data
+      return {
+        statesCount: validStates.length,
+        statesWithMilitary: validStates.filter((s: any) => s.military && s.military.length > 0).length
+      };
+    });
+
+    expect(militaryResult.statesCount).toBeGreaterThan(0);
+    // At least some states should have military
+    expect(militaryResult.statesWithMilitary).toBeGreaterThanOrEqual(0);
+  });
+});