diff --git a/src/AC/index.js b/src/AC/index.js
index d3d7bdb..b89290c 100644
--- a/src/AC/index.js
+++ b/src/AC/index.js
@@ -1,6 +1,6 @@
 import {
-    INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION, ADD_COMMENT, LOAD_ALL_ARTICLES, LOAD_ARTICLE,
-    LOAD_ARTICLE_COMMENTS, START, SUCCESS, FAIL
+    INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION, ADD_COMMENT, LOAD_ALL_ARTICLES, LOAD_ARTICLE, LOAD_COMMENTS,
+    LOAD_ARTICLE_COMMENTS, LIMIT, START, SUCCESS, FAIL
 } from '../constants'
 
 export function increment() {
@@ -82,4 +82,12 @@ export function loadArticleComments(articleId) {
         payload: { articleId },
         callAPI: `/api/comment?article=${articleId}`
     }
+}
+
+export function loadCommentsList(i = 1) {
+    return {
+        type: LOAD_COMMENTS,
+        payload: { i },
+        callAPI: `/api/comment?limit=${LIMIT * i}&offset=${LIMIT * ++i}`
+    }
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index e7c257c..6b6b379 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import {findDOMNode} from 'react-dom'
 import {Route, NavLink, Switch} from 'react-router-dom'
 import ArticlesPage from './components/routes/articles'
+import CommentsLists from './components/routes/comments'
 import UserForm from './components/user-form'
 import Filters from './components/filters'
 import Counter from './components/counter'
@@ -25,6 +26,7 @@ class App extends Component {
                     <Route path = "/filters" component = {Filters} />
                     <Route path = "/articles/new" render = {() => <h1>New Article Form</h1>} />
                     <Route path = "/articles" component = {ArticlesPage} />
+                    <Route path = "/comments" component = {CommentsLists} />
                     <Route path = "*" render = {() => <h1>Not Found Page</h1>} />
                 </Switch>
             </div>
@@ -32,4 +34,5 @@ class App extends Component {
     }
 }
 
-export default App
\ No newline at end of file
+export default App
+//export default withRouter(connect(mapStateToProps)(App))
\ No newline at end of file
diff --git a/src/components/routes/comments.js b/src/components/routes/comments.js
new file mode 100644
index 0000000..d50aed1
--- /dev/null
+++ b/src/components/routes/comments.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+import { Route, NavLink } from 'react-router-dom'
+import { connect } from 'react-redux'
+import Loader from '../loader'
+import { commentListSelector } from '../../selectors'
+import { loadCommentsList } from '../../AC'
+import { LIMIT } from '../../constants'
+
+class CommentsRoute extends Component {
+    componentDidMount(){
+        const {loadCommentsList} = this.props
+        loadCommentsList()
+    }
+    componentWillReceiveProps(){
+        //console.log("need rerender!")
+    }
+    render(){
+        const {total} = this.props
+
+        return (
+            <div>
+                { this.getLinks(total) }
+               <Route {...this.props} path = {`${this.props.match.path}/:list`} children = {this.getComments}/>
+            </div>
+        )
+    }
+
+    getComments = ({ match }) => {
+        if (!match) return <h3>Select comments list </h3>
+        const {loadedComments} = this.props
+        if (!loadedComments) return <Loader/>
+        const list = loadedComments[match.params.list - 1]
+        if ( !list || !list.length) return <Loader/>
+        const commentElement = list.map( comment => {
+            return(
+                <div key={comment.id}>
+                    <b>{comment.user}</b>: {comment.text}
+                </div>
+            )
+        })
+        return <section>{ commentElement }</section>
+    }
+
+    getLinks = (total) => {
+        if (!total) return <Loader/>
+        const count = Math.floor(total/ LIMIT) +( total % LIMIT === 0 ? 0 : 1)
+        const links =(Array.from(Array(count).keys())).map( i => {
+            const p = i + 1
+            return <li key = {i}>
+                <NavLink to={`${this.props.match.path}/${p}`}>{p}</NavLink>
+            </li>
+        })
+        return <ul>
+            {links}
+            </ul>
+    }
+}
+
+
+export default connect(state => ({
+    loadedComments: commentListSelector(state),
+    total: state.comments.total
+}), { loadCommentsList })(CommentsRoute)
\ No newline at end of file
diff --git a/src/constants/index.js b/src/constants/index.js
index c71387f..6618296 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -9,6 +9,8 @@ export const CHANGE_SELECTION = 'CHANGE_SELECTION'
 export const CHANGE_DATE_RANGE = 'CHANGE_DATE_RANGE'
 
 export const ADD_COMMENT = 'ADD_COMMENT'
+export const LOAD_COMMENTS = 'LOAD_COMMENTS'
+export const LIMIT = 5
 
 export const START = '_START'
 export const SUCCESS = '_SUCCESS'
diff --git a/src/reducer/comments.js b/src/reducer/comments.js
index 6586253..622ebbd 100644
--- a/src/reducer/comments.js
+++ b/src/reducer/comments.js
@@ -1,4 +1,4 @@
-import { ADD_COMMENT, LOAD_ARTICLE_COMMENTS, SUCCESS } from '../constants'
+import { ADD_COMMENT, LOAD_ARTICLE_COMMENTS, LOAD_COMMENTS, START, SUCCESS } from '../constants'
 import {Record, OrderedMap} from 'immutable'
 import {arrToMap} from './utils'
 
@@ -9,7 +9,9 @@ const CommentRecord = Record({
 })
 
 const ReducerState = Record({
-    entities: new OrderedMap({})
+    entities: new OrderedMap({}),
+    loadedComments: [],
+    total: null
 })
 
 export default (state = new ReducerState(), action) => {
@@ -25,6 +27,16 @@ export default (state = new ReducerState(), action) => {
         case LOAD_ARTICLE_COMMENTS + SUCCESS:
             return state.mergeIn(['entities'], arrToMap(response, CommentRecord))
 
+        case LOAD_COMMENTS + START:
+            let item = state.loadedComments[payload.i - 1]
+            return typeof item === 'undefined' ? state.setIn(['loadedComments', payload.i - 1], false) : state
+
+        case LOAD_COMMENTS + SUCCESS:
+            console.log("SUCCESS load comments: ", response)
+
+            return state.set('total', response.total)
+                .setIn(['loadedComments', payload.i - 1], response.records)//arrToMap(response.records, CommentRecord))
+
         default:
             return state
     }
diff --git a/src/selectors/index.js b/src/selectors/index.js
index 421e61a..623bc23 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -8,6 +8,7 @@ export const loadedArticlesSelector = state => state.articles.loaded
 const commentsSelector = state => state.comments.entities
 const filtersSelector = state => state.filters
 const idSelector = (_, props) => props.id
+export const commentListSelector = state => state.comments.get('loadedComments')
 
 export const filtratedArticles = createSelector(articleListSelector, filtersSelector, (articles, filters) => {
     const {selected, dateRange: {from, to}} = filters