diff --git a/src/components/@shared/AssetType/index.stories.tsx b/src/components/@shared/AssetType/index.stories.tsx
new file mode 100644
index 000000000..8111ffc03
--- /dev/null
+++ b/src/components/@shared/AssetType/index.stories.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import AssetType, { AssetTypeProps } from '@shared/AssetType'
+
+export default {
+  title: 'Component/@shared/AssetType',
+  component: AssetType
+} as ComponentMeta<typeof AssetType>
+
+const Template: ComponentStory<typeof AssetType> = (args: AssetTypeProps) => (
+  <AssetType {...args} />
+)
+
+interface Props {
+  args: AssetTypeProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  type: 'compute',
+  accessType: 'access'
+}
diff --git a/src/components/@shared/AssetType/index.tsx b/src/components/@shared/AssetType/index.tsx
index b7a356620..af780fba5 100644
--- a/src/components/@shared/AssetType/index.tsx
+++ b/src/components/@shared/AssetType/index.tsx
@@ -7,15 +7,17 @@ import Lock from '@images/lock.svg'
 
 const cx = classNames.bind(styles)
 
+export interface AssetTypeProps {
+  type: string
+  accessType: string
+  className?: string
+}
+
 export default function AssetType({
   type,
   accessType,
   className
-}: {
-  type: string
-  accessType: string
-  className?: string
-}): ReactElement {
+}: AssetTypeProps): ReactElement {
   const styleClasses = cx({
     [className]: className
   })
diff --git a/src/components/@shared/ButtonBuy/index.stories.tsx b/src/components/@shared/ButtonBuy/index.stories.tsx
new file mode 100644
index 000000000..5e3662e87
--- /dev/null
+++ b/src/components/@shared/ButtonBuy/index.stories.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import ButtonBuy, { ButtonBuyProps } from '@shared/ButtonBuy'
+
+export default {
+  title: 'Component/@shared/ButtonBuy',
+  component: ButtonBuy
+} as ComponentMeta<typeof ButtonBuy>
+
+const Template: ComponentStory<typeof ButtonBuy> = (args: ButtonBuyProps) => (
+  <ButtonBuy {...args} />
+)
+
+interface Props {
+  args: ButtonBuyProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  action: 'compute',
+  disabled: false,
+  hasPreviousOrder: true,
+  hasDatatoken: true,
+  dtSymbol: 'TOPLEN-30',
+  dtBalance: '10',
+  datasetLowPoolLiquidity: true,
+  assetType: 'dataset',
+  assetTimeout: '1 day',
+  isConsumable: true,
+  consumableFeedback: 'ok',
+  isBalanceSufficient: true
+}
+
+export const WithType = Template.bind({})
+WithType.args = {
+  ...Default.args,
+  type: 'submit'
+}
diff --git a/src/components/@shared/ButtonBuy/index.tsx b/src/components/@shared/ButtonBuy/index.tsx
index 2cbf4bf00..cde6ede59 100644
--- a/src/components/@shared/ButtonBuy/index.tsx
+++ b/src/components/@shared/ButtonBuy/index.tsx
@@ -3,7 +3,7 @@ import Button from '../atoms/Button'
 import styles from './index.module.css'
 import Loader from '../atoms/Loader'
 
-interface ButtonBuyProps {
+export interface ButtonBuyProps {
   action: 'download' | 'compute'
   disabled: boolean
   hasPreviousOrder: boolean
diff --git a/src/components/@shared/ExplorerLink/index.stories.tsx b/src/components/@shared/ExplorerLink/index.stories.tsx
new file mode 100644
index 000000000..a1bf4532e
--- /dev/null
+++ b/src/components/@shared/ExplorerLink/index.stories.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import ExplorerLink, { ExplorerLinkProps } from '@shared/ExplorerLink'
+
+export default {
+  title: 'Component/@shared/ExplorerLink',
+  component: ExplorerLink
+} as ComponentMeta<typeof ExplorerLink>
+
+const Template: ComponentStory<typeof ExplorerLink> = (
+  args: ExplorerLinkProps
+) => <ExplorerLink {...args} />
+
+interface Props {
+  args: ExplorerLinkProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  networkId: 1008,
+  path: 'https://example.com',
+  children: <p>Explorer link</p>
+}
diff --git a/src/components/@shared/ExplorerLink/index.tsx b/src/components/@shared/ExplorerLink/index.tsx
index f68012a29..57dd0650b 100644
--- a/src/components/@shared/ExplorerLink/index.tsx
+++ b/src/components/@shared/ExplorerLink/index.tsx
@@ -7,17 +7,19 @@ import { getOceanConfig } from '@utils/ocean'
 
 const cx = classNames.bind(styles)
 
+export interface ExplorerLinkProps {
+  networkId: number
+  path: string
+  children: ReactNode
+  className?: string
+}
+
 export default function ExplorerLink({
   networkId,
   path,
   children,
   className
-}: {
-  networkId: number
-  path: string
-  children: ReactNode
-  className?: string
-}): ReactElement {
+}: ExplorerLinkProps): ReactElement {
   const [url, setUrl] = useState<string>()
   const [oceanConfig, setOceanConfig] = useState<Config>()
   const styleClasses = cx({