diff --git a/public/src/modules/composer.js b/public/src/modules/composer.js
index 34941f7518..de16eb733d 100644
--- a/public/src/modules/composer.js
+++ b/public/src/modules/composer.js
@@ -112,163 +112,167 @@ define(['taskbar'], function(taskbar) {
 
 	composer.init = function() {
 		if (!composer.initialized) {
-			var taskbar = document.getElementById('taskbar');
-
-			composer.postContainer = document.createElement('div');
-			composer.postContainer.className = 'post-window row';
-			composer.postContainer.innerHTML =	'<div class="col-md-5">' +
-													'<input type="text" tabIndex="1" placeholder="Enter your topic title here..." />' +
-													'<div class="btn-toolbar formatting-bar">' +
-														'<div class="btn-group">' +
-															'<span class="btn btn-link" tabindex="-1"><i class="fa fa-bold"></i></span>' +
-															'<span class="btn btn-link" tabindex="-1"><i class="fa fa-italic"></i></span>' +
-															'<span class="btn btn-link" tabindex="-1"><i class="fa fa-list"></i></span>' +
-															'<span class="btn btn-link" tabindex="-1"><i class="fa fa-link"></i></span>' +
-														'</div>' +
-													'</div>' +
-													'<textarea tabIndex="2"></textarea>' +
-													'<div class="imagedrop"><div>Drag and Drop Images Here</div></div>'+
-													'<div class="btn-toolbar action-bar">' +
-														'<div class="btn-group" style="float: right; margin-right: -8px">' +
-															'<button data-action="minimize" class="btn hidden-xs" tabIndex="4"><i class="fa fa-download"></i> Minimize</button>' +
-															'<button class="btn" data-action="discard" tabIndex="5"><i class="fa fa-times"></i> Discard</button>' +
-															'<button data-action="post" class="btn" tabIndex="3"><i class="fa fa-check"></i> Submit</button>' +
-														'</div>' +
-													'</div>' +
-												'</div>';
-
-			document.body.insertBefore(composer.postContainer, taskbar);
-
-			if(config.imgurClientIDSet) {
-				initializeFileReader();
-			}
+			templates.preload_template('composer', function() {
+				$(document.body).append(templates['composer'].parse({}));
+				composer.postContainer = $('.composer')[0];
 
-			socket.on('api:composer.push', function(threadData) {
-				if (!threadData.error) {
-					var uuid = utils.generateUUID();
-
-					composer.taskbar.push('composer', uuid, {
-						title: (!threadData.cid ? (threadData.title || '') : 'New Topic'),
-						icon: threadData.picture
-					});
-
-					composer.posts[uuid] = {
-						tid: threadData.tid,
-						cid: threadData.cid,
-						pid: threadData.pid,
-						title: threadData.title || '',
-						body: threadData.body || '',
-						modified: false
-					};
-					composer.load(uuid);
-				} else {
-					app.alert({
-						type: 'danger',
-						timeout: 5000,
-						alert_id: 'post_error',
-						title: 'Please Log In to Post',
-						message: 'Posting is currently restricted to registered members only, click here to log in',
-						clickfn: function() {
-							ajaxify.go('login');
-						}
-					});
+				if(config.imgurClientIDSet) {
+					initializeFileReader();
 				}
-			});
 
-			socket.on('api:composer.editCheck', function(editCheck) {
-				if (editCheck.titleEditable === true) composer.postContainer.querySelector('input').readOnly = false;
-			});
+				socket.on('api:composer.push', function(threadData) {
+					if (!threadData.error) {
+						var uuid = utils.generateUUID();
+
+						composer.taskbar.push('composer', uuid, {
+							title: (!threadData.cid ? (threadData.title || '') : 'New Topic'),
+							icon: threadData.picture
+						});
+
+						composer.posts[uuid] = {
+							tid: threadData.tid,
+							cid: threadData.cid,
+							pid: threadData.pid,
+							title: threadData.title || '',
+							body: threadData.body || '',
+							modified: false
+						};
+						composer.load(uuid);
+					} else {
+						app.alert({
+							type: 'danger',
+							timeout: 5000,
+							alert_id: 'post_error',
+							title: 'Please Log In to Post',
+							message: 'Posting is currently restricted to registered members only, click here to log in',
+							clickfn: function() {
+								ajaxify.go('login');
+							}
+						});
+					}
+				});
 
-			// Post Window events
-			var	jPostContainer = $(composer.postContainer),
-				postContentEl = composer.postContainer.querySelector('textarea');
+				socket.on('api:composer.editCheck', function(editCheck) {
+					if (editCheck.titleEditable === true) composer.postContainer.querySelector('input').readOnly = false;
+				});
 
-			jPostContainer.on('change', 'input, textarea', function() {
-				var uuid = $(this).parents('.post-window')[0].getAttribute('data-uuid');
-				if (this.nodeName === 'INPUT') composer.posts[uuid].title = this.value;
-				else if (this.nodeName === 'TEXTAREA') composer.posts[uuid].body = this.value;
+				// Post Window events
+				var	jPostContainer = $(composer.postContainer),
+					postContentEl = composer.postContainer.querySelector('textarea');
 
-				// Mark this post window as having been changed
-				composer.posts[uuid].modified = true;
-			});
+				jPostContainer.on('change', 'input, textarea', function() {
+					var uuid = $(this).parents('.post-window')[0].getAttribute('data-uuid');
+					if (this.nodeName === 'INPUT') composer.posts[uuid].title = this.value;
+					else if (this.nodeName === 'TEXTAREA') composer.posts[uuid].body = this.value;
 
-			jPostContainer.on('click', '.action-bar button', function() {
-				var	action = this.getAttribute('data-action'),
-					uuid = $(this).parents('.post-window').attr('data-uuid');
-				switch(action) {
-					case 'post': composer.post(uuid); break;
-					case 'minimize': composer.minimize(uuid); break;
-					case 'discard':
-						if (composer.posts[uuid].modified) {
-							bootbox.confirm('Are you sure you wish to discard this post?', function(discard) {
-								if (discard) composer.discard(uuid);
-							});
-						} else {
-							composer.discard(uuid);
-						}
-						break;
-				}
-			});
+					// Mark this post window as having been changed
+					composer.posts[uuid].modified = true;
+				});
 
-			jPostContainer.on('click', '.formatting-bar span', function() {
-				var iconClass = this.querySelector('i').className,
-					cursorEnd = postContentEl.value.length,
-					selectionStart = postContentEl.selectionStart,
-					selectionEnd = postContentEl.selectionEnd,
-					selectionLength = selectionEnd - selectionStart;
-
-				function insertIntoInput(element, value) {
-					var start = postContentEl.selectionStart;
-					element.value = element.value.slice(0, start) + value + element.value.slice(start, element.value.length);
-					postContentEl.selectionStart = postContentEl.selectionEnd = start + value.length;
-				}
+				jPostContainer.on('click', '.action-bar button', function() {
+					var	action = this.getAttribute('data-action'),
+						uuid = $(this).parents('.post-window').attr('data-uuid');
+					switch(action) {
+						case 'post': composer.post(uuid); break;
+						case 'minimize': composer.minimize(uuid); break;
+						case 'discard':
+							if (composer.posts[uuid].modified) {
+								bootbox.confirm('Are you sure you wish to discard this post?', function(discard) {
+									if (discard) composer.discard(uuid);
+								});
+							} else {
+								composer.discard(uuid);
+							}
+							break;
+					}
+				});
 
-				switch(iconClass) {
-					case 'fa fa-bold':
-						if (selectionStart === selectionEnd) {
-							// Nothing selected
-							insertIntoInput(postContentEl, "**bolded text**");
-						} else {
-							// Text selected
-							postContentEl.value = postContentEl.value.slice(0, selectionStart) + '**' + postContentEl.value.slice(selectionStart, selectionEnd) + '**' + postContentEl.value.slice(selectionEnd);
-							postContentEl.selectionStart = selectionStart + 2;
-							postContentEl.selectionEnd = selectionEnd + 2;
-						}
-					break;
-					case 'fa fa-italic':
-						if (selectionStart === selectionEnd) {
-							// Nothing selected
-							insertIntoInput(postContentEl, "*italicised text*");
-						} else {
-							// Text selected
-							postContentEl.value = postContentEl.value.slice(0, selectionStart) + '*' + postContentEl.value.slice(selectionStart, selectionEnd) + '*' + postContentEl.value.slice(selectionEnd);
-							postContentEl.selectionStart = selectionStart + 1;
-							postContentEl.selectionEnd = selectionEnd + 1;
-						}
-					break;
-					case 'fa fa-list':
-						// Nothing selected
-						insertIntoInput(postContentEl, "\n\n* list item");
-					break;
-					case 'fa fa-link':
-						if (selectionStart === selectionEnd) {
+				jPostContainer.on('click', '.formatting-bar span', function() {
+					var iconClass = this.querySelector('i').className,
+						cursorEnd = postContentEl.value.length,
+						selectionStart = postContentEl.selectionStart,
+						selectionEnd = postContentEl.selectionEnd,
+						selectionLength = selectionEnd - selectionStart;
+
+					function insertIntoInput(element, value) {
+						var start = postContentEl.selectionStart;
+						element.value = element.value.slice(0, start) + value + element.value.slice(start, element.value.length);
+						postContentEl.selectionStart = postContentEl.selectionEnd = start + value.length;
+					}
+
+					switch(iconClass) {
+						case 'fa fa-bold':
+							if (selectionStart === selectionEnd) {
+								// Nothing selected
+								insertIntoInput(postContentEl, "**bolded text**");
+							} else {
+								// Text selected
+								postContentEl.value = postContentEl.value.slice(0, selectionStart) + '**' + postContentEl.value.slice(selectionStart, selectionEnd) + '**' + postContentEl.value.slice(selectionEnd);
+								postContentEl.selectionStart = selectionStart + 2;
+								postContentEl.selectionEnd = selectionEnd + 2;
+							}
+						break;
+						case 'fa fa-italic':
+							if (selectionStart === selectionEnd) {
+								// Nothing selected
+								insertIntoInput(postContentEl, "*italicised text*");
+							} else {
+								// Text selected
+								postContentEl.value = postContentEl.value.slice(0, selectionStart) + '*' + postContentEl.value.slice(selectionStart, selectionEnd) + '*' + postContentEl.value.slice(selectionEnd);
+								postContentEl.selectionStart = selectionStart + 1;
+								postContentEl.selectionEnd = selectionEnd + 1;
+							}
+						break;
+						case 'fa fa-list':
 							// Nothing selected
-							insertIntoInput(postContentEl, "[link text](link url)");
-						} else {
-							// Text selected
-							postContentEl.value = postContentEl.value.slice(0, selectionStart) + '[' + postContentEl.value.slice(selectionStart, selectionEnd) + '](link url)' + postContentEl.value.slice(selectionEnd);
-							postContentEl.selectionStart = selectionStart + selectionLength + 3;
-							postContentEl.selectionEnd = selectionEnd + 11;
-						}
-					break;
-				}
-			});
+							insertIntoInput(postContentEl, "\n\n* list item");
+						break;
+						case 'fa fa-link':
+							if (selectionStart === selectionEnd) {
+								// Nothing selected
+								insertIntoInput(postContentEl, "[link text](link url)");
+							} else {
+								// Text selected
+								postContentEl.value = postContentEl.value.slice(0, selectionStart) + '[' + postContentEl.value.slice(selectionStart, selectionEnd) + '](link url)' + postContentEl.value.slice(selectionEnd);
+								postContentEl.selectionStart = selectionStart + selectionLength + 3;
+								postContentEl.selectionEnd = selectionEnd + 11;
+							}
+						break;
+					}
+				});
 
-			window.addEventListener('resize', function() {
-				if (composer.active !== undefined) composer.reposition(composer.active);
-			});
+				window.addEventListener('resize', function() {
+					if (composer.active !== undefined) composer.reposition(composer.active);
+				});
 
-			composer.initialized = true;
+				composer.initialized = true;
+			});
+			// var taskbar = document.getElementById('taskbar');
+
+			// composer.postContainer = document.createElement('div');
+			// composer.postContainer.className = 'post-window row';
+			// composer.postContainer.innerHTML =	'<div class="col-md-5">' +
+			// 										'<input type="text" tabIndex="1" placeholder="Enter your topic title here..." />' +
+			// 										'<div class="btn-toolbar formatting-bar">' +
+			// 											'<div class="btn-group">' +
+			// 												'<span class="btn btn-link" tabindex="-1"><i class="fa fa-bold"></i></span>' +
+			// 												'<span class="btn btn-link" tabindex="-1"><i class="fa fa-italic"></i></span>' +
+			// 												'<span class="btn btn-link" tabindex="-1"><i class="fa fa-list"></i></span>' +
+			// 												'<span class="btn btn-link" tabindex="-1"><i class="fa fa-link"></i></span>' +
+			// 											'</div>' +
+			// 										'</div>' +
+			// 										'<textarea tabIndex="2"></textarea>' +
+			// 										'<div class="imagedrop"><div>Drag and Drop Images Here</div></div>'+
+			// 										'<div class="btn-toolbar action-bar">' +
+			// 											'<div class="btn-group" style="float: right; margin-right: -8px">' +
+			// 												'<button data-action="minimize" class="btn hidden-xs" tabIndex="4"><i class="fa fa-download"></i> Minimize</button>' +
+			// 												'<button class="btn" data-action="discard" tabIndex="5"><i class="fa fa-times"></i> Discard</button>' +
+			// 												'<button data-action="post" class="btn" tabIndex="3"><i class="fa fa-check"></i> Submit</button>' +
+			// 											'</div>' +
+			// 										'</div>' +
+			// 									'</div>';
+
+			// document.body.insertBefore(composer.postContainer, taskbar);
 		}
 	}
 
diff --git a/public/src/templates.js b/public/src/templates.js
index 53f7919f91..8390f54075 100644
--- a/public/src/templates.js
+++ b/public/src/templates.js
@@ -122,6 +122,27 @@
 		return '';
 	}
 
+	templates.preload_template = function(tpl_name, callback) {
+		// TODO: This should be "load_template", and the current load_template
+		// should be named something else
+		// TODO: The "Date.now()" in the line below is only there for development purposes.
+		// It should be removed at some point.
+		jQuery.get(RELATIVE_PATH + '/templates/' + tpl_name + '.tpl?v=' + Date.now(), function (html) {
+			var template = function () {
+				this.toString = function () {
+					return this.html;
+				};
+			}
+
+			template.prototype.parse = parse;
+			template.prototype.html = String(html);
+			template.prototype.blocks = {};
+
+			templates[tpl_name] = new template;
+
+			callback();
+		});
+	}
 
 	templates.load_template = function (callback, url, template) {
 		var location = document.location || window.location,
@@ -137,19 +158,7 @@
 		var timestamp = new Date().getTime(); //debug
 
 		if (!templates[tpl_url]) {
-			jQuery.get(RELATIVE_PATH + '/templates/' + tpl_url + '.tpl?v=' + timestamp, function (html) {
-				var template = function () {
-					this.toString = function () {
-						return this.html;
-					};
-				}
-
-				template.prototype.parse = parse;
-				template.prototype.html = String(html);
-				template.prototype.blocks = {};
-
-				templates[tpl_url] = new template;
-
+			templates.preload_template(tpl_url, function() {
 				parse_template();
 			});
 		} else {
diff --git a/public/templates/composer.tpl b/public/templates/composer.tpl
new file mode 100644
index 0000000000..7441dbbe6f
--- /dev/null
+++ b/public/templates/composer.tpl
@@ -0,0 +1,22 @@
+<div class="composer">
+	<input class="title" type="text" tabIndex="1" placeholder="Enter your topic title here..." />
+	<div class="btn-toolbar formatting-bar">
+		<div class="btn-group">
+			<span class="btn btn-link" tabindex="-1"><i class="fa fa-bold"></i></span>
+			<span class="btn btn-link" tabindex="-1"><i class="fa fa-italic"></i></span>
+			<span class="btn btn-link" tabindex="-1"><i class="fa fa-list"></i></span>
+			<span class="btn btn-link" tabindex="-1"><i class="fa fa-link"></i></span>
+		</div>
+		<div class="btn btn-link pull-right">Preview</div>
+	</div>
+	<textarea tabIndex="2"></textarea>
+	<div class="imagedrop"><div>Drag and Drop Images Here</div></div>
+	<div class="btn-toolbar action-bar">
+		<div class="btn-group pull-right">
+			<button data-action="minimize" class="btn hidden-xs" tabIndex="4"><i class="fa fa-download"></i> Minimize</button>
+			<button class="btn" data-action="discard" tabIndex="5"><i class="fa fa-times"></i> Discard</button>
+			<button data-action="post" class="btn" tabIndex="3"><i class="fa fa-check"></i> Submit</button>
+		</div>
+	</div>
+	<div class="resizer"><div class="trigger"><i class="fa fa-chevron-left"></i></div></div>
+</div>
\ No newline at end of file