diff --git a/client/src/Routes.tsx b/client/src/Routes.tsx
index 33824a4..c51f8c1 100644
--- a/client/src/Routes.tsx
+++ b/client/src/Routes.tsx
@@ -10,12 +10,14 @@ import Publish from './routes/Publish/'
 import Search from './routes/Search'
 import Faucet from './routes/Faucet'
 import History from './routes/History'
-import Channel from './routes/Channel'
+import Channels from './routes/Channels'
 import Styleguide from './routes/Styleguide'
 
+import Channel from './components/templates/Channel'
+
 const Routes = () => (
     <Switch>
-        <Route exact component={withTracker(Home)} path="/" />
+        <Route component={withTracker(Home)} exact path="/" />
         <Route component={withTracker(Styleguide)} path="/styleguide" />
         <Route component={withTracker(About)} path="/about" />
         <Route component={withTracker(Publish)} path="/publish" />
@@ -23,6 +25,7 @@ const Routes = () => (
         <Route component={withTracker(Details)} path="/asset/:did" />
         <Route component={withTracker(Faucet)} path="/faucet" />
         <Route component={withTracker(History)} path="/history" />
+        <Route component={withTracker(Channels)} exact path="/channels" />
         <Route component={withTracker(Channel)} path="/channels/:channel" />
         <Route component={withTracker(NotFound)} />
     </Switch>
diff --git a/client/src/routes/Channel.module.scss b/client/src/components/templates/Channel.module.scss
similarity index 93%
rename from client/src/routes/Channel.module.scss
rename to client/src/components/templates/Channel.module.scss
index f92cc7a..34d04dd 100644
--- a/client/src/routes/Channel.module.scss
+++ b/client/src/components/templates/Channel.module.scss
@@ -1,4 +1,4 @@
-@import '../styles/variables';
+@import '../../styles/variables';
 
 .results {
     display: grid;
diff --git a/client/src/routes/Channel.test.tsx b/client/src/components/templates/Channel.test.tsx
similarity index 86%
rename from client/src/routes/Channel.test.tsx
rename to client/src/components/templates/Channel.test.tsx
index 9ef6c0a..c16c84b 100644
--- a/client/src/routes/Channel.test.tsx
+++ b/client/src/components/templates/Channel.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from 'react-testing-library'
 import Channel from './Channel'
-import { User } from '../context'
+import { User } from '../../context'
 import { createMemoryHistory } from 'history'
 
 describe('Channel', () => {
@@ -36,11 +36,8 @@ describe('Channel', () => {
                 }}
             >
                 <Channel
-                    location={{
-                        search: '',
-                        pathname: '/channel/AI for Good',
-                        state: '',
-                        hash: ''
+                    match={{
+                        params: { channel: 'ai-for-good' }
                     }}
                     history={history}
                 />
diff --git a/client/src/routes/Channel.tsx b/client/src/components/templates/Channel.tsx
similarity index 60%
rename from client/src/routes/Channel.tsx
rename to client/src/components/templates/Channel.tsx
index a8648d2..fbac7dc 100644
--- a/client/src/routes/Channel.tsx
+++ b/client/src/components/templates/Channel.tsx
@@ -1,23 +1,21 @@
 import React, { PureComponent } from 'react'
-import queryString from 'query-string'
-import { History, Location } from 'history'
 import { Logger } from '@oceanprotocol/squid'
-import Spinner from '../components/atoms/Spinner'
-import Route from '../components/templates/Route'
-import { User } from '../context'
-import Asset from '../components/molecules/Asset'
-import Pagination from '../components/molecules/Pagination'
+import { History } from 'history'
+import Spinner from '../../components/atoms/Spinner'
+import Route from '../../components/templates/Route'
+import { User } from '../../context'
+import Asset from '../../components/molecules/Asset'
+import Pagination from '../../components/molecules/Pagination'
 import styles from './Channel.module.scss'
-import Content from '../components/atoms/Content'
-import channels from '../data/channels.json'
-
-const { title, description } = channels[0]
+import Content from '../../components/atoms/Content'
+import channels from '../../data/channels.json'
 
 interface ChannelProps {
-    location: Location
     history: History
     match: {
-        params: any
+        params: {
+            channel: string
+        }
     }
 }
 
@@ -28,8 +26,8 @@ interface ChannelState {
     totalPages: number
     currentPage: number
     isLoading: boolean
-    searchTerm: string
-    searchCategories: string
+    title: string
+    description: string
 }
 
 export default class Channel extends PureComponent<ChannelProps, ChannelState> {
@@ -40,50 +38,30 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
         totalPages: 1,
         currentPage: 1,
         isLoading: true,
-        searchTerm: '',
-        searchCategories: ''
+        // get content data based on received channel param
+        title: channels
+            .filter(({ slug }) => slug === this.props.match.params.channel)
+            .map(channel => channel)[0].title,
+        description: channels
+            .filter(({ slug }) => slug === this.props.match.params.channel)
+            .map(channel => channel)[0].description
     }
 
     public async componentDidMount() {
-        const { match } = this.props
-
-        // TODO: use next line to use channel name
-        // const category = match.params.channel
-        const category = 'Engineering'
-
-        const { page } = queryString.parse(this.props.location.search)
-
-        if (category) {
-            await this.setState({
-                searchCategories: encodeURIComponent(`${category}`)
-            })
-        }
-
-        // switch to respective page if query string is present
-        if (page) {
-            const currentPage = Number(page)
-            await this.setState({ currentPage })
-        }
-
         this.getChannelAssets()
     }
 
     private getChannelAssets = async () => {
         const { ocean } = this.context
-        const { offset, currentPage, searchTerm, searchCategories } = this.state
-
-        const queryValues =
-            searchCategories !== '' && searchTerm !== ''
-                ? { text: [searchTerm], categories: [searchCategories] }
-                : searchCategories !== '' && searchTerm === ''
-                ? { categories: [searchCategories] }
-                : { text: [searchTerm] }
+        const { offset, currentPage } = this.state
 
         const searchQuery = {
             offset,
             page: currentPage,
             query: {
-                ...queryValues,
+                // TODO: replace dummy category
+                // categories: [this.state.title],
+                categories: ['Engineering'],
                 price: [-1, 1]
             },
             sort: {
@@ -110,8 +88,7 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
         let toPage = data.selected + 1
 
         this.props.history.push({
-            pathname: this.props.location.pathname,
-            search: `?text=${this.state.searchTerm}&page=${toPage}`
+            search: `?page=${toPage}`
         })
 
         await this.setState({ currentPage: toPage, isLoading: true })
@@ -132,7 +109,7 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
         )
 
     public render() {
-        const { totalPages, currentPage } = this.state
+        const { title, description, totalPages, currentPage } = this.state
 
         return (
             <Route title={title} description={description}>
diff --git a/client/src/data/channels.json b/client/src/data/channels.json
index aef05dd..b77e16d 100644
--- a/client/src/data/channels.json
+++ b/client/src/data/channels.json
@@ -1,6 +1,12 @@
 [
   {
     "title": "AI for Good",
+    "slug": "ai-for-good",
     "description": "AI for Good is an initiative to promote the use of artificial intelligence for good causes, such as fighting poverty, climate change, improving healthcare, safer transportation, and so on. The AI for Good Global Summit is THE leading United Nations platform for global and inclusive dialogue on AI. The Summit is hosted each year in Geneva by the ITU in partnership wutg UN Suster agencies, XPRIZE Foundtation and ACM."
+  },
+  {
+    "title": "Test Channel",
+    "slug": "test-channel",
+    "description": "Hello description."
   }
 ]
diff --git a/client/src/data/menu.json b/client/src/data/menu.json
index bc663f9..4e96bf7 100644
--- a/client/src/data/menu.json
+++ b/client/src/data/menu.json
@@ -1,4 +1,8 @@
 [
+  {
+    "title": "Channels",
+    "link": "/channels"
+  },
   {
     "title": "Publish",
     "link": "/publish"
diff --git a/client/src/routes/Channels.tsx b/client/src/routes/Channels.tsx
new file mode 100644
index 0000000..13e6871
--- /dev/null
+++ b/client/src/routes/Channels.tsx
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import Route from '../components/templates/Route'
+import Content from '../components/atoms/Content'
+import channels from '../data/channels.json'
+import { Link } from 'react-router-dom'
+
+class Channels extends Component {
+    public render() {
+        return (
+            <Route title="Channels" description="All the Channels.">
+                <Content>
+                    <ul>
+                        {channels.map(channel => (
+                            <li key={channel.title}>
+                                <Link to={`/channels/${channel.slug}`}>
+                                    {channel.title}
+                                </Link>
+                            </li>
+                        ))}
+                    </ul>
+                </Content>
+            </Route>
+        )
+    }
+}
+
+export default Channels
diff --git a/client/src/routes/Home.tsx b/client/src/routes/Home.tsx
index 5b8a5e2..70d4444 100644
--- a/client/src/routes/Home.tsx
+++ b/client/src/routes/Home.tsx
@@ -1,6 +1,5 @@
 import React, { ChangeEvent, Component, FormEvent } from 'react'
 import { Link } from 'react-router-dom'
-import slugify from '@sindresorhus/slugify'
 import { User } from '../context'
 import { Logger } from '@oceanprotocol/squid'
 import Spinner from '../components/atoms/Spinner'
@@ -19,7 +18,8 @@ import Content from '../components/atoms/Content'
 import channels from '../data/channels.json'
 import AssetsLatest from '../components/organisms/AssetsLatest'
 
-const { title, description } = channels[0]
+// AI for Good channel
+const { title, slug } = channels[0]
 
 interface HomeProps {
     history: History
@@ -121,7 +121,7 @@ export default class Home extends Component<HomeProps, HomeState> {
 
                 <Content wide>
                     <h2 className={styles.title}>
-                        <Link to={`/channels/${slugify(title)}`}>{title}</Link>
+                        <Link to={`/channels/${slug}`}>{title}</Link>
                     </h2>
                     <div>
                         {isLoadingCategory ? (