diff --git a/public/assets/chat/index.html b/public/assets/chat/index.html
new file mode 100644
index 000000000..2b93e8735
--- /dev/null
+++ b/public/assets/chat/index.html
@@ -0,0 +1,160 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Zammad Chat</title>
+<link rel="stylesheet" href="style.css">
+<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
+<style>
+  body {
+    margin: 0;
+    font-family: sans-serif;
+  }
+
+  .settings {
+    position: fixed;
+    left: 20px;
+    top: 20px;
+    background: white;
+    font-size: 14px;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 3px 10px rgba(0,0,0,.3);
+  }
+
+  .settings input {
+    vertical-align: middle;
+  }
+  .settings input + input {
+    margin-right: 3px;
+  }
+
+  table td:first-child {
+    text-align: right;
+    padding-right: 0;
+  }
+
+  td {
+    padding: 5px;
+  }
+
+  h2 {
+    font-size: 1em;
+    margin: 0;
+  }
+
+  @media only screen and (max-width: 768px) {
+    .settings {
+      display: none;
+    }
+  }
+
+  .Box {
+    background: hsl(0,0%,91%);
+    width: 26px;
+    height: 24px;
+    color: hsl(0,0%,47%);
+    float: left;
+  }
+  .Box.Active {
+    background: hsl(0,0%,36%);
+    color: white;
+  }
+</style>
+
+<img class="mockup" width="100%" src="website.png">
+
+<div class="settings">
+  <table>
+    <tr>
+      <td>
+      <td><h2>Settings</h2>
+    <tr>
+      <td>
+        <input id="flat" type="checkbox" data-option="flat">
+      <td>
+        <label for="flat">Flat Design</label>
+    <tr>
+      <td>
+        <input type="color" id="color" value="#AE99D6" data-option="color"> 
+      <td>
+        <label for="color">Color</label>
+    <tr>
+      <td>
+        <input type="range" id="borderRadius" value="5" min="0" max="20" data-option="borderRadius">
+        <input type="number" value="5" min="5" max="20" data-option="borderRadius">px
+      <td>
+        <label for="borderRadius">Border Radius</label>
+    <tr>
+      <td>
+        <input type="range" id="fontSize" value="12" min="11" max="18" data-option="fontSize">
+        <input type="number" value="12" min="11" max="18" data-option="fontSize">px
+      <td>
+        <label for="fontSize">Font Size</label>
+  </table>
+</div>
+
+<script src="jquery-2.1.4.min.js"></script>
+<script src="node_modules/sass.js/dist/sass.js"></script>
+<script src="chat.js"></script>
+<script>
+  var sass = new Sass();
+  var scss = '';
+  var $scss = $('<style id="scss"></style>').appendTo('body');
+
+  $.get('style.scss', function(result){ scss = result });
+
+  function setScssVariable(name, value){
+    if(!scss){
+      return 'scss file not yet loaded';
+    }
+
+    scss = scss.replace(new RegExp('(\\$'+ name +':\ ).*(;)'), '$1'+ value +'$2');
+  }
+
+  function updateStyle(){
+    if(!scss){
+      return 'scss file not yet loaded';
+    }
+
+    sass.compile(scss, function(result) {
+      if(result.status != 0){
+        // error
+        console.error(result.formatted);
+      } else {
+        $scss.text(result.text);
+      }
+    });
+  }
+
+
+  $('.settings :input').on({
+    change: function(){
+      switch($(this).attr('data-option')){
+        case "flat":
+          $('.zammad-chat').toggleClass('zammad-chat--flat', this.checked);
+          break;
+        case "color":
+          setScssVariable('themeColor', this.value);
+          updateStyle();
+          break;
+        case "borderRadius":
+          setScssVariable('borderRadius', this.value + "px");
+          updateStyle();
+          break;
+      }
+    },
+    input: function(){
+      switch($(this).attr('data-option')){
+        case "borderRadius":
+          $('[data-option="borderRadius"]').val(this.value);
+          setScssVariable('borderRadius', this.value + "px");
+          updateStyle();
+          break;
+        case "fontSize":
+          $('[data-option="fontSize"]').val(this.value);
+          setScssVariable('fontSize', this.value + "px");
+          updateStyle();
+          break;
+      }
+    }
+  });
+</script>
\ No newline at end of file
diff --git a/public/assets/chat/website.png b/public/assets/chat/website.png
new file mode 100644
index 000000000..65ef8aa8f
Binary files /dev/null and b/public/assets/chat/website.png differ

+	Settings +
+ +	+ Flat Design +
+ +	+ Color +
+ + px +	+ Border Radius +
+ + px +	+ Font Size +