diff --git a/www/index.html b/www/index.html
index 8446464..2fb3db4 100644
--- a/www/index.html
+++ b/www/index.html
@@ -143,7 +143,7 @@
       body {
         display: grid; 
         grid-template-columns: 210px 2fr 2fr; 
-        grid-template-rows: 60px 2fr 2fr; 
+        grid-template-rows: 80px 2fr 2fr; 
         gap: 0px 0px; 
         grid-template-areas: 
           "header header header"
@@ -523,6 +523,400 @@
         position: absolute;
         background-color: white;
       }
+      /* darkmode */
+      :root {
+        --simply-toolbar-background: #404040;
+        --simply-toolbar-background-secondary: #333;
+        --simply-toolbar-font-color: #bbb;
+        --simply-toolbar-color-primary: #ea5922;
+        --simply-toolbar-color-secondary: #ddd;
+        --simply-toolbar-color-support: #444;
+        --simply-toolbar-focus-color: orange;
+      }
+      /* logo */
+      :root {
+        --simply-logo-color-primary: var(--simply-toolbar-color-primary);
+        --simply-logo-color-secondary: var(--simply-toolbar-color-secondary);
+      }
+      
+      /* simply-toolbar */
+      :root {
+        --simply-toolbar-font-size: 11px;
+        --simply-toolbar-font-family: arial;
+        
+        --simply-toolbar-box-shadow: 0px 0px 4px var(--simply-toolbar-background-secondary);  
+        --simply-toolbar-gradient-background: linear-gradient(to bottom, var(--simply-toolbar-background) 0%, var(--simply-toolbar-background) 95%, var(--simply-toolbar-background-secondary) 100%);
+        
+        --simply-toolbar-base-height: 60px;
+        --simply-toolbar-marker-size: 12px;
+      }
+      .simply-toolbar {
+        font-family: var(--simply-toolbar-font-family);
+        font-size: var(--simply-toolbar-font-size);
+        color: var(--simply-toolbar-font-color);
+        background: var(--simply-toolbar-background);
+      
+        -webkit-border-radius: 0px 0px 3px 3px;
+        -moz-border-radius: 0px 0px 3px 3px;
+        border-radius: 0px 0px 3px 3px;
+        line-height: 0px;
+        position: relative;
+        border: 1px solid var(--simply-toolbar-color-support);
+        border-top: 5px solid var(--simply-toolbar-color-primary);
+        box-shadow:  var(--simply-toolbar-box-shadow);
+        z-index: 1000;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ie-user-select: none;
+        user-select: none;
+      }
+      .simply-toolbar::after, .simply-toolbar > ul::after, .simply-toolbar-section > ul::after {
+        content: "";
+        clear: both;
+        display: block;
+      }
+      .simply-toolbar .marker {
+        content: "";
+        display: block;
+        position: absolute;
+        margin-top: calc(-1 * var(--simply-toolbar-marker-size));
+        left: 50%;
+        margin-left: calc(-1 * var(--simply-toolbar-marker-size));
+        width: 0;
+        border-bottom: var(--simply-toolbar-marker-size) solid var(--simply-toolbar-color-primary);
+        border-top: 0px;
+        border-left: var(--simply-toolbar-marker-size) solid transparent;
+        border-right: var(--simply-toolbar-marker-size) solid transparent;
+      }
+      .simply-toolbar > ul {
+        background: var(--simply-toolbar-submenu-background);
+        min-width: 100%;
+        line-height: 0px;
+      }
+      .simply-toolbar > ul,
+      .simply-toolbar > ul > li,
+      .simply-toolbar-section > ul,
+      .simply-toolbar-section > ul > li {
+        margin: 0px;
+        padding: 0px;
+        border: 0px;
+        list-style: none;
+        white-space: nowrap;
+      }
+      .simply-toolbar-section > ul > li.simply-text-format {
+        margin-right: 4px;
+      }
+      .simply-toolbar li {
+        position: relative;
+        float: left;
+      }
+      .simply-main-toolbar .simply-toolbar {
+        min-height: var(--simply-toolbar-base-height);
+        transform: translate3d(0,0,0);
+        box-sizing: content-box;
+      }
+      .simply-main-toolbar .simply-buttons {
+        white-space: nowrap !important;
+        position: absolute;
+      }
+      .simply-main-toolbar .simply-toolbar li {
+        float: none;
+        display: inline-block;
+      }
+      
+      .simply-toolbar button {
+        border: 0px;
+        margin: 0px;
+        padding: 0px 2px;
+        background: transparent;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        position: relative;
+        min-width: 50px;
+        text-align: center;
+        height: var(--simply-toolbar-base-height);
+        font-size: var(--simply-toolbar-font-size);
+        color: var(--simply-toolbar-font-color) !important;
+        box-sizing: border-box;
+        font-weight: inherit;
+        letter-spacing: 0;
+        line-height: inherit;
+        text-transform: inherit;
+        font-family: inherit;
+        box-shadow: inherit;
+        border-radius: 0;
+        transition: inherit;
+        font-variant-caps: normal;
+      }
+      @media (max-width: 480px) {
+        .simply-toolbar button {
+          min-width: 48px;
+        }
+      }
+      @media (max-width: 320px) {
+        .simply-toolbar button {
+          min-width: 40px;
+        }
+      }
+      .simply-main-toolbar button {
+        vertical-align: top;
+      }
+      .simply-toolbar button[disabled] {
+        opacity: 0.3;
+      }
+      .simply-toolbar button > i,
+      .simply-toolbar button > span.fa-stack {
+        line-height: 50px;
+        font-size: 19px;
+        display: inline-block;
+        padding: 0px 4px;
+        line-height: 38px;
+        display: block;
+        margin: -13px auto 0px;
+        position: relative;
+      }
+      .simply-toolbar button.simply-selected {
+        background-color: #EEE;
+        position: relative;
+        border-left: 1px solid #DDD;
+        border-right: 1px solid white;
+      }
+      .simply-toolbar button.simply-disabled {
+        opacity: 0.3;
+      }
+      
+      .simply-toolbar button:focus {
+        border-bottom: 2px solid var(--simply-toolbar-focus-color) !important;
+      }
+      .simply-toolbar label button:focus {
+        border-bottom: 0px !important;
+      }
+      button.simply-selected::first-child {
+        border-left: 0px;
+      }
+      button.simply-selected::last-child {
+        border-right: 0px;
+      }
+      
+      .simply-toolbar-section {
+        background-color: #EEE;
+        display: none;
+        clear: both;
+      }
+      section.simply-section.active {
+        opacity: 1;
+        z-index: 99999;
+      }
+      section.simply-section {
+        position: absolute;
+        opacity: 0;
+        -webkit-transition: opacity 0.2s ease-in-out;
+        -moz-transition: opacity 0.2s ease-in-out;
+        -ms-transition: opacity 0.2s ease-in-out;
+        -o-transition: opacity 0.2s ease-in-out;
+        transition: opacity 0.2s ease-in-out;
+        left: -10000px; /* position off screen initially */
+        height: inherit;
+      }
+      .simply-toolbar-section ul {
+        background: linear-gradient(to bottom, #EEE 0%, #DDD 100%);
+        padding: 4px 2px;
+      }
+      .simply-toolbar-section.simply-selected {
+        display: block;
+        white-space: nowrap; 
+      }
+      .simply-toolbar-section button {
+        height: 40px;
+        min-width: 23px;
+        border: 1px solid transparent;
+        line-height: 6px;
+      }
+      .simply-toolbar-section button > i,
+      .simply-toolbar-section button > span.fa-stack {
+        font-size: 14px;
+        line-height: 16px;
+        width: 23px;
+        margin: 0px auto 4px;
+      }
+      .simply-toolbar-section button.simply-selected {
+        background-color: #D7D7D7;
+        border: 1px solid #EEE;
+        border-left: 1px solid #888;
+        border-top: 1px solid #888;
+        border-radius: 2px;
+      }
+      section.simply-section {
+        margin-bottom: 150px;
+      }
+      section.simply-section h1 {
+        font-size: 16px;
+        font-weight: bold;
+        display: none;
+      }
+      button.simply-expands::after {
+        content: "";
+        display: block;
+        position: absolute;
+        bottom: 6px;
+        left: 50%;
+        margin-left: -3px;
+        width: 0;
+        border-top: 3px solid #888;
+        border-bottom: 0px;
+        border-left: 3px solid transparent;
+        border-right: 3px solid transparent;
+        opacity: 1;
+        transform: inherit;
+        -webkit-transform: inherit;
+        top: inherit;
+        height: 0;
+      }
+      button.simply-selected.simply-expands::after {
+        display: none;
+      }
+      .simply-toolbar-section > div {
+        padding-left: 80px;
+      }
+      
+      .simply-toolbar-section label {
+        width: 60px;
+        font-size: 12px;
+        display: inline-block;
+        font-weight: normal;
+        padding-left: 10px;
+        margin: inherit;
+        margin-left: -80px;
+        color: inherit;
+      }
+      .simply-toolbar-section input,
+      .simply-toolbar-section select {
+        background-color: white;
+        color: black;
+        margin-top: 3px;
+        margin-bottom: 3px;
+        border: 1px solid #888;
+        border-bottom-color: #EEE;
+        border-right-color: #EEE;
+        border-radius: 2px;
+        line-height: 22px;
+        min-height: 22px;
+        width: 100%;
+        font-family: inherit;
+        font-size: inherit;
+        display: inline-block;
+        box-sizing: border-box !important;
+        padding: 2px 0 !important;
+        margin: 3px 0 !important;
+      }
+      .simply-toolbar-section select {
+        padding: 4px 0px !important;
+      }
+      .simply-toolbar button:focus {
+        outline: none;
+      }
+      .simply-float-right {
+        float: right;
+      }
+      .simply-toolbar button.simply-small > i,
+      .simply-toolbar button.simply-small > span.fa-stack {
+        line-height: 24px;
+        font-size: 14px;
+        margin: 0px;
+      }
+      .simply-toolbar button.simply-small {
+        height: auto;
+        width: auto;
+        min-width: 20px;
+      }
+      /* end */
+      
+      li.simply-text-format {
+        line-height: 32px;
+        vertical-align: top;
+        width: 100%;
+      }
+      
+      li.simply-seperator label:before {
+        display: block;
+        position: absolute;
+        border-left: 1px solid #DDD;
+        border-right: 1px solid white;
+        height: 40px;
+        content: "";
+        margin-top: -14px;
+        margin-left: -4px;
+      }
+      
+      label.simply-subsection {
+        text-align: center;
+        vertical-align: top;
+        line-height: 14px;
+      }
+      .simply-disabled {
+        color: #BBB;
+      }
+      
+      .simply-main-toolbar {
+        left: 0px !important;
+        opacity: 1 !important;
+        position: fixed;
+        margin-bottom: auto;
+        top: 0px;
+        right: 0px;
+        z-index: 100000;
+      }
+      .simply-main-toolbar .simply-toolbar {
+        position: static;
+      }
+      .simply-main-toolbar .simply-toolbar:before {
+        display: none;
+      }
+      
+      .simply-main-toolbar .simply-selected {
+        border: 0px;
+      }
+      
+      .simply-main-toolbar .simply-buttons {
+        white-space: normal;
+      }
+      .simply-main-toolbar > .simply-toolbar > ul.simply-buttons > li.simply-seperator {
+        border-right: 1px solid #ddd;
+        height: 58px;
+        vertical-align: top;
+      }
+      .simply-main-toolbar i.simply-logo {
+        margin-bottom: 10px;
+        position: relative;
+        top: 4px;
+        width: 24px;
+        box-sizing: border-box;
+      }
+      .simply-hidden {
+        display: none !important;
+      }
+      
+      .simply-main-toolbar.simply-collapse .simply-toolbar .marker {
+        margin-top: -5px;
+        margin-left: 0px;
+        left: 0;
+        width: 0;
+        border-bottom: 0;
+        border-top: 25px solid var(--simply-toolbar-color-primary);
+        border-left: 0;
+        border-right: 25px solid transparent;
+      }
+      .simply-main-toolbar.simply-collapse .simply-toolbar {
+        border-top-color: transparent;
+      }
+      
+      .simply-main-toolbar.simply-collapse {
+        right: auto;
+      }
+      .simply-main-toolbar.simply-collapse li:nth-child(n+2) {
+        display: none;
+      }
     </style>
     <!-- /Component CSS -->
     <!-- Page CSS -->
@@ -545,7 +939,17 @@
     </style>
     <!-- /Page CSS -->
     <!-- Head HTML -->
-    
+    <!-- font-awesome -->
+    <link href="/assets/fonts/fontawesome-free-6.5.1-web/css/all.css" rel="stylesheet">
+    <!-- cocon -->
+    <style>
+      @font-face {
+        font-family: 'Cocon';
+        font-style: normal;
+        font-weight: 500;
+        src: local('Cocon'), url('/assets/fonts/CoconRegularFont.woff') format('woff');
+      }
+    </style>
     <!-- /Head HTML -->
     <script>
       var simplyDataApi = {};
@@ -2160,6 +2564,18 @@
                 document.location.href = el.querySelector("[href]").getAttribute("href");
               }
             },
+            "publish" : function(el) {
+              document.location.hash="publish";
+            },
+            "simply-preview" : function(el) {
+              document.location.hash="publish";
+            },
+            "simply-save" : function(el) {
+              simplyApp.commands.savePageFrame();
+              simplyApp.commands.saveComponent();
+              simplyApp.commands.saveBaseComponent();
+              simplyApp.commands.savePage();
+            },
             "deleteBaseComponent" : function() {
               if (!confirm("Delete base component?")) {
                 return;
@@ -2634,6 +3050,26 @@
         </template>
       </ul>
     </div>
+    <!-- HTML%20structure -->
+    <div class="simply-toasts">
+      <ul class="simply-toasts simply-space" data-simply-list="alerts">
+        <template data-simply-template="error">
+          <li class="simply-toast simply-toast-error simply-toast-autohide" data-simply-field="state" data-simply-content="attributes" data-simply-attributes="data-state">
+            <div class="simply-space" data-simply-field="message"></div>
+          </li>
+        </template>
+        <template data-simply-template="warning">
+          <li class="simply-toast simply-toast-warning simply-toast-autohide" data-simply-field="state" data-simply-content="attributes" data-simply-attributes="data-state">
+            <div class="simply-space" data-simply-field="message"></div>
+          </li>
+        </template>
+        <template data-simply-template="info">
+          <li class="simply-toast simply-toast-info simply-toast-autohide" data-simply-field="state" data-simply-content="attributes" data-simply-attributes="data-state">
+            <div class="simply-space" data-simply-field="message"></div>
+          </li>
+        </template>
+      </ul>
+    </div>
     <!-- Toast styles -->
     <style>
       .simply-toasts {
@@ -2642,6 +3078,16 @@
       }
     </style>
     
+    <!-- Toast%20styles -->
+    <style>
+      .simply-toasts {
+        position: relative;
+        z-index: 101;
+      }
+      .simply-toasts:has(.simply-empty) {
+        display: none;
+      }
+    </style>
     <!-- /Body HTML -->
     <!-- Component HTML templates -->
     <template id="componentActions">
@@ -3481,10 +3927,7 @@
     </details>
     </template>
     <template id="header">
-      <h1>Simply Code - Build something awesome!</h1>
-    <div class="simplycode-controls">
-      <a href="#publish" class="simplycode-button">Preview and publish!</a>
-    </div>
+      <simply-render rel="simply-main-toolbar"></simply-render>
     </template>
     <template id="componentHtmlValidator">
       <div data-simply-field="code" data-simply-transformer="validateHtml"></div>
@@ -3543,6 +3986,147 @@ <h1>Simply Code - Build something awesome!</h1>
       </div>
     </div>
     </template>
+    <template id="logo">
+      <svg viewbox="0 0 520 300" xmlns="http://www.w3.org/2000/svg">
+      <style type="text/css">
+        .st0{
+          fill: var(--simply-logo-color-secondary);
+        }	
+        .st1{
+          fill: var(--simply-logo-color-primary);
+        }
+        text {
+          font-family: Cocon;
+          font-size: 143px;
+          letter-spacing: -7px;
+          fill: var(--simply-logo-color-primary);
+          text-anchor: middle;
+        }
+      </style>
+      <g class="simply">
+        <path fill="black" id="s" d="m74.400002,87.400002c-16.200005,-2.599998 -21.400002,-3.800003 -21.400002,-9.599998c0,-4.100006 2.900002,-9 16.800003,-9c9.099998,0 17.299995,1.899994 23.599998,5.299995l0,-4.299995c0,-10.700005 -10.099998,-17.200005 -27,-17.200005c-17,0 -35.300003,8.599998 -35.300003,27.400002c0,11.5 6.300003,17.599998 20.5,19.599998c16.599998,2.300003 21.400002,4 21.400002,10.300003c0,9.099998 -11.900002,9.099998 -16.300003,9.099998c-11,0 -18.599998,-2.699997 -23.699997,-5.5l0,4c0,4.399994 0,17.800003 28.199997,17.800003c21,0 34.100006,-10.199997 34.100006,-26.5c0.099991,-14.800003 -11.300003,-19.800003 -20.900002,-21.400002z" class="st0"/>
+        <path fill="black" id="im" d="m187.600006,72.5c9.199997,0 13.900009,5.599998 13.900009,16.5l0,29.599998c0,10.599998 3.799988,14.099998 15.199997,14.099998l7.399994,0l0,-43.399994c0,-13.900002 7.300018,-16.800003 13.300018,-16.800003c10.099976,0 14.5,5.300003 14.5,17.300003l0,28.899994c0,9.199997 2.599976,14.100006 16.099976,14.100006l7.300018,0l0,-42.5c0,-24.300003 -12.700012,-37.700005 -35.900024,-37.700005c-11.199982,0 -20.5,8.300003 -23.699997,13.599998l-2.699997,4.400002l-1.899994,-4.799995c-2.200012,-5.5 -10.800003,-13.100002 -23.100006,-13.100002c-8.300003,0 -15.399994,1.599998 -21.199997,4.799999c-10.800003,5.900002 -16.5,17 -16.5,32.099998l0,12.200005c0,7.599998 -3.5,11.5 -11.199997,12.199997l-0.200012,0l-0.199997,0c-7.699997,-0.599998 -11.300003,-4.5 -11.300003,-12.199997l0,-27c0,-13.5 -4.099991,-17.200005 -19,-17.200005l-4.399994,0l0,48.400002c0,7.300003 1.800003,12.900002 5.199997,16.699997c5,5.5 15.699997,11.400009 29.400009,11.400009l0.599991,0c3.900009,0 7.199997,-0.5 10,-1.200012l0.600006,-0.099991c6.800003,-1.699997 10.800003,-4.100006 13,-5.699997l0.599991,-0.400009c2.800003,-2.099991 10.300003,-9.699997 10.400009,-20l0,-16.699997c0.300003,-6.900002 1.899994,-17.5 13.800003,-17.5z" class="st0"/>
+        <path id="i-dot" d="m115,45.099998c6.800003,0 12.300003,-5.199997 12.300003,-11.599998c0,-6.400002 -5.5,-11.6 -12.300003,-11.6c-6.899994,0 -12.5,5.199999 -12.5,11.6c0,6.400002 5.600006,11.599998 12.5,11.599998z" class="st1"/>
+        <path fill="black" id="p" d="m328.600006,52.599998c-27.899994,0 -43.299988,15.800003 -43.299988,44.5l0,43.900002c0,12.199997 4.5,17.5 14.899994,17.5l7.799988,0l0,-38.099998c0,0 0.200012,2.900002 4.900024,8.299995c5.5,5.600006 10.299988,6.5 19,6.5c21.899994,0 36.599976,-17.299995 36.599976,-43.099998c0,-23.299995 -16.399994,-39.5 -39.899994,-39.5zm1.600006,62.900002c-9.799988,0 -19.100006,-6.199997 -19.100006,-23.800003c0,-12.199997 8.100006,-19.799995 15.899994,-19.799995c11.800018,0 18.900024,5.400002 18.900024,23.199997c-0.000031,12.400002 -6.700012,20.400002 -15.700012,20.400002z" class="st0"/>
+        <path id="l" d="m400.799988,103.699997l0,-60.199997c0,-12.200001 -4.600006,-17.200001 -15.899994,-17.200001l-7.5,0l0,81.600002c0,19.200005 13.299988,26.099998 25.799988,26.099998c4.800018,0 16.100006,-1 16.100006,-10.699997l0,-7.300003l-3.700012,0c-6.399963,0 -14.799988,-1.300003 -14.799988,-12.300003z" class="st0"/>
+        <path fill="black" id="y" d="m483,55l-11.399994,0c-2.100006,15.800003 -8.300018,37.099998 -14.399994,49.5l-2.5,5.099998l-2.200012,-5.199997c-4.5,-10.300003 -10.299988,-26.599998 -13.100006,-39.700005c-1.399994,-6.399994 -7.899994,-9.699997 -13.600006,-9.699997l-11.799988,0c4,21.400002 17.799988,56.099998 29.600006,73.600006l0.799988,1.199997l-0.600006,1.300003c-3.5,8 -8.099976,11.299988 -16.199982,12l-10,0.699997l0,4.5c0,8.599991 7.699982,11.699997 14.299988,11.699997c16.100006,0 21.300018,-3.800003 44.200012,-47.800003c9.300018,-17.799995 16.800018,-41.5 16.800018,-49.299995c-0.300049,-3.300003 -1.300049,-7.900002 -9.900024,-7.900002z" class="st0"/>
+      </g>
+      <text x="50%" y="276">
+        code
+      </text>
+    </svg>
+    </template>
+    <template id="simply-main-toolbar">
+      <section class="simply-section simply-main-toolbar">
+      <div class="simply-toolbar" data-simply-field="page" data-simply-section="simply-code-management" data-simply-content="template" data-simply-default-template="default" data-simply-default-value="default">
+        <template data-simply-template="default">
+          <ul class="simply-buttons">
+            <li>
+              <button data-simply-command="simply-about" class="simply-toolbar-logo">
+                <simply-render rel="logo"></simply-render>
+              </button>
+            </li>
+            <li>
+              <button data-simply-command="simply-preview">
+                <i class="fa fa-eye"></i>Preview
+              </button>
+            </li>
+          </ul>
+        </template>
+        <template data-simply-template="Edit page">
+          <ul class="simply-buttons">
+            <li>
+              <button data-simply-command="simply-about" class="simply-toolbar-logo">
+                <simply-render rel="logo"></simply-render>
+              </button>
+            </li>
+            <li>
+              <button data-simply-command="simply-preview">
+                <i class="fa fa-eye"></i>Preview
+              </button>
+            </li>
+            <li>
+              <button data-simply-command="savePage">
+                <i class="fa fa-save"></i>Save
+              </button>
+            </li>
+            <li>
+              <button data-simply-command="deletePage">
+                <i class="fa fa-save"></i>Delete
+              </button>
+            </li>
+          </ul>
+        </template>
+        <template data-simply-template="Edit component">
+          <ul class="simply-buttons">
+            <li>
+              <button data-simply-command="simply-about" class="simply-toolbar-logo">
+                <simply-render rel="logo"></simply-render>
+              </button>
+            </li>
+            <li>
+              <button data-simply-command="simply-preview">
+                <i class="fa fa-eye"></i>Preview
+              </button>
+            </li>
+            <li>
+              <button data-simply-command="saveComponent">
+                <i class="fa fa-save"></i>Save
+              </button>
+            </li>
+            <li>
+              <button data-simply-command="deleteComponent">
+                <i class="fa fa-save"></i>Delete
+              </button>
+            </li>
+          </ul>
+        </template>
+        <template data-simply-template="Edit base component">
+          <ul class="simply-buttons">
+            <li>
+              <button data-simply-command="simply-about" class="simply-toolbar-logo">
+                <simply-render rel="logo"></simply-render>
+              </button>
+            </li>
+            <li>
+              <button data-simply-command="simply-preview">
+                <i class="fa fa-eye"></i>Preview
+              </button>
+            </li>
+            <li>
+              <button data-simply-command="saveBaseComponent">
+                <i class="fa fa-save"></i>Save
+              </button>
+            </li>
+            <li>
+              <button data-simply-command="deleteBaseComponent">
+                <i class="fa fa-save"></i>Delete
+              </button>
+            </li>
+          </ul>
+        </template>
+        <template data-simply-template="Edit page frame">
+          <ul class="simply-buttons">
+            <li>
+              <button data-simply-command="simply-about" class="simply-toolbar-logo">
+                <simply-render rel="logo"></simply-render>
+              </button>
+            </li>
+            <li>
+              <button data-simply-command="simply-preview">
+                <i class="fa fa-eye"></i>Preview
+              </button>
+            </li>
+            <li>
+              <button data-simply-command="savePageFrame">
+                <i class="fa fa-save"></i>Save
+              </button>
+            </li>
+          </ul>
+        </template>
+      </div>
+    </section>
+    </template>
     <!-- /Component HTML templates -->
     <header data-simply-path="/" data-simply-field="header" data-simply-content="template" data-simply-default-value="Header">
       <template data-simply-template='Header' rel="header"></template>
@@ -3571,6 +4155,21 @@ <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentRawApi"></simply-render>
     </main>
     </template>
+    <template data-simply-template="Edit%20base%20component">
+      <main>
+      <div class="simplycode-header">
+        <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
+      </div>
+      <simply-render rel="componentDescription"></simply-render>
+      <simply-render rel="componentHeadHtml"></simply-render>
+      <simply-render rel="componentBodyHtml"></simply-render>
+      <simply-render rel="componentFootHtml"></simply-render>
+      <simply-render rel="componentCommands"></simply-render>
+      <simply-render rel="componentActions"></simply-render>
+      <simply-render rel="componentRoutes"></simply-render>
+      <simply-render rel="componentRawApi"></simply-render>
+    </main>
+    </template>
     <template data-simply-template="Base components">
       <main>
       <h1>Base components</h1>
@@ -3621,6 +4220,23 @@ <h1>Edit component: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentSorters"></simply-render>
     </main>
     </template>
+    <template data-simply-template="Edit%20component">
+      <main>
+      <div class="simplycode-header">
+        <h1>Edit component: <span data-simply-field="component.id"></span></h1>
+      </div>
+      <simply-render rel="componentDescription"></simply-render>
+      <simply-render rel="componentComponentTemplate"></simply-render>
+      <simply-render rel="componentComponentCss"></simply-render>
+      <simply-render rel="componentCommands"></simply-render>
+      <simply-render rel="componentActions"></simply-render>
+      <simply-render rel="componentDataApi"></simply-render>
+      <simply-render rel="componentRoutes"></simply-render>
+      <simply-render rel="componentTransformers"></simply-render>
+      <simply-render rel="componentDataSources"></simply-render>
+      <simply-render rel="componentSorters"></simply-render>
+    </main>
+    </template>
     <template data-simply-template="List components">
       <main>
       <h1>Components</h1>
@@ -3672,6 +4288,23 @@ <h1>Edit page: <span data-simply-field="component.id"></span></h1>
       <simply-render rel="componentSorters"></simply-render>
     </main>
     </template>
+    <template data-simply-template="Edit%20page">
+      <main>
+      <div class="simplycode-header">
+        <h1>Edit page: <span data-simply-field="component.id"></span></h1>
+      </div>
+      <simply-render rel="componentDescription"></simply-render>
+      <simply-render rel="componentPageTemplate"></simply-render>
+      <simply-render rel="componentPageCss"></simply-render>
+      <simply-render rel="componentCommands"></simply-render>
+      <simply-render rel="componentActions"></simply-render>
+      <simply-render rel="componentDataApi"></simply-render>
+      <simply-render rel="componentRoutes"></simply-render>
+      <simply-render rel="componentTransformers"></simply-render>
+      <simply-render rel="componentDataSources"></simply-render>
+      <simply-render rel="componentSorters"></simply-render>
+    </main>
+    </template>
     <template data-simply-template="Edit page frame">
       <main>
       <div class="simplycode-header">
@@ -3684,6 +4317,15 @@ <h1>Edit page frame</h1>
       <simply-render rel="componentPageFrame"></simply-render>
     </main>
     </template>
+    <template data-simply-template="Edit%20page%20frame">
+      <main>
+      <div class="simplycode-header">
+        <h1>Edit page frame</h1>
+      </div>
+      <simply-render rel="componentDescription"></simply-render>
+      <simply-render rel="componentPageFrame"></simply-render>
+    </main>
+    </template>
     <template data-simply-template="Pages">
       <main>
       <h1>Pages</h1>