diff --git a/web/src/beta/components/Icon/Icons/square.svg b/web/src/beta/components/Icon/Icons/square.svg
new file mode 100644
index 000000000..8a39dd473
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/square.svg
@@ -0,0 +1,3 @@
+
diff --git a/web/src/beta/components/Icon/Icons/two-rectangle.svg b/web/src/beta/components/Icon/Icons/two-rectangle.svg
new file mode 100644
index 000000000..ac70e9f93
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/two-rectangle.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/web/src/beta/components/Icon/icons.ts b/web/src/beta/components/Icon/icons.ts
index 2301ccdfe..083426059 100644
--- a/web/src/beta/components/Icon/icons.ts
+++ b/web/src/beta/components/Icon/icons.ts
@@ -46,6 +46,10 @@ import Logout from "./Icons/logout.svg";
import WorkspaceAdd from "./Icons/workspaceAdd.svg";
import Workspaces from "./Icons/workspaces.svg";
+// Square
+import Square from "./Icons/square.svg";
+import TwoRectangle from "./Icons/two-rectangle.svg";
+
export default {
file: File,
dl: InfoTable,
@@ -68,7 +72,9 @@ export default {
ellipse: Ellipse,
playRight: PlayRight,
playLeft: PlayLeft,
+ square: Square,
timeline: Timeline,
+ twoRectangle: TwoRectangle,
actionbutton: ActionButton,
dashboard: Dashboard,
help: Help,
diff --git a/web/src/beta/components/StorytellingPageSectionItem/index.stories.tsx b/web/src/beta/components/StorytellingPageSectionItem/index.stories.tsx
new file mode 100644
index 000000000..467a02df3
--- /dev/null
+++ b/web/src/beta/components/StorytellingPageSectionItem/index.stories.tsx
@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import StorytellingPageSectionItem from ".";
+
+export default {
+ component: StorytellingPageSectionItem,
+} as Meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ icon: "square",
+ title: "New Page",
+ index: 1,
+ active: false,
+ },
+};
+
+export const LongText: Story = {
+ args: {
+ icon: "square",
+ title:
+ "gashjdjahasdasdasdasdasdjjashdjkashdjkahdjkhaskjdhasdasdasdasddfggjsdhasjkdhjkashdkjahskjdhakjshdkahskjdakjshdkjahsdkjhajksdhakjhsdkjhaksjhdakjhsdkjhakjsdhakjhsdkjsadasdasdahskdjhasdasdasdasdasdasdakjsdhksadasd",
+ index: 1,
+ active: false,
+ },
+};
diff --git a/web/src/beta/components/StorytellingPageSectionItem/index.tsx b/web/src/beta/components/StorytellingPageSectionItem/index.tsx
new file mode 100644
index 000000000..2bb351aaf
--- /dev/null
+++ b/web/src/beta/components/StorytellingPageSectionItem/index.tsx
@@ -0,0 +1,80 @@
+import { FC } from "react";
+
+import { styled, useTheme } from "@reearth/services/theme";
+
+import Icon from "../Icon";
+import Text from "../Text";
+
+type Props = {
+ icon: string;
+ title: string;
+ index: number;
+ active?: boolean;
+ onAction?: () => void;
+ onClick?: () => void;
+};
+
+const StorytellingPageSectionItem: FC = ({
+ icon,
+ title,
+ index,
+ active,
+ onAction,
+ onClick,
+}) => {
+ const theme = useTheme();
+ return (
+
+
+ {index}
+
+
+
+
+ {title}
+
+
+
+
+
+
+ );
+};
+
+const HorizontalBox = styled.div`
+ display: flex;
+ min-height: 56px;
+ gap: 4px;
+ cursor: pointer;
+`;
+
+const VerticalBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 4px;
+`;
+
+const TitleArea = styled.div<{ active?: boolean }>`
+ display: flex;
+ justify-content: space-between;
+ padding: 8px;
+ gap: 4px;
+
+ background: ${props => (props.active ? props.theme.general.select : props.theme.general.bg.main)};
+ border: 1px solid
+ ${props => (props.active ? props.theme.general.select : props.theme.general.bg.veryWeak)};
+ border-radius: 6px;
+
+ width: 100%;
+`;
+
+const Wrapper = styled.div`
+ height: 100%;
+`;
+
+export default StorytellingPageSectionItem;