diff --git a/src/components/@shared/ExplorerLink/index.stories.tsx b/src/components/@shared/ExplorerLink/index.stories.tsx
index a1bf4532e..bc9fac389 100644
--- a/src/components/@shared/ExplorerLink/index.stories.tsx
+++ b/src/components/@shared/ExplorerLink/index.stories.tsx
@@ -17,7 +17,7 @@ interface Props {
 
 export const Default: Props = Template.bind({})
 Default.args = {
-  networkId: 1008,
+  networkId: 1287,
   path: 'https://example.com',
   children: <p>Explorer link</p>
 }
diff --git a/src/components/@shared/FileIcon/index.stories.tsx b/src/components/@shared/FileIcon/index.stories.tsx
new file mode 100644
index 000000000..4c543125b
--- /dev/null
+++ b/src/components/@shared/FileIcon/index.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import FileIcon, { FileIconProps } from '@shared/FileIcon'
+import { FileMetadata } from '@oceanprotocol/lib'
+
+export default {
+  title: 'Component/@shared/FileIcon',
+  component: FileIcon
+} as ComponentMeta<typeof FileIcon>
+
+const Template: ComponentStory<typeof FileIcon> = (args: FileIconProps) => (
+  <FileIcon {...args} />
+)
+
+interface Props {
+  args: FileIconProps
+}
+
+const file = {
+  contentLength: '0',
+  contentType: 'text/html',
+  index: 0,
+  valid: true
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  file: file as FileMetadata
+}
diff --git a/src/components/@shared/FileIcon/index.tsx b/src/components/@shared/FileIcon/index.tsx
index 95429f6c5..1d5e3145b 100644
--- a/src/components/@shared/FileIcon/index.tsx
+++ b/src/components/@shared/FileIcon/index.tsx
@@ -8,6 +8,13 @@ import { FileMetadata } from '@oceanprotocol/lib'
 
 const cx = classNames.bind(styles)
 
+export interface FileIconProps {
+  file: FileMetadata
+  className?: string
+  small?: boolean
+  isLoading?: boolean
+}
+
 function LoaderArea() {
   return (
     <div className={styles.loaderWrap}>
@@ -21,12 +28,7 @@ export default function FileIcon({
   className,
   small,
   isLoading
-}: {
-  file: FileMetadata
-  className?: string
-  small?: boolean
-  isLoading?: boolean
-}): ReactElement {
+}: FileIconProps): ReactElement {
   const styleClasses = cx({
     file: true,
     small,