diff --git a/web/src/beta/components/ActionItem/index.stories.tsx b/web/src/beta/components/ActionItem/index.stories.tsx
new file mode 100644
index 0000000000..a1a837d4d9
--- /dev/null
+++ b/web/src/beta/components/ActionItem/index.stories.tsx
@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import ActionItem from ".";
+
+export default {
+  component: ActionItem,
+} as Meta;
+
+type Story = StoryObj<typeof ActionItem>;
+
+export const Default: Story = {
+  args: {
+    title: "New Page",
+    icon: "square",
+  },
+};
diff --git a/web/src/beta/components/ActionItem/index.tsx b/web/src/beta/components/ActionItem/index.tsx
new file mode 100644
index 0000000000..7bd2daceda
--- /dev/null
+++ b/web/src/beta/components/ActionItem/index.tsx
@@ -0,0 +1,47 @@
+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;
+  onClick?: () => void;
+};
+
+const ActionItem: FC<Props> = ({ icon, title, onClick }) => {
+  const theme = useTheme();
+
+  return (
+    <Box onClick={onClick}>
+      <Icon icon={icon} size={8} />
+      <Text
+        size={"footnote"}
+        color={theme.general.content.main}
+        otherProperties={{ wordBreak: "break-all" }}>
+        {title}
+      </Text>
+    </Box>
+  );
+};
+
+const Box = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px 12px;
+  gap: 8px;
+
+  min-height: 28px;
+
+  background: ${props => props.theme.general.bg.main};
+  :hover {
+    background: ${props => props.theme.general.bg.weak};
+  }
+  user-select: none;
+  cursor: pointer;
+`;
+
+export default ActionItem;