diff --git a/web/src/beta/features/Editor/tabs/widgets/SidePanel/Settings/hooks.ts b/web/src/beta/components/fields/PropertyFields/hooks.ts
similarity index 91%
rename from web/src/beta/features/Editor/tabs/widgets/SidePanel/Settings/hooks.ts
rename to web/src/beta/components/fields/PropertyFields/hooks.ts
index d3d2beed4..1a553e230 100644
--- a/web/src/beta/features/Editor/tabs/widgets/SidePanel/Settings/hooks.ts
+++ b/web/src/beta/components/fields/PropertyFields/hooks.ts
@@ -14,8 +14,9 @@ export default () => {
       vt: ValueType,
       itemId?: string,
     ) => {
-      return async (v?: ValueTypes[ValueType]) =>
+      return async (v?: ValueTypes[ValueType]) => {
         await useUpdatePropertyValue(propertyId, schemaGroupId, itemId, fieldId, "en", v, vt);
+      };
     },
     [useUpdatePropertyValue],
   );
diff --git a/web/src/beta/components/fields/PropertyFields/index.tsx b/web/src/beta/components/fields/PropertyFields/index.tsx
new file mode 100644
index 000000000..d927a6f49
--- /dev/null
+++ b/web/src/beta/components/fields/PropertyFields/index.tsx
@@ -0,0 +1,51 @@
+import TextInput from "@reearth/beta/components/fields/TextInput";
+import { type Item } from "@reearth/services/api/propertyApi/utils";
+
+import ColorField from "../ColorField";
+
+import useHooks from "./hooks";
+
+type Props = {
+  propertyId: string;
+  item?: Item;
+};
+
+const PropertyFields: React.FC<Props> = ({ propertyId, item }) => {
+  const { handlePropertyValueUpdate } = useHooks();
+
+  return (
+    <>
+      {item?.schemaFields.map(sf => {
+        const isList = item && "items" in item;
+        const value = !isList ? item.fields.find(f => f.id === sf.id)?.value : sf.defaultValue;
+        return sf.type === "string" ? (
+          sf.ui === "color" ? (
+            <ColorField
+              key={sf.id}
+              name={sf.name}
+              value={(value as string) ?? ""}
+              description={sf.description}
+              onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+            />
+          ) : sf.ui === "selection" || sf.choices ? (
+            <p key={sf.id}>Selection or choices field</p>
+          ) : sf.ui === "buttons" ? (
+            <p key={sf.id}>Button radio field</p>
+          ) : (
+            <TextInput
+              key={sf.id}
+              name={sf.name}
+              value={(value as string) ?? ""}
+              description={sf.description}
+              onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+            />
+          )
+        ) : (
+          <p key={sf.id}>{sf.name} field</p>
+        );
+      })}
+    </>
+  );
+};
+
+export default PropertyFields;
diff --git a/web/src/beta/features/Editor/StoryPanel/Block/Template.tsx b/web/src/beta/features/Editor/StoryPanel/Block/Template.tsx
index 80133cbcb..391e36ff4 100644
--- a/web/src/beta/features/Editor/StoryPanel/Block/Template.tsx
+++ b/web/src/beta/features/Editor/StoryPanel/Block/Template.tsx
@@ -17,6 +17,7 @@ export default Template;
 
 const Wrapper = styled.div`
   display: flex;
+  height: 255px;
   justify-content: center;
   align-items: center;
   flex: 1;
diff --git a/web/src/beta/features/Editor/StoryPanel/Block/builtin/Image/index.tsx b/web/src/beta/features/Editor/StoryPanel/Block/builtin/Image/index.tsx
index c496cc29a..8d3148e01 100644
--- a/web/src/beta/features/Editor/StoryPanel/Block/builtin/Image/index.tsx
+++ b/web/src/beta/features/Editor/StoryPanel/Block/builtin/Image/index.tsx
@@ -1,41 +1,26 @@
-import { useCallback } from "react";
+import { useMemo } from "react";
 
+import { ValueTypes } from "@reearth/beta/utils/value";
 import { styled } from "@reearth/services/theme";
 
 import { CommonProps as BlockProps } from "../../types";
-import BlockWrapper from "../Builtin/Wrapper";
+import BlockWrapper from "../common/Wrapper";
+import { getFieldValue } from "../utils";
 
-export type Props = BlockProps<Property>;
-
-type Spacing = {
-  top: number;
-  bottom: number;
-  left: number;
-  right: number;
-};
-
-export type Property = {
-  src?: string;
-  padding: Spacing;
-};
-
-const ImageBlock: React.FC<Props> = ({ block, isSelected, onClick, onRemove }) => {
-  const {
-    // src = "https://upload.wikimedia.org/wikipedia/en/a/a5/Pok%C3%A9mon_Charmander_art.png",
-    src,
-    padding = { top: 10, bottom: 20, left: 30, right: 10 },
-  } = block?.property ?? {};
-
-  const handleRemove = useCallback(() => onRemove?.(block?.id), [block?.id, onRemove]);
+const ImageBlock: React.FC<BlockProps> = ({ block, isSelected, ...props }) => {
+  const src = useMemo(
+    () => getFieldValue(block?.property?.items ?? [], "src") as ValueTypes["string"],
+    [block?.property?.items],
+  );
 
   return (
     <BlockWrapper
       title={block?.title}
       icon={block?.extensionId}
-      padding={src ? padding : undefined}
       isSelected={isSelected}
-      onClick={onClick}
-      onRemove={handleRemove}>
+      propertyId={block?.property?.id}
+      propertyItems={block?.property?.items}
+      {...props}>
       {src && <Image src={src} />}
     </BlockWrapper>
   );
diff --git a/web/src/beta/features/Editor/StoryPanel/Block/builtin/Text/index.tsx b/web/src/beta/features/Editor/StoryPanel/Block/builtin/Text/index.tsx
index 3a53bc7af..a6f8936fc 100644
--- a/web/src/beta/features/Editor/StoryPanel/Block/builtin/Text/index.tsx
+++ b/web/src/beta/features/Editor/StoryPanel/Block/builtin/Text/index.tsx
@@ -1,23 +1,34 @@
-import { useCallback } from "react";
+import { useMemo } from "react";
 
-import { CommonProps as BlockProps } from "../../types";
-import BlockWrapper from "../Builtin/Wrapper";
+import Text from "@reearth/beta/components/Text";
+import { ValueTypes } from "@reearth/beta/utils/value";
 
-export type Props = BlockProps<Property>;
+import { CommonProps as BlockProps } from "../../types";
+import BlockWrapper from "../common/Wrapper";
+import { getFieldValue } from "../utils";
 
-export type Property = {};
+export type Props = BlockProps;
 
-const TextBlock: React.FC<Props> = ({ block, isSelected, onClick, onRemove }) => {
-  const handleRemove = useCallback(() => onRemove?.(block?.id), [block?.id, onRemove]);
+const TextBlock: React.FC<Props> = ({ block, isSelected, ...props }) => {
+  const text = useMemo(
+    () => getFieldValue(block?.property?.items ?? [], "text") as ValueTypes["string"],
+    [block?.property?.items],
+  );
 
   return (
     <BlockWrapper
       title={block?.title}
       icon={block?.extensionId}
       isSelected={isSelected}
-      onClick={onClick}
-      onRemove={handleRemove}
-    />
+      propertyId={block?.property?.id}
+      propertyItems={block?.property?.items}
+      {...props}>
+      {text && (
+        <Text size="body" customColor>
+          {text}
+        </Text>
+      )}
+    </BlockWrapper>
   );
 };
 
diff --git a/web/src/beta/features/Editor/StoryPanel/Block/builtin/Builtin/ActionPanel/hooks.ts b/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/ActionPanel/hooks.ts
similarity index 100%
rename from web/src/beta/features/Editor/StoryPanel/Block/builtin/Builtin/ActionPanel/hooks.ts
rename to web/src/beta/features/Editor/StoryPanel/Block/builtin/common/ActionPanel/hooks.ts
diff --git a/web/src/beta/features/Editor/StoryPanel/Block/builtin/Builtin/ActionPanel/index.tsx b/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/ActionPanel/index.tsx
similarity index 89%
rename from web/src/beta/features/Editor/StoryPanel/Block/builtin/Builtin/ActionPanel/index.tsx
rename to web/src/beta/features/Editor/StoryPanel/Block/builtin/common/ActionPanel/index.tsx
index ca4738142..ae0f4c553 100644
--- a/web/src/beta/features/Editor/StoryPanel/Block/builtin/Builtin/ActionPanel/index.tsx
+++ b/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/ActionPanel/index.tsx
@@ -1,9 +1,11 @@
 import { Dispatch, Fragment, SetStateAction } from "react";
 
+import FieldComponents from "@reearth/beta/components/fields/PropertyFields";
 import Icon from "@reearth/beta/components/Icon";
 import * as Popover from "@reearth/beta/components/Popover";
 import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent";
 import Text from "@reearth/beta/components/Text";
+import { Item } from "@reearth/services/api/propertyApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
@@ -16,6 +18,8 @@ type Props = {
   showSettings?: boolean;
   showPadding?: boolean;
   editMode: boolean;
+  propertyId?: string;
+  panelSettings?: Item;
   setShowPadding: Dispatch<SetStateAction<boolean>>;
   onEditModeToggle: () => void;
   onSettingsToggle: () => void;
@@ -29,6 +33,8 @@ const ActionPanel: React.FC<Props> = ({
   showSettings,
   showPadding,
   editMode,
+  propertyId,
+  panelSettings,
   setShowPadding,
   onEditModeToggle,
   onSettingsToggle,
@@ -75,11 +81,15 @@ const ActionPanel: React.FC<Props> = ({
             <SettingsDropdown>
               <SettingsHeading>
                 <Text size="footnote" customColor>
-                  Padding settings
+                  {panelSettings?.title}
                 </Text>
                 <CancelIcon icon="cancel" size={14} onClick={() => setShowPadding(false)} />
               </SettingsHeading>
-              <SettingsContent>Padding</SettingsContent>
+              {propertyId && panelSettings && (
+                <SettingsContent>
+                  <FieldComponents propertyId={propertyId} item={panelSettings} />
+                </SettingsContent>
+              )}
             </SettingsDropdown>
           ) : (
             <PopoverMenuContent
@@ -161,6 +171,8 @@ const SettingsHeading = styled.div`
 const SettingsContent = styled.div`
   height: 100px;
   width: 200px;
+  padding: 8px;
+  box-sizing: border-box;
 `;
 
 const CancelIcon = styled(Icon)`
diff --git a/web/src/beta/features/Editor/StoryPanel/Block/builtin/Builtin/Wrapper.tsx b/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/Wrapper.tsx
similarity index 53%
rename from web/src/beta/features/Editor/StoryPanel/Block/builtin/Builtin/Wrapper.tsx
rename to web/src/beta/features/Editor/StoryPanel/Block/builtin/common/Wrapper.tsx
index c2ad1b47e..f78da5dbf 100644
--- a/web/src/beta/features/Editor/StoryPanel/Block/builtin/Builtin/Wrapper.tsx
+++ b/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/Wrapper.tsx
@@ -1,10 +1,13 @@
 import { ReactNode } from "react";
 
+import FieldComponents from "@reearth/beta/components/fields/PropertyFields";
+import { type Item } from "@reearth/services/api/propertyApi/utils";
 import { styled } from "@reearth/services/theme";
 
 import Template from "../../Template";
 
 import ActionPanel from "./ActionPanel";
+import ClickAwayListener from "./click-away";
 import useHooks from "./hooks";
 
 type Spacing = {
@@ -17,20 +20,24 @@ type Spacing = {
 type Props = {
   title?: string;
   icon?: string;
-  padding?: Spacing;
   isSelected?: boolean;
   children?: ReactNode;
-  onClick: (() => void) | undefined;
+  propertyId?: string;
+  propertyItems?: Item[];
+  onClick?: () => void;
+  onClickAway?: () => void;
   onRemove?: () => void;
 };
 
 const BlockWrapper: React.FC<Props> = ({
   title,
   icon,
-  padding,
   isSelected,
   children,
+  propertyId,
+  propertyItems,
   onClick,
+  onClickAway,
   onRemove,
 }) => {
   const {
@@ -38,6 +45,9 @@ const BlockWrapper: React.FC<Props> = ({
     editMode,
     showSettings,
     showPadding,
+    defaultSettings,
+    panelSettings,
+    padding,
     setShowPadding,
     handleMouseEnter,
     handleMouseLeave,
@@ -46,37 +56,42 @@ const BlockWrapper: React.FC<Props> = ({
     handleSettingsToggle,
   } = useHooks({
     isSelected,
+    propertyItems,
     onClick,
   });
 
   return (
-    <Wrapper
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      isSelected={isSelected}>
-      {(isHovered || isSelected) && (
-        <ActionPanel
-          title={title}
-          icon={icon}
-          isSelected={isSelected}
-          showSettings={showSettings}
-          showPadding={showPadding}
-          editMode={editMode}
-          setShowPadding={setShowPadding}
-          onEditModeToggle={handleEditModeToggle}
-          onSettingsToggle={handleSettingsToggle}
-          onRemove={onRemove}
-        />
-      )}
-      <Block padding={padding} onClick={handleBlockClick}>
-        {children ?? <Template icon={icon} />}
-      </Block>
-      {editMode && (
-        <EditorPanel>
-          <p>Block editing</p>
-        </EditorPanel>
-      )}
-    </Wrapper>
+    <ClickAwayListener enabled={isSelected} onClickAway={onClickAway}>
+      <Wrapper
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        isSelected={isSelected}>
+        {(isHovered || isSelected) && (
+          <ActionPanel
+            title={title}
+            icon={icon}
+            isSelected={isSelected}
+            showSettings={showSettings}
+            showPadding={showPadding}
+            editMode={editMode}
+            propertyId={propertyId}
+            panelSettings={panelSettings}
+            setShowPadding={setShowPadding}
+            onEditModeToggle={handleEditModeToggle}
+            onSettingsToggle={handleSettingsToggle}
+            onRemove={onRemove}
+          />
+        )}
+        <Block padding={padding} onClick={handleBlockClick}>
+          {children ?? <Template icon={icon} />}
+        </Block>
+        {editMode && propertyId && defaultSettings && (
+          <EditorPanel>
+            <FieldComponents propertyId={propertyId} item={defaultSettings} />
+          </EditorPanel>
+        )}
+      </Wrapper>
+    </ClickAwayListener>
   );
 };
 
@@ -97,12 +112,12 @@ const Wrapper = styled.div<{ isSelected?: boolean }>`
 
 const Block = styled.div<{ padding?: Spacing }>`
   display: flex;
-  min-height: 255px;
   padding-top: ${({ padding }) => padding?.top + "px" ?? 0};
   padding-bottom: ${({ padding }) => padding?.bottom + "px" ?? 0};
   padding-left: ${({ padding }) => padding?.left + "px" ?? 0};
   padding-right: ${({ padding }) => padding?.right + "px" ?? 0};
   cursor: pointer;
+  color: black;
 `;
 
 const EditorPanel = styled.div`
diff --git a/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/click-away.tsx b/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/click-away.tsx
new file mode 100644
index 000000000..fb9b665d0
--- /dev/null
+++ b/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/click-away.tsx
@@ -0,0 +1,135 @@
+import React, {
+  useRef,
+  useEffect,
+  RefCallback,
+  cloneElement,
+  ReactElement,
+  HTMLAttributes,
+  MutableRefObject,
+  FunctionComponent,
+} from "react";
+
+type FocusEvents = "focusin" | "focusout";
+type MouseEvents = "click" | "mousedown" | "mouseup";
+type TouchEvents = "touchstart" | "touchend";
+type Events = FocusEvent | MouseEvent | TouchEvent;
+
+interface Props extends HTMLAttributes<HTMLElement> {
+  enabled?: boolean;
+  onClickAway?: (event: Events) => void;
+  focusEvent?: FocusEvents;
+  mouseEvent?: MouseEvents;
+  touchEvent?: TouchEvents;
+  children: ReactElement<any>;
+}
+
+const eventTypeMapping = {
+  click: "onClick",
+  focusin: "onFocus",
+  focusout: "onFocus",
+  mousedown: "onMouseDown",
+  mouseup: "onMouseUp",
+  touchstart: "onTouchStart",
+  touchend: "onTouchEnd",
+};
+
+const ClickAwayListener: FunctionComponent<Props> = ({
+  enabled,
+  children,
+  onClickAway,
+  focusEvent = "focusin",
+  mouseEvent = "click",
+  touchEvent = "touchend",
+}) => {
+  const node = useRef<HTMLElement | null>(null);
+  const bubbledEventTarget = useRef<EventTarget | null>(null);
+  const mountedRef = useRef(false);
+
+  /**
+   * Prevents the bubbled event from getting triggered immediately
+   * https://github.com/facebook/react/issues/20074
+   */
+  useEffect(() => {
+    if (!enabled) return;
+    setTimeout(() => {
+      mountedRef.current = true;
+    }, 0);
+
+    return () => {
+      mountedRef.current = false;
+    };
+  }, [enabled]);
+
+  const handleBubbledEvents =
+    (type: string) =>
+    (event: Events): void => {
+      bubbledEventTarget.current = event.target;
+
+      const handler = children?.props[type];
+
+      if (handler) {
+        handler(event);
+      }
+    };
+
+  const handleChildRef = (childRef: HTMLElement) => {
+    node.current = childRef;
+
+    const { ref } = children as typeof children & {
+      ref: RefCallback<HTMLElement> | MutableRefObject<HTMLElement>;
+    };
+
+    if (typeof ref === "function") {
+      ref(childRef);
+    } else if (ref) {
+      ref.current = childRef;
+    }
+  };
+
+  useEffect(() => {
+    if (!enabled) return;
+    const nodeDocument = node.current?.ownerDocument ?? document;
+
+    const handleEvents = (event: Events): void => {
+      if (!mountedRef.current) return;
+
+      if (
+        (node.current && node.current.contains(event.target as Node)) ||
+        bubbledEventTarget.current === event.target ||
+        !nodeDocument.contains(event.target as Node)
+      ) {
+        return;
+      }
+      onClickAway?.(event);
+    };
+
+    nodeDocument.addEventListener(mouseEvent, handleEvents);
+    nodeDocument.addEventListener(touchEvent, handleEvents);
+    nodeDocument.addEventListener(focusEvent, handleEvents);
+
+    return () => {
+      nodeDocument.removeEventListener(mouseEvent, handleEvents);
+      nodeDocument.removeEventListener(touchEvent, handleEvents);
+      nodeDocument.removeEventListener(focusEvent, handleEvents);
+    };
+  }, [focusEvent, mouseEvent, enabled, onClickAway, touchEvent]);
+
+  const mappedMouseEvent = eventTypeMapping[mouseEvent];
+  const mappedTouchEvent = eventTypeMapping[touchEvent];
+  const mappedFocusEvent = eventTypeMapping[focusEvent];
+
+  return enabled
+    ? React.Children.only(
+        cloneElement(children as ReactElement<any>, {
+          ref: handleChildRef,
+          [mappedFocusEvent]: handleBubbledEvents(mappedFocusEvent),
+          [mappedMouseEvent]: handleBubbledEvents(mappedMouseEvent),
+          [mappedTouchEvent]: handleBubbledEvents(mappedTouchEvent),
+        }),
+      )
+    : children;
+};
+
+ClickAwayListener.displayName = "ClickAwayListener";
+
+export default ClickAwayListener;
diff --git a/web/src/beta/features/Editor/StoryPanel/Block/builtin/Builtin/hooks.ts b/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/hooks.ts
similarity index 50%
rename from web/src/beta/features/Editor/StoryPanel/Block/builtin/Builtin/hooks.ts
rename to web/src/beta/features/Editor/StoryPanel/Block/builtin/common/hooks.ts
index bf8af1c8b..ceddca951 100644
--- a/web/src/beta/features/Editor/StoryPanel/Block/builtin/Builtin/hooks.ts
+++ b/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/hooks.ts
@@ -1,16 +1,28 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { ValueTypes } from "@reearth/beta/utils/value";
+import type { Item } from "@reearth/services/api/propertyApi/utils";
+
+import { getFieldValue } from "../utils";
 
 type Props = {
   isSelected?: boolean;
+  propertyItems?: Item[];
   onClick: (() => void) | undefined;
 };
 
-export default ({ isSelected, onClick }: Props) => {
+export default ({ isSelected, propertyItems, onClick }: Props) => {
   const [isHovered, setHover] = useState(false);
   const [editMode, setEditMode] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const [showPadding, setShowPadding] = useState(false);
 
+  useEffect(() => {
+    if (!isSelected && editMode) {
+      setEditMode(false);
+    }
+  }, [isSelected, editMode]);
+
   const handleEditModeToggle = useCallback(() => setEditMode(em => !em), []);
 
   const handleSettingsToggle = useCallback(() => setShowSettings(s => !s), []);
@@ -24,11 +36,29 @@ export default ({ isSelected, onClick }: Props) => {
     onClick?.();
   }, [onClick, showSettings, isSelected]);
 
+  const defaultSettings: Item | undefined = useMemo(
+    () => propertyItems?.find(i => i.schemaGroup === "default"),
+    [propertyItems],
+  );
+
+  const panelSettings: Item | undefined = useMemo(
+    () => propertyItems?.find(i => i.schemaGroup === "panel"),
+    [propertyItems],
+  );
+
+  const padding = useMemo(
+    () => getFieldValue(propertyItems ?? [], "padding", "panel") as ValueTypes["spacing"],
+    [propertyItems],
+  );
+
   return {
     isHovered,
     editMode,
     showSettings,
     showPadding,
+    defaultSettings,
+    panelSettings,
+    padding,
     setShowPadding,
     handleMouseEnter,
     handleMouseLeave,
diff --git a/web/src/beta/features/Editor/StoryPanel/Block/builtin/utils.ts b/web/src/beta/features/Editor/StoryPanel/Block/builtin/utils.ts
new file mode 100644
index 000000000..1599d2dbd
--- /dev/null
+++ b/web/src/beta/features/Editor/StoryPanel/Block/builtin/utils.ts
@@ -0,0 +1,8 @@
+import { type Item } from "@reearth/services/api/propertyApi/utils";
+
+export const getFieldValue = (items: Item[], fieldId: string, fieldGroup?: string) => {
+  const d = items.find(i => i.schemaGroup === (fieldGroup ?? "default"));
+  const isList = d && "items" in d;
+  const schemaField = d?.schemaFields.find(sf => sf.id === fieldId);
+  return !isList ? d?.fields.find(f => f.id === schemaField?.id)?.value : schemaField?.defaultValue;
+};
diff --git a/web/src/beta/features/Editor/StoryPanel/Block/index.tsx b/web/src/beta/features/Editor/StoryPanel/Block/index.tsx
index 6f5d44d42..1ed26ec10 100644
--- a/web/src/beta/features/Editor/StoryPanel/Block/index.tsx
+++ b/web/src/beta/features/Editor/StoryPanel/Block/index.tsx
@@ -1,4 +1,4 @@
-import type { ComponentType, ReactNode } from "react";
+import { useCallback, type ComponentType, type ReactNode } from "react";
 
 import type { Layer } from "@reearth/beta/lib/core/mantle";
 import { styled } from "@reearth/services/theme";
@@ -6,22 +6,25 @@ import { styled } from "@reearth/services/theme";
 import builtin, { isBuiltinStoryBlock } from "./builtin";
 import { CommonProps, BlockProps } from "./types";
 
-export type Props<BP = unknown> = {
+export type Props = {
   renderBlock?: (block: BlockProps) => ReactNode;
   layer?: Layer;
-} & CommonProps<BP>;
+} & CommonProps;
 
-export type Component<BP = any> = ComponentType<CommonProps<BP>>;
+export type Component = ComponentType<CommonProps>;
 
-export default function StoryBlockComponent<P = any>({
+export default function StoryBlockComponent({
   renderBlock,
+  onRemove,
   ...props
-}: Props<P>): JSX.Element | null {
+}: Props): JSX.Element | null {
   const builtinBlockId = `${props.block?.pluginId}/${props.block?.extensionId}`;
   const Builtin = isBuiltinStoryBlock(builtinBlockId) ? builtin[builtinBlockId] : undefined;
 
+  const handleRemove = useCallback(() => onRemove?.(props.block?.id), [props.block?.id, onRemove]);
+
   return Builtin ? (
-    <Builtin {...props} />
+    <Builtin {...props} onRemove={handleRemove} />
   ) : props.block ? (
     <Wrapper editable={props?.isEditable} onClick={props?.onClick} selected={props?.isSelected}>
       {renderBlock?.({ block: props.block, layer: props.layer, onClick: props.onClick })}
diff --git a/web/src/beta/features/Editor/StoryPanel/Block/types.ts b/web/src/beta/features/Editor/StoryPanel/Block/types.ts
index 950b41ec3..1213f3feb 100644
--- a/web/src/beta/features/Editor/StoryPanel/Block/types.ts
+++ b/web/src/beta/features/Editor/StoryPanel/Block/types.ts
@@ -1,14 +1,17 @@
 import { Theme } from "@reearth/beta/lib/core/Crust/types";
 import type { Layer } from "@reearth/beta/lib/core/mantle";
 import { ValueType, ValueTypes } from "@reearth/beta/utils/value";
+import { type Item } from "@reearth/services/api/propertyApi/utils";
 
 export type Block<P = unknown> = {
   id: string;
   title?: string;
   pluginId?: string;
   extensionId?: string;
-  property?: P;
-  propertyId?: string;
+  property?: {
+    id: string;
+    items?: P;
+  };
 };
 
 export type BlockProps<P = unknown> = {
@@ -17,19 +20,36 @@ export type BlockProps<P = unknown> = {
   onClick?: () => void;
 };
 
-export type CommonProps<BP = any> = {
+export type CommonProps = {
   isEditable?: boolean;
   isBuilt?: boolean;
   isSelected?: boolean;
-  block?: Block<BP>;
-  // infoboxProperty?: InfoboxProperty;
+  block?: Block<Item[]>;
   theme?: Theme;
   onClick?: () => void;
+  onClickAway?: () => void;
   onRemove?: (id?: string) => void;
-  onChange?: <T extends ValueType>(
-    schemaItemId: string,
-    fieldId: string,
-    value: ValueTypes[T],
-    type: T,
-  ) => void;
+  onChange?: (
+    propertyId?: string,
+    schemaItemId?: string,
+    fieldId?: string,
+    itemId?: string,
+    vt?: ValueType,
+    v?: ValueTypes[ValueType],
+  ) => Promise<void>;
+};
+
+export type SharedProperties = {
+  id: string;
+  title: string;
+  fields: {
+    padding?: Spacing;
+  };
+}[];
+
+type Spacing = {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
 };
diff --git a/web/src/beta/features/Editor/StoryPanel/Page/hooks.ts b/web/src/beta/features/Editor/StoryPanel/Page/hooks.ts
index cd02a3d18..07086974e 100644
--- a/web/src/beta/features/Editor/StoryPanel/Page/hooks.ts
+++ b/web/src/beta/features/Editor/StoryPanel/Page/hooks.ts
@@ -1,5 +1,7 @@
 import { useCallback, useState } from "react";
 
+import { ValueType, ValueTypes } from "@reearth/beta/utils/value";
+import { usePropertyFetcher } from "@reearth/services/api";
 import useStorytellingAPI from "@reearth/services/api/storytellingApi";
 
 export default ({
@@ -24,6 +26,23 @@ export default ({
     [openBlocksIndex],
   );
 
+  const { useUpdatePropertyValue } = usePropertyFetcher();
+
+  const handlePropertyValueUpdate = useCallback(
+    async (
+      propertyId?: string,
+      schemaItemId?: string,
+      fieldId?: string,
+      itemId?: string,
+      vt?: ValueType,
+      v?: ValueTypes[ValueType],
+    ) => {
+      if (!propertyId || !schemaItemId || !fieldId || !vt) return;
+      await useUpdatePropertyValue(propertyId, schemaItemId, itemId, fieldId, "en", v, vt);
+    },
+    [useUpdatePropertyValue],
+  );
+
   const { useInstalledStoryBlocksQuery, useCreateStoryBlock, useDeleteStoryBlock } =
     useStorytellingAPI();
 
@@ -62,5 +81,6 @@ export default ({
     handleStoryBlockCreate,
     handleStoryBlockDelete,
     handleBlockOpen,
+    handlePropertyValueUpdate,
   };
 };
diff --git a/web/src/beta/features/Editor/StoryPanel/Page/index.tsx b/web/src/beta/features/Editor/StoryPanel/Page/index.tsx
index 46c53f257..4616acc44 100644
--- a/web/src/beta/features/Editor/StoryPanel/Page/index.tsx
+++ b/web/src/beta/features/Editor/StoryPanel/Page/index.tsx
@@ -16,7 +16,7 @@ type Props = {
   pageTitle?: string;
   installableStoryBlocks?: InstallableStoryBlock[];
   selectedStoryBlockId?: string;
-  onBlockSelect: (blockId: string) => void;
+  onBlockSelect: (blockId?: string) => void;
 };
 
 const StoryPage: React.FC<Props> = ({
@@ -34,6 +34,7 @@ const StoryPage: React.FC<Props> = ({
     handleStoryBlockCreate,
     handleStoryBlockDelete,
     handleBlockOpen,
+    handlePropertyValueUpdate,
   } = useHooks({
     sceneId,
     storyId,
@@ -59,6 +60,8 @@ const StoryPage: React.FC<Props> = ({
               block={b}
               isSelected={selectedStoryBlockId === b.id}
               onClick={() => onBlockSelect(b.id)}
+              onClickAway={() => onBlockSelect()}
+              onChange={handlePropertyValueUpdate}
               onRemove={handleStoryBlockDelete}
             />
             <BlockAddBar
diff --git a/web/src/beta/features/Editor/StoryPanel/hooks.ts b/web/src/beta/features/Editor/StoryPanel/hooks.ts
index a347283a4..bfd898f94 100644
--- a/web/src/beta/features/Editor/StoryPanel/hooks.ts
+++ b/web/src/beta/features/Editor/StoryPanel/hooks.ts
@@ -20,8 +20,8 @@ export default ({
 }) => {
   const [selectedStoryBlockId, setSelectedStoryBlockId] = useState<string>();
 
-  const handleStoryBlockSelect = useCallback((blockId: string) => {
-    setSelectedStoryBlockId(id => (id === blockId ? undefined : blockId));
+  const handleStoryBlockSelect = useCallback((blockId?: string) => {
+    setSelectedStoryBlockId(id => (!blockId || id === blockId ? undefined : blockId));
   }, []);
 
   const { useInstallableStoryBlocksQuery } = useStorytellingAPI();
diff --git a/web/src/beta/features/Editor/tabs/widgets/SidePanel/Settings/index.tsx b/web/src/beta/features/Editor/tabs/widgets/SidePanel/Settings/index.tsx
index 1e74e8f58..6ce73facd 100644
--- a/web/src/beta/features/Editor/tabs/widgets/SidePanel/Settings/index.tsx
+++ b/web/src/beta/features/Editor/tabs/widgets/SidePanel/Settings/index.tsx
@@ -1,63 +1,21 @@
-import ColorField from "@reearth/beta/components/fields/ColorField";
-import TextInput from "@reearth/beta/components/fields/TextInput";
+import FieldComponents from "@reearth/beta/components/fields/PropertyFields";
 import SidePanelSectionField from "@reearth/beta/components/SidePanelSectionField";
 import { type Item } from "@reearth/services/api/propertyApi/utils";
 import { styled } from "@reearth/services/theme";
 
-import useHooks from "./hooks";
-
 type Props = {
   widgetPropertyId: string;
   propertyItems?: Item[];
 };
 
 const Settings: React.FC<Props> = ({ widgetPropertyId, propertyItems }) => {
-  const { handlePropertyValueUpdate } = useHooks();
   console.log("PI", propertyItems);
 
   return (
     <Wrapper>
       {propertyItems?.map((i, idx) => (
         <SidePanelSectionField title={i.title ?? "Undefined"} key={idx}>
-          {i.schemaFields.map(sf => {
-            const isList = i && "items" in i;
-            const value = !isList ? i.fields.find(f => f.id === sf.id)?.value : sf.defaultValue;
-            return sf.type === "string" ? (
-              sf.ui === "color" ? (
-                <ColorField
-                  key={sf.id}
-                  name={sf.name}
-                  value={(value as string) ?? ""}
-                  description={sf.description}
-                  onChange={handlePropertyValueUpdate(
-                    i.schemaGroup,
-                    widgetPropertyId,
-                    sf.id,
-                    sf.type,
-                  )}
-                />
-              ) : sf.ui === "selection" || sf.choices ? (
-                <p key={sf.id}>Selection or choices field</p>
-              ) : sf.ui === "buttons" ? (
-                <p key={sf.id}>Button radio field</p>
-              ) : (
-                <TextInput
-                  key={sf.id}
-                  name={sf.name}
-                  value={(value as string) ?? ""}
-                  description={sf.description}
-                  onChange={handlePropertyValueUpdate(
-                    i.schemaGroup,
-                    widgetPropertyId,
-                    sf.id,
-                    sf.type,
-                  )}
-                />
-              )
-            ) : (
-              <p key={sf.id}>{sf.name} field</p>
-            );
-          })}
+          <FieldComponents propertyId={widgetPropertyId} item={i} />
         </SidePanelSectionField>
       ))}
     </Wrapper>
diff --git a/web/src/beta/lib/core/Crust/Infobox/Block/index.tsx b/web/src/beta/lib/core/Crust/Infobox/Block/index.tsx
index dfa6f2543..0cc33a182 100644
--- a/web/src/beta/lib/core/Crust/Infobox/Block/index.tsx
+++ b/web/src/beta/lib/core/Crust/Infobox/Block/index.tsx
@@ -1,10 +1,9 @@
 import type { ComponentType, ReactNode } from "react";
 
 import type { Layer } from "@reearth/beta/lib/core/mantle";
-import type { ValueType, ValueTypes } from "@reearth/beta/utils/value";
 import { styled } from "@reearth/services/theme";
 
-import { Theme } from "../../types";
+import { Theme, ValueType, ValueTypes } from "../../types";
 import type { Block, BlockProps, InfoboxProperty } from "../types";
 
 import builtin, { isBuiltinBlock } from "./builtin";
diff --git a/web/src/beta/utils/value.ts b/web/src/beta/utils/value.ts
index 4fe83896e..cc4aa5963 100644
--- a/web/src/beta/utils/value.ts
+++ b/web/src/beta/utils/value.ts
@@ -24,6 +24,13 @@ export type Camera = {
   fov: number;
 };
 
+export type Spacing = {
+  bottom: number;
+  left: number;
+  right: number;
+  top: number;
+};
+
 export type Typography = {
   fontFamily?: string;
   fontSize?: number;
@@ -56,7 +63,7 @@ export type Plane = {
   pitch: number;
 };
 
-// Familiar with Cesium
+// Similar to Cesium
 export type EXPERIMENTAL_clipping = {
   planes?: {
     normal: {
@@ -99,9 +106,10 @@ export type ValueTypes = {
   rect: Rect;
   ref: string;
   tiletype: string;
+  spacing: Spacing;
 };
 
-const valueTypeMapper: Partial<Record<GQLValueType, ValueType>> = {
+const valueTypeMapper: Record<GQLValueType, ValueType> = {
   [GQLValueType.Bool]: "bool",
   [GQLValueType.Number]: "number",
   [GQLValueType.String]: "string",
@@ -114,6 +122,7 @@ const valueTypeMapper: Partial<Record<GQLValueType, ValueType>> = {
   [GQLValueType.Polygon]: "polygon",
   [GQLValueType.Rect]: "rect",
   [GQLValueType.Ref]: "ref",
+  [GQLValueType.Spacing]: "spacing",
 };
 
 export type ValueType = keyof ValueTypes;
@@ -159,7 +168,7 @@ export function valueToGQL<T extends ValueType>(
   return val ?? null;
 }
 
-export const valueTypeFromGQL = (t: GQLValueType): ValueType | undefined => {
+export const valueTypeFromGQL = (t: GQLValueType): ValueType => {
   return valueTypeMapper[t];
 };
 
diff --git a/web/src/services/api/propertyApi/utils.ts b/web/src/services/api/propertyApi/utils.ts
index a3a8c8664..4b47f06d5 100644
--- a/web/src/services/api/propertyApi/utils.ts
+++ b/web/src/services/api/propertyApi/utils.ts
@@ -54,7 +54,9 @@ export type SchemaFieldType<T extends ValueType = ValueType> = {
     | "video"
     | "file"
     | "layer"
-    | "cameraPose";
+    | "cameraPose"
+    | "padding"
+    | "margin";
   choices?: {
     key: string;
     label: string;
@@ -224,16 +226,15 @@ const toField = (
     return;
   }
 
-  const type = valueTypeFromGQL(schemaField.type);
+  const { value, type } = valueFromGQL(field?.value, schemaField.type) ?? {};
   if (!type) return;
-  const value = valueFromGQL(field?.value, schemaField.type);
   const mergedValue = valueFromGQL(merged?.actualValue, schemaField.type);
   const links = merged?.links ?? field?.links ?? undefined;
 
   return {
     id: schemaField.fieldId,
     type,
-    value: value?.value,
+    value,
     mergedValue: mergedValue?.value,
     overridden: !!merged?.overridden,
     link:
@@ -273,6 +274,10 @@ const toUi = (ui: PropertySchemaFieldUi | null | undefined): SchemaField["ui"] =
       return "layer";
     case PropertySchemaFieldUi.CameraPose:
       return "cameraPose";
+    case PropertySchemaFieldUi.Margin:
+      return "margin";
+    case PropertySchemaFieldUi.Padding:
+      return "padding";
   }
   return undefined;
 };
diff --git a/web/src/services/api/storytellingApi/blocks.ts b/web/src/services/api/storytellingApi/blocks.ts
index f213944ee..d78251ee5 100644
--- a/web/src/services/api/storytellingApi/blocks.ts
+++ b/web/src/services/api/storytellingApi/blocks.ts
@@ -24,7 +24,7 @@ import {
 import { useT } from "@reearth/services/i18n";
 import { useNotification } from "@reearth/services/state";
 
-import { convert } from "../propertyApi/utils";
+import { Item, convert } from "../propertyApi/utils";
 import { SceneQueryProps } from "../sceneApi";
 
 export type StoryBlockQueryProps = SceneQueryProps;
@@ -39,14 +39,17 @@ export type InstallableStoryBlock = {
   type?: PluginExtensionType;
 };
 
-export type InstalledStoryBlock<P = unknown> = {
+export type InstalledStoryBlock = {
   id: string;
   pluginId: string;
   extensionId: string;
   title: string;
   description: string | undefined;
   icon?: string;
-  property?: P;
+  property?: {
+    id: string;
+    items: Item[] | undefined;
+  };
 };
 
 export default () => {
@@ -84,8 +87,6 @@ export default () => {
         [data, storyId, pageId],
       );
 
-      console.log("INSTALLED", installedStoryBlocks);
-
       return { installedStoryBlocks, ...rest };
     },
     [],
@@ -206,7 +207,7 @@ export const getInstalledStoryBlocks = (
       description: block?.description,
       icon: block?.icon,
       property: {
-        id: b.id,
+        id: b.property?.id ?? "",
         items: convert(b.property, null),
       },
     };
diff --git a/web/src/services/gql/__gen__/graphql.ts b/web/src/services/gql/__gen__/graphql.ts
index 0ee8307f8..1efe2b8b3 100644
--- a/web/src/services/gql/__gen__/graphql.ts
+++ b/web/src/services/gql/__gen__/graphql.ts
@@ -1428,6 +1428,11 @@ export type Policy = {
   publishedProjectCount?: Maybe<Scalars['Int']['output']>;
 };
 
+export enum Position {
+  Left = 'LEFT',
+  Right = 'RIGHT'
+}
+
 export type Project = Node & {
   __typename?: 'Project';
   alias: Scalars['String']['output'];
@@ -1990,11 +1995,19 @@ export type Spacing = {
 export type Story = Node & {
   __typename?: 'Story';
   alias: Scalars['String']['output'];
+  basicAuthPassword: Scalars['String']['output'];
+  basicAuthUsername: Scalars['String']['output'];
   createdAt: Scalars['DateTime']['output'];
   id: Scalars['ID']['output'];
+  isBasicAuthActive: Scalars['Boolean']['output'];
   pages: Array<StoryPage>;
+  panelPosition: Position;
   property?: Maybe<Property>;
   propertyId: Scalars['ID']['output'];
+  publicDescription: Scalars['String']['output'];
+  publicImage: Scalars['String']['output'];
+  publicNoIndex: Scalars['Boolean']['output'];
+  publicTitle: Scalars['String']['output'];
   publishedAt?: Maybe<Scalars['DateTime']['output']>;
   publishmentStatus: PublishmentStatus;
   scene?: Maybe<Scene>;
@@ -2271,7 +2284,17 @@ export type UpdatePropertyValueInput = {
 };
 
 export type UpdateStoryInput = {
+  alias?: InputMaybe<Scalars['String']['input']>;
+  basicAuthPassword?: InputMaybe<Scalars['String']['input']>;
+  basicAuthUsername?: InputMaybe<Scalars['String']['input']>;
+  deletePublicImage?: InputMaybe<Scalars['Boolean']['input']>;
   index?: InputMaybe<Scalars['Int']['input']>;
+  isBasicAuthActive?: InputMaybe<Scalars['Boolean']['input']>;
+  panelPosition?: InputMaybe<Position>;
+  publicDescription?: InputMaybe<Scalars['String']['input']>;
+  publicImage?: InputMaybe<Scalars['String']['input']>;
+  publicNoIndex?: InputMaybe<Scalars['Boolean']['input']>;
+  publicTitle?: InputMaybe<Scalars['String']['input']>;
   sceneId: Scalars['ID']['input'];
   storyId: Scalars['ID']['input'];
   title?: InputMaybe<Scalars['String']['input']>;