diff --git a/app/dashboard/site/template/index.js b/app/dashboard/site/template/index.js
index cd7e2d3fd58..a0b32d6de35 100644
--- a/app/dashboard/site/template/index.js
+++ b/app/dashboard/site/template/index.js
@@ -178,7 +178,7 @@ TemplateEditor.route("/:templateSlug/local-editing")
     );
   });
 
-  TemplateEditor.route('/:templateSlug/download')
+  TemplateEditor.route('/:templateSlug/download-zip')
   .get(function (req, res) {
 
     // create a zip file of the template on the fly and send it to the user
@@ -207,8 +207,10 @@ TemplateEditor.route("/:templateSlug/local-editing")
         archive.append(views[view].content, { name: view });
       }
 
+      const package = Template.package.generate(req.blog.id, template, views);
+
       // append the template JSON as 'package.json'
-      archive.append(JSON.stringify(template, null, 2), { name: 'package.json' });
+      archive.append(package, { name: 'package.json' });
 
       // Finalize the archive
       archive.finalize();
@@ -280,14 +282,14 @@ TemplateEditor.route("/:templateSlug/photo")
     
 });
 
-TemplateEditor.route("/:templateSlug/share")
+TemplateEditor.route("/:templateSlug/download")
 
   .get(function (req, res) {
-    res.locals.title = `Share - ${req.template.name}`;
+    res.locals.title = `Download - ${req.template.name}`;
     res.locals.shareURL = `${req.protocol}://${req.hostname}/sites/share-template/${res.locals.template.shareID}`;
-    res.locals.breadcrumbs.add("Share", "share");
+    res.locals.breadcrumbs.add("Download", "download");
 
-    res.render("dashboard/template/share");
+    res.render("dashboard/template/download");
   })
   .post(parse, function (req, res, next) {
     if (req.template.shareID) {
diff --git a/app/dashboard/site/template/source-code.js b/app/dashboard/site/template/source-code.js
index 9e622107680..ae9e6ca0cd4 100644
--- a/app/dashboard/site/template/source-code.js
+++ b/app/dashboard/site/template/source-code.js
@@ -10,7 +10,7 @@ SourceCode.param("viewSlug", require("./load/template-views"));
 SourceCode.param("viewSlug", require("./load/template-view"));
 
 SourceCode.use((req, res, next) => {
-  res.locals.breadcrumbs.add("Edit source", "/source-code");
+  res.locals.breadcrumbs.add("Edit", "/source-code");
   next();
 })
 
diff --git a/app/views/css/buttons.css b/app/views/css/buttons.css
index b7d9726b76a..1ff6d2d61f7 100644
--- a/app/views/css/buttons.css
+++ b/app/views/css/buttons.css
@@ -85,6 +85,11 @@ a.close-button:hover > span,
     margin-right: 4px;
 }
 
+.template-button span {
+  vertical-align: middle;position:relative;top:-0.1em;
+  margin-right: 4px;
+}
+
 .template-button.right-aligned svg {
     margin-right: 0;
     margin-left: 4px;
diff --git a/app/views/dashboard/site-preview.css b/app/views/dashboard/site-preview.css
index c8d024880ac..0b27e2179a7 100644
--- a/app/views/dashboard/site-preview.css
+++ b/app/views/dashboard/site-preview.css
@@ -2,6 +2,7 @@
     overflow: hidden;
     width: 100%;
     height: 0;
+    background: #fff;
     padding-bottom: 66.6666666667%;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5),
         0 -1px 0 rgba(0, 0, 0, .11),
diff --git a/app/views/dashboard/template/download.html b/app/views/dashboard/template/download.html
new file mode 100644
index 00000000000..6c5d5e98aa9
--- /dev/null
+++ b/app/views/dashboard/template/download.html
@@ -0,0 +1,7 @@
+<h1>Download</h1>
+
+<p>Download a zip file containing the template's files:</p>
+
+<p><a href="{{{base}}}/download-zip">Download (.zip)</a></p>
+
+<p>You can unzip the contents of this file and place it in your <code>Templates</code> folder to edit the template using your favorite text editor.</p>
\ No newline at end of file
diff --git a/app/views/dashboard/template/index.html b/app/views/dashboard/template/index.html
index 63cd04a52f5..cec8c9a6f96 100644
--- a/app/views/dashboard/template/index.html
+++ b/app/views/dashboard/template/index.html
@@ -1 +1,101 @@
-Hey
\ No newline at end of file
+<h1>Templates</h1>
+
+<div class="template-grid">
+
+    {{#currentTemplate}}
+    {{> template-grid-link}}
+    {{/currentTemplate}}
+    
+    {{#yourTemplates}}
+    {{> template-grid-link}}
+    {{/yourTemplates}}
+    
+    {{#blotTemplates}}
+    {{> template-grid-link}}
+    {{/blotTemplates}}
+    </div>
+
+    <style>
+
+        .template-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+            gap: 20px;
+        }
+    
+        #drop-area {
+            max-width: 600px;
+            border: 1px dashed #aaa;
+            min-height: 100px;
+            border-radius: 12px;
+            padding:36px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            margin-bottom: 20px;
+        }
+    
+        #drop-area .placeholder {
+            text-align: center;
+            color: #888;
+        }
+    
+        #drop-area.highlight {
+            background-color: #eee;
+            border-color: blue;
+        }
+    
+        .hidden {
+            display: none;
+        }
+    
+        #file-list {
+            list-style-type: none;
+            padding: 0;
+        }
+    
+        #file-list li {
+            margin: 5px 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: #888;
+        }
+    
+        #drop-area .hidden {
+            display: none;
+        }
+    
+        #file-list li button {
+            margin-left: 10px;
+            background-color: red;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            padding: 0.2rem 0.5rem;
+        }
+    
+        .btn {
+            margin-top: 1rem;
+            padding: 0.5rem 1rem;
+            background-color: blue;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+    
+        .btn:disabled {
+            background-color: grey;
+            cursor: not-allowed;
+        }
+    
+        input[type="text"] {
+            width: 100%;
+            padding: 0.5rem;
+            margin: 0.5rem 0;
+        }
+    </style>
+    
\ No newline at end of file
diff --git a/app/views/dashboard/template/settings.html b/app/views/dashboard/template/settings.html
index ba4d27b926a..44f1dfe9862 100644
--- a/app/views/dashboard/template/settings.html
+++ b/app/views/dashboard/template/settings.html
@@ -34,11 +34,11 @@
     </a>
     <a href="{{{base}}}/source-code" class="template-button">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path></svg>
-        Edit source
+        Edit
     </a>
-    <a href="{{{base}}}/share" class="template-button">
-        <svg style="fill:currentColor;vertical-align: middle;position:relative;top:-0.1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M3.75 6.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-6.5a.25.25 0 0 0-.25-.25h-1a.75.75 0 0 1 0-1.5h1c.966 0 1.75.784 1.75 1.75v6.5A1.75 1.75 0 0 1 12.25 15h-8.5A1.75 1.75 0 0 1 2 13.25v-6.5C2 5.784 2.784 5 3.75 5h1a.75.75 0 0 1 0 1.5ZM7.823.177a.25.25 0 0 1 .354 0l2.896 2.896a.25.25 0 0 1-.177.427H8.75v5.75a.75.75 0 0 1-1.5 0V3.5H5.104a.25.25 0 0 1-.177-.427Z"></path></svg>
-        Share
+    <a href="{{{base}}}/download" class="template-button">
+        <span class="icon-download"></span>
+        Download
     </a>
     <!-- <a href="{{{base}}}/duplicate" class="template-button">
         <svg style="fill:currentColor;vertical-align: middle;position:relative;top:-0.1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg> 
diff --git a/app/views/dashboard/template/share.html b/app/views/dashboard/template/share.html
deleted file mode 100644
index 80e6f947826..00000000000
--- a/app/views/dashboard/template/share.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<h1>Share</h1>
-
-<h2>Download as zip</h2>
-<p>Download a zip file containing the template's files:</p>
-<p><a href="{{{base}}}/download">Download (.zip)</a></p>
-<p>You can send this zip file to people who use Blot and they'll be able to install a copy of this template using the zip on the 'New template' page</p>
-<!-- 
-<h2>Share URL:</h2>
-<p>Send this URL to people who use Blot and they'll be able to install a copy of this template on their site:</p>
-<p><a href="/templates/{{slug}}">{{url}}</a></p> -->
-
diff --git a/app/views/dashboard/template/template-navbar-list.html b/app/views/dashboard/template/template-navbar-list.html
index cc41a641a19..fd193f6e777 100644
--- a/app/views/dashboard/template/template-navbar-list.html
+++ b/app/views/dashboard/template/template-navbar-list.html
@@ -2,20 +2,7 @@
   {{#currentTemplate}}
   {{> template-row}}
   {{/currentTemplate}}
-
-  <div class="template-row">
-
-    <div class="preview" style="border:1px dashed #ccc;box-shadow: none;">
-      <a href="{{{dashboardBase}}}/template/new"></a>
-    </div>
-  
-  
-    <a href="{{{dashboardBase}}}/template/new">New template
-    </a>
-  
-  </div>
-  
-  
+    
   {{#templatesInYourFolder.length}}
   <h2>In folder</h2>
   <hr style="border:none;border-bottom: 1px solid #eeeeec;margin:0 0;">
@@ -43,6 +30,18 @@ <h2>In folder</h2>
   {{> template-row}}
   {{/pastTemplates}}
 
+  <div class="template-row">
+
+    <div class="preview" style="border:1px dashed #ccc;box-shadow: none;">
+      <a href="{{{dashboardBase}}}/template/new"></a>
+    </div>
+  
+  
+    <a href="{{{dashboardBase}}}/template/new">New template
+    </a>
+  
+  </div>
+
   <hr style="border:none;border-bottom: 1px solid #eeeeec;margin:0 0;">
   <a href="{{{dashboardBase}}}/template/deleted">Deleted templates</a><br>
   <a href="{{{dashboardBase}}}/template/disable">Disable template</a>