diff --git a/src/component-library/Demos/03_2_List_Rules.stories.tsx b/src/component-library/Demos/03_2_List_Rules.stories.tsx
new file mode 100644
index 000000000..09e239281
--- /dev/null
+++ b/src/component-library/Demos/03_2_List_Rules.stories.tsx
@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { fixtureRuleViewModel, mockUseComDOM } from "test/fixtures/table-fixtures";
+import { ListRule  as CR} from "../Pages/Rule/ListRule";
+
+export default {
+    title: 'Demos/04_ListRules',
+    component: CR,
+} as Meta<typeof CR>;
+
+type Story  = StoryObj<typeof CR>
+
+export const CreateRule: Story = {
+    args: {
+        comdom: mockUseComDOM(Array.from({length: 100}, () => fixtureRuleViewModel()))
+    }
+}
+
diff --git a/src/component-library/Demos/03_3_Page_Rule.stories.tsx b/src/component-library/Demos/03_3_Page_Rule.stories.tsx
new file mode 100644
index 000000000..944ae7852
--- /dev/null
+++ b/src/component-library/Demos/03_3_Page_Rule.stories.tsx
@@ -0,0 +1,21 @@
+import { RulePageLockEntryViewModel } from "@/lib/infrastructure/data/view-model/rule";
+import { Meta, StoryObj } from "@storybook/react";
+import { fixtureRuleMetaViewModel, fixtureRulePageLockEntryViewModel, fixtureRuleViewModel, mockUseComDOM } from "test/fixtures/table-fixtures";
+import { PageRule  as PR} from "../Pages/Rule/PageRule";
+
+export default {
+    title: 'Demos/05_PageRule',
+    component: PR,
+} as Meta<typeof PR>;
+
+type Story  = StoryObj<typeof PR>
+
+export const PageRule: Story = {
+    args: {
+        ruleMeta: fixtureRuleMetaViewModel(),
+        ruleLocks: mockUseComDOM<RulePageLockEntryViewModel>(Array.from({length: 100}, () => fixtureRulePageLockEntryViewModel())),
+        ruleBoostFunc: () => {console.log("boosted rule")},
+        ruleBoostShow: true,
+    }
+}
+
diff --git a/src/component-library/Pages/Rule/CreateRule.stories.tsx b/src/component-library/Pages/Rule/CreateRule.stories.tsx
index af5c2c021..c4870fba1 100644
--- a/src/component-library/Pages/Rule/CreateRule.stories.tsx
+++ b/src/component-library/Pages/Rule/CreateRule.stories.tsx
@@ -40,3 +40,4 @@ CreateRule.args = {
     },
     rseListComDOM: mockUseComDOM(Array.from({ length: 100 }, () => fixtureRSEAccountUsageLimitViewModel())),
 }
+