diff --git a/content/api/introduction.md b/content/api/introduction.md
new file mode 100644
index 00000000..69058d2c
--- /dev/null
+++ b/content/api/introduction.md
@@ -0,0 +1,15 @@
+---
+title: API References
+description: API references for Ocean Protocol components.
+---
+
+The following components expose a consumable API:
+
+<repo name="aquarius"></repo>
+<repo name="brizo"></repo>
+
+Those libraries ...:
+
+<repo name="squid-js"></repo>
+<repo name="squid-py"></repo>
+<repo name="squid-java"></repo>
diff --git a/data/sections.yml b/data/sections.yml
index a494cbaa..26e270d6 100644
--- a/data/sections.yml
+++ b/data/sections.yml
@@ -15,5 +15,5 @@
 
 - title: API References
   description: Get the API references for all relevant components.
-  link: /api/squid-js/
+  link: /api/introduction/
   color: green
diff --git a/data/sidebars/api.yml b/data/sidebars/api.yml
index b514d766..3bca2d21 100644
--- a/data/sidebars/api.yml
+++ b/data/sidebars/api.yml
@@ -1,4 +1,14 @@
+- group: Overview
+  items:
+    - title: API References
+      link: /api/introduction/
+
 - group: squid-js
   items:
     - title: API reference
       link: /api/squid-js/
+
+- group: aquarius
+  items:
+    - title: API reference
+      link: https://github.com/oceanprotocol/aquarius/blob/develop/docs/for_api_users/API.md
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 5a5a1b37..9ef37a36 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -7,7 +7,12 @@ const SidebarLink = ({ link, title, linkClasses }) => {
     if (link) {
         if (link.match(/^\s?http(s?)/gi)) {
             return (
-                <a href={link} target="_blank" rel="noopener noreferrer">
+                <a
+                    href={link}
+                    className={linkClasses}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
                     {title}
                 </a>
             )
@@ -23,38 +28,103 @@ const SidebarLink = ({ link, title, linkClasses }) => {
     }
 }
 
-const SidebarList = ({ items, location }) => (
-    <ul className={styles.list}>
-        {items.map((item, j) => (
-            <li key={j}>
-                <SidebarLink
-                    link={item.link}
-                    title={item.title}
-                    linkClasses={
-                        item.link === location.pathname
-                            ? styles.active
-                            : styles.link
-                    }
-                />
-            </li>
-        ))}
-    </ul>
+SidebarLink.propTypes = {
+    link: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    linkClasses: PropTypes.string
+}
+
+const SidebarList = ({ items, location, toc, tableOfContents }) => (
+    <div className={styles.list}>
+        {toc ? (
+            <div
+                className={styles.toc}
+                dangerouslySetInnerHTML={{ __html: tableOfContents }}
+            />
+        ) : (
+            <ul>
+                {items.map((item, j) => (
+                    <li key={j}>
+                        <SidebarLink
+                            link={item.link}
+                            title={item.title}
+                            linkClasses={
+                                item.link === location.pathname
+                                    ? styles.active
+                                    : styles.link
+                            }
+                        />
+                    </li>
+                ))}
+            </ul>
+        )}
+    </div>
+)
+
+SidebarList.propTypes = {
+    items: PropTypes.array.isRequired,
+    location: PropTypes.object.isRequired,
+    toc: PropTypes.bool,
+    tableOfContents: PropTypes.string
+}
+
+const SidebarGroupTitle = ({ group }) => (
+    <h4 className={styles.groupTitle}>
+        {group.items[0].link ? (
+            <SidebarLink
+                link={group.items[0].link}
+                title={group.group}
+                linkClasses={styles.groupTitleLink}
+            />
+        ) : (
+            group.group
+        )}
+    </h4>
+)
+
+SidebarGroupTitle.propTypes = {
+    group: PropTypes.object.isRequired
+}
+
+const SidebarGroup = ({ i, group, location, ...props }) => (
+    <>
+        <SidebarGroupTitle group={group} />
+        <SidebarList
+            key={i}
+            items={group.items}
+            location={location}
+            {...props}
+        />
+    </>
 )
 
 export default class Sidebar extends Component {
     static propTypes = {
         sidebar: PropTypes.string,
         location: PropTypes.object.isRequired,
+        collapsed: PropTypes.bool,
         toc: PropTypes.bool,
         tableOfContents: PropTypes.string
     }
 
-    static defaultProps = { location: { pathname: `/` } }
+    static defaultProps = { location: { pathname: '/' } }
 
     render() {
-        const { sidebar, location, toc, tableOfContents } = this.props
+        const {
+            sidebar,
+            location,
+            collapsed,
+            toc,
+            tableOfContents
+        } = this.props
 
-        const sidebarfile = sidebar ? require(`../../data/sidebars/${sidebar}.yml`) : [] // eslint-disable-line
+        if (sidebar) {
+            try {
+                var sidebarfile = require(`../../data/sidebars/${sidebar}.yml`) // eslint-disable-line
+            } catch (e) {
+                throw e
+            }
+        }
 
         if (!sidebarfile) {
             return null
@@ -62,50 +132,32 @@ export default class Sidebar extends Component {
 
         return (
             <nav className={styles.sidebar}>
-                {toc ? (
-                    <div>
-                        <h4 className={styles.groupTitle}>On this page</h4>
-                        <div
-                            className={styles.toc}
-                            dangerouslySetInnerHTML={{
-                                __html: tableOfContents
-                            }}
-                        />
-                    </div>
-                ) : (
-                    sidebarfile.map((group, i) => (
-                        <div key={i}>
-                            <h4 className={styles.groupTitle}>
-                                {group.items[0].link ? (
-                                    <SidebarLink
-                                        link={group.items[0].link}
-                                        title={group.group}
-                                        linkClasses={styles.groupTitleLink}
-                                    />
-                                ) : (
-                                    group.group
-                                )}
-                            </h4>
-                            <SidebarList
-                                key={i}
-                                items={group.items}
+                {sidebarfile.map((group, i) => (
+                    <div key={i}>
+                        {collapsed ? (
+                            group.items.some(
+                                item => item.link === location.pathname
+                            ) ? (
+                                <SidebarGroup
+                                    i={i}
+                                    group={group}
+                                    location={location}
+                                    toc={toc}
+                                    tableOfContents={tableOfContents}
+                                />
+                            ) : (
+                                <SidebarGroupTitle group={group} />
+                            )
+                        ) : (
+                            <SidebarGroup
+                                i={i}
+                                group={group}
                                 location={location}
                             />
-                        </div>
-                    ))
-                )}
+                        )}
+                    </div>
+                ))}
             </nav>
         )
     }
 }
-
-SidebarLink.propTypes = {
-    link: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    linkClasses: PropTypes.string
-}
-
-SidebarList.propTypes = {
-    items: PropTypes.array.isRequired,
-    location: PropTypes.object.isRequired
-}
diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
index b1e20696..b5ddce1d 100644
--- a/src/components/Sidebar.module.scss
+++ b/src/components/Sidebar.module.scss
@@ -54,6 +54,10 @@
     border-left: 1px solid $brand-grey-lighter;
     margin-left: $spacer / 2;
 
+    > ul {
+        padding-left: 0;
+    }
+
     li {
         display: block;
 
@@ -63,7 +67,8 @@
     }
 }
 
-.link {
+.link,
+.toc a {
     color: $brand-grey;
     display: inline-block;
     padding: $spacer / 6 $spacer / 2;
@@ -77,6 +82,24 @@
     }
 }
 
+.toc {
+    ul {
+        padding-left: 0;
+
+        ul {
+            padding-left: $spacer / 2;
+            margin: 0;
+        }
+    }
+
+    li {
+        margin: 0;
+    }
+
+    a {
+    }
+}
+
 .active {
     composes: link;
     color: $brand-purple;
diff --git a/src/templates/Doc.jsx b/src/templates/Doc.jsx
index 24f2b8b0..4562a77a 100644
--- a/src/templates/Doc.jsx
+++ b/src/templates/Doc.jsx
@@ -27,7 +27,7 @@ const DocMain = ({ title, description, tableOfContents, post, single }) => (
 DocMain.propTypes = {
     title: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired,
-    tableOfContents: PropTypes.string.isRequired,
+    tableOfContents: PropTypes.string,
     post: PropTypes.object.isRequired,
     single: PropTypes.bool
 }
@@ -54,6 +54,8 @@ export default class DocTemplate extends Component {
             }
         })
 
+        const isApiSection = location.pathname.includes('/api/')
+
         return (
             <>
                 <Helmet>
@@ -77,33 +79,24 @@ export default class DocTemplate extends Component {
                                     <Sidebar
                                         location={location}
                                         sidebar={section}
+                                        collapsed={isApiSection}
+                                        toc={
+                                            isApiSection &&
+                                            !location.pathname.includes(
+                                                '/api/introduction/'
+                                            )
+                                        }
+                                        tableOfContents={tableOfContents}
                                     />
                                 </aside>
-                                {location.pathname.includes('/api/') ? (
-                                    <>
-                                        <DocMain
-                                            title={title}
-                                            description={description}
-                                            post={post}
-                                        />
-                                        <aside className={styles.sidebarToc}>
-                                            <Sidebar
-                                                location={location}
-                                                toc
-                                                tableOfContents={
-                                                    tableOfContents
-                                                }
-                                            />
-                                        </aside>
-                                    </>
-                                ) : (
-                                    <DocMain
-                                        title={title}
-                                        description={description}
-                                        tableOfContents={tableOfContents}
-                                        post={post}
-                                    />
-                                )}
+                                <DocMain
+                                    title={title}
+                                    description={description}
+                                    tableOfContents={
+                                        !isApiSection && tableOfContents
+                                    }
+                                    post={post}
+                                />
                             </main>
                         ) : (
                             <DocMain
diff --git a/src/templates/Doc.module.scss b/src/templates/Doc.module.scss
index 0d963538..47300dcb 100644
--- a/src/templates/Doc.module.scss
+++ b/src/templates/Doc.module.scss
@@ -16,27 +16,12 @@
         margin-bottom: 0;
         order: 1;
 
-        :global(.api) & {
-            width: 17%;
-        }
-
         + .main {
             width: 73%;
         }
     }
 }
 
-.sidebarToc {
-    composes: sidebar;
-    padding-left: $spacer / 2;
-
-    @media (min-width: $break-point--medium) {
-        :global(.api) & {
-            width: 19%;
-        }
-    }
-}
-
 .main {
     width: 100%;
     background: $brand-white;