diff --git a/packages/elements/src/components/ino-card/ino-card.e2e.ts b/packages/elements/src/components/ino-card/ino-card.e2e.ts
deleted file mode 100644
index dfe70e5f32..0000000000
--- a/packages/elements/src/components/ino-card/ino-card.e2e.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { setupPageWithContent } from '../../util/e2etests-setup';
-
-const INO_CARD = `<ino-card></ino-card>`;
-const CARD_SELECTOR = 'ino-card';
-const DIV_SELECTOR = 'ino-card div';
-
-describe('InoCard', () => {
-  describe('Properties', () => {
-    it('should render with selected set to true', async () => {
-      const page = await setupPageWithContent(INO_CARD);
-      const card = await page.find(CARD_SELECTOR);
-
-      await card.setAttribute('selected', true);
-      await page.waitForChanges();
-
-      const div = await page.find(DIV_SELECTOR);
-      expect(div).toHaveClass('ino-card--selected');
-      expect(card).toHaveAttribute('selected');
-    });
-
-    it('should render with check mark if selected', async () => {
-      const page = await setupPageWithContent(INO_CARD);
-      const card = await page.find(CARD_SELECTOR);
-
-      await card.setAttribute('selected', true);
-      await page.waitForChanges();
-
-      const check_mark = await page.find('.ino-card__checkmark');
-      expect(check_mark).toBeDefined();
-    });
-  });
-
-  describe('Events', () => {
-    it('should emit a clickEl event upon interacting with the card', async () => {
-      const page = await setupPageWithContent(INO_CARD);
-      const card = await page.find(CARD_SELECTOR);
-      const event = await page.spyOnEvent('click');
-
-      await card.click();
-      await page.waitForChanges();
-
-      expect(event).toHaveReceivedEvent();
-    });
-  });
-});
diff --git a/packages/elements/src/components/ino-card/ino-card.spec.ts b/packages/elements/src/components/ino-card/ino-card.spec.ts
new file mode 100644
index 0000000000..435619879c
--- /dev/null
+++ b/packages/elements/src/components/ino-card/ino-card.spec.ts
@@ -0,0 +1,28 @@
+import { newSpecPage, SpecPage } from '@stencil/core/testing';
+import { Card } from './ino-card';
+import { listenForEvent } from '../../util/test-utils';
+
+const INO_CARD = `<ino-card></ino-card>`;
+const CARD_SELECTOR = 'ino-card';
+
+describe('InoCard', () => {
+  let page: SpecPage;
+  let card: HTMLInoCardElement;
+
+  beforeEach(async () => {
+    page = await newSpecPage({
+      components: [Card],
+      html: INO_CARD,
+    });
+    card = page.body.querySelector(CARD_SELECTOR);
+  });
+
+  it('should emit a clickEl event upon interacting with the card', async () => {
+    const { eventSpy } = listenForEvent(page, 'click');
+
+    card.click();
+    await page.waitForChanges();
+
+    expect(eventSpy).toHaveBeenCalled();
+  });
+});
diff --git a/packages/storybook/src/stories/ino-accordion/ino-accordion.spec.ts b/packages/storybook/src/stories/ino-accordion/ino-accordion.spec.ts
index bb4945e311..bb199ac7cc 100644
--- a/packages/storybook/src/stories/ino-accordion/ino-accordion.spec.ts
+++ b/packages/storybook/src/stories/ino-accordion/ino-accordion.spec.ts
@@ -9,7 +9,7 @@ test.describe('ino-accordion', () => {
   });
 
   test('can be expanded properly', async ({ page }) => {
-    await goToStory(page, ['structure', 'ino-accordion', 'default']);
+    await goToStory(page, ['Structure', 'ino-accordion', 'default']);
 
     const title = page.getByText('Accordion Title');
     const text = page.getByText('Lorem ipsum dolor sit amet');
diff --git a/packages/storybook/src/stories/ino-button/ino-button.spec.ts b/packages/storybook/src/stories/ino-button/ino-button.spec.ts
index e149f9c77a..30d0a65bd0 100644
--- a/packages/storybook/src/stories/ino-button/ino-button.spec.ts
+++ b/packages/storybook/src/stories/ino-button/ino-button.spec.ts
@@ -5,7 +5,7 @@ test.describe('ino-button', () => {
   let inoButton: Locator;
 
   test.beforeEach(async ({ page }) => {
-    await goToStory(page, ['buttons', 'ino-button', 'default']);
+    await goToStory(page, ['Buttons', 'ino-button', 'default']);
     inoButton = page.locator('ino-button');
   });
 
diff --git a/packages/storybook/src/stories/ino-card/ino-card.spec.ts b/packages/storybook/src/stories/ino-card/ino-card.spec.ts
new file mode 100644
index 0000000000..6510c9e67a
--- /dev/null
+++ b/packages/storybook/src/stories/ino-card/ino-card.spec.ts
@@ -0,0 +1,17 @@
+import { expect, Locator, test } from '@playwright/test';
+import { goToStory, setAttribute } from '../test-utils';
+
+test.describe('ino-card', () => {
+  let inoCard: Locator;
+
+  test.beforeEach(async ({ page }) => {
+    await goToStory(page, ['Structure', 'ino-card', 'default']);
+    inoCard = page.locator('ino-card');
+  });
+
+  test('should render with check mark if selected', async () => {
+    await setAttribute(inoCard, 'selected', 'true');
+    const check_mark = inoCard.locator('.ino-card__checkmark');
+    await expect(check_mark).toBeVisible();
+  });
+});
diff --git a/packages/storybook/src/stories/ino-checkbox/ino-checkbox.spec.ts b/packages/storybook/src/stories/ino-checkbox/ino-checkbox.spec.ts
index 097ecc5ac9..189a48e31e 100644
--- a/packages/storybook/src/stories/ino-checkbox/ino-checkbox.spec.ts
+++ b/packages/storybook/src/stories/ino-checkbox/ino-checkbox.spec.ts
@@ -9,7 +9,7 @@ test.describe('ino-checkbox', () => {
   });
 
   test('can be toggled properly', async ({ page }) => {
-    await goToStory(page, ['input', 'ino-checkbox', 'default']);
+    await goToStory(page, ['Input', 'ino-checkbox', 'default']);
 
     await expect(checkbox).toBeChecked();
 
@@ -19,7 +19,7 @@ test.describe('ino-checkbox', () => {
   });
 
   test('disabling prevents a change of checked', async ({ page }) => {
-    await goToStory(page, ['input', 'ino-checkbox', 'disabled']);
+    await goToStory(page, ['Input', 'ino-checkbox', 'disabled']);
 
     await expect(checkbox).toBeChecked();
     await expect(checkbox).toBeDisabled();
diff --git a/packages/storybook/src/stories/test-utils.ts b/packages/storybook/src/stories/test-utils.ts
index 42be153c19..256d998b69 100644
--- a/packages/storybook/src/stories/test-utils.ts
+++ b/packages/storybook/src/stories/test-utils.ts
@@ -1,6 +1,6 @@
 import { Locator, Page } from '@playwright/test';
 
-type StoryDescription = [string, string, string]; // ['input', 'ino-checkbox', 'default']
+type StoryDescription = [StoryCategory, string, string]; // ['input', 'ino-checkbox', 'default']
 
 export async function goToStory(
   page: Page,
@@ -8,7 +8,9 @@ export async function goToStory(
 ) {
   const [category, name, story] = storyDescription;
 
-  await page.goto(`/iframe.html?id=${category}-${name}--${story}`);
+  await page.goto(
+    `/iframe.html?id=${category.toLowerCase()}-${name}--${story}`,
+  );
 }
 
 export function setAttribute(el: Locator, attrName: string, value: string) {
diff --git a/packages/storybook/src/types/storyCategory.d.ts b/packages/storybook/src/types/storyCategory.d.ts
new file mode 100644
index 0000000000..82aaa71051
--- /dev/null
+++ b/packages/storybook/src/types/storyCategory.d.ts
@@ -0,0 +1,6 @@
+declare type StoryCategory =
+  | 'Structure'
+  | 'Input'
+  | 'Graphic'
+  | 'Buttons'
+  | 'Notification';