diff --git a/src/components/@shared/AccountList/index.module.css b/src/components/@shared/AccountList/index.module.css
new file mode 100644
index 000000000..4b04cc306
--- /dev/null
+++ b/src/components/@shared/AccountList/index.module.css
@@ -0,0 +1,11 @@
+.empty {
+  color: var(--color-secondary);
+  font-size: var(--font-size-small);
+  font-style: italic;
+}
+
+.loaderWrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/components/@shared/AccountList/index.stories.tsx b/src/components/@shared/AccountList/index.stories.tsx
new file mode 100644
index 000000000..f7183d256
--- /dev/null
+++ b/src/components/@shared/AccountList/index.stories.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import AccountList, { AccountListProps } from '@shared/AccountList'
+import * as config from '../../../../app.config'
+
+export default {
+  title: 'Component/@shared/AccountList',
+  component: AccountList
+} as ComponentMeta<typeof AccountList>
+
+const Template: ComponentStory<typeof AccountList> = (
+  args: AccountListProps
+) => <AccountList {...args} />
+
+interface Props {
+  args: AccountListProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  accounts: [
+    {
+      address: '0x00000000000000000000000000000000000000000',
+      nrSales: 25
+    },
+    {
+      address: '0x00000000000000000000000000000000000000000',
+      nrSales: 11
+    },
+    {
+      address: '0x00000000000000000000000000000000000000000',
+      nrSales: 5
+    }
+  ],
+  isLoading: false,
+  chainIds: config.chainIds
+}
diff --git a/src/components/@shared/AccountList/AccountList.tsx b/src/components/@shared/AccountList/index.tsx
similarity index 81%
rename from src/components/@shared/AccountList/AccountList.tsx
rename to src/components/@shared/AccountList/index.tsx
index bef2e323f..1ffa586ea 100644
--- a/src/components/@shared/AccountList/AccountList.tsx
+++ b/src/components/@shared/AccountList/index.tsx
@@ -1,9 +1,8 @@
 import React, { ReactElement } from 'react'
-import styles from './AssetList.module.css'
+import styles from './index.module.css'
 import classNames from 'classnames/bind'
 import Loader from '../atoms/Loader'
-import { useUserPreferences } from '@context/UserPreferences'
-import AccountTeaser from '@shared/AccountTeaser/AccountTeaser'
+import AccountTeaser from '@shared/AccountTeaser'
 
 const cx = classNames.bind(styles)
 
@@ -15,19 +14,19 @@ function LoaderArea() {
   )
 }
 
-declare type AccountListProps = {
+export interface AccountListProps {
   accounts: AccountTeaserVM[]
   isLoading: boolean
   className?: string
+  chainIds: number[]
 }
 
 export default function AccountList({
   accounts,
   isLoading,
-  className
+  className,
+  chainIds
 }: AccountListProps): ReactElement {
-  const { chainIds } = useUserPreferences()
-
   const styleClasses = cx({
     assetList: true,
     [className]: className
diff --git a/src/components/@shared/AccountTeaser/AccountTeaser.module.css b/src/components/@shared/AccountTeaser/index.module.css
similarity index 100%
rename from src/components/@shared/AccountTeaser/AccountTeaser.module.css
rename to src/components/@shared/AccountTeaser/index.module.css
diff --git a/src/components/@shared/AccountTeaser/index.stories.tsx b/src/components/@shared/AccountTeaser/index.stories.tsx
new file mode 100644
index 000000000..b5f21e618
--- /dev/null
+++ b/src/components/@shared/AccountTeaser/index.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import AccountTeaser, { AccountTeaserProps } from '@shared/AccountTeaser'
+
+export default {
+  title: 'Component/@shared/AccountTeaser',
+  component: AccountTeaser
+} as ComponentMeta<typeof AccountTeaser>
+
+const Template: ComponentStory<typeof AccountTeaser> = (
+  args: AccountTeaserProps
+) => <AccountTeaser {...args} />
+
+interface Props {
+  args: AccountTeaserProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  accountTeaserVM: {
+    address: '0x00000000000000000000000000000000000000000',
+    nrSales: 25
+  },
+  place: 1
+}
diff --git a/src/components/@shared/AccountTeaser/AccountTeaser.tsx b/src/components/@shared/AccountTeaser/index.tsx
similarity index 95%
rename from src/components/@shared/AccountTeaser/AccountTeaser.tsx
rename to src/components/@shared/AccountTeaser/index.tsx
index 7de6685c6..412d92126 100644
--- a/src/components/@shared/AccountTeaser/AccountTeaser.tsx
+++ b/src/components/@shared/AccountTeaser/index.tsx
@@ -1,13 +1,13 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import Dotdotdot from 'react-dotdotdot'
 import Link from 'next/link'
-import styles from './AccountTeaser.module.css'
+import styles from './index.module.css'
 import Blockies from '../atoms/Blockies'
 import { useCancelToken } from '@hooks/useCancelToken'
 import get3BoxProfile from '@utils/profile'
 import { accountTruncate } from '@utils/web3'
 
-declare type AccountTeaserProps = {
+export interface AccountTeaserProps {
   accountTeaserVM: AccountTeaserVM
   place?: number
 }
diff --git a/src/components/Home/PublishersWithMostSales.tsx b/src/components/Home/PublishersWithMostSales.tsx
index 94b495fd4..344f72849 100644
--- a/src/components/Home/PublishersWithMostSales.tsx
+++ b/src/components/Home/PublishersWithMostSales.tsx
@@ -1,5 +1,5 @@
 import { useUserPreferences } from '@context/UserPreferences'
-import AccountList from '@shared/AccountList/AccountList'
+import AccountList from '@shared/AccountList'
 import { getTopAssetsPublishers } from '@utils/subgraph'
 import React, { ReactElement, useEffect, useState } from 'react'
 import styles from './Home.module.css'
@@ -38,7 +38,7 @@ export default function PublishersWithMostSales({
   return (
     <section className={styles.section}>
       <h3>{title}</h3>
-      <AccountList accounts={result} isLoading={loading} />
+      <AccountList accounts={result} isLoading={loading} chainIds={chainIds} />
       {action && action}
     </section>
   )