diff --git a/app/assets/javascripts/app/controllers/layout_ref.coffee b/app/assets/javascripts/app/controllers/layout_ref.coffee
index 629286f21..ad2bf3070 100644
--- a/app/assets/javascripts/app/controllers/layout_ref.coffee
+++ b/app/assets/javascripts/app/controllers/layout_ref.coffee
@@ -848,6 +848,8 @@ class TicketZoomRef extends App.ControllerContent
       startDate: new Date().toLocaleDateString("en-US") # returns 9/25/2015
       container: @$('.js-datepicker').parent()
 
+    @$('.js-timepicker').timepicker()
+
   # for testing purposes the highlights get stored in localStorage
   loadHighlights: ->
     if highlights = localStorage['highlights']
diff --git a/app/assets/javascripts/app/controllers/widget/notify.coffee b/app/assets/javascripts/app/controllers/widget/notify.coffee
index 3942bb6d4..cecaeb8b4 100644
--- a/app/assets/javascripts/app/controllers/widget/notify.coffee
+++ b/app/assets/javascripts/app/controllers/widget/notify.coffee
@@ -36,27 +36,14 @@ class App.Notify extends App.ControllerWidgetPermanent
       $.noty.closeAll()
     if data.link
       data.msg = '<a href="' + data.link + '">' + data.msg + '</a>'
-    $('#notify').noty(
-      {
-        dismissQueue: true
-        text:     data.msg
-        layout:   'top'
-        type:     data.type
-        theme:    'noty_theme_twitter'
-        animateOpen: {
-          height: 'toggle'
-          opacity: 0.85,
-        },
-        animateClose: {
-          opacity: 0.25
-        },
-        speed:            450
-        timeout:          data.timeout || 3800
-        closeButton:      false
-        closeOnSelfClick: true
-        closeOnSelfOver:  false
-      }
-    )
+    $('#notify').noty
+      text:      data.msg
+      type:      data.type
+      animation:
+        open:    'animated fadeInDown'
+        close:   'animated fadeOutDown'
+      timeout:   data.timeout || 3800
+      closeWith: ['click']
 
   destroy: (e) ->
     e.preventDefault()
diff --git a/app/assets/javascripts/app/lib/base/jquery.noty.js b/app/assets/javascripts/app/lib/base/jquery.noty.js
index 05b7b4ba0..0c00f422e 100644
--- a/app/assets/javascripts/app/lib/base/jquery.noty.js
+++ b/app/assets/javascripts/app/lib/base/jquery.noty.js
@@ -1,220 +1,1051 @@
-/**
-* jQuery Noty Plugin v1.1.1
-* Authors: Nedim Arabacı (http://ned.im), Muhittin Özer (http://muhittinozer.com)
-*
-* Examples and Documentation - http://needim.github.com/noty/
-*
-* Licensed under the MIT licenses:
-* http://www.opensource.org/licenses/mit-license.php
-*
-**/
-(function($) {
-	$.noty = function(options, customContainer) {
+!function(root, factory) {
+	 if (typeof define === 'function' && define.amd) {
+		 define(['jquery'], factory);
+	 } else if (typeof exports === 'object') {
+		 module.exports = factory(require('jquery'));
+	 } else {
+		 factory(root.jQuery);
+	 }
+}(this, function($) {
 
-		var base = this;
-		var $noty = null;
-		var isCustom = false;
+/*!
+ @package noty - jQuery Notification Plugin
+ @version version: 2.3.7
+ @contributors https://github.com/needim/noty/graphs/contributors
 
-		base.init = function(options) {
-			base.options = $.extend({}, $.noty.defaultOptions, options);
-			base.options.type = base.options.cssPrefix+base.options.type;
-			base.options.id = base.options.type+'_'+new Date().getTime();
-			base.options.layout = base.options.cssPrefix+'layout_'+base.options.layout;
+ @documentation Examples and Documentation - http://needim.github.com/noty/
 
-			if (base.options.custom.container) customContainer = base.options.custom.container;
-			isCustom = ($.type(customContainer) === 'object') ? true : false;
+ @license Licensed under the MIT licenses: http://www.opensource.org/licenses/mit-license.php
+ */
 
-			return base.addQueue();
-		};
+    if(typeof Object.create !== 'function') {
+        Object.create = function(o) {
+            function F() {
+            }
 
-		// Push notification to queue
-		base.addQueue = function() {
-			var isGrowl = ($.inArray(base.options.layout, $.noty.growls) == -1) ? false : true;
-	  	if (!isGrowl) (base.options.force) ? $.noty.queue.unshift({options: base.options}) : $.noty.queue.push({options: base.options});
-	  	return base.render(isGrowl);
-		};
+            F.prototype = o;
+            return new F();
+        };
+    }
 
-		// Render the noty
-		base.render = function(isGrowl) {
+    var NotyObject = {
 
-			// Layout spesific container settings
-			var container = (isCustom) ? customContainer.addClass(base.options.theme+' '+base.options.layout+' noty_custom_container') : $('body');
-	  	if (isGrowl) {
-	  		if ($('ul.noty_cont.' + base.options.layout).length == 0)
-	  			container.prepend($('<ul/>').addClass('noty_cont ' + base.options.layout));
-	  		container = $('ul.noty_cont.' + base.options.layout);
-	  	} else {
-	  		if ($.noty.available) {
-					var fromQueue = $.noty.queue.shift(); // Get noty from queue
-					if ($.type(fromQueue) === 'object') {
-						$.noty.available = false;
-						base.options = fromQueue.options;
-					} else {
-						$.noty.available = true; // Queue is over
-						return base.options.id;
-					}
-	  		} else {
-	  			return base.options.id;
-	  		}
-	  	}
-	  	base.container = container;
+        init: function(options) {
 
-	  	// Generating noty bar
-	  	base.bar = $('<div class="noty_bar"/>').attr('id', base.options.id).addClass(base.options.theme+' '+base.options.layout+' '+base.options.type);
-	  	$noty = base.bar;
-	  	$noty.append(base.options.template).find('.noty_text').html(base.options.text);
-	  	$noty.data('noty_options', base.options);
+            // Mix in the passed in options with the default options
+            this.options = $.extend({}, $.noty.defaults, options);
 
-	  	// Close button display
-	  	(base.options.closeButton) ? $noty.addClass('noty_closable').find('.noty_close').show() : $noty.find('.noty_close').remove();
+            this.options.layout = (this.options.custom) ? $.noty.layouts['inline'] : $.noty.layouts[this.options.layout];
 
-	  	// Bind close event to button
-	  	$noty.find('.noty_close').bind('click', function() { $noty.trigger('noty.close'); });
+            if($.noty.themes[this.options.theme])
+                this.options.theme = $.noty.themes[this.options.theme];
+            else
+                options.themeClassName = this.options.theme;
 
-	  	// If we have a button we must disable closeOnSelfClick and closeOnSelfOver option
-	  	if (base.options.buttons) base.options.closeOnSelfClick = base.options.closeOnSelfOver = false;
-	  	// Close on self click
-	  	if (base.options.closeOnSelfClick) $noty.bind('click', function() { $noty.trigger('noty.close'); }).css('cursor', 'pointer');
-	  	// Close on self mouseover
-	  	if (base.options.closeOnSelfOver) $noty.bind('mouseover', function() { $noty.trigger('noty.close'); }).css('cursor', 'pointer');
+            delete options.layout;
+            delete options.theme;
 
-	  	// Set buttons if available
-	  	if (base.options.buttons) {
-				$buttons = $('<div/>').addClass('noty_buttons');
-				$noty.find('.noty_message').append($buttons);
-				$.each(base.options.buttons, function(i, button) {
-					bclass = (button.type) ? button.type : 'gray';
-					$button = $('<button/>').addClass(bclass).html(button.text).appendTo($noty.find('.noty_buttons'))
-					.bind('click', function() {
-						if ($.isFunction(button.click)) {
-							button.click.call($button, $noty);
-						}
-					});
-				});
-			}
+            this.options = $.extend({}, this.options, this.options.layout.options);
+            this.options.id = 'noty_' + (new Date().getTime() * Math.floor(Math.random() * 1000000));
 
-	  	return base.show(isGrowl);
-		};
+            this.options = $.extend({}, this.options, options);
 
-		base.show = function(isGrowl) {
+            // Build the noty dom initial structure
+            this._build();
 
-			// is Modal?
-			if (base.options.modal) $('<div/>').addClass('noty_modal').addClass(base.options.theme).prependTo($('body')).fadeIn('fast');
+            // return this so we can chain/use the bridge with less code.
+            return this;
+        }, // end init
 
-			$noty.close = function() { return this.trigger('noty.close'); };
+        _build: function() {
 
-			// Prepend noty to container
-			(isGrowl) ? base.container.prepend($('<li/>').append($noty)) : base.container.prepend($noty);
+            // Generating noty bar
+            var $bar = $('<div class="noty_bar noty_type_' + this.options.type + '"></div>').attr('id', this.options.id);
+            $bar.append(this.options.template).find('.noty_text').html(this.options.text);
 
-	  	// topCenter and center specific options
-	  	if (base.options.layout == 'noty_layout_topCenter' || base.options.layout == 'noty_layout_center') {
-				$.noty.reCenter($noty);
-			}
+            this.$bar = (this.options.layout.parent.object !== null) ? $(this.options.layout.parent.object).css(this.options.layout.parent.css).append($bar) : $bar;
 
-	  	$noty.bind('noty.setText', function(event, text) {
-	  		$noty.find('.noty_text').html(text); $.noty.reCenter($noty);
-	  	});
+            if(this.options.themeClassName)
+                this.$bar.addClass(this.options.themeClassName).addClass('noty_container_type_' + this.options.type);
 
-	  	$noty.bind('noty.getId', function(event) {
-	  		return $noty.data('noty_options').id;
-	  	});
+            // Set buttons if available
+            if(this.options.buttons) {
 
-	  	// Bind close event
-	  	$noty.one('noty.close', function(event) {
-				var options = $noty.data('noty_options');
+                // If we have button disable closeWith & timeout options
+                this.options.closeWith = [];
+                this.options.timeout = false;
 
-				// Modal Cleaning
-				if (options.modal) $('.noty_modal').fadeOut('fast', function() { $(this).remove(); });
+                var $buttons = $('<div/>').addClass('noty_buttons');
 
-				$noty.clearQueue().stop().animate(
-						$noty.data('noty_options').animateClose,
-						$noty.data('noty_options').speed,
-						$noty.data('noty_options').easing,
-						$noty.data('noty_options').onClose)
-				.promise().done(function() {
+                (this.options.layout.parent.object !== null) ? this.$bar.find('.noty_bar').append($buttons) : this.$bar.append($buttons);
 
-					// Layout spesific cleaning
-					if ($.inArray($noty.data('noty_options').layout, $.noty.growls) > -1) {
-						$noty.parent().remove();
-					} else {
-						$noty.remove();
+                var self = this;
 
-						// queue render
-						$.noty.available = true;
-						base.render(false);
-					}
+                $.each(this.options.buttons, function(i, button) {
+                    var $button = $('<button/>').addClass((button.addClass) ? button.addClass : 'gray').html(button.text).attr('id', button.id ? button.id : 'button-' + i)
+                        .attr('title', button.title)
+                        .appendTo(self.$bar.find('.noty_buttons'))
+                        .on('click', function(event) {
+                            if($.isFunction(button.onClick)) {
+                                button.onClick.call($button, self, event);
+                            }
+                        });
+                });
+            }
 
-				});
-			});
+            // For easy access
+            this.$message = this.$bar.find('.noty_message');
+            this.$closeButton = this.$bar.find('.noty_close');
+            this.$buttons = this.$bar.find('.noty_buttons');
 
-	  	// Start the show
-	  	$noty.animate(base.options.animateOpen, base.options.speed, base.options.easing, base.options.onShow);
+            $.noty.store[this.options.id] = this; // store noty for api
 
-	  	// If noty is have a timeout option
-	  	if (base.options.timeout) $noty.delay(base.options.timeout).promise().done(function() { $noty.trigger('noty.close'); });
-			return base.options.id;
-		};
+        }, // end _build
 
-		// Run initializer
-		return base.init(options);
-	};
+        show: function() {
 
-	// API
-	$.noty.get = function(id) { return $('#'+id); };
-	$.noty.close = function(id) {
-		$.noty.get(id).trigger('noty.close');
-	};
-	$.noty.setText = function(id, text) {
-		$.noty.get(id).trigger('noty.setText', text);
-	};
-	$.noty.closeAll = function() {
-		$.noty.clearQueue();
-		$('.noty_bar').trigger('noty.close');
-	};
-	$.noty.reCenter = function(noty) {
-		noty.css({'left': ($(window).width() - noty.outerWidth()) / 2 + 'px'});
-	};
-	$.noty.clearQueue = function() {
-		$.noty.queue = [];
-	};
+            var self = this;
 
-	$.noty.queue = [];
-	$.noty.growls = ['noty_layout_topLeft', 'noty_layout_topRight', 'noty_layout_bottomLeft', 'noty_layout_bottomRight'];
-	$.noty.available = true;
-	$.noty.defaultOptions = {
-		layout: 'top',
-		theme: 'noty_theme_default',
-		animateOpen: {height: 'toggle'},
-		animateClose: {height: 'toggle'},
-		easing: 'swing',
-		text: '',
-		type: 'alert',
-		speed: 500,
-		timeout: 5000,
-		closeButton: false,
-		closeOnSelfClick: true,
-		closeOnSelfOver: false,
-		force: false,
-		onShow: false,
-		onClose: false,
-		buttons: false,
-		modal: false,
-		template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
-		cssPrefix: 'noty_',
-		custom: {
-			container: null
-		}
-	};
+            (self.options.custom) ? self.options.custom.find(self.options.layout.container.selector).append(self.$bar) : $(self.options.layout.container.selector).append(self.$bar);
 
-	$.fn.noty = function(options) {
-		return this.each(function() {
-			 (new $.noty(options, $(this)));
-		});
-	};
+            if(self.options.theme && self.options.theme.style)
+                self.options.theme.style.apply(self);
 
-})(jQuery);
+            ($.type(self.options.layout.css) === 'function') ? this.options.layout.css.apply(self.$bar) : self.$bar.css(this.options.layout.css || {});
 
-//Helper
-function noty(options) {
-	return jQuery.noty(options); // returns an id
-}
\ No newline at end of file
+            self.$bar.addClass(self.options.layout.addClass);
+
+            self.options.layout.container.style.apply($(self.options.layout.container.selector), [self.options.within]);
+
+            self.showing = true;
+
+            if(self.options.theme && self.options.theme.style)
+                self.options.theme.callback.onShow.apply(this);
+
+            if($.inArray('click', self.options.closeWith) > -1)
+                self.$bar.css('cursor', 'pointer').one('click', function(evt) {
+                    self.stopPropagation(evt);
+                    if(self.options.callback.onCloseClick) {
+                        self.options.callback.onCloseClick.apply(self);
+                    }
+                    self.close();
+                });
+
+            if($.inArray('hover', self.options.closeWith) > -1)
+                self.$bar.one('mouseenter', function() {
+                    self.close();
+                });
+
+            if($.inArray('button', self.options.closeWith) > -1)
+                self.$closeButton.one('click', function(evt) {
+                    self.stopPropagation(evt);
+                    self.close();
+                });
+
+            if($.inArray('button', self.options.closeWith) == -1)
+                self.$closeButton.remove();
+
+            if(self.options.callback.onShow)
+                self.options.callback.onShow.apply(self);
+
+            if (typeof self.options.animation.open == 'string') {
+                self.$bar.css('height', self.$bar.innerHeight());
+                self.$bar.on('click',function(e){
+                    self.wasClicked = true;
+                });
+                self.$bar.show().addClass(self.options.animation.open).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
+                    if(self.options.callback.afterShow) self.options.callback.afterShow.apply(self);
+                    self.showing = false;
+                    self.shown = true;
+                    if(self.hasOwnProperty('wasClicked')){
+                        self.$bar.off('click',function(e){
+                            self.wasClicked = true;
+                        });
+                        self.close();
+                    }
+                });
+
+            } else {
+                self.$bar.animate(
+                    self.options.animation.open,
+                    self.options.animation.speed,
+                    self.options.animation.easing,
+                    function() {
+                        if(self.options.callback.afterShow) self.options.callback.afterShow.apply(self);
+                        self.showing = false;
+                        self.shown = true;
+                    });
+            }
+
+            // If noty is have a timeout option
+            if(self.options.timeout)
+                self.$bar.delay(self.options.timeout).promise().done(function() {
+                    self.close();
+                });
+
+            return this;
+
+        }, // end show
+
+        close: function() {
+
+            if(this.closed) return;
+            if(this.$bar && this.$bar.hasClass('i-am-closing-now')) return;
+
+            var self = this;
+
+            if(this.showing) {
+                self.$bar.queue(
+                    function() {
+                        self.close.apply(self);
+                    }
+                );
+                return;
+            }
+
+            if(!this.shown && !this.showing) { // If we are still waiting in the queue just delete from queue
+                var queue = [];
+                $.each($.noty.queue, function(i, n) {
+                    if(n.options.id != self.options.id) {
+                        queue.push(n);
+                    }
+                });
+                $.noty.queue = queue;
+                return;
+            }
+
+            self.$bar.addClass('i-am-closing-now');
+
+            if(self.options.callback.onClose) {
+                self.options.callback.onClose.apply(self);
+            }
+
+            if (typeof self.options.animation.close == 'string') {
+                self.$bar.addClass(self.options.animation.close).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
+                    if(self.options.callback.afterClose) self.options.callback.afterClose.apply(self);
+                    self.closeCleanUp();
+                });
+            } else {
+                self.$bar.clearQueue().stop().animate(
+                    self.options.animation.close,
+                    self.options.animation.speed,
+                    self.options.animation.easing,
+                    function() {
+                        if(self.options.callback.afterClose) self.options.callback.afterClose.apply(self);
+                    })
+                    .promise().done(function() {
+                        self.closeCleanUp();
+                    });
+            }
+
+        }, // end close
+
+        closeCleanUp: function() {
+
+            var self = this;
+
+            // Modal Cleaning
+            if(self.options.modal) {
+                $.notyRenderer.setModalCount(-1);
+                if($.notyRenderer.getModalCount() == 0) $('.noty_modal').fadeOut(self.options.animation.fadeSpeed, function() {
+                    $(this).remove();
+                });
+            }
+
+            // Layout Cleaning
+            $.notyRenderer.setLayoutCountFor(self, -1);
+            if($.notyRenderer.getLayoutCountFor(self) == 0) $(self.options.layout.container.selector).remove();
+
+            // Make sure self.$bar has not been removed before attempting to remove it
+            if(typeof self.$bar !== 'undefined' && self.$bar !== null) {
+
+                if (typeof self.options.animation.close == 'string') {
+                    self.$bar.css('transition', 'all 100ms ease').css('border', 0).css('margin', 0).height(0);
+                    self.$bar.one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() {
+                        self.$bar.remove();
+                        self.$bar = null;
+                        self.closed = true;
+
+                        if(self.options.theme.callback && self.options.theme.callback.onClose) {
+                            self.options.theme.callback.onClose.apply(self);
+                        }
+                    });
+                } else {
+                    self.$bar.remove();
+                    self.$bar = null;
+                    self.closed = true;
+                }
+            }
+
+            delete $.noty.store[self.options.id]; // deleting noty from store
+
+            if(self.options.theme.callback && self.options.theme.callback.onClose) {
+                self.options.theme.callback.onClose.apply(self);
+            }
+
+            if(!self.options.dismissQueue) {
+                // Queue render
+                $.noty.ontap = true;
+
+                $.notyRenderer.render();
+            }
+
+            if(self.options.maxVisible > 0 && self.options.dismissQueue) {
+                $.notyRenderer.render();
+            }
+
+        }, // end close clean up
+
+        setText: function(text) {
+            if(!this.closed) {
+                this.options.text = text;
+                this.$bar.find('.noty_text').html(text);
+            }
+            return this;
+        },
+
+        setType: function(type) {
+            if(!this.closed) {
+                this.options.type = type;
+                this.options.theme.style.apply(this);
+                this.options.theme.callback.onShow.apply(this);
+            }
+            return this;
+        },
+
+        setTimeout: function(time) {
+            if(!this.closed) {
+                var self = this;
+                this.options.timeout = time;
+                self.$bar.delay(self.options.timeout).promise().done(function() {
+                    self.close();
+                });
+            }
+            return this;
+        },
+
+        stopPropagation: function(evt) {
+            evt = evt || window.event;
+            if(typeof evt.stopPropagation !== "undefined") {
+                evt.stopPropagation();
+            }
+            else {
+                evt.cancelBubble = true;
+            }
+        },
+
+        closed : false,
+        showing: false,
+        shown  : false
+
+    }; // end NotyObject
+
+    $.notyRenderer = {};
+
+    $.notyRenderer.init = function(options) {
+
+        // Renderer creates a new noty
+        var notification = Object.create(NotyObject).init(options);
+
+        if(notification.options.killer)
+            $.noty.closeAll();
+
+        (notification.options.force) ? $.noty.queue.unshift(notification) : $.noty.queue.push(notification);
+
+        $.notyRenderer.render();
+
+        return ($.noty.returns == 'object') ? notification : notification.options.id;
+    };
+
+    $.notyRenderer.render = function() {
+
+        var instance = $.noty.queue[0];
+
+        if($.type(instance) === 'object') {
+            if(instance.options.dismissQueue) {
+                if(instance.options.maxVisible > 0) {
+                    if($(instance.options.layout.container.selector + ' > li').length < instance.options.maxVisible) {
+                        $.notyRenderer.show($.noty.queue.shift());
+                    }
+                    else {
+
+                    }
+                }
+                else {
+                    $.notyRenderer.show($.noty.queue.shift());
+                }
+            }
+            else {
+                if($.noty.ontap) {
+                    $.notyRenderer.show($.noty.queue.shift());
+                    $.noty.ontap = false;
+                }
+            }
+        }
+        else {
+            $.noty.ontap = true; // Queue is over
+        }
+
+    };
+
+    $.notyRenderer.show = function(notification) {
+
+        if(notification.options.modal) {
+            $.notyRenderer.createModalFor(notification);
+            $.notyRenderer.setModalCount(+1);
+        }
+
+        // Where is the container?
+        if(notification.options.custom) {
+            if(notification.options.custom.find(notification.options.layout.container.selector).length == 0) {
+                notification.options.custom.append($(notification.options.layout.container.object).addClass('i-am-new'));
+            }
+            else {
+                notification.options.custom.find(notification.options.layout.container.selector).removeClass('i-am-new');
+            }
+        }
+        else {
+            if($(notification.options.layout.container.selector).length == 0) {
+                $('body').append($(notification.options.layout.container.object).addClass('i-am-new'));
+            }
+            else {
+                $(notification.options.layout.container.selector).removeClass('i-am-new');
+            }
+        }
+
+        $.notyRenderer.setLayoutCountFor(notification, +1);
+
+        notification.show();
+    };
+
+    $.notyRenderer.createModalFor = function(notification) {
+        if($('.noty_modal').length == 0) {
+            var modal = $('<div/>').addClass('noty_modal').addClass(notification.options.theme).data('noty_modal_count', 0);
+
+            if(notification.options.theme.modal && notification.options.theme.modal.css)
+                modal.css(notification.options.theme.modal.css);
+
+            modal.prependTo($('body')).fadeIn(notification.options.animation.fadeSpeed);
+
+            if($.inArray('backdrop', notification.options.closeWith) > -1)
+                modal.on('click', function(e) {
+                    $.noty.closeAll();
+                });
+        }
+    };
+
+    $.notyRenderer.getLayoutCountFor = function(notification) {
+        return $(notification.options.layout.container.selector).data('noty_layout_count') || 0;
+    };
+
+    $.notyRenderer.setLayoutCountFor = function(notification, arg) {
+        return $(notification.options.layout.container.selector).data('noty_layout_count', $.notyRenderer.getLayoutCountFor(notification) + arg);
+    };
+
+    $.notyRenderer.getModalCount = function() {
+        return $('.noty_modal').data('noty_modal_count') || 0;
+    };
+
+    $.notyRenderer.setModalCount = function(arg) {
+        return $('.noty_modal').data('noty_modal_count', $.notyRenderer.getModalCount() + arg);
+    };
+
+    // This is for custom container
+    $.fn.noty = function(options) {
+        options.custom = $(this);
+        return $.notyRenderer.init(options);
+    };
+
+    $.noty = {};
+    $.noty.queue = [];
+    $.noty.ontap = true;
+    $.noty.layouts = {};
+    $.noty.themes = {};
+    $.noty.returns = 'object';
+    $.noty.store = {};
+
+    $.noty.get = function(id) {
+        return $.noty.store.hasOwnProperty(id) ? $.noty.store[id] : false;
+    };
+
+    $.noty.close = function(id) {
+        return $.noty.get(id) ? $.noty.get(id).close() : false;
+    };
+
+    $.noty.setText = function(id, text) {
+        return $.noty.get(id) ? $.noty.get(id).setText(text) : false;
+    };
+
+    $.noty.setType = function(id, type) {
+        return $.noty.get(id) ? $.noty.get(id).setType(type) : false;
+    };
+
+    $.noty.clearQueue = function() {
+        $.noty.queue = [];
+    };
+
+    $.noty.closeAll = function() {
+        $.noty.clearQueue();
+        $.each($.noty.store, function(id, noty) {
+            noty.close();
+        });
+    };
+
+    var windowAlert = window.alert;
+
+    $.noty.consumeAlert = function(options) {
+        window.alert = function(text) {
+            if(options)
+                options.text = text;
+            else
+                options = {text: text};
+
+            $.notyRenderer.init(options);
+        };
+    };
+
+    $.noty.stopConsumeAlert = function() {
+        window.alert = windowAlert;
+    };
+
+    $.noty.defaults = {
+        layout      : 'top',
+        theme       : 'defaultTheme',
+        type        : 'alert',
+        text        : '',
+        dismissQueue: true,
+        template    : '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
+        animation   : {
+            open  : {height: 'toggle'},
+            close : {height: 'toggle'},
+            easing: 'swing',
+            speed : 500,
+            fadeSpeed: 'fast',
+        },
+        timeout     : false,
+        force       : false,
+        modal       : false,
+        maxVisible  : 5,
+        killer      : false,
+        closeWith   : ['click'],
+        callback    : {
+            onShow      : function() {
+            },
+            afterShow   : function() {
+            },
+            onClose     : function() {
+            },
+            afterClose  : function() {
+            },
+            onCloseClick: function() {
+            }
+        },
+        buttons     : false
+    };
+
+    $(window).on('resize', function() {
+        $.each($.noty.layouts, function(index, layout) {
+            layout.container.style.apply($(layout.container.selector));
+        });
+    });
+
+    // Helpers
+    window.noty = function noty(options) {
+        return $.notyRenderer.init(options);
+    };
+
+$.noty.layouts.bottom = {
+    name     : 'bottom',
+    options  : {},
+    container: {
+        object  : '<ul id="noty_bottom_layout_container" />',
+        selector: 'ul#noty_bottom_layout_container',
+        style   : function() {
+            $(this).css({
+                bottom       : 0,
+                left         : '5%',
+                position     : 'fixed',
+                width        : '90%',
+                height       : 'auto',
+                margin       : 0,
+                padding      : 0,
+                listStyleType: 'none',
+                zIndex       : 9999999
+            });
+        }
+    },
+    parent   : {
+        object  : '<li />',
+        selector: 'li',
+        css     : {}
+    },
+    css      : {
+        display: 'none'
+    },
+    addClass : ''
+};
+
+$.noty.layouts.bottomCenter = {
+    name     : 'bottomCenter',
+    options  : { // overrides options
+
+    },
+    container: {
+        object  : '<ul id="noty_bottomCenter_layout_container" />',
+        selector: 'ul#noty_bottomCenter_layout_container',
+        style   : function() {
+            $(this).css({
+                bottom       : 20,
+                left         : 0,
+                position     : 'fixed',
+                width        : '310px',
+                height       : 'auto',
+                margin       : 0,
+                padding      : 0,
+                listStyleType: 'none',
+                zIndex       : 10000000
+            });
+
+            $(this).css({
+                left: ($(window).width() - $(this).outerWidth(false)) / 2 + 'px'
+            });
+        }
+    },
+    parent   : {
+        object  : '<li />',
+        selector: 'li',
+        css     : {}
+    },
+    css      : {
+        display: 'none',
+        width  : '310px'
+    },
+    addClass : ''
+};
+
+
+$.noty.layouts.bottomLeft = {
+    name     : 'bottomLeft',
+    options  : { // overrides options
+
+    },
+    container: {
+        object  : '<ul id="noty_bottomLeft_layout_container" />',
+        selector: 'ul#noty_bottomLeft_layout_container',
+        style   : function() {
+            $(this).css({
+                bottom       : 20,
+                left         : 20,
+                position     : 'fixed',
+                width        : '310px',
+                height       : 'auto',
+                margin       : 0,
+                padding      : 0,
+                listStyleType: 'none',
+                zIndex       : 10000000
+            });
+
+            if(window.innerWidth < 600) {
+                $(this).css({
+                    left: 5
+                });
+            }
+        }
+    },
+    parent   : {
+        object  : '<li />',
+        selector: 'li',
+        css     : {}
+    },
+    css      : {
+        display: 'none',
+        width  : '310px'
+    },
+    addClass : ''
+};
+$.noty.layouts.bottomRight = {
+    name     : 'bottomRight',
+    options  : { // overrides options
+
+    },
+    container: {
+        object  : '<ul id="noty_bottomRight_layout_container" />',
+        selector: 'ul#noty_bottomRight_layout_container',
+        style   : function() {
+            $(this).css({
+                bottom       : 20,
+                right        : 20,
+                position     : 'fixed',
+                width        : '310px',
+                height       : 'auto',
+                margin       : 0,
+                padding      : 0,
+                listStyleType: 'none',
+                zIndex       : 10000000
+            });
+
+            if(window.innerWidth < 600) {
+                $(this).css({
+                    right: 5
+                });
+            }
+        }
+    },
+    parent   : {
+        object  : '<li />',
+        selector: 'li',
+        css     : {}
+    },
+    css      : {
+        display: 'none',
+        width  : '310px'
+    },
+    addClass : ''
+};
+$.noty.layouts.center = {
+    name     : 'center',
+    options  : { // overrides options
+
+    },
+    container: {
+        object  : '<ul id="noty_center_layout_container" />',
+        selector: 'ul#noty_center_layout_container',
+        style   : function() {
+            $(this).css({
+                position     : 'fixed',
+                width        : '310px',
+                height       : 'auto',
+                margin       : 0,
+                padding      : 0,
+                listStyleType: 'none',
+                zIndex       : 10000000
+            });
+
+            // getting hidden height
+            var dupe = $(this).clone().css({visibility: "hidden", display: "block", position: "absolute", top: 0, left: 0}).attr('id', 'dupe');
+            $("body").append(dupe);
+            dupe.find('.i-am-closing-now').remove();
+            dupe.find('li').css('display', 'block');
+            var actual_height = dupe.height();
+            dupe.remove();
+
+            if($(this).hasClass('i-am-new')) {
+                $(this).css({
+                    left: ($(window).width() - $(this).outerWidth(false)) / 2 + 'px',
+                    top : ($(window).height() - actual_height) / 2 + 'px'
+                });
+            }
+            else {
+                $(this).animate({
+                    left: ($(window).width() - $(this).outerWidth(false)) / 2 + 'px',
+                    top : ($(window).height() - actual_height) / 2 + 'px'
+                }, 500);
+            }
+
+        }
+    },
+    parent   : {
+        object  : '<li />',
+        selector: 'li',
+        css     : {}
+    },
+    css      : {
+        display: 'none',
+        width  : '310px'
+    },
+    addClass : ''
+};
+$.noty.layouts.centerLeft = {
+    name     : 'centerLeft',
+    options  : { // overrides options
+
+    },
+    container: {
+        object  : '<ul id="noty_centerLeft_layout_container" />',
+        selector: 'ul#noty_centerLeft_layout_container',
+        style   : function() {
+            $(this).css({
+                left         : 20,
+                position     : 'fixed',
+                width        : '310px',
+                height       : 'auto',
+                margin       : 0,
+                padding      : 0,
+                listStyleType: 'none',
+                zIndex       : 10000000
+            });
+
+            // getting hidden height
+            var dupe = $(this).clone().css({visibility: "hidden", display: "block", position: "absolute", top: 0, left: 0}).attr('id', 'dupe');
+            $("body").append(dupe);
+            dupe.find('.i-am-closing-now').remove();
+            dupe.find('li').css('display', 'block');
+            var actual_height = dupe.height();
+            dupe.remove();
+
+            if($(this).hasClass('i-am-new')) {
+                $(this).css({
+                    top: ($(window).height() - actual_height) / 2 + 'px'
+                });
+            }
+            else {
+                $(this).animate({
+                    top: ($(window).height() - actual_height) / 2 + 'px'
+                }, 500);
+            }
+
+            if(window.innerWidth < 600) {
+                $(this).css({
+                    left: 5
+                });
+            }
+
+        }
+    },
+    parent   : {
+        object  : '<li />',
+        selector: 'li',
+        css     : {}
+    },
+    css      : {
+        display: 'none',
+        width  : '310px'
+    },
+    addClass : ''
+};
+
+$.noty.layouts.centerRight = {
+    name     : 'centerRight',
+    options  : { // overrides options
+
+    },
+    container: {
+        object  : '<ul id="noty_centerRight_layout_container" />',
+        selector: 'ul#noty_centerRight_layout_container',
+        style   : function() {
+            $(this).css({
+                right        : 20,
+                position     : 'fixed',
+                width        : '310px',
+                height       : 'auto',
+                margin       : 0,
+                padding      : 0,
+                listStyleType: 'none',
+                zIndex       : 10000000
+            });
+
+            // getting hidden height
+            var dupe = $(this).clone().css({visibility: "hidden", display: "block", position: "absolute", top: 0, left: 0}).attr('id', 'dupe');
+            $("body").append(dupe);
+            dupe.find('.i-am-closing-now').remove();
+            dupe.find('li').css('display', 'block');
+            var actual_height = dupe.height();
+            dupe.remove();
+
+            if($(this).hasClass('i-am-new')) {
+                $(this).css({
+                    top: ($(window).height() - actual_height) / 2 + 'px'
+                });
+            }
+            else {
+                $(this).animate({
+                    top: ($(window).height() - actual_height) / 2 + 'px'
+                }, 500);
+            }
+
+            if(window.innerWidth < 600) {
+                $(this).css({
+                    right: 5
+                });
+            }
+
+        }
+    },
+    parent   : {
+        object  : '<li />',
+        selector: 'li',
+        css     : {}
+    },
+    css      : {
+        display: 'none',
+        width  : '310px'
+    },
+    addClass : ''
+};
+$.noty.layouts.inline = {
+    name     : 'inline',
+    options  : {},
+    container: {
+        object  : '<ul class="noty_inline_layout_container" />',
+        selector: 'ul.noty_inline_layout_container',
+        style   : function() {
+            $(this).css({
+                width        : '100%',
+                height       : 'auto',
+                margin       : 0,
+                padding      : 0,
+                listStyleType: 'none',
+                zIndex       : 9999999
+            });
+        }
+    },
+    parent   : {
+        object  : '<li />',
+        selector: 'li',
+        css     : {}
+    },
+    css      : {
+        display: 'none'
+    },
+    addClass : ''
+};
+$.noty.layouts.top = {
+    name     : 'top',
+    options  : {},
+    container: {
+        object  : '<ul id="noty_top_layout_container" />',
+        selector: 'ul#noty_top_layout_container',
+        style   : function() {
+            $(this).css({
+                top          : 0,
+                left         : '5%',
+                position     : 'fixed',
+                width        : '90%',
+                height       : 'auto',
+                margin       : 0,
+                padding      : 0,
+                listStyleType: 'none',
+                zIndex       : 9999999
+            });
+        }
+    },
+    parent   : {
+        object  : '<li />',
+        selector: 'li',
+        css     : {}
+    },
+    css      : {
+        display: 'none'
+    },
+    addClass : ''
+};
+$.noty.layouts.topCenter = {
+    name     : 'topCenter',
+    options  : { // overrides options
+
+    },
+    container: {
+        object  : '<ul id="noty_topCenter_layout_container" />',
+        selector: 'ul#noty_topCenter_layout_container',
+        style   : function() {
+            $(this).css({
+                top          : 20,
+                left         : 0,
+                position     : 'fixed',
+                width        : '310px',
+                height       : 'auto',
+                margin       : 0,
+                padding      : 0,
+                listStyleType: 'none',
+                zIndex       : 10000000
+            });
+
+            $(this).css({
+                left: ($(window).width() - $(this).outerWidth(false)) / 2 + 'px'
+            });
+        }
+    },
+    parent   : {
+        object  : '<li />',
+        selector: 'li',
+        css     : {}
+    },
+    css      : {
+        display: 'none',
+        width  : '310px'
+    },
+    addClass : ''
+};
+
+$.noty.layouts.topLeft = {
+    name     : 'topLeft',
+    options  : { // overrides options
+
+    },
+    container: {
+        object  : '<ul id="noty_topLeft_layout_container" />',
+        selector: 'ul#noty_topLeft_layout_container',
+        style   : function() {
+            $(this).css({
+                top          : 20,
+                left         : 20,
+                position     : 'fixed',
+                width        : '310px',
+                height       : 'auto',
+                margin       : 0,
+                padding      : 0,
+                listStyleType: 'none',
+                zIndex       : 10000000
+            });
+
+            if(window.innerWidth < 600) {
+                $(this).css({
+                    left: 5
+                });
+            }
+        }
+    },
+    parent   : {
+        object  : '<li />',
+        selector: 'li',
+        css     : {}
+    },
+    css      : {
+        display: 'none',
+        width  : '310px'
+    },
+    addClass : ''
+};
+$.noty.layouts.topRight = {
+    name     : 'topRight',
+    options  : { // overrides options
+
+    },
+    container: {
+        object  : '<ul id="noty_topRight_layout_container" />',
+        selector: 'ul#noty_topRight_layout_container',
+        style   : function() {
+            $(this).css({
+                top          : 20,
+                right        : 20,
+                position     : 'fixed',
+                width        : '310px',
+                height       : 'auto',
+                margin       : 0,
+                padding      : 0,
+                listStyleType: 'none',
+                zIndex       : 10000000
+            });
+
+            if(window.innerWidth < 600) {
+                $(this).css({
+                    right: 5
+                });
+            }
+        }
+    },
+    parent   : {
+        object  : '<li />',
+        selector: 'li',
+        css     : {}
+    },
+    css      : {
+        display: 'none',
+        width  : '310px'
+    },
+    addClass : ''
+};
+
+return window.noty;
+
+});
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco b/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco
index c3a04dd8b..d83140f3f 100644
--- a/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco
@@ -39,7 +39,7 @@
         <p>
           Enter the link provided by the plugin at the end of the installation to link the two systems:
         </p>
-        <div class="form-group fromGroup--standalone">
+        <div class="form-group formGroup--standalone">
           <label for="otrs-link">OTRS Link</label>
           <div class="u-positionOrigin">
             <input type="url" id="otrs-link" class="form-control" placeholder="http://otrs.company.de/otrs">
diff --git a/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco b/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco
index ee94c2127..92284fe6d 100644
--- a/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco
@@ -1,624 +1,689 @@
-<div class="main no-padding flex tabsSidebar-sidebarSpacer tabsSidebar-tabsSpacer">
+<div class="tabsSidebar-holder">
+  <div class="main no-padding flex tabsSidebar-sidebarSpacer tabsSidebar-tabsSpacer">
 
-  <div class="ticketZoom">
-    <div class="ticketZoom-controls">
-      <div class="btn btn--action btn--split--first js-highlight">
-        <%- @Icon('marker', 'js-highlight-icon') %>
-      </div>
-      <div class="dropdown dropdown--actions">
-        <div class="btn btn--action btn--split--last btn--slim" id="highlight" data-toggle="dropdown" aria-expanded="true">
-          <%- @Icon('arrow-down') %>
+    <div class="ticketZoom">
+      <div class="ticketZoom-controls">
+        <div class="btn btn--action btn--split--first js-highlight">
+          <%- @Icon('marker', 'js-highlight-icon') %>
+        </div>
+        <div class="dropdown dropdown--actions">
+          <div class="btn btn--action btn--split--last btn--slim" id="highlight" data-toggle="dropdown" aria-expanded="true">
+            <%- @Icon('arrow-down') %>
+          </div>
+          <ul class="dropdown-menu dropdown-menu-right" role="menu">
+            <% for entry, i in @colors: %>
+            <li role="presentation">
+              <a role="menuitem" tabindex="-1" class="js-highlightColor" data-key="<%= i %>">
+                <span class="dropdown-iconSpacer">
+                  <span class="color-swatch icon" style="background: <%= entry.color %>"></span>
+                </span>
+                <%- @Ti(entry.name) %>
+                <span class="dropdown-activeSpacer visibility-change<%= ' is-active' if i is @activeColorIndex %>">
+                  <svg class="icon-checkmark" data-visible="active"><use xlink:href="#icon-checkmark" fill="white" /></svg>
+                </span>
+              </a>
+            <% end %>
+          </ul>
         </div>
-        <ul class="dropdown-menu dropdown-menu-right" role="menu">
-          <% for entry, i in @colors: %>
-          <li role="presentation">
-            <a role="menuitem" tabindex="-1" class="js-highlightColor" data-key="<%= i %>">
-              <span class="dropdown-iconSpacer">
-                <span class="color-swatch icon" style="background: <%= entry.color %>"></span>
-              </span>
-              <%- @Ti(entry.name) %>
-              <span class="dropdown-activeSpacer visibility-change<%= ' is-active' if i is @activeColorIndex %>">
-                <svg class="icon-checkmark" data-visible="active"><use xlink:href="#icon-checkmark" fill="white" /></svg>
-              </span>
-            </a>
-          <% end %>
-        </ul>
       </div>
-    </div>
 
-    <div class="scrollPageHeader tabsSidebar-sidebarSpacer" 
-      data-anchor-target=".ticketZoom .page-header"
-      data-128-top-bottom="transform: translateY(-64px);"
-      data-64-top-bottom="transform: translateY(0px);"
-    >
-      <small>Ticket# <span class="ticket-number">1002</span></small>
-      <div class="ticket-title flex">
-        <h1 contenteditable="true" class="ticket-title-update" data-placeholder="Enter Title...">Welcome to Zammad! We want to entertain you and your whole family!</h1>
-      </div>
-      <div class="pagination-counter">
-        <span class="pagination-item-current">1</span>/<span class="pagination-total-items">36</span>
-      </div>
-      <ul class="pagination">
-        <li>
-          <a class="centered" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page">
-            <%- @Icon('arrow-left') %>
-          </a>
-        <li>
-          <a class="centered" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page">
-            <%- @Icon('arrow-left') %>
-          </a>
-      </ul>
-    </div>
-    <div class="page-header">
-      <div class="flex vertical center">
-        <span class="avatar unique user-popover size-50" data-id="2" style="background-position: -92.79607555375712px -106.24902447601627px;" data-original-title="" title="">NB</span>
-        <div class="ticket-title">
+      <div class="scrollPageHeader tabsSidebar-sidebarSpacer" 
+        data-anchor-target=".ticketZoom .page-header"
+        data-128-top-bottom="transform: translateY(-64px);"
+        data-64-top-bottom="transform: translateY(0px);"
+      >
+        <small>Ticket# <span class="ticket-number">1002</span></small>
+        <div class="ticket-title flex">
           <h1 contenteditable="true" class="ticket-title-update" data-placeholder="Enter Title...">Welcome to Zammad! We want to entertain you and your whole family!</h1>
         </div>
-        <div class="ticket-meta">
-          <small class="task-subline">Ticket# <span class="ticket-number">10001</span> - erstellte <span class="humanTimeFromNow" data-time="2014-07-11T10:10:32.000Z" data-tooltip="11.07.2014 12:10">11.07.2014</span> 
-          </small>
+        <div class="pagination-counter">
+          <span class="pagination-item-current">1</span>/<span class="pagination-total-items">36</span>
         </div>
-      </div>
-    </div>
-
-    <div class="ticket-article">
-      <div class="ticket-article-item customer phone" data-id="1" id="article-1">
-        <div class="article-meta-clip top">
-          <div class="article-content-meta top hide">
-            <div class="article-meta top">
-              <div class="horizontal article-meta-row" title="From: Zammad Feedback <feedback@zammad.org>">
-                <div class="article-meta-key u-textTruncate">From</div>
-                <div class="article-meta-value flex u-textTruncate">Zammad Feedback &lt;feedback@zammad.org&gt;</div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="article-content zIndex-1">
-          <span class="avatar unique user-popover " data-id="2" style="background-position: -96.5079185759074px -112.28590086669901px;" data-placement="left" data-original-title="" title="">NB</span>
-          <div class="flex bubble-gap internal-border">
-            <div class="textBubble">
-              <div class="bubble-arrow"></div>
-              <div class="textBubble-content">
-                <div class="article-text" id="article-1249870934">
-Welcome!
-<br/>
-Thank you for installing Zammad.<br/>
-<br/>
-You will find updates and patches at <a href="http://zammad.org/" title="http://zammad.org/" target="_blank">http://zammad.org/</a>. Online<br/>
-documentation is available at <a href="http://guides.zammad.org/" title="http://guides.zammad.org/" target="_blank">http://guides.zammad.org/</a>. You can also<br/>
-use our forums at <a href="http://forums.zammad.org/" title="http://forums.zammad.org/" target="_blank">http://forums.zammad.org/</a><br/>
-<br/>
-Regards,<br/>
-The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad.org</a> Project
-                </div>
-                <div class="textBubble-overflowContainer">
-                  <div class="btn btn--text js-unfold"><%- @T('See more') %></div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="article-meta-clip bottom">
-          <div class="article-content-meta bottom hide">
-            <div class="article-meta bottom">
-              <div class="horizontal article-meta-row">
-                <div class="article-meta-key">Kanal</div>
-                <div class="article-meta-value">
-                  <svg class="article-meta-icon"><use xlink:href="#icon-phone" /></svg>
-                  phone
-                </div>
-              </div>
-            </div>
-            <div class="article-actions horizontal stretch">
-              <a href="" data-type="internal" class="article-action u-clickable">
-                <svg class="article-action-icon"><use xlink:href="#icon-lock" /></svg>
-                set to internal
-              </a>
-              <a href="#" data-type="reply" class="article-action u-clickable">
-                <svg class="article-meta-icon"><use xlink:href="#icon-reply" /></svg>
-                reply
-              </a>
-              <a href="#ticket/create/1/1" data-type="split" class="article-action u-clickable">
-                <svg class="article-meta-icon"><use xlink:href="#icon-split" /></svg>
-                split
-              </a>
-            </div>
-          </div>
-        </div>
-        <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-07-11T10:10:32.000Z" data-tooltip="2014-07-11 12:10">2014-07-11</time></small>
-      </div>
-
-      <div class="ticket-article-item agent note" data-id="23" id="article-23">      
-        <div class="article-meta-clip top">
-          <div class="article-content-meta top hide">
-            <div class="article-meta top">
-              <div class="horizontal article-meta-row" title="From: Felix Niklas">
-                <div class="article-meta-key u-textTruncate">From</div>
-                <div class="article-meta-value flex u-textTruncate">Felix Niklas</div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="article-content zIndex-1">
-          <span class="avatar user-popover" data-id="3" style="background-image: url(api/v1/users/image/bb100af55234cf61fb6f207636f095f8)" data-placement="right" data-original-title="" title=""></span>
-          <div class="flex bubble-gap internal-border">
-            <div class="textBubble"><div class="bubble-arrow"></div>
-            <div class="article-text" id="article-3509870934">Hallp HP, du kannst dich nur einmal einloggen. Was machst du genau?</div></div>
-          </div>
-        </div>
-        <div class="article-meta-clip bottom">
-          <div class="article-content-meta bottom hide">
-            <div class="article-meta bottom">
-              <div class="horizontal article-meta-row">
-                <div class="article-meta-key">Kanal</div>
-                <div class="article-meta-value">
-                  <svg class="article-meta-icon"><use xlink:href="#icon-note" /></svg>
-                  note
-                </div>
-              </div>
-            </div>
-            <div class="article-actions horizontal stretch">
-              <a href="" data-type="internal" class="article-action u-clickable">
-                <svg class="article-action-icon"><use xlink:href="#icon-lock" /></svg>
-                set to internal
-              </a>
-            </div>
-          </div>
-        </div>
-        <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-08-05T13:34:01.000Z" data-tooltip="2014-08-05 15:34">2014-08-05</time></small>
-      </div>
-
-      <div class="ticket-article-item customer phone" data-id="1" id="article-1">
-        <div class="article-meta-clip top">
-          <div class="article-content-meta top hide">
-            <div class="article-meta top">
-              <div class="horizontal article-meta-row" title="From: Zammad Feedback <feedback@zammad.org>">
-                <div class="article-meta-key u-textTruncate">From</div>
-                <div class="article-meta-value flex u-textTruncate">Zammad Feedback &lt;feedback@zammad.org&gt;</div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="article-content zIndex-1">
-          <span class="avatar unique user-popover " data-id="2" style="background-position: -96.5079185759074px -112.28590086669901px;" data-placement="left" data-original-title="" title="">NB</span>
-          <div class="flex bubble-gap internal-border">
-            <div class="textBubble"><div class="bubble-arrow"></div><div class="article-text" id="article-35098758344">Ich wollte mir die Lyrics von Maria herunterladen, aber ich schaff es einfach nicht, da raufzukommen. Schick mir bitte mein Passwort.
-
-Grüße, Peter</div></div>
-          </div>
-        </div>
-        <div class="article-meta-clip bottom">
-          <div class="article-content-meta bottom hide">
-            <div class="article-meta bottom">
-              <div class="horizontal article-meta-row">
-                <div class="article-meta-key">Kanal</div>
-                <div class="article-meta-value">
-                  <span class="white phone channel icon"></span>
-                  phone
-                </div>
-              </div>
-            </div>
-            <div class="article-actions horizontal stretch">
-              <a href="" data-type="internal" class="article-action u-clickable">
-                <svg class="article-action-icon"><use xlink:href="#icon-lock" /></svg>
-                set to internal
-              </a>
-              <a href="#" data-type="reply" class="article-action u-clickable">
-                <svg class="article-meta-icon"><use xlink:href="#icon-reply" /></svg>
-                reply
-              </a>
-              <a href="#ticket/create/1/1" data-type="split" class="article-action u-clickable">
-                <svg class="article-meta-icon"><use xlink:href="#icon-split" /></svg>
-                split
-              </a>
-            </div>
-          </div>
-        </div>
-        <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-07-11T10:10:32.000Z" data-tooltip="2014-07-11 12:10">2014-07-11</time></small>
-      </div>
-
-      <div class="ticket-article-item agent note" data-id="23" id="article-23">      
-        <div class="article-meta-clip top">
-          <div class="article-content-meta top hide">
-            <div class="article-meta top">
-              <div class="horizontal article-meta-row" title="From: Felix Niklas">
-                <div class="article-meta-key u-textTruncate">From</div>
-                <div class="article-meta-value flex u-textTruncate">Felix Niklas</div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="article-content zIndex-1">
-          <span class="avatar user-popover " data-id="3" style="background-image: url(api/v1/users/image/bb100af55234cf61fb6f207636f095f8)" data-placement="right" data-original-title="" title=""></span>
-          <div class="flex bubble-gap internal-border">
-            <div class="textBubble">
-              <div class="bubble-arrow"></div>
-              <div class="textBubble-content"><div class="article-text" id="article-350234270934">Lieber HP,<br>
-anbei findest du die Midi Noten für Maria Maria "I Like it Loud".<br>
-Wünsche dir einen guten Auftritt in Hamburg.<br>
-<br>
-Deine Frau bekommt ein Kind haben wir gehört.<br>
-Gratulation dazu! Wir schicken dir was liebes.<br>
-<br>
-Und wenn du noch mal Probleme mit der Stimme hast sag bescheid – ich kenn da ein Wundermittel.<br>
-<br>
-Das ist eine Pille von einem Druiden aus dem Bayerischen Wald. Die ölt einem so richtig die Stimmbänder.<br>
-<br>
-Verwende ich immer wenn ich meine Frau anschreien will. Die macht meinen Tenor richtig zum Löwen.<br>
-<br>
-Ach ja und dein Freund Tim. Richt dem mal aus dass er das doch bitte sein lassen soll mit den Anrufen.<br>
-<br>Ich weiß schon dass ich ein hübscher bin. Aber ich hab ihm schon tausend mal gesagt, dass ich seine Gefühle leider nicht erwiedern kann.<br>
-<br>
-Bin verheiratet, hab Kind. Is doch offensichtlich, Junge!<br>
-Alles gute,<br>
-Oliver<br></div>
-                <div class="textBubble-overflowContainer">
-                  <div class="btn btn--text js-unfold"><%- @T('See more') %></div>
-                </div>
-              </div>
-              <div class="attachments">
-                <svg class="icon-paperclip"><use xlink:href="#icon-paperclip" /></svg>
-                <div class="attachments-title">2 <%- @T('Attached Files') %></div>
-                <div class="attachment">
-                  <div class="attachment-name u-highlight">midinotes_view.jpg</div>
-                  <div class="attachment-size">35.5 kb</div>
-                </div>
-                <div class="attachment">
-                  <div class="attachment-name u-highlight">lyrics_I_Like_it_Loud.txt</div>
-                  <div class="attachment-size">17.1 kb</div>
-                </div>
-                <div class="attachment">
-                  <div class="attachment-name u-highlight">something with very long line which is slonger as the container arount it if you can see it I wish you a very happy day.txt</div>
-                  <div class="attachment-size">17.1 kb</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="article-meta-clip bottom">
-          <div class="article-content-meta bottom hide">
-            <div class="article-meta bottom">
-              <div class="horizontal article-meta-row">
-                <div class="article-meta-key">Kanal</div>
-                <div class="article-meta-value">
-                  <svg class="article-meta-icon"><use xlink:href="#icon-note" /></svg>
-                  note
-                </div>
-              </div>
-            </div>
-            <div class="article-actions horizontal stretch">
-              <a href="" data-type="internal" class="article-action u-clickable">
-              <svg class="article-action-icon"><use xlink:href="#icon-lock" /></svg>
-                set to internal
-              </a>
-            </div>
-          </div>
-        </div>
-        <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-08-05T13:34:01.000Z" data-tooltip="2014-08-05 15:34">2014-08-05</time></small>
-      </div>
-    </div>
-  </div>
-
-</div>
-
-<div class="tabsSidebar tabsSidebar--attributeBarSpacer vertical">
-  <div class="sidebar bottom-form-shadow flex" data-tab="ticket">
-    <div class="sidebar-header">
-      <h2 class="sidebar-header-headline js-headline">
-        Ticket
-      </h2>
-      <div class="sidebar-header-actions js-actions">
-        <div class="dropdown dropdown--actions">
-          <div class="dropdown-toggle" data-toggle="dropdown" id="userAction"></div>
-          <ul aria-labelledby="userAction" class="dropdown-menu dropdown-menu-right" role="menu">
-            <li role="presentation">
-              <a data-type="ticket-history" href="#" role="menuitem" tabindex="-1">History</a>
-            </li>
-            <li role="presentation">
-              <a data-type="ticket-merge" href="#" role="menuitem" tabindex="-1">Merge</a>
-            </li>
-            <li role="presentation">
-              <a data-type="customer-change" href="#" role="menuitem" tabindex="-1">Change Customer</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="tabsSidebar-close"></div>
-    </div>
-    <hr>
-    <div class="sidebar-content">
-      <form class="edit">
-        <fieldset>
-          <div class="select form-group">
-            <div class="formGroup-label">
-              <label for="Ticket_187247_group_id">Group <span>*</span></label>
-            </div>
-            <div class="controls">
-              <div class="u-positionOrigin">
-                <select class="form-control" id="Ticket_187247_group_id" name="group_id" required="">
-                  <option value="">
-                    -
-                  </option>
-                  <option value="15">
-                    FillGroup::124782
-                  </option>
-                  <option value="6">
-                    FillGroup::180684
-                  </option>
-                  <option value="2">
-                    FillGroup::206709
-                  </option>
-                  <option value="16">
-                    FillGroup::240252
-                  </option>
-                  <option value="19">
-                    FillGroup::316438
-                  </option>
-                  <option value="3">
-                    FillGroup::331147
-                  </option>
-                  <option value="4">
-                    FillGroup::370967
-                  </option>
-                  <option value="9">
-                    FillGroup::371994
-                  </option>
-                  <option value="5">
-                    FillGroup::387404
-                  </option>
-                  <option value="7">
-                    FillGroup::505241
-                  </option>
-                  <option value="21">
-                    FillGroup::596513
-                  </option>
-                  <option value="12">
-                    FillGroup::661322
-                  </option>
-                  <option value="11">
-                    FillGroup::707393
-                  </option>
-                  <option value="17">
-                    FillGroup::808471
-                  </option>
-                  <option value="18">
-                    FillGroup::854423
-                  </option>
-                  <option value="8">
-                    FillGroup::894121
-                  </option>
-                  <option value="14">
-                    FillGroup::907762
-                  </option>
-                  <option value="20">
-                    FillGroup::927450
-                  </option>
-                  <option value="10">
-                    FillGroup::957248
-                  </option>
-                  <option value="13">
-                    FillGroup::975373
-                  </option>
-                  <option selected value="1">
-                    Users
-                  </option>
-                </select>
-              </div><span class="help-inline"></span> <span class="help-block"></span>
-            </div>
-          </div>
-          <div class="select form-group">
-            <div class="formGroup-label">
-              <label for="Ticket_187247_owner_id">Owner <span></span></label>
-            </div>
-            <div class="controls">
-              <div class="u-positionOrigin">
-                <select class="form-control" id="Ticket_187247_owner_id" name="owner_id">
-                  <option value="">
-                    -
-                  </option>
-                  <option value="3">
-                    Felix Niklas
-                  </option>
-                  <option selected value="4">
-                    Hans Huber
-                  </option>
-                </select>
-              </div><span class="help-inline"></span> <span class="help-block"></span>
-            </div>
-          </div>
-          <div class="select form-group">
-            <div class="formGroup-label">
-              <label for="Ticket_187247_state_id">State <span>*</span></label>
-            </div>
-            <div class="controls">
-              <div class="u-positionOrigin">
-                <select class="form-control" id="Ticket_187247_state_id" name="state_id" required="">
-                  <option value="4">
-                    closed
-                  </option>
-                  <option value="2">
-                    open
-                  </option>
-                  <option selected value="7">
-                    pending close
-                  </option>
-                  <option value="3">
-                    pending reminder
-                  </option>
-                </select>
-              </div><span class="help-inline"></span> <span class="help-block"></span>
-            </div>
-          </div>
-          <div class="datetime form-group">
-            <div class="formGroup-label">
-              <label for="Ticket_187247_pending_time">Pending till <span>*</span></label>
-            </div>
-            <div class="controls">
-              <input type="text" class="form-control js-datepicker">
-            </div>
-          </div>
-          <div class="select form-group">
-            <div class="formGroup-label">
-              <label for="Ticket_187247_priority_id">Priority <span>*</span></label>
-            </div>
-            <div class="controls">
-              <div class="u-positionOrigin">
-                <select class="form-control" id="Ticket_187247_priority_id" name="priority_id" required="">
-                  <option selected value="1">
-                    1 low
-                  </option>
-                  <option value="2">
-                    2 normal
-                  </option>
-                  <option value="3">
-                    3 high
-                  </option>
-                </select>
-              </div><span class="help-inline"></span> <span class="help-block"></span>
-            </div>
-          </div>
-        </fieldset>
-      </form>
-      <div class="tags">
-        <label>Tags</label>
-        <ul class="list list--sidebar">
-          <li class="list-item">
-            <div class="list-item-name">
-              test
-            </div>
-            <div class="list-item-delete js-delete"></div>
-          </li>
-          <li class="list-item">
-            <div class="list-item-name">
-              123
-            </div>
-            <div class="list-item-delete js-delete"></div>
-          </li>
-          <li class="list-item">
-            <div class="list-item-name">
-              planeten
-            </div>
-            <div class="list-item-delete js-delete"></div>
-          </li>
+        <ul class="pagination">
+          <li>
+            <a class="centered" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page">
+              <%- @Icon('arrow-left') %>
+            </a>
+          <li>
+            <a class="centered" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page">
+              <%- @Icon('arrow-left') %>
+            </a>
         </ul>
-        <div class="text-muted js-newTagLabel u-clickable">
-          + Add Tag
-        </div>
-        <form>
-          <input autocomplete="off" class="hide js-newTagInput" name="new_tag" type="text">
-        </form>
       </div>
-      <div class="links">
-        <label>Links</label>
-        <div class="ticketLinks">
-          <div class="list-title">
-            child
+      <div class="page-header">
+        <div class="flex vertical center">
+          <span class="avatar unique user-popover size-50" data-id="2" style="background-position: -92.79607555375712px -106.24902447601627px;" data-original-title="" title="">NB</span>
+          <div class="ticket-title">
+            <h1 contenteditable="true" class="ticket-title-update" data-placeholder="Enter Title...">Welcome to Zammad! We want to entertain you and your whole family!</h1>
           </div>
-          <ol class="tasks tasks--standalone">
-            <li class="task">
-              <div class="icon-holder"></div>
-              <div class="task-text">
-                <a class="name ticket-popover" data-id="3" href="#ticket/zoom/3">Noch mehr Tickets bitte</a> <time class="humanTimeFromNow" data-time="2015-01-20T11:47:43.000Z" data-tooltip="01/20/2015 12:47">01/20/2015</time>
+          <div class="ticket-meta">
+            <small class="task-subline">Ticket# <span class="ticket-number">10001</span> - erstellte <span class="humanTimeFromNow" data-time="2014-07-11T10:10:32.000Z" data-tooltip="11.07.2014 12:10">11.07.2014</span> 
+            </small>
+          </div>
+        </div>
+      </div>
+
+      <div class="ticket-article">
+        <div class="ticket-article-item customer phone" data-id="1" id="article-1">
+          <div class="article-meta-clip top">
+            <div class="article-content-meta top hide">
+              <div class="article-meta top">
+                <div class="horizontal article-meta-row" title="From: Zammad Feedback <feedback@zammad.org>">
+                  <div class="article-meta-key u-textTruncate">From</div>
+                  <div class="article-meta-value flex u-textTruncate">Zammad Feedback &lt;feedback@zammad.org&gt;</div>
+                </div>
               </div>
-              <div class="list-item-delete js-delete" data-link-type="child" data-object="Ticket" data-object-id="3" data-type="remove"></div>
-            </li>
-          </ol>
+            </div>
+          </div>
+          <div class="article-content zIndex-1">
+            <span class="avatar unique user-popover " data-id="2" style="background-position: -96.5079185759074px -112.28590086669901px;" data-placement="left" data-original-title="" title="">NB</span>
+            <div class="flex bubble-gap internal-border">
+              <div class="textBubble">
+                <div class="bubble-arrow"></div>
+                <div class="textBubble-content">
+                  <div class="article-text" id="article-1249870934">
+  Welcome!
+  <br/>
+  Thank you for installing Zammad.<br/>
+  <br/>
+  You will find updates and patches at <a href="http://zammad.org/" title="http://zammad.org/" target="_blank">http://zammad.org/</a>. Online<br/>
+  documentation is available at <a href="http://guides.zammad.org/" title="http://guides.zammad.org/" target="_blank">http://guides.zammad.org/</a>. You can also<br/>
+  use our forums at <a href="http://forums.zammad.org/" title="http://forums.zammad.org/" target="_blank">http://forums.zammad.org/</a><br/>
+  <br/>
+  Regards,<br/>
+  The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad.org</a> Project
+                  </div>
+                  <div class="textBubble-overflowContainer">
+                    <div class="btn btn--text js-unfold"><%- @T('See more') %></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="article-meta-clip bottom">
+            <div class="article-content-meta bottom hide">
+              <div class="article-meta bottom">
+                <div class="horizontal article-meta-row">
+                  <div class="article-meta-key">Kanal</div>
+                  <div class="article-meta-value">
+                    <svg class="article-meta-icon"><use xlink:href="#icon-phone" /></svg>
+                    phone
+                  </div>
+                </div>
+              </div>
+              <div class="article-actions horizontal stretch">
+                <a href="" data-type="internal" class="article-action u-clickable">
+                  <svg class="article-action-icon"><use xlink:href="#icon-lock" /></svg>
+                  set to internal
+                </a>
+                <a href="#" data-type="reply" class="article-action u-clickable">
+                  <svg class="article-meta-icon"><use xlink:href="#icon-reply" /></svg>
+                  reply
+                </a>
+                <a href="#ticket/create/1/1" data-type="split" class="article-action u-clickable">
+                  <svg class="article-meta-icon"><use xlink:href="#icon-split" /></svg>
+                  split
+                </a>
+              </div>
+            </div>
+          </div>
+          <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-07-11T10:10:32.000Z" data-tooltip="2014-07-11 12:10">2014-07-11</time></small>
         </div>
-        <div class="text-muted u-clickable js-add">
-          + Add Link
+
+        <div class="ticket-article-item agent note" data-id="23" id="article-23">      
+          <div class="article-meta-clip top">
+            <div class="article-content-meta top hide">
+              <div class="article-meta top">
+                <div class="horizontal article-meta-row" title="From: Felix Niklas">
+                  <div class="article-meta-key u-textTruncate">From</div>
+                  <div class="article-meta-value flex u-textTruncate">Felix Niklas</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="article-content zIndex-1">
+            <span class="avatar user-popover" data-id="3" style="background-image: url(api/v1/users/image/bb100af55234cf61fb6f207636f095f8)" data-placement="right" data-original-title="" title=""></span>
+            <div class="flex bubble-gap internal-border">
+              <div class="textBubble"><div class="bubble-arrow"></div>
+              <div class="article-text" id="article-3509870934">Hallp HP, du kannst dich nur einmal einloggen. Was machst du genau?</div></div>
+            </div>
+          </div>
+          <div class="article-meta-clip bottom">
+            <div class="article-content-meta bottom hide">
+              <div class="article-meta bottom">
+                <div class="horizontal article-meta-row">
+                  <div class="article-meta-key">Kanal</div>
+                  <div class="article-meta-value">
+                    <svg class="article-meta-icon"><use xlink:href="#icon-note" /></svg>
+                    note
+                  </div>
+                </div>
+              </div>
+              <div class="article-actions horizontal stretch">
+                <a href="" data-type="internal" class="article-action u-clickable">
+                  <svg class="article-action-icon"><use xlink:href="#icon-lock" /></svg>
+                  set to internal
+                </a>
+              </div>
+            </div>
+          </div>
+          <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-08-05T13:34:01.000Z" data-tooltip="2014-08-05 15:34">2014-08-05</time></small>
+        </div>
+
+        <div class="ticket-article-item customer phone" data-id="1" id="article-1">
+          <div class="article-meta-clip top">
+            <div class="article-content-meta top hide">
+              <div class="article-meta top">
+                <div class="horizontal article-meta-row" title="From: Zammad Feedback <feedback@zammad.org>">
+                  <div class="article-meta-key u-textTruncate">From</div>
+                  <div class="article-meta-value flex u-textTruncate">Zammad Feedback &lt;feedback@zammad.org&gt;</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="article-content zIndex-1">
+            <span class="avatar unique user-popover " data-id="2" style="background-position: -96.5079185759074px -112.28590086669901px;" data-placement="left" data-original-title="" title="">NB</span>
+            <div class="flex bubble-gap internal-border">
+              <div class="textBubble"><div class="bubble-arrow"></div><div class="article-text" id="article-35098758344">Ich wollte mir die Lyrics von Maria herunterladen, aber ich schaff es einfach nicht, da raufzukommen. Schick mir bitte mein Passwort.
+
+  Grüße, Peter</div></div>
+            </div>
+          </div>
+          <div class="article-meta-clip bottom">
+            <div class="article-content-meta bottom hide">
+              <div class="article-meta bottom">
+                <div class="horizontal article-meta-row">
+                  <div class="article-meta-key">Kanal</div>
+                  <div class="article-meta-value">
+                    <span class="white phone channel icon"></span>
+                    phone
+                  </div>
+                </div>
+              </div>
+              <div class="article-actions horizontal stretch">
+                <a href="" data-type="internal" class="article-action u-clickable">
+                  <svg class="article-action-icon"><use xlink:href="#icon-lock" /></svg>
+                  set to internal
+                </a>
+                <a href="#" data-type="reply" class="article-action u-clickable">
+                  <svg class="article-meta-icon"><use xlink:href="#icon-reply" /></svg>
+                  reply
+                </a>
+                <a href="#ticket/create/1/1" data-type="split" class="article-action u-clickable">
+                  <svg class="article-meta-icon"><use xlink:href="#icon-split" /></svg>
+                  split
+                </a>
+              </div>
+            </div>
+          </div>
+          <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-07-11T10:10:32.000Z" data-tooltip="2014-07-11 12:10">2014-07-11</time></small>
+        </div>
+
+        <div class="ticket-article-item agent note" data-id="23" id="article-23">      
+          <div class="article-meta-clip top">
+            <div class="article-content-meta top hide">
+              <div class="article-meta top">
+                <div class="horizontal article-meta-row" title="From: Felix Niklas">
+                  <div class="article-meta-key u-textTruncate">From</div>
+                  <div class="article-meta-value flex u-textTruncate">Felix Niklas</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="article-content zIndex-1">
+            <span class="avatar user-popover " data-id="3" style="background-image: url(api/v1/users/image/bb100af55234cf61fb6f207636f095f8)" data-placement="right" data-original-title="" title=""></span>
+            <div class="flex bubble-gap internal-border">
+              <div class="textBubble">
+                <div class="bubble-arrow"></div>
+                <div class="textBubble-content"><div class="article-text" id="article-350234270934">Lieber HP,<br>
+  anbei findest du die Midi Noten für Maria Maria "I Like it Loud".<br>
+  Wünsche dir einen guten Auftritt in Hamburg.<br>
+  <br>
+  Deine Frau bekommt ein Kind haben wir gehört.<br>
+  Gratulation dazu! Wir schicken dir was liebes.<br>
+  <br>
+  Und wenn du noch mal Probleme mit der Stimme hast sag bescheid – ich kenn da ein Wundermittel.<br>
+  <br>
+  Das ist eine Pille von einem Druiden aus dem Bayerischen Wald. Die ölt einem so richtig die Stimmbänder.<br>
+  <br>
+  Verwende ich immer wenn ich meine Frau anschreien will. Die macht meinen Tenor richtig zum Löwen.<br>
+  <br>
+  Ach ja und dein Freund Tim. Richt dem mal aus dass er das doch bitte sein lassen soll mit den Anrufen.<br>
+  <br>Ich weiß schon dass ich ein hübscher bin. Aber ich hab ihm schon tausend mal gesagt, dass ich seine Gefühle leider nicht erwiedern kann.<br>
+  <br>
+  Bin verheiratet, hab Kind. Is doch offensichtlich, Junge!<br>
+  Alles gute,<br>
+  Oliver<br></div>
+                  <div class="textBubble-overflowContainer">
+                    <div class="btn btn--text js-unfold"><%- @T('See more') %></div>
+                  </div>
+                </div>
+                <div class="attachments">
+                  <svg class="icon-paperclip"><use xlink:href="#icon-paperclip" /></svg>
+                  <div class="attachments-title">2 <%- @T('Attached Files') %></div>
+                  <div class="attachment">
+                    <div class="attachment-name u-highlight">midinotes_view.jpg</div>
+                    <div class="attachment-size">35.5 kb</div>
+                  </div>
+                  <div class="attachment">
+                    <div class="attachment-name u-highlight">lyrics_I_Like_it_Loud.txt</div>
+                    <div class="attachment-size">17.1 kb</div>
+                  </div>
+                  <div class="attachment">
+                    <div class="attachment-name u-highlight">something with very long line which is slonger as the container arount it if you can see it I wish you a very happy day.txt</div>
+                    <div class="attachment-size">17.1 kb</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="article-meta-clip bottom">
+            <div class="article-content-meta bottom hide">
+              <div class="article-meta bottom">
+                <div class="horizontal article-meta-row">
+                  <div class="article-meta-key">Kanal</div>
+                  <div class="article-meta-value">
+                    <svg class="article-meta-icon"><use xlink:href="#icon-note" /></svg>
+                    note
+                  </div>
+                </div>
+              </div>
+              <div class="article-actions horizontal stretch">
+                <a href="" data-type="internal" class="article-action u-clickable">
+                <svg class="article-action-icon"><use xlink:href="#icon-lock" /></svg>
+                  set to internal
+                </a>
+              </div>
+            </div>
+          </div>
+          <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-08-05T13:34:01.000Z" data-tooltip="2014-08-05 15:34">2014-08-05</time></small>
         </div>
       </div>
     </div>
+
   </div>
-  <div class="sidebar bottom-form-shadow flex hide" data-tab="customer">
-    <div class="sidebar-header">
-      <h2 class="sidebar-header-headline js-headline">
-        Customer
-      </h2>
-      <div class="sidebar-header-actions js-actions">
-        <div class="dropdown dropdown--actions">
-          <div class="dropdown-toggle" data-toggle="dropdown" id="userAction"></div>
-          <ul aria-labelledby="userAction" class="dropdown-menu dropdown-menu-right" role="menu">
-            <li role="presentation">
-              <a data-type="customer-change" href="#" role="menuitem" tabindex="-1">Change Customer</a>
-            </li>
-            <li role="presentation">
-              <a data-type="customer-edit" href="#" role="menuitem" tabindex="-1">Edit Customer</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="tabsSidebar-close"></div>
-    </div>
-    <hr>
-    <div class="sidebar-content">
-      <div class="sidebar-block">
-        <span class="avatar unique userInfo-avatar size-50 user-popover" data-id="2" style="background-position: -92.79607555375712px -106.24902447601627px;">NB</span>
-        <h3 title="Name">
-          Nicole Braun
-        </h3>
-      </div>
-      <div class="sidebar-block">
-        <label>Email</label> nicole.braun@zammad.org
-      </div>
-      <div class="sidebar-block">
-        <label>Note</label>
-        <div contenteditable="true" data-name="note" data-placeholder="Add a Note" data-type="update"></div>
-      </div>
-      <div class="sidebar-block">
-        <label>Tickets</label> <span class="user-tickets" data-original-title="Open Tickets" data-type="open" style="" title="">open <span class="count">(5)</span></span>
-      </div>
-    </div>
-  </div>
-  <div class="sidebar bottom-form-shadow flex hide" data-tab="organization">
-    <div class="sidebar-header">
-      <h2 class="sidebar-header-headline js-headline">
-        Organization
-      </h2>
-      <div class="sidebar-header-actions js-actions">
-        <div class="dropdown dropdown--actions">
-          <div class="dropdown-toggle" data-toggle="dropdown" id="userAction"></div>
-          <ul aria-labelledby="userAction" class="dropdown-menu dropdown-menu-right" role="menu">
-            <li role="presentation">
-              <a data-type="organization-edit" href="#" role="menuitem" tabindex="-1">Edit Organization</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="tabsSidebar-close"></div>
-    </div>
-    <hr>
-    <div class="sidebar-content">
-      <div class="sidebar-block">
-        <div class="avatar organizationInfo-avatar size-50">
-          <a href="#organization/profile/1"></a>
-        </div>
-        <h3 title="Name">
-          Zammad Foundation
-        </h3>
-      </div>
-      <div class="sidebar-block">
-        <label>Shared organization</label> Yes
-      </div>
-      <div class="sidebar-block">
-        <label>Note</label>
-        <div contenteditable="true" data-name="note" data-placeholder="Add a Note" data-type="update-org">
-          Wir sand ausm Woid!
+
+  <div class="tabsSidebar tabsSidebar--attributeBarSpacer vertical">
+    <div class="sidebar bottom-form-shadow flex" data-tab="ticket">
+      <div class="sidebar-header">
+        <h2 class="sidebar-header-headline js-headline">
+          Ticket
+        </h2>
+        <div class="sidebar-header-actions js-actions">
+          <div class="dropdown dropdown--actions">
+            <div class="dropdown-toggle" data-toggle="dropdown" id="userAction"></div>
+            <ul aria-labelledby="userAction" class="dropdown-menu dropdown-menu-right" role="menu">
+              <li role="presentation">
+                <a data-type="ticket-history" href="#" role="menuitem" tabindex="-1">History</a>
+              </li>
+              <li role="presentation">
+                <a data-type="ticket-merge" href="#" role="menuitem" tabindex="-1">Merge</a>
+              </li>
+              <li role="presentation">
+                <a data-type="customer-change" href="#" role="menuitem" tabindex="-1">Change Customer</a>
+              </li>
+            </ul>
+          </div>
         </div>
+        <div class="tabsSidebar-close"></div>
       </div>
       <hr>
-      <label>Members</label>
-      <ul class="userList">
-        <li>
-          <span class="avatar unique size-40 user-popover" data-id="2" data-original-title="" style="background-position: -96.5079185759074px -112.28590086669901px;" title="">NB</span> <a class="user-popover" data-id="2" data-original-title="" href="#user/profile/2" title="">Nicole Braun</a>
-        </li>
-      </ul>
+      <div class="sidebar-content">
+        <form class="edit">
+          <fieldset>
+            <div class="select form-group">
+              <div class="formGroup-label">
+                <label for="Ticket_187247_group_id">Group <span>*</span></label>
+              </div>
+              <div class="controls">
+                <div class="u-positionOrigin">
+                  <select class="form-control" id="Ticket_187247_group_id" name="group_id" required="">
+                    <option value="">
+                      -
+                    </option>
+                    <option value="15">
+                      FillGroup::124782
+                    </option>
+                    <option value="6">
+                      FillGroup::180684
+                    </option>
+                    <option value="2">
+                      FillGroup::206709
+                    </option>
+                    <option value="16">
+                      FillGroup::240252
+                    </option>
+                    <option value="19">
+                      FillGroup::316438
+                    </option>
+                    <option value="3">
+                      FillGroup::331147
+                    </option>
+                    <option value="4">
+                      FillGroup::370967
+                    </option>
+                    <option value="9">
+                      FillGroup::371994
+                    </option>
+                    <option value="5">
+                      FillGroup::387404
+                    </option>
+                    <option value="7">
+                      FillGroup::505241
+                    </option>
+                    <option value="21">
+                      FillGroup::596513
+                    </option>
+                    <option value="12">
+                      FillGroup::661322
+                    </option>
+                    <option value="11">
+                      FillGroup::707393
+                    </option>
+                    <option value="17">
+                      FillGroup::808471
+                    </option>
+                    <option value="18">
+                      FillGroup::854423
+                    </option>
+                    <option value="8">
+                      FillGroup::894121
+                    </option>
+                    <option value="14">
+                      FillGroup::907762
+                    </option>
+                    <option value="20">
+                      FillGroup::927450
+                    </option>
+                    <option value="10">
+                      FillGroup::957248
+                    </option>
+                    <option value="13">
+                      FillGroup::975373
+                    </option>
+                    <option selected value="1">
+                      Users
+                    </option>
+                  </select>
+                </div><span class="help-inline"></span> <span class="help-block"></span>
+              </div>
+            </div>
+            <div class="select form-group">
+              <div class="formGroup-label">
+                <label for="Ticket_187247_owner_id">Owner <span></span></label>
+              </div>
+              <div class="controls">
+                <div class="u-positionOrigin">
+                  <select class="form-control" id="Ticket_187247_owner_id" name="owner_id">
+                    <option value="">
+                      -
+                    </option>
+                    <option value="3">
+                      Felix Niklas
+                    </option>
+                    <option selected value="4">
+                      Hans Huber
+                    </option>
+                  </select>
+                </div><span class="help-inline"></span> <span class="help-block"></span>
+              </div>
+            </div>
+            <div class="select form-group">
+              <div class="formGroup-label">
+                <label for="Ticket_187247_state_id">State <span>*</span></label>
+              </div>
+              <div class="controls">
+                <div class="u-positionOrigin">
+                  <select class="form-control" id="Ticket_187247_state_id" name="state_id" required="">
+                    <option value="4">
+                      closed
+                    </option>
+                    <option value="2">
+                      open
+                    </option>
+                    <option selected value="7">
+                      pending close
+                    </option>
+                    <option value="3">
+                      pending reminder
+                    </option>
+                  </select>
+                  <%- @Icon('arrow-down', 'dropdown-arrow') %>
+                </div><span class="help-inline"></span> <span class="help-block"></span>
+              </div>
+            </div>
+            <div class="formGroup-bundle">
+              <div class="date form-group flex">
+                <div class="formGroup-label">
+                  <label for="Ticket_187247_pending_time">Pending till <span>*</span></label>
+                </div>
+                <div class="controls">
+                  <input type="text" value="10/28/2015" class="form-control js-datepicker">
+                </div>
+              </div>
+              <div class="formGroup-bundle-label">at</div>
+              <div class="datetime form-group">
+                <div class="controls">
+                  <input type="text" value="08:00" class="form-control time js-timepicker">
+                </div>
+              </div>
+            </div>
+            <div class="select form-group">
+              <div class="formGroup-label">
+                <label for="Ticket_187247_priority_id">Priority <span>*</span></label>
+              </div>
+              <div class="controls">
+                <div class="u-positionOrigin">
+                  <select class="form-control" id="Ticket_187247_priority_id" name="priority_id" required="">
+                    <option selected value="1">
+                      1 low
+                    </option>
+                    <option value="2">
+                      2 normal
+                    </option>
+                    <option value="3">
+                      3 high
+                    </option>
+                  </select>
+                  <%- @Icon('arrow-down', 'dropdown-arrow') %>
+                </div><span class="help-inline"></span> <span class="help-block"></span>
+              </div>
+            </div>
+          </fieldset>
+        </form>
+        <div class="tags">
+          <label>Tags</label>
+          <ul class="list list--sidebar">
+            <li class="list-item">
+              <div class="list-item-name">
+                test
+              </div>
+              <div class="list-item-delete js-delete"></div>
+            </li>
+            <li class="list-item">
+              <div class="list-item-name">
+                123
+              </div>
+              <div class="list-item-delete js-delete"></div>
+            </li>
+            <li class="list-item">
+              <div class="list-item-name">
+                planeten
+              </div>
+              <div class="list-item-delete js-delete"></div>
+            </li>
+          </ul>
+          <div class="text-muted js-newTagLabel u-clickable">
+            + Add Tag
+          </div>
+          <form>
+            <input autocomplete="off" class="hide js-newTagInput" name="new_tag" type="text">
+          </form>
+        </div>
+        <div class="links">
+          <label>Links</label>
+          <div class="ticketLinks">
+            <div class="list-title">
+              child
+            </div>
+            <ol class="tasks tasks--standalone">
+              <li class="task">
+                <div class="icon-holder"></div>
+                <div class="task-text">
+                  <a class="name ticket-popover" data-id="3" href="#ticket/zoom/3">Noch mehr Tickets bitte</a> <time class="humanTimeFromNow" data-time="2015-01-20T11:47:43.000Z" data-tooltip="01/20/2015 12:47">01/20/2015</time>
+                </div>
+                <div class="list-item-delete js-delete" data-link-type="child" data-object="Ticket" data-object-id="3" data-type="remove"></div>
+              </li>
+            </ol>
+          </div>
+          <div class="text-muted u-clickable js-add">
+            + Add Link
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="sidebar bottom-form-shadow flex hide" data-tab="customer">
+      <div class="sidebar-header">
+        <h2 class="sidebar-header-headline js-headline">
+          Customer
+        </h2>
+        <div class="sidebar-header-actions js-actions">
+          <div class="dropdown dropdown--actions">
+            <div class="dropdown-toggle" data-toggle="dropdown" id="userAction"></div>
+            <ul aria-labelledby="userAction" class="dropdown-menu dropdown-menu-right" role="menu">
+              <li role="presentation">
+                <a data-type="customer-change" href="#" role="menuitem" tabindex="-1">Change Customer</a>
+              </li>
+              <li role="presentation">
+                <a data-type="customer-edit" href="#" role="menuitem" tabindex="-1">Edit Customer</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="tabsSidebar-close"></div>
+      </div>
+      <hr>
+      <div class="sidebar-content">
+        <div class="sidebar-block">
+          <span class="avatar unique userInfo-avatar size-50 user-popover" data-id="2" style="background-position: -92.79607555375712px -106.24902447601627px;">NB</span>
+          <h3 title="Name">
+            Nicole Braun
+          </h3>
+        </div>
+        <div class="sidebar-block">
+          <label>Email</label> nicole.braun@zammad.org
+        </div>
+        <div class="sidebar-block">
+          <label>Note</label>
+          <div contenteditable="true" data-name="note" data-placeholder="Add a Note" data-type="update"></div>
+        </div>
+        <div class="sidebar-block">
+          <label>Tickets</label> <span class="user-tickets" data-original-title="Open Tickets" data-type="open" style="" title="">open <span class="count">(5)</span></span>
+        </div>
+      </div>
+    </div>
+    <div class="sidebar bottom-form-shadow flex hide" data-tab="organization">
+      <div class="sidebar-header">
+        <h2 class="sidebar-header-headline js-headline">
+          Organization
+        </h2>
+        <div class="sidebar-header-actions js-actions">
+          <div class="dropdown dropdown--actions">
+            <div class="dropdown-toggle" data-toggle="dropdown" id="userAction"></div>
+            <ul aria-labelledby="userAction" class="dropdown-menu dropdown-menu-right" role="menu">
+              <li role="presentation">
+                <a data-type="organization-edit" href="#" role="menuitem" tabindex="-1">Edit Organization</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="tabsSidebar-close"></div>
+      </div>
+      <hr>
+      <div class="sidebar-content">
+        <div class="sidebar-block">
+          <div class="avatar organizationInfo-avatar size-50">
+            <a href="#organization/profile/1"></a>
+          </div>
+          <h3 title="Name">
+            Zammad Foundation
+          </h3>
+        </div>
+        <div class="sidebar-block">
+          <label>Shared organization</label> Yes
+        </div>
+        <div class="sidebar-block">
+          <label>Note</label>
+          <div contenteditable="true" data-name="note" data-placeholder="Add a Note" data-type="update-org">
+            Wir sand ausm Woid!
+          </div>
+        </div>
+        <hr>
+        <label>Members</label>
+        <ul class="userList">
+          <li>
+            <span class="avatar unique size-40 user-popover" data-id="2" data-original-title="" style="background-position: -96.5079185759074px -112.28590086669901px;" title="">NB</span> <a class="user-popover" data-id="2" data-original-title="" href="#user/profile/2" title="">Nicole Braun</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="tabsSidebar-tabs vertical justified">
+      <div class="tabsSidebar-tab active" data-tab="ticket">
+        <%- @Icon('message') %>
+      </div>
+      <div class="tabsSidebar-tab" data-tab="customer">
+        <%- @Icon('person') %>
+      </div>
+      <div class="tabsSidebar-tab" data-tab="organization">
+        <%- @Icon('group') %>
+      </div>
     </div>
   </div>
-  <div class="tabsSidebar-tabs vertical justified">
-    <div class="tabsSidebar-tab active" data-tab="ticket"></div>
-    <div class="tabsSidebar-tab" data-tab="customer"></div>
-    <div class="tabsSidebar-tab" data-tab="organization"></div>
+  <div class="attributeBar">
+    <form class="form-inline is-closed hide" role="form">
+      <div class="form-group">
+        <label for="update_ticket_1_state_id123" class="input-group-addon u-clickable">State</label>
+        <select id="update_ticket_1_state_id123" class="form-control level-1" 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>
+        <%- @Icon('arrow-down', 'dropdown-arrow') %>
+      </div>
+      <div class="form-group is-changed">
+        <label for="update_ticket_1_priority_id123" class="input-group-addon u-clickable">Priority</label>
+        <select id="update_ticket_1_priority_id123" 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>
+        <svg class="icon icon-arrow-down dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
+      </div>
+      <div class="form-group">
+        <label for="update_ticket_1_group_id123" class="input-group-addon u-clickable">Group</label>
+        <select id="update_ticket_1_group_id123" 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>
+        <svg class="icon icon-arrow-down dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
+      </div>
+      <div class="form-group">
+        <label for="update_ticket_1_owner_id123" class="input-group-addon u-clickable">Owner</label>
+        <select id="update_ticket_1_owner_id123" class="form-control" name="owner_id">
+          <option value="">-</option>
+          <option value="3">Felix Niklas</option>
+        </select>
+        <svg class="icon icon-arrow-down dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
+      </div>
+    </form>
+    <form class="form-inline">
+    <div class="form-group">
+      <button type="submit" class="btn btn--primary js-submit pull-right">Update</button>
+      <button type="submit" class="btn js-reset pull-right hide">Discard your unsaved changes.</button>
+    </div>
+    </form>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 2d9323511..862382455 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -7,11 +7,8 @@
  *= require ./cropper.css
  *= require ./fineuploader.css
  *= require ./ui-lightness/jquery-ui-1.11.2.css
- *= require ./jquery.noty.css
  *= require ./bootstrap-tokenfield.css
- *= require ./noty_theme_twitter.css
  *= require ./sew.css
- *= require ./medium.css
  *= require ./fira-sans.css
  *= require ./svg-dimensions.css
  *= require ./zammad.scss
diff --git a/app/assets/stylesheets/jquery.noty.css b/app/assets/stylesheets/jquery.noty.css
deleted file mode 100644
index b589ebfa1..000000000
--- a/app/assets/stylesheets/jquery.noty.css
+++ /dev/null
@@ -1,105 +0,0 @@
-
-/* CORE STYLES */
-
-	/* noty bar */
-	.noty_bar {
-		position: fixed;
-		display: none;
-		z-index: 9999999;
-	}
-	
-	/* noty_message */
-	.noty_bar .noty_message {
-		text-align: center;
-	}
-	
-	/* noty close button */
-	.noty_bar .noty_close {
-		cursor: pointer;
-	}
-	
-	/* noty modal */
-	.noty_modal {
-		position: fixed;
-		width: 100%;
-		height: 100%;
-		background-color: #000;
-		z-index: 10000;
-		opacity: 0.6;
-		display: none;
-		left: 0;
-		top: 0;
-	}
-	
-	/* noty container for noty_layout_topLeft & noty_layout_topRight */
-	ul.noty_cont {
-		position: fixed;
-		z-index: 10000000;
-		margin: 0px;
-		padding: 0px;
-		list-style: none;
-		width: 300px;
-	}
-	ul.noty_cont li {
-		position: relative;
-		float: left;
-		clear: both;
-		list-style: none;
-		padding: 0px;
-		margin: 10px 0 0 0;
-		width: 300px; /* Fix for: http://bugs.jquery.com/ticket/2278 */
-	}
-	ul.noty_cont.noty_layout_topLeft {left:20px; top:20px;}
-	ul.noty_cont.noty_layout_topRight {right:40px; top:20px;}
-	ul.noty_cont.noty_layout_bottomLeft {left:20px; bottom:20px}
-	ul.noty_cont.noty_layout_bottomRight {right:40px; bottom:20px}
-	ul.noty_cont.noty_layout_topRight li {float:right}
-
-/* LAYOUTS */
-
-	/* noty_layout_top */
-	.noty_bar.noty_layout_top {
-		top: 0;
-		left: 0;
-		width: 100%;
-		-webkit-border-radius: 0px;
-		-moz-border-radius: 0px;
-		border-radius: 0px;
-	}
-
-	/* noty_layout_bottom */
-	.noty_bar.noty_layout_bottom {
-		bottom: 0;
-		left: 0;
-		width: 100%;
-		-webkit-border-radius: 0px;
-		-moz-border-radius: 0px;
-		border-radius: 0px;
-	}
-
-	/* noty_layout_center */
-	.noty_bar.noty_layout_center {
-		top: 40%;
-	}
-	
-	/* noty_layout_topLeft & noty_layout_topRight */
-	.noty_bar.noty_layout_topLeft, 
-	.noty_bar.noty_layout_topRight,
-	.noty_bar.noty_layout_bottomLeft,
-	.noty_bar.noty_layout_bottomRight {
-		width: 100%;
-		clear: both;
-		position: relative;
-	}
-	
-	.noty_bar.noty_layout_topLeft .noty_message, 
-	.noty_bar.noty_layout_topRight .noty_message,
-	.noty_bar.noty_layout_bottomLeft .noty_message,
-	.noty_bar.noty_layout_bottomRight .noty_message {
-		text-align: left;
-	}
-	
-	/* noty_layout_topCenter */
-	.noty_bar.noty_layout_topCenter {
-		top: 20px;
-	}
\ No newline at end of file
diff --git a/app/assets/stylesheets/medium.css b/app/assets/stylesheets/medium.css
deleted file mode 100644
index 7ce1ac283..000000000
--- a/app/assets/stylesheets/medium.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.Medium{
-    position: relative;
-    min-height: 10px;
-    }
-.Medium-clear{
-    background: transparent !important;
-    background-color: transparent !important;
-    border-color: transparent !important;
-}
-.Medium,
-    .Medium p:first-child{
-        margin-top:0;
-        }
-    .Medium p:last-child{
-        margin-bottom:0;
-        }
-    .Medium p:empty {
-        display: block;
-	    height: 1em;
-    }
-.Medium-paste-hook{
-    position: absolute;
-    opacity:0;
-    }
-.Medium-placeholder{
-	position: absolute;
-    width: 100%;
-	}
-.Medium-placeholder div{
-	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-	filter: alpha(opacity=50);
-	opacity: 0.5;
-	position: absolute;
-	}
-.Medium-placeholder-rich div{
-	font-style: italic;
-	}
-.Medium-inline,
-.Medium-placeholder-inline div,
-.Medium-inlineRich,
-.Medium-placeholder-inlineRich div{
-	overflow: hidden;
-	white-space: nowrap;
-	}
\ No newline at end of file
diff --git a/app/assets/stylesheets/noty_theme_twitter.css b/app/assets/stylesheets/noty_theme_twitter.css
deleted file mode 100644
index 504209d6b..000000000
--- a/app/assets/stylesheets/noty_theme_twitter.css
+++ /dev/null
@@ -1,129 +0,0 @@
-
-/* CORE STYLES*/
-	
-	/* custom container */
-	.noty_custom_container.noty_theme_twitter.noty_layout_inline {
-		position: relative;
-	}
-	
-	/* custom growl container */
-	.noty_custom_container.noty_theme_twitter.noty_layout_inline .noty_cont.noty_layout_inline {
-		position: static;
-	}
-		/* custom noty bar */
-		.noty_custom_container.noty_theme_twitter.noty_layout_inline .noty_bar {
-			position: static;
-		}
-			.noty_custom_container.noty_theme_twitter.noty_layout_inline .noty_bar .noty_message {
-				font-size: 13px;
-				padding: 4px;
-			}
-				.noty_custom_container.noty_theme_twitter.noty_layout_inline .noty_bar .noty_message .noty_buttons {
-					margin-top: -1px;
-				}
-	
-	/* noty_message */
-	.noty_bar.noty_theme_twitter .noty_message {
-		padding: 8px 14px;
-	}
-	/* noty_has_close_button */
-	.noty_bar.noty_theme_twitter.noty_closable .noty_message {
-		padding: 8px 35px 8px 14px;
-	}
-	
-	/* noty_buttons */
-	.noty_bar.noty_theme_twitter .noty_message .noty_buttons {
-		float: right;
-		margin-top: -5px;
-		margin-left: 4px;
-	}
-	
-	/* noty_button */
-	.noty_bar.noty_theme_twitter .noty_message .noty_buttons button {
-		margin-left: 5px;
-	}
-	
-	/* noty close button */
-	.noty_bar.noty_theme_twitter .noty_close {
-		position: absolute;
-		top: 7px;
-		right: 16px;
-		font-size: 18px;
-		line-height: 18px;
-		font-weight: bold;
-		color: #000;
-		opacity: 0.2;
-		text-shadow: 0 1px 0 #fff;
-	}
-	
-	/* noty close button hover */
-	.noty_bar.noty_theme_twitter .noty_close:hover {
-		opacity: 0.4;
-	}
-	
-	.noty_bar.noty_theme_twitter .noty_close:after {
-		content: "x";
-	}
-	
-	/* noty modal */
-	.noty_modal.noty_theme_twitter {
-		opacity: 0.7;
-	}
-	
-/* LAYOUTS */
-
-	/* noty_layout_topLeft & noty_layout_topRight */
-	.noty_bar.noty_theme_twitter.noty_layout_center,
-	.noty_bar.noty_theme_twitter.noty_layout_topCenter,
-	.noty_bar.noty_theme_twitter.noty_layout_topLeft,
-	.noty_bar.noty_theme_twitter.noty_layout_topRight,
-	.noty_bar.noty_theme_twitter.noty_layout_bottomLeft,
-	.noty_bar.noty_theme_twitter.noty_layout_bottomRight {
-		-webkit-border-radius: 4px;
-		-moz-border-radius: 4px;
-		border-radius: 4px;
-	}
-	.noty_bar.noty_theme_twitter.noty_layout_topLeft .noty_message .noty_buttons,
-	.noty_bar.noty_theme_twitter.noty_layout_topRight .noty_message .noty_buttons,
-	.noty_bar.noty_theme_twitter.noty_layout_bottomLeft .noty_message .noty_buttons,
-	.noty_bar.noty_theme_twitter.noty_layout_bottomRight .noty_message .noty_buttons {
-		float: none;
-		border-top: 1px solid #FBEED5;
-	  margin-left: 0;
-	  margin-top: 10px;
-	  padding-top: 10px;
-	  text-align: right;
-	}
-	
-	.noty_bar.noty_theme_twitter.noty_layout_center .noty_message .noty_buttons,
-	.noty_bar.noty_theme_twitter.noty_layout_topCenter .noty_message .noty_buttons {
-		margin-left: 15px;
-		margin-top: -2px
-	}
-	
-/* NOTIFICATION TYPES */
-
-	/* noty_alert */
-	.noty_bar.noty_theme_twitter.noty_alert {
-		background-color: #FCF8E3;
-		border: 1px solid #FBEED5;
-		color: #C09853;
-	}
-	/* noty_error */
-	.noty_bar.noty_theme_twitter.noty_error {
-		background-color: #F2DEDE;
-		border: 1px solid #EED3D7;
-		color: #B94A48;
-	}
-	/* noty_success */
-	.noty_bar.noty_theme_twitter.noty_success {
-		background-color: #DFF0D8;
-		border: 1px solid #D6E9C6;
-		color: #468847;
-	}
-	/* noty_information */
-	.noty_bar.noty_theme_twitter.noty_information {
-		background-color: #D9EDF7;
-		border: 1px solid #BCE8F1;
-		color: #3A87AD;
-	}
\ No newline at end of file
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 47cea3ad7..ce45f6a74 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -867,7 +867,7 @@ fieldset {
   }
 }
 
-fieldset .form-group {
+fieldset > .form-group {
   padding: 0 4px;
 
   &:last-child {
@@ -875,11 +875,6 @@ fieldset .form-group {
   }
 }
 
-fieldset > *:not(.form-group) .form-control {
-  margin-left: 4px;
-  margin-right: 4px;
-}
-
 .form-group {
   margin-bottom: 16px;
   
@@ -888,7 +883,7 @@ fieldset > *:not(.form-group) .form-control {
   }
 }
 
-.datetime.form-group .controls {
+.date.form-group .controls {
   position: relative;
 }
 
@@ -1071,10 +1066,20 @@ fieldset > *:not(.form-group) .form-control {
   }
 }
 
-.fromGroup--standalone .form-control {
+.formGroup--standalone .form-control {
   margin-bottom: 0;
 }
 
+.formGroup-bundle {
+  display: flex;
+  align-items: flex-end;
+  margin: 0 4px;
+  
+  .formGroup-bundle-label {
+    margin: 0 5px 27px 11px;
+  }
+}
+
 input[type="radio"], 
 input[type="checkbox"] {
   margin: 0;
@@ -6405,6 +6410,93 @@ output {
   }
 }
 
+#notify {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  right: 0;
+  @extend .zIndex-10;
+  
+  .defaultTheme {
+    pointer-events: none;
+  }
+  
+  .noty_bar {
+    max-width: 500px;
+    text-align: center;
+    margin: 0 auto 10px;
+
+    .noty_message {
+      pointer-events: auto;
+      display: inline-block;
+      background: white;
+      border: 1px solid hsl(0,0%,80%);
+      border-bottom-color: hsl(0,0%,70%);
+      padding: 10px 15px;
+      border-radius: 3px;
+      color: hsl(202,5%,18%);
+      box-shadow:
+        0 6px 12px hsla(210,17%,10%,.21);
+    }
+
+    &.noty_type_success .noty_message {
+      border-color: hsl(145,51%,70%);
+      background: hsl(145,51%,77%);
+    }
+
+    &.noty_type_alert .noty_message {
+      border-color: hsl(43,92%,71%);
+      background: hsl(42,94%,80%);
+    }
+
+    &.noty_type_error .noty_message {
+      border-color: hsl(9,72%,62%);
+      background: hsl(12,73%,66%);
+    }
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+}
+
+.animated {
+  animation-duration: 300ms;
+  animation-fill-mode: both;
+}
+
+.fadeInDown {
+  animation-name: fadeInDown;
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -50%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeOutDown {
+  animation-name: fadeOutDown;
+}
+
+@keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 50%, 0);
+  }
+}
+
 /*
 
   ----------------