diff --git a/examples/counters_stable/e2e/tests/add_1k_counters.spec.ts b/examples/counters_stable/e2e/tests/add_1k_counters.spec.ts
index 61bc5e24d7..469cd636e9 100644
--- a/examples/counters_stable/e2e/tests/add_1k_counters.spec.ts
+++ b/examples/counters_stable/e2e/tests/add_1k_counters.spec.ts
@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
-import { CountersPage } from "./counters_page";
+import { CountersPage } from "./fixtures/counters_page";
 
 test.describe("Add 1000 Counters", () => {
-  test("should increment the total count by 1K", async ({ page }) => {
+  test("should increase the number of counters", async ({ page }) => {
     const ui = new CountersPage(page);
 
     await Promise.all([
diff --git a/examples/counters_stable/e2e/tests/add_counter.spec.ts b/examples/counters_stable/e2e/tests/add_counter.spec.ts
index c0cf480d52..21c7c76954 100644
--- a/examples/counters_stable/e2e/tests/add_counter.spec.ts
+++ b/examples/counters_stable/e2e/tests/add_counter.spec.ts
@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
-import { CountersPage } from "./counters_page";
+import { CountersPage } from "./fixtures/counters_page";
 
 test.describe("Add Counter", () => {
-  test("should increment the total count", async ({ page }) => {
+  test("should increase the number of counters", async ({ page }) => {
     const ui = new CountersPage(page);
     await ui.goto();
 
diff --git a/examples/counters_stable/e2e/tests/clear_counters.spec.ts b/examples/counters_stable/e2e/tests/clear_counters.spec.ts
index 288b352d2c..29cdfe9aa7 100644
--- a/examples/counters_stable/e2e/tests/clear_counters.spec.ts
+++ b/examples/counters_stable/e2e/tests/clear_counters.spec.ts
@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import { CountersPage } from "./counters_page";
+import { CountersPage } from "./fixtures/counters_page";
 
 test.describe("Clear Counters", () => {
   test("should reset the counts", async ({ page }) => {
diff --git a/examples/counters_stable/e2e/tests/decrement_count.spec.ts b/examples/counters_stable/e2e/tests/decrement_count.spec.ts
index a984a57d4a..bacc01cf0e 100644
--- a/examples/counters_stable/e2e/tests/decrement_count.spec.ts
+++ b/examples/counters_stable/e2e/tests/decrement_count.spec.ts
@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
-import { CountersPage } from "./counters_page";
+import { CountersPage } from "./fixtures/counters_page";
 
 test.describe("Decrement Count", () => {
-  test("should decrement the total count", async ({ page }) => {
+  test("should decrease the total count", async ({ page }) => {
     const ui = new CountersPage(page);
     await ui.goto();
     await ui.addCounter();
diff --git a/examples/counters_stable/e2e/tests/enter_count.spec.ts b/examples/counters_stable/e2e/tests/enter_count.spec.ts
new file mode 100644
index 0000000000..5e1854d683
--- /dev/null
+++ b/examples/counters_stable/e2e/tests/enter_count.spec.ts
@@ -0,0 +1,31 @@
+import { test, expect } from "@playwright/test";
+import { CountersPage } from "./fixtures/counters_page";
+
+test.describe("Enter Count", () => {
+  test("should increase the total count", async ({ page }) => {
+    const ui = new CountersPage(page);
+    await ui.goto();
+    await ui.addCounter();
+
+    await ui.enterCount("5");
+
+    await expect(ui.total).toHaveText("5");
+    await expect(ui.counters).toHaveText("1");
+  });
+
+  test("should decrease the total count", async ({ page }) => {
+    const ui = new CountersPage(page);
+    await ui.goto();
+    await ui.addCounter();
+    await ui.addCounter();
+    await ui.addCounter();
+
+    await ui.enterCount("100");
+    await ui.enterCount("100", 1);
+    await ui.enterCount("100", 2);
+    await ui.enterCount("50", 1);
+
+    await expect(ui.total).toHaveText("250");
+    await expect(ui.counters).toHaveText("3");
+  });
+});
diff --git a/examples/counters_stable/e2e/tests/counters_page.ts b/examples/counters_stable/e2e/tests/fixtures/counters_page.ts
similarity index 63%
rename from examples/counters_stable/e2e/tests/counters_page.ts
rename to examples/counters_stable/e2e/tests/fixtures/counters_page.ts
index 81f8abc293..7b951de659 100644
--- a/examples/counters_stable/e2e/tests/counters_page.ts
+++ b/examples/counters_stable/e2e/tests/fixtures/counters_page.ts
@@ -5,8 +5,11 @@ export class CountersPage {
   readonly addCounterButton: Locator;
   readonly addOneThousandCountersButton: Locator;
   readonly clearCountersButton: Locator;
-  readonly decrementCountButton: Locator;
+
   readonly incrementCountButton: Locator;
+  readonly counterInput: Locator;
+  readonly decrementCountButton: Locator;
+  readonly removeCountButton: Locator;
 
   readonly total: Locator;
   readonly counters: Locator;
@@ -32,9 +35,15 @@ export class CountersPage {
       hasText: "+1",
     });
 
+    this.removeCountButton = page.locator("button", {
+      hasText: "x",
+    });
+
     this.total = page.getByTestId("total");
 
     this.counters = page.getByTestId("counters");
+
+    this.counterInput = page.getByRole("textbox");
   }
 
   async goto() {
@@ -52,17 +61,17 @@ export class CountersPage {
     this.addOneThousandCountersButton.click();
   }
 
-  async decrementCount() {
+  async decrementCount(index: number = 0) {
     await Promise.all([
-      this.decrementCountButton.waitFor(),
-      this.decrementCountButton.click(),
+      this.decrementCountButton.nth(index).waitFor(),
+      this.decrementCountButton.nth(index).click(),
     ]);
   }
 
-  async incrementCount() {
+  async incrementCount(index: number = 0) {
     await Promise.all([
-      this.incrementCountButton.waitFor(),
-      this.incrementCountButton.click(),
+      this.incrementCountButton.nth(index).waitFor(),
+      this.incrementCountButton.nth(index).click(),
     ]);
   }
 
@@ -72,4 +81,18 @@ export class CountersPage {
       this.clearCountersButton.click(),
     ]);
   }
+
+  async enterCount(count: string, index: number = 0) {
+    await Promise.all([
+      this.counterInput.nth(index).waitFor(),
+      this.counterInput.nth(index).fill(count),
+    ]);
+  }
+
+  async removeCounter(index: number = 0) {
+    await Promise.all([
+      this.removeCountButton.nth(index).waitFor(),
+      this.removeCountButton.nth(index).click(),
+    ]);
+  }
 }
diff --git a/examples/counters_stable/e2e/tests/increment_count.spec.ts b/examples/counters_stable/e2e/tests/increment_count.spec.ts
index a41eed9cb0..9b262038c0 100644
--- a/examples/counters_stable/e2e/tests/increment_count.spec.ts
+++ b/examples/counters_stable/e2e/tests/increment_count.spec.ts
@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
-import { CountersPage } from "./counters_page";
+import { CountersPage } from "./fixtures/counters_page";
 
 test.describe("Increment Count", () => {
-  test("should increment the total count", async ({ page }) => {
+  test("should increase the total count", async ({ page }) => {
     const ui = new CountersPage(page);
     await ui.goto();
     await ui.addCounter();
diff --git a/examples/counters_stable/e2e/tests/remove_counter.spec.ts b/examples/counters_stable/e2e/tests/remove_counter.spec.ts
new file mode 100644
index 0000000000..17242a4777
--- /dev/null
+++ b/examples/counters_stable/e2e/tests/remove_counter.spec.ts
@@ -0,0 +1,18 @@
+import { test, expect } from "@playwright/test";
+import { CountersPage } from "./fixtures/counters_page";
+
+test.describe("Remove Counter", () => {
+  test("should decrement the number of counters", async ({ page }) => {
+    const ui = new CountersPage(page);
+    await ui.goto();
+
+    await ui.addCounter();
+    await ui.addCounter();
+    await ui.addCounter();
+
+    await ui.removeCounter(1);
+
+    await expect(ui.total).toHaveText("0");
+    await expect(ui.counters).toHaveText("2");
+  });
+});
diff --git a/examples/counters_stable/e2e/tests/view_counters.spec.ts b/examples/counters_stable/e2e/tests/view_counters.spec.ts
index d4b0515492..de2fcaae08 100644
--- a/examples/counters_stable/e2e/tests/view_counters.spec.ts
+++ b/examples/counters_stable/e2e/tests/view_counters.spec.ts
@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
-import { CountersPage } from "./counters_page";
+import { CountersPage } from "./fixtures/counters_page";
 
 test.describe("View Counters", () => {
-  test("should_see_the_title", async ({ page }) => {
+  test("should see the title", async ({ page }) => {
     const ui = new CountersPage(page);
     await ui.goto();
 
diff --git a/examples/counters_stable/src/main.rs b/examples/counters_stable/src/main.rs
index 0a065955f5..aa71b690eb 100644
--- a/examples/counters_stable/src/main.rs
+++ b/examples/counters_stable/src/main.rs
@@ -56,7 +56,7 @@ pub fn Counters(cx: Scope) -> impl IntoView {
             </button>
             <p>
                 "Total: "
-                <span id="total" data-testid="total">{move ||
+                <span data-testid="total">{move ||
                     counters.get()
                         .iter()
                         .map(|(_, (count, _))| count.get())
@@ -64,7 +64,7 @@ pub fn Counters(cx: Scope) -> impl IntoView {
                         .to_string()
                 }</span>
                 " from "
-                <span id="counters" data-testid="counters">{move || counters.with(|counters| counters.len()).to_string()}</span>
+                <span data-testid="counters">{move || counters.with(|counters| counters.len()).to_string()}</span>
                 " counters."
             </p>
             <ul>