diff --git a/packages/component/.storybook/preview.js b/packages/component/.storybook/preview.js
index d3914580a7..e574a19ca1 100644
--- a/packages/component/.storybook/preview.js
+++ b/packages/component/.storybook/preview.js
@@ -1,3 +1,5 @@
+import { getLightTheme, ThemeProvider } from '../src';
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
@@ -7,3 +9,15 @@ export const parameters = {
     },
   },
 };
+
+const lightTheme = getLightTheme('page');
+
+export const decorators = [
+  Story => {
+    return (
+      <ThemeProvider theme={lightTheme}>
+        <Story />
+      </ThemeProvider>
+    );
+  },
+];
diff --git a/packages/component/src/stories/Breadcrumbs.stories.tsx b/packages/component/src/stories/Breadcrumbs.stories.tsx
index 38334b1793..6cc0ba07d4 100644
--- a/packages/component/src/stories/Breadcrumbs.stories.tsx
+++ b/packages/component/src/stories/Breadcrumbs.stories.tsx
@@ -1,19 +1,25 @@
-import React, { useMemo } from 'react';
+/* deepscan-disable USELESS_ARROW_FUNC_BIND */
+import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import { Breadcrumbs, getLightTheme, ThemeProvider } from '..';
+import { Breadcrumbs } from '..';
+import { Link, Typography } from '@mui/material';
 
 export default {
   title: 'AFFiNE/Breadcrumbs',
   component: Breadcrumbs,
 } as Meta;
 
-const Template: Story = args => (
-  <ThemeProvider theme={useMemo(() => getLightTheme('page'), [])}>
-    <Breadcrumbs {...args} />
-  </ThemeProvider>
-);
+const Template: Story = args => <Breadcrumbs {...args} />;
 
-export const Primary = Template.bind({});
+export const Primary = Template.bind(undefined);
 Primary.args = {
-  children: [<span>1</span>, <span>2</span>, <span>3</span>],
+  children: [
+    <Link underline="hover" color="inherit" href="/">
+      AFFiNE
+    </Link>,
+    <Link underline="hover" color="inherit" href="/Docs/">
+      Docs
+    </Link>,
+    <Typography color="text.primary">Introduction</Typography>,
+  ],
 };
diff --git a/packages/component/src/stories/Button.stories.tsx b/packages/component/src/stories/Button.stories.tsx
index 9fc32156e1..7030f37128 100644
--- a/packages/component/src/stories/Button.stories.tsx
+++ b/packages/component/src/stories/Button.stories.tsx
@@ -1,20 +1,46 @@
-import React, { useMemo } from 'react';
+/* deepscan-disable USELESS_ARROW_FUNC_BIND */
+import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import { Button, getLightTheme, ThemeProvider } from '..';
+import { Button } from '..';
+import { ButtonProps } from '../ui/button/interface';
 
 export default {
   title: 'AFFiNE/Button',
   component: Button,
-} as Meta;
+  argTypes: {
+    hoverBackground: { control: 'color' },
+    hoverColor: { control: 'color' },
+  },
+} as Meta<ButtonProps>;
 
-const Template: Story = args => (
-  <ThemeProvider theme={useMemo(() => getLightTheme('page'), [])}>
-    <Button {...args} />
-  </ThemeProvider>
-);
+const Template: Story<ButtonProps> = args => <Button {...args} />;
 
-export const Primary = Template.bind({});
+export const Primary = Template.bind(undefined);
 Primary.args = {
   type: 'primary',
-  children: 'This is a button',
+  children: 'This is a primary button',
+};
+
+export const Default = Template.bind(undefined);
+Default.args = {
+  type: 'default',
+  children: 'This is a default button',
+};
+
+export const Light = Template.bind(undefined);
+Light.args = {
+  type: 'light',
+  children: 'This is a light button',
+};
+
+export const Warning = Template.bind(undefined);
+Warning.args = {
+  type: 'warning',
+  children: 'This is a warning button',
+};
+
+export const Danger = Template.bind(undefined);
+Danger.args = {
+  type: 'danger',
+  children: 'This is a danger button',
 };