diff --git a/src/pages/app/stories/Documents.stories.svelte b/src/pages/app/stories/Documents.stories.svelte
index 239eabc10..e5b6c5ac1 100644
--- a/src/pages/app/stories/Documents.stories.svelte
+++ b/src/pages/app/stories/Documents.stories.svelte
@@ -2,7 +2,6 @@
   import { Story, Template } from "@storybook/addon-svelte-csf";
   import Documents from "../Documents.svelte";
 
-  import * as structure from "../../../structure/document.js";
   import { layout } from "../../../manager/layout.js";
   import * as mock from "./mock.js";
 
diff --git a/src/pages/app/stories/EmbedFooter.stories.svelte b/src/pages/app/stories/EmbedFooter.stories.svelte
new file mode 100644
index 000000000..6c73b1f05
--- /dev/null
+++ b/src/pages/app/stories/EmbedFooter.stories.svelte
@@ -0,0 +1,15 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import EmbedFooter from "../EmbedFooter.svelte";
+
+  export const meta = {
+    title: "App / Documents / Embed Footer",
+    component: EmbedFooter,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+</script>
+
+<Story name="default">
+  <EmbedFooter />
+</Story>
diff --git a/src/pages/app/stories/NoDocuments.stories.svelte b/src/pages/app/stories/NoDocuments.stories.svelte
new file mode 100644
index 000000000..4223e9786
--- /dev/null
+++ b/src/pages/app/stories/NoDocuments.stories.svelte
@@ -0,0 +1,15 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import NoDocuments from "../NoDocuments.svelte";
+
+  export const meta = {
+    title: "App / Documents / No Documents",
+    component: NoDocuments,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+</script>
+
+<Story name="default">
+  <NoDocuments />
+</Story>
diff --git a/src/pages/app/stories/ProcessingBar.stories.svelte b/src/pages/app/stories/ProcessingBar.stories.svelte
new file mode 100644
index 000000000..430a50969
--- /dev/null
+++ b/src/pages/app/stories/ProcessingBar.stories.svelte
@@ -0,0 +1,19 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import ProcessingBar from "../ProcessingBar.svelte";
+
+  import { documents } from "../../../manager/documents.js";
+
+  documents.doneProcessing = false;
+
+  export const meta = {
+    title: "App / Documents / Processing Bar",
+    component: ProcessingBar,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+</script>
+
+<Story name="default">
+  <ProcessingBar />
+</Story>