diff --git a/src/addons/browser/stories/AddOnList.stories.svelte b/src/addons/browser/stories/AddOnList.stories.svelte
index debb8b9e5..4317e2354 100644
--- a/src/addons/browser/stories/AddOnList.stories.svelte
+++ b/src/addons/browser/stories/AddOnList.stories.svelte
@@ -1,5 +1,5 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import defaultAddons from "../../fixtures/addons.json";
   import AddOnList from "../AddOnList.svelte";
@@ -9,13 +9,13 @@
     loading: false,
     error: null,
   };
-</script>
 
-<Meta
-  title="Add-Ons / Browser / Components / List"
-  component={AddOnList}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Browser / Components / List",
+    component: AddOnList,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <AddOnList {...args} />
diff --git a/src/addons/browser/stories/Browser.stories.svelte b/src/addons/browser/stories/Browser.stories.svelte
index 8bd2eeb0f..30ca0b1cc 100644
--- a/src/addons/browser/stories/Browser.stories.svelte
+++ b/src/addons/browser/stories/Browser.stories.svelte
@@ -1,6 +1,6 @@
-<script>
+<script lang="ts" context="module">
   import { rest } from "msw";
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Browser from "../Browser.svelte";
   import listFixture from "../../fixtures/addon-list.json";
@@ -22,14 +22,14 @@
   const empty = rest.get(mockUrl, (req, res, ctx) =>
     res(ctx.json({ next: null, previous: null, results: [] })),
   );
-</script>
 
-<Meta
-  title="Add-Ons / Browser"
-  tags={["autodocs"]}
-  parameters={{ layout: "fullscreen" }}
-  component={Browser}
-/>
+  export const meta = {
+    title: "Add-Ons / Browser",
+    tags: ["autodocs"],
+    parameters: { layout: "fullscreen" },
+    component: Browser,
+  };
+</script>
 
 <Template let:args>
   <Browser {...args} />
diff --git a/src/addons/browser/stories/Filters.stories.svelte b/src/addons/browser/stories/Filters.stories.svelte
index c9cde265f..89843d8db 100644
--- a/src/addons/browser/stories/Filters.stories.svelte
+++ b/src/addons/browser/stories/Filters.stories.svelte
@@ -1,17 +1,17 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Filters from "../Filters.svelte";
 
   const args = {};
-</script>
 
-<Meta
-  title="Add-Ons / Browser / Components / Filters"
-  tags={["autodocs"]}
-  parameters={{ layout: "centered" }}
-  component={Filters}
-/>
+  export const meta = {
+    title: "Add-Ons / Browser / Components / Filters",
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+    component: Filters,
+  };
+</script>
 
 <Template let:args>
   <Filters {...args} />
diff --git a/src/addons/dispatch/fields/stories/ArrayField.stories.svelte b/src/addons/dispatch/fields/stories/ArrayField.stories.svelte
index 90f456cdf..81ed19439 100644
--- a/src/addons/dispatch/fields/stories/ArrayField.stories.svelte
+++ b/src/addons/dispatch/fields/stories/ArrayField.stories.svelte
@@ -1,5 +1,5 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import ArrayField from "../ArrayField.svelte";
 
@@ -8,13 +8,13 @@
     title: "Array Field",
     description: "An array of items",
   };
-</script>
 
-<Meta
-  title="Add-Ons / Dispatch / Form / Fields / Array Field"
-  component={ArrayField}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Dispatch / Form / Fields / Array Field",
+    component: ArrayField,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <ArrayField {...args} />
diff --git a/src/addons/dispatch/fields/stories/Checkbox.stories.svelte b/src/addons/dispatch/fields/stories/Checkbox.stories.svelte
index fff18e57f..bee08ff8b 100644
--- a/src/addons/dispatch/fields/stories/Checkbox.stories.svelte
+++ b/src/addons/dispatch/fields/stories/Checkbox.stories.svelte
@@ -1,5 +1,5 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Checkbox from "../Checkbox.svelte";
 
@@ -10,13 +10,13 @@
     required: false,
     value: true,
   };
-</script>
 
-<Meta
-  title="Add-Ons / Dispatch / Form / Fields / Checkbox"
-  component={Checkbox}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Dispatch / Form / Fields / Checkbox",
+    component: Checkbox,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Checkbox {...args} />
diff --git a/src/addons/dispatch/fields/stories/Number.stories.svelte b/src/addons/dispatch/fields/stories/Number.stories.svelte
index a894a9246..458dc2a29 100644
--- a/src/addons/dispatch/fields/stories/Number.stories.svelte
+++ b/src/addons/dispatch/fields/stories/Number.stories.svelte
@@ -1,5 +1,5 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Number from "../Number.svelte";
 
@@ -13,13 +13,13 @@
     min: "0",
     max: "2",
   };
-</script>
 
-<Meta
-  title="Add-Ons / Dispatch / Form / Fields / Number"
-  component={Number}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Dispatch / Form / Fields / Number",
+    component: Number,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Number {...args} />
diff --git a/src/addons/dispatch/fields/stories/Text.stories.svelte b/src/addons/dispatch/fields/stories/Text.stories.svelte
index 58c64ec3e..5ea1a3520 100644
--- a/src/addons/dispatch/fields/stories/Text.stories.svelte
+++ b/src/addons/dispatch/fields/stories/Text.stories.svelte
@@ -1,5 +1,5 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Text from "../Text.svelte";
 
@@ -10,13 +10,13 @@
     required: false,
     value: "Lorem ipsum dolor sit amet",
   };
-</script>
 
-<Meta
-  title="Add-Ons / Dispatch / Form / Fields / Text"
-  component={Number}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Dispatch / Form / Fields / Text",
+    component: Number,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Text {...args} />
diff --git a/src/addons/dispatch/stories/Dispatch.stories.svelte b/src/addons/dispatch/stories/Dispatch.stories.svelte
index a5b8f202b..6d622910f 100644
--- a/src/addons/dispatch/stories/Dispatch.stories.svelte
+++ b/src/addons/dispatch/stories/Dispatch.stories.svelte
@@ -1,6 +1,6 @@
-<script>
+<script lang="ts" context="module">
   import { rest } from "msw";
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Dispatch from "../Dispatch.svelte";
   import * as addons from "../../fixtures/addons.json";
@@ -48,13 +48,13 @@
     addon: null,
     event: null,
   };
-</script>
 
-<Meta
-  title="Add-Ons / Dispatch"
-  component={Dispatch}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Dispatch",
+    component: Dispatch,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Dispatch {...args} />
diff --git a/src/addons/dispatch/stories/Premium.stories.svelte b/src/addons/dispatch/stories/Premium.stories.svelte
index 2e3c9a06b..5b197ed30 100644
--- a/src/addons/dispatch/stories/Premium.stories.svelte
+++ b/src/addons/dispatch/stories/Premium.stories.svelte
@@ -1,5 +1,5 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Premium from "../Premium.svelte";
 
@@ -44,13 +44,13 @@
     username: "lasser.allan",
     verified_journalist: true,
   };
-</script>
 
-<Meta
-  title="Add-Ons / Dispatch / Premium"
-  component={Premium}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Dispatch / Premium",
+    component: Premium,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Premium {...args} />
diff --git a/src/addons/dispatch/stories/ScheduledInset.stories.svelte b/src/addons/dispatch/stories/ScheduledInset.stories.svelte
index df5210050..0763a5caa 100644
--- a/src/addons/dispatch/stories/ScheduledInset.stories.svelte
+++ b/src/addons/dispatch/stories/ScheduledInset.stories.svelte
@@ -1,16 +1,16 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import ScheduledInset from "../ScheduledInset.svelte";
   import addon from "../../fixtures/addon.json";
   import klaxon from "../../fixtures/klaxon-scheduled.json";
-</script>
 
-<Meta
-  title="Add-Ons / Dispatch / Scheduled Inset"
-  component={ScheduledInset}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Dispatch / Scheduled Inset",
+    component: ScheduledInset,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <ScheduledInset addon={args.addon} events={args.events} open />
diff --git a/src/addons/progress/stories/AddonRun.stories.svelte b/src/addons/progress/stories/AddonRun.stories.svelte
index 76841576d..964df358c 100644
--- a/src/addons/progress/stories/AddonRun.stories.svelte
+++ b/src/addons/progress/stories/AddonRun.stories.svelte
@@ -1,6 +1,6 @@
-<script>
+<script lang="ts" context="module">
   import { rest } from "msw";
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import run from "../../fixtures/run.json";
   import { baseApiUrl } from "../../../api/base";
   import AddonRun from "../AddonRun.svelte";
@@ -16,9 +16,12 @@
     }),
     rest.delete(mockUpdateUrl, (req, res, ctx) => res(ctx.json({}))),
   ];
-</script>
 
-<Meta title="Add-Ons / Progress / Run" component={AddonRun} />
+  export const meta = {
+    title: "Add-Ons / Progress / Run",
+    component: AddonRun,
+  };
+</script>
 
 <Template let:args>
   <AddonRun {...args} />
diff --git a/src/addons/progress/stories/AddonStatus.stories.svelte b/src/addons/progress/stories/AddonStatus.stories.svelte
index 799038d63..900128779 100644
--- a/src/addons/progress/stories/AddonStatus.stories.svelte
+++ b/src/addons/progress/stories/AddonStatus.stories.svelte
@@ -1,6 +1,6 @@
-<script>
+<script lang="ts" context="module">
   import { rest } from "msw";
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import runList from "../../fixtures/run-list.json";
   import { baseApiUrl } from "../../../api/base";
   import AddonStatus from "../AddonStatus.svelte";
@@ -18,9 +18,12 @@
     }),
     rest.delete(mockUpdateUrl, (req, res, ctx) => res(ctx.json({}))),
   ];
-</script>
 
-<Meta title="Add-Ons / Progress / Status" component={AddonStatus} />
+  export const meta = {
+    title: "Add-Ons / Progress / Status",
+    component: AddonStatus,
+  };
+</script>
 
 <Template let:args>
   <AddonStatus {...args} />
diff --git a/src/addons/runs/stories/History.stories.svelte b/src/addons/runs/stories/History.stories.svelte
index 113453e1d..b82c30aae 100644
--- a/src/addons/runs/stories/History.stories.svelte
+++ b/src/addons/runs/stories/History.stories.svelte
@@ -1,4 +1,7 @@
-<script context="module">
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import History from "../History.svelte";
+
   import { rest } from "msw";
   import runListFixture from "../../fixtures/run-list.json";
   import { baseApiUrl } from "../../../api/base";
@@ -21,20 +24,15 @@
     res(ctx.json({ next: null, previous: null, results: [] })),
   );
   export const handlers = { data, loading, error, empty };
-</script>
-
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
-  import History from "../History.svelte";
 
   const args = {};
-</script>
 
-<Meta
-  title="Add-Ons / Runs / History"
-  component={History}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Runs / History",
+    component: History,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <History {...args} />
diff --git a/src/addons/runs/stories/HistoryEvent.stories.svelte b/src/addons/runs/stories/HistoryEvent.stories.svelte
index 89d780887..b0bbe15c2 100644
--- a/src/addons/runs/stories/HistoryEvent.stories.svelte
+++ b/src/addons/runs/stories/HistoryEvent.stories.svelte
@@ -1,16 +1,16 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import run from "../../fixtures/run.json";
   import Event from "../HistoryEvent.svelte";
 
   const args = { run };
-</script>
 
-<Meta
-  title="Add-Ons / Runs / History / Event"
-  component={Event}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Runs / History / Event",
+    component: Event,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Event {...args} />
diff --git a/src/addons/runs/stories/Runs.stories.svelte b/src/addons/runs/stories/Runs.stories.svelte
index 5db6df21f..ada24b3a3 100644
--- a/src/addons/runs/stories/Runs.stories.svelte
+++ b/src/addons/runs/stories/Runs.stories.svelte
@@ -1,19 +1,19 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import Runs from "../Runs.svelte";
 
   import { handlers as historyHandlers } from "./History.stories.svelte";
   import { handlers as scheduledHandlers } from "./Scheduled.stories.svelte";
 
   const args = { visible: true };
-</script>
 
-<Meta
-  title="Add-Ons / Runs"
-  tags={["autodocs"]}
-  parameters={{ layout: "fullscreen" }}
-  component={Runs}
-/>
+  export const meta = {
+    title: "Add-Ons / Runs",
+    tags: ["autodocs"],
+    parameters: { layout: "fullscreen" },
+    component: Runs,
+  };
+</script>
 
 <Template let:args>
   <Runs {...args} />
diff --git a/src/addons/runs/stories/Scheduled.stories.svelte b/src/addons/runs/stories/Scheduled.stories.svelte
index 09c63e17e..6b7141b02 100644
--- a/src/addons/runs/stories/Scheduled.stories.svelte
+++ b/src/addons/runs/stories/Scheduled.stories.svelte
@@ -1,4 +1,6 @@
-<script context="module">
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import Scheduled from "../Scheduled.svelte";
   import { rest } from "msw";
   import eventsListFixture from "../../fixtures/event-list.json";
   import { baseApiUrl } from "../../../api/base";
@@ -21,23 +23,15 @@
     res(ctx.json({ next: null, previous: null, results: [] })),
   );
   export const handlers = { data, loading, error, empty };
-</script>
-
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
-
-  import Scheduled from "../Scheduled.svelte";
 
   const args = {};
-</script>
 
-<style></style>
-
-<Meta
-  title="Add-Ons / Runs / Scheduled"
-  component={Scheduled}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Runs / Scheduled",
+    component: Scheduled,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Scheduled {...args} />
diff --git a/src/addons/runs/stories/ScheduledEvent.stories.svelte b/src/addons/runs/stories/ScheduledEvent.stories.svelte
index 23fa4c326..e9536164f 100644
--- a/src/addons/runs/stories/ScheduledEvent.stories.svelte
+++ b/src/addons/runs/stories/ScheduledEvent.stories.svelte
@@ -1,16 +1,16 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import event from "../../fixtures/event.json";
   import Event from "../ScheduledEvent.svelte";
 
   const args = { event };
-</script>
 
-<Meta
-  title="Add-Ons / Runs / Scheduled / Event"
-  component={Event}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Runs / Scheduled / Event",
+    component: Event,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Event {...args} />
diff --git a/src/addons/stories/Popularity.stories.svelte b/src/addons/stories/Popularity.stories.svelte
index af7c5ee2f..3aaea8fbc 100644
--- a/src/addons/stories/Popularity.stories.svelte
+++ b/src/addons/stories/Popularity.stories.svelte
@@ -1,18 +1,18 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import Popularity from "../Popularity.svelte";
 
   const args = {
     useCount: 100,
   };
-</script>
 
-<Meta
-  title="Add-Ons / Popularity"
-  tags={["autodocs"]}
-  component={Popularity}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Add-Ons / Popularity",
+    tags: ["autodocs"],
+    component: Popularity,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Popularity {...args} />
diff --git a/src/common/stories/Badge.stories.svelte b/src/common/stories/Badge.stories.svelte
index 19c55e58c..5486fb1f9 100644
--- a/src/common/stories/Badge.stories.svelte
+++ b/src/common/stories/Badge.stories.svelte
@@ -1,17 +1,17 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Badge from "../Badge.svelte";
   import BadgeDemo from "./Badge.demo.svelte";
-</script>
 
-<Meta
-  title="Common / Badge"
-  tags={["autodocs"]}
-  parameters={{ layout: "centered" }}
-  component={Badge}
-  argTypes={{ selected: { control: "boolean" } }}
-/>
+  export const meta = {
+    title: "Common / Badge",
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+    component: Badge,
+    argTypes: { selected: { control: "boolean" } },
+  };
+</script>
 
 <Template let:args>
   <BadgeDemo {...args} />
diff --git a/src/common/stories/Dropdown.stories.svelte b/src/common/stories/Dropdown.stories.svelte
index 874384486..1dfd0f273 100644
--- a/src/common/stories/Dropdown.stories.svelte
+++ b/src/common/stories/Dropdown.stories.svelte
@@ -1,17 +1,17 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Dropdown from "./Dropdown.demo.svelte";
 
   const args = {};
-</script>
 
-<Meta
-  title="Common / Dropdown"
-  tags={["autodocs"]}
-  component={Dropdown}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Common / Dropdown",
+    tags: ["autodocs"],
+    component: Dropdown,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Dropdown {...args} />
diff --git a/src/common/stories/Pin.stories.svelte b/src/common/stories/Pin.stories.svelte
index 5898168f0..ff7c88c1e 100644
--- a/src/common/stories/Pin.stories.svelte
+++ b/src/common/stories/Pin.stories.svelte
@@ -1,8 +1,8 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import { action } from "@storybook/addon-actions";
 
-  import Pin from "@/common/Pin.svelte";
+  import Pin from "../../common/Pin.svelte";
 
   const args = {
     active: false,
@@ -10,14 +10,14 @@
   };
 
   const onClick = action("Click");
-</script>
 
-<Meta
-  title="Common / Pin"
-  tags={["autodocs"]}
-  component={Pin}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Common / Pin",
+    tags: ["autodocs"],
+    component: Pin,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <Pin {...args} on:click={onClick} />
diff --git a/src/pages/app/AccountNavigation/stories/AccountNavigation.stories.svelte b/src/pages/app/AccountNavigation/stories/AccountNavigation.stories.svelte
index 952ed6fe3..74b2d2260 100644
--- a/src/pages/app/AccountNavigation/stories/AccountNavigation.stories.svelte
+++ b/src/pages/app/AccountNavigation/stories/AccountNavigation.stories.svelte
@@ -1,4 +1,6 @@
 <script context="module" lang="ts">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import AccountNavigation from "../AccountNavigation.svelte";
   import { rest } from "msw";
   import { baseApiUrl } from "../../../../api/base.js";
   import { mockInMyOrg } from "./OrgMemberList.stories.svelte";
@@ -29,20 +31,14 @@
       res(ctx.status(404, "Not Found"), ctx.json({ detail: "Not found." })),
     ),
   };
-</script>
 
-<script lang="ts">
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
-
-  import AccountNavigation from "../AccountNavigation.svelte";
+  export const meta = {
+    title: "Account Navigation",
+    component: AccountNavigation,
+    parameters: { layout: "fullscreen" },
+  };
 </script>
 
-<Meta
-  title="Account Navigation"
-  component={AccountNavigation}
-  parameters={{ layout: "fullscreen" }}
-/>
-
 <Template let:args>
   <AccountNavigation {...args} />
 </Template>
diff --git a/src/pages/app/AccountNavigation/stories/HelpMenu.stories.svelte b/src/pages/app/AccountNavigation/stories/HelpMenu.stories.svelte
index a5c365886..725e0c5d3 100644
--- a/src/pages/app/AccountNavigation/stories/HelpMenu.stories.svelte
+++ b/src/pages/app/AccountNavigation/stories/HelpMenu.stories.svelte
@@ -1,14 +1,14 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import HelpMenu from "../HelpMenu.svelte";
-</script>
 
-<Meta
-  title="Account Navigation / Menus / Help"
-  component={HelpMenu}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Account Navigation / Menus / Help",
+    component: HelpMenu,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <HelpMenu {...args} />
diff --git a/src/pages/app/AccountNavigation/stories/LanguageMenu.stories.svelte b/src/pages/app/AccountNavigation/stories/LanguageMenu.stories.svelte
index f6c45bf28..c5c53ca98 100644
--- a/src/pages/app/AccountNavigation/stories/LanguageMenu.stories.svelte
+++ b/src/pages/app/AccountNavigation/stories/LanguageMenu.stories.svelte
@@ -1,14 +1,14 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import LanguageMenu from "../LanguageMenu.svelte";
-</script>
 
-<Meta
-  title="Account Navigation / Menus / Language"
-  component={LanguageMenu}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Account Navigation / Menus / Language",
+    component: LanguageMenu,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <LanguageMenu {...args} />
diff --git a/src/pages/app/AccountNavigation/stories/OrgMemberList.stories.svelte b/src/pages/app/AccountNavigation/stories/OrgMemberList.stories.svelte
index faa081a90..f36fba297 100644
--- a/src/pages/app/AccountNavigation/stories/OrgMemberList.stories.svelte
+++ b/src/pages/app/AccountNavigation/stories/OrgMemberList.stories.svelte
@@ -1,6 +1,8 @@
 <script context="module" lang="ts">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import { rest } from "msw";
   import { baseApiUrl } from "../../../../api/base.js";
+  import OrgMemberList from "../OrgMemberList.svelte";
   import orgMembersFixture from "../fixtures/orgMembers.json";
 
   /* Mock Request Handlers */
@@ -20,21 +22,15 @@
       res(ctx.json({ next: null, previous: null, results: [] })),
     ),
   };
-</script>
-
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
-
-  import OrgMemberList from "../OrgMemberList.svelte";
 
   const args = { orgId: 1, myId: 4 };
-</script>
 
-<Meta
-  title="Account Navigation / Menus / Org / Member List"
-  component={OrgMemberList}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Account Navigation / Menus / Org / Member List",
+    component: OrgMemberList,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <OrgMemberList {...args} />
diff --git a/src/pages/app/AccountNavigation/stories/OrgMenu.stories.svelte b/src/pages/app/AccountNavigation/stories/OrgMenu.stories.svelte
index 4815e2270..af75f7529 100644
--- a/src/pages/app/AccountNavigation/stories/OrgMenu.stories.svelte
+++ b/src/pages/app/AccountNavigation/stories/OrgMenu.stories.svelte
@@ -1,7 +1,9 @@
 <script context="module" lang="ts">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import { rest } from "msw";
   import { baseApiUrl } from "../../../../api/base.js";
   import { mockInMyOrg } from "./OrgMemberList.stories.svelte";
+  import OrgMenu from "../OrgMenu.svelte";
   import orgListFixture from "../fixtures/orgList.json";
   import getMeFixture from "../fixtures/getMe.json";
 
@@ -70,24 +72,18 @@
   export const mockChangeOrg = rest.patch(mockChangeOrgUrl, (req, res, ctx) =>
     res(ctx.json(getMeFixture)),
   );
-</script>
-
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
-
-  import OrgMenu from "../OrgMenu.svelte";
 
   const args = {
     user: getMeFixture,
     org: orgListFixture.results[0],
   };
-</script>
 
-<Meta
-  title="Account Navigation / Menus / Org"
-  component={OrgMenu}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Account Navigation / Menus / Org",
+    component: OrgMenu,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <OrgMenu {...args} />
diff --git a/src/pages/app/AccountNavigation/stories/PremiumMenu.stories.svelte b/src/pages/app/AccountNavigation/stories/PremiumMenu.stories.svelte
index 66c9144fb..d6acd22d7 100644
--- a/src/pages/app/AccountNavigation/stories/PremiumMenu.stories.svelte
+++ b/src/pages/app/AccountNavigation/stories/PremiumMenu.stories.svelte
@@ -1,16 +1,16 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import PremiumMenu from "../PremiumMenu.svelte";
 
   import orgListFixture from "../fixtures/orgList.json";
-</script>
 
-<Meta
-  title="Account Navigation / Menus / Premium"
-  component={PremiumMenu}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Account Navigation / Menus / Premium",
+    component: PremiumMenu,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <PremiumMenu {...args} />
diff --git a/src/pages/app/AccountNavigation/stories/UserMenu.stories.svelte b/src/pages/app/AccountNavigation/stories/UserMenu.stories.svelte
index ea21b857e..d28f9f957 100644
--- a/src/pages/app/AccountNavigation/stories/UserMenu.stories.svelte
+++ b/src/pages/app/AccountNavigation/stories/UserMenu.stories.svelte
@@ -1,14 +1,14 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import UserMenu from "../UserMenu.svelte";
-</script>
 
-<Meta
-  title="Account Navigation / Menus / User"
-  component={UserMenu}
-  parameters={{ layout: "centered" }}
-/>
+  export const meta = {
+    title: "Account Navigation / Menus / User",
+    component: UserMenu,
+    parameters: { layout: "centered" },
+  };
+</script>
 
 <Template let:args>
   <UserMenu {...args} />
diff --git a/src/pages/viewer/stories/Footer.stories.svelte b/src/pages/viewer/stories/Footer.stories.svelte
index 4f05c98b8..d65ced454 100644
--- a/src/pages/viewer/stories/Footer.stories.svelte
+++ b/src/pages/viewer/stories/Footer.stories.svelte
@@ -1,6 +1,5 @@
-<script lang="ts">
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
-
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import Footer from "../Footer.svelte";
 
   const args = {
@@ -9,9 +8,12 @@
     embed: false,
     showFullscreen: false,
   };
-</script>
 
-<Meta title="Viewer / Footer" component={Footer} />
+  export const meta = {
+    title: "Viewer / Footer",
+    component: Footer,
+  };
+</script>
 
 <Template let:args>
   <Footer {...args} />
diff --git a/src/pages/viewer/stories/Header.stories.svelte b/src/pages/viewer/stories/Header.stories.svelte
index 0cf48aff6..57a0a640c 100644
--- a/src/pages/viewer/stories/Header.stories.svelte
+++ b/src/pages/viewer/stories/Header.stories.svelte
@@ -1,5 +1,5 @@
-<script lang="ts">
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Header from "../Header.svelte";
 
@@ -14,9 +14,12 @@
     embed: false,
     disableControls: false,
   };
-</script>
 
-<Meta title="Viewer / Header" component={Header} />
+  export const meta = {
+    title: "Viewer / Header",
+    component: Header,
+  };
+</script>
 
 <Template let:args>
   <Header {...args} />
diff --git a/src/pages/viewer/stories/Sidebar.stories.svelte b/src/pages/viewer/stories/Sidebar.stories.svelte
index 1ec36f95b..1bf8344a1 100644
--- a/src/pages/viewer/stories/Sidebar.stories.svelte
+++ b/src/pages/viewer/stories/Sidebar.stories.svelte
@@ -1,5 +1,5 @@
-<script lang="ts">
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import Sidebar from "../Sidebar.svelte";
   import documentFixture from "../fixtures/document.json";
@@ -11,9 +11,12 @@
     signedIn: true,
     disableControls: false,
   };
-</script>
 
-<Meta title="Viewer / Sidebar" component={Sidebar} />
+  export const meta = {
+    title: "Viewer / Sidebar",
+    component: Sidebar,
+  };
+</script>
 
 <Template let:args>
   <Sidebar {...args} />
diff --git a/src/pages/viewer/stories/SidebarAction.stories.svelte b/src/pages/viewer/stories/SidebarAction.stories.svelte
index d7c2d0bb9..36519bb23 100644
--- a/src/pages/viewer/stories/SidebarAction.stories.svelte
+++ b/src/pages/viewer/stories/SidebarAction.stories.svelte
@@ -1,5 +1,5 @@
-<script lang="ts">
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import { action } from "@storybook/addon-actions";
 
   import SidebarAction from "../SidebarAction.svelte";
@@ -11,9 +11,12 @@
       "Leave a public, private or shared note, which can be embedded within an article.",
     disabled: false,
   };
-</script>
 
-<Meta title="Viewer / Sidebar / Action" component={SidebarAction} />
+  export const meta = {
+    title: "Viewer / Sidebar / Action",
+    component: SidebarAction,
+  };
+</script>
 
 <Template let:args>
   <SidebarAction {...args} />
diff --git a/src/premium-credits/stories/CreditMeter.stories.svelte b/src/premium-credits/stories/CreditMeter.stories.svelte
index b74241b48..a0da2b537 100644
--- a/src/premium-credits/stories/CreditMeter.stories.svelte
+++ b/src/premium-credits/stories/CreditMeter.stories.svelte
@@ -1,5 +1,5 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import CreditMeter from "../CreditMeter.svelte";
 
   let args = {
@@ -9,14 +9,14 @@
     label: "Org Allowance",
     helpText: "Monthly credits will reset in 2 weeks",
   };
-</script>
 
-<Meta
-  title="Premium Credits / Credit Meter"
-  tags={["autodocs"]}
-  parameters={{ layout: "centered" }}
-  component={CreditMeter}
-/>
+  export const meta = {
+    title: "Premium Credits / Credit Meter",
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+    component: CreditMeter,
+  };
+</script>
 
 <Template let:args>
   <CreditMeter {...args} />
diff --git a/src/premium-credits/stories/Price.stories.svelte b/src/premium-credits/stories/Price.stories.svelte
index 8f1ac0ec1..2995184ba 100644
--- a/src/premium-credits/stories/Price.stories.svelte
+++ b/src/premium-credits/stories/Price.stories.svelte
@@ -1,21 +1,21 @@
-<script>
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import Price from "../Price.svelte";
-</script>
 
-<Meta
-  title="Premium Credits / Price"
-  tags={["autodocs"]}
-  parameters={{ layout: "centered" }}
-  component={Price}
-/>
+  export const meta = {
+    title: "Premium Credits / Price",
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+    component: Price,
+  };
+</script>
 
 <Template let:args>
   <Price {...args} />
 </Template>
 
 <Story
-  name="Price"
+  name="Default"
   args={{
     value: 12375,
   }}
diff --git a/src/premium-credits/stories/UpgradePrompt.stories.svelte b/src/premium-credits/stories/UpgradePrompt.stories.svelte
index 96e2b0f3b..1ee75b81f 100644
--- a/src/premium-credits/stories/UpgradePrompt.stories.svelte
+++ b/src/premium-credits/stories/UpgradePrompt.stories.svelte
@@ -1,6 +1,6 @@
-<script>
+<script lang="ts" context="module">
   import { _ } from "svelte-i18n";
-  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import UpgradePrompt from "../UpgradePrompt.svelte";
 
   const args = {
@@ -8,14 +8,14 @@
       "This Premium Add-On uses AI to perform advanced analysis. Upgrade to a Professional account to utilize this and other powerful Add-Ons.",
     callToAction: "Start Free Trial",
   };
-</script>
 
-<Meta
-  title="Premium Credits / Upgrade Prompt"
-  tags={["autodocs"]}
-  parameters={{ layout: "centered" }}
-  component={UpgradePrompt}
-/>
+  export const meta = {
+    title: "Premium Credits / Upgrade Prompt",
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+    component: UpgradePrompt,
+  };
+</script>
 
 <Template let:args>
   <UpgradePrompt {...args} />