diff --git a/tslib/src/MockStudies.tsx b/tslib/src/MockStudies.tsx
index 13fc24b4..c43bb665 100644
--- a/tslib/src/MockStudies.tsx
+++ b/tslib/src/MockStudies.tsx
@@ -1,16 +1,31 @@
+import { useEffect, useState } from "react";
 import { loadStorageFromFile } from "./utils/loadStorageFromFile";
 
-const filePath = "db.sqlite3";
-const res = await fetch(filePath);
-const blob = await res.blob();
-const file = new File([blob], filePath);
-const mockStudies: Study[] = [];
-await loadStorageFromFile(file, (value) => {
-  if (Array.isArray(value)) {
-    mockStudies.push(...value);
-  } else {
-    mockStudies.push(...value([]));
-  }
-});
+const fetchMockStudies = async () => {
+  const filePath = "db.sqlite3";
+  const res = await fetch(filePath);
+  const blob = await res.blob();
+  const file = new File([blob], filePath);
+  const mockStudies: Study[] = [];
+  await loadStorageFromFile(file, (value) => {
+    if (Array.isArray(value)) {
+      mockStudies.push(...value);
+    } else {
+      mockStudies.push(...value([]));
+    }
+  });
+  return mockStudies;
+};
 
-export { mockStudies };
+const useMockStudies = () => {
+  const [mockStudies, setMockStudies] = useState<Study[]>([]);
+  useEffect(() => {
+    fetchMockStudies().then((studies) => setMockStudies(studies));
+  }, []);
+  return mockStudies;
+};
+
+export const useMockStudy = (studyId: number | undefined) => {
+  const mockStudies = useMockStudies();
+  return mockStudies.find((study) => study.study_id === studyId);
+};
diff --git a/tslib/src/components/PlotHistory.stories.tsx b/tslib/src/components/PlotHistory.stories.tsx
index a5f1c28b..9f390c8b 100644
--- a/tslib/src/components/PlotHistory.stories.tsx
+++ b/tslib/src/components/PlotHistory.stories.tsx
@@ -1,24 +1,31 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { mockStudies } from "../MockStudies";
+import { useMockStudy } from "../MockStudies";
 import { PlotHistory } from "./PlotHistory";
 
 const meta: Meta<typeof PlotHistory> = {
   component: PlotHistory,
   title: "PlotHistory",
   tags: ["autodocs"],
+  decorators: [
+    (Story, storyContext) => {
+      const study = useMockStudy(storyContext.parameters?.studyId);
+      if (!study) return <p>loading...</p>;
+      return (
+        <Story
+          args={{
+            study,
+          }}
+        />
+      );
+    },
+  ],
 };
 
 export default meta;
 type Story = StoryObj<typeof PlotHistory>;
 
 export const MockStudy1: Story = {
-  args: {
-    study: mockStudies[0],
-  },
-};
-
-export const MockStudy2: Story = {
-  args: {
-    study: mockStudies[1],
+  parameters: {
+    studyId: 1,
   },
 };
diff --git a/tslib/src/components/PlotHistoryDark.stories.tsx b/tslib/src/components/PlotHistoryDark.stories.tsx
new file mode 100644
index 00000000..c4d6f07c
--- /dev/null
+++ b/tslib/src/components/PlotHistoryDark.stories.tsx
@@ -0,0 +1,38 @@
+import { ThemeProvider } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import { useMockStudy } from "../MockStudies";
+import { darkTheme } from "../styles/darkTheme";
+import { PlotHistory } from "./PlotHistory";
+
+const meta: Meta<typeof PlotHistory> = {
+  component: PlotHistory,
+  title: "PlotHistoryDark",
+  tags: ["autodocs"],
+  decorators: [
+    (Story, storyContext) => {
+      const study = useMockStudy(storyContext.parameters?.studyId);
+      if (!study) return <p>loading...</p>;
+      return (
+        <ThemeProvider theme={darkTheme}>
+          <Story
+            args={{
+              study,
+            }}
+          />
+        </ThemeProvider>
+      );
+    },
+  ],
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PlotHistory>;
+
+export const MockStudy1: Story = {
+  parameters: {
+    studyId: 1,
+  },
+};
diff --git a/tslib/src/components/TrialTable.stories.tsx b/tslib/src/components/TrialTable.stories.tsx
index a762bc11..5d6e862d 100644
--- a/tslib/src/components/TrialTable.stories.tsx
+++ b/tslib/src/components/TrialTable.stories.tsx
@@ -1,24 +1,31 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { mockStudies } from "../MockStudies";
+import { useMockStudy } from "../MockStudies";
 import { TrialTable } from "./TrialTable";
 
 const meta: Meta<typeof TrialTable> = {
   component: TrialTable,
   title: "TrialTable",
   tags: ["autodocs"],
+  decorators: [
+    (Story, storyContext) => {
+      const study = useMockStudy(storyContext.parameters?.studyId);
+      if (!study) return <p>loading...</p>;
+      return (
+        <Story
+          args={{
+            study,
+          }}
+        />
+      );
+    },
+  ],
 };
 
 export default meta;
 type Story = StoryObj<typeof TrialTable>;
 
 export const MockStudy1: Story = {
-  args: {
-    study: mockStudies[0],
-  },
-};
-
-export const MockStudy2: Story = {
-  args: {
-    study: mockStudies[1],
+  parameters: {
+    studyId: 1,
   },
 };
diff --git a/tslib/src/components/TrialTableDark.stories.tsx b/tslib/src/components/TrialTableDark.stories.tsx
index b78c306a..ea7dbe74 100644
--- a/tslib/src/components/TrialTableDark.stories.tsx
+++ b/tslib/src/components/TrialTableDark.stories.tsx
@@ -1,6 +1,6 @@
 import { ThemeProvider } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
-import { mockStudies } from "../MockStudies";
+import { useMockStudy } from "../MockStudies";
 import { darkTheme } from "../styles/darkTheme";
 import { TrialTable } from "./TrialTable";
 
@@ -9,11 +9,19 @@ const meta: Meta<typeof TrialTable> = {
   title: "TrialTableDark",
   tags: ["autodocs"],
   decorators: [
-    (Story) => (
-      <ThemeProvider theme={darkTheme}>
-        <Story />
-      </ThemeProvider>
-    ),
+    (Story, storyContext) => {
+      const study = useMockStudy(storyContext.parameters?.studyId);
+      if (!study) return <p>loading...</p>;
+      return (
+        <ThemeProvider theme={darkTheme}>
+          <Story
+            args={{
+              study,
+            }}
+          />
+        </ThemeProvider>
+      );
+    },
   ],
   parameters: {
     backgrounds: { default: "dark" },
@@ -24,13 +32,7 @@ export default meta;
 type Story = StoryObj<typeof TrialTable>;
 
 export const MockStudy1: Story = {
-  args: {
-    study: mockStudies[0],
-  },
-};
-
-export const MockStudy2: Story = {
-  args: {
-    study: mockStudies[1],
+  parameters: {
+    studyId: 1,
   },
 };