diff --git a/src/components/DataTable/DataTable.stories.mdx b/src/components/DataTable/DataTable.stories.mdx
new file mode 100644
index 000000000..433b6ae5d
--- /dev/null
+++ b/src/components/DataTable/DataTable.stories.mdx
@@ -0,0 +1,352 @@
+import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
+import DataTable from "./DataTable";
+import Button from "../Button";
+import { data } from "./data";
+
+<Meta
+  title="Components/Data Display/DataTable"
+  component={DataTable}
+  parameters={{
+    docs: { source: { type: "code" } },
+  }}
+/>
+
+# DataTable
+
+<ArgsTable of={DataTable} />
+
+## Samples
+
+### Basic
+
+<Canvas>
+  <Story name="basic" args={{}}>
+    {(args) => (
+      <DataTable
+        data={data.slice(0, 4)}
+        columns={[
+          {
+            name: "ID",
+            selector: (data) => data.id,
+          },
+          {
+            name: "Impression",
+            selector: (data) => data.imp,
+          },
+          {
+            name: "Created at",
+            selector: (data) => data.created_at,
+          },
+        ]}
+        {...args}
+      />
+    )}
+  </Story>
+</Canvas>
+
+### With vertical line
+
+<Canvas>
+  <Story name="with vertical line" args={{}}>
+    {(args) => (
+      <DataTable
+        enableRuledLine={true}
+        data={data.slice(0, 4)}
+        columns={[
+          {
+            name: "ID",
+            selector: (data) => data.id,
+          },
+          {
+            name: "Impression",
+            selector: (data) => data.imp,
+          },
+          {
+            name: "Created at",
+            selector: (data) => data.created_at,
+          },
+        ]}
+        {...args}
+      />
+    )}
+  </Story>
+</Canvas>
+
+### With pagination
+
+<Canvas>
+  <Story name="with pagination" args={{}}>
+    {(args) => (
+      <DataTable
+        data={data}
+        per={5}
+        enablePagination={true}
+        columns={[
+          {
+            name: "ID",
+            selector: (data) => data.id,
+            sortable: true,
+          },
+          {
+            name: "Impression",
+            selector: (data) => data.imp,
+            sortable: true,
+          },
+        ]}
+        {...args}
+      />
+    )}
+  </Story>
+</Canvas>
+
+### With sticky header
+
+<Canvas>
+  <Story name="with sticky header" args={{ tableMaxHeight: "300px" }}>
+    {(args) => (
+      <DataTable
+        tableMaxHeight="300px"
+        data={data}
+        columns={[
+          {
+            name: "ID",
+            selector: (data) => data.id,
+            sortable: true,
+          },
+          {
+            name: "Impression",
+            selector: (data) => data.imp,
+            sortable: true,
+          },
+        ]}
+        {...args}
+      />
+    )}
+  </Story>
+</Canvas>
+
+### WithTabs
+
+<Canvas>
+  <Story name="with tabs" args={{}}>
+    {(args) => (
+      <DataTable
+        enablePagination={true}
+        per={5}
+        tabs={[
+          {
+            label: "All",
+            filter: (data) => data,
+          },
+          {
+            label: "imp odd",
+            filter: (data) => data.filter((item) => item.imp % 2 !== 0),
+          },
+          {
+            label: "imp even",
+            filter: (data) => data.filter((item) => item.imp % 2 === 0),
+          },
+          {
+            label: "empty",
+            filter: () => [],
+          },
+        ]}
+        data={data}
+        columns={[
+          {
+            name: "ID",
+            selector: (data) => data.id,
+          },
+          {
+            name: "Impression",
+            selector: (data) => data.imp,
+            sortable: true,
+          },
+          {
+            name: "Created at",
+            selector: (data) => data.created_at,
+            sortable: true,
+          },
+        ]}
+        {...args}
+      />
+    )}
+  </Story>
+</Canvas>
+
+### Selectable with checkbox
+
+<Canvas>
+  <Story name="selectable with checkbox" args={{}}>
+    {(args) => {
+      const [selectedRows, setSelectedRows] = React.useState([]);
+      const handleClick = () => {
+        alert(selectedRows.join(","));
+      };
+      return (
+        <>
+          <Button onClick={handleClick}>Show selected Items</Button>
+          <DataTable
+            data={data.slice(0, 4)}
+            columns={[
+              {
+                name: "ID",
+                selector: (data) => data.id,
+              },
+              {
+                name: "Impression",
+                selector: (data) => data.imp,
+                sortable: true,
+              },
+              {
+                name: "Created at",
+                selector: (data) => data.created_at,
+                sortable: true,
+              },
+            ]}
+            onSelectRowsChange={setSelectedRows}
+            {...args}
+          />
+        </>
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Selectable with radio button
+
+<Canvas>
+  <Story name="selectable with radio button" args={{}}>
+    {(args) => {
+      const [selectedRow, setSelectedRow] = React.useState();
+      const handleClick = () => {
+        alert(selectedRow.join(","));
+      };
+      return (
+        <>
+          <Button onClick={handleClick}>Show selected Items</Button>
+          <DataTable
+            data={data.slice(0, 4)}
+            columns={[
+              {
+                name: "ID",
+                selector: (data) => data.id,
+              },
+              {
+                name: "Impression",
+                selector: (data) => data.imp,
+                sortable: true,
+              },
+              {
+                name: "Created at",
+                selector: (data) => data.created_at,
+                sortable: true,
+              },
+            ]}
+            onRadioChange={setSelectedRow}
+            {...args}
+          />
+        </>
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Custom cell
+
+<Canvas>
+  <Story name="custom cell" args={{}}>
+    {(args) => (
+      <DataTable
+        data={data.slice(0, 4)}
+        columns={[
+          {
+            name: "ID",
+            selector: (data) => data.id,
+            sortable: true,
+          },
+          {
+            name: "Impression",
+            selector: (data) => data.imp,
+            renderCell: (data) => (
+              <div style={{ color: "red" }}>{data.imp}</div>
+            ),
+            sortable: true,
+          },
+        ]}
+        {...args}
+      />
+    )}
+  </Story>
+</Canvas>
+
+### With row span
+
+<Canvas>
+  <Story name="with row span" args={{}}>
+    {(args) => {
+      const [selectedRows, setSelectedRows] = React.useState([]);
+      const handleClick = () => {
+        alert(selectedRows.join(","));
+      };
+      // MEMO: Need to sort data yourself.
+      const sampleDataWithDuplicateId = [
+        { id: 1, name: "2name", count: 8 },
+        { id: 1, name: "2name", count: 4 },
+        { id: 1, name: "2name", count: 3 },
+        { id: 2, name: "2name", count: 8 },
+        { id: 3, name: "3name", count: 7 },
+        { id: 5, name: "5name", count: 5 },
+      ];
+      return (
+        <>
+          <Button onClick={handleClick}>Show selected items</Button>
+          <DataTable
+            enableRuledLine={true}
+            data={sampleDataWithDuplicateId}
+            columns={[
+              {
+                name: "ID",
+                selector: (data) => data.id,
+                enableMergeCell: true,
+              },
+              {
+                name: "name",
+                selector: (data) => data.name,
+                sortable: true,
+                enableMergeCell: true,
+              },
+              {
+                name: "count",
+                selector: (data) => data.count,
+                // MEMO: Cannot use sort when using "enableMergeCall"
+                sortable: true,
+              },
+            ]}
+            onSelectRowsChange={setSelectedRows}
+            {...args}
+          />
+        </>
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Empty
+
+<Canvas>
+  <Story name="empty" args={{}}>
+    {(args) => (
+      <DataTable
+        data={[]}
+        columns={[
+          {
+            name: "ID",
+            selector: (data) => data.id,
+          },
+        ]}
+        {...args}
+      />
+    )}
+  </Story>
+</Canvas>
diff --git a/src/components/DataTable/DataTable.stories.tsx b/src/components/DataTable/DataTable.stories.tsx
deleted file mode 100644
index 2b1856b32..000000000
--- a/src/components/DataTable/DataTable.stories.tsx
+++ /dev/null
@@ -1,484 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import DataTable from "./";
-import Button from "../Button";
-import Flex from "../Flex";
-import Spacer from "../Spacer";
-import Icon from "../Icon";
-import TextField from "../TextField";
-import Typography from "../Typography";
-import ActionButton from "../ActionButton";
-import { data } from "./data";
-import { Column } from "./DataTable";
-import { useTheme } from "../../themes/useTheme";
-import { select, boolean, text } from "@storybook/addon-knobs";
-import FloatingTip from "../FloatingTip";
-
-export default {
-  title: "Components/Data Display/DataTable",
-  component: DataTable,
-  parameters: {
-    docs: { page: null },
-  },
-};
-
-const Container = styled.div`
-  padding: ${({ theme }) => theme.spacing * 3}px;
-  background-color: ${({ theme }) => theme.palette.background.default};
-`;
-
-const Content = styled.div`
-  width: 300px;
-`;
-
-type SampleObject = {
-  id: number;
-  name: string;
-  count: number;
-};
-
-const sampleData: SampleObject[] = [
-  { id: 1, name: "1name", count: 4 },
-  { id: 2, name: "2name", count: 8 },
-  { id: 3, name: "3name", count: 7 },
-  { id: 4, name: "4name", count: 6 },
-  { id: 5, name: "5name", count: 5 },
-  { id: 6, name: "6name", count: 4 },
-  { id: 7, name: "7name", count: 3 },
-  { id: 8, name: "8name", count: 2 },
-  { id: 9, name: "9name", count: 1 },
-  { id: 10, name: "9name", count: 1 },
-  { id: 11, name: "9name", count: 2 },
-  { id: 12, name: "9name", count: 2 },
-  { id: 13, name: "9name", count: 3 },
-  { id: 14, name: "9name", count: 3 },
-];
-
-export const Overview = () => {
-  const verticalSpacing = select(
-    "VerticalSpacing",
-    {
-      Small: "small",
-      Medium: "medium",
-      Large: "large",
-    },
-    "medium",
-  );
-  const fullWidth = boolean("FullWidth", false);
-  const tableMaxHeight = text("TableMaxHeight", "none");
-  return (
-    <Container>
-      <DataTable
-        data={sampleData}
-        defaultSortField="名前"
-        defaultSortOrder="desc"
-        verticalSpacing={verticalSpacing}
-        fullWidth={fullWidth}
-        tableMaxHeight={tableMaxHeight}
-        columns={[
-          {
-            name: "ID",
-            selector: (data) => data.id,
-          },
-          {
-            name: "名前",
-            selector: (data) => data.name,
-            sortable: true,
-          },
-          {
-            name: "カウント",
-            selector: (data) => data.count,
-            sortable: true,
-            align: "right",
-          },
-        ]}
-      />
-    </Container>
-  );
-};
-
-export const WithRowSpan = () => {
-  const [selectedRows, setSelectedRows] = React.useState<number[]>([]);
-  const handleClick = () => {
-    alert(selectedRows.join(","));
-  };
-  // MEMO: Need to sort data yourself.
-  const sampleDataWithDuplicateId: SampleObject[] = [
-    { id: 1, name: "1name", count: 9 },
-    { id: 1, name: "1name", count: 3 },
-    { id: 1, name: "1name", count: 4 },
-    { id: 1, name: "2name", count: 9 },
-    { id: 1, name: "2name", count: 8 },
-    { id: 1, name: "2name", count: 4 },
-    { id: 1, name: "2name", count: 3 },
-    { id: 2, name: "2name", count: 8 },
-    { id: 3, name: "3name", count: 7 },
-    { id: 4, name: "4name", count: 6 },
-    { id: 5, name: "5name", count: 5 },
-    { id: 6, name: "6name", count: 4 },
-  ];
-  return (
-    <Container>
-      <Button onClick={handleClick}>選択したアイテムを表示</Button>
-      <DataTable
-        enableRuledLine={true}
-        data={sampleDataWithDuplicateId}
-        defaultSortField="名前"
-        defaultSortOrder="desc"
-        columns={[
-          {
-            name: "ID",
-            selector: (data) => data.id,
-          },
-          {
-            name: "名前",
-            selector: (data) => data.name,
-            enableMergeCell: true,
-            sortable: true,
-          },
-          {
-            name: "カウント",
-            selector: (data) => data.count,
-            // MEMO: Cannot use sort when using "enableMergeCall"
-            sortable: true,
-            align: "right",
-          },
-        ]}
-        onSelectRowsChange={setSelectedRows}
-      />
-    </Container>
-  );
-};
-
-export const WithPagination = () => (
-  <Container>
-    <DataTable
-      enablePagination={true}
-      data={data}
-      columns={[
-        {
-          name: "ID",
-          selector: (data) => data.id,
-          sortable: true,
-        },
-        {
-          name: "imp",
-          selector: (data) => data.imp,
-          sortable: true,
-        },
-      ]}
-    />
-  </Container>
-);
-
-export const WithStickyHeader = () => (
-  <Container>
-    <DataTable
-      tableMaxHeight="300px"
-      data={data}
-      columns={[
-        {
-          name: "ID",
-          selector: (data) => data.id,
-          sortable: true,
-        },
-        {
-          name: "imp",
-          selector: (data) => data.imp,
-          sortable: true,
-        },
-      ]}
-    />
-  </Container>
-);
-
-export const WithTabs = () => (
-  <Container>
-    <DataTable
-      enablePagination={true}
-      tableMaxHeight="500px"
-      horizontalScrollable={true}
-      tabs={[
-        {
-          label: "全て",
-          filter: (data) => data,
-        },
-        {
-          label: "1~4",
-          filter: (data) => data.filter((item) => item.id < 5),
-        },
-        {
-          label: "5~",
-          filter: (data) => data.filter((item) => item.id >= 5),
-        },
-        {
-          label: "empty data",
-          filter: () => [],
-        },
-      ]}
-      data={sampleData}
-      columns={[
-        {
-          name: "ID",
-          selector: (data) => data.id,
-        },
-        {
-          name: "名前",
-          selector: (data) => data.name,
-          sortable: true,
-        },
-        {
-          name: "カウント",
-          selector: (data) => data.count,
-          sortable: true,
-          align: "right",
-        },
-        ...[...Array(10)].map((_, i) => ({
-          name: `サンプル列${i}`,
-          selector: () => `${i}`,
-        })),
-      ]}
-    />
-  </Container>
-);
-
-export const WithSearch: React.FunctionComponent = () => {
-  const [searchText, setSearchText] = React.useState("");
-  const searchedItems = sampleData.filter(
-    (item) => item.name && item.name.includes(searchText),
-  );
-  const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchText(event.target.value);
-  };
-  return (
-    <Container>
-      <TextField placeholder="名前で絞り込む" onChange={handleInput} />
-      <DataTable
-        enablePagination={true}
-        data={searchedItems}
-        columns={[
-          {
-            name: "ID",
-            selector: (data) => data.id,
-            sortable: true,
-          },
-          {
-            name: "名前",
-            selector: (data) => data.name,
-            sortable: true,
-          },
-        ]}
-      />
-    </Container>
-  );
-};
-
-export const SelectableRows: React.FunctionComponent = () => {
-  const [selectedRows, setSelectedRows] = React.useState<number[]>([]);
-  const handleClick = () => {
-    alert(selectedRows.join(","));
-  };
-  return (
-    <Container>
-      <Button onClick={handleClick}>選択したアイテムを表示</Button>
-      <DataTable
-        data={sampleData}
-        tabs={[
-          {
-            label: "全て",
-            filter: (data) => data,
-          },
-          {
-            label: "1~4",
-            filter: (data) => data.filter((item) => item.id < 5),
-          },
-          {
-            label: "5~",
-            filter: (data) => data.filter((item) => item.id >= 5),
-          },
-          {
-            label: "empty",
-            filter: () => [],
-          },
-        ]}
-        columns={[
-          {
-            name: "ID",
-            selector: (data) => data.id,
-            sortable: true,
-          },
-          {
-            name: "名前",
-            selector: (data) => data.name,
-            sortable: true,
-          },
-        ]}
-        onSelectRowsChange={setSelectedRows}
-      />
-    </Container>
-  );
-};
-
-export const SelectableRow: React.FunctionComponent = () => {
-  const [selectedRow, setSelectedRow] = React.useState<number>();
-  const handleClick = () => {
-    alert(selectedRow);
-  };
-  return (
-    <Container>
-      <Button onClick={handleClick}>選択したアイテムを表示</Button>
-      <DataTable
-        data={sampleData}
-        columns={[
-          {
-            name: "ID",
-            selector: (data) => data.id,
-            sortable: true,
-          },
-          {
-            name: "名前",
-            selector: (data) => data.name,
-            sortable: true,
-          },
-        ]}
-        onRadioChange={setSelectedRow}
-      />
-    </Container>
-  );
-};
-
-export const CustomCell: React.FunctionComponent = () => {
-  const theme = useTheme();
-
-  const [
-    iconWrapperElement,
-    setIconWrapperElement,
-  ] = React.useState<HTMLDivElement | null>(null);
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const handleIsOpen = (isOpen: boolean) => () => {
-    setIsOpen(isOpen);
-  };
-
-  const columns: Column<{ id: number; imp: number }>[] = React.useMemo(
-    () => [
-      {
-        name: "ID",
-        selector: (data) => data.id,
-        sortable: true,
-      },
-      {
-        name: "imp",
-        selector: (data) => data.imp,
-        sortable: true,
-        renderCell: (data) => (
-          <Flex display="flex" alignItems="center">
-            <Spacer pr={0.5}>
-              <Icon name="folder" color={theme.palette.primary.main} />
-            </Spacer>
-            <Typography>{data.imp}</Typography>
-          </Flex>
-        ),
-      },
-      {
-        name: "操作",
-        selector: (data) => data.id,
-        headerCell: (
-          <>
-            <Flex display="flex" alignItems="center">
-              操作
-              <Spacer pl={1} />
-              <div ref={setIconWrapperElement} onClick={handleIsOpen(true)}>
-                <Icon name="question" type="fill" />
-              </div>
-            </Flex>
-            <FloatingTip
-              baseElement={iconWrapperElement}
-              isOpen={isOpen}
-              positionPriority={["left"]}
-              onClose={handleIsOpen(false)}
-            >
-              <Content>
-                <Typography size="sm" lineHeight="1.7">
-                  こんな感じで入れられます
-                </Typography>
-              </Content>
-            </FloatingTip>
-          </>
-        ),
-        renderCell: () => (
-          <Flex display="flex" alignItems="center">
-            <Spacer pr={0.5}>
-              <ActionButton icon="pencil">変更</ActionButton>
-            </Spacer>
-            <ActionButton icon="delete_bin">削除</ActionButton>
-          </Flex>
-        ),
-      },
-    ],
-    [isOpen, iconWrapperElement, theme.palette.primary.main],
-  );
-  return (
-    <Container>
-      <DataTable data={data} enablePagination={true} columns={columns} />
-    </Container>
-  );
-};
-
-export const WithenableRuledLine = () => (
-  <Container>
-    <DataTable
-      data={sampleData}
-      defaultSortField="名前"
-      defaultSortOrder="desc"
-      enableRuledLine={true}
-      columns={[
-        {
-          name: "ID",
-          selector: (data) => data.id,
-        },
-        {
-          name: "名前",
-          selector: (data) => data.name,
-          sortable: true,
-        },
-        {
-          name: "カウント",
-          selector: (data) => data.count,
-          sortable: true,
-        },
-      ]}
-    />
-  </Container>
-);
-
-export const WithEmptyTable = () => {
-  const columns: Column<{ id: number; name: string; count: number }>[] = [
-    {
-      name: "ID",
-      selector: (data) => data.id,
-    },
-    {
-      name: "名前",
-      selector: (data) => data.name,
-      sortable: true,
-    },
-    {
-      name: "カウント",
-      selector: (data) => data.count,
-      sortable: true,
-      align: "right",
-    },
-  ];
-
-  return (
-    <Container>
-      <DataTable
-        data={[]}
-        defaultSortField="名前"
-        defaultSortOrder="desc"
-        columns={columns}
-        itemEmptyProps={{ title: "アイテムが存在しません。" }}
-      />
-    </Container>
-  );
-};
diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index f6894ac14..36bbec2a1 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -144,19 +144,65 @@ type Tab<T> = {
 };
 
 export type DataTableProps<T> = {
+  /**
+   * Array of some object that has `id: number` property.
+   */
   data: T[];
+  /**
+   * Define column of table. Please refer to the samples below.
+   */
   columns: Column<T>[];
   enablePagination?: boolean;
+  /**
+   * Enable to use checkbox in table.
+   * The argument `rows` is array of `id: number` defined in `data` props.
+   * **Don't use with `onRadioChange={true}`**
+   */
   onSelectRowsChange?: (rows: number[]) => void;
+  /**
+   * Enable to use radio button in table.
+   * The argument `radio` is `id: number` defined in `data` props.
+   * **Don't use with `onSelectRowsChange={true}`**
+   */
   onRadioChange?: (radio: number) => void;
+  /**
+   * Reset selected checkboxes when this props changed to `true`.
+   */
   clearSelectedRows?: boolean;
+  /**
+   * Define tabs of table. Please refer to the samples below.
+   */
   tabs?: Tab<T>[];
+  /**
+   * props of [ItemEnpty](/?path=/docs/components-utils-itemempty)
+   */
   itemEmptyProps?: ItemEmptyProps;
-  per?: number; // perが指定されている場合、初期値がそれに強制されます
+  /**
+   * Number of rows per page when `enablePagination={true}`.
+   * If `undefined` it, `dlc` of localStorage is referenced.
+   */
+  per?: number;
+  /**
+   * If defined `name: string` of `Column` it, enable to specify default sort Field.
+   * **Please use `sortable: true` in `columns` props.**
+   */
   defaultSortField?: string;
+  /**
+   * Specify default sort order.
+   * **Please use `sortable: true` in `columns` props.**
+   */
   defaultSortOrder?: "desc" | "asc";
+  /**
+   * Add verticale line in table.
+   */
   enableRuledLine?: boolean;
+  /**
+   * Define vertical padding of rows.
+   */
   verticalSpacing?: VerticalSpacing;
+  /**
+   * If `true` it, hidden both side border.
+   */
   fullWidth?: boolean;
   tableMaxHeight?: string;
   horizontalScrollable?: boolean;
diff --git a/src/components/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/components/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
index 2d71fc2b9..76ab8c111 100644
--- a/src/components/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
+++ b/src/components/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`DataTable component testing DataTable 1`] = `
     class="sc-bdfBwQ fVMqjX"
   >
     <div
-      class="sc-gsTCUz brDJp"
+      class="sc-gsTCUz jYMVSw"
     >
       <div
         class="sc-dlfnbm kBeuhl"
diff --git a/src/components/DataTable/styled.ts b/src/components/DataTable/styled.ts
index ed2669c5a..b77c9be0f 100644
--- a/src/components/DataTable/styled.ts
+++ b/src/components/DataTable/styled.ts
@@ -9,6 +9,7 @@ export const BorderContainer = styled.div<{ fullWidth?: boolean }>`
   border: ${({ fullWidth, theme }) =>
     fullWidth ? "none" : `1px solid ${theme.palette.divider}`};
   border-top: 1px solid ${({ theme }) => theme.palette.divider};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
   border-radius: ${({ fullWidth, theme }) =>
     fullWidth ? "none" : `${theme.radius}px`};
 `;
diff --git a/src/components/Divider/Divider.stories.mdx b/src/components/Divider/Divider.stories.mdx
new file mode 100644
index 000000000..10966d1a5
--- /dev/null
+++ b/src/components/Divider/Divider.stories.mdx
@@ -0,0 +1,61 @@
+import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
+import Divider from "./Divider";
+
+<Meta title="Components/Data Display/Divider" component={Divider} />
+
+# Divider
+
+`<Divider />` is wrapper of `<hr />` tag that separate content into clear groups.
+
+<ArgsTable of={Divider} />
+
+## Samples
+
+### Normal
+
+<Canvas>
+  <Story name="normal" args={{}}>
+    {(args) => <Divider {...args} />}
+  </Story>
+</Canvas>
+
+### With space
+
+It can define margin and padding like [`<Spacer />`](/?path=/docs/components-layout-spacer--example).
+
+<Canvas>
+  <Story name="with space" args={{ m: 3, p: 1 }}>
+    {(args) => <Divider {...args} />}
+  </Story>
+</Canvas>
+
+### Override Color
+
+<Canvas>
+  <Story name="override color" args={{ color: "red" }}>
+    {(args) => <Divider {...args} />}
+  </Story>
+</Canvas>
+
+### vertical
+
+<Canvas>
+  <Story
+    name="vertical"
+    args={{ orientation: "vertical" }}
+    parameters={{ docs: { source: { type: "code" } } }}
+  >
+    {(args) => (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100px",
+        }}
+      >
+        <Divider orientation="vertical" {...args} />
+      </div>
+    )}
+  </Story>
+</Canvas>
diff --git a/src/components/Divider/Divider.stories.tsx b/src/components/Divider/Divider.stories.tsx
deleted file mode 100644
index 03dbf8f21..000000000
--- a/src/components/Divider/Divider.stories.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as React from "react";
-import styled from "styled-components";
-import Divider from ".";
-import Typography from "../Typography";
-import Spacer from "../Spacer";
-import Flex from "../Flex";
-
-const Container = styled.div`
-  padding: ${({ theme }) => theme.spacing * 3}px;
-  background-color: ${({ theme }) => theme.palette.background.dark};
-`;
-
-const RowContainer = styled.div`
-  margin: ${({ theme }) => theme.spacing * 3}px;
-  padding: ${({ theme }) => theme.spacing * 3}px 0;
-  background-color: ${({ theme }) => theme.palette.background.default};
-`;
-
-export default {
-  title: "Components/Data Display/Divider",
-  component: Divider,
-  parameters: {
-    docs: { page: null },
-  },
-};
-
-export const Overview = () => (
-  <Container>
-    <Typography weight="bold" size="xxl">
-      Normal
-    </Typography>
-    <RowContainer>
-      <Divider />
-    </RowContainer>
-    <Typography weight="bold" size="xxl">
-      With Space
-    </Typography>
-    <RowContainer>
-      <Divider m={3} />
-      <Spacer pt={2} pl={2}>
-        <Typography size="md" weight="bold">
-          ＊It can define margin and padding like &quot;Spacer&quot; component.
-        </Typography>
-      </Spacer>
-    </RowContainer>
-    <Typography weight="bold" size="xxl">
-      Override Color
-    </Typography>
-    <RowContainer>
-      <Flex display="flex" flexDirection="column" justifyContent="center">
-        <Spacer pt={3} />
-        <Divider color="red" m={3} />
-        <Spacer pt={3} />
-      </Flex>
-    </RowContainer>
-    <Typography weight="bold" size="xxl">
-      Vertical
-    </Typography>
-    <RowContainer>
-      <Flex display="flex" justifyContent="center" alignItems="center">
-        <div style={{ height: "300px" }} />
-        <Divider orientation="vertical" />
-        <div style={{ height: "300px" }} />
-      </Flex>
-    </RowContainer>
-  </Container>
-);
diff --git a/src/components/FixedPanel/FixedPanel.stories.mdx b/src/components/FixedPanel/FixedPanel.stories.mdx
index 564e2f216..ffefacb4d 100644
--- a/src/components/FixedPanel/FixedPanel.stories.mdx
+++ b/src/components/FixedPanel/FixedPanel.stories.mdx
@@ -35,13 +35,13 @@ Usage example is included in &rdquo;Canvas&rdquo; Tab at header.
     React.useEffect(() => {
       if (!buttonContainerRef.current) return;
       const observer = new IntersectionObserver((entries) => {
-        setIsOpen(!entries[0].isIntersecting);
+        if (args.isOpen) setIsOpen(!entries[0].isIntersecting);
       });
       observer.observe(buttonContainerRef.current);
       return () => {
         observer.disconnect();
       };
-    }, [buttonContainerRef]);
+    }, [buttonContainerRef, args]);
     const handleClick = () => {
       setIsOpen(!isOpen);
     };