diff --git a/js/main.js b/js/main.js
index f499da62..242be5a8 100644
--- a/js/main.js
+++ b/js/main.js
@@ -96,17 +96,44 @@ var MM = (function() {
 	 * argument speed Number - The number of microseconds for the animation. (optional)
 	 */
 	var updateDom = function(module, speed) {
-		var newContent = module.getDom();
+		var newContentPromise = module.getDom();
 		var newHeader = module.getHeader();
 
-		if (!module.hidden) {
+		if (!(newContentPromise instanceof Promise)) {
+			// convert to a promise if not already one to avoid if/else's everywhere
+			newContentPromise = Promise.resolve(newContentPromise);
+		}
+
+		newContentPromise.then((newContent) => {
+			var updatePromise = updateDomWithContent(module, speed, newHeader, newContent);
+
+			updatePromise.then(() => {
+				// dom has been updated
+				sendNotification("MODULE_DOM_CREATED", { module: module.name });
+			}).catch((err) => {
+				Log.error(err);
+			});
+		}).catch((err) => {
+			Log.error(err);
+		});
+	};
+
+	var updateDomWithContent = function(module, speed, newHeader, newContent) {
+		return new Promise((resolve) => {
+			if (module.hidden || !speed) {
+				updateModuleContent(module, newHeader, newContent);
+				resolve();
+				return;
+			}
 
 			if (!moduleNeedsUpdate(module, newHeader, newContent)) {
+				resolve();
 				return;
 			}
 
 			if (!speed) {
 				updateModuleContent(module, newHeader, newContent);
+				resolve();
 				return;
 			}
 
@@ -115,10 +142,9 @@ var MM = (function() {
 				if (!module.hidden) {
 					showModule(module, speed / 2);
 				}
+				resolve();
 			});
-		} else {
-			updateModuleContent(module, newHeader, newContent);
-		}
+		});
 	};
 
 	/* moduleNeedsUpdate(module, newContent)
diff --git a/js/module.js b/js/module.js
index 464509ee..dbcfe91f 100644
--- a/js/module.js
+++ b/js/module.js
@@ -81,31 +81,30 @@ var Module = Class.extend({
 	 * return domobject - The dom to display.
 	 */
 	getDom: function () {
-		var div = document.createElement("div");
-		var template = this.getTemplate();
-		var templateData = this.getTemplateData();
+		return new Promise((resolve) => {
+			var div = document.createElement("div");
+			var template = this.getTemplate();
+			var templateData = this.getTemplateData();
+	
+			// Check to see if we need to render a template string or a file.
+			if (/^.*((\.html)|(\.njk))$/.test(template)) {
+				// the template is a filename
+				this.nunjucksEnvironment().render(template, templateData, function (err, res) {
+					if (err) {
+						Log.error(err)
+					}
 
-		// Check to see if we need to render a template string or a file.
-		if (/^.*((\.html)|(\.njk))$/.test(template)) {
-			// the template is a filename
-			this.nunjucksEnvironment().render(template, templateData, function (err, res) {
-				if (err) {
-					Log.error(err)
-				}
+					div.innerHTML = res;
 
-				// The inner content of the div will be set after the template is received.
-				// This isn't the most optimal way, but since it's near instant
-				// it probably won't be an issue.
-				// If it gives problems, we can always add a way to pre fetch the templates.
-				// Let's not over optimise this ... KISS! :)
-				div.innerHTML = res;
-			});
-		} else {
-			// the template is a template string.
-			div.innerHTML = this.nunjucksEnvironment().renderString(template, templateData);
-		}
+					resolve(div);
+				});
+			} else {
+				// the template is a template string.
+				div.innerHTML = this.nunjucksEnvironment().renderString(template, templateData);
 
-		return div;
+				resolve(div);
+			}
+		});
 	},
 
 	/* getHeader()