diff --git a/addon/components/bf-chat-item.js b/addon/components/bf-chat-item.js
new file mode 100644
index 0000000..cf1ed3c
--- /dev/null
+++ b/addon/components/bf-chat-item.js
@@ -0,0 +1,28 @@
+import Ember from 'ember';
+import layout from '../templates/components/bf-chat-item';
+
+export default Ember.Component.extend({
+  layout: layout,
+  tagName: 'div',
+  nameAlign: Ember.computed('user.id', 'currentUser.id', function() {
+    if (this.get('user.id') == this.get('currentUser.id')) {
+      return 'pull-right';
+    } else {
+      return 'pull-left';
+    }
+  }),
+  timeStampAlign: Ember.computed('user.id', 'currentUser.id', function() {
+    if (this.get('user.id') == this.get('currentUser.id')) {
+      return 'pull-left';
+    } else {
+      return 'pull-right';
+    }
+  }),
+  messageAlign: Ember.computed('user.id', 'currentUser.id', function() {
+    if (this.get('user.id') == this.get('currentUser.id')) {
+      return 'right';
+    } else {
+      return '';
+    }
+  })
+});
diff --git a/addon/components/bf-chat.js b/addon/components/bf-chat.js
new file mode 100644
index 0000000..36a8f5b
--- /dev/null
+++ b/addon/components/bf-chat.js
@@ -0,0 +1,17 @@
+import Ember from 'ember';
+import layout from '../templates/components/bf-chat';
+
+export default Ember.Component.extend({
+  layout: layout,
+  label: Ember.computed('chats.@each', function() {
+    return this.get('chats').length + ' messages';
+  }),
+  numberOfChatMessages: Ember.computed('chats.@each', function() {
+    return this.get('chats').length;
+  }),
+  actions: {
+    sendMessage: function() {
+      this.sendAction('action', this);
+    }
+  }
+});
diff --git a/addon/templates/components/bf-chat-item.hbs b/addon/templates/components/bf-chat-item.hbs
new file mode 100644
index 0000000..1c5df53
--- /dev/null
+++ b/addon/templates/components/bf-chat-item.hbs
@@ -0,0 +1,14 @@
+<div class="direct-chat-msg {{messageAlign}}">
+  <div class="direct-chat-info clearfix">
+    <span class="direct-chat-name {{nameAlign}}">
+      {{user.name}}
+    </span>
+    <span class="direct-chat-timestamp {{timeStampAlign}}">
+      {{moment timestamp}}
+    </span>
+  </div>
+  <img class="direct-chat-img" src="{{user.image}}">
+  <div class="direct-chat-text">{{message}}</div>
+</div>
+
+{{yield}}
diff --git a/addon/templates/components/bf-chat.hbs b/addon/templates/components/bf-chat.hbs
new file mode 100644
index 0000000..a4a346d
--- /dev/null
+++ b/addon/templates/components/bf-chat.hbs
@@ -0,0 +1,22 @@
+{{#bf-box title="Direct Chat" label=label color="warning"}}
+  <div class="box-body no-padding direct-chat-warning">
+    <div class="direct-chat-messages">
+      {{#each chat in chats}}
+        {{bf-chat-item message=chat.message user=chat.user currentUser=currentUser}}
+      {{/each}}
+    </div>
+  </div>
+  <div class="box-footer">
+    <form {{action "sendMessage" on="submit"}}>
+      <div class="input-group">
+        {{input value=message class="form-control" placeholder="Type a message..."}}
+        <span class="input-group-btn">
+          <button type="submit" class="btn btn-warning btn-flat">Send</button>
+        </span>
+      </div>
+    </form>
+  </div>
+{{/bf-box}}
+
+{{yield}}
+
diff --git a/app/components/bf-chat-item.js b/app/components/bf-chat-item.js
new file mode 100644
index 0000000..c177450
--- /dev/null
+++ b/app/components/bf-chat-item.js
@@ -0,0 +1,3 @@
+import bfChatItem from 'bf-chat/components/bf-chat-item';
+
+export default bfChatItem;
diff --git a/app/components/bf-chat.js b/app/components/bf-chat.js
new file mode 100644
index 0000000..367eacb
--- /dev/null
+++ b/app/components/bf-chat.js
@@ -0,0 +1,3 @@
+import bfChat from 'bf-chat/components/bf-chat';
+
+export default bfChat;
diff --git a/package.json b/package.json
index f61bc0b..a3c7c51 100644
--- a/package.json
+++ b/package.json
@@ -37,9 +37,10 @@
     "ember-addon"
   ],
   "dependencies": {
-    "ember-cli-babel": "^5.0.0"
+    "ember-cli-babel": "^5.0.0",
+    "ember-cli-htmlbars": "0.7.4"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config"
   }
-}
\ No newline at end of file
+}
diff --git a/tests/unit/components/bf-chat-item-test.js b/tests/unit/components/bf-chat-item-test.js
new file mode 100644
index 0000000..81eeebf
--- /dev/null
+++ b/tests/unit/components/bf-chat-item-test.js
@@ -0,0 +1,21 @@
+import {
+  moduleForComponent,
+  test
+} from 'ember-qunit';
+
+moduleForComponent('bf-chat-item', {
+  // Specify the other units that are required for this test
+  // needs: ['component:foo', 'helper:bar']
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Creates the component instance
+  var component = this.subject();
+  assert.equal(component._state, 'preRender');
+
+  // Renders the component to the page
+  this.render();
+  assert.equal(component._state, 'inDOM');
+});
diff --git a/tests/unit/components/bf-chat-test.js b/tests/unit/components/bf-chat-test.js
new file mode 100644
index 0000000..1bac16e
--- /dev/null
+++ b/tests/unit/components/bf-chat-test.js
@@ -0,0 +1,21 @@
+import {
+  moduleForComponent,
+  test
+} from 'ember-qunit';
+
+moduleForComponent('bf-chat', {
+  // Specify the other units that are required for this test
+  // needs: ['component:foo', 'helper:bar']
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Creates the component instance
+  var component = this.subject();
+  assert.equal(component._state, 'preRender');
+
+  // Renders the component to the page
+  this.render();
+  assert.equal(component._state, 'inDOM');
+});