diff --git a/Makefile b/Makefile
index 84e11bb0..acdd9dba 100644
--- a/Makefile
+++ b/Makefile
@@ -23,6 +23,9 @@ clean:
 	rm -rf $(build_dir)
 	rm -rf node_modules
 
+js-templates:
+	handlebars -n OCA.AnnouncementCenter.Templates js/templates -f js/templates.js
+
 appstore: clean
 	mkdir -p $(sign_dir)
 	rsync -a \
diff --git a/js/commentstabview.js b/js/commentstabview.js
index de412515..3980b125 100644
--- a/js/commentstabview.js
+++ b/js/commentstabview.js
@@ -11,53 +11,6 @@
 /* global Handlebars, escapeHTML */
 
 (function(OC, OCA) {
-	var TEMPLATE =
-		'<ul class="comments">' +
-		'</ul>' +
-		'<div class="emptycontent hidden"><div class="icon-comment"></div>' +
-		'<p>{{emptyResultLabel}}</p></div>' +
-		'<input type="button" class="showMore hidden" value="{{moreLabel}}"' +
-		' name="show-more" id="show-more" />' +
-		'<div class="loading hidden" style="height: 50px"></div>';
-
-	var EDIT_COMMENT_TEMPLATE =
-		'<div class="newCommentRow comment" data-id="{{id}}">' +
-		'    <div class="authorRow">' +
-		'        {{#if avatarEnabled}}' +
-		'        <div class="avatar" data-username="{{actorId}}"></div>' +
-		'        {{/if}}' +
-		'        <div class="author">{{actorDisplayName}}</div>' +
-		'{{#if isEditMode}}' +
-		'        <a href="#" class="action delete icon icon-delete has-tooltip" title="{{deleteTooltip}}"></a>' +
-		'{{/if}}' +
-		'    </div>' +
-		'    <form class="newCommentForm">' +
-		'        <textarea rows="1" class="message" placeholder="{{newMessagePlaceholder}}">{{message}}</textarea>' +
-		'        <input class="submit icon-confirm" type="submit" value="" />' +
-		'{{#if isEditMode}}' +
-		'        <input class="cancel pull-right" type="button" value="{{cancelText}}" />' +
-		'{{/if}}' +
-		'        <div class="submitLoading icon-loading-small hidden"></div>'+
-		'    </form>' +
-		'</div>';
-
-	var COMMENT_TEMPLATE =
-		'<li class="comment{{#if isUnread}} unread{{/if}}{{#if isLong}} collapsed{{/if}}" data-id="{{id}}">' +
-		'    <div class="authorRow">' +
-		'        {{#if avatarEnabled}}' +
-		'        <div class="avatar" {{#if actorId}}data-username="{{actorId}}"{{/if}}> </div>' +
-		'        {{/if}}' +
-		'        <div class="author">{{actorDisplayName}}</div>' +
-		'{{#if isUserAuthor}}' +
-		'        <a href="#" class="action edit icon icon-rename has-tooltip" title="{{editTooltip}}"></a>' +
-		'{{/if}}' +
-		'        <div class="date has-tooltip live-relative-timestamp" data-timestamp="{{timestamp}}" title="{{altDate}}">{{date}}</div>' +
-		'    </div>' +
-		'    <div class="message">{{{formattedMessage}}}</div>' +
-		'{{#if isLong}}' +
-		'    <div class="message-overlay"></div>' +
-		'{{/if}}' +
-		'</li>';
 
 	/**
 	 * @memberof OCA.AnnouncementCenter.Comments
@@ -86,11 +39,8 @@
 		},
 
 		template: function(params) {
-			if (!this._template) {
-				this._template = Handlebars.compile(TEMPLATE);
-			}
 			var currentUser = OC.getCurrentUser();
-			return this._template(_.extend({
+			return OCA.AnnouncementCenter.Templates.commentsview(_.extend({
 				avatarEnabled: this._avatarsEnabled,
 				actorId: currentUser.uid,
 				actorDisplayName: currentUser.displayName
@@ -98,11 +48,8 @@
 		},
 
 		editCommentTemplate: function(params) {
-			if (!this._editCommentTemplate) {
-				this._editCommentTemplate = Handlebars.compile(EDIT_COMMENT_TEMPLATE);
-			}
 			var currentUser = OC.getCurrentUser();
-			var el = this._editCommentTemplate(_.extend({
+			var el = OCA.AnnouncementCenter.Templates.edit_comment(_.extend({
 				avatarEnabled: this._avatarsEnabled,
 				actorId: currentUser.uid,
 				actorDisplayName: currentUser.displayName,
@@ -121,10 +68,6 @@
 		},
 
 		commentTemplate: function(params) {
-			if (!this._commentTemplate) {
-				this._commentTemplate = Handlebars.compile(COMMENT_TEMPLATE);
-			}
-
 			params = _.extend({
 				avatarEnabled: this._avatarsEnabled,
 				editTooltip: t('comments', 'Edit comment'),
@@ -138,7 +81,7 @@
 				params.actorDisplayName = t('comments', '[Deleted user]');
 			}
 
-			return this._commentTemplate(params);
+			return OCA.AnnouncementCenter.Templates.comment(params);
 		},
 
 		getLabel: function() {
diff --git a/js/script.js b/js/script.js
index ef60ebfc..b32483a4 100644
--- a/js/script.js
+++ b/js/script.js
@@ -26,47 +26,9 @@
 		sevenDaysMilliseconds: 7 * 24 * 3600 * 1000,
 		commentsTabView: null,
 
-		compiledTemplate: null,
-		handlebarTemplate: '<div class="section" data-announcement-id="{{{announcementId}}}">' +
-				'<h2>{{{subject}}}</h2>' +
-					'<span class="has-tooltip live-relative-timestamp" data-timestamp="{{timestamp}}" title="{{dateFormat}}">{{dateRelative}}</span>' +
-					'<span class="avatar-name-wrapper" data-user="{{authorId}}"><div class="avatar" data-user="{{authorId}}" data-user-display-name="{{author}}"></div><strong>{{author}}</strong></span>' +
-					'{{#if isAdmin}}' +
-						'<span class="visibility has-tooltip" title="{{{visibilityString}}}">' +
-							'{{#if visibilityEveryone}}' +
-								'<img src="' + OC.imagePath('core', 'places/link') + '">' +
-							'{{else}}' +
-								'<img src="' + OC.imagePath('core', 'places/contacts') + '">' +
-							'{{/if}}' +
-						'</span>' +
-					'{{/if}}' +
-					'{{#if comments}}' +
-						'<span class="comment-details" data-count="{{num_comments}}">{{comments}}</span>' +
-					'{{/if}}' +
-					'{{#if isAdmin}}' +
-						'<span class="delete-link has-tooltip" title="' + t('announcementcenter', 'Delete') + '">' +
-							'<a href="#" data-announcement-id="{{{announcementId}}}">' +
-								'<img class="svg" src="' + OC.imagePath('core', 'actions/delete') + '" alt=""/>' +
-							'</a>' +
-						'</span>' +
-						'{{#if hasNotifications}}' +
-						'<span class="mute-link has-tooltip" title="' + t('announcementcenter', 'Remove notifications') + '">' +
-							'<a href="#" data-announcement-id="{{{announcementId}}}">' +
-								'<img class="svg" src="' + OC.imagePath('announcementcenter', 'notifications-off.svg') + '" alt=""/>' +
-							'</a>' +
-						'</span>' +
-						'{{/if}}' +
-					'{{/if}}' +
-				'{{#if message}}' +
-					'<br /><br /><p>{{{message}}}</p>' +
-				'{{/if}}' +
-			'</div>' +
-			'<hr />',
-
 		init: function() {
 			this.$container = $('#app-content');
 			this.$content = $('#app-content');
-			this.compiledTemplate = Handlebars.compile(this.handlebarTemplate);
 
 			this.commentsTabView = OCA.AnnouncementCenter.Comments.CommentsTabView;
 			this.commentsTabView.initialize();
@@ -253,7 +215,13 @@
 				visibilityEveryone: null,
 				visibilityString: null,
 				announcementId: announcement.id,
-				isAdmin: this.isAdmin
+				isAdmin: this.isAdmin,
+				deleteTXT: t('announcementcenter', 'Delete'),
+				removeNotificationTXT: t('announcementcenter', 'Remove notifications'),
+				notificationsOffIMG: OC.imagePath('announcementcenter', 'notifications-off.svg'),
+				deleteIMG: OC.imagePath('core', 'actions/delete.svg'),
+				placesLinkIMG: OC.imagePath('core', 'places/link.svg'),
+				placesContactsIMG: OC.imagePath('core', 'places/link.svg')
 			};
 
 			if (this.isAdmin) {
@@ -268,7 +236,7 @@
 				}
 			}
 
-			var $html = $(this.compiledTemplate(object));
+			var $html = $(OCA.AnnouncementCenter.Templates.announcement(object));
 			$html.find('span.delete-link a').on('click', _.bind(this.deleteAnnouncement, this));
 			$html.find('span.mute-link a').on('click', _.bind(this.removeNotifications, this));
 			$html.on('click', _.bind(this._onHighlightAnnouncement, this));
diff --git a/js/templates.js b/js/templates.js
new file mode 100644
index 00000000..b08da050
--- /dev/null
+++ b/js/templates.js
@@ -0,0 +1,182 @@
+(function() {
+  var template = Handlebars.template, templates = OCA.AnnouncementCenter.Templates = OCA.AnnouncementCenter.Templates || {};
+templates['announcement'] = template({"1":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {});
+
+  return "		<span class=\"visibility has-tooltip\" title=\""
+    + ((stack1 = ((helper = (helper = helpers.visibilityString || (depth0 != null ? depth0.visibilityString : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(alias1,{"name":"visibilityString","hash":{},"data":data}) : helper))) != null ? stack1 : "")
+    + "\">\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.visibilityEveryone : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0),"inverse":container.program(4, data, 0),"data":data})) != null ? stack1 : "")
+    + "		</span>\n";
+},"2":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "				<img src=\""
+    + container.escapeExpression(((helper = (helper = helpers.placesLinkIMG || (depth0 != null ? depth0.placesLinkIMG : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"placesLinkIMG","hash":{},"data":data}) : helper)))
+    + "\">\n";
+},"4":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "				<img src=\""
+    + container.escapeExpression(((helper = (helper = helpers.placesContactsIMG || (depth0 != null ? depth0.placesContactsIMG : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"placesContactsIMG","hash":{},"data":data}) : helper)))
+    + "\">\n";
+},"6":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "		<span class=\"comment-details\" data-count=\""
+    + alias4(((helper = (helper = helpers.num_comments || (depth0 != null ? depth0.num_comments : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"num_comments","hash":{},"data":data}) : helper)))
+    + "\">"
+    + alias4(((helper = (helper = helpers.comments || (depth0 != null ? depth0.comments : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"comments","hash":{},"data":data}) : helper)))
+    + "</span>\n";
+},"8":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "		<span class=\"delete-link has-tooltip\" title=\""
+    + alias4(((helper = (helper = helpers.deleteTXT || (depth0 != null ? depth0.deleteTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"deleteTXT","hash":{},"data":data}) : helper)))
+    + "\">\n			<a href=\"#\" data-announcement-id=\""
+    + ((stack1 = ((helper = (helper = helpers.announcementId || (depth0 != null ? depth0.announcementId : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"announcementId","hash":{},"data":data}) : helper))) != null ? stack1 : "")
+    + "\">\n				<img class=\"svg\" src=\""
+    + alias4(((helper = (helper = helpers.deleteIMG || (depth0 != null ? depth0.deleteIMG : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"deleteIMG","hash":{},"data":data}) : helper)))
+    + "\" alt=\"\"/>\n			</a>\n		</span>\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.hasNotifications : depth0),{"name":"if","hash":{},"fn":container.program(9, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "");
+},"9":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "			<span class=\"mute-link has-tooltip\" title=\""
+    + alias4(((helper = (helper = helpers.removeNotificationTXT || (depth0 != null ? depth0.removeNotificationTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"removeNotificationTXT","hash":{},"data":data}) : helper)))
+    + "\">\n				<a href=\"#\" data-announcement-id=\""
+    + ((stack1 = ((helper = (helper = helpers.announcementId || (depth0 != null ? depth0.announcementId : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"announcementId","hash":{},"data":data}) : helper))) != null ? stack1 : "")
+    + "\">\n					<img class=\"svg\" src=\""
+    + alias4(((helper = (helper = helpers.notificationsOffIMG || (depth0 != null ? depth0.notificationsOffIMG : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"notificationsOffIMG","hash":{},"data":data}) : helper)))
+    + "\" alt=\"\"/>\n				</a>\n			</span>\n";
+},"11":function(container,depth0,helpers,partials,data) {
+    var stack1, helper;
+
+  return "		<br /><br /><p>"
+    + ((stack1 = ((helper = (helper = helpers.message || (depth0 != null ? depth0.message : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"message","hash":{},"data":data}) : helper))) != null ? stack1 : "")
+    + "</p>\n";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "<div class=\"section\" data-announcement-id=\""
+    + ((stack1 = ((helper = (helper = helpers.announcementId || (depth0 != null ? depth0.announcementId : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"announcementId","hash":{},"data":data}) : helper))) != null ? stack1 : "")
+    + "\">\n	<h2>"
+    + ((stack1 = ((helper = (helper = helpers.subject || (depth0 != null ? depth0.subject : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"subject","hash":{},"data":data}) : helper))) != null ? stack1 : "")
+    + "</h2>\n	<span class=\"has-tooltip live-relative-timestamp\" data-timestamp=\""
+    + alias4(((helper = (helper = helpers.timestamp || (depth0 != null ? depth0.timestamp : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"timestamp","hash":{},"data":data}) : helper)))
+    + "\" title=\""
+    + alias4(((helper = (helper = helpers.dateFormat || (depth0 != null ? depth0.dateFormat : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"dateFormat","hash":{},"data":data}) : helper)))
+    + "\">"
+    + alias4(((helper = (helper = helpers.dateRelative || (depth0 != null ? depth0.dateRelative : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"dateRelative","hash":{},"data":data}) : helper)))
+    + "</span>\n	<span class=\"avatar-name-wrapper\" data-user=\""
+    + alias4(((helper = (helper = helpers.authorId || (depth0 != null ? depth0.authorId : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"authorId","hash":{},"data":data}) : helper)))
+    + "\"><div class=\"avatar\" data-user=\""
+    + alias4(((helper = (helper = helpers.authorId || (depth0 != null ? depth0.authorId : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"authorId","hash":{},"data":data}) : helper)))
+    + "\" data-user-display-name=\""
+    + alias4(((helper = (helper = helpers.author || (depth0 != null ? depth0.author : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"author","hash":{},"data":data}) : helper)))
+    + "\"></div><strong>"
+    + alias4(((helper = (helper = helpers.author || (depth0 != null ? depth0.author : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"author","hash":{},"data":data}) : helper)))
+    + "</strong></span>\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isAdmin : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.comments : depth0),{"name":"if","hash":{},"fn":container.program(6, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isAdmin : depth0),{"name":"if","hash":{},"fn":container.program(8, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.message : depth0),{"name":"if","hash":{},"fn":container.program(11, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "</div>\n<hr />\n";
+},"useData":true});
+templates['comment'] = template({"1":function(container,depth0,helpers,partials,data) {
+    return " unread";
+},"3":function(container,depth0,helpers,partials,data) {
+    return " collapsed";
+},"5":function(container,depth0,helpers,partials,data) {
+    var stack1;
+
+  return "			<div class=\"avatar\" "
+    + ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.actorId : depth0),{"name":"if","hash":{},"fn":container.program(6, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "> </div>\n";
+},"6":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "data-username=\""
+    + container.escapeExpression(((helper = (helper = helpers.actorId || (depth0 != null ? depth0.actorId : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"actorId","hash":{},"data":data}) : helper)))
+    + "\"";
+},"8":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "			<a href=\"#\" class=\"action edit icon icon-rename has-tooltip\" title=\""
+    + container.escapeExpression(((helper = (helper = helpers.editTooltip || (depth0 != null ? depth0.editTooltip : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"editTooltip","hash":{},"data":data}) : helper)))
+    + "\"></a>\n";
+},"10":function(container,depth0,helpers,partials,data) {
+    return "		<div class=\"message-overlay\"></div>\n";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "<li class=\"comment"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isUnread : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isLong : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "\" data-id=\""
+    + alias4(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"id","hash":{},"data":data}) : helper)))
+    + "\">\n	<div class=\"authorRow\">\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.avatarEnabled : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "		<div class=\"author\">"
+    + alias4(((helper = (helper = helpers.actorDisplayName || (depth0 != null ? depth0.actorDisplayName : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"actorDisplayName","hash":{},"data":data}) : helper)))
+    + "</div>\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isUserAuthor : depth0),{"name":"if","hash":{},"fn":container.program(8, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "		<div class=\"date has-tooltip live-relative-timestamp\" data-timestamp=\""
+    + alias4(((helper = (helper = helpers.timestamp || (depth0 != null ? depth0.timestamp : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"timestamp","hash":{},"data":data}) : helper)))
+    + "\" title=\""
+    + alias4(((helper = (helper = helpers.altDate || (depth0 != null ? depth0.altDate : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"altDate","hash":{},"data":data}) : helper)))
+    + "\">"
+    + alias4(((helper = (helper = helpers.date || (depth0 != null ? depth0.date : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"date","hash":{},"data":data}) : helper)))
+    + "</div>\n	</div>\n	<div class=\"message\">"
+    + ((stack1 = ((helper = (helper = helpers.formattedMessage || (depth0 != null ? depth0.formattedMessage : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"formattedMessage","hash":{},"data":data}) : helper))) != null ? stack1 : "")
+    + "</div>\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isLong : depth0),{"name":"if","hash":{},"fn":container.program(10, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "</li>\n";
+},"useData":true});
+templates['commentsview'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "<ul class=\"comments\">\n</ul>\n<div class=\"emptycontent hidden\"><div class=\"icon-comment\"></div>\n<p>"
+    + alias4(((helper = (helper = helpers.emptyResultLabel || (depth0 != null ? depth0.emptyResultLabel : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"emptyResultLabel","hash":{},"data":data}) : helper)))
+    + "</p></div>\n<input type=\"button\" class=\"showMore hidden\" value=\""
+    + alias4(((helper = (helper = helpers.moreLabel || (depth0 != null ? depth0.moreLabel : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"moreLabel","hash":{},"data":data}) : helper)))
+    + "\" name=\"show-more\" id=\"show-more\" />\n<div class=\"loading hidden\" style=\"height: 50px\"></div>\n";
+},"useData":true});
+templates['edit_comment'] = template({"1":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "			<div class=\"avatar\" data-username=\""
+    + container.escapeExpression(((helper = (helper = helpers.actorId || (depth0 != null ? depth0.actorId : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"actorId","hash":{},"data":data}) : helper)))
+    + "\"></div>\n";
+},"3":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "			<a href=\"#\" class=\"action delete icon icon-delete has-tooltip\" title=\""
+    + container.escapeExpression(((helper = (helper = helpers.deleteTooltip || (depth0 != null ? depth0.deleteTooltip : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"deleteTooltip","hash":{},"data":data}) : helper)))
+    + "\"></a>\n";
+},"5":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "				<input class=\"cancel pull-right\" type=\"button\" value=\""
+    + container.escapeExpression(((helper = (helper = helpers.cancelText || (depth0 != null ? depth0.cancelText : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"cancelText","hash":{},"data":data}) : helper)))
+    + "\" />\n";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "<div class=\"newCommentRow comment\" data-id=\""
+    + alias4(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"id","hash":{},"data":data}) : helper)))
+    + "\">\n	<div class=\"authorRow\">\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.avatarEnabled : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "		<div class=\"author\">"
+    + alias4(((helper = (helper = helpers.actorDisplayName || (depth0 != null ? depth0.actorDisplayName : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"actorDisplayName","hash":{},"data":data}) : helper)))
+    + "</div>\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isEditMode : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "		</div>\n		 <form class=\"newCommentForm\">\n			<textarea rows=\"1\" class=\"message\" placeholder=\""
+    + alias4(((helper = (helper = helpers.newMessagePlaceholder || (depth0 != null ? depth0.newMessagePlaceholder : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"newMessagePlaceholder","hash":{},"data":data}) : helper)))
+    + "\">"
+    + alias4(((helper = (helper = helpers.message || (depth0 != null ? depth0.message : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"message","hash":{},"data":data}) : helper)))
+    + "</textarea>\n			<input class=\"submit icon-confirm\" type=\"submit\" value=\"\" />\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isEditMode : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "		<div class=\"submitLoading icon-loading-small hidden\"></div>\n	</form>\n</div>\n";
+},"useData":true});
+})();
\ No newline at end of file
diff --git a/js/templates/announcement.handlebars b/js/templates/announcement.handlebars
new file mode 100644
index 00000000..0a2e5294
--- /dev/null
+++ b/js/templates/announcement.handlebars
@@ -0,0 +1,35 @@
+<div class="section" data-announcement-id="{{{announcementId}}}">
+	<h2>{{{subject}}}</h2>
+	<span class="has-tooltip live-relative-timestamp" data-timestamp="{{timestamp}}" title="{{dateFormat}}">{{dateRelative}}</span>
+	<span class="avatar-name-wrapper" data-user="{{authorId}}"><div class="avatar" data-user="{{authorId}}" data-user-display-name="{{author}}"></div><strong>{{author}}</strong></span>
+	{{#if isAdmin}}
+		<span class="visibility has-tooltip" title="{{{visibilityString}}}">
+			{{#if visibilityEveryone}}
+				<img src="{{placesLinkIMG}}">
+			{{else}}
+				<img src="{{placesContactsIMG}}">
+			{{/if}}
+		</span>
+	{{/if}}
+	{{#if comments}}
+		<span class="comment-details" data-count="{{num_comments}}">{{comments}}</span>
+	{{/if}}
+	{{#if isAdmin}}
+		<span class="delete-link has-tooltip" title="{{deleteTXT}}">
+			<a href="#" data-announcement-id="{{{announcementId}}}">
+				<img class="svg" src="{{deleteIMG}}" alt=""/>
+			</a>
+		</span>
+		{{#if hasNotifications}}
+			<span class="mute-link has-tooltip" title="{{removeNotificationTXT}}">
+				<a href="#" data-announcement-id="{{{announcementId}}}">
+					<img class="svg" src="{{notificationsOffIMG}}" alt=""/>
+				</a>
+			</span>
+		{{/if}}
+	{{/if}}
+	{{#if message}}
+		<br /><br /><p>{{{message}}}</p>
+	{{/if}}
+</div>
+<hr />
diff --git a/js/templates/comment.handlebars b/js/templates/comment.handlebars
new file mode 100644
index 00000000..7188ae0b
--- /dev/null
+++ b/js/templates/comment.handlebars
@@ -0,0 +1,16 @@
+<li class="comment{{#if isUnread}} unread{{/if}}{{#if isLong}} collapsed{{/if}}" data-id="{{id}}">
+	<div class="authorRow">
+		{{#if avatarEnabled}}
+			<div class="avatar" {{#if actorId}}data-username="{{actorId}}"{{/if}}> </div>
+		{{/if}}
+		<div class="author">{{actorDisplayName}}</div>
+		{{#if isUserAuthor}}
+			<a href="#" class="action edit icon icon-rename has-tooltip" title="{{editTooltip}}"></a>
+		{{/if}}
+		<div class="date has-tooltip live-relative-timestamp" data-timestamp="{{timestamp}}" title="{{altDate}}">{{date}}</div>
+	</div>
+	<div class="message">{{{formattedMessage}}}</div>
+	{{#if isLong}}
+		<div class="message-overlay"></div>
+	{{/if}}
+</li>
diff --git a/js/templates/commentsview.handlebars b/js/templates/commentsview.handlebars
new file mode 100644
index 00000000..64a074e5
--- /dev/null
+++ b/js/templates/commentsview.handlebars
@@ -0,0 +1,6 @@
+<ul class="comments">
+</ul>
+<div class="emptycontent hidden"><div class="icon-comment"></div>
+<p>{{emptyResultLabel}}</p></div>
+<input type="button" class="showMore hidden" value="{{moreLabel}}" name="show-more" id="show-more" />
+<div class="loading hidden" style="height: 50px"></div>
diff --git a/js/templates/edit_comment.handlebars b/js/templates/edit_comment.handlebars
new file mode 100644
index 00000000..0438ae01
--- /dev/null
+++ b/js/templates/edit_comment.handlebars
@@ -0,0 +1,19 @@
+<div class="newCommentRow comment" data-id="{{id}}">
+	<div class="authorRow">
+		{{#if avatarEnabled}}
+			<div class="avatar" data-username="{{actorId}}"></div>
+		{{/if}}
+		<div class="author">{{actorDisplayName}}</div>
+		{{#if isEditMode}}
+			<a href="#" class="action delete icon icon-delete has-tooltip" title="{{deleteTooltip}}"></a>
+		{{/if}}
+		</div>
+		 <form class="newCommentForm">
+			<textarea rows="1" class="message" placeholder="{{newMessagePlaceholder}}">{{message}}</textarea>
+			<input class="submit icon-confirm" type="submit" value="" />
+			{{#if isEditMode}}
+				<input class="cancel pull-right" type="button" value="{{cancelText}}" />
+			{{/if}}
+		<div class="submitLoading icon-loading-small hidden"></div>
+	</form>
+</div>
diff --git a/templates/main.php b/templates/main.php
index 4213abd2..6031dea5 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -6,6 +6,7 @@
 \OCP\Util::addScript('oc-backbone-webdav');
 script('announcementcenter', [
 	'script',
+	'templates',
 	'commentmodel',
 	'commentcollection',
 	'commentsummarymodel',