diff --git a/www/api/data/components/1-styling/componentCss/ds-corrections.css b/www/api/data/components/1-styling/componentCss/ds-corrections.css
index 292de66..03d6ee3 100644
--- a/www/api/data/components/1-styling/componentCss/ds-corrections.css
+++ b/www/api/data/components/1-styling/componentCss/ds-corrections.css
@@ -3,7 +3,7 @@ main {
   margin-bottom: initial;
 }
 
-nav li {
+li {
   margin-left: initial;
 }
 a:link {
@@ -14,4 +14,9 @@ textarea {
 }
 :root {
   --simply-button-primary: var(--highlight-dark);
+  --ds-heading-font: var(--font-family);
+}
+
+.simply-toolbar-title {
+  width: 70px;
 }
\ No newline at end of file
diff --git a/www/api/data/components/header/componentTemplates/header.html b/www/api/data/components/header/componentTemplates/header.html
index 5ac3ce9..f603ffe 100644
--- a/www/api/data/components/header/componentTemplates/header.html
+++ b/www/api/data/components/header/componentTemplates/header.html
@@ -1 +1 @@
-<simply-render rel="simplycode-toolbar"></simply-render>
\ No newline at end of file
+<simply-render rel="simply-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/simply-toolbar/componentTemplates/simply-toolbar.html
similarity index 93%
rename from www/api/data/components/simplycode-toolbar/componentTemplates/simplycode-toolbar.html
rename to www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar.html
index b17197d..8035169 100644
--- a/www/api/data/components/simplycode-toolbar/componentTemplates/simplycode-toolbar.html
+++ b/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar.html
@@ -1,6 +1,6 @@
 <nav class="simply-toolbar">
   <div class="simply-toolbar-title">
-    <img src="/assets/img/simplycode-narrow.svg" title="SimplyCod">
+    <simply-render rel="logo"></simply-render>
   </div>
   <button class="ds-button simply-button" data-simply-command="save-all">
     <svg class="ds-icon ds-icon-feather">
diff --git a/www/api/data/components/simply-toolbar/meta.json b/www/api/data/components/simply-toolbar/meta.json
new file mode 100644
index 0000000..1aeab60
--- /dev/null
+++ b/www/api/data/components/simply-toolbar/meta.json
@@ -0,0 +1 @@
+{"id":"simply-toolbar","description":""}
\ 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
deleted file mode 100644
index d57cc34..0000000
--- a/www/api/data/components/simplycode-toolbar/meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{"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 06046c4..fc7314f 100644
--- a/www/api/data/generated.html
+++ b/www/api/data/generated.html
@@ -2470,7 +2470,7 @@
         margin-bottom: initial;
       }
       
-      nav li {
+      li {
         margin-left: initial;
       }
       a:link {
@@ -2481,6 +2481,11 @@
       }
       :root {
         --simply-button-primary: var(--highlight-dark);
+        --ds-heading-font: var(--font-family);
+      }
+      
+      .simply-toolbar-title {
+        width: 70px;
       }
       /* extra */
       @import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400i,700,700i');
@@ -3008,6 +3013,11 @@
         position: absolute;
         background-color: white;
       }
+      /* simply-logo */
+      :root {
+        --simply-logo-color-primary: var(--highlight-dark);
+        --simply-logo-color-secondary: white;
+      }
     </style>
     <!-- /Component CSS -->
     <!-- Page CSS -->
@@ -3030,7 +3040,15 @@
     </style>
     <!-- /Page CSS -->
     <!-- Head HTML -->
-    
+    <!-- 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 = {};
@@ -5966,7 +5984,7 @@
     </details>
     </template>
     <template id="header">
-      <simply-render rel="simplycode-toolbar"></simply-render>
+      <simply-render rel="simply-toolbar"></simply-render>
     </template>
     <template id="componentHtmlValidator">
       <div data-simply-field="code" data-simply-transformer="validateHtml"></div>
@@ -6025,10 +6043,40 @@
       </div>
     </div>
     </template>
-    <template id="simplycode-toolbar">
+    <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-toolbar">
       <nav class="simply-toolbar">
       <div class="simply-toolbar-title">
-        <img src="/assets/img/simplycode-narrow.svg" title="SimplyCod">
+        <simply-render rel="logo"></simply-render>
       </div>
       <button class="ds-button simply-button" data-simply-command="save-all">
         <svg class="ds-icon ds-icon-feather">