diff --git a/loop/webui/src/web-components/sketch-network-status.test.ts b/loop/webui/src/web-components/sketch-network-status.test.ts
index 04e3386..45882a0 100644
--- a/loop/webui/src/web-components/sketch-network-status.test.ts
+++ b/loop/webui/src/web-components/sketch-network-status.test.ts
@@ -1,67 +1,65 @@
-import { html, fixture, expect } from "@open-wc/testing";
-import "./sketch-network-status";
-import type { SketchNetworkStatus } from "./sketch-network-status";
+import { test, expect } from "@sand4rt/experimental-ct-web";
+import { SketchNetworkStatus } from "./sketch-network-status";
 
-describe("SketchNetworkStatus", () => {
-  it("displays the correct connection status when connected", async () => {
-    const el: SketchNetworkStatus = await fixture(html`
-      <sketch-network-status
-        connection="connected"
-        message="Connected to server"
-      ></sketch-network-status>
-    `);
-
-    const indicator = el.shadowRoot!.querySelector(".polling-indicator");
-    const statusText = el.shadowRoot!.querySelector(".status-text");
-
-    expect(indicator).to.exist;
-    expect(statusText).to.exist;
-    expect(indicator!.classList.contains("active")).to.be.true;
-    expect(statusText!.textContent).to.equal("Connected to server");
+test("displays the correct connection status when connected", async ({
+  mount,
+}) => {
+  const component = await mount(SketchNetworkStatus, {
+    props: {
+      connection: "connected",
+      message: "Connected to server",
+    },
   });
 
-  it("displays the correct connection status when disconnected", async () => {
-    const el: SketchNetworkStatus = await fixture(html`
-      <sketch-network-status
-        connection="disconnected"
-        message="Disconnected"
-      ></sketch-network-status>
-    `);
+  await expect(component.locator(".polling-indicator")).toBeVisible();
+  await expect(component.locator(".status-text")).toBeVisible();
+  await expect(component.locator(".polling-indicator.active")).toBeVisible();
+  await expect(component.locator(".status-text")).toContainText(
+    "Connected to server",
+  );
+});
 
-    const indicator = el.shadowRoot!.querySelector(".polling-indicator");
-
-    expect(indicator).to.exist;
-    expect(indicator!.classList.contains("error")).to.be.true;
+test("displays the correct connection status when disconnected", async ({
+  mount,
+}) => {
+  const component = await mount(SketchNetworkStatus, {
+    props: {
+      connection: "disconnected",
+      message: "Disconnected",
+    },
   });
 
-  it("displays the correct connection status when disabled", async () => {
-    const el: SketchNetworkStatus = await fixture(html`
-      <sketch-network-status
-        connection="disabled"
-        message="Disabled"
-      ></sketch-network-status>
-    `);
+  await expect(component.locator(".polling-indicator")).toBeVisible();
+  await expect(component.locator(".polling-indicator.error")).toBeVisible();
+});
 
-    const indicator = el.shadowRoot!.querySelector(".polling-indicator");
-
-    expect(indicator).to.exist;
-    expect(indicator!.classList.contains("error")).to.be.false;
-    expect(indicator!.classList.contains("active")).to.be.false;
+test("displays the correct connection status when disabled", async ({
+  mount,
+}) => {
+  const component = await mount(SketchNetworkStatus, {
+    props: {
+      connection: "disabled",
+      message: "Disabled",
+    },
   });
 
-  it("displays error message when provided", async () => {
-    const errorMsg = "Connection error";
-    const el: SketchNetworkStatus = await fixture(html`
-      <sketch-network-status
-        connection="disconnected"
-        message="Disconnected"
-        error="${errorMsg}"
-      ></sketch-network-status>
-    `);
+  await expect(component.locator(".polling-indicator")).toBeVisible();
+  await expect(component.locator(".polling-indicator.error")).not.toBeVisible();
+  await expect(
+    component.locator(".polling-indicator.active"),
+  ).not.toBeVisible();
+});
 
-    const statusText = el.shadowRoot!.querySelector(".status-text");
-
-    expect(statusText).to.exist;
-    expect(statusText!.textContent).to.equal(errorMsg);
+test("displays error message when provided", async ({ mount }) => {
+  const errorMsg = "Connection error";
+  const component = await mount(SketchNetworkStatus, {
+    props: {
+      connection: "disconnected",
+      message: "Disconnected",
+      error: errorMsg,
+    },
   });
+
+  await expect(component.locator(".status-text")).toBeVisible();
+  await expect(component.locator(".status-text")).toContainText(errorMsg);
 });