diff --git a/web/src/beta/features/Editor/Tabs/Storytelling/StoryPanel/index.tsx b/web/src/beta/features/Editor/Tabs/Storytelling/StoryPanel/index.tsx
new file mode 100644
index 0000000000..a83ea5980c
--- /dev/null
+++ b/web/src/beta/features/Editor/Tabs/Storytelling/StoryPanel/index.tsx
@@ -0,0 +1,18 @@
+import { FC } from "react";
+
+import { styled } from "@reearth/services/theme";
+
+type Props = {};
+
+const StoryPanel: FC<Props> = () => {
+  return <Wrapper>StoryPanel</Wrapper>;
+};
+
+export default StoryPanel;
+
+const Wrapper = styled.div`
+  box-sizing: border-box;
+  width: 462px;
+  padding: 10px 24px;
+  background-color: #f1f1f1;
+`;
diff --git a/web/src/beta/features/Editor/index.tsx b/web/src/beta/features/Editor/index.tsx
index 243f015743..5e66c13132 100644
--- a/web/src/beta/features/Editor/index.tsx
+++ b/web/src/beta/features/Editor/index.tsx
@@ -1,4 +1,5 @@
 import Resizable from "@reearth/beta/components/Resizable";
+import StoryPanel from "@reearth/beta/features/Editor/Tabs/Storytelling/StoryPanel";
 import useLeftPanel from "@reearth/beta/features/Editor/useLeftPanel";
 import useRightPanel from "@reearth/beta/features/Editor/useRightPanel";
 import useVisualizerNav from "@reearth/beta/features/Editor/useVisualizerNav";
@@ -18,7 +19,7 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
   const { leftPanel } = useLeftPanel({ tab });
   const { rightPanel } = useRightPanel({ tab });
   const { visualizerNav } = useVisualizerNav({ tab });
-
+  const isStory = tab === "story";
   return (
     <DndProvider>
       <Wrapper>
@@ -39,7 +40,8 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
               {leftPanel}
             </Resizable>
           )}
-          <Center>
+          <Center hasStory={isStory}>
+            {isStory && <StoryPanel />}
             <VisualizerWrapper hasNav={!!visualizerNav}>
               {visualizerNav && <div>{visualizerNav}</div>}
               <Visualizer />
@@ -78,11 +80,11 @@ const MainSection = styled.div`
   background-color: ${({ theme }) => theme.general.bg.veryStrong};
 `;
 
-const Center = styled.div`
+const Center = styled.div<{ hasStory: boolean }>`
   height: 100%;
   flex-grow: 1;
   display: flex;
-  flex-direction: column;
+  flex-direction: ${hasStory => (hasStory ? "row" : "column")};
 `;
 
 const VisualizerWrapper = styled.div<{ hasNav: boolean }>`
diff --git a/web/src/services/theme/reearthTheme/common/index.ts b/web/src/services/theme/reearthTheme/common/index.ts
index 60c9d5872f..9aa07bfdc7 100644
--- a/web/src/services/theme/reearthTheme/common/index.ts
+++ b/web/src/services/theme/reearthTheme/common/index.ts
@@ -1,18 +1,15 @@
-import colors, { Colors } from "./colors";
 import { MetricsSizesType, metricsSizes } from "./metrics";
 import zIndexes, { ZIndex } from "./zIndex";
 
 export { default as GlobalStyles } from "./globalStyles";
 
-type Common = {
+export type Common = {
   zIndexes: ZIndex;
-  colors: Colors;
   metrics: MetricsSizesType;
 };
 
 const common: Common = {
   zIndexes,
-  colors,
   metrics: metricsSizes,
 };
 
diff --git a/web/src/services/theme/reearthTheme/types.ts b/web/src/services/theme/reearthTheme/types.ts
index 94fba7ae78..24a2a2c3b2 100644
--- a/web/src/services/theme/reearthTheme/types.ts
+++ b/web/src/services/theme/reearthTheme/types.ts
@@ -1,7 +1,5 @@
 import { Theme as ClassicTheme } from "@reearth/classic/theme/reearthTheme/types";
-
-import type { MetricsSizesType } from "./common/metrics";
-import type { ZIndex } from "./common/zIndex";
+import { Common } from "@reearth/services/theme/reearthTheme/common";
 
 export type TempTheme = Theme & {
   classic: ClassicTheme;
@@ -19,9 +17,7 @@ type InteractiveElementTheme = {
 // Note: anything typed unknown is not set yet and just anticipated with high likelihood
 // But, might not be necessary so keep in mind. 2023/06/15 @KaWaite
 
-export type Theme = {
-  metrics: MetricsSizesType;
-  zIndexes: ZIndex;
+export type Theme = Common & {
   general: {
     select: string;
     bg: {