diff --git a/src/pages/viewer/pane/stories/ActionPane.stories.svelte b/src/pages/viewer/pane/stories/ActionPane.stories.svelte
new file mode 100644
index 000000000..190d45bc2
--- /dev/null
+++ b/src/pages/viewer/pane/stories/ActionPane.stories.svelte
@@ -0,0 +1,13 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import ActionPane from "../ActionPane.svelte";
+
+  export const meta = {
+    title: "Viewer / Pane / Action Pane",
+    component: ActionPane,
+  };
+</script>
+
+<Story name="default">
+  <ActionPane />
+</Story>
diff --git a/src/pages/viewer/pane/stories/AnnotatePane.stories.svelte b/src/pages/viewer/pane/stories/AnnotatePane.stories.svelte
new file mode 100644
index 000000000..bb98382e9
--- /dev/null
+++ b/src/pages/viewer/pane/stories/AnnotatePane.stories.svelte
@@ -0,0 +1,13 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import AnnotatePane from "../AnnotatePane.svelte";
+
+  export const meta = {
+    title: "Viewer / Pane / Annotate Pane",
+    component: AnnotatePane,
+  };
+</script>
+
+<Story name="default">
+  <AnnotatePane />
+</Story>
diff --git a/src/pages/viewer/pane/stories/ModifyPane.stories.svelte b/src/pages/viewer/pane/stories/ModifyPane.stories.svelte
new file mode 100644
index 000000000..90c5eabb4
--- /dev/null
+++ b/src/pages/viewer/pane/stories/ModifyPane.stories.svelte
@@ -0,0 +1,13 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import ModifyPane from "../ModifyPane.svelte";
+
+  export const meta = {
+    title: "Viewer / Pane / Modify Pane",
+    component: ModifyPane,
+  };
+</script>
+
+<Story name="default">
+  <ModifyPane />
+</Story>
diff --git a/src/pages/viewer/pane/stories/RedactPane.stories.svelte b/src/pages/viewer/pane/stories/RedactPane.stories.svelte
new file mode 100644
index 000000000..504d5778c
--- /dev/null
+++ b/src/pages/viewer/pane/stories/RedactPane.stories.svelte
@@ -0,0 +1,13 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import RedactPane from "../RedactPane.svelte";
+
+  export const meta = {
+    title: "Viewer / Pane / Redact Pane",
+    component: RedactPane,
+  };
+</script>
+
+<Story name="default">
+  <RedactPane />
+</Story>
diff --git a/src/pages/viewer/pane/stories/SearchPane.stories.svelte b/src/pages/viewer/pane/stories/SearchPane.stories.svelte
new file mode 100644
index 000000000..53a4b963a
--- /dev/null
+++ b/src/pages/viewer/pane/stories/SearchPane.stories.svelte
@@ -0,0 +1,13 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import SearchPane from "../SearchPane.svelte";
+
+  export const meta = {
+    title: "Viewer / Pane / Search Pane",
+    component: SearchPane,
+  };
+</script>
+
+<Story name="default">
+  <SearchPane />
+</Story>
diff --git a/src/pages/viewer/pane/stories/SelectNotePane.stories.svelte b/src/pages/viewer/pane/stories/SelectNotePane.stories.svelte
new file mode 100644
index 000000000..7fcb1e017
--- /dev/null
+++ b/src/pages/viewer/pane/stories/SelectNotePane.stories.svelte
@@ -0,0 +1,13 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import SelectNotePane from "../SelectNotePane.svelte";
+
+  export const meta = {
+    title: "Viewer / Pane / Select Note Pane",
+    component: SelectNotePane,
+  };
+</script>
+
+<Story name="default">
+  <SelectNotePane />
+</Story>