diff --git a/client/ChatterApp.jsx b/client/ChatterApp.jsx
index 122a504..73a88f1 100644
--- a/client/ChatterApp.jsx
+++ b/client/ChatterApp.jsx
@@ -5,14 +5,23 @@ import getChatHTML from "./template-helpers/getChatHTML.jsx";
 import router from "./template-helpers/router.jsx";
 import Widget from "./components/Widget.jsx";
 
-const latestRooms = function (limit, withIds, archived) {
+import {
+  CHATTER_CACHE_LIMIT,
+  CHATTER_EXPIRE_IN
+} from "./global-variables.js";
+
+const latestRooms = function (limit, withIds) {
   return {
-    find: {"_id": {$in: withIds}, "archived": archived},
+    find: {"_id": {$in: withIds}},
     options: {sort: {lastActive: -1}, limit: limit}
   };
 };
 
-const chatterSubs = new SubsManager();
+
+const chatterSubs = new SubsManager({
+  cacheLimit: CHATTER_CACHE_LIMIT,
+  expireIn: CHATTER_EXPIRE_IN
+});
 
 const ChatterApp = React.createClass({
   mixins: [ReactMeteorData],
@@ -46,10 +55,15 @@ const ChatterApp = React.createClass({
       const {activeRoomLimit, archivedRoomLimit} = this.state;
 
       if (userId) {
-        const userRooms = Chatter.UserRoom.find({userId}).fetch();
-        const roomIds = _.pluck(userRooms, "roomId");
-        const activeRoomQuery = latestRooms(activeRoomLimit, roomIds, false);
-        const archivedRoomQuery = latestRooms(archivedRoomLimit, roomIds, true);
+        const archivedUserRooms = Chatter.UserRoom.find({userId, archived: true}).fetch();
+        const unarchivedUserRooms = Chatter.UserRoom.find({userId, archived: false}).fetch();
+
+        const archivedRoomIds = _.pluck(archivedUserRooms, "roomId");
+        const unarchivedRoomIds = _.pluck(unarchivedUserRooms, "roomId");
+
+        const activeRoomQuery = latestRooms(activeRoomLimit, unarchivedRoomIds);
+        const archivedRoomQuery = latestRooms(archivedRoomLimit, archivedRoomIds);
+
         activeRooms = Chatter.Room.find(activeRoomQuery.find, activeRoomQuery.options).fetch();
         archivedRooms = Chatter.Room.find(archivedRoomQuery.find, archivedRoomQuery.options).fetch();
       }
diff --git a/client/components/MainSettings.jsx b/client/components/MainSettings.jsx
index 4a2d2e4..0ea1b25 100644
--- a/client/components/MainSettings.jsx
+++ b/client/components/MainSettings.jsx
@@ -2,19 +2,35 @@ import React from 'react';
 import Loader from "../components/Loader.jsx"
 
 const MainSettings = React.createClass({
+  mixins: [ReactMeteorData],
 
   getInitialState: function() {
     return {
-      roomUsers: [],
-      archived: this.props.room.archived
+      roomUsers: []
     };
    },
 
+  getMeteorData () {
+    const userId = Meteor.userId();
+    const userRoomsHandle = Meteor.subscribe("chatterUserRooms");
+    const subsReady = userRoomsHandle.ready();
+    let room = this.props.room;
+    let user = null;
+
+   if (subsReady) {
+      const ur = Chatter.UserRoom.findOne({roomId: this.props.room._id, userId});
+      user = Meteor.user();
+      room.archived = ur.archived;
+   }
+
+   return {
+     subsReady,
+     room,
+     user
+   }
+  },
+
   componentDidMount() {
-    $(".ui.toggle.checkbox").checkbox();
-    if (this.state.archived) {
-      $(".ui.toggle.checkbox").checkbox('check');
-    }
     Meteor.call("room.users", this.props.room._id, (error, result) => {
       this.setState({roomUsers: result});
     });
@@ -22,93 +38,100 @@ const MainSettings = React.createClass({
 
   toggleArchivedState() {
     const params = {
-      archived: !this.state.archived,
-      roomId: this.props.room._id
+      archived: !this.data.room.archived,
+      roomId: this.props.room._id,
+      userId: Meteor.userId()
     };
+
     Meteor.call("room.archive", params);
-    this.setState({archived: !this.state.archived});
   },
 
   render() {
-    const user = Meteor.user();
-
-    const addUsersHTML = (
-      <div className="item addUserItem" onClick={ () => this.props.setView("addUsers")}>
-        <i className="add user icon"></i>
-        <div className="content">
-          <a className="header">
-            Add or remove users...
-          </a>
-        </div>
-      </div>
-    );
-
-    const roomUsers = this.state.roomUsers;
-    const roomUsersHTML = roomUsers.map(function(user) {
-      const statusClass = user.profile.online ? "user-status online" : "user-status offline";
-      return (
-        <div className="item room-user" key={user._id}>
-          <div className={statusClass}></div>
-          <img
-            className="ui avatar image"
-            src={user.profile.chatterAvatar}
-          />
+    if (this.data.subsReady) {
+      const user = this.data.user;
+      $(".ui.toggle.checkbox").checkbox();
+      if (this.data.room.archived) {
+        $(".ui.toggle.checkbox").checkbox('check');
+      }
+      const addUsersHTML = (
+        <div className="item addUserItem" onClick={ () => this.props.setView("addUsers")}>
+          <i className="add user icon"></i>
           <div className="content">
-            <a className="header nickname">
-              {user.profile.chatterNickname}
+            <a className="header">
+              Add or remove users...
             </a>
-            <div className="description last-active">
-              Last logged in just now.
-            </div>
           </div>
         </div>
       );
-    });
 
+      const roomUsers = this.state.roomUsers;
+      const roomUsersHTML = roomUsers.map(function(user) {
+        const statusClass = user.profile.online ? "user-status online" : "user-status offline";
+        return (
+            <div className="item room-user" key={user._id}>
+              <div className={statusClass}></div>
+              <img
+                className="ui avatar image"
+                src={user.profile.chatterAvatar}
+              />
+              <div className="content">
+                <a className="header nickname">
+                  {user.profile.chatterNickname}
+                </a>
+                <div className="description last-active">
+                  Last logged in just now.
+                </div>
+              </div>
+            </div>
+          );
+        });
 
-    return (
-      <div className="padded settings scrollable">
-        <div className="ui header">
-          Channel description
-        </div>
-        <p className="room-description">
-          {this.props.room.description}
-        </p>
-        <p className="gray-text">
-          This channel was created by {this.props.room.createdBy} on the {this.props.room.createdAt.toISOString()}.
-        </p>
-        <div className="ui toggle checkbox" onClick={this.toggleArchivedState} >
-          <label>
-            <span className="ui header">Archive Chat</span>
-          </label>
-          <input
-            type="checkbox"
-            value={this.props.archived}
-            name="public"
-            tabIndex="0"
-            className="hidden"
-          />
-        </div>
-        <p>
-          Archived chats will store the conversation and stop notifications from bothering you in the future.
-        </p>
-        <div className="ui accordion room-users">
-          <div className="title active">
-            <i className="dropdown icon"></i>
-            <span className="ui header">
-              Channel members ({roomUsers.length})
-            </span>
+      return (
+        <div className="padded settings scrollable">
+          <div className="ui header">
+            Channel description
+          </div>
+          <p className="room-description">
+            {this.props.room.description}
+          </p>
+          <p className="gray-text">
+            This channel was created by {this.props.room.createdBy} on the {this.props.room.createdAt.toISOString()}.
+          </p>
+          <div className="ui toggle checkbox" onClick={this.toggleArchivedState} >
+            <label>
+              <span className="ui header">Archive Chat</span>
+            </label>
+            <input
+              type="checkbox"
+              value={this.data.room.archived}
+              name="public"
+              tabIndex="0"
+              className="hidden"
+            />
           </div>
-          <div className="content active">
-            <div className="ui list relaxed">
-              {user.profile.isChatterAdmin ? addUsersHTML : null}
-              <div className="ui divider"></div>
-              {roomUsers.length > 0 ? roomUsersHTML : <Loader/>}
+          <p>
+            Archived chats will store the conversation and stop notifications from bothering you in the future.
+          </p>
+          <div className="ui accordion room-users">
+            <div className="title active">
+              <i className="dropdown icon"></i>
+              <span className="ui header">
+                Channel members ({roomUsers.length})
+              </span>
+            </div>
+            <div className="content active">
+              <div className="ui list relaxed">
+                {user.profile.isChatterAdmin ? addUsersHTML : null}
+                <div className="ui divider"></div>
+                {roomUsersHTML}
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    );
+      );
+    } else {
+      return <Loader/>
+    }
   }
 });
 
diff --git a/client/components/Profile.jsx b/client/components/Profile.jsx
index 01ffc3d..5e26bf6 100644
--- a/client/components/Profile.jsx
+++ b/client/components/Profile.jsx
@@ -2,7 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Loader from "../components/Loader.jsx"
 
-const profileSubs = new SubsManager();
+import {
+  PROFILE_CACHE_LIMIT,
+  PROFILE_EXPIRE_IN
+} from "../global-variables.js";
+
+const profileSubs = new SubsManager({
+  cacheLimit: PROFILE_CACHE_LIMIT,
+  expireIn: PROFILE_EXPIRE_IN
+});
 
 const Profile = React.createClass({
   mixins: [ReactMeteorData],
@@ -15,33 +23,24 @@ const Profile = React.createClass({
 
   getMeteorData () {
     const usersHandle = profileSubs.subscribe("users");
-    let user = {};
+    const subsReady = usersHandle.ready();
+    let user = null;
 
-    if (usersHandle.ready()) {
+    if (subsReady) {
       user = Meteor.users.findOne(this.props.userProfile);
     }
     return {
-      usersHandle,
-      user
+      user,
+      subsReady
     }
   },
 
-  handleSubmit(e) {
-    e.preventDefault();
-    const nickname = ReactDOM.findDOMNode(this.refs.nickname).value.trim();
-    if (nickname.length === 0) return;
-    Meteor.call("user.changeNickname", nickname, (error, result) => {
-      if (!error) {
-        this.setState({nicknameChanged: true})
-      }
-    });
-  },
-
-  componentDidMount() {
-    if (this.data.usersHandle.ready() && this.props.userProfile == Meteor.userId()) {
-      ReactDOM.findDOMNode(this.refs.nickname).focus();
-      $('.ui.form')
-        .form({
+  initializeInput(input) {
+    if (input) {
+      this.nicknameInput = input;
+      input.focus();
+      $('.ui.form').form(
+        {
           fields: {
             nickname: {
               identifier: 'nickname',
@@ -53,17 +52,31 @@ const Profile = React.createClass({
               ]
             }
           }
-        });
+        }
+      );
     }
   },
 
+  handleSubmit(e) {
+    e.preventDefault();
+    const nickname = this.nicknameInput.value.trim();
+    if (nickname.length === 0) return;
+    Meteor.call("user.changeNickname", nickname, (error, result) => {
+      if (!error) {
+        this.setState({nicknameChanged: true})
+      }
+    });
+  },
+
   render() {
-    if (!this.data.usersHandle.ready()) {
+    if (!this.data.subsReady) {
       return <Loader/>;
     }
 
+    const userId = this.data.user._id;
     const user = this.data.user.profile;
     const headerText = `${user.chatterNickname}'s Profile`;
+
     const form = (
       <div>
         <form className={this.state.nicknameChanged ? "hidden" : "ui form"} onSubmit={this.handleSubmit} ref="form">
@@ -71,7 +84,12 @@ const Profile = React.createClass({
             <label>
               Nickname
             </label>
-            <input type="text" name="nickname" placeholder={user.chatterNickname}  ref="nickname"></input>
+            <input
+              type="text"
+              name="nickname"
+              placeholder={user.chatterNickname}
+              ref={this.initializeInput}
+            />
           </div>
           <button className="ui button primary centered" type="submit" >
             Change nickname
@@ -84,8 +102,6 @@ const Profile = React.createClass({
       </div>
     );
 
-
-
     return (
       <div className="padded profile scrollable">
         <img className="ui small circular centered image" src={user.chatterAvatar}/>
@@ -98,7 +114,7 @@ const Profile = React.createClass({
         <p className={user.online ? "success-msg" : "failure-msg"}>
           <span>{user.chatterNickname}</span> is currently {user.online ? "online" : "offline"}.
         </p>
-        {this.props.userProfile == Meteor.userId() ? form : null}
+        {this.props.userProfile === userId ? form : null}
       </div>
     );
   }
diff --git a/client/components/Room.jsx b/client/components/Room.jsx
index 4dfba90..39653ea 100644
--- a/client/components/Room.jsx
+++ b/client/components/Room.jsx
@@ -1,11 +1,19 @@
 import React from 'react';
 
-import Writer from "../components/Writer.jsx"
-import Loader from "../components/Loader.jsx"
-
+import Writer from "../components/Writer.jsx";
+import Loader from "../components/Loader.jsx";
+
+import {
+  VERY_RECENT_MSG,
+  RECENT_MSG,
+  VERY_RECENT_MSG_INTERVAL,
+  RECENT_MSG_INTERVAL,
+  ROOM_CACHE_LIMIT,
+  ROOM_EXPIRE_IN
+} from "../global-variables.js";
 
 const isFirstMessage = function(prevMsg, currentMsg) {
-  return prevMsg.userId != currentMsg.userId;
+  return prevMsg.userId !== currentMsg.userId;
 };
 
 const timeSinceLastMsgGreaterThan = function(minutes, prevMsg, currentMsg) {
@@ -15,12 +23,15 @@ const timeSinceLastMsgGreaterThan = function(minutes, prevMsg, currentMsg) {
 };
 
 const timestampShouldBeDisplayed = function(currentMsg, nextMsg) {
-  const veryRecentMessage = currentMsg.getMinutesAgo() <= 60;
-  const recentMessage = currentMsg.getMinutesAgo() <= 1440;
-  return veryRecentMessage && timeSinceLastMsgGreaterThan(2, currentMsg, nextMsg) || recentMessage && timeSinceLastMsgGreaterThan(60, currentMsg, nextMsg);
+  const veryRecentMessage = currentMsg.getMinutesAgo() <= VERY_RECENT_MSG;
+  const recentMessage = currentMsg.getMinutesAgo() <= RECENT_MSG;
+  return veryRecentMessage && timeSinceLastMsgGreaterThan(VERY_RECENT_MSG_INTERVAL, currentMsg, nextMsg) || recentMessage && timeSinceLastMsgGreaterThan(RECENT_MSG_INTERVAL, currentMsg, nextMsg);
 }
 
-const roomSubs = new SubsManager();
+const roomSubs = new SubsManager({
+  cacheLimit: ROOM_CACHE_LIMIT,
+  expireIn: ROOM_EXPIRE_IN
+});
 
 const Room = React.createClass({
   mixins: [ReactMeteorData],
@@ -28,7 +39,7 @@ const Room = React.createClass({
   getMeteorData () {
     const { roomId } = this.props;
     const messagesHandle = roomSubs.subscribe("chatterMessages", {
-      roomId: roomId
+      roomId
     });
     const usersHandle = roomSubs.subscribe("users");
     const subsReady = messagesHandle.ready() && usersHandle.ready();
@@ -47,11 +58,11 @@ const Room = React.createClass({
 
   componentDidMount() {
     this.scrollDown()
-    Meteor.call("room.counter.reset", this.props.roomId);
+    Meteor.call("room.unreadMsgCount.reset", this.props.roomId);
   },
 
   componentWillUnmount() {
-    Meteor.call("room.counter.reset", this.props.roomId);
+    Meteor.call("room.unreadMsgCount.reset", this.props.roomId);
   },
 
   componentWillUpdate() {
@@ -103,7 +114,7 @@ const Room = React.createClass({
         const user = Meteor.users.findOne(message.userId);
 
         const isFirstMessageOfChat = index === 0,
-              isFirstMessageOfDay = index > 0 && prevMsg.getDate() != message.getDate(),
+              isFirstMessageOfDay = index > 0 && prevMsg.getDate() !== message.getDate(),
               isLastMessageChat = index === numberOfMessages - 1;
 
         // takes care of the display of dates and timestamps
diff --git a/client/components/RoomList.jsx b/client/components/RoomList.jsx
index 633f7fb..7d9a8c5 100644
--- a/client/components/RoomList.jsx
+++ b/client/components/RoomList.jsx
@@ -23,7 +23,7 @@ const RoomList = React.createClass({
 
   componentDidMount() {
     $('.ui.accordion').accordion();
-    Meteor.call("get.room.counts", (error, response) => {
+    Meteor.call("get.room.unreadMsgCount", (error, response) => {
       this.setState(response);
     });
 
@@ -81,6 +81,7 @@ const RoomList = React.createClass({
     const newRoomBtn = (user.profile.isChatterAdmin) ? newRoomBtnHTML : null;
 
     const activeRoomsHTML = activeRooms.map(room => {
+      room.archived = false;
       return <RoomListItem
               key={room._id}
               goToRoom={this.goToRoom}
@@ -90,6 +91,7 @@ const RoomList = React.createClass({
     });
 
     const archivedRoomsHTML = archivedRooms.map(room => {
+      room.archived = true;
       return <RoomListItem
               key={room._id}
               goToRoom={this.goToRoom}
diff --git a/client/components/RoomListItem.jsx b/client/components/RoomListItem.jsx
index 65dba1e..c96f573 100644
--- a/client/components/RoomListItem.jsx
+++ b/client/components/RoomListItem.jsx
@@ -1,6 +1,14 @@
 import React from 'react';
 
-const roomListItemSubs = new SubsManager();
+import {
+  ROOM_LIST_CACHE_LIMIT,
+  ROOM_LIST_EXPIRE_IN
+} from "../global-variables.js";
+
+const roomListItemSubs = new SubsManager({
+  cacheLimit: ROOM_LIST_CACHE_LIMIT,
+  expireIn: ROOM_LIST_EXPIRE_IN
+});
 
 const RoomListItem = React.createClass({
   mixins: [ReactMeteorData],
@@ -53,7 +61,7 @@ const RoomListItem = React.createClass({
     } = this.props;
 
     const lastUser = this.data.lastUser;
-    let lastAvatar = "http://chatter-widget.meteorapp.com/packages/jorgeer_chatter-semantic/public/images/default.jpg";
+    let lastAvatar = "/packages/jorgeer_chatter-semantic/public/images/default.jpg";
     let statusClass = "user-status none"
 
     if (lastUser) {
diff --git a/client/global-variables.js b/client/global-variables.js
new file mode 100644
index 0000000..5b45a12
--- /dev/null
+++ b/client/global-variables.js
@@ -0,0 +1,38 @@
+// Message Time Banner Settings (all in minutes)
+const VERY_RECENT_MSG = 60;
+const RECENT_MSG = 1440;
+const VERY_RECENT_MSG_INTERVAL = 2;
+const RECENT_MSG_INTERVAL = 60;
+
+// Subs Manager Settings
+
+// Room Sub Manger
+const ROOM_CACHE_LIMIT = 50;
+const ROOM_EXPIRE_IN = 5;
+
+// Chatter Sub Manger
+const CHATTER_CACHE_LIMIT = 10;
+const CHATTER_EXPIRE_IN = 5;
+
+// Profile Sub Manger
+const PROFILE_CACHE_LIMIT = 15;
+const PROFILE_EXPIRE_IN = 5;
+
+// Room List Sub Manger
+const ROOM_LIST_CACHE_LIMIT = 50;
+const ROOM_LIST_EXPIRE_IN = 5;
+
+export  {
+  VERY_RECENT_MSG,
+  RECENT_MSG,
+  VERY_RECENT_MSG_INTERVAL,
+  RECENT_MSG_INTERVAL,
+  ROOM_CACHE_LIMIT,
+  ROOM_EXPIRE_IN,
+  CHATTER_CACHE_LIMIT,
+  CHATTER_EXPIRE_IN,
+  PROFILE_CACHE_LIMIT,
+  PROFILE_EXPIRE_IN,
+  ROOM_LIST_CACHE_LIMIT,
+  ROOM_LIST_EXPIRE_IN
+};
diff --git a/client/template-helpers/router.jsx b/client/template-helpers/router.jsx
index 5e1e0b2..7263218 100644
--- a/client/template-helpers/router.jsx
+++ b/client/template-helpers/router.jsx
@@ -26,8 +26,6 @@ const router = function(scope, view) {
       header: "Channel settings",
       view: "settings",
       component: () => <Settings
-                  chatterUsers={scope.data.chatterUsers}
-                  chatterUser={scope.data.chatterUser}
                   room={Chatter.Room.findOne(scope.state.roomId)}
                   setView={scope.setView}
                 />
@@ -35,8 +33,6 @@ const router = function(scope, view) {
     room: {
       view: "room",
       component: () => <Room
-                  chatterUser={scope.data.chatterUser}
-                  chatterUsers={scope.data.chatterUsers}
                   roomId={scope.state.roomId}
                   setUserProfile={scope.setUserProfile}
                   setView={scope.setView}
diff --git a/client/template-helpers/settingsRouter.jsx b/client/template-helpers/settingsRouter.jsx
index 3b3808b..b0ab26b 100644
--- a/client/template-helpers/settingsRouter.jsx
+++ b/client/template-helpers/settingsRouter.jsx
@@ -11,15 +11,12 @@ const settingsRouter = function(scope, view) {
       component: () => <MainSettings
                     archived={scope.state.archived}
                     room={scope.props.room}
-                    chatterUsers={scope.props.chatterUsers}
-                    chatterUser={scope.props.chatterUser}
                     setView={scope.setView}
                   />
     },
     addUsers: {
       view: "addUsers",
       component: () => <AddUsers
-                  chatterUsers={scope.props.chatterUsers}
                   room={scope.props.room}
                   setView={scope.setView}
                   buttonMessage={"Back to settings"}