diff --git a/client/src/routes/Search/Filters.tsx b/client/src/routes/Search/Filters.tsx
index 2977759..3491362 100644
--- a/client/src/routes/Search/Filters.tsx
+++ b/client/src/routes/Search/Filters.tsx
@@ -1,4 +1,5 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
+import shortid from 'shortid'
 import Button from '../../components/atoms/Button'
 import styles from './Filters.module.scss'
 import data from '../../data/form-publish.json'
@@ -11,89 +12,104 @@ const labelCategories =
     steps[1].fields.categories &&
     steps[1].fields.categories.label
 
-const optionsCategories =
-    steps &&
-    steps[1].fields &&
-    steps[1].fields.categories &&
-    steps[1].fields.categories.options
-
 const labelLicense =
     steps &&
     steps[2].fields &&
     steps[2].fields.license &&
     steps[2].fields.license.label
 
-const optionsLicense =
-    steps &&
-    steps[2].fields &&
-    steps[2].fields.license &&
-    steps[2].fields.license.options
+function getFilterMetadata(results: any[]) {
+    const filterCategories: string[] = []
+    const filterLicenses: string[] = []
 
-const filters = [
-    { label: labelCategories, items: optionsCategories },
-    { label: labelLicense, items: optionsLicense }
-]
+    results.map(asset => {
+        const { metadata } = asset.findServiceByType('Metadata')
+        const { categories, license } = metadata.base
+        categories && filterCategories.push(categories[0])
+        license && filterLicenses.push(license)
+        return null
+    })
 
-export default class Filters extends PureComponent<{
+    return { filterCategories, filterLicenses }
+}
+
+export default function Filters({
+    category,
+    license,
+    results,
+    setCategory,
+    setLicense
+}: {
     category: string
     license: string
+    results: any[]
     setCategory(category: string): void
     setLicense(license: string): void
-}> {
-    public render() {
-        const { category, license, setCategory, setLicense } = this.props
+}) {
+    const { filterCategories, filterLicenses } = getFilterMetadata(results)
 
-        return filters.map(filter => (
-            <div
-                key={filter.items && filter.items[0]}
-                className={styles.filter}
-            >
-                <h3 className={styles.filterTitle}>{filter.label}</h3>
-                <ul className={styles.filter}>
-                    {filter.items &&
-                        filter.items
-                            .sort((a: string, b: string) => a.localeCompare(b)) // sort alphabetically
-                            .map((option: string) => {
-                                const isActive =
-                                    category === option || license === option
+    const filters = [
+        { label: labelCategories, items: filterCategories },
+        { label: labelLicense, items: filterLicenses }
+    ]
 
-                                return (
-                                    <li
-                                        key={option}
-                                        className={
-                                            isActive ? styles.active : undefined
-                                        }
-                                    >
-                                        <Button
-                                            link
-                                            className={styles.option}
-                                            onClick={() =>
-                                                filter.label === 'Category'
-                                                    ? setCategory(option)
-                                                    : setLicense(option)
+    return (
+        <>
+            {filters.map(filter => (
+                <div key={shortid.generate()} className={styles.filter}>
+                    <h3 className={styles.filterTitle}>{filter.label}</h3>
+                    <ul className={styles.filter}>
+                        {filter.items &&
+                            filter.items
+                                .sort((a: string, b: string) =>
+                                    a.localeCompare(b)
+                                ) // sort alphabetically
+                                .map((option: string) => {
+                                    const isActive =
+                                        category === option ||
+                                        license === option
+
+                                    return (
+                                        <li
+                                            key={shortid.generate()}
+                                            className={
+                                                isActive
+                                                    ? styles.active
+                                                    : undefined
                                             }
                                         >
-                                            {option}{' '}
-                                        </Button>
-                                        {isActive && (
                                             <Button
                                                 link
-                                                className={styles.cancel}
-                                                title="Clear"
+                                                className={styles.option}
                                                 onClick={() =>
                                                     filter.label === 'Category'
-                                                        ? setCategory('')
-                                                        : setLicense('')
+                                                        ? setCategory(option)
+                                                        : setLicense(option)
                                                 }
                                             >
-                                                &times;
+                                                {option}{' '}
                                             </Button>
-                                        )}
-                                    </li>
-                                )
-                            })}
-                </ul>
-            </div>
-        ))
-    }
+                                            {isActive && (
+                                                <Button
+                                                    link
+                                                    className={styles.cancel}
+                                                    title="Clear"
+                                                    onClick={() =>
+                                                        filter.label ===
+                                                        'Category'
+                                                            ? setCategory('')
+                                                            : setLicense('')
+                                                    }
+                                                >
+                                                    &times;
+                                                </Button>
+                                            )}
+                                        </li>
+                                    )
+                                })}
+                    </ul>
+                </div>
+            ))}
+        </>
+    )
 }
diff --git a/client/src/routes/Search/Sidebar.tsx b/client/src/routes/Search/Sidebar.tsx
index 4b3d407..355d6a9 100644
--- a/client/src/routes/Search/Sidebar.tsx
+++ b/client/src/routes/Search/Sidebar.tsx
@@ -8,6 +8,7 @@ export default function Sidebar({
     inputChange,
     category,
     license,
+    results,
     setCategory,
     setLicense
 }: {
@@ -15,6 +16,7 @@ export default function Sidebar({
     inputChange: any
     category: string
     license: string
+    results: any[]
     setCategory(category: string): void
     setLicense(license: string): void
 }) {
@@ -37,6 +39,7 @@ export default function Sidebar({
             <Filters
                 category={category}
                 license={license}
+                results={results}
                 setCategory={setCategory}
                 setLicense={setLicense}
             />
diff --git a/client/src/routes/Search/index.tsx b/client/src/routes/Search/index.tsx
index 473a6b4..c368521 100644
--- a/client/src/routes/Search/index.tsx
+++ b/client/src/routes/Search/index.tsx
@@ -2,6 +2,7 @@ import React, { PureComponent, ChangeEvent } from 'react'
 import { Link } from 'react-router-dom'
 import queryString from 'query-string'
 import { History, Location } from 'history'
+import shortid from 'shortid'
 import { Logger } from '@oceanprotocol/squid'
 import Spinner from '../../components/atoms/Spinner'
 import Route from '../../components/templates/Route'
@@ -165,14 +166,20 @@ class Search extends PureComponent<SearchProps, SearchState> {
     }
 
     public renderResults = () =>
-        this.state.isLoading ? (
-            <Spinner message="Searching..." />
-        ) : this.state.results && this.state.results.length ? (
-            <div className={styles.results}>
-                {this.state.results.map((asset: any) => (
-                    <AssetTeaser key={asset.id} asset={asset} />
-                ))}
-            </div>
+        this.state.results && this.state.results.length ? (
+            <>
+                <div className={styles.results}>
+                    {this.state.results.map((asset: any) => (
+                        <AssetTeaser key={shortid.generate()} asset={asset} />
+                    ))}
+                </div>
+
+                <Pagination
+                    totalPages={this.state.totalPages}
+                    currentPage={this.state.currentPage}
+                    handlePageClick={this.handlePageClick}
+                />
+            </>
         ) : (
             <div className={styles.empty}>
                 <p>No Data Sets Found.</p>
@@ -181,42 +188,45 @@ class Search extends PureComponent<SearchProps, SearchState> {
         )
 
     public render() {
-        const { totalResults, totalPages, currentPage } = this.state
+        const {
+            isLoading,
+            results,
+            totalResults,
+            search,
+            category,
+            license
+        } = this.state
 
         return (
             <Route title="Search" wide>
                 <Content wide>
                     <div className={styles.content}>
                         <Sidebar
-                            search={this.state.search}
+                            search={search}
                             inputChange={this.inputChange}
-                            category={this.state.category}
-                            license={this.state.license}
+                            category={category}
+                            results={results}
+                            license={license}
                             setCategory={this.setCategory}
                             setLicense={this.setLicense}
                         />
 
                         <div>
-                            {!this.state.isLoading && (
-                                <h2 className={styles.resultsTitle}>
-                                    {totalResults} results for{' '}
-                                    <span>
-                                        {decodeURIComponent(
-                                            this.state.search ||
-                                                this.state.category
-                                        )}
-                                    </span>
-                                </h2>
-                            )}
+                            {isLoading ? (
+                                <Spinner message="Searching..." />
+                            ) : (
+                                <>
+                                    <h2 className={styles.resultsTitle}>
+                                        {totalResults} results for{' '}
+                                        <span>
+                                            {decodeURIComponent(
+                                                search || category
+                                            )}
+                                        </span>
+                                    </h2>
 
-                            {this.renderResults()}
-
-                            {!this.state.isLoading && (
-                                <Pagination
-                                    totalPages={totalPages}
-                                    currentPage={currentPage}
-                                    handlePageClick={this.handlePageClick}
-                                />
+                                    {this.renderResults()}
+                                </>
                             )}
                         </div>
                     </div>