diff --git a/.gitignore b/.gitignore
index b795bae8..43a5f062 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,8 +21,14 @@ diff.txt
 
 # build destination
 dest
+dest-dev
+dest-tmp
 build/closure/closure_compiled_binary.js
 
+# spriting artifacts
+src/img/icons.png
+src/css/icons.css
+
 # plato report directory
 report
 
diff --git a/Gruntfile.js b/Gruntfile.js
index d580dd74..f308b1a6 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -70,14 +70,21 @@ module.exports = function(grunt) {
 
   grunt.initConfig({
     clean: {
-      before: ['dest']
+      prod: ['dest', 'dest-tmp'],
+      dev: ['dest-dev', 'dest-tmp']
     },
+
+    /**
+     * STYLE CHECKS
+     */
+
     leadingIndent : {
       options: {
         indentation : "spaces"
       },
       css : ['src/css/**/*.css']
     },
+
     jscs : {
       options : {
         "preset": "google",
@@ -89,6 +96,7 @@ module.exports = function(grunt) {
       },
       js : [ 'src/js/**/*.js' , '!src/js/**/lib/**/*.js' ]
     },
+
     jshint: {
       options: {
         undef : true,
@@ -105,11 +113,17 @@ module.exports = function(grunt) {
         '!src/js/**/lib/**/*.js' // Exclude lib folder (note the leading !)
       ]
     },
+
+    /**
+     * SERVERS, BROWSER LAUNCHERS
+     */
+
     express: {
-      test: getExpressConfig(['src', 'test'], 9991),
+      test: getExpressConfig(['dest-dev', 'test'], 9991),
       regular: getExpressConfig('dest', 9001),
-      debug: getExpressConfig(['src', 'test'], 9901)
+      debug: getExpressConfig(['dest-dev', 'test'], 9901)
     },
+
     open : {
       regular : {
         path : 'http://' + ip + ':9001/'
@@ -118,6 +132,7 @@ module.exports = function(grunt) {
         path : 'http://' + ip + ':9901/?debug'
       }
     },
+
     watch: {
       prod: {
         files: ['src/**/*.*'],
@@ -127,17 +142,26 @@ module.exports = function(grunt) {
         }
       },
       dev: {
-        files: ['src/img/**/*.*'],
-        tasks: ['sprite'],
+        files: ['src/**/*.*'],
+        tasks: ['build-dev'],
         options: {
           spawn: false
         }
       }
     },
-    ghost : {
-      'travis' : getCasperConfig('travis'),
-      'local' : getCasperConfig('local')
+
+    /**
+     * BUILD STEPS
+     */
+
+    sprite:{
+      all : {
+        src: 'src/img/icons/**/*.png',
+        dest: 'src/img/icons.png',
+        destCss: 'src/css/icons.css'
+      }
     },
+
     concat : {
       js : {
         options : {
@@ -151,18 +175,27 @@ module.exports = function(grunt) {
         dest : 'dest/css/piskel-style-packaged' + version + '.css'
       }
     },
+
     uglify : {
       options : {
         mangle : true
       },
       js : {
         files : {
-          'dest/js/piskel-packaged-min.js' : ['dest/js/piskel-packaged' + version + '.js']
+          'dest-tmp/js/piskel-packaged-min.js' : ['dest/js/piskel-packaged' + version + '.js']
         }
       }
     },
+
+    includereplace: {
+      all: {
+        src: 'src/index.html',
+        dest: 'dest-tmp/index.html'
+      }
+    },
+
     replace: {
-      main: {
+      piskelBoot: {
         options: {
           patterns: [
             {
@@ -172,16 +205,14 @@ module.exports = function(grunt) {
           ]
         },
         files: [
-          {src: ['src/piskel-boot.js'], dest: 'dest/piskel-boot.js'}
+          {src: ['src/piskel-boot.js'], dest: 'dest/piskel-boot.js'},
+          {src: ['src/piskel-boot.js'], dest: 'dest/piskel-boot' + version +'.js'}
         ]
       },
-      editor: {
+      // main-partial.html is used when embedded in piskelapp.com
+      mainPartial: {
         options: {
-          patterns: [
-            {
-              match: /templates\//g,
-              replacement: "../templates"+version+"/"
-            },{
+          patterns: [{
               match: /piskel-boot.js/g,
               replacement: "../piskel-boot"+version+".js"
             },{
@@ -200,29 +231,57 @@ module.exports = function(grunt) {
           ]
         },
         files: [
-          {src: ['src/index.html'], dest: 'dest/piskelapp-partials/main-partial.html'}
+          // src/index.html should already have been moved by the includereplace task
+          {src: ['dest/index.html'], dest: 'dest/piskelapp-partials/main-partial.html'}
         ]
       }
     },
+
     copy: {
-      main: {
+      prod: {
         files: [
-          {src: ['dest/js/piskel-packaged-min.js'], dest: 'dest/js/piskel-packaged-min' + version + '.js'},
-          {src: ['dest/piskel-boot.js'], dest: 'dest/piskel-boot' + version + '.js'},
+          // dest/js/piskel-packaged-min.js should have been created by the uglify task
+          {src: ['dest-tmp/js/piskel-packaged-min.js'], dest: 'dest/js/piskel-packaged-min' + version + '.js'},
+          {src: ['dest-tmp/index.html'], dest: 'dest/index.html'},
           {src: ['src/logo.png'], dest: 'dest/logo.png'},
-          {src: ['src/js/lib/iframeLoader-0.1.0.js'], dest: 'dest/js/lib/iframeLoader-0.1.0.js'},
           {src: ['src/js/lib/gif/gif.ie.worker.js'], dest: 'dest/js/lib/gif/gif.ie.worker.js'},
           {expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
-          {expand: true, src: ['css/fonts/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
-          {expand: true, src: ['**/*.html'], cwd: 'src/', dest: 'dest/', filter: 'isFile'}
+          {expand: true, src: ['css/fonts/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'}
+        ]
+      },
+      dev: {
+        files: [
+          // in dev copy everything to dest-dev
+          {src: ['dest-tmp/index.html'], dest: 'dest-dev/index.html'},
+          {src: ['src/piskel-boot.js'], dest: 'dest-dev/piskel-boot.js'},
+          {src: ['src/piskel-script-list.js'], dest: 'dest-dev/piskel-script-list.js'},
+          {src: ['src/piskel-style-list.js'], dest: 'dest-dev/piskel-style-list.js'},
+          {expand: true, src: ['js/**'], cwd: 'src/', dest: 'dest-dev/', filter: 'isFile'},
+          {expand: true, src: ['css/**'], cwd: 'src/', dest: 'dest-dev/', filter: 'isFile'},
+          {expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest-dev/', filter: 'isFile'},
         ]
       }
     },
+
+    /**
+     * TESTING
+     */
+
     karma: {
       unit: {
         configFile: 'karma.conf.js'
       }
     },
+
+    ghost : {
+      'travis' : getCasperConfig('travis'),
+      'local' : getCasperConfig('local')
+    },
+
+    /**
+     * DESKTOP BUILDS
+     */
+
     nodewebkit: {
       windows : {
         options: {
@@ -237,23 +296,12 @@ module.exports = function(grunt) {
       macos : {
         options: {
           platforms : ['osx64'],
+          // had performance issues with 0.11.5 on mac os, need to test new versions/new hardware
           version : "0.10.5",
           build_dir: './dest/desktop/'
         },
         src: ['./dest/**/*', "./package.json", "!./dest/desktop/"]
       }
-    },
-    /**
-     *
-     * SPRITING
-     *
-     */
-    sprite:{
-      all : {
-        src: 'src/img/icons/**/*.png',
-        dest: 'src/img/icons.png',
-        destCss: 'src/css/icons.css'
-      }
     }
   });
 
@@ -264,19 +312,22 @@ module.exports = function(grunt) {
   grunt.registerTask('unit-test', ['karma']);
 
   // Validate & Test
-  grunt.registerTask('test-travis', ['lint', 'unit-test', 'express:test', 'ghost:travis']);
+  grunt.registerTask('test-travis', ['lint', 'unit-test', 'build-dev', 'express:test', 'ghost:travis']);
   // Validate & Test (faster version) will NOT work on travis !!
-  grunt.registerTask('test-local', ['lint', 'unit-test', 'express:test', 'ghost:local']);
-  grunt.registerTask('test-local-nolint', ['unit-test', 'express:test', 'ghost:local']);
+  grunt.registerTask('test-local', ['lint', 'unit-test', 'build-dev', 'express:test', 'ghost:local']);
+  grunt.registerTask('test-local-nolint', ['unit-test', 'build-dev', 'express:test', 'ghost:local']);
 
   grunt.registerTask('test', ['test-travis']);
   grunt.registerTask('precommit', ['test-local']);
 
-  grunt.registerTask('build',  ['sprite', 'concat:js', 'concat:css', 'uglify', 'replace:main', 'replace:editor', 'copy']);
+  grunt.registerTask('build-index.html', ['includereplace']);
+  grunt.registerTask('merge-statics', ['concat:js', 'concat:css', 'uglify']);
+  grunt.registerTask('replace-all', ['replace:piskelBoot', 'replace:mainPartial']);
+  grunt.registerTask('build',  ['clean:prod', 'sprite', 'merge-statics', 'build-index.html', 'replace-all', 'copy:prod']);
+  grunt.registerTask('build-dev',  ['clean:dev', 'sprite', 'build-index.html', 'copy:dev']);
 
   // Validate & Build
-  grunt.registerTask('default', ['clean:before', 'lint', 'build']);
-  grunt.registerTask('caca', ['sprite']);
+  grunt.registerTask('default', ['lint', 'build']);
 
   // Build stand alone app with nodewebkit
   grunt.registerTask('desktop', ['default', 'nodewebkit:windows']);
@@ -284,8 +335,7 @@ module.exports = function(grunt) {
 
   // Start webserver and watch for changes
   grunt.registerTask('serve', ['build', 'express:regular', 'open:regular', 'watch:prod']);
-
   // Start webserver on src folder, in debug mode
-  grunt.registerTask('serve-debug', ['sprite', 'express:debug', 'open:debug', 'watch:dev']);
+  grunt.registerTask('serve-debug', ['build-dev', 'express:debug', 'open:debug', 'watch:dev']);
   grunt.registerTask('play', ['serve-debug']);
 };
diff --git a/package.json b/package.json
index cddcb6f5..2946b406 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "grunt-contrib-watch": "0.6.1",
     "grunt-express": "1.4.1",
     "grunt-ghost": "1.1.0",
+    "grunt-include-replace": "^3.2.0",
     "grunt-jscs": "^1.6.0",
     "grunt-karma": "^0.10.1",
     "grunt-leading-indent": "^0.2.0",
diff --git a/src/css/icons.css b/src/css/icons.css
deleted file mode 100644
index 00c8d017..00000000
--- a/src/css/icons.css
+++ /dev/null
@@ -1,197 +0,0 @@
-/*
-Icon classes can be used entirely standalone. They are named after their original file names.
-
-```html
-<!-- `display: block` sprite -->
-<div class="icon-home"></div>
-
-<!-- `display: inline-block` sprite -->
-<img class="icon-home" />
-```
-*/
-.icon-common-keyboard-gold {
-  background-image: url(../img/icons.png);
-  background-position: -230px 0px;
-  width: 35px;
-  height: 20px;
-}
-.icon-common-swapcolors-arrow-grey {
-  background-image: url(../img/icons.png);
-  background-position: -230px -46px;
-  width: 18px;
-  height: 18px;
-}
-.icon-frame-dragndrop-white {
-  background-image: url(../img/icons.png);
-  background-position: -198px -184px;
-  width: 30px;
-  height: 30px;
-}
-.icon-frame-duplicate-white {
-  background-image: url(../img/icons.png);
-  background-position: -168px -184px;
-  width: 30px;
-  height: 30px;
-}
-.icon-frame-plus-white {
-  background-image: url(../img/icons.png);
-  background-position: -230px -20px;
-  width: 26px;
-  height: 26px;
-}
-.icon-frame-recyclebin-white {
-  background-image: url(../img/icons.png);
-  background-position: -138px -184px;
-  width: 30px;
-  height: 30px;
-}
-.icon-minimap-popup-preview-arrow-gold {
-  background-image: url(../img/icons.png);
-  background-position: -230px -82px;
-  width: 18px;
-  height: 18px;
-}
-.icon-minimap-popup-preview-arrow-white {
-  background-image: url(../img/icons.png);
-  background-position: -230px -64px;
-  width: 18px;
-  height: 18px;
-}
-.icon-settings-export-white {
-  background-image: url(../img/icons.png);
-  background-position: -92px -92px;
-  width: 46px;
-  height: 46px;
-}
-.icon-settings-gear-white {
-  background-image: url(../img/icons.png);
-  background-position: -138px 0px;
-  width: 46px;
-  height: 46px;
-}
-.icon-settings-open-folder-white {
-  background-image: url(../img/icons.png);
-  background-position: -138px -46px;
-  width: 46px;
-  height: 46px;
-}
-.icon-settings-resize-white {
-  background-image: url(../img/icons.png);
-  background-position: -138px -92px;
-  width: 46px;
-  height: 46px;
-}
-.icon-settings-save-white {
-  background-image: url(../img/icons.png);
-  background-position: 0px -138px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-circle {
-  background-image: url(../img/icons.png);
-  background-position: -46px -138px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-colorpicker {
-  background-image: url(../img/icons.png);
-  background-position: -92px -138px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-colorswap {
-  background-image: url(../img/icons.png);
-  background-position: 0px 0px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-dithering {
-  background-image: url(../img/icons.png);
-  background-position: -184px 0px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-eraser {
-  background-image: url(../img/icons.png);
-  background-position: -184px -46px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-lasso-select {
-  background-image: url(../img/icons.png);
-  background-position: -184px -92px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-lighten {
-  background-image: url(../img/icons.png);
-  background-position: -184px -138px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-move {
-  background-image: url(../img/icons.png);
-  background-position: 0px -184px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-paint-bucket {
-  background-image: url(../img/icons.png);
-  background-position: -46px -184px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-pen {
-  background-image: url(../img/icons.png);
-  background-position: -92px -184px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-rectangle-select {
-  background-image: url(../img/icons.png);
-  background-position: -138px -138px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-rectangle {
-  background-image: url(../img/icons.png);
-  background-position: -46px -92px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-shape-select {
-  background-image: url(../img/icons.png);
-  background-position: 0px -92px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-stroke {
-  background-image: url(../img/icons.png);
-  background-position: -92px -46px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-vertical-mirror-pen {
-  background-image: url(../img/icons.png);
-  background-position: -92px 0px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-clone {
-  background-image: url(../img/icons.png);
-  background-position: -46px -46px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-flip {
-  background-image: url(../img/icons.png);
-  background-position: 0px -46px;
-  width: 46px;
-  height: 46px;
-}
-.icon-tool-rotate {
-  background-image: url(../img/icons.png);
-  background-position: -46px 0px;
-  width: 46px;
-  height: 46px;
-}
diff --git a/src/img/canvas-backgrounds.png b/src/img/canvas-backgrounds.png
deleted file mode 100644
index a62d1d3b..00000000
Binary files a/src/img/canvas-backgrounds.png and /dev/null differ
diff --git a/src/img/icons.png b/src/img/icons.png
deleted file mode 100644
index 83638553..00000000
Binary files a/src/img/icons.png and /dev/null differ
diff --git a/src/img/icons/transform/tool-clone.png b/src/img/icons/transform/tool-clone.png
index 4d43dae7..0425befd 100644
Binary files a/src/img/icons/transform/tool-clone.png and b/src/img/icons/transform/tool-clone.png differ
diff --git a/src/index.html b/src/index.html
index 3b30b73d..42e97abf 100644
--- a/src/index.html
+++ b/src/index.html
@@ -22,7 +22,6 @@
     color:white;">
       <span style="top:45%">Loading Piskel ...</span>
   </div>
-  <script type="text/javascript" src="js/lib/iframeLoader-0.1.0.js"></script>
 
   <style type="text/css">
     #main-wrapper {
@@ -47,11 +46,11 @@
   <!-- do not delete, do not move :) -->
   <!--body-main-start-->
   <div id="main-wrapper" class="main-wrapper">
-    <iframe src="templates/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+    @@include('templates/drawing-tools.html', {})
 
     <div id="column-wrapper" class="column-wrapper">
       <div class='column left-column'>
-        <iframe src="templates/frames-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        @@include('templates/frames-list.html', {})
       </div>
 
       <div class='column main-column'>
@@ -61,24 +60,19 @@
       </div>
 
       <div class="column right-column">
-        <iframe src="templates/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
-        <iframe src="templates/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
-        <iframe src="templates/transformations.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
-        <iframe src="templates/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        @@include('templates/preview.html', {})
+        @@include('templates/layers-list.html', {})
+        @@include('templates/transformations.html', {})
+        @@include('templates/palettes-list.html', {})
         <div class="pull-bottom cursor-coordinates"></div>
       </div>
     </div>
 
     <div id="application-action-section" data-pskl-controller="settings" class="sticky-section right-sticky-section">
       <div class="sticky-section-wrap">
-        <iframe src="templates/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        @@include('templates/settings.html', {})
         <div class="drawer vertical-centerer">
           <div class="drawer-content" id="drawer-container">
-            <iframe src="templates/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
-            <iframe src="templates/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
-            <iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
-            <iframe src="templates/settings/import.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
-            <iframe src="templates/settings/export.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
           </div>
         </div>
       </div>
@@ -87,18 +81,27 @@
 
   <div id="dialog-container-wrapper">
     <div id="dialog-container">
-      <iframe src="templates/dialogs/create-palette.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
-      <iframe src="templates/dialogs/import-image.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
-      <iframe src="templates/dialogs/browse-local.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
-      <iframe src="templates/dialogs/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
     </div>
   </div>
 
-  <iframe src="templates/misc-templates.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
-  <iframe src="templates/popup-preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+  @@include('templates/misc-templates.html', {})
+  @@include('templates/popup-preview.html', {})
 
   <span class="cheatsheet-link icon-common-keyboard-gold" rel="tooltip" data-placement="right" title="Keyboard shortcuts">&nbsp;</span>
 
+  <!-- dialogs partials -->
+  @@include('templates/dialogs/create-palette.html', {})
+  @@include('templates/dialogs/import-image.html', {})
+  @@include('templates/dialogs/browse-local.html', {})
+  @@include('templates/dialogs/cheatsheet.html', {})
+
+  <!-- settings-panel partials -->
+  @@include('templates/settings/application.html', {})
+  @@include('templates/settings/resize.html', {})
+  @@include('templates/settings/save.html', {})
+  @@include('templates/settings/import.html', {})
+  @@include('templates/settings/export.html', {})
+
   <script type="text/javascript" src="piskel-boot.js"></script>
   <!--body-main-end-->
   <!-- the comment above indicates the end of the markup reused by the editor integrated in piskelapp.com -->
diff --git a/src/piskel-boot.js b/src/piskel-boot.js
index 826badeb..dc638f34 100644
--- a/src/piskel-boot.js
+++ b/src/piskel-boot.js
@@ -72,15 +72,8 @@
     } else {
       script = 'js/piskel-packaged-min' + version + '.js';
     }
-    loadStyle('css/piskel-style-packaged' + version + '.css');
 
-    var loaderInterval = window.setInterval(function () {
-      if (document.querySelectorAll('[data-iframe-loader]').length === 0) {
-        window.clearInterval(loaderInterval);
-        loadScript(script, 'onPiskelReady()');
-      } else {
-        window.console.log('waiting for templates to load ....');
-      }
-    }, 100);
+    loadStyle('css/piskel-style-packaged' + version + '.css');
+    loadScript(script, 'onPiskelReady()');
   }
 })();
\ No newline at end of file
diff --git a/src/templates/dialogs/browse-local.html b/src/templates/dialogs/browse-local.html
index 38fc1cdc..b3582537 100644
--- a/src/templates/dialogs/browse-local.html
+++ b/src/templates/dialogs/browse-local.html
@@ -1,26 +1,29 @@
-<div class="dialog-wrapper">
-  <h3 class="dialog-head">
-    Browse Local Piskels
-    <span class="dialog-close">X</span>
-  </h3>
-  <div class="dialog-content" style="padding:10px 20px; font-size:1.5em; overflow: auto;">
-    <table class="local-piskel-list">
-      <thead>
-        <tr class="local-piskel-list-head">
-          <td class="local-piskel-name">Name</td>
-          <td class="local-piskel-save-date">Date</td>
-          <td colspan=2>Actions</td>
-        </tr>
-      </thead>
-      <tbody></tbody>
-    </table>
+<script type="text/template" id="templates/dialogs/browse-local.html">
+  <div class="dialog-wrapper">
+    <h3 class="dialog-head">
+      Browse Local Piskels
+      <span class="dialog-close">X</span>
+    </h3>
+    <div class="dialog-content" style="padding:10px 20px; font-size:1.5em; overflow: auto;">
+      <table class="local-piskel-list">
+        <thead>
+          <tr class="local-piskel-list-head">
+            <td class="local-piskel-name">Name</td>
+            <td class="local-piskel-save-date">Date</td>
+            <td colspan=2>Actions</td>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+    </div>
   </div>
-  <script type="text/template" id="local-storage-item-template">
-    <tr class="local-piskel-item">
-      <td class="local-piskel-name">{{name}}</td>
-      <td class="local-piskel-save-date">{{date}}</td>
-      <td><button type="button" data-action="load" data-name="{{name}}" class="button button-primary local-piskel-load-button">Load</button></td>
-      <td><button type="button" data-action="delete" data-name="{{name}}" class="button local-piskel-delete-button">Delete</button></td>
-    </tr>
-  </script>
-</div>
\ No newline at end of file
+</script>
+
+<script type="text/template" id="local-storage-item-template">
+  <tr class="local-piskel-item">
+    <td class="local-piskel-name">{{name}}</td>
+    <td class="local-piskel-save-date">{{date}}</td>
+    <td><button type="button" data-action="load" data-name="{{name}}" class="button button-primary local-piskel-load-button">Load</button></td>
+    <td><button type="button" data-action="delete" data-name="{{name}}" class="button local-piskel-delete-button">Delete</button></td>
+  </tr>
+</script>
\ No newline at end of file
diff --git a/src/templates/dialogs/cheatsheet.html b/src/templates/dialogs/cheatsheet.html
index 2851f64b..bcbec7a4 100644
--- a/src/templates/dialogs/cheatsheet.html
+++ b/src/templates/dialogs/cheatsheet.html
@@ -1,42 +1,45 @@
-<div id="cheatsheetContainer" class="dialog-wrapper">
-  <h3 class="dialog-head">
-    <span class="dialog-title">Keyboard shortcuts</span>
-    <span class="dialog-close">X</span>
-  </h3>
-  <div class="cheatsheet-container dialog-content">
-    <div class="cheatsheet-section">
-      <h3 class="cheatsheet-title">Tool shortcuts</h3>
-      <ul class="cheatsheet-tool-shortcuts"></ul>
-    </div>
-    <div class="cheatsheet-section">
-      <h3 class="cheatsheet-title">Misc shortcuts</h3>
-      <ul class="cheatsheet-misc-shortcuts"></ul>
-    </div>
-    <div class="cheatsheet-boxes">
+<script type="text/template" id="templates/dialogs/cheatsheet.html">
+  <div id="cheatsheetContainer" class="dialog-wrapper">
+    <h3 class="dialog-head">
+      <span class="dialog-title">Keyboard shortcuts</span>
+      <span class="dialog-close">X</span>
+    </h3>
+    <div class="cheatsheet-container dialog-content">
       <div class="cheatsheet-section">
-        <h3 class="cheatsheet-title">Selection shortcuts</h3>
-        <ul class="cheatsheet-selection-shortcuts"></ul>
+        <h3 class="cheatsheet-title">Tool shortcuts</h3>
+        <ul class="cheatsheet-tool-shortcuts"></ul>
       </div>
       <div class="cheatsheet-section">
-        <h3 class="cheatsheet-title">Color shortcuts</h3>
-        <ul class="cheatsheet-color-shortcuts"></ul>
+        <h3 class="cheatsheet-title">Misc shortcuts</h3>
+        <ul class="cheatsheet-misc-shortcuts"></ul>
       </div>
-      <div class="cheatsheet-section">
-        <h3 class="cheatsheet-title">Storage shortcuts</h3>
-        <ul class="cheatsheet-storage-shortcuts"></ul>
+      <div class="cheatsheet-boxes">
+        <div class="cheatsheet-section">
+          <h3 class="cheatsheet-title">Selection shortcuts</h3>
+          <ul class="cheatsheet-selection-shortcuts"></ul>
+        </div>
+        <div class="cheatsheet-section">
+          <h3 class="cheatsheet-title">Color shortcuts</h3>
+          <ul class="cheatsheet-color-shortcuts"></ul>
+        </div>
+        <div class="cheatsheet-section">
+          <h3 class="cheatsheet-title">Storage shortcuts</h3>
+          <ul class="cheatsheet-storage-shortcuts"></ul>
+        </div>
       </div>
     </div>
-  </div>
-  <div class="cheatsheet-actions">
-    <span class="cheatsheet-helptext" rel="tooltip" data-placement="top" title="!!!Set in CheatsheetController!!!"><b>Customize shortcuts ?</b></span>
-    <button type="button" name="cheatsheet-restore-defaults" data-action="restore-defaults" class="button cheatsheet-button cheatsheet-restore-defaults">Restore default shortcuts</button>
-  </div>
+    <div class="cheatsheet-actions">
+      <span class="cheatsheet-helptext" rel="tooltip" data-placement="top" title="!!!Set in CheatsheetController!!!"><b>Customize shortcuts ?</b></span>
+      <button type="button" name="cheatsheet-restore-defaults" data-action="restore-defaults" class="button cheatsheet-button cheatsheet-restore-defaults">Restore default shortcuts</button>
+    </div>
 
-  <!-- Event trap to capture keyboard remaps -->
-  <div style="position:relative; overflow:hidden; width:1px; height:1px;">
-    <input type="text" id="cheatsheetEventTrap" style="position:absolute; top:-1000px;" />
+    <!-- Event trap to capture keyboard remaps -->
+    <div style="position:relative; overflow:hidden; width:1px; height:1px;">
+      <input type="text" id="cheatsheetEventTrap" style="position:absolute; top:-1000px;" />
+    </div>
   </div>
-</div>
+</script>
+
 <script type="text/template" id="cheatsheet-shortcut-template">
   <li class="cheatsheet-shortcut {{className}}" data-shortcut-id="{{id}}">
     <div class="cheatsheet-icon {{icon}}"></div>
diff --git a/src/templates/dialogs/create-palette.html b/src/templates/dialogs/create-palette.html
index 1df6f597..31f8842c 100644
--- a/src/templates/dialogs/create-palette.html
+++ b/src/templates/dialogs/create-palette.html
@@ -1,83 +1,84 @@
-<div class="dialog-wrapper">
-  <h3 class="dialog-head">
-    <span class="dialog-title">Create palette</span>
-    <span class="dialog-close">X</span>
-  </h3>
-  <div class="dialog-create-palette" style="font-size:1.3em">
-      <div class="create-palette-section form-section">
-        <span class="create-palette-name-label">Name</span>
-        <input type="text" class="textfield create-palette-name-input" name="palette-name" placeholder="palette name ..."/>
-        <div class="create-palette-import-section">
-          <button
-            type="button"
-            rel="tooltip" data-placement="right" title="Import palette from an existing Image or from a palette file"
-            class="button  button-primary create-palette-import-button">Import from file</button>
-          <button
-            type="button"
-            rel="tooltip" data-placement="right" title="Download the palette as a GPL file"
-            class="button  button-primary create-palette-download-button">Download as file</button>
-          <input style="display:none"
-            class="create-palette-import-input"
-            type="file" value="file" accept="*"/>
+<script type="text/template" id="templates/dialogs/create-palette.html">
+  <div class="dialog-wrapper">
+    <h3 class="dialog-head">
+      <span class="dialog-title">Create palette</span>
+      <span class="dialog-close">X</span>
+    </h3>
+    <div class="dialog-create-palette" style="font-size:1.3em">
+        <div class="create-palette-section form-section">
+          <span class="create-palette-name-label">Name</span>
+          <input type="text" class="textfield create-palette-name-input" name="palette-name" placeholder="palette name ..."/>
+          <div class="create-palette-import-section">
+            <button
+              type="button"
+              rel="tooltip" data-placement="right" title="Import palette from an existing Image or from a palette file"
+              class="button  button-primary create-palette-import-button">Import from file</button>
+            <button
+              type="button"
+              rel="tooltip" data-placement="right" title="Download the palette as a GPL file"
+              class="button  button-primary create-palette-download-button">Download as file</button>
+            <input style="display:none"
+              class="create-palette-import-input"
+              type="file" value="file" accept="*"/>
+          </div>
         </div>
-      </div>
-      <div class="colors-container">
-        <ul class="colors-list"></ul>
-        <div class="color-picker-container">
-          <div class="color-picker-spectrum"></div>
-          <div class="color-picker-input">
-            <input type="text"  data-model="hex" data-dimension="*" class="textfield  uppercase" value="#000000" />
+        <div class="colors-container">
+          <ul class="colors-list"></ul>
+          <div class="color-picker-container">
+            <div class="color-picker-spectrum"></div>
+            <div class="color-picker-input">
+              <input type="text"  data-model="hex" data-dimension="*" class="textfield  uppercase" value="#000000" />
+            </div>
+            <div class="color-picker-slider">
+              <span>H</span>
+              <input type="range" data-model="hsv" data-dimension="h" value="0" min="0" max="359" tabindex="-1"/>
+              <input type="text"  data-model="hsv" data-dimension="h" class="textfield" value="0" />
+            </div>
+            <div class="color-picker-slider">
+              <span>S</span>
+              <input type="range" data-model="hsv" data-dimension="s" value="0" min="0" max="100" tabindex="-1"/>
+              <input type="text"  data-model="hsv" data-dimension="s" class="textfield" value="0" />
+            </div>
+            <div class="color-picker-slider">
+              <span>V</span>
+              <input type="range" data-model="hsv" data-dimension="v" value="0" min="0" max="100" tabindex="-1"/>
+              <input type="text"  data-model="hsv" data-dimension="v" class="textfield" value="0" />
+            </div>
+            <br/>
+            <div class="color-picker-slider">
+              <span>R</span>
+              <input type="range" data-model="rgb" data-dimension="r" value="0" min="0" max="255" tabindex="-1"/>
+              <input type="text"  data-model="rgb" data-dimension="r" class="textfield" value="0" />
+            </div>
+            <div class="color-picker-slider">
+              <span>G</span>
+              <input type="range" data-model="rgb" data-dimension="g" value="0" min="0" max="255" tabindex="-1"/>
+              <input type="text"  data-model="rgb" data-dimension="g" class="textfield" value="0" />
+            </div>
+            <div class="color-picker-slider">
+              <span>B</span>
+              <input type="range" data-model="rgb" data-dimension="b" value="0" min="0" max="255" tabindex="-1"/>
+              <input type="text"  data-model="rgb" data-dimension="b" class="textfield" value="0" />
+            </div>
+            <div class="color-preview"></div>
           </div>
-          <div class="color-picker-slider">
-            <span>H</span>
-            <input type="range" data-model="hsv" data-dimension="h" value="0" min="0" max="359" tabindex="-1"/>
-            <input type="text"  data-model="hsv" data-dimension="h" class="textfield" value="0" />
-          </div>
-          <div class="color-picker-slider">
-            <span>S</span>
-            <input type="range" data-model="hsv" data-dimension="s" value="0" min="0" max="100" tabindex="-1"/>
-            <input type="text"  data-model="hsv" data-dimension="s" class="textfield" value="0" />
-          </div>
-          <div class="color-picker-slider">
-            <span>V</span>
-            <input type="range" data-model="hsv" data-dimension="v" value="0" min="0" max="100" tabindex="-1"/>
-            <input type="text"  data-model="hsv" data-dimension="v" class="textfield" value="0" />
-          </div>
-          <br/>
-          <div class="color-picker-slider">
-            <span>R</span>
-            <input type="range" data-model="rgb" data-dimension="r" value="0" min="0" max="255" tabindex="-1"/>
-            <input type="text"  data-model="rgb" data-dimension="r" class="textfield" value="0" />
-          </div>
-          <div class="color-picker-slider">
-            <span>G</span>
-            <input type="range" data-model="rgb" data-dimension="g" value="0" min="0" max="255" tabindex="-1"/>
-            <input type="text"  data-model="rgb" data-dimension="g" class="textfield" value="0" />
-          </div>
-          <div class="color-picker-slider">
-            <span>B</span>
-            <input type="range" data-model="rgb" data-dimension="b" value="0" min="0" max="255" tabindex="-1"/>
-            <input type="text"  data-model="rgb" data-dimension="b" class="textfield" value="0" />
-          </div>
-          <div class="color-preview"></div>
         </div>
-      </div>
-      <div class="create-palette-actions">
-        <button type="button" name="create-palette-cancel" data-action="cancel" class="button create-palette-cancel">Cancel</button>
-        <button type="button" name="create-palette-delete" data-action="delete" class="button button-primary create-palette-delete">Delete</button>
-        <!-- <button type="button" name="create-palette-clone" class="button button-primary create-palette-clone">Save as new</button> -->
-        <button type="button" name="create-palette-submit" data-action="submit" class="button button-primary create-palette-submit">Save</button>
-      </div>
+        <div class="create-palette-actions">
+          <button type="button" name="create-palette-cancel" data-action="cancel" class="button create-palette-cancel">Cancel</button>
+          <button type="button" name="create-palette-delete" data-action="delete" class="button button-primary create-palette-delete">Delete</button>
+          <!-- <button type="button" name="create-palette-clone" class="button button-primary create-palette-clone">Save as new</button> -->
+          <button type="button" name="create-palette-submit" data-action="submit" class="button button-primary create-palette-submit">Save</button>
+        </div>
+    </div>
   </div>
+</script>
 
-  <script type="text/template" id="create-palette-color-template">
-    <li
-      class="create-palette-color {{:selected}} {{:light-color}}"
-      style="background:{{color}}"
-      data-palette-index="{{index}}"
-      data-palette-color="{{color}}">
-      <div class="create-palette-remove-color">X</div>
-    </li>
-  </script>
-
-</div>
\ No newline at end of file
+<script type="text/template" id="create-palette-color-template">
+  <li
+    class="create-palette-color {{:selected}} {{:light-color}}"
+    style="background:{{color}}"
+    data-palette-index="{{index}}"
+    data-palette-color="{{color}}">
+    <div class="create-palette-remove-color">X</div>
+  </li>
+</script>
\ No newline at end of file
diff --git a/src/templates/dialogs/import-image.html b/src/templates/dialogs/import-image.html
index f37e95cb..32726b42 100644
--- a/src/templates/dialogs/import-image.html
+++ b/src/templates/dialogs/import-image.html
@@ -1,49 +1,51 @@
-<div class="dialog-wrapper">
-  <h3 class="dialog-head">
-    Import Image
-    <span class="dialog-close">X</span>
-  </h3>
-  <div class="dialog-import-body">
-    <form action="" method="POST" name="import-image-form">
-      <div class="import-section">
-        <span class="dialog-section-title">Name :</span><span class="import-image-file-name"></span>
-      </div>
-      <div class="import-section">
-        <div class="import-section-preview-title">Preview :</div>
-        <div class="import-section-preview"></div>
-      </div>
-      <div class="import-section">
-        <label class="dialog-section-radio-label">
-          <input class="dialog-section-radio" name="import-type" value="single" type="radio" checked="checked">
-          Import as single image
-        </label>
-      </div>
-      <div class="import-section import-subsection">
-        <span class="dialog-section-title">Resize to</span>
-        <input type="text" class="textfield import-size-field" name="resize-width"/>x
-        <input type="text" class="textfield import-size-field" name="resize-height"/>
-      </div>
-      <div class="import-section import-subsection">
-        <span class="import-section-title">Smooth resize</span>
-        <input type="checkbox" class="checkbox-fix" checked="checked" name="smooth-resize-checkbox" value="1"/>
-      </div>
-      <div class="import-section">
-        <label class="dialog-section-radio-label">
-          <input class="dialog-section-radio" name="import-type" value="sheet" type="radio">
-          Import as spritesheet
-        </label>
-      </div>
-      <div class="import-section import-subsection">
-        <span class="dialog-section-title">Frame size</span>
-        <input type="text" class="textfield import-size-field" name="frame-size-x"/>x
-        <input type="text" class="textfield import-size-field" name="frame-size-y"/>
-      </div>
-      <div class="import-section import-subsection">
-        <span class="dialog-section-title">Offset</span>
-        <input type="text" class="textfield import-size-field" name="frame-offset-x"/>x
-        <input type="text" class="textfield import-size-field" name="frame-offset-y"/>
-      </div>
-      <input type="submit" name="import-submit" class="button button-primary import-button" value="Import"/>
-    </form>
+<script type="text/template" id="templates/dialogs/import-image.html">
+  <div class="dialog-wrapper">
+    <h3 class="dialog-head">
+      Import Image
+      <span class="dialog-close">X</span>
+    </h3>
+    <div class="dialog-import-body">
+      <form action="" method="POST" name="import-image-form">
+        <div class="import-section">
+          <span class="dialog-section-title">Name :</span><span class="import-image-file-name"></span>
+        </div>
+        <div class="import-section">
+          <div class="import-section-preview-title">Preview :</div>
+          <div class="import-section-preview"></div>
+        </div>
+        <div class="import-section">
+          <label class="dialog-section-radio-label">
+            <input class="dialog-section-radio" name="import-type" value="single" type="radio" checked="checked">
+            Import as single image
+          </label>
+        </div>
+        <div class="import-section import-subsection">
+          <span class="dialog-section-title">Resize to</span>
+          <input type="text" class="textfield import-size-field" name="resize-width"/>x
+          <input type="text" class="textfield import-size-field" name="resize-height"/>
+        </div>
+        <div class="import-section import-subsection">
+          <span class="import-section-title">Smooth resize</span>
+          <input type="checkbox" class="checkbox-fix" checked="checked" name="smooth-resize-checkbox" value="1"/>
+        </div>
+        <div class="import-section">
+          <label class="dialog-section-radio-label">
+            <input class="dialog-section-radio" name="import-type" value="sheet" type="radio">
+            Import as spritesheet
+          </label>
+        </div>
+        <div class="import-section import-subsection">
+          <span class="dialog-section-title">Frame size</span>
+          <input type="text" class="textfield import-size-field" name="frame-size-x"/>x
+          <input type="text" class="textfield import-size-field" name="frame-size-y"/>
+        </div>
+        <div class="import-section import-subsection">
+          <span class="dialog-section-title">Offset</span>
+          <input type="text" class="textfield import-size-field" name="frame-offset-x"/>x
+          <input type="text" class="textfield import-size-field" name="frame-offset-y"/>
+        </div>
+        <input type="submit" name="import-submit" class="button button-primary import-button" value="Import"/>
+      </form>
+    </div>
   </div>
-</div>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/templates/settings/application.html b/src/templates/settings/application.html
index 76fd1b5d..6ff19ac3 100644
--- a/src/templates/settings/application.html
+++ b/src/templates/settings/application.html
@@ -1,63 +1,64 @@
-<form action="" method="POST" name="application-settings-form">
-  <div class="settings-section settings-section--application-general">
-    <div class="settings-title">
-      General
-    </div>
-    <div class="settings-item">
-      <label>Background</label>
-      <div class="background-picker-wrapper">
-        <div class="background-picker light-picker-background" data-background="light-canvas-background"
-              rel="tooltip" data-placement="bottom" title="light / high contrast">
-        </div>
-        <div class="background-picker medium-picker-background" data-background="medium-canvas-background"
-              rel="tooltip" data-placement="bottom" title="medium / high contrast">
-        </div>
-        <div class="background-picker lowcont-medium-picker-background" data-background="lowcont-medium-canvas-background"
-              rel="tooltip" data-placement="bottom" title="medium / low contrast">
-        </div>
-        <div class="background-picker lowcont-dark-picker-background" data-background="lowcont-dark-canvas-background"
-              rel="tooltip" data-placement="bottom" title="dark / low contrast">
+<script type="text/html" id="templates/settings/application.html">
+  <form action="" method="POST" name="application-settings-form">
+    <div class="settings-section settings-section--application-general">
+      <div class="settings-title">
+        General
+      </div>
+      <div class="settings-item">
+        <label>Background</label>
+        <div class="background-picker-wrapper">
+          <div class="background-picker light-picker-background" data-background="light-canvas-background"
+                rel="tooltip" data-placement="bottom" title="light / high contrast">
+          </div>
+          <div class="background-picker medium-picker-background" data-background="medium-canvas-background"
+                rel="tooltip" data-placement="bottom" title="medium / high contrast">
+          </div>
+          <div class="background-picker lowcont-medium-picker-background" data-background="lowcont-medium-canvas-background"
+                rel="tooltip" data-placement="bottom" title="medium / low contrast">
+          </div>
+          <div class="background-picker lowcont-dark-picker-background" data-background="lowcont-dark-canvas-background"
+                rel="tooltip" data-placement="bottom" title="dark / low contrast">
+          </div>
         </div>
       </div>
+
+      <div class="settings-item">
+        <label for="grid-width">Grid</label>
+        <select id="grid-width" class="grid-width-select">
+          <option value="0">Disabled</option>
+          <option value="1">1px</option>
+          <option value="2">2px</option>
+          <option value="3">3px</option>
+          <option value="4">4px</option>
+        </select>
+      </div>
+
+      <div class="settings-item">
+        <label for="tiled-preview">Layer Preview Opacity</label>
+        <input type="range" class="layer-opacity-input" name="layer-opacity" min="0"  max="1" step="0.05"/>
+        <span class="layer-opacity-text"></span>
+      </div>
+
     </div>
 
-    <div class="settings-item">
-      <label for="grid-width">Grid</label>
-      <select id="grid-width" class="grid-width-select">
-        <option value="0">Disabled</option>
-        <option value="1">1px</option>
-        <option value="2">2px</option>
-        <option value="3">3px</option>
-        <option value="4">4px</option>
-      </select>
+    <div class="settings-section">
+      <div class="settings-title">
+        Preview
+      </div>
+
+      <div class="settings-item">
+        <label>
+          <input type="checkbox" value="1" class="tiled-preview-checkbox  checkbox-fix" name="tiled-preview-checkbox"/>
+          Repeated preview
+        </label>
+      </div>
+
+      <div class="settings-item">
+        <label for="tiled-preview">Maximum FPS </label>
+        <input type="text" class="textfield  textfield-small  max-fps-input" autocomplete="off" name="max-fps"/>
+      </div>
+
+      <input type="submit" class="button button-primary" value="Save" />
     </div>
-
-    <div class="settings-item">
-      <label for="tiled-preview">Layer Preview Opacity</label>
-      <input type="range" class="layer-opacity-input" name="layer-opacity" min="0"  max="1" step="0.05"/>
-      <span class="layer-opacity-text"></span>
-    </div>
-
-  </div>
-
-  <div class="settings-section">
-    <div class="settings-title">
-      Preview
-    </div>
-
-    <div class="settings-item">
-      <label>
-        <input type="checkbox" value="1" class="tiled-preview-checkbox  checkbox-fix" name="tiled-preview-checkbox"/>
-        Repeated preview
-      </label>
-    </div>
-
-    <div class="settings-item">
-      <label for="tiled-preview">Maximum FPS </label>
-      <input type="text" class="textfield  textfield-small  max-fps-input" autocomplete="off" name="max-fps"/>
-    </div>
-
-    <input type="submit" class="button button-primary" value="Save" />
-  </div>
-</form>
-
+  </form>
+</script>
diff --git a/src/templates/settings/export.html b/src/templates/settings/export.html
index e9e7f9bb..b842615f 100644
--- a/src/templates/settings/export.html
+++ b/src/templates/settings/export.html
@@ -1,63 +1,65 @@
-<div class="settings-section">
-  <div class="settings-title">
-    Export Spritesheet
-  </div>
-  <div class="settings-item">
-    <div class="settings-description">PNG with all frames side by side.</div>
-    <div class="scaling-factor"
-      title="Scale the exported PNG spritesheet"
-      rel="tooltip"
-      data-placement="top">
-      <label for="scaling-factor">Scale</label>
-      <input type="range" class="scaling-factor-input" name="scaling-factor" min="1"  max="32" step="1"/>
-      <span class="scaling-factor-text"></span>
+<script type="text/html" id="templates/settings/export.html">
+  <div class="settings-section">
+    <div class="settings-title">
+      Export Spritesheet
     </div>
-    <button type="button" class="button button-primary png-download-button">Download PNG</button>
-  </div>
-  <div class="settings-title">
-    Export as ZIP
-  </div>
-  <div class="settings-item">
-    <div class="settings-description">ZIP with one PNG file per frame.</div>
-    <div class="settings-description">File names will start with the prefix below.</div>
     <div class="settings-item">
-      <label>Prefix</label>
-      <input type="text" class="zip-prefix-name  textfield" autocomplete="off" placeholder="PNG file prefix ...">
-    </div>
-  <div class="settings-item">
-      <label>
-        <input class="zip-split-layers-checkbox  checkbox-fix" type="checkbox" />
-        Split by layers
-      </label>
-    </div>
-    <button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
-  </div>
-  <div class="settings-title">
-    Export to Animated GIF
-  </div>
-  <div class="settings-item">
-    <form action="" method="POST" class="gif-export-form">
-      <div class="settings-item">
-        <label>Select resolution:</label>
-        <div class="resize-section">
-          <span  class="resize-section-title">Width</span>
-          <input type="text" class="textfield  export-size-field  export-gif-resize-width" autocomplete="off" name="resize-width"/>
-          <span>px</span>
-        </div>
-        <div class="resize-section">
-          <span  class="resize-section-title">Height</span>
-          <input type="text" class="textfield  export-size-field  export-gif-resize-height" autocomplete="off" name="resize-height"/>
-          <span>px</span>
-        </div>
+      <div class="settings-description">PNG with all frames side by side.</div>
+      <div class="scaling-factor"
+        title="Scale the exported PNG spritesheet"
+        rel="tooltip"
+        data-placement="top">
+        <label for="scaling-factor">Scale</label>
+        <input type="range" class="scaling-factor-input" name="scaling-factor" min="1"  max="32" step="1"/>
+        <span class="scaling-factor-text"></span>
       </div>
+      <button type="button" class="button button-primary png-download-button">Download PNG</button>
+    </div>
+    <div class="settings-title">
+      Export as ZIP
+    </div>
+    <div class="settings-item">
+      <div class="settings-description">ZIP with one PNG file per frame.</div>
+      <div class="settings-description">File names will start with the prefix below.</div>
       <div class="settings-item">
-        <button type="button" class="button button-primary gif-download-button">Download GIF</button>
-        <button type="button" class="button button gif-upload-button">Get public URL</button>
+        <label>Prefix</label>
+        <input type="text" class="zip-prefix-name  textfield" autocomplete="off" placeholder="PNG file prefix ...">
+      </div>
+    <div class="settings-item">
+        <label>
+          <input class="zip-split-layers-checkbox  checkbox-fix" type="checkbox" />
+          Split by layers
+        </label>
+      </div>
+      <button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
+    </div>
+    <div class="settings-title">
+      Export to Animated GIF
+    </div>
+    <div class="settings-item">
+      <form action="" method="POST" class="gif-export-form">
+        <div class="settings-item">
+          <label>Select resolution:</label>
+          <div class="resize-section">
+            <span  class="resize-section-title">Width</span>
+            <input type="text" class="textfield  export-size-field  export-gif-resize-width" autocomplete="off" name="resize-width"/>
+            <span>px</span>
+          </div>
+          <div class="resize-section">
+            <span  class="resize-section-title">Height</span>
+            <input type="text" class="textfield  export-size-field  export-gif-resize-height" autocomplete="off" name="resize-height"/>
+            <span>px</span>
+          </div>
+        </div>
+        <div class="settings-item">
+          <button type="button" class="button button-primary gif-download-button">Download GIF</button>
+          <button type="button" class="button button gif-upload-button">Get public URL</button>
+        </div>
+      </form>
+      <div class="gif-upload">
+        <div class="gif-export-preview"></div>
+        <div class="gif-upload-status"></div>
       </div>
-    </form>
-    <div class="gif-upload">
-      <div class="gif-export-preview"></div>
-      <div class="gif-upload-status"></div>
     </div>
   </div>
-</div>
+</script>
diff --git a/src/templates/settings/import.html b/src/templates/settings/import.html
index 0508d22e..87c26877 100644
--- a/src/templates/settings/import.html
+++ b/src/templates/settings/import.html
@@ -1,55 +1,53 @@
-<div class="settings-section">
-  <div class="settings-title">
-    Load from Browser
-  </div>
-  <div class="settings-item">
-    <span>Load a <span class="import-highlight">local piskel</span> saved in this Browser</span>
-    <div class="import-section">
-      <button type="button" class="button  button-primary browse-local-button">Browse local saves</button>
+<script type="text/template" id="templates/settings/import.html">
+  <div class="settings-section">
+    <div class="settings-title">
+      Load from Browser
     </div>
-  </div>
-  <div class="settings-title">
-    Load .piskel file
-  </div>
-  <div class="settings-item">
-    <span>Load a <span class="import-highlight">.piskel</span> file from your computer</span>
-
-    <div class="import-section">
-      <button type="button" class="button  button-primary open-piskel-button">Browse .piskel files</button>
-      <span class="file-input-open-piskel-status"></span>
-      <input style="display:none"
-        type="file" name="open-piskel-input"
-        value="file" accept=".piskel"/>
-    </div>
-  </div>
-  <div class="settings-title">
-    Import From Picture
-  </div>
-  <div class="settings-item">
-    <div style="margin-top:5px;margin-bottom:5px;">Supports <span class="import-highlight">PNG, JPG, BMP, Animated GIF</span></div>
-    <div class="import-section">
-      <button type="button" class="button  button-primary file-input-button">Browse images</button>
-      <input style="display:none"
-        type="file" name="file-upload-input"
-        value="file" accept="image/*"/>
-    </div>
-  </div>
-  <div class="settings-title">
-    Recover recent sessions
-  </div>
-  <div class="settings-item previous-session">
-      <!-- <span>Load a <span class="import-highlight">backup</span> from a recent session</span>
+    <div class="settings-item">
+      <span>Load a <span class="import-highlight">local piskel</span> saved in this Browser</span>
       <div class="import-section">
-        <button type="button" class="button  button-primary load-recent-button">Browse recent sessions</button>
-      </div> -->
-  </div>
-
-  <script type="text/template" id="previous-session-info-template">
-    <div>
-      Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
-      <div style="margin-top:10px;">
-        <button type="button" class="button  button-primary restore-session-button">Restore</button>
+        <button type="button" class="button  button-primary browse-local-button">Browse local saves</button>
       </div>
     </div>
-  </script>
-</div>
\ No newline at end of file
+    <div class="settings-title">
+      Load .piskel file
+    </div>
+    <div class="settings-item">
+      <span>Load a <span class="import-highlight">.piskel</span> file from your computer</span>
+
+      <div class="import-section">
+        <button type="button" class="button  button-primary open-piskel-button">Browse .piskel files</button>
+        <span class="file-input-open-piskel-status"></span>
+        <input style="display:none"
+          type="file" name="open-piskel-input"
+          value="file" accept=".piskel"/>
+      </div>
+    </div>
+    <div class="settings-title">
+      Import From Picture
+    </div>
+    <div class="settings-item">
+      <div style="margin-top:5px;margin-bottom:5px;">Supports <span class="import-highlight">PNG, JPG, BMP, Animated GIF</span></div>
+      <div class="import-section">
+        <button type="button" class="button  button-primary file-input-button">Browse images</button>
+        <input style="display:none"
+          type="file" name="file-upload-input"
+          value="file" accept="image/*"/>
+      </div>
+    </div>
+    <div class="settings-title">
+      Recover recent sessions
+    </div>
+    <div class="settings-item previous-session">
+    </div>
+  </div>
+</script>
+
+<script type="text/template" id="previous-session-info-template">
+  <div>
+    Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
+    <div style="margin-top:10px;">
+      <button type="button" class="button  button-primary restore-session-button">Restore</button>
+    </div>
+  </div>
+</script>
\ No newline at end of file
diff --git a/src/templates/settings/resize.html b/src/templates/settings/resize.html
index c539c93e..9011c812 100644
--- a/src/templates/settings/resize.html
+++ b/src/templates/settings/resize.html
@@ -1,66 +1,68 @@
-<div class="settings-section">
-  <!-- RESIZE DRAWING SECTION -->
-  <div class="settings-title">
-    Resize
-  </div>
-  <div class="settings-item  resize-canvas">
-    <form action="" method="POST" name="resize-canvas-form">
-      <div class="resize-section">
-        <span  class="resize-section-title">Width</span>
-        <input type="text" class="textfield resize-size-field" autocomplete="off" name="resize-width"/>
-        <span>px</span>
-      </div>
-      <div class="resize-section">
-        <span  class="resize-section-title">Height</span>
-        <input type="text" class="textfield resize-size-field" autocomplete="off" name="resize-height"/>
-        <span>px</span>
-      </div>
-      <div class="resize-section">
-        <label>
-          <input type="checkbox" class="resize-ratio-checkbox checkbox-fix" value="true"/>
-          <span>Maintain aspect ratio</span>
-        </label>
-      </div>
-      <div class="resize-section">
-        <label>
-          <input type="checkbox" class="resize-content-checkbox checkbox-fix" value="true"/>
-          <span>Resize canvas content</span>
-        </label>
-      </div>
-      <div class="resize-section">
-        <span  class="resize-section-title">Anchor</span>
-        <div class="resize-origin-container">
-          <div class="resize-origin-option"  title="top left"      data-origin="TOPLEFT"></div>
-          <div class="resize-origin-option"  title="top"           data-origin="TOP"></div>
-          <div class="resize-origin-option"  title="top right"     data-origin="TOPRIGHT"></div>
-          <div class="resize-origin-option"  title="middle left"   data-origin="MIDDLELEFT"></div>
-          <div class="resize-origin-option"  title="middle"        data-origin="MIDDLE"></div>
-          <div class="resize-origin-option"  title="middle right"  data-origin="MIDDLERIGHT"></div>
-          <div class="resize-origin-option"  title="bottom left"   data-origin="BOTTOMLEFT"></div>
-          <div class="resize-origin-option"  title="bottom"        data-origin="BOTTOM"></div>
-          <div class="resize-origin-option"  title="bottom right"  data-origin="BOTTOMRIGHT"></div>
+<script type="text/html" id="templates/settings/resize.html">
+  <div class="settings-section">
+    <!-- RESIZE DRAWING SECTION -->
+    <div class="settings-title">
+      Resize
+    </div>
+    <div class="settings-item  resize-canvas">
+      <form action="" method="POST" name="resize-canvas-form">
+        <div class="resize-section">
+          <span  class="resize-section-title">Width</span>
+          <input type="text" class="textfield resize-size-field" autocomplete="off" name="resize-width"/>
+          <span>px</span>
         </div>
-      </div>
-      <input type="submit" class="button button-primary resize-button" value="Resize" />
-    </form>
+        <div class="resize-section">
+          <span  class="resize-section-title">Height</span>
+          <input type="text" class="textfield resize-size-field" autocomplete="off" name="resize-height"/>
+          <span>px</span>
+        </div>
+        <div class="resize-section">
+          <label>
+            <input type="checkbox" class="resize-ratio-checkbox checkbox-fix" value="true"/>
+            <span>Maintain aspect ratio</span>
+          </label>
+        </div>
+        <div class="resize-section">
+          <label>
+            <input type="checkbox" class="resize-content-checkbox checkbox-fix" value="true"/>
+            <span>Resize canvas content</span>
+          </label>
+        </div>
+        <div class="resize-section">
+          <span  class="resize-section-title">Anchor</span>
+          <div class="resize-origin-container">
+            <div class="resize-origin-option"  title="top left"      data-origin="TOPLEFT"></div>
+            <div class="resize-origin-option"  title="top"           data-origin="TOP"></div>
+            <div class="resize-origin-option"  title="top right"     data-origin="TOPRIGHT"></div>
+            <div class="resize-origin-option"  title="middle left"   data-origin="MIDDLELEFT"></div>
+            <div class="resize-origin-option"  title="middle"        data-origin="MIDDLE"></div>
+            <div class="resize-origin-option"  title="middle right"  data-origin="MIDDLERIGHT"></div>
+            <div class="resize-origin-option"  title="bottom left"   data-origin="BOTTOMLEFT"></div>
+            <div class="resize-origin-option"  title="bottom"        data-origin="BOTTOM"></div>
+            <div class="resize-origin-option"  title="bottom right"  data-origin="BOTTOMRIGHT"></div>
+          </div>
+        </div>
+        <input type="submit" class="button button-primary resize-button" value="Resize" />
+      </form>
+    </div>
+    <!-- DEFAULT SIZE SECTION -->
+    <div class="settings-title">
+      Default size
+    </div>
+    <div class="settings-item  settings-default-size">
+      <form action="" method="POST" name="default-size-form">
+        <div class="resize-section">
+          <span  class="resize-section-title">Width</span>
+          <input type="text" class="textfield resize-size-field" autocomplete="off" name="default-width"/>
+          <span>px</span>
+        </div>
+        <div class="resize-section">
+          <span  class="resize-section-title">Height</span>
+          <input type="text" class="textfield resize-size-field" autocomplete="off" name="default-height"/>
+          <span>px</span>
+        </div>
+        <input type="submit" class="button button-primary resize-button" value="Set default" />
+      </form>
+    </div>
   </div>
-  <!-- DEFAULT SIZE SECTION -->
-  <div class="settings-title">
-    Default size
-  </div>
-  <div class="settings-item  settings-default-size">
-    <form action="" method="POST" name="default-size-form">
-      <div class="resize-section">
-        <span  class="resize-section-title">Width</span>
-        <input type="text" class="textfield resize-size-field" autocomplete="off" name="default-width"/>
-        <span>px</span>
-      </div>
-      <div class="resize-section">
-        <span  class="resize-section-title">Height</span>
-        <input type="text" class="textfield resize-size-field" autocomplete="off" name="default-height"/>
-        <span>px</span>
-      </div>
-      <input type="submit" class="button button-primary resize-button" value="Set default" />
-    </form>
-  </div>
-</div>
\ No newline at end of file
+</script>
diff --git a/src/templates/settings/save.html b/src/templates/settings/save.html
index cb1f6fac..36efbae9 100644
--- a/src/templates/settings/save.html
+++ b/src/templates/settings/save.html
@@ -1,67 +1,67 @@
-<div class="settings-section  setting-save-section">
-  <form action="" method="POST" class="save-form" name="save-form">
-    <div class="settings-title">Sprite Information</div>
-    <div class="settings-item">
-      <div class="settings-form-section" style="overflow:hidden">
-        <label class="row" style="line-height:20px;">Title : </label>
-        <input id="save-name" type="text" class="save-field textfield" autocomplete="off" />
+<script type="text/template" id="templates/settings/save.html">
+  <div class="settings-section  setting-save-section">
+    <form action="" method="POST" class="save-form" name="save-form">
+      <div class="settings-title">Sprite Information</div>
+      <div class="settings-item">
+        <div class="settings-form-section" style="overflow:hidden">
+          <label class="row" style="line-height:20px;">Title : </label>
+          <input id="save-name" type="text" class="save-field textfield" autocomplete="off" />
+        </div>
+        <div class="settings-form-section">
+          <label class="row" style="line-height:20px;">Description : </label>
+          <textarea id="save-description" class="save-field textfield"></textarea>
+        </div>
+        <div class="settings-form-section  save-public-section">
+          <label class="row">
+            Public : <input type="checkbox" value="1" name="save-public-checkbox"/>
+          </label>
+        </div>
       </div>
-      <div class="settings-form-section">
-        <label class="row" style="line-height:20px;">Description : </label>
-        <textarea id="save-description" class="save-field textfield"></textarea>
-      </div>
-      <div class="settings-form-section  save-public-section">
-        <label class="row">
-          Public : <input type="checkbox" value="1" name="save-public-checkbox"/>
-        </label>
-      </div>
-    </div>
-  </form>
+    </form>
+  </div>
+</script>
 
-  <!-- PARTIALS -->
+<!-- save-gallery-partial -->
+<script type="text/template" id="save-gallery-partial">
+  <div class="settings-title">Save online</div>
+  <div class="settings-item">
+    <input type="button" class="button button-primary" id="save-gallery-button" value="Save to your gallery" />
+    <div class="save-status">Your piskel will be stored online in your gallery.</div>
+  </div>
+</script>
 
-  <!-- save-gallery-partial -->
-  <script type="text/template" id="save-gallery-partial">
-    <div class="settings-title">Save online</div>
-    <div class="settings-item">
-      <input type="button" class="button button-primary" id="save-gallery-button" value="Save to your gallery" />
-      <div class="save-status">Your piskel will be stored online in your gallery.</div>
-    </div>
-  </script>
+<!-- save-gallery-unavailable-partial -->
+<script type="text/template" id="save-gallery-unavailable-partial">
+  <div class="settings-title">Save online</div>
+  <div class="settings-item">
+    <div class="save-status">Login to <a href="http://piskelapp.com" target="_blank">piskelapp.com</a> to save and share your sprites online.</div>
+  </div>
+</script>
 
-  <!-- save-gallery-unavailable-partial -->
-  <script type="text/template" id="save-gallery-unavailable-partial">
-    <div class="settings-title">Save online</div>
-    <div class="settings-item">
-      <div class="save-status">Login to <a href="http://piskelapp.com" target="_blank">piskelapp.com</a> to save and share your sprites online.</div>
-    </div>
-  </script>
+<!-- save-localstorage-partial -->
+<script type="text/template" id="save-localstorage-partial">
+  <div class="settings-title">Save offline in Browser</div>
+  <div class="settings-item">
+    <input type="button" class="button button-primary" id="save-localstorage-button" value="Save in Browser" />
+    <div class="save-status">Your piskel will be saved locally and will only be accessible from this browser.</div>
+  </div>
+</script>
 
-  <!-- save-localstorage-partial -->
-  <script type="text/template" id="save-localstorage-partial">
-    <div class="settings-title">Save offline in Browser</div>
-    <div class="settings-item">
-      <input type="button" class="button button-primary" id="save-localstorage-button" value="Save in Browser" />
-      <div class="save-status">Your piskel will be saved locally and will only be accessible from this browser.</div>
-    </div>
-  </script>
+<!-- save-desktop-partial -->
+<script type="text/template" id="save-desktop-partial">
+  <div class="settings-title">Save as File</div>
+  <div class="settings-item">
+    <input type="button" class="button button-primary" id="save-desktop-button" value="Save" />
+    <input type="button" class="button button-primary" id="save-desktop-as-new-button" value="Save as ..." />
+    <div class="save-status">Your sprite will be saved as a .piskel file.</div>
+  </div>
+</script>
 
-  <!-- save-desktop-partial -->
-  <script type="text/template" id="save-desktop-partial">
-    <div class="settings-title">Save as File</div>
-    <div class="settings-item">
-      <input type="button" class="button button-primary" id="save-desktop-button" value="Save" />
-      <input type="button" class="button button-primary" id="save-desktop-as-new-button" value="Save as ..." />
-      <div class="save-status">Your sprite will be saved as a .piskel file.</div>
-    </div>
-  </script>
-
-  <!-- save-file-download-partial -->
-  <script type="text/template" id="save-file-download-partial">
-    <div class="settings-title">Save offline as File</div>
-    <div class="settings-item">
-      <input type="button" class="button button-primary" id="save-file-download-button" value="Save as .piskel" />
-      <div class="save-status">Your sprite will be downloaded as a .piskel file.</div>
-    </div>
-  </script>
-</div>
+<!-- save-file-download-partial -->
+<script type="text/template" id="save-file-download-partial">
+  <div class="settings-title">Save offline as File</div>
+  <div class="settings-item">
+    <input type="button" class="button button-primary" id="save-file-download-button" value="Save as .piskel" />
+    <div class="save-status">Your sprite will be downloaded as a .piskel file.</div>
+  </div>
+</script>
\ No newline at end of file