diff --git a/src/App.js b/src/App.js
index 0d360fe..7e67b8a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,7 +15,7 @@ class App extends Component {
     selectDisabled: false
   }
 
-  state = { tagFilters: [], selectedBook: null }
+
   handleItemClick = (e, { name }) => this.setState({ activeItem: name })
 
   constructor(props) {
@@ -154,6 +154,25 @@ class App extends Component {
       });
     }
 
+    const popularActive = (news) => {
+      var results = {};
+      for (var i = 0; i < news.length; i++) {
+        const everyTagsOnNews = news[i].tags || [];
+        for (var j = 0; j < everyTagsOnNews.length; j++) {
+          if(results[everyTagsOnNews[j]]){
+            results[everyTagsOnNews[j]]++ ;
+          }else{
+            results[everyTagsOnNews[j]] = 1;
+          }
+        }
+      }
+      console.log("result", results);
+       const tempResult = Object.keys(results).map((key) => ({count: results[key], value: key})) || [];
+       console.log("tempResult", tempResult);
+
+      return tempResult;
+    }
+
     return (
       <div>
         <Menu>
@@ -182,14 +201,20 @@ class App extends Component {
                 options={books} />
             </Menu.Item>
             <Menu.Item>
-              <Button 
-                icon='send' 
-                disable={bookVal} 
+              <Button
+                icon='send'
+                disable={bookVal}
                 onClick={this.selectDisabled}
                 className="snedButton"/>
             </Menu.Item>
           </Menu.Menu>
         </Menu>
+
+        {/* {popularActive(this.props.data.news).map((x, tempIndex)=>
+          <Tag
+            key={`overall-for-${tempIndex}`}
+            text={x.value + " " + x.count}/>
+          )} */}
         <List
           selectedBook={this.state.bookVal}
           selectDisabled={this.state.selectDisabled}
diff --git a/src/BookTags.js b/src/BookTags.js
index b7deccb..2be88d4 100644
--- a/src/BookTags.js
+++ b/src/BookTags.js
@@ -31,14 +31,11 @@ class BookTags extends Component {
   }
 
   updateNewsAPI(newTags){
-    console.log("update news", newTags, this.props.updateTags )
     if(this.props.updateTags){
       if(this.props.itemPropsName === 'tags'){
         const newNews =  Object.assign({}, this.props.item, {tags: newTags});
         this.props.updateTags(this.props.item._id, newNews );
       }else if(this.props.itemPropsName === 'userBooks'){
-        console.log("save userbooks", newTags);
-        //Save array of ID to userbooks
         const newUserbooks = newTags.map(x=>{
           const results = this.props.options.filter(y => y.fullName === x);
           if(results.length > 0){
@@ -134,7 +131,7 @@ class BookTags extends Component {
     if (availTags.length > 0) {
       let newTags = currentTags.concat(availTags[Math.floor(Math.random()*availTags.length)]);
       alert(`Brefing book suggestions: ${newTags}`);
-    } 
+    }
 
 
   }
@@ -163,12 +160,12 @@ class BookTags extends Component {
                value={this.state.value}
                {...this.props}
              />}
-          <Button 
-            color='olive' 
-            floated={'right'} 
-            icon='cubes' 
-            labelPosition='left' 
-            content='Suggest' 
+          <Button
+            color='olive'
+            floated={'right'}
+            icon='cubes'
+            labelPosition='left'
+            content='Suggest'
             onClick={this.autoCategorize}/>
       </Segment>
     );
diff --git a/src/FirebaseService.js b/src/FirebaseService.js
new file mode 100644
index 0000000..95cab98
--- /dev/null
+++ b/src/FirebaseService.js
@@ -0,0 +1,35 @@
+import * as firebase from 'firebase';
+
+const config = {
+   apiKey: "AIzaSyA5Fh7tb7DREA5fgAKwJjh_llXfIKs9iMs",
+   authDomain: "my-test-website-c0fcc.firebaseapp.com",
+   databaseURL: "https://my-test-website-c0fcc.firebaseio.com",
+   projectId: "my-test-website-c0fcc",
+   storageBucket: "my-test-website-c0fcc.appspot.com",
+   messagingSenderId: "575661525828"
+ };
+
+
+firebase.initializeApp(config);
+ export const database = firebase.database();
+
+ //News API
+ const getNewsbyId = id => database.ref('news').child(id);
+ const addNews = data => database.ref('news').push(data, response => response);
+ const adduserArticle = data => database.ref("userArticle").push(data, response => response);
+ const removeUserArticle = (id) => database.ref("userArticle").child(id).remove();
+ const updateNews = (id, data) => database.ref(`news/${id}`).update(data, response => response);
+ export const newsActions = {
+   addNews,
+   updateNews,
+   getNewsbyId,
+   adduserArticle,
+   removeUserArticle
+ };
+ //User API
+ const getUsersbyId = id => database.ref('users').child(id);
+ const updateUserbyID = (id, data) => database.ref(`users/${id}`).update(data, response => response);
+ export const userActions = {
+   getUsersbyId,
+   updateUserbyID,
+ };
diff --git a/src/IconBar.js b/src/IconBar.js
index 723bd3f..87abb31 100644
--- a/src/IconBar.js
+++ b/src/IconBar.js
@@ -2,15 +2,11 @@ import React, { Component } from 'react';
 import './MainPage.css';
 import 'semantic-ui-css/semantic.min.css';
 import * as moment from 'moment';
-// import './../public/css/font-awesome.min.css';
 
 class IconBar extends Component {
 
-
   render() {
-  
     return (
-
       <div>
         <div className="ui labeled button" tabindex="0">
         <div className="ui red button">
@@ -29,7 +25,6 @@ class IconBar extends Component {
         </a>
       </div>
     </div>
-
     );
   }
 }
diff --git a/src/List.js b/src/List.js
index e61b867..287de93 100644
--- a/src/List.js
+++ b/src/List.js
@@ -3,49 +3,21 @@ import Tags from './Tags.js';
 import Books from './Books.js';
 import { Grid, Image, Label, Dropdown, Icon, Checkbox } from 'semantic-ui-react'
 import BookTags from './BookTags.js';
-// import { Grid, Image, Label, Dropdown, Icon } from 'semantic-ui-react'
 import './App.css';
 import * as moment from 'moment';
 import { Link } from 'react-router-dom';
-
+import ListCheckbox  from './ListCheckbox.js'
 class List extends Component {
-  state = {
-    isChecked: false,
-  }
+
   constructor(props) {
     super(props);
-    this.checkBooked = this.checkBooked.bind(this);
-    this.getUserTagByName = this.getUserTagByName.bind(this);
+     this.getUserTagByName = this.getUserTagByName.bind(this);
   }
 
-  checkBooked(e, data, news){
-    console.log("checked", data, e, news);
-    let checked = this.state.isChecked;
-    this.setState({isChecked: !checked });
-    if(data.checked){
-      let allData = this.props.userArticle || [];
-  //    this.props.newsActionsTemp.adduserArticle({userId: this.props.selectedBook, newsId: news._id, order: 1 });
-    }else{
-      // this.props.find
-      console.log("this.props.userArticle", this.props.userArticle);
-      const selectedArtices = this.props.userArticle;
-      // const temp = this.props.userArticle.map(x=> {console.log(x); return 1});
-      for (var tempProps in selectedArtices) {
-        console.log(`this.props.userArticle.${tempProps} `,selectedArtices[tempProps]);
-
-        if(selectedArtices[tempProps].userId == this.props.selectedBook && selectedArtices[tempProps].newsId == news._id){
-          console.log("Found", tempProps);
-          //this.props.newsActionsTemp.removeUserArticle(tempProps);
-        }
-      }
-      // this.prps.newsActionsTemp.removeUserArticle();
-    }
-  }
   getUserTagByName(d){
     const userbookTags = d.userBooks? d.userBooks.map((x) => {
       return this.props.userBooks.filter(y => y._id === x)[0].fullName;
     }) : [];
-    console.log("userbookTags", userbookTags)
     return userbookTags;
   }
 
@@ -67,11 +39,10 @@ class List extends Component {
   }
 
   render() {
-    let items = this.props.items;
-    let userArticle = Object.keys(this.props.userArticle).map(key => this.props.userArticle[key]) || [];
-    const newsActions = this.props.newsActionsTemp;
+    const { items, newsActionsTemp, userBooks, sentDisabled, activeItem, selectedBook } = this.props;
+
     let feedback = null;
-    if (this.props.activeItem === 'sent') {
+    if (activeItem === 'sent') {
       let options = [
         {
           key: 1,
@@ -97,10 +68,6 @@ class List extends Component {
       );
     }
 
-    const userBooks = this.props.userBooks;
-
-    let sentDisabled = this.props.selectDisabled;
-
     return (
       <Grid celled>
         {items.map((d,i) => {
@@ -117,13 +84,13 @@ class List extends Component {
                   <Grid.Column>
                     <Label as='a' color={this.getLabelColor(d)} ribbon>{d.title}</Label>
                   </Grid.Column>
-                  {(this.props.selectedBook&& d.userBooks.indexOf(this.props.selectedBook) > -1 ) &&
+                  {(selectedBook && d.userBooks.indexOf(selectedBook) > -1 ) &&
                     <Grid.Column>
-                      <Checkbox
-                        disabled={this.props.selectDisabled}
-                        checked={this.state.checked}
-                        label={{ children: 'Select' }}
-                        onChange={(e,data) => this.checkBooked(e, data ,d)} />
+                      <ListCheckbox
+                        news={d}
+                        selectedBook={selectedBook}
+                        >
+                        </ListCheckbox>
                     </Grid.Column>
                   }
                 </Grid.Row>
@@ -135,15 +102,14 @@ class List extends Component {
                   tags={d.tags}
                   item={d}
                   itemPropsName={'tags'}
-                  updateTags={newsActions.updateNews}/>
-
+                  updateTags={newsActionsTemp.updateNews}/>
 
                 <BookTags key={`users-$i`} icon={'user circle outline'}
                   tags={userbookTags}
                   item={d}
                   options={userBooks}
                   itemPropsName={'userBooks'}
-                  updateTags={newsActions.updateNews}/>
+                  updateTags={newsActionsTemp.updateNews}/>
               </Grid.Column>
             </Grid.Row>
           );
diff --git a/src/ListCheckbox.js b/src/ListCheckbox.js
new file mode 100644
index 0000000..9961314
--- /dev/null
+++ b/src/ListCheckbox.js
@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import Tags from './Tags.js';
+import Books from './Books.js';
+import { Grid, Image, Label, Dropdown, Icon, Checkbox } from 'semantic-ui-react'
+import BookTags from './BookTags.js';
+import './App.css';
+import * as moment from 'moment';
+import { Link } from 'react-router-dom';
+import {  database, newsActions, userActions} from './FirebaseService';
+
+class ListCheckbox extends Component {
+
+  constructor(props) {
+    super(props);
+    // let userArticleData = {};
+    // let userArticle=[];
+    // const self = this;
+    // database.ref('userArticle').once("value")
+    //   .then(function(snapshot) {
+    //     userArticleData = snapshot.val(); // 1 ("name")
+    //     userArticle = userArticleData ? Object.keys(userArticleData).map(key => userArticleData[key]) : [];
+    //     self.state = {
+    //       userArticleData: userArticleData,
+    //       checked: userArticle.filter(x => (x.newsId === self.props.news._id && x.userId === self.props.selectedBook )).length > 0,
+    //     }
+    //   });
+    this.state = {
+      userArticleData: {},
+      checked: false
+    }
+    // console.log("checked ---", this.state.checked);
+    this.checkBooked = this.checkBooked.bind(this);
+  }
+
+  componentWillMount(){
+    let userArticleData = {};
+    let userArticle=[];
+    const self = this;
+    database.ref('userArticle').once("value")
+      .then(function(snapshot) {
+        userArticleData = snapshot.val(); // 1 ("name")
+        userArticle = userArticleData ? Object.keys(userArticleData).map(key => userArticleData[key]) : [];
+        self.setState({
+          userArticleData: userArticleData,
+          checked: userArticle.filter(x => (x.newsId === self.props.news._id && x.userId === self.props.selectedBook )).length > 0,
+        });
+      });
+  }
+
+  checkBooked(e, data, news){
+    e.preventDefault();
+    this.setState({checked: data.checked });
+    console.log(data.checked);
+    if(data.checked){
+      let allData = this.state.userArticleData || [];
+      newsActions.adduserArticle({userId: this.props.selectedBook, newsId: news._id, order: 1 });
+      console.log("ADD");
+
+    }else{
+      const selectedArtices = this.state.userArticleData;
+      for (var tempProps in selectedArtices) {
+        if(selectedArtices[tempProps].userId === this.props.selectedBook && selectedArtices[tempProps].newsId === news._id){
+          console.log("Found", tempProps);
+          newsActions.removeUserArticle(tempProps);
+        }
+      }
+    }
+  }
+
+
+  render() {
+    const { items, news, userBooks } = this.props;
+    const { userArticleData, checked } = this.state;
+    let userArticle = userArticleData ? Object.keys(userArticleData).map(key => userArticleData[key]) : [];
+    return (
+      <Checkbox
+        checked={checked}
+        label={{ children: 'Select' }}
+        onChange={(e,data) => this.checkBooked(e, data, this.props.news)} />
+    );
+  }
+}
+
+export default ListCheckbox;
diff --git a/src/MainPage.css b/src/MainPage.css
index 4045d74..f9599ce 100644
--- a/src/MainPage.css
+++ b/src/MainPage.css
@@ -28,7 +28,8 @@
 }
 
 .commentSection {
-  width: 100%;
+  width: 80%;
+  margin: auto;
 }
 
 .comment {
diff --git a/src/MainPage.js b/src/MainPage.js
index 1149865..54bb758 100644
--- a/src/MainPage.js
+++ b/src/MainPage.js
@@ -23,7 +23,6 @@ class MainPage extends Component {
   }
 
   render() {
-    console.log("props", this.props);
     const news = this.state.newsData;
     return (
 
@@ -31,14 +30,14 @@ class MainPage extends Component {
         <div className="mainPanel">
           <div className="row footerBar">
             <IconBar/>
-            <h5 className="timeTag">{news? news.source : "No new was found"}</h5>
-            <h5 className="timeTag">{news? moment(news.publishedAt).fromNow() : "No new was found"}</h5>
+            <h5 className="timeTag">{news ? news.source : "No new was found"}</h5>
+            <h5 className="timeTag">{news ? moment(news.publishedAt).fromNow() : "No new was found"}</h5>
           </div>
-          {news&& <img className="mainImg" src={news.urlToImage} />  }
-          <h2>{news? news.title : "No new was found"}</h2>
-          <h5>{news? news.description : "No new was found"}</h5>
+          {news && <img className="mainImg" src={news.urlToImage} />  }
+          <h2>{news ? news.title : "No new was found"}</h2>
+          <h5>{news ? news.description : "No new was found"}</h5>
           <div className="commentSection">
-            {news&&<NewsComment item={news}
+            {news && <NewsComment item={news}
               className = "comment"
               users={this.props.data.users}
               updateNews={this.props.newsActionsTemp.updateNews}
diff --git a/src/NewsComment.js b/src/NewsComment.js
index 26e4e63..dd09b85 100644
--- a/src/NewsComment.js
+++ b/src/NewsComment.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
-import { Button, Comment, Form, Header } from 'semantic-ui-react'
+import { Button, Comment, Form, Header, Dropdown } from 'semantic-ui-react'
 import * as moment from 'moment';
-import { Dropdown } from 'semantic-ui-react'
 
 class NewsComment extends Component {
   constructor(props) {
@@ -12,33 +11,28 @@ class NewsComment extends Component {
     commentText: '',
   };
   this.getUserbyId = this.getUserbyId.bind(this);
-this._changeText= this._changeText.bind(this);
-this._changeUser= this._changeUser.bind(this);
+  this._changeText= this._changeText.bind(this);
+  this._changeUser= this._changeUser.bind(this);
 
   }
 
   getUserbyId(id){
-    console.log("id", id);
-
     var self = this;
     let userData;
     const user = this.props.userActions.getUsersbyId("id");
-
     user.once('value').then(function(snapshot) {
       userData = snapshot.val();
-
     });
     return userData
   }
 
   submitComment(e){
+    e.preventDefault();
     let newComment = {title: this.state.commentText, userId: this.state.userId};
     let updateComments = this.props.item.comments || [];
     updateComments.push(newComment);
     const updateNews = Object.assign({}, this.props.item, {comments: updateComments})
     this.props.updateNews(this.props.item._id, updateNews);
-    e.preventDefault();
-
   }
 
   _changeText(e) {
@@ -53,13 +47,13 @@ this._changeUser= this._changeUser.bind(this);
     });
   }
   render() {
-    const { item, updateNews } = this.props;
-    const usersOption = this.props.users.map(z=> ({key: z._id, value: z._id, text: z.name}));
+    const { item, updateNews, users } = this.props;
+    const usersOption = users.map(z=> ({key: z._id, value: z._id, text: z.name}));
     return (
       <Comment.Group>
         <Header as='h3' dividing>Comments</Header>
-        {item.comments&& item.comments.map(x =>{
-          const userTemp = this.props.users.filter(y => y._id === x.userId)[0];
+        { item.comments && item.comments.map(x =>{
+          const userTemp = users.filter(y => y._id === x.userId)[0];
           return (
             <Comment>
               <Comment.Content>
@@ -74,8 +68,6 @@ this._changeUser= this._changeUser.bind(this);
           }
         )}
 
-
-
         <Form reply onSubmit={e => this.submitComment(e)}>
           <Form.TextArea onChange={this._changeText}/>
           <Form.Dropdown placeholder='Name' search selection
@@ -83,7 +75,6 @@ this._changeUser= this._changeUser.bind(this);
             onChange={(e,data) => this._changeUser(e,data)}
             value={this.state.userId}
           />
-
           <Button content='Add Reply' labelPosition='left' icon='edit' primary />
         </Form>
       </Comment.Group>
diff --git a/src/Tags.js b/src/Tags.js
index e419ff3..20d47a4 100644
--- a/src/Tags.js
+++ b/src/Tags.js
@@ -3,10 +3,12 @@ import { Icon, Label, Button, Input, Segment, Search } from 'semantic-ui-react';
 import Tag from './Tag.js';
 
 const resultRenderer = ({ fullName, jobTitle }) => (
-  <Label content={<div>
+  <Label content={
+    <div>
     <h5>{fullName}</h5>
     <p>{jobTitle}</p>
-  </div>} />
+  </div>
+  } />
 )
 
 class Tags extends Component {
@@ -46,7 +48,6 @@ class Tags extends Component {
             return null;
           }
         })
-
         const newNews =  Object.assign({}, this.props.item, {userBooks: newUserbooks});
         this.props.updateTags(this.props.item._id, newNews );
       }
diff --git a/src/index.js b/src/index.js
index 3e306b5..a3f24c1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,69 +1,35 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
 import registerServiceWorker from './registerServiceWorker';
-import './index.css';
-import * as firebase from 'firebase';
-
+import { BrowserRouter as Router,  Route, Link } from 'react-router-dom'
+import {  database, newsActions, userActions} from './FirebaseService';
 
 import Home from './Home';
 import MainPage from './MainPage';
+import App from './App';
+import './index.css';
 
-import {
-  BrowserRouter as Router,
-  Route,
-  Link
-} from 'react-router-dom'
-const config = {
-   apiKey: "AIzaSyA5Fh7tb7DREA5fgAKwJjh_llXfIKs9iMs",
-   authDomain: "my-test-website-c0fcc.firebaseapp.com",
-   databaseURL: "https://my-test-website-c0fcc.firebaseio.com",
-   projectId: "my-test-website-c0fcc",
-   storageBucket: "my-test-website-c0fcc.appspot.com",
-   messagingSenderId: "575661525828"
- };
-
-const fb = firebase
-  .initializeApp(config)
-  .database()
-  .ref();
-
-  //News API
-  const getNewsbyId = id => fb.child('news').child(id);
-  const addNews = data => fb.child('news').push(data, response => response);
-  const adduserArticle = data => fb.child("userArticle").push(data, response => response);
-  // this.bindAsArray(fb.child("userArticle"), "userArticle");
-  const removeUserArticle = (id) => fb.child("userArticle").child(id).remove();
-
-  const updateNews = (id, data) => fb.child(`news/${id}`).update(data, response => response);
-  export const newsActions = {
-    addNews,
-    updateNews,
-    getNewsbyId,
-    adduserArticle,
-    removeUserArticle
-  };
-  //User API
-  const getUsersbyId = id => fb.child('users').child(id);
-  const updateUserbyID = (id, data) => fb.child(`users/${id}`).update(data, response => response);
-  export const userActions = {
-    getUsersbyId,
-    updateUserbyID,
-  };
-
-  fb.on('value', snapshot => {
-  const store = snapshot.val();
 
-  console.log("index.js", store)
-  ReactDOM.render(
-    <Router {...store}>
-      <div>
-        <Route exact path="/" component={(props) => <App {...props} data={store} newsActionsTemp={newsActions}/>} />
-        <Route path="/home" component={Home}   />
-        <Route path="/main/:newsId" component={(props) => <MainPage  {...props} data={store}  newsActionsTemp={newsActions} userActions={userActions}/>}   />
-      </div>
-    </Router>,
-    document.getElementById('root')
-  );
+  database.ref('news').on('value', snapshot => {
+    const newsStore = snapshot.val();
+    database.ref('users').on('value', snapshot => {
+      const usersStore = snapshot.val();
+      database.ref('userBooks').on('value', snapshot => {
+        const userBooksStore = snapshot.val();
+        const store = Object.assign({}, {news:newsStore}, {users: usersStore}, {userBooks: userBooksStore});
+        console.log("index.js", store)
+        ReactDOM.render(
+          <Router {...store}>
+            <div>
+              <Route exact path="/" component={(props) => <App {...props} data={store} newsActionsTemp={newsActions}/>} />
+              <Route path="/home" component={Home} />
+              <Route path="/main/:newsId" component={(props) => <MainPage  {...props} data={store}  newsActionsTemp={newsActions} userActions={userActions}/>}   />
+            </div>
+          </Router>,
+          document.getElementById('root')
+      );
+    });
+  });
 });
+
 registerServiceWorker();
diff --git a/src/routes.js b/src/routes.js
index cbea1fb..d20dde6 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,24 +1,8 @@
 import React from 'react';
-import {Route, IndexRoute} from 'react-router';
+import { Route, IndexRoute } from 'react-router';
 import App from './App';
 import Home from './Home';
 import MainPage from './MainPage';
-// import * as firebase from 'firebase';
-//
-//
-// const config = {
-//    apiKey: "AIzaSyA5Fh7tb7DREA5fgAKwJjh_llXfIKs9iMs",
-//    authDomain: "my-test-website-c0fcc.firebaseapp.com",
-//    databaseURL: "https://my-test-website-c0fcc.firebaseio.com",
-//    projectId: "my-test-website-c0fcc",
-//    storageBucket: "my-test-website-c0fcc.appspot.com",
-//    messagingSenderId: "575661525828"
-//  };
-//
-// const fb = firebase
-//   .initializeApp(config)
-//   .database()
-//   .ref();
 
 export default (
   <Route  path="/" component={App}>