diff --git a/www/api/data/components/header/componentTemplates/header.html b/www/api/data/components/header/componentTemplates/header.html
index 545f0c8..5ac3ce9 100644
--- a/www/api/data/components/header/componentTemplates/header.html
+++ b/www/api/data/components/header/componentTemplates/header.html
@@ -1,32 +1 @@
-<header class="simplycode-header">
-  <nav class="simply-toolbar">
-  	<div class="simply-toolbar-title">
-      <img src="/assets/img/simplycode-narrow.svg" title="SimplyCod">
-    </div>
-    <button class="ds-button simply-button" data-simply-command="save-all">
-      <svg class="ds-icon ds-icon-feather">
-        <use xlink:href="/assets/img/feather-sprite.svg#save">
-        </use></svg>
-      Save All
-    </button>
-    <span class="simply-push-right"></span>
-    <button class="ds-button simply-button" data-simply-command="search">
-      <svg class="ds-icon ds-icon-feather">
-        <use xlink:href="/assets/img/feather-sprite.svg#search">
-        </use></svg>
-      Search
-    </button>
-    <button class="ds-button simply-button" data-simply-command="preview">
-      <svg class="ds-icon ds-icon-feather">
-        <use xlink:href="/assets/img/feather-sprite.svg#eye">
-        </use></svg>
-      Preview
-    </button>
-    <button class="ds-button simply-button" data-simply-command="help">
-      <svg class="ds-icon ds-icon-feather">
-        <use xlink:href="/assets/img/feather-sprite.svg#help-circle">
-        </use></svg>
-      Help
-    </button>
-  </nav>
-</header>
+<simply-render rel="simplycode-toolbar"></simply-render>
\ No newline at end of file
diff --git a/www/api/data/components/simplycode-toolbar/componentTemplates/simplycode-toolbar.html b/www/api/data/components/simplycode-toolbar/componentTemplates/simplycode-toolbar.html
new file mode 100644
index 0000000..b17197d
--- /dev/null
+++ b/www/api/data/components/simplycode-toolbar/componentTemplates/simplycode-toolbar.html
@@ -0,0 +1,30 @@
+<nav class="simply-toolbar">
+  <div class="simply-toolbar-title">
+    <img src="/assets/img/simplycode-narrow.svg" title="SimplyCod">
+  </div>
+  <button class="ds-button simply-button" data-simply-command="save-all">
+    <svg class="ds-icon ds-icon-feather">
+      <use xlink:href="/assets/img/feather-sprite.svg#save">
+      </use></svg>
+    Save All
+  </button>
+  <span class="simply-push-right"></span>
+  <button class="ds-button simply-button" data-simply-command="search">
+    <svg class="ds-icon ds-icon-feather">
+      <use xlink:href="/assets/img/feather-sprite.svg#search">
+      </use></svg>
+    Search
+  </button>
+  <button class="ds-button simply-button" data-simply-command="preview">
+    <svg class="ds-icon ds-icon-feather">
+      <use xlink:href="/assets/img/feather-sprite.svg#eye">
+      </use></svg>
+    Preview
+  </button>
+  <button class="ds-button simply-button" data-simply-command="help">
+    <svg class="ds-icon ds-icon-feather">
+      <use xlink:href="/assets/img/feather-sprite.svg#help-circle">
+      </use></svg>
+    Help
+  </button>
+</nav>
\ No newline at end of file
diff --git a/www/api/data/components/simplycode-toolbar/meta.json b/www/api/data/components/simplycode-toolbar/meta.json
new file mode 100644
index 0000000..d57cc34
--- /dev/null
+++ b/www/api/data/components/simplycode-toolbar/meta.json
@@ -0,0 +1 @@
+{"id":"simplycode-toolbar","description":""}
\ No newline at end of file
diff --git a/www/api/data/generated.html b/www/api/data/generated.html
index 6769ef7..06046c4 100644
--- a/www/api/data/generated.html
+++ b/www/api/data/generated.html
@@ -5966,39 +5966,7 @@
     </details>
     </template>
     <template id="header">
-      <header class="simplycode-header">
-      <nav class="simply-toolbar">
-      	<div class="simply-toolbar-title">
-          <img src="/assets/img/simplycode-narrow.svg" title="SimplyCod">
-        </div>
-        <button class="ds-button simply-button" data-simply-command="save-all">
-          <svg class="ds-icon ds-icon-feather">
-            <use xlink:href="/assets/img/feather-sprite.svg#save">
-            </use></svg>
-          Save All
-        </button>
-        <span class="simply-push-right"></span>
-        <button class="ds-button simply-button" data-simply-command="search">
-          <svg class="ds-icon ds-icon-feather">
-            <use xlink:href="/assets/img/feather-sprite.svg#search">
-            </use></svg>
-          Search
-        </button>
-        <button class="ds-button simply-button" data-simply-command="preview">
-          <svg class="ds-icon ds-icon-feather">
-            <use xlink:href="/assets/img/feather-sprite.svg#eye">
-            </use></svg>
-          Preview
-        </button>
-        <button class="ds-button simply-button" data-simply-command="help">
-          <svg class="ds-icon ds-icon-feather">
-            <use xlink:href="/assets/img/feather-sprite.svg#help-circle">
-            </use></svg>
-          Help
-        </button>
-      </nav>
-    </header>
-    
+      <simply-render rel="simplycode-toolbar"></simply-render>
     </template>
     <template id="componentHtmlValidator">
       <div data-simply-field="code" data-simply-transformer="validateHtml"></div>
@@ -6057,8 +6025,40 @@
       </div>
     </div>
     </template>
+    <template id="simplycode-toolbar">
+      <nav class="simply-toolbar">
+      <div class="simply-toolbar-title">
+        <img src="/assets/img/simplycode-narrow.svg" title="SimplyCod">
+      </div>
+      <button class="ds-button simply-button" data-simply-command="save-all">
+        <svg class="ds-icon ds-icon-feather">
+          <use xlink:href="/assets/img/feather-sprite.svg#save">
+          </use></svg>
+        Save All
+      </button>
+      <span class="simply-push-right"></span>
+      <button class="ds-button simply-button" data-simply-command="search">
+        <svg class="ds-icon ds-icon-feather">
+          <use xlink:href="/assets/img/feather-sprite.svg#search">
+          </use></svg>
+        Search
+      </button>
+      <button class="ds-button simply-button" data-simply-command="preview">
+        <svg class="ds-icon ds-icon-feather">
+          <use xlink:href="/assets/img/feather-sprite.svg#eye">
+          </use></svg>
+        Preview
+      </button>
+      <button class="ds-button simply-button" data-simply-command="help">
+        <svg class="ds-icon ds-icon-feather">
+          <use xlink:href="/assets/img/feather-sprite.svg#help-circle">
+          </use></svg>
+        Help
+      </button>
+    </nav>
+    </template>
     <!-- /Component HTML templates -->
-    <header class="ds-nightmode" data-simply-path="/" data-simply-field="header" data-simply-content="template" data-simply-default-value="Header">
+    <header class="simplycode-header ds-nightmode" data-simply-path="/" data-simply-field="header" data-simply-content="template" data-simply-default-value="Header">
       <template data-simply-template='Header' rel="header"></template>
     </header>
     <nav>
diff --git a/www/api/data/page-frame/fullApp.html b/www/api/data/page-frame/fullApp.html
index ee5efb3..f9863d2 100644
--- a/www/api/data/page-frame/fullApp.html
+++ b/www/api/data/page-frame/fullApp.html
@@ -66,7 +66,7 @@
     <!-- Component HTML templates -->
     {{componentTemplates}}
     <!-- /Component HTML templates -->
-    <header class="ds-nightmode" data-simply-path="/" data-simply-field="header" data-simply-content="template" data-simply-default-value="Header">
+    <header class="simplycode-header ds-nightmode" data-simply-path="/" data-simply-field="header" data-simply-content="template" data-simply-default-value="Header">
       <template data-simply-template='Header' rel="header"></template>
     </header>
     <nav>
diff --git a/www/api/data/page-frame/pagePreview.html b/www/api/data/page-frame/pagePreview.html
index c958e05..a9114e9 100644
--- a/www/api/data/page-frame/pagePreview.html
+++ b/www/api/data/page-frame/pagePreview.html
@@ -31,7 +31,7 @@
     <!-- Component HTML templates -->
     {{componentTemplates}}
     <!-- /Component HTML templates -->
-    <header class="ds-nightmode" data-simply-path="/" data-simply-field="header" data-simply-content="template" data-simply-default-value="Header">
+    <header class="simplycode-header ds-nightmode" data-simply-path="/" data-simply-field="header" data-simply-content="template" data-simply-default-value="Header">
       <template data-simply-template='Header' rel="header"></template>
     </header>
     <nav>