diff --git a/app/assets/javascripts/app/views/ticket_zoom.jst.eco b/app/assets/javascripts/app/views/ticket_zoom.jst.eco
index 6186125d2..006686f3a 100644
--- a/app/assets/javascripts/app/views/ticket_zoom.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom.jst.eco
@@ -1,33 +1,100 @@
-<div class="main flex relative no-padding">
-  <div class="flex-overflow vertical">
-    <div class="page-header ticket-zoom horizontal">
-      <div class="flex vertical center">
-        <div class="big avatar" style="background-image: url(http://berta9.express.ge/31/performer/Paul%20van%20Dyk/.photo/34_paul_van_dyk_01.jpg)"></div>
-        <div class="ticket-title"></div>
-        <div class="task-meta">ID #10098 - Dienstag, <time datetime="2014-01-07T15:26:31">07. Januar 2014 um 15:26</time></div>
-      </div>
-      <div class="page-header-meta">
-        <% if @C( 'LastOverview' ) && @nav: %>
-          <div class="pull-right">
-            <span class="pagination-count"><%= @C( 'LastOverviewPosition' ) %>/<%= @C( 'LastOverviewTotal' ) %></span>
-            <% base_url ="#ticket/view/#{ @C('LastOverview') }/#{ @C('LastOverviewPosition') }/" %>
-            <ul class="pagination pagination-sm">
-              <li class="<% if @C('LastOverviewPosition') <= 1: %>disabled<% end %>"><a href="<%- base_url %>previous" title="<%- @Ti( 'previous Ticket in Overview' ) %>">«</a></li>
-              <li class="<% if @C('LastOverviewPosition') is @C('LastOverviewTotal'): %>disabled<% end %>"><a href="<%- base_url %>next" title="<%- @Ti( 'next Ticket in Overview' ) %>">»</a></li>
-            </ul>
+<div class="fit ticket-zoom vertical">
+  <div class="flex relative">
+    <div class="main no-padding">
+      <div class="flex-overflow sidebar-tabs--spacing">
+        <div class="page-header horizontal">
+          <div class="flex vertical center">
+            <div class="big avatar" style="background-image: url(http://berta9.express.ge/31/performer/Paul%20van%20Dyk/.photo/34_paul_van_dyk_01.jpg)"></div>
+            <div class="ticket-title"></div>
+            <div class="task-meta">ID #10098 - Dienstag, <time datetime="2014-01-07T15:26:31">07. Januar 2014 um 15:26</time></div>
           </div>
-        <% end %>
+          <div class="page-header-meta">
+            <% if @C( 'LastOverview' ) && @nav: %>
+              <div class="pull-right">
+                <span class="pagination-count"><%= @C( 'LastOverviewPosition' ) %>/<%= @C( 'LastOverviewTotal' ) %></span>
+                <% base_url ="#ticket/view/#{ @C('LastOverview') }/#{ @C('LastOverviewPosition') }/" %>
+                <ul class="pagination pagination-sm">
+                  <li class="<% if @C('LastOverviewPosition') <= 1: %>disabled<% end %>"><a href="<%- base_url %>previous" title="<%- @Ti( 'previous Ticket in Overview' ) %>">«</a></li>
+                  <li class="<% if @C('LastOverviewPosition') is @C('LastOverviewTotal'): %>disabled<% end %>"><a href="<%- base_url %>next" title="<%- @Ti( 'next Ticket in Overview' ) %>">»</a></li>
+                </ul>
+              </div>
+            <% end %>
+          </div>
+        </div>
+
+        <div class="ticket-article"></div>
+
       </div>
+
+      <div class="ticket-edit sidebar-tabs--spacing"></div>
+
     </div>
 
-    <div class="ticket-article"></div>
-
-    <div class="ticket-edit"></div>
+    <div class="sidebar-holder vertical">
+      <div class="sidebar bottom-form-shadow flex">
+        <div class="horizontal center">
+          <h2 class="flex contain-text">Ticket Einstellungen</h2>
+          <div class="close-sidebar centered clickable">
+            <div class="arrow-right icon"></div>
+          </div>
+        </div>
+        <hr>
+        <form>
 
+        </form>
+        <div class="widgets"></div>
+        <div class="action"></div>
+      </div>
+      <div class="sidebar-tabs vertical justified">
+        <div class="active sidebar-tab centered">
+          <div class="dark message icon"></div>
+        </div>
+        <div class="sidebar-tab centered">
+          <div class="dark person icon"></div>
+        </div>
+        <div class="sidebar-tab centered">
+          <div class="dark group icon"></div>
+        </div>
+      </div>
+    </div>
   </div>
-</div>
 
-<div class="sidebar">
-  <div class="widgets"></div>
-  <div class="action"></div>
+  <form class="bottom-form form-inline horizontal" role="form">
+    <div class="form-group">
+      <label for="update_ticket_1_state_id" class="input-group-addon">State</label>
+      <select id="update_ticket_1_state_id" class="form-control" name="state_id">
+        <option value="4">closed</option>
+        <option value="1" selected="">new</option>
+        <option value="2">open</option>
+        <option value="3">pending</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label for="update_ticket_1_priority_id" class="input-group-addon">Priority</label>
+      <select id="update_ticket_1_priority_id" class="form-control" name="priority_id">
+        <option value="1">1 low</option>
+        <option value="2" selected="">2 normal</option>
+        <option value="3">3 high</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label for="update_ticket_1_group_id" class="input-group-addon">Group</label>
+      <select id="update_ticket_1_group_id" class="form-control" name="group_id">
+        <option value="4">FillGroup::450863</option>
+        <option value="3">FillGroup::918672</option>
+        <option value="2">Twitter</option>
+        <option value="1" selected="">Users</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label for="update_ticket_1_owner_id" class="input-group-addon">Owner</label>
+      <select id="update_ticket_1_owner_id" class="form-control" name="owner_id">
+        <option value="">-</option>
+        <option value="3">Felix Niklas</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <input type="submit" class="btn primary submit" value="update">
+    </div>
+  </form>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
index 097a0bc98..085637035 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
@@ -1,49 +1,8 @@
-<div class="horizontal bubble-grid edit <% if @formChanged: %>form-changed<% end %>">
+<div class="horizontal bubble-grid new-article <% if @formChanged: %>form-changed<% end %>">
   <div class="avatar user-popover" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
   <div class="flex text-bubble">
     <div class="bubble-arrow"></div>
     <textarea></textarea>
     <span class="bubble-placeholder">Antwort eingeben oder <span class="highlight">Dateien wählen</span></span>
   </div>
-</div>
-
-<form class="edit-ticket-properties form-inline" role="form">
-  <div class="horizontal">
-    <div class="form-group">
-      <label for="update_ticket_1_state_id" class="input-group-addon">State</label>
-      <select id="update_ticket_1_state_id" class="form-control" name="state_id">
-        <option value="4">closed</option>
-        <option value="1" selected="">new</option>
-        <option value="2">open</option>
-        <option value="3">pending</option>
-      </select>
-    </div>
-    <div class="form-group">
-      <label for="update_ticket_1_priority_id" class="input-group-addon">Priority</label>
-      <select id="update_ticket_1_priority_id" class="form-control" name="priority_id">
-        <option value="1">1 low</option>
-        <option value="2" selected="">2 normal</option>
-        <option value="3">3 high</option>
-      </select>
-    </div>
-    <div class="form-group">
-      <label for="update_ticket_1_group_id" class="input-group-addon">Group</label>
-      <select id="update_ticket_1_group_id" class="form-control" name="group_id">
-        <option value="4">FillGroup::450863</option>
-        <option value="3">FillGroup::918672</option>
-        <option value="2">Twitter</option>
-        <option value="1" selected="">Users</option>
-      </select>
-    </div>
-    <div class="form-group">
-      <label for="update_ticket_1_owner_id" class="input-group-addon">Owner</label>
-      <select id="update_ticket_1_owner_id" class="form-control" name="owner_id">
-        <option value="">-</option>
-        <option value="3">Felix Niklas</option>
-      </select>
-    </div>
-    <div class="form-group">
-      <input type="submit" class="btn primary submit" value="update">
-    </div>
-  </div>
-</form>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index 732cffeaf..58e59c8b0 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -502,6 +502,7 @@ label {
 
 .content {
   overflow: auto;
+  position: relative;
 }
 
   .content.fit {
@@ -1235,6 +1236,30 @@ ol.tabs li {
     background-position: -26px -299px;
   }
 
+  .arrow-right.icon {
+    width: 12px;
+    height: 11px;
+    background-position: -36px -299px;
+  }
+
+  .dark.group.icon {
+    width: 23px;
+    height: 24px;
+    background-position: 0 -311px;
+  }
+
+  .dark.message.icon {
+    width: 19px;
+    height: 19px;
+    background-position: -23px -311px;
+  }
+
+  .dark.person.icon {
+    width: 11px;
+    height: 24px;
+    background-position: -42px -311px;
+  }
+
 
 /*
  * removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
@@ -1378,33 +1403,6 @@ footer {
     0 -3px rgba(0,0,0,.01);
 }
 
-.sidebar .action {
-  padding: 6px 8px 6px;
-  position: fixed;
-  bottom: 60px;
-  background-color: #fff;
-  width: 100%;
-  right: 0px;
-  border-top: 1px solid #eeeeee;
-  width: 120px;
-  margin-left: 4px;
-}
-@media (min-width: 800px) {
-  .sidebar .action {
-    width: 234px;
-  }
-}
-@media (min-width: 1024px) {
-  .sidebar .action {
-    width: 254px;
-  }
-}
-@media (min-width: 1200px) {
-  .sidebar .action {
-    width: 274px;
-  }
-}
-
 .show_toogle {
   font-size: 10px;
   line-height: 12px;
@@ -2321,6 +2319,24 @@ footer {
   }
 
 .ticket-zoom {
+  overflow: hidden;
+  background: #f8f9fa;
+}
+
+.ticket-zoom .main {
+  right: 280px;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  transition: 500ms;
+}
+
+  .ticket-zoom.state--sidebar-hidden .main {
+    right: 0;
+  }
+
+.ticket-zoom .page-header {
   margin-top: 62px;
   margin-bottom: 46px;
   border-bottom: none;
@@ -2363,7 +2379,7 @@ footer {
 
   .text-bubble {
     padding: 10px 20px;
-    margin-right: 70px;
+    margin-right: 55px;
     white-space: pre-wrap;
     background: white;
     border-radius: 5px;
@@ -2375,18 +2391,18 @@ footer {
   .customer.ticket-article-item .text-bubble {
     background: #e5f0f5;
     margin-right: 0;
-    margin-left: 70px;
+    margin-left: 55px;
     border-color: hsl(199,38%,92%);
     box-shadow: none;
   }
 
-  .edit .text-bubble {
+  .new-article .text-bubble {
     padding: 0;
     border-color: #b3b3b3;
     white-space: normal;
   }
 
-    .edit textarea {
+    .new-article textarea {
       width: 100%;
       height: 38px;
       padding: 10px 20px;
@@ -2397,15 +2413,15 @@ footer {
       transition: 500ms;
     }
 
-    .edit textarea:focus {
+    .new-article textarea:focus {
       height: 105px;
     }
 
-    .edit textarea:focus + .bubble-placeholder {
+    .new-article textarea:focus + .bubble-placeholder {
       display: none;
     }
 
-    .edit .bubble-arrow:after {
+    .new-article .bubble-arrow:after {
       border-color: #b3b3b3;
       box-shadow: none;
     }
@@ -2461,13 +2477,89 @@ footer {
 
 .ticket-edit {
   margin-top: auto;
+  margin-bottom: 37px;
 }
 
-  .edit-ticket-properties {
-    margin-top: 37px;
+  .bottom-form {
     background: white;
   }
 
+.ticket-zoom .sidebar {
+  width: 280px;
+  border-left: 1px solid #e6e6e6;
+}
+
+  .ticket-zoom .sidebar h2 {
+    margin: 5px 0 0;
+  }
+
+  .close-sidebar {
+    padding: 20px;
+    margin: -15px;
+  }
+
+  .sidebar.bottom-form-shadow {
+    box-shadow: 
+      0 -1px rgba(0,0,0,.005) inset,
+      0 -2px rgba(0,0,0,.005) inset,
+      0 -3px rgba(0,0,0,.005) inset,
+      0 -4px rgba(0,0,0,.005) inset;
+  }
+
+  .sidebar-holder {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    transition: 500ms;
+  }
+
+  .ticket-zoom.state--sidebar-hidden .sidebar-holder {
+    transform: translateX(280px);
+  }
+
+  .sidebar-tabs {
+    position: absolute;
+    left: -55px;
+    top: 0;
+    bottom: 0;
+  }
+
+  .sidebar-tabs--spacing {
+    padding-right: 62px;
+  }
+
+  .test {
+    position: absolute;
+    width: 100%;
+  }
+
+  .sidebar-tab {
+    width: 56px;
+    height: 60px;
+    background: hsl(197,20%,93%);
+    border-top: 1px solid hsl(202,12%,87%);
+    border-left: 1px solid hsl(202,12%,87%);
+    cursor: pointer;
+  }
+
+  .sidebar-tab:first-child {
+    border-top-left-radius: 8px;
+  }
+
+  .sidebar-tab:last-child {
+    border-bottom-left-radius: 8px;
+    border-bottom: 1px solid hsl(202,12%,87%);
+  }
+
+  .sidebar-tab .icon {
+    opacity: 0.3;
+  }
+
+  .sidebar-tab.active .icon {
+    opacity: 1;
+  }
+
 /* 
 
   ----------------