diff --git a/tslib/react/src/components/PlotEdf.stories.tsx b/tslib/react/src/components/PlotEdf.stories.tsx
index 2e78b1f5..0e8f8ccf 100644
--- a/tslib/react/src/components/PlotEdf.stories.tsx
+++ b/tslib/react/src/components/PlotEdf.stories.tsx
@@ -55,3 +55,10 @@ export const DarkTheme: Story = {
 //     ...
 //   },
 // }
+
+// TODO(c-bata): Add a story for multi objective study.
+// export const MultiObjective: Story = {
+//   parameters: {
+//     ...
+//   },
+// }
diff --git a/tslib/react/src/components/PlotHistory.stories.tsx b/tslib/react/src/components/PlotHistory.stories.tsx
index 5e1b278f..f274249e 100644
--- a/tslib/react/src/components/PlotHistory.stories.tsx
+++ b/tslib/react/src/components/PlotHistory.stories.tsx
@@ -51,3 +51,10 @@ export const DarkTheme: Story = {
 //     ...
 //   },
 // }
+
+// TODO(c-bata): Add a story for multi objective study.
+// export const MultiObjective: Story = {
+//   parameters: {
+//     ...
+//   },
+// }
diff --git a/tslib/react/src/components/PlotImportance.stories.tsx b/tslib/react/src/components/PlotImportance.stories.tsx
index a8753002..e63af776 100644
--- a/tslib/react/src/components/PlotImportance.stories.tsx
+++ b/tslib/react/src/components/PlotImportance.stories.tsx
@@ -2,12 +2,13 @@ import { CssBaseline, ThemeProvider } from "@mui/material"
 import { Meta, StoryObj } from "@storybook/react"
 import React from "react"
 import { useMockStudy } from "../MockStudies"
+import { darkTheme } from "../styles/darkTheme"
 import { lightTheme } from "../styles/lightTheme"
 import { PlotImportance } from "./PlotImportance"
 
 const meta: Meta<typeof PlotImportance> = {
   component: PlotImportance,
-  title: "PlotImportance",
+  title: "Plot/Importance",
   tags: ["autodocs"],
   decorators: [
     (Story, storyContext) => {
@@ -16,7 +17,7 @@ const meta: Meta<typeof PlotImportance> = {
       )
       if (!study) return <p>loading...</p>
       return (
-        <ThemeProvider theme={lightTheme}>
+        <ThemeProvider theme={storyContext.parameters?.theme}>
           <CssBaseline />
           <Story
             args={{
@@ -33,8 +34,23 @@ const meta: Meta<typeof PlotImportance> = {
 export default meta
 type Story = StoryObj<typeof PlotImportance>
 
-export const MockStudyExample1: Story = {
+export const LightTheme: Story = {
   parameters: {
     studyId: 1,
+    theme: lightTheme,
   },
 }
+
+export const DarkTheme: Story = {
+  parameters: {
+    studyId: 1,
+    theme: darkTheme,
+  },
+}
+
+// TODO(c-bata): Add a story for multi objective study.
+// export const MultiObjective: Story = {
+//   parameters: {
+//     ...
+//   },
+// }
diff --git a/tslib/react/src/components/PlotImportanceDark.stories.tsx b/tslib/react/src/components/PlotImportanceDark.stories.tsx
deleted file mode 100644
index 3bd1d194..00000000
--- a/tslib/react/src/components/PlotImportanceDark.stories.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { CssBaseline, ThemeProvider } from "@mui/material"
-import { Meta, StoryObj } from "@storybook/react"
-import React from "react"
-import { useMockStudy } from "../MockStudies"
-import { darkTheme } from "../styles/darkTheme"
-import { PlotImportance } from "./PlotImportance"
-
-const meta: Meta<typeof PlotImportance> = {
-  component: PlotImportance,
-  title: "PlotImportanceDark",
-  tags: ["autodocs"],
-  decorators: [
-    (Story, storyContext) => {
-      const { study, importance } = useMockStudy(
-        storyContext.parameters?.studyId
-      )
-      if (!study) return <p>loading...</p>
-      return (
-        <ThemeProvider theme={darkTheme}>
-          <CssBaseline />
-          <Story
-            args={{
-              study,
-              importance,
-            }}
-          />
-        </ThemeProvider>
-      )
-    },
-  ],
-  parameters: {
-    backgrounds: { default: "dark" },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof PlotImportance>
-
-export const MockStudyExample1: Story = {
-  parameters: {
-    studyId: 1,
-  },
-}