diff --git a/Makefile b/Makefile
index 4f89463c..a4ac0de7 100644
--- a/Makefile
+++ b/Makefile
@@ -17,6 +17,9 @@ create-tag:
 	git tag -s -a v$(version) -m "Tagging the $(version) release."
 	git push origin v$(version)
 
+js-templates:
+	handlebars -n OCA.External.Templates js/templates -f js/templates.js
+
 clean:
 	rm -rf $(build_dir)
 	rm -rf node_modules
diff --git a/js/admin.js b/js/admin.js
index 83efce4f..19da3e19 100644
--- a/js/admin.js
+++ b/js/admin.js
@@ -93,8 +93,21 @@
 
 		$list: null,
 
-		_compiledSiteTemplate: null,
-		_compiledIconTemplate: null,
+		_renderSite: function(data) {
+			data.nameTXT = t('external', 'Name');
+			data.urlTXT = t('external', 'URL');
+			data.languageTXT = t('external', 'Language');
+			data.groupsTXT = t('external', 'Groups');
+			data.devicesTXT = t('external', 'Devices');
+			data.iconTXT = t('external', 'Icon');
+			data.positionTXT = t('external', 'Position');
+			data.redirectTXT = t('external', 'Redirect');
+			data.removeSiteTXT = t('external', 'Remove site')
+			data.noEmbedTXT = t('external', 'This site does not allow embedding');
+			data.deleteIMG = OC.imagePath('core', 'actions/delete.svg');
+
+			return OCA.External.Templates.site(data);
+		},
 
 		init: function() {
 			var self = this;
@@ -103,7 +116,7 @@
 			$('#add_external_site').click(function(e) {
 				e.preventDefault();
 
-				var $el = $(self._compiledSiteTemplate({
+				var $el = $(self._renderSite({
 					id: 'new-' + Date.now(),
 					name: t('external', 'New site'),
 					icon: 'external.svg',
@@ -115,8 +128,6 @@
 				$el.find('.options').removeClass('hidden');
 				self.$list.append($el);
 			});
-			this._compiledSiteTemplate = Handlebars.compile($('#site-template').html());
-			this._compiledIconTemplate = Handlebars.compile($('#icon-template').html());
 
 			this.load();
 		},
@@ -138,7 +149,7 @@
 					self.availableDevices = response.ocs.data.devices;
 
 					if (response.ocs.data.sites.length === 0) {
-						var $el = $(self._compiledSiteTemplate({
+						var $el = $(self._renderSite({
 							id: 'undefined'
 						}));
 						self._attachEvents($el);
@@ -154,7 +165,7 @@
 			var self = this;
 
 			_.each(this._sites.models, function(site) {
-				var $el = $(self._compiledSiteTemplate(site.attributes));
+				var $el = $(self._renderSite(site.attributes));
 				self._attachEvents($el);
 				self.$list.append($el);
 			});
@@ -287,8 +298,9 @@
 					return;
 				}
 
+				data.deleteTXT = t('external', 'Delete icon');
 
-				var $row = $(self._compiledIconTemplate(data));
+				var $row = $(OCA.External.Templates.icon(data));
 				self._attachEventsIcon($row);
 				$table.append($row);
 				icons.push(data);
diff --git a/js/templates.js b/js/templates.js
new file mode 100644
index 00000000..72b8b263
--- /dev/null
+++ b/js/templates.js
@@ -0,0 +1,151 @@
+(function() {
+  var template = Handlebars.template, templates = OCA.External.Templates = OCA.External.Templates || {};
+templates['icon'] = 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 "<li data-icon=\""
+    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+    + "\">\n	<div class=\"img\">\n		<img src=\""
+    + alias4(((helper = (helper = helpers.url || (depth0 != null ? depth0.url : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"url","hash":{},"data":data}) : helper)))
+    + "\">\n	</div>\n	<span class=\"name\">"
+    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+    + "</span>\n	<span class=\"icon icon-delete\" 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)))
+    + "\"></span>\n</li>\n";
+},"useData":true});
+templates['site'] = template({"1":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {});
+
+  return ((stack1 = helpers["if"].call(alias1,(helpers.isSelected || (depth0 && depth0.isSelected) || helpers.helperMissing).call(alias1,(depth0 != null ? depth0.code : depth0),(depths[1] != null ? depths[1].lang : depths[1]),{"name":"isSelected","hash":{},"data":data}),{"name":"if","hash":{},"fn":container.program(2, data, 0, blockParams, depths),"inverse":container.program(4, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "");
+},"2":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "							<option value=\""
+    + alias4(((helper = (helper = helpers.code || (depth0 != null ? depth0.code : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"code","hash":{},"data":data}) : helper)))
+    + "\" selected=\"selected\">"
+    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+    + "</option>\n";
+},"4":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "							<option value=\""
+    + alias4(((helper = (helper = helpers.code || (depth0 != null ? depth0.code : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"code","hash":{},"data":data}) : helper)))
+    + "\">"
+    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+    + "</option>\n";
+},"6":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {});
+
+  return ((stack1 = helpers["if"].call(alias1,(helpers.isSelected || (depth0 && depth0.isSelected) || helpers.helperMissing).call(alias1,(depth0 != null ? depth0.device : depth0),(depths[1] != null ? depths[1].device : depths[1]),{"name":"isSelected","hash":{},"data":data}),{"name":"if","hash":{},"fn":container.program(7, data, 0, blockParams, depths),"inverse":container.program(9, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "");
+},"7":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "							<option value=\""
+    + alias4(((helper = (helper = helpers.device || (depth0 != null ? depth0.device : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"device","hash":{},"data":data}) : helper)))
+    + "\" selected=\"selected\">"
+    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+    + "</option>\n";
+},"9":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "							<option value=\""
+    + alias4(((helper = (helper = helpers.device || (depth0 != null ? depth0.device : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"device","hash":{},"data":data}) : helper)))
+    + "\">"
+    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+    + "</option>\n";
+},"11":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {});
+
+  return ((stack1 = helpers["if"].call(alias1,(helpers.isSelected || (depth0 && depth0.isSelected) || helpers.helperMissing).call(alias1,(depth0 != null ? depth0.icon : depth0),(depths[1] != null ? depths[1].icon : depths[1]),{"name":"isSelected","hash":{},"data":data}),{"name":"if","hash":{},"fn":container.program(12, data, 0, blockParams, depths),"inverse":container.program(14, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "");
+},"12":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "							<option value=\""
+    + alias4(((helper = (helper = helpers.icon || (depth0 != null ? depth0.icon : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"icon","hash":{},"data":data}) : helper)))
+    + "\" selected=\"selected\">"
+    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+    + "</option>\n";
+},"14":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "							<option value=\""
+    + alias4(((helper = (helper = helpers.icon || (depth0 != null ? depth0.icon : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"icon","hash":{},"data":data}) : helper)))
+    + "\"><img class=\"svg action delete-button\" 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)))
+    + "\" title=\""
+    + alias4(((helper = (helper = helpers.removeSiteTXT || (depth0 != null ? depth0.removeSiteTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"removeSiteTXT","hash":{},"data":data}) : helper)))
+    + "\"> "
+    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+    + "</option>\n";
+},"16":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {});
+
+  return ((stack1 = helpers["if"].call(alias1,(helpers.isSelected || (depth0 && depth0.isSelected) || helpers.helperMissing).call(alias1,(depth0 != null ? depth0.type : depth0),(depths[1] != null ? depths[1].type : depths[1]),{"name":"isSelected","hash":{},"data":data}),{"name":"if","hash":{},"fn":container.program(17, data, 0, blockParams, depths),"inverse":container.program(19, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "");
+},"17":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "							<option value=\""
+    + alias4(((helper = (helper = helpers.type || (depth0 != null ? depth0.type : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"type","hash":{},"data":data}) : helper)))
+    + "\" selected=\"selected\">"
+    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+    + "</option>\n";
+},"19":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "							<option value=\""
+    + alias4(((helper = (helper = helpers.type || (depth0 != null ? depth0.type : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"type","hash":{},"data":data}) : helper)))
+    + "\">"
+    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+    + "</option>\n";
+},"21":function(container,depth0,helpers,partials,data) {
+    return " checked=\"checked\"";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "<li data-site-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	<input type=\"text\" class=\"site-name trigger-save\" name=\"site-name\" value=\""
+    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+    + "\" placeholder=\""
+    + alias4(((helper = (helper = helpers.nameTXT || (depth0 != null ? depth0.nameTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"nameTXT","hash":{},"data":data}) : helper)))
+    + "\">\n	<input type=\"text\" class=\"site-url trigger-save\"  name=\"site-url\" value=\""
+    + alias4(((helper = (helper = helpers.url || (depth0 != null ? depth0.url : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"url","hash":{},"data":data}) : helper)))
+    + "\" placeholder=\""
+    + alias4(((helper = (helper = helpers.urlTXT || (depth0 != null ? depth0.urlTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"urlTXT","hash":{},"data":data}) : helper)))
+    + "\">\n	<a class=\"icon-more\" href=\"#\"></a>\n\n	<div class=\"options hidden\">\n		<div>\n			<label>\n				<span>"
+    + alias4(((helper = (helper = helpers.languageTXT || (depth0 != null ? depth0.languageTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"languageTXT","hash":{},"data":data}) : helper)))
+    + "</span>\n				<select class=\"site-lang trigger-save\">\n"
+    + ((stack1 = helpers.each.call(alias1,(helpers.getLanguages || (depth0 && depth0.getLanguages) || alias2).call(alias1,(depth0 != null ? depth0.lang : depth0),{"name":"getLanguages","hash":{},"data":data}),{"name":"each","hash":{},"fn":container.program(1, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "				</select>\n			</label>\n		</div>\n\n		<div>\n			<label>\n				<span>"
+    + alias4(((helper = (helper = helpers.groupsTXT || (depth0 != null ? depth0.groupsTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"groupsTXT","hash":{},"data":data}) : helper)))
+    + "</span>\n				<input type=\"hidden\" name=\"site-groups\" class=\"site-groups\" value=\""
+    + alias4((helpers.join || (depth0 && depth0.join) || alias2).call(alias1,(depth0 != null ? depth0.groups : depth0),{"name":"join","hash":{},"data":data}))
+    + "\" style=\"width: 320px;\" />\n			</label>\n		</div>\n\n		<div>\n			<label>\n				<span>"
+    + alias4(((helper = (helper = helpers.devicesTXT || (depth0 != null ? depth0.devicesTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"devicesTXT","hash":{},"data":data}) : helper)))
+    + "</span>\n				<select class=\"site-device trigger-save\">\n"
+    + ((stack1 = helpers.each.call(alias1,(helpers.getDevices || (depth0 && depth0.getDevices) || alias2).call(alias1,(depth0 != null ? depth0.device : depth0),{"name":"getDevices","hash":{},"data":data}),{"name":"each","hash":{},"fn":container.program(6, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "				</select>\n			</label>\n		</div>\n\n		<div>\n			<label>\n				<span>"
+    + alias4(((helper = (helper = helpers.iconTXT || (depth0 != null ? depth0.iconTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"iconTXT","hash":{},"data":data}) : helper)))
+    + "</span>\n				<select class=\"site-icon trigger-save\">\n"
+    + ((stack1 = helpers.each.call(alias1,(helpers.getIcons || (depth0 && depth0.getIcons) || alias2).call(alias1,(depth0 != null ? depth0.icon : depth0),{"name":"getIcons","hash":{},"data":data}),{"name":"each","hash":{},"fn":container.program(11, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "				</select>\n			</label>\n		</div>\n\n		<div>\n			<label>\n				<span>"
+    + alias4(((helper = (helper = helpers.positionTXT || (depth0 != null ? depth0.positionTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"positionTXT","hash":{},"data":data}) : helper)))
+    + "</span>\n				<select class=\"site-type trigger-save\">\n"
+    + ((stack1 = helpers.each.call(alias1,(helpers.getTypes || (depth0 && depth0.getTypes) || alias2).call(alias1,(depth0 != null ? depth0.type : depth0),{"name":"getTypes","hash":{},"data":data}),{"name":"each","hash":{},"fn":container.program(16, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "				</select>\n			</label>\n		</div>\n\n		<div class=\"site-redirect-box\">\n			<label>\n				<span>"
+    + alias4(((helper = (helper = helpers.redirectTXT || (depth0 != null ? depth0.redirectTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"redirectTXT","hash":{},"data":data}) : helper)))
+    + "</span>\n				<input type=\"checkbox\" id=\"site_redirect_"
+    + 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)))
+    + "\" name=\"site_redirect_"
+    + 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					   value=\"1\" class=\"site-redirect checkbox trigger-save\" "
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.redirect : depth0),{"name":"if","hash":{},"fn":container.program(21, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + " />\n				<label for=\"site_redirect_"
+    + 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)))
+    + "\">"
+    + alias4(((helper = (helper = helpers.noEmbedTXT || (depth0 != null ? depth0.noEmbedTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"noEmbedTXT","hash":{},"data":data}) : helper)))
+    + "</label>\n			</label>\n		</div>\n\n		<div class=\"button delete-button\">"
+    + alias4(((helper = (helper = helpers.removeSiteTXT || (depth0 != null ? depth0.removeSiteTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"removeSiteTXT","hash":{},"data":data}) : helper)))
+    + "</div>\n	</div>\n</li>\n";
+},"useData":true,"useDepths":true});
+})();
\ No newline at end of file
diff --git a/js/templates/icon.handlebars b/js/templates/icon.handlebars
new file mode 100644
index 00000000..7c826fd3
--- /dev/null
+++ b/js/templates/icon.handlebars
@@ -0,0 +1,7 @@
+<li data-icon="{{name}}">
+	<div class="img">
+		<img src="{{url}}">
+	</div>
+	<span class="name">{{name}}</span>
+	<span class="icon icon-delete" title="{{deleteTXT}}"></span>
+</li>
diff --git a/js/templates/site.handlebars b/js/templates/site.handlebars
new file mode 100644
index 00000000..332b3ee4
--- /dev/null
+++ b/js/templates/site.handlebars
@@ -0,0 +1,85 @@
+<li data-site-id="{{id}}">
+	<input type="text" class="site-name trigger-save" name="site-name" value="{{name}}" placeholder="{{nameTXT}}">
+	<input type="text" class="site-url trigger-save"  name="site-url" value="{{url}}" placeholder="{{urlTXT}}">
+	<a class="icon-more" href="#"></a>
+
+	<div class="options hidden">
+		<div>
+			<label>
+				<span>{{languageTXT}}</span>
+				<select class="site-lang trigger-save">
+					{{#each (getLanguages lang)}}
+						{{#if (isSelected code ../lang)}}
+							<option value="{{code}}" selected="selected">{{name}}</option>
+						{{else}}
+							<option value="{{code}}">{{name}}</option>
+						{{/if}}
+					{{/each}}
+				</select>
+			</label>
+		</div>
+
+		<div>
+			<label>
+				<span>{{groupsTXT}}</span>
+				<input type="hidden" name="site-groups" class="site-groups" value="{{ join groups }}" style="width: 320px;" />
+			</label>
+		</div>
+
+		<div>
+			<label>
+				<span>{{devicesTXT}}</span>
+				<select class="site-device trigger-save">
+					{{#each (getDevices device)}}
+						{{#if (isSelected device ../device)}}
+							<option value="{{device}}" selected="selected">{{name}}</option>
+						{{else}}
+							<option value="{{device}}">{{name}}</option>
+						{{/if}}
+					{{/each}}
+				</select>
+			</label>
+		</div>
+
+		<div>
+			<label>
+				<span>{{iconTXT}}</span>
+				<select class="site-icon trigger-save">
+					{{#each (getIcons icon)}}
+						{{#if (isSelected icon ../icon)}}
+							<option value="{{icon}}" selected="selected">{{name}}</option>
+						{{else}}
+							<option value="{{icon}}"><img class="svg action delete-button" src="{{deleteIMG}}" title="{{removeSiteTXT}}"> {{name}}</option>
+						{{/if}}
+					{{/each}}
+				</select>
+			</label>
+		</div>
+
+		<div>
+			<label>
+				<span>{{positionTXT}}</span>
+				<select class="site-type trigger-save">
+					{{#each (getTypes type)}}
+						{{#if (isSelected type ../type)}}
+							<option value="{{type}}" selected="selected">{{name}}</option>
+						{{else}}
+							<option value="{{type}}">{{name}}</option>
+						{{/if}}
+					{{/each}}
+				</select>
+			</label>
+		</div>
+
+		<div class="site-redirect-box">
+			<label>
+				<span>{{redirectTXT}}</span>
+				<input type="checkbox" id="site_redirect_{{id}}" name="site_redirect_{{id}}"
+					   value="1" class="site-redirect checkbox trigger-save" {{#if redirect}} checked="checked"{{/if}} />
+				<label for="site_redirect_{{id}}">{{noEmbedTXT}}</label>
+			</label>
+		</div>
+
+		<div class="button delete-button">{{removeSiteTXT}}</div>
+	</div>
+</li>
diff --git a/templates/settings.php b/templates/settings.php
index eec8b1fd..d20096af 100644
--- a/templates/settings.php
+++ b/templates/settings.php
@@ -26,6 +26,7 @@
 style('external', 'style');
 script('external', 'admin');
 script('settings', 'apps');
+script('external', 'templates');
 
 /** @var array $_ */
 /** @var \OCP\IL10N $l */
@@ -42,102 +43,8 @@
 
 		<input type="button" id="add_external_site" value="<?php p($l->t('New site')); ?>" />
 
-		<script type="text/template" id="site-template">
-			<li data-site-id="{{id}}">
-				<input type="text" class="site-name trigger-save" name="site-name" value="{{name}}" placeholder="<?php p($l->t('Name')); ?>">
-				<input type="text" class="site-url trigger-save"  name="site-url" value="{{url}}" placeholder="<?php p($l->t('URL')); ?>">
-				<a class="icon-more" href="#"></a>
-
-				<div class="options hidden">
-					<div>
-						<label>
-							<span><?php p($l->t('Language')) ?></span>
-							<select class="site-lang trigger-save">
-								{{#each (getLanguages lang)}}
-								{{#if (isSelected code ../lang)}}
-								<option value="{{code}}" selected="selected">{{name}}</option>
-								{{else}}
-								<option value="{{code}}">{{name}}</option>
-								{{/if}}
-								{{/each}}
-							</select>
-						</label>
-					</div>
-
-					<div>
-						<label>
-							<span><?php p($l->t('Groups')) ?></span>
-							<input type="hidden" name="site-groups" class="site-groups" value="{{ join groups }}" style="width: 320px;" />
-						</label>
-					</div>
-
-					<div>
-						<label>
-							<span><?php p($l->t('Devices')) ?></span>
-							<select class="site-device trigger-save">
-								{{#each (getDevices device)}}
-								{{#if (isSelected device ../device)}}
-								<option value="{{device}}" selected="selected">{{name}}</option>
-								{{else}}
-								<option value="{{device}}">{{name}}</option>
-								{{/if}}
-								{{/each}}
-							</select>
-						</label>
-					</div>
-
-					<div>
-						<label>
-							<span><?php p($l->t('Icon')) ?></span>
-							<select class="site-icon trigger-save">
-								{{#each (getIcons icon)}}
-								{{#if (isSelected icon ../icon)}}
-								<option value="{{icon}}" selected="selected">{{name}}</option>
-								{{else}}
-								<option value="{{icon}}"><img class="svg action delete-button" src="<?php p(image_path('core', 'actions/delete.svg')); ?>" title="<?php p($l->t('Remove site')); ?>"> {{name}}</option>
-								{{/if}}
-								{{/each}}
-							</select>
-						</label>
-					</div>
-
-					<div>
-						<label>
-							<span><?php p($l->t('Position')) ?></span>
-							<select class="site-type trigger-save">
-								{{#each (getTypes type)}}
-								{{#if (isSelected type ../type)}}
-								<option value="{{type}}" selected="selected">{{name}}</option>
-								{{else}}
-								<option value="{{type}}">{{name}}</option>
-								{{/if}}
-								{{/each}}
-							</select>
-						</label>
-					</div>
-
-					<div class="site-redirect-box">
-						<label>
-							<span><?php p($l->t('Redirect')) ?></span>
-							<input type="checkbox" id="site_redirect_{{id}}" name="site_redirect_{{id}}"
-								   value="1" class="site-redirect checkbox trigger-save" {{#if redirect}} checked="checked"{{/if}} />
-							<label for="site_redirect_{{id}}"><?php p($l->t('This site does not allow embedding')) ?></label>
-						</label>
-					</div>
-
-					<div class="button delete-button"><?php p($l->t('Remove site')); ?></div>
-				</div>
-			</li>
-		</script>
-
 		<script type="text/template" id="icon-template">
-			<li data-icon="{{name}}">
-				<div class="img">
-					<img src="{{url}}">
-				</div>
-				<span class="name">{{name}}</span>
-				<span class="icon icon-delete" title="<?php p($l->t('Delete icon')); ?>"></span>
-			</li>
+
 		</script>
 
 		<p>