diff --git a/src/component-library/Demos/04_1_List_Subscriptions.stories.tsx b/src/component-library/Demos/04_1_List_Subscriptions.stories.tsx
new file mode 100644
index 000000000..1775af039
--- /dev/null
+++ b/src/component-library/Demos/04_1_List_Subscriptions.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { fixtureSubscriptionRuleStatesViewModel, mockUseComDOM } from "test/fixtures/table-fixtures";
+import { ListSubscription as L} from "../Pages/Subscriptions/ListSubscription";
+
+export default {
+    title: 'Demos/06_ListSubscriptions',
+    component: L,
+} as Meta<typeof L>;
+
+type Story  = StoryObj<typeof L>
+
+export const ListSubscription: Story = {
+    args: {
+        accountname: "test",
+        comdom: mockUseComDOM(Array.from({ length: 100 }, () => fixtureSubscriptionRuleStatesViewModel()))
+    }
+}
+
diff --git a/src/component-library/Demos/04_2_Page_Subscriptions.stories.tsx b/src/component-library/Demos/04_2_Page_Subscriptions.stories.tsx
new file mode 100644
index 000000000..8699615f3
--- /dev/null
+++ b/src/component-library/Demos/04_2_Page_Subscriptions.stories.tsx
@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { fixtureSubscriptionViewModel } from "test/fixtures/table-fixtures";
+import { PageSubscription as P} from "../Pages/Subscriptions/PageSubscription";
+
+export default {
+    title: 'Demos/07_PageSubscription',
+    component: P,
+} as Meta<typeof P>;
+
+type Story  = StoryObj<typeof P>
+
+export const ListSubscription: Story = {
+    args: {
+        subscriptionViewModel: fixtureSubscriptionViewModel()
+    }
+}
+