diff --git a/app/assets/javascripts/app/controllers/chat.coffee b/app/assets/javascripts/app/controllers/chat.coffee
index b16afb616..a75f10345 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/customer_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
diff --git a/lib/sessions/event/chat_base.rb b/lib/sessions/event/chat_base.rb
index 66a35b44b..bdc790cdd 100644
--- a/lib/sessions/event/chat_base.rb
+++ b/lib/sessions/event/chat_base.rb
@@ -10,16 +10,13 @@ class Sessions::Event::ChatBase
   def pre
 
     # check if feature is enabled
-    if !Setting.get('chat')
-      return {
-        event: 'chat_error',
-        data: {
-          state: 'chat_disabled',
-        },
-      }
-    end
-
-    false
+    return if Setting.get('chat')
+    {
+      event: 'chat_error',
+      data: {
+        state: 'chat_disabled',
+      },
+    }
   end
 
   def post
diff --git a/lib/sessions/event/chat_session_init.rb b/lib/sessions/event/chat_session_init.rb
index 298cbcd3d..6efb8d64a 100644
--- a/lib/sessions/event/chat_session_init.rb
+++ b/lib/sessions/event/chat_session_init.rb
@@ -34,7 +34,7 @@ class Sessions::Event::ChatSessionInit < Sessions::Event::ChatBase
 
     # return new session
     {
-      event: 'chat_session_init',
+      event: 'chat_session_queue',
       data: {
         state: 'queue',
         position: Chat.waiting_chat_count,
diff --git a/lib/sessions/event/chat_session_start.rb b/lib/sessions/event/chat_session_start.rb
index 13eed93f7..8de9fce3f 100644
--- a/lib/sessions/event/chat_session_start.rb
+++ b/lib/sessions/event/chat_session_start.rb
@@ -36,15 +36,23 @@ class Sessions::Event::ChatSessionStart < Sessions::Event::ChatBase
         session_id: chat_session.session_id,
       },
     }
-    chat_session.send_to_recipients(data, @client_id)
+    chat_session.send_to_recipients(data)
 
-    # send chat_session_init to agent
-    {
-      event: 'chat_session_start',
-      data: {
-        state: 'ok',
-        session: chat_session,
-      },
+    # send position update to other waiting sessions
+    position = 0
+    Chat::Session.where(state: 'waiting').order('created_at ASC').each {|local_chat_session|
+      position += 1
+      data = {
+        event: 'chat_session_queue',
+        data: {
+          state: 'queue',
+          position: position,
+          session_id: local_chat_session.session_id,
+        },
+      }
+      local_chat_session.send_to_recipients(data)
     }
+
+    nil
   end
 end
diff --git a/public/assets/chat/chat.coffee b/public/assets/chat/chat.coffee
index c737bfc3f..caba4c73b 100644
--- a/public/assets/chat/chat.coffee
+++ b/public/assets/chat/chat.coffee
@@ -19,6 +19,7 @@ do($ = window.jQuery, window) ->
     inputTimeout: null
     isTyping: false
     isOnline: true
+    initialQueueDelay: 10000,
     debug: true
     host: 'ws://localhost:6042'
     strings:
@@ -94,9 +95,9 @@ do($ = window.jQuery, window) ->
 
     onWebSocketMessage: (e) =>
       pipes = JSON.parse( e.data )
-      @log 'debug', 'ws:onmessage', pipes
 
       for pipe in pipes
+        @log 'debug', 'ws:onmessage', pipe
         switch pipe.event
           when 'chat_session_message'
             return if pipe.data.self_written
@@ -293,8 +294,24 @@ do($ = window.jQuery, window) ->
       @el.find('.zammad-chat-input').prop('disabled', false)
       @el.find('.zammad-chat-send').prop('disabled', false)
 
-    onQueue: (data) =>
-      @log 'notice', 'onQueue', data.position
+    onQueueScreen: (data) =>
+
+      # delay initial queue position, show connecting first
+      show = =>
+        @onQueue data.position
+      if @initialQueueDelay && !@onInitialQueueDelayId
+        @onInitialQueueDelayId = setTimeout(show, @initialQueueDelay)
+        return
+
+      # stop delay of initial queue position
+      if @onInitialQueueDelayId
+        clearTimeout(@onInitialQueueDelayId)
+
+      # show queue position
+      show()
+
+    onQueue: (position) =>
+      @log 'notice', 'onQueue', position
       @inQueue = true
       @setSessionId data.session_id
 
@@ -406,11 +423,12 @@ do($ = window.jQuery, window) ->
       @el.find('.zammad-chat-agent').addClass('zammad-chat-is-hidden')
       @el.find('.zammad-chat-agent-status').addClass('zammad-chat-is-hidden')
 
-    setSessionId: (id) =>
-      @sessionId = id
-      sessionStorage.setItem 'sessionId', id
+    onConnectionEstablished: (agent) =>
+
+      # stop delay of initial queue position
+      if @onInitialQueueDelayId
+        clearTimeout(@onInitialQueueDelayId)
 
-    onConnectionEstablished: (data) =>
       @inQueue = false
       @agent = data.agent
       @setSessionId data.session_id