diff --git a/app/assets/javascripts/app/controllers/chat.coffee b/app/assets/javascripts/app/controllers/chat.coffee
index b16afb616..151370c94 100644
--- a/app/assets/javascripts/app/controllers/chat.coffee
+++ b/app/assets/javascripts/app/controllers/chat.coffee
@@ -220,7 +220,7 @@ class chatWindow extends App.Controller
     )
 
   render: ->
-    @html App.view('layout_ref/customer_chat_window')
+    @html App.view('customer_chat/chat_window')
       name: @options.name
 
     @el.one 'transitionend', @onTransitionend
@@ -353,7 +353,7 @@ class chatWindow extends App.Controller
 
     @lastAddedType = sender
 
-    @body.append App.view('layout_ref/customer_chat_message')
+    @body.append App.view('customer_chat/chat_message')
       message: message
       sender: sender
       isNew: isNew
@@ -365,7 +365,7 @@ class chatWindow extends App.Controller
     if !@isTyping
       @isTyping = true
       @maybeAddTimestamp()
-      @body.append App.view('layout_ref/customer_chat_loader')()
+      @body.append App.view('customer_chat/chat_loader')()
       @scrollToBottom()
 
     # clear old delay, set new
@@ -397,7 +397,7 @@ class chatWindow extends App.Controller
         @lastAddedType = 'timestamp'
 
   addTimestamp: (label, time) =>
-    @body.append App.view('layout_ref/customer_chat_timestamp')
+    @body.append App.view('customer_chat/chat_timestamp')
       label: label
       time: time
 
@@ -405,12 +405,12 @@ class chatWindow extends App.Controller
     @body
       .find('.js-timestamp')
       .last()
-      .replaceWith App.view('layout_ref/customer_chat_timestamp')
+      .replaceWith App.view('customer_chat/chat_timestamp')
         label: label
         time: time
 
   addStatusMessage: (message) ->
-    @body.append App.view('layout_ref/customer_chat_status_message')
+    @body.append App.view('customer_chat/chat_status_message')
       message: message
 
     @scrollToBottom()
diff --git a/app/assets/javascripts/app/views/customer_chat/chat_loader.jst.eco b/app/assets/javascripts/app/views/customer_chat/chat_loader.jst.eco
new file mode 100644
index 000000000..bc76c0e36
--- /dev/null
+++ b/app/assets/javascripts/app/views/customer_chat/chat_loader.jst.eco
@@ -0,0 +1,7 @@
+<div class="chat-message chat-message--customer chat-message--loader js-loader">
+  <div class="chat-loader">
+    <%- @Icon('loading') %>
+    <%- @Icon('loading') %>
+    <%- @Icon('loading') %>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/customer_chat/chat_message.jst.eco b/app/assets/javascripts/app/views/customer_chat/chat_message.jst.eco
new file mode 100644
index 000000000..096477697
--- /dev/null
+++ b/app/assets/javascripts/app/views/customer_chat/chat_message.jst.eco
@@ -0,0 +1 @@
+<div class="chat-message chat-message--<%= @sender %><%= ' chat-message--new' if @isNew %>"><%- @message %></div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/customer_chat/chat_status_message.jst.eco b/app/assets/javascripts/app/views/customer_chat/chat_status_message.jst.eco
new file mode 100644
index 000000000..eff398aa6
--- /dev/null
+++ b/app/assets/javascripts/app/views/customer_chat/chat_status_message.jst.eco
@@ -0,0 +1 @@
+<div class="chat-status-message"><%- @message %></div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/customer_chat/chat_timestamp.jst.eco b/app/assets/javascripts/app/views/customer_chat/chat_timestamp.jst.eco
new file mode 100644
index 000000000..c3b688a8e
--- /dev/null
+++ b/app/assets/javascripts/app/views/customer_chat/chat_timestamp.jst.eco
@@ -0,0 +1 @@
+<div class="chat-timestamp js-timestamp"><span class="chat-timestamp-label"><%= @label %></span> <%= @time %></div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco b/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco
new file mode 100644
index 000000000..183d31f4d
--- /dev/null
+++ b/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco
@@ -0,0 +1,20 @@
+<div class="chat-header">
+  <div class="chat-status js-status" data-status="online">
+    <div class="chat-status-holder">
+      <%- @Icon('status') %>
+      <%- @Icon('status-modified-outer-circle') %>
+      <%- @Icon('status-modified-inner-circle') %>
+    </div>
+  </div>
+  <div class="chat-name"><%- @name %></div>
+  <div class="chat-close js-close">
+    <%- @Icon('diagonal-cross') %>
+  </div>
+</div>
+<div class="chat-body-holder js-scrollHolder">
+  <div class="chat-body js-body"></div>
+</div>
+<div class="chat-controls">
+  <div class="chat-input form-control form-control--small form-control--multiline js-customerChatInput" contenteditable="true"></div>
+  <div class="btn btn--primary btn--slim btn--small js-send"><%= @T('Send') %></div>
+</div>
\ No newline at end of file