diff --git a/client/src/app-components/topic-viewer.js b/client/src/app-components/topic-viewer.js
new file mode 100644
index 00000000..bf93ccbd
--- /dev/null
+++ b/client/src/app-components/topic-viewer.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import Icon from 'core-components/icon'
+
+class TopicViewer extends React.Component {
+    static propTypes = {
+        name: React.PropTypes.string.isRequired,
+        icon: React.PropTypes.string.isRequired,
+        iconColor: React.PropTypes.string.isRequired,
+        articles: React.PropTypes.array.isRequired
+    };
+
+    render() {
+        return (
+            <div className="topic-viewer">
+                <div className="topic-viewer__header">
+                    <Icon className="topic-viewer__icon" name={this.props.icon} size="2x" color={this.props.iconColor}/>
+                    <span className="topic-viewer__title">{this.props.name}</span>
+                </div>
+                <ul className="topic-viewer__list">
+                    {this.props.articles.map(function (article) {
+                        return <li className="topic-viewer__list-item">{article.title}</li>
+                    })}
+                </ul>
+            </div>
+        );
+    }
+}
+
+export default TopicViewer;
\ No newline at end of file
diff --git a/client/src/app-components/topic-viewer.scss b/client/src/app-components/topic-viewer.scss
new file mode 100644
index 00000000..abb13971
--- /dev/null
+++ b/client/src/app-components/topic-viewer.scss
@@ -0,0 +1,35 @@
+@import "../scss/vars";
+
+.topic-viewer {
+    text-align: left;
+    //font-weight: bold;
+    &__header {
+        margin-bottom: 15px;
+    }
+    &__icon {
+        color: $primary-green;
+    }
+    &__title {
+        font-size: $font-size--lg;
+        margin-left: 15px;
+    }
+    &__list {
+        &-item {
+            display: inline-block;
+            width: 50%;
+            color: $secondary-blue;
+            margin-bottom: 10px;
+        }
+        &-item:before {
+            content: "• ";
+            color: $grey;
+        }
+        //
+        &-item:nth-child(even) {
+            //background: red;
+        }
+        &-item:nth-child(odd) {
+            //background: green;
+        }
+    }
+}
\ No newline at end of file
diff --git a/client/src/app/admin/panel/articles/admin-panel-list-articles.js b/client/src/app/admin/panel/articles/admin-panel-list-articles.js
index cb607d94..401326e6 100644
--- a/client/src/app/admin/panel/articles/admin-panel-list-articles.js
+++ b/client/src/app/admin/panel/articles/admin-panel-list-articles.js
@@ -1,14 +1,46 @@
 import React from 'react';
 
+import API from 'lib-app/api-call';
+import TopicViewer from 'app-components/topic-viewer';
+
 class AdminPanelListArticles extends React.Component {
 
+    state = {
+        loading: true,
+        topics: []
+    };
+
+    componentDidMount() {
+        API.call({
+            path: '/article/get-all',
+            data: {}
+        }).then(this.onRetrieveSuccess.bind(this));
+    }
+
     render() {
         return (
             <div>
-                /admin/panel/articles/list-articles
+                {this.state.loading ? 'loading' : this.renderTopics()}
             </div>
         );
     }
+
+    renderTopics() {
+        return (
+            <div>
+                {this.state.topics.map(function (topic) {
+                    return <TopicViewer {...topic} />
+                })}
+            </div>
+        )
+    }
+
+    onRetrieveSuccess(result) {
+        this.setState({
+            loading: false,
+            topics: result.data
+        });
+    }
 }
 
 export default AdminPanelListArticles;
\ No newline at end of file
diff --git a/client/src/core-components/icon.js b/client/src/core-components/icon.js
index 6570bd90..d26123d1 100644
--- a/client/src/core-components/icon.js
+++ b/client/src/core-components/icon.js
@@ -5,6 +5,7 @@ class Icon extends React.Component {
 
     static propTypes = {
         name: React.PropTypes.string.isRequired,
+        color: React.PropTypes.string,
         size: React.PropTypes.string
     };
 
@@ -18,7 +19,7 @@ class Icon extends React.Component {
 
     renderFontIcon() {
         return (
-            <span className={this.getFontIconClass()} aria-hidden="true" />
+            <span className={this.getFontIconClass()} aria-hidden="true" style={{color: this.props.color}}/>
         );
     }
 
diff --git a/client/src/data/fixtures/article-fixtures.js b/client/src/data/fixtures/article-fixtures.js
new file mode 100644
index 00000000..e11c654b
--- /dev/null
+++ b/client/src/data/fixtures/article-fixtures.js
@@ -0,0 +1,99 @@
+module.exports = [
+    {
+        path: '/article/get-all',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: [
+                    {
+                        id: 1,
+                        name: 'Membership Settings',
+                        icon: 'user',
+                        iconColor: 'green',
+                        articles: [
+                            {
+                                id: 1,
+                                title: 'Mannaging apps for your account',
+                                content: 'Curabitur sed dignissim turpis, sed lacinia urna. Vestibulum semper suscipit interdum. Proin sed sem gravida massa tristique rhoncus auctor eu diam. Donec fringilla in ex non dignissim. Praesent sed ultricies eros. Nullam vel augue eget libero volutpat sodales sit amet et orci.',
+                                lastEdited: 20160516,
+                                position: 1
+                            },
+                            {
+                                id: 2,
+                                title: 'How to assign new task and files',
+                                content: 'Aliquam aliquet mi nulla. Nam vel orci diam. Suspendisse euismod orci efficitur nulla mattis eleifend vitae quis neque. Etiam orci dolor, dignissim quis convallis quis, rhoncus eu tellus. Phasellus aliquam ut enim id ultrices. Nunc dolor arcu, viverra vel ullamcorper nec, dignissim a lectus. Praesent fringilla, neque nec suscipit placerat, augue elit suscipit velit, in feugiat leo justo id tortor.',
+                                lastEdited: 20150429,
+                                position: 2
+                            },
+                            {
+                                id: 3,
+                                title: 'Updating your profile picture',
+                                content: 'Aliquam aliquet mi nulla. Nam vel orci diam. Suspendisse euismod orci efficitur nulla mattis eleifend vitae quis neque. Etiam orci dolor, dignissim quis convallis quis, rhoncus eu tellus. Phasellus aliquam ut enim id ultrices. Nunc dolor arcu, viverra vel ullamcorper nec, dignissim a lectus. Praesent fringilla, neque nec suscipit placerat, augue elit suscipit velit, in feugiat leo justo id tortor.',
+                                lastEdited: 20150429,
+                                position: 3
+                            },
+                            {
+                                id: 4,
+                                title: 'Deleting your account',
+                                content: 'Aliquam aliquet mi nulla. Nam vel orci diam. Suspendisse euismod orci efficitur nulla mattis eleifend vitae quis neque. Etiam orci dolor, dignissim quis convallis quis, rhoncus eu tellus. Phasellus aliquam ut enim id ultrices. Nunc dolor arcu, viverra vel ullamcorper nec, dignissim a lectus. Praesent fringilla, neque nec suscipit placerat, augue elit suscipit velit, in feugiat leo justo id tortor.',
+                                lastEdited: 20150929,
+                                position: 4
+                            },
+                            {
+                                id: 5,
+                                title: 'Upload files to your cloud drive',
+                                content: 'Aliquam aliquet mi nulla. Nam vel orci diam. Suspendisse euismod orci efficitur nulla mattis eleifend vitae quis neque. Etiam orci dolor, dignissim quis convallis quis, rhoncus eu tellus. Phasellus aliquam ut enim id ultrices. Nunc dolor arcu, viverra vel ullamcorper nec, dignissim a lectus. Praesent fringilla, neque nec suscipit placerat, augue elit suscipit velit, in feugiat leo justo id tortor.',
+                                lastEdited: 20131229,
+                                position: 5
+                            }
+                        ]
+                    },
+                    {
+                        id: 2,
+                        name: 'Billing and plans',
+                        icon: 'credit-card',
+                        iconColor: 'red',
+                        articles: [
+                            {
+                                id: 1,
+                                title: 'Mannaging apps for your account',
+                                content: 'Curabitur sed dignissim turpis, sed lacinia urna. Vestibulum semper suscipit interdum. Proin sed sem gravida massa tristique rhoncus auctor eu diam. Donec fringilla in ex non dignissim. Praesent sed ultricies eros. Nullam vel augue eget libero volutpat sodales sit amet et orci.',
+                                lastEdited: 20160516,
+                                position: 1
+                            },
+                            {
+                                id: 2,
+                                title: 'How to assign new task and files',
+                                content: 'Aliquam aliquet mi nulla. Nam vel orci diam. Suspendisse euismod orci efficitur nulla mattis eleifend vitae quis neque. Etiam orci dolor, dignissim quis convallis quis, rhoncus eu tellus. Phasellus aliquam ut enim id ultrices. Nunc dolor arcu, viverra vel ullamcorper nec, dignissim a lectus. Praesent fringilla, neque nec suscipit placerat, augue elit suscipit velit, in feugiat leo justo id tortor.',
+                                lastEdited: 20150429,
+                                position: 2
+                            },
+                            {
+                                id: 3,
+                                title: 'Updating your profile picture',
+                                content: 'Aliquam aliquet mi nulla. Nam vel orci diam. Suspendisse euismod orci efficitur nulla mattis eleifend vitae quis neque. Etiam orci dolor, dignissim quis convallis quis, rhoncus eu tellus. Phasellus aliquam ut enim id ultrices. Nunc dolor arcu, viverra vel ullamcorper nec, dignissim a lectus. Praesent fringilla, neque nec suscipit placerat, augue elit suscipit velit, in feugiat leo justo id tortor.',
+                                lastEdited: 20150429,
+                                position: 3
+                            },
+                            {
+                                id: 4,
+                                title: 'Deleting your account',
+                                content: 'Aliquam aliquet mi nulla. Nam vel orci diam. Suspendisse euismod orci efficitur nulla mattis eleifend vitae quis neque. Etiam orci dolor, dignissim quis convallis quis, rhoncus eu tellus. Phasellus aliquam ut enim id ultrices. Nunc dolor arcu, viverra vel ullamcorper nec, dignissim a lectus. Praesent fringilla, neque nec suscipit placerat, augue elit suscipit velit, in feugiat leo justo id tortor.',
+                                lastEdited: 20150929,
+                                position: 4
+                            },
+                            {
+                                id: 5,
+                                title: 'Upload files to your cloud drive',
+                                content: 'Aliquam aliquet mi nulla. Nam vel orci diam. Suspendisse euismod orci efficitur nulla mattis eleifend vitae quis neque. Etiam orci dolor, dignissim quis convallis quis, rhoncus eu tellus. Phasellus aliquam ut enim id ultrices. Nunc dolor arcu, viverra vel ullamcorper nec, dignissim a lectus. Praesent fringilla, neque nec suscipit placerat, augue elit suscipit velit, in feugiat leo justo id tortor.',
+                                lastEdited: 20131229,
+                                position: 5
+                            }
+                        ]
+                    }
+                ]
+            };
+        }
+    }
+];
\ No newline at end of file
diff --git a/client/src/lib-app/fixtures-loader.js b/client/src/lib-app/fixtures-loader.js
index 896ff338..1850cb34 100644
--- a/client/src/lib-app/fixtures-loader.js
+++ b/client/src/lib-app/fixtures-loader.js
@@ -20,6 +20,7 @@ fixtures.add(require('data/fixtures/user-fixtures'));
 fixtures.add(require('data/fixtures/staff-fixtures'));
 fixtures.add(require('data/fixtures/ticket-fixtures'));
 fixtures.add(require('data/fixtures/system-fixtures'));
+fixtures.add(require('data/fixtures/article-fixtures'));
 
 _.each(fixtures.getAll(), function (fixture) {
     mockjax({