diff --git a/src/@utils/nft.ts b/src/@utils/nft.ts
index 76ccd671c..d0756a7f4 100644
--- a/src/@utils/nft.ts
+++ b/src/@utils/nft.ts
@@ -26,7 +26,8 @@ function encodeSvg(svgString: string): string {
 }
 
 export function generateNftOptions(): NftOptions {
-  // @images/arrow.svg test
+  // TODO: crop image properly in the end as generated SVG waves are a super-wide image,
+  // and add a filled background deciding on either black or white.
   const image = renderStaticWaves()
   // const image = new XMLSerializer().serializeToString(waves)
   // const image = `<svg><path d="M0 10.4304L16.3396 10.4304L8.88727 17.6833L10.2401 19L20 9.5L10.2401 0L8.88727 1.31491L16.3396 8.56959L0 8.56959V10.4304Z" /></svg>`
@@ -52,6 +53,7 @@ export function generateNftCreateData(nftOptions: NftOptions): any {
     symbol: nftOptions.symbol,
     templateIndex: 1,
     // TODO: figure out if Buffer.from method is working in browser in final build
+    // as BTOA is deprecated.
     tokenURI: window?.btoa(JSON.stringify(nftOptions))
     // tokenURI: Buffer.from(JSON.stringify(nftOptions)).toString('base64') // should end up as data:application/json;base64
   }
diff --git a/src/components/@shared/AssetList/AssetComputeList.module.css b/src/components/@shared/AssetList/AssetComputeList.module.css
index 3cb3c406b..b2c0a385b 100644
--- a/src/components/@shared/AssetList/AssetComputeList.module.css
+++ b/src/components/@shared/AssetList/AssetComputeList.module.css
@@ -1,5 +1,5 @@
 .display {
-  composes: selection from '@shared/FormFields/AssetSelection.module.css';
+  composes: selection from '@shared/FormFields/AssetSelection/index.module.css';
 }
 
 .display [class*='loaderWrap'] {
@@ -7,14 +7,14 @@
 }
 
 .scroll {
-  composes: scroll from '@shared/FormFields/AssetSelection.module.css';
+  composes: scroll from '@shared/FormFields/AssetSelection/index.module.css';
   margin-top: 0;
   border-top: none;
   width: 100%;
 }
 
 .row {
-  composes: row from '@shared/FormFields/AssetSelection.module.css';
+  composes: row from '@shared/FormFields/AssetSelection/index.module.css';
 }
 
 .row:last-child {
@@ -35,7 +35,7 @@
 }
 
 .title {
-  composes: title from '@shared/FormFields/AssetSelection.module.css';
+  composes: title from '@shared/FormFields/AssetSelection/index.module.css';
 }
 
 .hover:hover {
@@ -43,7 +43,7 @@
 }
 
 .price {
-  composes: price from '@shared/FormFields/AssetSelection.module.css';
+  composes: price from '@shared/FormFields/AssetSelection/index.module.css';
 }
 
 .price [class*='symbol'] {
@@ -51,9 +51,9 @@
 }
 
 .did {
-  composes: did from '@shared/FormFields/AssetSelection.module.css';
+  composes: did from '@shared/FormFields/AssetSelection/index.module.css';
 }
 
 .empty {
-  composes: empty from '@shared/FormFields/AssetSelection.module.css';
+  composes: empty from '@shared/FormFields/AssetSelection/index.module.css';
 }
diff --git a/src/components/@shared/AssetList/AssetList.module.css b/src/components/@shared/AssetList/index.module.css
similarity index 100%
rename from src/components/@shared/AssetList/AssetList.module.css
rename to src/components/@shared/AssetList/index.module.css
diff --git a/src/components/@shared/AssetList/AssetList.tsx b/src/components/@shared/AssetList/index.tsx
similarity index 98%
rename from src/components/@shared/AssetList/AssetList.tsx
rename to src/components/@shared/AssetList/index.tsx
index e10401ea6..5a9fc8e12 100644
--- a/src/components/@shared/AssetList/AssetList.tsx
+++ b/src/components/@shared/AssetList/index.tsx
@@ -1,7 +1,7 @@
 import AssetTeaser from '@shared/AssetTeaser/AssetTeaser'
 import React, { useEffect, useState } from 'react'
 import Pagination from '@shared/Pagination'
-import styles from './AssetList.module.css'
+import styles from './index.module.css'
 import classNames from 'classnames/bind'
 import { getAssetsBestPrices, AssetListPrices } from '@utils/subgraph'
 import Loader from '@shared/atoms/Loader'
diff --git a/src/components/@shared/FormFields/AssetSelection.module.css b/src/components/@shared/FormFields/AssetSelection/index.module.css
similarity index 100%
rename from src/components/@shared/FormFields/AssetSelection.module.css
rename to src/components/@shared/FormFields/AssetSelection/index.module.css
diff --git a/src/components/@shared/FormFields/AssetSelection.tsx b/src/components/@shared/FormFields/AssetSelection/index.tsx
similarity index 98%
rename from src/components/@shared/FormFields/AssetSelection.tsx
rename to src/components/@shared/FormFields/AssetSelection/index.tsx
index 19950c2ed..e6cde8b3a 100644
--- a/src/components/@shared/FormFields/AssetSelection.tsx
+++ b/src/components/@shared/FormFields/AssetSelection/index.tsx
@@ -6,7 +6,7 @@ import PriceUnit from '@shared/Price/PriceUnit'
 import External from '@images/external.svg'
 import InputElement from '@shared/FormInput/InputElement'
 import Loader from '@shared/atoms/Loader'
-import styles from './AssetSelection.module.css'
+import styles from './index.module.css'
 
 const cx = classNames.bind(styles)
 
diff --git a/src/components/@shared/FormFields/BoxSelection.module.css b/src/components/@shared/FormFields/BoxSelection/index.module.css
similarity index 100%
rename from src/components/@shared/FormFields/BoxSelection.module.css
rename to src/components/@shared/FormFields/BoxSelection/index.module.css
diff --git a/src/components/@shared/FormFields/BoxSelection.tsx b/src/components/@shared/FormFields/BoxSelection/index.tsx
similarity index 95%
rename from src/components/@shared/FormFields/BoxSelection.tsx
rename to src/components/@shared/FormFields/BoxSelection/index.tsx
index 2e881f48f..7ddfea5ab 100644
--- a/src/components/@shared/FormFields/BoxSelection.tsx
+++ b/src/components/@shared/FormFields/BoxSelection/index.tsx
@@ -1,8 +1,7 @@
 import React, { ChangeEvent } from 'react'
 import classNames from 'classnames/bind'
 import Loader from '@shared/atoms/Loader'
-import styles from './BoxSelection.module.css'
-import { useField } from 'formik'
+import styles from './index.module.css'
 
 const cx = classNames.bind(styles)
 
diff --git a/src/components/@shared/FormFields/CustomProvider.tsx b/src/components/@shared/FormFields/Provider/index.tsx
similarity index 97%
rename from src/components/@shared/FormFields/CustomProvider.tsx
rename to src/components/@shared/FormFields/Provider/index.tsx
index 56413ad14..15639a147 100644
--- a/src/components/@shared/FormFields/CustomProvider.tsx
+++ b/src/components/@shared/FormFields/Provider/index.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement, useState } from 'react'
 import { useField } from 'formik'
-import UrlInput from './URLInput'
+import UrlInput from '../URLInput'
 import { useOcean } from '@context/Ocean'
 import { InputProps } from '@shared/FormInput'
 
diff --git a/src/components/@shared/FormInput/InputElement.tsx b/src/components/@shared/FormInput/InputElement.tsx
index e9415f5d8..8b82bbd2a 100644
--- a/src/components/@shared/FormInput/InputElement.tsx
+++ b/src/components/@shared/FormInput/InputElement.tsx
@@ -3,7 +3,7 @@ import slugify from 'slugify'
 import styles from './InputElement.module.css'
 import { InputProps } from '.'
 import FilesInput from '../FormFields/FilesInput'
-import CustomProvider from '../FormFields/CustomProvider'
+import CustomProvider from '../FormFields/Provider'
 import BoxSelection, { BoxSelectionOption } from '../FormFields/BoxSelection'
 import Datatoken from '../FormFields/Datatoken'
 import classNames from 'classnames/bind'
diff --git a/src/components/@shared/FormikPersist.tsx b/src/components/@shared/FormikPersist.tsx
index 612921c53..b99618da3 100644
--- a/src/components/@shared/FormikPersist.tsx
+++ b/src/components/@shared/FormikPersist.tsx
@@ -12,6 +12,7 @@ export interface PersistProps {
   isSessionStorage?: boolean
 }
 
+// TODO: refactor into functional component
 class PersistImpl extends React.Component<
   PersistProps & { formik: FormikProps<any> },
   any
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
index 0956f1d66..f5e7b7c9d 100644
--- a/src/components/Home/index.tsx
+++ b/src/components/Home/index.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement, useEffect, useState } from 'react'
-import AssetList from '@shared/AssetList/AssetList'
+import AssetList from '@shared/AssetList'
 import Button from '@shared/atoms/Button'
 import Bookmarks from './Bookmarks'
 import {
diff --git a/src/components/Profile/History/PublishedList.tsx b/src/components/Profile/History/PublishedList.tsx
index 6823f8d5a..5bd2d4649 100644
--- a/src/components/Profile/History/PublishedList.tsx
+++ b/src/components/Profile/History/PublishedList.tsx
@@ -1,6 +1,6 @@
 import { Logger } from '@oceanprotocol/lib'
 import React, { ReactElement, useEffect, useState, useCallback } from 'react'
-import AssetList from '@shared/AssetList/AssetList'
+import AssetList from '@shared/AssetList'
 import { getPublishedAssets } from '@utils/aquarius'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import { useUserPreferences } from '@context/UserPreferences'
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index fa3b17d8b..2e798bdf6 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement, useState, useEffect, useCallback } from 'react'
-import AssetList from '@shared/AssetList/AssetList'
+import AssetList from '@shared/AssetList'
 import queryString from 'query-string'
 import Filters from './Filters'
 import Sort from './sort'