diff --git a/angular.json b/angular.json
index ab333cf..5cc0115 100644
--- a/angular.json
+++ b/angular.json
@@ -31,7 +31,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "src/themes/ddt-theme.scss"
             ],
             "scripts": []
           },
diff --git a/package.json b/package.json
index 2c758d3..d987758 100644
--- a/package.json
+++ b/package.json
@@ -11,10 +11,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~13.3.0",
+    "@angular/cdk": "^13.3.8",
     "@angular/common": "~13.3.0",
     "@angular/compiler": "~13.3.0",
     "@angular/core": "~13.3.0",
+    "@angular/flex-layout": "^13.0.0-beta.38",
     "@angular/forms": "~13.3.0",
+    "@angular/material": "^13.3.8",
     "@angular/platform-browser": "~13.3.0",
     "@angular/platform-browser-dynamic": "~13.3.0",
     "@angular/router": "~13.3.0",
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
deleted file mode 100644
index 907c131..0000000
--- a/src/app/app-routing.module.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class DdtAppRoutingModule { }
diff --git a/src/app/app.component.html b/src/app/app.component.html
deleted file mode 100644
index e11ca59..0000000
--- a/src/app/app.component.html
+++ /dev/null
@@ -1,484 +0,0 @@
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
-<!-- * * * * * * * to get started with your project! * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
-<style>
-  :host {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    font-size: 14px;
-    color: #333;
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 8px 0;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .spacer {
-    flex: 1;
-  }
-
-  .toolbar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    background-color: #1976d2;
-    color: white;
-    font-weight: 600;
-  }
-
-  .toolbar img {
-    margin: 0 16px;
-  }
-
-  .toolbar #twitter-logo {
-    height: 40px;
-    margin: 0 8px;
-  }
-
-  .toolbar #youtube-logo {
-    height: 40px;
-    margin: 0 16px;
-  }
-
-  .toolbar #twitter-logo:hover,
-  .toolbar #youtube-logo:hover {
-    opacity: 0.8;
-  }
-
-  .content {
-    display: flex;
-    margin: 82px auto 32px;
-    padding: 0 16px;
-    max-width: 960px;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  svg.material-icons {
-    height: 24px;
-    width: auto;
-  }
-
-  svg.material-icons:not(:last-child) {
-    margin-right: 8px;
-  }
-
-  .card svg.material-icons path {
-    fill: #888;
-  }
-
-  .card-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin-top: 16px;
-  }
-
-  .card {
-    all: unset;
-    border-radius: 4px;
-    border: 1px solid #eee;
-    background-color: #fafafa;
-    height: 40px;
-    width: 200px;
-    margin: 0 8px 16px;
-    padding: 16px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    transition: all 0.2s ease-in-out;
-    line-height: 24px;
-  }
-
-  .card-container .card:not(:last-child) {
-    margin-right: 0;
-  }
-
-  .card.card-small {
-    height: 16px;
-    width: 168px;
-  }
-
-  .card-container .card:not(.highlight-card) {
-    cursor: pointer;
-  }
-
-  .card-container .card:not(.highlight-card):hover {
-    transform: translateY(-3px);
-    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
-  }
-
-  .card-container .card:not(.highlight-card):hover .material-icons path {
-    fill: rgb(105, 103, 103);
-  }
-
-  .card.highlight-card {
-    background-color: #1976d2;
-    color: white;
-    font-weight: 600;
-    border: none;
-    width: auto;
-    min-width: 30%;
-    position: relative;
-  }
-
-  .card.card.highlight-card span {
-    margin-left: 60px;
-  }
-
-  svg#rocket {
-    width: 80px;
-    position: absolute;
-    left: -10px;
-    top: -24px;
-  }
-
-  svg#rocket-smoke {
-    height: calc(100vh - 95px);
-    position: absolute;
-    top: 10px;
-    right: 180px;
-    z-index: -10;
-  }
-
-  a,
-  a:visited,
-  a:hover {
-    color: #1976d2;
-    text-decoration: none;
-  }
-
-  a:hover {
-    color: #125699;
-  }
-
-  .terminal {
-    position: relative;
-    width: 80%;
-    max-width: 600px;
-    border-radius: 6px;
-    padding-top: 45px;
-    margin-top: 8px;
-    overflow: hidden;
-    background-color: rgb(15, 15, 16);
-  }
-
-  .terminal::before {
-    content: "\2022 \2022 \2022";
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 4px;
-    background: rgb(58, 58, 58);
-    color: #c2c3c4;
-    width: 100%;
-    font-size: 2rem;
-    line-height: 0;
-    padding: 14px 0;
-    text-indent: 4px;
-  }
-
-  .terminal pre {
-    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
-    color: white;
-    padding: 0 1rem 1rem;
-    margin: 0;
-  }
-
-  .circle-link {
-    height: 40px;
-    width: 40px;
-    border-radius: 40px;
-    margin: 8px;
-    background-color: white;
-    border: 1px solid #eeeeee;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    transition: 1s ease-out;
-  }
-
-  .circle-link:hover {
-    transform: translateY(-0.25rem);
-    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-  }
-
-  footer {
-    margin-top: 8px;
-    display: flex;
-    align-items: center;
-    line-height: 20px;
-  }
-
-  footer a {
-    display: flex;
-    align-items: center;
-  }
-
-  .github-star-badge {
-    color: #24292e;
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    padding: 3px 10px;
-    border: 1px solid rgba(27,31,35,.2);
-    border-radius: 3px;
-    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
-    margin-left: 4px;
-    font-weight: 600;
-  }
-
-  .github-star-badge:hover {
-    background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
-    border-color: rgba(27,31,35,.35);
-    background-position: -.5em;
-  }
-
-  .github-star-badge .material-icons {
-    height: 16px;
-    width: 16px;
-    margin-right: 4px;
-  }
-
-  svg#clouds {
-    position: fixed;
-    bottom: -160px;
-    left: -230px;
-    z-index: -10;
-    width: 1920px;
-  }
-
-  /* Responsive Styles */
-  @media screen and (max-width: 767px) {
-    .card-container > *:not(.circle-link) ,
-    .terminal {
-      width: 100%;
-    }
-
-    .card:not(.highlight-card) {
-      height: 16px;
-      margin: 8px 0;
-    }
-
-    .card.highlight-card span {
-      margin-left: 72px;
-    }
-
-    svg#rocket-smoke {
-      right: 120px;
-      transform: rotate(-5deg);
-    }
-  }
-
-  @media screen and (max-width: 575px) {
-    svg#rocket-smoke {
-      display: none;
-      visibility: hidden;
-    }
-  }
-</style>
-
-<!-- Toolbar -->
-<div class="toolbar" role="banner">
-  <img
-    width="40"
-    alt="Angular Logo"
-    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
-  />
-  <span>Welcome</span>
-    <div class="spacer"></div>
-    <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
-      <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
-        <rect width="400" height="400" fill="none"/>
-        <path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
-      </svg>
-    </a>
-    <a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
-      <svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
-        <path d="M0 0h24v24H0V0z" fill="none"/>
-        <path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
-      </svg>
-    </a>
-</div>
-
-<div class="content" role="main">
-
-  <!-- Highlight Card -->
-  <div class="card highlight-card card-small">
-
-    <svg id="rocket" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
-      <title>Rocket Ship</title>
-      <g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
-        <circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
-        <g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
-          <path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
-          <path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
-        </g>
-      </g>
-    </svg>
-
-    <span>{{ title }} app is running!</span>
-
-    <svg id="rocket-smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
-      <title>Rocket Ship Smoke</title>
-      <path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
-    </svg>
-
-  </div>
-
-  <!-- Resources -->
-  <h2>Resources</h2>
-  <p>Here are some links to help you get started:</p>
-
-  <div class="card-container">
-    <a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
-      <span>Learn Angular</span>
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>    </a>
-
-    <a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
-      <span>CLI Documentation</span>
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
-    </a>
-
-    <a class="card" target="_blank" rel="noopener" href="https://material.angular.io">
-      <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px" width="21.813" height="23.453" viewBox="0 0 21.813 23.453"><path d="M4099.584,972.736h0l-10.882,3.9,1.637,14.4,9.245,5.153,9.245-5.153,1.686-14.4Z" transform="translate(-4088.702 -972.736)" fill="#808080"/><path d="M4181.516,972.736v23.453l9.245-5.153,1.686-14.4Z" transform="translate(-4170.633 -972.736)" fill="#808080"/><path d="M4137.529,1076.127l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1058.315)" fill="#ffe0b2"/><path d="M4137.529,1051.705l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1036.757)" fill="#fff3e0"/><path d="M4137.529,1027.283l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1015.199)" fill="#fff"/></svg>
-      <span>Angular Material</span>
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
-    </a>
-
-    <a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
-      <span>Angular Blog</span>
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
-    </a>
-
-    <a class="card" target="_blank" rel="noopener" href="https://angular.io/devtools/">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M14.73,13.31C15.52,12.24,16,10.93,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.43,0,2.74-0.48,3.81-1.27L19.59,21L21,19.59L14.73,13.31z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5 S11.99,14,9.5,14z"/><polygon points="10.29,8.44 9.5,6 8.71,8.44 6.25,8.44 8.26,10.03 7.49,12.5 9.5,10.97 11.51,12.5 10.74,10.03 12.75,8.44"/></g></g></svg>
-      <span>Angular DevTools</span>
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
-    </a>
-
-  </div>
-
-  <!-- Next Steps -->
-  <h2>Next Steps</h2>
-  <p>What do you want to do next with your app?</p>
-
-  <input type="hidden" #selection>
-
-  <div class="card-container">
-    <button class="card card-small" (click)="selection.value = 'component'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>New Component</span>
-    </button>
-
-    <button class="card card-small" (click)="selection.value = 'material'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>Angular Material</span>
-    </button>
-
-    <button class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>Add PWA Support</span>
-    </button>
-
-    <button class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>Add Dependency</span>
-    </button>
-
-    <button class="card card-small" (click)="selection.value = 'test'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>Run and Watch Tests</span>
-    </button>
-
-    <button class="card card-small" (click)="selection.value = 'build'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>Build for Production</span>
-    </button>
-  </div>
-
-  <!-- Terminal -->
-  <div class="terminal" [ngSwitch]="selection.value">
-      <pre *ngSwitchDefault>ng generate component xyz</pre>
-      <pre *ngSwitchCase="'material'">ng add @angular/material</pre>
-      <pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
-      <pre *ngSwitchCase="'dependency'">ng add _____</pre>
-      <pre *ngSwitchCase="'test'">ng test</pre>
-      <pre *ngSwitchCase="'build'">ng build</pre>
-  </div>
-
-  <!-- Links -->
-  <div class="card-container">
-    <a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular" target="_blank" rel="noopener">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447" viewBox="0 0 24.607 23.447">
-        <title>Meetup Logo</title>
-        <path id="logo--mSwarm" d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z" transform="translate(0 0.123)" fill="#f64060"/>
-      </svg>
-    </a>
-
-    <a class="circle-link" title="Join the Conversation on Discord" href="https://discord.gg/angular" target="_blank" rel="noopener">
-      <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 245 240">
-        <title>Discord Logo</title>
-        <path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/>
-        <path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/>
-      </svg>
-    </a>
-  </div>
-
-  <!-- Footer -->
-  <footer>
-      Love Angular?&nbsp;
-      <a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
-        <div class="github-star-badge">
-            <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
-          Star
-        </div>
-      </a>
-      <a href="https://github.com/angular/angular" target="_blank" rel="noopener">
-        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
-      </a>
-  </footer>
-
-  <svg id="clouds" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
-    <title>Gray Clouds Background</title>
-    <path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
-  </svg>
-
-</div>
-
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
-<router-outlet></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
deleted file mode 100644
index b1c6c96..0000000
--- a/src/app/app.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
diff --git a/src/app/common/common.module.ts b/src/app/common/common.module.ts
new file mode 100644
index 0000000..659838e
--- /dev/null
+++ b/src/app/common/common.module.ts
@@ -0,0 +1,127 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterModule } from '@angular/router';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { HeaderComponent } from './component/header/header.component';
+
+
+
+@NgModule({
+  declarations: [
+    HeaderComponent
+  ],
+  imports: [
+    CommonModule,
+    MatBadgeModule,
+    MatSnackBarModule,
+    MatIconModule,
+    MatInputModule,
+    MatSelectModule,
+    MatProgressSpinnerModule,
+    MatCardModule,
+    MatButtonModule,
+    MatDividerModule,
+    MatSidenavModule,
+    MatListModule,
+    MatAutocompleteModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatMenuModule,
+    MatDialogModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatCheckboxModule,
+    MatStepperModule,
+    MatDatepickerModule,
+    MatButtonToggleModule,
+    // MatMomentDateModule,
+    MatProgressBarModule,
+    MatExpansionModule,
+    MatRadioModule,
+    MatTabsModule,
+    ScrollingModule,
+    MatSlideToggleModule,
+    DragDropModule,
+    MatChipsModule,
+    MatNativeDateModule,
+    FlexLayoutModule,
+    RouterModule,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+  exports: [
+    MatBadgeModule,
+    MatSnackBarModule,
+    MatIconModule,
+    MatInputModule,
+    MatSelectModule,
+    MatProgressSpinnerModule,
+    MatCardModule,
+    MatButtonModule,
+    MatDividerModule,
+    MatSidenavModule,
+    MatListModule,
+    MatAutocompleteModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatMenuModule,
+    MatDialogModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatCheckboxModule,
+    MatStepperModule,
+    MatDatepickerModule,
+    MatButtonToggleModule,
+    // MatMomentDateModule,
+    MatProgressBarModule,
+    MatExpansionModule,
+    MatRadioModule,
+    MatTabsModule,
+    ScrollingModule,
+    MatSlideToggleModule,
+    DragDropModule,
+    MatChipsModule,
+    MatNativeDateModule,
+    FlexLayoutModule,
+    RouterModule,
+    FormsModule,
+    ReactiveFormsModule,
+    HeaderComponent
+  ]
+})
+export class DdtCommonModule { }
diff --git a/src/app/common/component/header/header.component.html b/src/app/common/component/header/header.component.html
new file mode 100644
index 0000000..78097a3
--- /dev/null
+++ b/src/app/common/component/header/header.component.html
@@ -0,0 +1,13 @@
+<mat-toolbar>
+  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
+    <mat-icon>menu</mat-icon>
+  </button>
+  <span>My App</span>
+  <span class="spacer"></span>
+  <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
+    <mat-icon>favorite</mat-icon>
+  </button>
+  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
+    <mat-icon>share</mat-icon>
+  </button>
+</mat-toolbar>
diff --git a/src/app/app.component.scss b/src/app/common/component/header/header.component.scss
similarity index 100%
rename from src/app/app.component.scss
rename to src/app/common/component/header/header.component.scss
diff --git a/src/app/common/component/header/header.component.spec.ts b/src/app/common/component/header/header.component.spec.ts
new file mode 100644
index 0000000..381e8e8
--- /dev/null
+++ b/src/app/common/component/header/header.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/common/component/header/header.component.ts b/src/app/common/component/header/header.component.ts
new file mode 100644
index 0000000..b5b8246
--- /dev/null
+++ b/src/app/common/component/header/header.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ddt-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/ddt-app-routing.module.ts b/src/app/ddt-app-routing.module.ts
new file mode 100644
index 0000000..993f1d1
--- /dev/null
+++ b/src/app/ddt-app-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/onboard/startup', pathMatch:'full' },
+  { path: 'onboard', loadChildren: () => import('src/app/onboard/onboard.module').then(m => m.OnboardModule) },
+  { path: 'home', loadChildren: () => import('src/app/home/home.module').then(m => m.HomeModule) }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class DdtAppRoutingModule { }
diff --git a/src/app/ddt-app.component.html b/src/app/ddt-app.component.html
new file mode 100644
index 0000000..85b68ca
--- /dev/null
+++ b/src/app/ddt-app.component.html
@@ -0,0 +1,2 @@
+<ddt-header></ddt-header>
+<router-outlet class="root-container"></router-outlet>
diff --git a/src/app/ddt-app.component.scss b/src/app/ddt-app.component.scss
new file mode 100644
index 0000000..9f9fa22
--- /dev/null
+++ b/src/app/ddt-app.component.scss
@@ -0,0 +1,9 @@
+.root-container {
+  flex-direction: column;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  position: relative;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
diff --git a/src/app/app.component.spec.ts b/src/app/ddt-app.component.spec.ts
similarity index 76%
rename from src/app/app.component.spec.ts
rename to src/app/ddt-app.component.spec.ts
index 35a244d..d3f2fc7 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/ddt-app.component.spec.ts
@@ -1,6 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
+import { DdtAppComponent } from './ddt-app.component';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
@@ -9,25 +9,25 @@ describe('AppComponent', () => {
         RouterTestingModule
       ],
       declarations: [
-        AppComponent
+        DdtAppComponent
       ],
     }).compileComponents();
   });
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(DdtAppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
   it(`should have as title 'DevDesignerTools'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(DdtAppComponent);
     const app = fixture.componentInstance;
     expect(app.title).toEqual('DevDesignerTools');
   });
 
   it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(DdtAppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('.content span')?.textContent).toContain('DevDesignerTools app is running!');
diff --git a/src/app/app.component.ts b/src/app/ddt-app.component.ts
similarity index 50%
rename from src/app/app.component.ts
rename to src/app/ddt-app.component.ts
index 51cf776..3099490 100644
--- a/src/app/app.component.ts
+++ b/src/app/ddt-app.component.ts
@@ -2,9 +2,9 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ddt-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  templateUrl: './ddt-app.component.html',
+  styleUrls: ['./ddt-app.component.scss']
 })
-export class AppComponent {
+export class DdtAppComponent {
   title = 'DevDesignerTools';
 }
diff --git a/src/app/ddt-app.module.ts b/src/app/ddt-app.module.ts
new file mode 100644
index 0000000..d86db16
--- /dev/null
+++ b/src/app/ddt-app.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { DdtAppRoutingModule } from './ddt-app-routing.module';
+import { DdtAppComponent } from './ddt-app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { SharedModule } from './shared/shared.module';
+import { HttpClientModule } from '@angular/common/http';
+
+@NgModule({
+  declarations: [
+    DdtAppComponent
+  ],
+  imports: [
+    BrowserModule,
+    DdtAppRoutingModule,
+    BrowserAnimationsModule,
+    HttpClientModule,
+    SharedModule
+  ],
+  providers: [],
+  bootstrap: [DdtAppComponent]
+})
+export class DdtAppModule { }
diff --git a/src/app/home/component/dashboard/dashboard.component.html b/src/app/home/component/dashboard/dashboard.component.html
new file mode 100644
index 0000000..df9e4bf
--- /dev/null
+++ b/src/app/home/component/dashboard/dashboard.component.html
@@ -0,0 +1,24 @@
+<div class="grid-container">
+  <h1 class="mat-h1">Dashboard</h1>
+  <mat-grid-list cols="2" rowHeight="350px">
+    <mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
+      <mat-card class="dashboard-card">
+        <mat-card-header>
+          <mat-card-title>
+            {{card.title}}
+            <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
+              <mat-icon>more_vert</mat-icon>
+            </button>
+            <mat-menu #menu="matMenu" xPosition="before">
+              <button mat-menu-item>Expand</button>
+              <button mat-menu-item>Remove</button>
+            </mat-menu>
+          </mat-card-title>
+        </mat-card-header>
+        <mat-card-content class="dashboard-card-content">
+          <div>Card Content Here</div>
+        </mat-card-content>
+      </mat-card>
+    </mat-grid-tile>
+  </mat-grid-list>
+</div>
diff --git a/src/app/home/component/dashboard/dashboard.component.scss b/src/app/home/component/dashboard/dashboard.component.scss
new file mode 100644
index 0000000..49a8146
--- /dev/null
+++ b/src/app/home/component/dashboard/dashboard.component.scss
@@ -0,0 +1,21 @@
+.grid-container {
+  margin: 20px;
+}
+
+.dashboard-card {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  right: 15px;
+  bottom: 15px;
+}
+
+.more-button {
+  position: absolute;
+  top: 5px;
+  right: 10px;
+}
+
+.dashboard-card-content {
+  text-align: center;
+}
diff --git a/src/app/home/component/dashboard/dashboard.component.spec.ts b/src/app/home/component/dashboard/dashboard.component.spec.ts
new file mode 100644
index 0000000..e7a80c6
--- /dev/null
+++ b/src/app/home/component/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,40 @@
+import { LayoutModule } from '@angular/cdk/layout';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [DashboardComponent],
+      imports: [
+        NoopAnimationsModule,
+        LayoutModule,
+        MatButtonModule,
+        MatCardModule,
+        MatGridListModule,
+        MatIconModule,
+        MatMenuModule,
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/home/component/dashboard/dashboard.component.ts b/src/app/home/component/dashboard/dashboard.component.ts
new file mode 100644
index 0000000..820fb88
--- /dev/null
+++ b/src/app/home/component/dashboard/dashboard.component.ts
@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { map } from 'rxjs/operators';
+import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
+
+@Component({
+  selector: 'ddt-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent {
+  /** Based on the screen size, switch from standard to one column per row */
+  cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
+    map(({ matches }) => {
+      if (matches) {
+        return [
+          { title: 'Card 1', cols: 1, rows: 1 },
+          { title: 'Card 2', cols: 1, rows: 1 },
+          { title: 'Card 3', cols: 1, rows: 1 },
+          { title: 'Card 4', cols: 1, rows: 1 }
+        ];
+      }
+
+      return [
+        { title: 'Card 1', cols: 2, rows: 1 },
+        { title: 'Card 2', cols: 1, rows: 1 },
+        { title: 'Card 3', cols: 1, rows: 2 },
+        { title: 'Card 4', cols: 1, rows: 1 }
+      ];
+    })
+  );
+
+  constructor(private breakpointObserver: BreakpointObserver) {}
+}
diff --git a/src/app/home/home-routing.module.ts b/src/app/home/home-routing.module.ts
new file mode 100644
index 0000000..e9e87ee
--- /dev/null
+++ b/src/app/home/home-routing.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { DashboardComponent } from './component/dashboard/dashboard.component';
+
+const routes: Routes = [
+  {path:'', component: DashboardComponent}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HomeRoutingModule { }
diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts
new file mode 100644
index 0000000..ef80ce2
--- /dev/null
+++ b/src/app/home/home.module.ts
@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { HomeRoutingModule } from './home-routing.module';
+import { DashboardComponent } from './component/dashboard/dashboard.component';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatCardModule } from '@angular/material/card';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { LayoutModule } from '@angular/cdk/layout';
+
+
+@NgModule({
+  declarations: [DashboardComponent],
+  imports: [
+    CommonModule,
+    HomeRoutingModule,
+    MatGridListModule,
+    MatCardModule,
+    MatMenuModule,
+    MatIconModule,
+    MatButtonModule,
+    LayoutModule
+  ]
+})
+export class HomeModule { }
diff --git a/src/app/onboard/components/boarding-root/boarding-root.component.html b/src/app/onboard/components/boarding-root/boarding-root.component.html
new file mode 100644
index 0000000..0680b43
--- /dev/null
+++ b/src/app/onboard/components/boarding-root/boarding-root.component.html
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
diff --git a/src/app/onboard/components/boarding-root/boarding-root.component.scss b/src/app/onboard/components/boarding-root/boarding-root.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/onboard/components/boarding-root/boarding-root.component.spec.ts b/src/app/onboard/components/boarding-root/boarding-root.component.spec.ts
new file mode 100644
index 0000000..b60a471
--- /dev/null
+++ b/src/app/onboard/components/boarding-root/boarding-root.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BoardingRootComponent } from './boarding-root.component';
+
+describe('BoardingRootComponent', () => {
+  let component: BoardingRootComponent;
+  let fixture: ComponentFixture<BoardingRootComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BoardingRootComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BoardingRootComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/onboard/components/boarding-root/boarding-root.component.ts b/src/app/onboard/components/boarding-root/boarding-root.component.ts
new file mode 100644
index 0000000..6a2725b
--- /dev/null
+++ b/src/app/onboard/components/boarding-root/boarding-root.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ddt-boarding-root',
+  templateUrl: './boarding-root.component.html',
+  styleUrls: ['./boarding-root.component.scss']
+})
+export class BoardingRootComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/onboard/components/getting-started/getting-started.component.html b/src/app/onboard/components/getting-started/getting-started.component.html
new file mode 100644
index 0000000..842470a
--- /dev/null
+++ b/src/app/onboard/components/getting-started/getting-started.component.html
@@ -0,0 +1 @@
+<p>getting-started works!</p>
diff --git a/src/app/onboard/components/getting-started/getting-started.component.scss b/src/app/onboard/components/getting-started/getting-started.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/onboard/components/getting-started/getting-started.component.spec.ts b/src/app/onboard/components/getting-started/getting-started.component.spec.ts
new file mode 100644
index 0000000..8745475
--- /dev/null
+++ b/src/app/onboard/components/getting-started/getting-started.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GettingStartedComponent } from './getting-started.component';
+
+describe('GettingStartedComponent', () => {
+  let component: GettingStartedComponent;
+  let fixture: ComponentFixture<GettingStartedComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GettingStartedComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GettingStartedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/onboard/components/getting-started/getting-started.component.ts b/src/app/onboard/components/getting-started/getting-started.component.ts
new file mode 100644
index 0000000..c620f79
--- /dev/null
+++ b/src/app/onboard/components/getting-started/getting-started.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ddt-getting-started',
+  templateUrl: './getting-started.component.html',
+  styleUrls: ['./getting-started.component.scss']
+})
+export class GettingStartedComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/onboard/components/startup/startup.component.html b/src/app/onboard/components/startup/startup.component.html
new file mode 100644
index 0000000..0fa54d2
--- /dev/null
+++ b/src/app/onboard/components/startup/startup.component.html
@@ -0,0 +1,28 @@
+<div fxLayout="column" fxLayout.gt-sm="row" fxLayout.gt-sm="space-evenly center" fxLayoutAlign="center center"
+  fxLayoutGap="10px" class="height-100 width-100" fxFlex.gt-sm="100">
+
+  <img src="../assets/images/app-logo.png" alt="logo" ngClass="app-logo-mobile" [fxHide.gt-sm]="true" />
+  <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px">
+    <div [fxHide.gt-sm]="true" fxFlex="5"></div>
+    <div fxLayout="column" fxLayoutAlign.gt-sm="center start" fxLayoutAlign="center center" fxLayoutGap="10px"
+      fxFlex.gt-sm="70">
+      <div ngClass="mat-title col-red" ngClass.gt-sm="mat-headline col-red">periphex</div>
+      <div class="mat-display-3">Dev Designer Tools</div>
+      <div ngClass="mat-subheading-2 text-center" ngClass.gt-sm="mat-subheading-2">Reusable tested tools to build robust
+        Angular applications in quick time</div>
+      <button mat-raised-button color="primary" class="m-t-20 animation-slide-in-left"> <span class="mat-caption">GET
+          STARTED </span>
+        <mat-icon>arrow_forward</mat-icon>
+      </button>
+      <!-- Place this tag where you want the button to render. -->
+      <a class="github-button" href="https://github.com/aloketewary/DevDesignerTool"
+        data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" data-show-count="true"
+        aria-label="Star aloketewary/DevDesignerTool on GitHub">Star</a>
+    </div>
+    <div [fxHide.gt-sm]="true" fxFlex="5"></div>
+  </div>
+  <div class="m-l-5p">
+    <img src="../assets/images/app-logo.png" alt="logo" ngClass="app-logo-desktop" [fxHide.lt-md]="true" />
+  </div>
+
+</div>
diff --git a/src/app/onboard/components/startup/startup.component.scss b/src/app/onboard/components/startup/startup.component.scss
new file mode 100644
index 0000000..fc8ee38
--- /dev/null
+++ b/src/app/onboard/components/startup/startup.component.scss
@@ -0,0 +1,8 @@
+.app-logo {
+  &-mobile {
+    width: 190px;
+  }
+  &-desktop {
+    width: 250px;
+  }
+}
diff --git a/src/app/onboard/components/startup/startup.component.spec.ts b/src/app/onboard/components/startup/startup.component.spec.ts
new file mode 100644
index 0000000..0bd68a0
--- /dev/null
+++ b/src/app/onboard/components/startup/startup.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StartupComponent } from './startup.component';
+
+describe('StartupComponent', () => {
+  let component: StartupComponent;
+  let fixture: ComponentFixture<StartupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StartupComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StartupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/onboard/components/startup/startup.component.ts b/src/app/onboard/components/startup/startup.component.ts
new file mode 100644
index 0000000..2713671
--- /dev/null
+++ b/src/app/onboard/components/startup/startup.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ddt-startup',
+  templateUrl: './startup.component.html',
+  styleUrls: ['./startup.component.scss']
+})
+export class StartupComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/onboard/onboard-routing.module.ts b/src/app/onboard/onboard-routing.module.ts
new file mode 100644
index 0000000..1e664a2
--- /dev/null
+++ b/src/app/onboard/onboard-routing.module.ts
@@ -0,0 +1,18 @@
+import { BoardingRootComponent } from './components/boarding-root/boarding-root.component';
+import { StartupComponent } from './components/startup/startup.component';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '', component: BoardingRootComponent, children: [
+      { path: 'startup', component: StartupComponent }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class OnboardRoutingModule { }
diff --git a/src/app/onboard/onboard.module.ts b/src/app/onboard/onboard.module.ts
new file mode 100644
index 0000000..8aa8e42
--- /dev/null
+++ b/src/app/onboard/onboard.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { OnboardRoutingModule } from './onboard-routing.module';
+import { GettingStartedComponent } from './components/getting-started/getting-started.component';
+import { StartupComponent } from './components/startup/startup.component';
+import { SharedModule } from '../shared/shared.module';
+import { BoardingRootComponent } from './components/boarding-root/boarding-root.component';
+
+
+@NgModule({
+  declarations: [
+    GettingStartedComponent,
+    StartupComponent,
+    BoardingRootComponent
+  ],
+  imports: [
+    CommonModule,
+    OnboardRoutingModule,
+    SharedModule
+  ]
+})
+export class OnboardModule { }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
new file mode 100644
index 0000000..b0bc04c
--- /dev/null
+++ b/src/app/shared/shared.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DdtCommonModule } from '../common/common.module';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    DdtCommonModule
+  ],
+  exports: [
+    DdtCommonModule
+  ]
+})
+export class SharedModule {
+  constructor(iconReg: MatIconRegistry, sanitize: DomSanitizer) {
+    // iconReg.addSvgIconSet(sanitize.bypassSecurityTrustResourceUrl('../../assets/icons/mdi.svg'));
+    iconReg.addSvgIcon('ddt-logo', sanitize.bypassSecurityTrustResourceUrl('../../assets/icons/svg/logo.svg'));
+  }
+ }
diff --git a/src/assets/icons/svg/logo.svg b/src/assets/icons/svg/logo.svg
new file mode 100644
index 0000000..f64bc43
--- /dev/null
+++ b/src/assets/icons/svg/logo.svg
@@ -0,0 +1 @@
+<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0, 0, 400,400"><g id="svgg"><path id="path0" d="M129.979 25.500 C 134.283 32.634,130.489 41.227,122.255 42.992 C 119.081 43.673,124.103 46.104,128.701 46.112 C 140.759 46.135,144.395 29.610,133.462 24.471 C 132.443 23.992,130.984 23.600,130.221 23.600 L 128.833 23.600 129.979 25.500 M219.419 174.973 C 218.444 175.274,217.372 176.038,216.619 176.968 L 215.400 178.474 215.400 194.337 C 215.400 211.507,215.433 211.851,217.223 213.562 C 219.067 215.324,217.128 215.268,283.906 215.471 L 346.812 215.662 346.706 227.731 L 346.600 239.800 283.600 240.038 C 248.950 240.168,220.150 240.423,219.600 240.603 C 215.480 241.956,215.422 242.196,215.270 258.600 C 215.109 275.919,215.217 277.190,216.993 278.966 C 218.994 280.967,216.455 280.884,283.600 281.150 L 346.600 281.400 346.706 293.500 L 346.812 305.600 289.706 305.641 C 258.298 305.664,229.408 305.799,225.506 305.941 L 218.412 306.200 216.906 307.707 L 215.400 309.213 215.400 326.107 C 215.400 345.166,215.281 344.409,218.541 346.072 C 220.478 347.060,376.000 347.838,376.000 346.860 C 376.000 346.607,376.278 346.400,376.618 346.400 C 377.776 346.400,379.200 344.534,379.200 343.018 C 379.200 342.238,379.380 341.600,379.600 341.600 C 380.291 341.600,380.108 333.650,379.400 332.943 C 378.895 332.438,378.800 330.542,378.800 320.933 C 378.800 305.771,378.931 305.963,368.400 305.600 L 362.600 305.400 362.494 293.300 L 362.388 281.200 367.945 281.200 C 373.707 281.200,375.344 280.862,377.000 279.331 C 378.792 277.675,378.800 277.589,378.800 260.600 C 378.800 243.474,378.799 243.460,376.906 241.831 C 375.264 240.417,373.224 240.012,367.700 240.006 L 362.400 240.000 362.400 227.800 L 362.400 215.600 367.585 215.600 C 373.891 215.600,376.448 214.858,377.900 212.607 C 378.985 210.925,379.344 179.739,378.300 177.917 C 377.453 176.439,376.264 175.422,374.772 174.900 C 372.714 174.180,221.756 174.250,219.419 174.973 M267.898 189.415 C 272.782 191.456,273.319 197.412,268.846 199.926 C 266.467 201.263,236.388 201.294,234.018 199.962 C 231.732 198.677,231.038 197.159,231.156 193.700 C 231.207 192.198,233.717 189.382,235.268 189.086 C 238.145 188.538,266.483 188.824,267.898 189.415 M298.313 189.655 C 302.718 191.787,302.769 197.941,298.399 200.200 C 296.732 201.063,285.264 201.061,283.596 200.198 C 279.102 197.874,279.793 190.667,284.648 189.214 C 287.235 188.439,296.413 188.735,298.313 189.655 M360.308 189.791 C 363.953 191.995,364.002 197.441,360.400 199.900 L 359.082 200.800 336.800 200.800 L 314.518 200.800 313.194 199.900 C 309.300 197.253,309.524 191.868,313.618 189.703 L 315.375 188.774 337.187 188.887 C 358.104 188.995,359.054 189.032,360.308 189.791 M268.872 255.515 C 272.628 257.851,272.723 263.395,269.045 265.638 C 267.346 266.674,235.981 266.824,234.012 265.806 C 229.246 263.342,230.412 256.106,235.792 254.759 C 239.148 253.918,267.340 254.563,268.872 255.515 M298.400 255.324 C 302.033 257.101,302.745 261.591,299.869 264.593 L 298.137 266.400 291.160 266.400 L 284.182 266.400 282.701 265.179 C 278.698 261.880,280.194 256.102,285.400 254.749 C 287.659 254.163,296.856 254.569,298.400 255.324 M359.868 255.294 C 363.710 257.395,364.224 262.438,360.879 265.195 L 359.418 266.400 336.871 266.400 L 314.323 266.400 313.062 265.520 C 308.780 262.534,309.947 256.000,314.969 254.844 C 318.221 254.096,358.414 254.498,359.868 255.294 M268.846 321.274 C 272.647 323.410,272.895 328.360,269.336 331.076 L 267.864 332.200 253.232 332.328 C 245.184 332.399,237.640 332.339,236.467 332.196 C 230.338 331.445,229.009 323.450,234.600 320.965 C 236.959 319.916,266.911 320.187,268.846 321.274 M298.392 321.101 C 302.360 323.094,302.751 328.669,299.106 331.268 C 297.194 332.632,285.140 332.705,283.329 331.363 C 279.472 328.505,279.659 323.051,283.683 321.067 C 285.664 320.091,296.431 320.115,298.392 321.101 M359.847 321.049 C 363.978 323.009,364.188 328.432,360.246 331.375 C 358.930 332.358,318.138 332.899,314.720 331.979 C 309.520 330.578,308.845 323.452,313.687 321.065 C 315.682 320.082,357.779 320.068,359.847 321.049 " stroke="none" fill="#0594fa" fill-rule="evenodd"></path><path id="path1" d="M19.200 0.399 C 18.870 0.613,17.846 0.791,16.924 0.794 C 16.002 0.797,15.136 0.980,15.000 1.200 C 14.864 1.420,14.313 1.600,13.776 1.600 C 13.239 1.600,12.800 1.746,12.800 1.925 C 12.800 2.104,12.170 2.498,11.400 2.800 C 10.630 3.102,10.000 3.496,10.000 3.675 C 10.000 3.854,9.797 4.000,9.549 4.000 C 8.906 4.000,4.000 9.162,4.000 9.838 C 4.000 10.147,3.864 10.400,3.698 10.400 C 3.344 10.400,2.237 12.951,1.255 16.028 C 0.570 18.180,0.612 69.159,1.300 69.402 C 1.575 69.499,91.402 69.629,200.915 69.690 L 400.030 69.800 399.915 41.233 C 399.825 18.818,399.692 12.631,399.300 12.500 C 399.025 12.408,398.800 12.076,398.800 11.761 C 398.800 11.028,397.990 9.586,397.125 8.779 C 396.754 8.433,396.394 7.901,396.325 7.597 C 396.163 6.881,393.793 4.445,393.124 4.307 C 392.840 4.248,392.151 3.750,391.593 3.200 C 390.385 2.009,389.028 1.200,388.239 1.200 C 387.924 1.200,387.592 0.975,387.500 0.700 C 387.288 0.064,20.179 -0.236,19.200 0.399 M86.250 23.024 C 91.430 24.146,95.600 29.319,95.600 34.625 C 95.600 36.867,94.844 40.000,94.303 40.000 C 94.136 40.000,94.000 40.288,94.000 40.640 C 94.000 40.991,93.115 42.146,92.033 43.205 C 85.774 49.334,76.360 47.857,72.853 40.194 C 72.553 39.537,72.148 38.687,71.953 38.305 C 71.759 37.923,71.600 36.346,71.600 34.800 C 71.600 33.254,71.759 31.677,71.953 31.295 C 72.148 30.913,72.549 30.060,72.846 29.400 C 74.054 26.709,78.448 23.230,80.712 23.172 C 81.310 23.156,82.160 22.983,82.600 22.786 C 83.040 22.590,83.783 22.507,84.250 22.602 C 84.718 22.697,85.618 22.887,86.250 23.024 M43.709 24.256 C 52.118 28.605,52.127 41.070,43.724 45.324 C 33.907 50.293,23.351 39.780,28.072 29.735 C 30.653 24.246,38.424 21.523,43.709 24.256 M133.554 24.514 C 141.761 28.372,142.187 39.887,134.301 44.712 C 130.595 46.979,124.180 46.630,121.830 44.033 C 121.415 43.575,120.858 43.200,120.591 43.200 C 120.324 43.200,119.667 42.525,119.130 41.700 C 112.417 31.387,122.533 19.334,133.554 24.514 M43.000 97.021 C 41.521 97.780,23.985 115.164,22.370 117.472 C 20.938 119.519,20.766 122.267,21.966 123.952 C 22.946 125.329,41.073 143.448,42.400 144.378 C 46.852 147.497,52.627 143.412,51.110 138.216 C 50.733 136.926,49.066 135.006,42.841 128.692 L 35.043 120.783 42.884 112.892 C 52.002 103.714,52.430 103.001,50.760 99.759 C 49.201 96.732,45.860 95.553,43.000 97.021 M73.702 97.058 C 71.951 97.921,71.310 99.079,68.199 107.000 C 66.730 110.740,65.377 114.160,65.193 114.600 C 63.723 118.110,56.572 136.569,56.144 137.961 C 54.259 144.084,61.912 148.233,65.982 143.295 C 66.652 142.482,67.200 141.643,67.200 141.430 C 67.200 141.136,77.031 115.861,79.231 110.500 C 79.709 109.334,80.310 107.831,80.750 106.700 C 80.943 106.205,81.303 105.297,81.550 104.681 C 83.632 99.503,78.619 94.634,73.702 97.058 M88.163 97.029 C 86.644 97.778,85.200 100.238,85.200 102.076 C 85.200 104.210,86.922 106.415,94.356 113.796 C 98.120 117.533,101.200 120.775,101.200 121.000 C 101.200 121.224,97.858 124.736,93.773 128.804 C 83.987 138.549,82.940 141.134,87.494 144.308 C 91.427 147.048,92.288 146.573,103.553 135.439 C 119.112 120.061,119.073 121.984,104.130 107.125 C 92.839 95.895,91.796 95.236,88.163 97.029 M130.360 114.853 C 126.015 117.374,126.804 123.825,131.627 125.208 C 134.727 126.097,154.451 125.692,156.386 124.700 C 160.394 122.644,160.636 117.443,156.841 114.908 C 154.808 113.550,132.687 113.504,130.360 114.853 M174.359 114.908 C 170.411 117.545,170.955 123.333,175.305 124.979 C 178.246 126.092,305.247 125.727,307.155 124.600 C 310.885 122.397,310.857 117.086,307.104 114.798 C 305.817 114.013,304.954 114.003,240.759 114.001 L 175.718 114.000 174.359 114.908 M131.940 140.683 C 126.074 141.584,126.215 150.945,132.107 151.798 C 135.778 152.330,178.550 151.833,179.427 151.249 C 183.708 148.399,182.360 141.492,177.362 140.667 C 175.701 140.392,133.735 140.407,131.940 140.683 M195.392 140.756 C 189.339 142.285,189.569 150.890,195.687 151.802 C 199.698 152.400,216.135 151.844,217.272 151.072 C 220.785 148.688,220.657 143.261,217.041 141.280 C 215.690 140.540,197.948 140.111,195.392 140.756 M232.271 140.683 C 227.576 141.415,226.493 149.002,230.758 151.284 C 232.505 152.219,286.678 152.019,288.072 151.072 C 291.580 148.691,291.474 144.134,287.846 141.425 C 286.796 140.640,236.820 139.973,232.271 140.683 M27.322 170.382 C 23.524 172.698,23.635 178.332,27.518 180.263 C 29.853 181.424,71.001 181.396,73.347 180.232 C 77.281 178.279,77.500 172.836,73.743 170.359 C 71.938 169.169,29.277 169.190,27.322 170.382 M89.255 171.145 C 85.765 174.635,87.308 179.765,92.160 180.808 C 96.435 181.727,165.113 181.150,166.963 180.180 C 170.738 178.200,171.016 172.910,167.473 170.500 L 166.150 169.600 128.475 169.600 L 90.800 169.600 89.255 171.145 M219.494 174.531 C 217.929 175.018,215.600 176.929,215.600 177.725 C 215.600 177.977,216.127 177.543,216.771 176.762 C 217.667 175.674,218.440 175.227,220.071 174.850 C 222.529 174.283,373.425 174.360,375.200 174.929 L 376.200 175.250 375.200 174.639 C 373.883 173.835,222.067 173.729,219.494 174.531 M215.052 179.300 C 214.065 182.982,214.937 211.943,216.055 212.634 C 216.289 212.778,216.237 212.470,215.940 211.948 C 215.511 211.195,215.400 207.648,215.400 194.700 C 215.400 185.735,215.376 178.400,215.347 178.400 C 215.317 178.400,215.185 178.805,215.052 179.300 M378.981 194.800 C 378.981 203.050,379.034 206.425,379.099 202.300 C 379.164 198.175,379.164 191.425,379.099 187.300 C 379.034 183.175,378.981 186.550,378.981 194.800 M28.558 195.217 C 24.190 196.538,23.205 202.637,26.931 205.295 C 28.716 206.568,47.641 206.908,49.992 205.710 C 53.973 203.680,54.244 198.286,50.493 195.741 C 49.254 194.901,31.043 194.465,28.558 195.217 M67.042 195.209 C 62.209 196.683,61.607 203.571,66.132 205.625 C 68.335 206.625,120.208 206.834,122.513 205.852 C 126.696 204.069,127.244 198.598,123.506 195.932 L 122.200 195.000 95.200 194.928 C 80.350 194.888,67.679 195.014,67.042 195.209 M140.800 195.209 C 137.161 196.058,135.472 201.160,137.881 204.024 C 139.624 206.094,140.873 206.400,147.600 206.400 C 154.327 206.400,155.576 206.094,157.319 204.024 C 159.911 200.942,157.846 195.741,153.762 195.067 C 151.605 194.710,142.508 194.810,140.800 195.209 M170.671 195.089 C 165.323 195.892,165.049 204.456,170.321 206.019 C 173.190 206.869,193.587 206.355,194.894 205.400 C 198.794 202.549,197.815 196.475,193.251 195.207 C 191.868 194.823,173.097 194.725,170.671 195.089 M219.481 215.260 C 219.876 215.416,222.720 215.532,225.800 215.517 C 232.575 215.486,231.827 215.283,224.281 215.105 C 221.245 215.034,219.085 215.104,219.481 215.260 M373.800 215.200 C 373.029 215.531,373.031 215.545,373.876 215.572 C 374.358 215.587,374.864 215.420,375.000 215.200 C 375.292 214.727,374.901 214.727,373.800 215.200 M29.000 220.372 C 24.199 221.534,22.957 227.660,26.945 230.505 C 28.899 231.899,62.677 231.915,64.629 230.524 C 68.575 227.708,67.329 221.480,62.600 220.388 C 60.733 219.958,30.774 219.943,29.000 220.372 M78.889 220.280 C 74.216 220.893,72.711 227.951,76.680 230.641 C 77.828 231.419,116.806 232.078,121.493 231.399 C 126.328 230.698,127.780 224.596,123.863 221.439 L 122.327 220.200 101.263 220.154 C 89.678 220.129,79.610 220.186,78.889 220.280 M139.888 220.288 C 135.260 220.986,133.937 227.964,137.920 230.667 C 139.596 231.804,195.604 231.804,197.280 230.667 C 201.474 227.821,199.964 221.093,194.946 220.264 C 193.276 219.988,141.726 220.010,139.888 220.288 M225.136 239.972 C 218.091 240.228,216.490 240.892,215.359 244.021 C 214.818 245.518,214.607 275.172,215.128 276.486 C 215.278 276.863,215.400 269.933,215.400 261.086 C 215.400 239.756,214.965 240.689,225.000 240.468 C 228.300 240.395,231.171 240.170,231.380 239.968 C 231.589 239.765,231.679 239.632,231.580 239.672 C 231.481 239.712,228.581 239.847,225.136 239.972 M368.000 240.008 C 371.190 240.145,374.250 240.391,374.800 240.554 L 375.800 240.850 374.800 240.239 C 374.010 239.756,372.584 239.642,368.000 239.693 L 362.200 239.758 368.000 240.008 M378.981 260.600 C 378.981 268.960,379.034 272.437,379.099 268.326 C 379.164 264.216,379.164 257.376,379.100 253.126 C 379.035 248.877,378.982 252.240,378.981 260.600 M215.602 277.825 C 215.600 278.346,217.482 280.139,218.674 280.751 C 219.221 281.032,221.685 281.173,225.274 281.128 L 231.000 281.057 224.961 280.828 C 218.619 280.589,218.310 280.501,216.502 278.429 C 216.008 277.863,215.603 277.591,215.602 277.825 M362.528 294.000 L 362.600 305.400 368.300 305.511 L 374.000 305.622 374.000 294.611 L 374.000 283.600 368.433 283.600 C 364.356 283.600,362.812 283.466,362.662 283.100 C 362.549 282.825,362.489 287.730,362.528 294.000 M115.900 283.501 L 0.000 283.601 0.003 299.901 C 0.007 316.109,0.194 320.574,0.855 320.166 C 1.045 320.049,1.200 320.424,1.200 321.000 C 1.200 321.596,1.372 321.941,1.600 321.800 C 1.820 321.664,2.000 321.833,2.000 322.176 C 2.000 322.519,2.180 322.800,2.400 322.800 C 2.620 322.800,2.800 323.084,2.800 323.431 C 2.800 323.779,3.512 324.747,4.382 325.583 C 5.252 326.419,5.852 327.215,5.715 327.351 C 5.579 327.488,5.812 327.603,6.233 327.606 C 6.875 327.611,6.902 327.676,6.400 328.000 C 5.904 328.320,5.941 328.389,6.612 328.394 C 7.058 328.397,7.683 328.760,8.000 329.200 C 8.317 329.640,8.897 330.000,9.288 330.000 C 9.680 330.000,10.000 330.180,10.000 330.400 C 10.000 330.620,10.281 330.800,10.624 330.800 C 10.967 330.800,11.136 330.980,11.000 331.200 C 10.859 331.428,11.204 331.600,11.800 331.600 C 12.376 331.600,12.759 331.743,12.651 331.917 C 12.544 332.091,12.758 332.269,13.128 332.311 C 14.216 332.436,14.973 332.608,15.400 332.830 C 15.620 332.944,56.120 332.892,105.400 332.714 C 154.680 332.536,199.535 332.438,205.079 332.495 L 215.157 332.600 215.279 320.906 L 215.400 309.212 216.906 307.706 L 218.412 306.200 224.973 306.000 C 228.582 305.890,231.643 305.692,231.774 305.560 C 231.905 305.428,231.965 300.388,231.906 294.360 L 231.800 283.400 115.900 283.501 M114.876 366.624 C 114.588 366.950,114.194 367.120,114.002 367.001 C 113.646 366.781,111.095 368.060,110.000 369.007 C 109.670 369.292,108.545 370.359,107.500 371.378 C 105.770 373.065,105.525 373.445,105.636 374.264 C 105.656 374.409,105.386 374.688,105.036 374.884 C 104.686 375.080,104.400 375.580,104.400 375.996 C 104.400 376.412,104.220 376.864,104.000 377.000 C 103.780 377.136,103.600 377.867,103.600 378.624 C 103.600 379.381,103.420 380.000,103.200 380.000 C 102.358 380.000,102.700 395.644,103.582 397.469 C 104.898 400.192,98.556 400.017,191.800 399.904 L 277.000 399.800 277.130 392.200 C 277.259 384.685,276.657 376.800,275.955 376.800 C 275.760 376.800,275.600 376.440,275.600 376.000 C 275.600 375.560,275.420 375.200,275.200 375.200 C 274.980 375.200,274.800 374.940,274.800 374.622 C 274.800 373.712,271.063 370.296,268.933 369.260 C 267.870 368.742,266.687 368.157,266.305 367.960 C 265.923 367.762,265.113 367.599,264.505 367.597 C 263.897 367.596,262.860 367.237,262.200 366.800 C 260.712 365.814,257.049 365.693,256.143 366.600 C 255.615 367.128,248.818 367.200,199.820 367.200 C 150.777 367.200,144.038 367.128,143.600 366.600 C 142.858 365.706,115.666 365.729,114.876 366.624 " stroke="none" fill="#989796" fill-rule="evenodd"></path><path id="path2" d="M8.813 2.691 C 8.289 3.282,8.303 3.323,8.946 3.076 C 9.342 2.924,9.741 2.800,9.833 2.800 C 9.925 2.800,10.000 2.620,10.000 2.400 C 10.000 1.812,9.481 1.939,8.813 2.691 M5.449 5.414 C 4.432 6.431,3.600 7.453,3.600 7.685 C 3.600 7.916,3.285 8.397,2.900 8.753 C 1.449 10.094,0.340 12.928,0.222 15.597 C 0.158 17.028,0.182 17.345,0.274 16.300 C 0.366 15.255,0.612 14.400,0.821 14.400 C 1.029 14.400,1.200 13.950,1.200 13.400 C 1.200 12.850,1.380 12.400,1.600 12.400 C 1.820 12.400,2.000 12.040,2.000 11.600 C 2.000 11.160,2.180 10.800,2.400 10.800 C 2.620 10.800,2.800 10.480,2.800 10.088 C 2.800 9.697,3.160 9.117,3.600 8.800 C 4.040 8.483,4.400 7.979,4.400 7.680 C 4.400 7.382,5.142 6.424,6.050 5.552 C 6.957 4.680,7.610 3.876,7.499 3.766 C 7.389 3.655,6.466 4.397,5.449 5.414 M82.400 23.476 C 80.174 23.712,77.588 24.932,75.786 26.598 C 71.259 30.781,70.987 37.970,75.185 42.476 C 77.333 44.781,84.218 40.470,86.001 35.705 C 87.385 32.007,86.588 26.580,84.366 24.569 C 83.591 23.868,83.586 23.814,84.274 23.543 C 85.055 23.235,84.776 23.225,82.400 23.476 M0.000 176.357 L 0.000 282.800 115.600 282.800 C 218.089 282.800,231.200 282.732,231.200 282.200 C 231.200 281.693,230.266 281.600,225.191 281.600 C 214.508 281.600,214.641 281.851,214.481 261.400 C 214.312 239.730,214.377 239.600,225.412 239.600 L 231.200 239.600 231.200 227.800 L 231.200 216.000 225.649 216.000 C 214.369 216.000,214.307 215.878,214.479 194.000 C 214.615 176.700,214.554 177.063,217.681 174.994 L 219.183 174.000 296.791 174.000 L 374.400 174.000 374.400 122.200 L 374.400 70.400 187.833 70.400 C 85.221 70.400,0.981 70.291,0.633 70.157 C 0.057 69.936,0.000 79.460,0.000 176.357 M49.793 97.731 C 53.826 101.596,52.913 103.735,43.019 113.596 C 39.159 117.443,36.000 120.775,36.000 121.000 C 36.000 121.225,39.252 124.646,43.227 128.604 C 52.656 137.993,53.688 140.312,50.055 143.945 C 45.908 148.092,44.542 147.423,32.281 135.247 C 21.109 124.153,20.800 123.756,20.800 120.471 L 20.800 118.264 31.100 107.886 C 44.476 94.407,45.655 93.767,49.793 97.731 M79.863 97.021 C 83.308 99.649,83.260 101.902,79.562 111.100 C 79.363 111.595,79.020 112.450,78.800 113.000 C 78.580 113.550,78.220 114.450,78.000 115.000 C 77.780 115.550,77.420 116.450,77.200 117.000 C 76.980 117.550,76.620 118.450,76.400 119.000 C 76.180 119.550,75.844 120.405,75.654 120.900 C 75.463 121.395,75.127 122.250,74.907 122.800 C 74.687 123.350,74.327 124.250,74.107 124.800 C 73.726 125.753,73.248 126.918,72.427 128.900 C 72.222 129.395,70.917 132.762,69.527 136.382 C 67.694 141.158,66.654 143.312,65.738 144.231 C 61.332 148.652,53.331 143.488,55.650 137.719 C 55.897 137.103,56.257 136.195,56.450 135.700 C 57.594 132.759,58.461 130.664,58.847 129.905 C 59.041 129.523,59.200 129.026,59.200 128.801 C 59.200 128.576,59.539 127.628,59.954 126.696 C 60.369 125.763,61.109 123.920,61.600 122.600 C 62.090 121.280,62.759 119.593,63.087 118.851 C 63.415 118.109,63.831 117.029,64.010 116.451 C 64.664 114.343,69.670 101.745,70.626 99.800 C 72.473 96.043,76.853 94.725,79.863 97.021 M94.138 96.862 C 95.957 98.103,114.273 116.572,115.209 118.108 C 116.296 119.891,116.236 122.346,115.064 124.044 C 113.889 125.748,96.745 143.003,94.640 144.602 C 90.511 147.737,84.800 144.915,84.800 139.739 C 84.800 137.311,85.390 136.517,92.356 129.580 C 95.570 126.379,98.811 123.103,99.558 122.301 L 100.916 120.843 93.790 113.721 C 85.398 105.335,84.799 104.557,84.801 102.044 C 84.805 97.275,90.288 94.232,94.138 96.862 M155.347 113.864 C 159.087 114.482,161.702 120.591,159.171 122.800 C 159.045 122.910,158.842 123.270,158.721 123.600 C 157.897 125.843,135.222 127.400,130.919 125.508 C 125.913 123.308,125.917 115.490,130.925 114.041 C 132.372 113.623,152.980 113.473,155.347 113.864 M307.540 114.465 C 311.530 117.291,311.279 122.928,307.062 125.179 C 305.529 125.997,305.310 126.000,240.800 126.000 L 176.076 126.000 174.402 125.107 C 169.785 122.642,170.398 114.830,175.283 113.882 C 178.460 113.266,306.644 113.831,307.540 114.465 M179.906 141.132 C 183.688 143.829,183.300 149.680,179.199 151.800 C 177.460 152.700,132.140 152.700,130.401 151.800 C 127.888 150.501,125.531 143.600,127.600 143.600 C 127.820 143.600,128.000 143.339,128.000 143.020 C 128.000 142.206,130.366 140.502,131.800 140.284 C 132.460 140.184,143.260 140.124,155.800 140.151 L 178.600 140.200 179.906 141.132 M217.732 141.321 C 221.458 144.164,221.190 149.310,217.198 151.553 C 214.916 152.836,195.924 152.859,193.654 151.581 C 189.698 149.355,189.258 144.909,192.679 141.724 C 194.410 140.111,194.611 140.088,206.432 140.149 L 216.264 140.200 217.732 141.321 M288.110 140.953 C 292.212 143.733,291.895 149.573,287.520 151.840 C 285.859 152.701,232.480 152.669,230.812 151.806 C 225.931 149.282,226.872 140.966,232.116 140.280 C 237.036 139.637,287.055 140.237,288.110 140.953 M71.175 169.068 C 77.334 169.807,79.034 177.961,73.600 180.696 C 71.926 181.538,31.495 182.020,28.781 181.230 C 24.761 180.059,22.717 175.360,24.881 172.262 C 26.509 169.931,27.183 169.510,30.000 169.066 C 31.735 168.793,68.897 168.795,71.175 169.068 M164.417 169.065 C 170.905 169.743,172.846 177.855,167.200 180.696 C 164.798 181.904,93.028 181.976,90.542 180.772 C 84.973 178.076,85.940 170.384,92.000 169.172 C 93.797 168.813,161.053 168.713,164.417 169.065 M49.651 194.967 C 55.335 197.357,54.636 205.048,48.590 206.641 C 45.918 207.344,31.926 207.388,29.306 206.700 C 23.322 205.130,22.083 197.799,27.367 195.233 C 29.500 194.197,47.315 193.985,49.651 194.967 M123.415 195.388 C 128.690 198.479,127.194 205.367,120.953 206.722 C 118.290 207.301,69.723 207.202,67.235 206.613 C 61.806 205.329,60.893 198.099,65.808 195.315 L 67.400 194.413 94.565 194.407 L 121.730 194.400 123.415 195.388 M155.600 195.256 C 160.519 198.254,159.734 205.395,154.353 206.596 C 149.860 207.598,142.131 207.221,139.247 205.859 C 135.203 203.948,135.264 197.846,139.351 195.396 C 141.726 193.972,153.330 193.873,155.600 195.256 M194.592 195.315 C 199.621 198.163,198.647 205.084,193.000 206.625 C 191.425 207.055,172.151 207.050,170.600 206.620 C 165.152 205.107,164.180 198.271,169.000 195.370 C 171.422 193.913,192.038 193.868,194.592 195.315 M362.800 227.800 L 362.800 239.600 368.600 239.600 L 374.400 239.600 374.400 227.800 L 374.400 216.000 368.600 216.000 L 362.800 216.000 362.800 227.800 M64.974 220.953 C 68.666 223.770,68.192 229.420,64.094 231.457 C 62.200 232.399,33.502 232.835,29.600 231.982 C 23.703 230.693,22.080 225.414,26.324 221.324 C 28.074 219.637,27.360 219.693,46.632 219.750 L 63.463 219.800 64.974 220.953 M123.716 220.557 C 128.456 223.770,127.098 230.523,121.425 231.952 C 118.443 232.703,81.093 232.563,78.494 231.791 C 72.578 230.034,72.405 220.803,78.271 219.881 C 82.396 219.233,122.646 219.831,123.716 220.557 M195.362 219.867 C 200.022 220.637,201.843 226.596,198.491 230.109 C 196.339 232.364,195.860 232.400,167.600 232.400 C 139.340 232.400,138.861 232.364,136.709 230.109 C 133.419 226.660,135.110 220.742,139.629 219.892 C 141.164 219.603,193.624 219.580,195.362 219.867 M362.800 282.200 C 362.800 282.706,363.711 282.800,368.600 282.800 C 373.489 282.800,374.400 282.706,374.400 282.200 C 374.400 281.694,373.489 281.600,368.600 281.600 C 363.711 281.600,362.800 281.694,362.800 282.200 " stroke="none" fill="#fbdb6c" fill-rule="evenodd"></path><path id="path3" d="M123.800 24.151 C 117.024 27.346,114.934 35.256,119.152 41.734 C 120.129 43.233,120.192 43.262,121.963 42.996 C 130.330 41.742,134.322 32.812,129.874 25.300 C 128.397 22.805,127.153 22.570,123.800 24.151 M235.268 189.086 C 230.538 189.988,229.672 197.520,234.018 199.962 C 236.388 201.294,266.467 201.263,268.846 199.926 C 273.319 197.412,272.782 191.456,267.898 189.415 C 266.483 188.824,238.145 188.538,235.268 189.086 M284.648 189.214 C 279.793 190.667,279.102 197.874,283.596 200.198 C 285.264 201.061,296.732 201.063,298.399 200.200 C 302.769 197.941,302.718 191.787,298.313 189.655 C 296.413 188.735,287.235 188.439,284.648 189.214 M313.618 189.703 C 309.524 191.868,309.300 197.253,313.194 199.900 L 314.518 200.800 336.800 200.800 L 359.082 200.800 360.400 199.900 C 363.059 198.085,363.827 195.148,362.408 192.218 C 360.790 188.875,361.850 189.015,337.187 188.887 L 315.375 188.774 313.618 189.703 M231.500 215.621 C 232.116 216.285,232.230 239.210,231.620 239.820 C 231.380 240.060,252.490 240.126,288.920 240.000 L 346.600 239.800 346.706 227.700 L 346.812 215.600 289.639 215.600 C 258.193 215.600,232.136 215.484,231.733 215.341 C 231.133 215.129,231.091 215.180,231.500 215.621 M235.792 254.759 C 230.412 256.106,229.246 263.342,234.012 265.806 C 235.981 266.824,267.346 266.674,269.045 265.638 C 272.723 263.395,272.628 257.851,268.872 255.515 C 267.340 254.563,239.148 253.918,235.792 254.759 M285.400 254.749 C 280.194 256.102,278.698 261.880,282.701 265.179 L 284.182 266.400 291.160 266.400 L 298.137 266.400 299.869 264.593 C 302.745 261.591,302.033 257.101,298.400 255.324 C 296.856 254.569,287.659 254.163,285.400 254.749 M314.969 254.844 C 309.947 256.000,308.780 262.534,313.062 265.520 L 314.323 266.400 336.871 266.400 L 359.418 266.400 360.879 265.195 C 364.224 262.438,363.710 257.395,359.868 255.294 C 358.414 254.498,318.221 254.096,314.969 254.844 M231.854 282.299 C 231.899 282.904,231.950 288.395,231.968 294.500 L 232.000 305.600 289.406 305.600 L 346.812 305.600 346.706 293.500 L 346.600 281.400 289.187 281.299 L 231.773 281.197 231.854 282.299 M234.600 320.965 C 229.009 323.450,230.338 331.445,236.467 332.196 C 237.640 332.339,245.184 332.399,253.232 332.328 L 267.864 332.200 269.336 331.076 C 272.895 328.360,272.647 323.410,268.846 321.274 C 266.911 320.187,236.959 319.916,234.600 320.965 M283.683 321.067 C 279.659 323.051,279.472 328.505,283.329 331.363 C 285.140 332.705,297.194 332.632,299.106 331.268 C 302.751 328.669,302.360 323.094,298.392 321.101 C 296.431 320.115,285.664 320.091,283.683 321.067 M313.687 321.065 C 308.845 323.452,309.520 330.578,314.720 331.979 C 318.138 332.899,358.930 332.358,360.246 331.375 C 364.188 328.432,363.978 323.009,359.847 321.049 C 357.779 320.068,315.682 320.082,313.687 321.065 " stroke="none" fill="#95def1" fill-rule="evenodd"></path><path id="path4" d="M84.347 24.544 C 89.703 30.245,85.958 40.788,77.853 42.829 C 74.370 43.705,78.616 46.130,83.608 46.115 C 89.417 46.099,93.395 42.819,94.786 36.900 C 96.215 30.822,90.979 23.600,85.144 23.600 L 83.461 23.600 84.347 24.544 M374.400 122.106 L 374.400 173.811 375.925 174.754 C 379.325 176.855,379.200 176.082,379.200 194.963 C 379.200 213.834,379.354 212.883,375.951 215.031 L 374.388 216.018 374.494 227.904 L 374.600 239.790 375.682 240.308 C 376.276 240.593,377.311 241.491,377.982 242.304 L 379.200 243.782 379.200 260.600 L 379.200 277.418 377.964 278.917 C 377.284 279.742,376.204 280.688,375.564 281.019 C 374.875 281.375,374.400 281.943,374.400 282.410 C 374.400 283.180,374.722 283.200,387.200 283.200 L 400.000 283.200 400.000 176.800 L 400.000 70.400 387.200 70.400 L 374.400 70.400 374.400 122.106 " stroke="none" fill="#fbb30c" fill-rule="evenodd"></path><path id="path5" d="M374.919 283.915 C 374.568 284.140,374.405 287.179,374.319 295.114 L 374.200 306.005 375.504 306.435 C 376.222 306.671,377.257 307.452,377.804 308.170 L 378.800 309.476 378.800 320.705 C 378.800 326.881,378.909 332.219,379.043 332.567 C 379.357 333.387,381.075 333.382,381.898 332.559 C 382.334 332.123,382.955 331.985,383.838 332.129 C 384.777 332.281,385.203 332.170,385.373 331.727 C 385.536 331.300,385.908 331.191,386.604 331.365 C 387.359 331.555,387.600 331.458,387.600 330.965 C 387.600 330.568,387.821 330.399,388.167 330.532 C 388.479 330.652,388.840 330.472,388.970 330.133 C 389.100 329.794,389.430 329.586,389.703 329.670 C 390.269 329.844,396.416 323.749,396.047 323.381 C 395.915 323.248,396.106 322.972,396.472 322.768 C 396.838 322.563,397.259 321.844,397.406 321.171 C 397.554 320.497,397.927 319.849,398.235 319.731 C 398.614 319.586,398.712 319.188,398.538 318.496 C 398.373 317.838,398.480 317.320,398.841 317.038 C 399.309 316.671,399.368 313.940,399.200 300.200 L 399.000 283.800 387.200 283.703 C 380.710 283.649,375.183 283.745,374.919 283.915 M143.383 333.301 C 143.277 333.576,143.238 341.091,143.295 350.001 L 143.400 366.200 199.200 366.310 C 229.890 366.370,255.405 366.321,255.900 366.202 L 256.800 365.985 256.800 356.639 L 256.800 347.293 255.900 347.052 C 255.405 346.919,247.118 346.808,237.484 346.805 C 214.752 346.798,215.527 347.109,215.265 337.900 L 215.120 332.800 179.347 332.800 C 151.078 332.800,143.535 332.905,143.383 333.301 M264.628 366.355 C 264.507 366.551,265.346 367.017,266.492 367.392 C 271.295 368.963,274.702 372.383,276.862 377.800 C 277.166 378.562,277.424 382.797,277.570 389.400 L 277.800 399.800 285.895 399.908 L 293.990 400.017 295.195 398.865 L 296.400 397.713 296.400 387.633 C 296.400 381.015,296.263 377.638,296.000 377.800 C 295.768 377.944,295.600 377.549,295.600 376.857 C 295.600 376.202,295.434 375.607,295.230 375.533 C 295.027 375.460,294.802 375.132,294.730 374.804 C 294.659 374.476,294.114 373.737,293.519 373.161 C 292.925 372.586,292.385 371.868,292.319 371.567 C 292.173 370.895,291.376 370.000,290.924 370.000 C 290.741 370.000,290.145 369.460,289.600 368.800 C 289.032 368.113,288.222 367.600,287.704 367.600 C 287.207 367.600,286.800 367.420,286.800 367.200 C 286.800 366.980,286.350 366.800,285.800 366.800 C 285.250 366.800,284.800 366.620,284.800 366.400 C 284.800 365.893,264.940 365.849,264.628 366.355 " stroke="none" fill="#5c5c5c" fill-rule="evenodd"></path><path id="path6" d="M36.600 23.434 C 27.545 25.566,23.986 34.713,29.406 41.923 C 36.100 50.829,50.000 46.113,50.000 34.937 C 50.000 27.346,43.539 21.800,36.600 23.434 " stroke="none" fill="#fb4d69" fill-rule="evenodd"></path><path id="path7" d="M14.500 0.289 C 13.785 0.378,13.200 0.619,13.200 0.825 C 13.200 1.031,12.739 1.200,12.176 1.200 C 11.596 1.200,11.260 1.373,11.400 1.600 C 11.536 1.820,11.277 2.000,10.824 2.000 C 10.371 2.000,10.000 2.168,10.000 2.373 C 10.000 2.578,9.639 2.861,9.198 3.000 C 8.148 3.334,4.400 6.994,4.400 7.686 C 4.400 7.981,4.040 8.483,3.600 8.800 C 3.160 9.117,2.800 9.697,2.800 10.088 C 2.800 10.480,2.620 10.800,2.400 10.800 C 2.180 10.800,2.000 11.160,2.000 11.600 C 2.000 12.040,1.820 12.400,1.600 12.400 C 1.380 12.400,1.200 12.835,1.200 13.367 C 1.200 13.898,0.975 14.408,0.700 14.500 C -0.056 14.752,-0.278 69.577,0.475 70.055 C 1.128 70.469,400.247 70.514,399.833 70.100 C 399.668 69.935,309.863 69.710,200.267 69.600 L 1.000 69.400 0.884 43.600 C 0.769 18.245,0.826 16.758,2.012 13.800 C 3.157 10.946,3.427 10.400,3.698 10.400 C 3.864 10.400,4.000 10.147,4.000 9.838 C 4.000 9.162,8.906 4.000,9.549 4.000 C 9.797 4.000,10.000 3.854,10.000 3.675 C 10.000 3.496,10.630 3.102,11.400 2.800 C 12.170 2.498,12.800 2.104,12.800 1.925 C 12.800 1.746,13.239 1.600,13.776 1.600 C 14.313 1.600,14.864 1.420,15.000 1.200 C 15.136 0.980,16.002 0.797,16.924 0.794 C 17.846 0.791,18.870 0.613,19.200 0.400 C 19.815 0.002,17.292 -0.057,14.500 0.289 M82.600 22.786 C 82.160 22.983,81.310 23.156,80.712 23.172 C 78.448 23.230,74.054 26.709,72.846 29.400 C 72.549 30.060,72.148 30.913,71.953 31.295 C 71.759 31.677,71.600 33.254,71.600 34.800 C 71.600 36.346,71.759 37.923,71.953 38.305 C 72.148 38.687,72.553 39.537,72.853 40.194 C 76.360 47.857,85.774 49.334,92.033 43.205 C 93.115 42.146,94.000 40.991,94.000 40.640 C 94.000 40.288,94.136 40.000,94.303 40.000 C 94.844 40.000,95.600 36.867,95.600 34.625 C 95.600 32.583,95.390 31.739,94.252 29.200 C 93.611 27.770,90.302 24.575,88.733 23.871 C 87.519 23.326,86.783 23.118,84.250 22.602 C 83.783 22.507,83.040 22.590,82.600 22.786 M88.309 24.274 C 91.018 25.400,93.438 28.184,94.679 31.600 C 95.990 35.208,94.742 39.969,91.725 42.864 C 84.829 49.483,74.821 46.396,72.387 36.899 C 70.867 30.969,75.968 24.134,82.400 23.483 C 84.297 23.290,86.726 23.616,88.309 24.274 M42.600 96.755 C 41.940 97.168,36.765 102.177,31.100 107.886 L 20.800 118.264 20.800 120.471 C 20.800 123.756,21.109 124.153,32.281 135.247 C 43.400 146.289,43.578 146.416,47.055 145.763 C 49.005 145.397,51.614 142.816,51.564 141.300 C 51.528 140.209,51.525 140.211,51.159 141.474 C 50.104 145.120,45.594 146.615,42.400 144.378 C 41.073 143.448,22.946 125.329,21.966 123.952 C 20.768 122.269,20.938 119.520,22.367 117.472 C 24.122 114.957,42.032 97.313,43.326 96.825 C 46.240 95.725,49.237 96.856,50.690 99.605 C 51.417 100.979,51.600 101.138,51.600 100.394 C 51.600 97.238,45.662 94.836,42.600 96.755 M72.905 96.925 C 71.282 98.021,66.411 108.714,64.010 116.451 C 63.831 117.029,63.415 118.109,63.087 118.851 C 61.828 121.701,60.703 124.837,60.879 125.012 C 60.979 125.113,61.918 122.991,62.965 120.298 C 64.011 117.604,65.016 115.040,65.198 114.600 C 65.379 114.160,66.730 110.740,68.199 107.000 C 71.334 99.018,71.959 97.901,73.767 97.043 C 78.714 94.695,83.627 99.516,81.550 104.681 C 81.303 105.297,80.943 106.205,80.750 106.700 C 80.379 107.653,79.837 109.015,79.236 110.500 C 75.889 118.775,72.808 126.941,72.972 127.105 C 73.087 127.220,73.292 126.974,73.427 126.557 C 73.562 126.141,73.860 125.350,74.090 124.800 C 74.591 123.599,75.182 122.124,75.654 120.900 C 75.844 120.405,76.180 119.550,76.400 119.000 C 76.620 118.450,76.980 117.550,77.200 117.000 C 77.420 116.450,77.780 115.550,78.000 115.000 C 78.220 114.450,78.580 113.550,78.800 113.000 C 79.020 112.450,79.363 111.595,79.562 111.100 C 83.260 101.902,83.308 99.649,79.863 97.021 C 78.090 95.669,74.831 95.624,72.905 96.925 M87.696 96.798 C 82.209 100.144,83.336 103.274,93.790 113.721 L 100.916 120.843 99.558 122.301 C 98.811 123.103,95.570 126.379,92.356 129.580 C 85.390 136.517,84.800 137.311,84.800 139.739 C 84.800 143.406,87.160 145.766,90.840 145.779 C 93.780 145.789,94.066 145.562,105.164 134.409 C 119.543 119.959,119.562 121.976,104.911 107.270 C 92.769 95.082,91.638 94.395,87.696 96.798 M93.074 96.825 C 94.564 97.386,113.842 116.579,114.830 118.484 C 116.687 122.064,115.920 123.217,103.553 135.439 C 92.288 146.573,91.427 147.048,87.494 144.308 C 82.940 141.134,83.987 138.549,93.773 128.804 C 97.858 124.736,101.200 121.224,101.200 121.000 C 101.200 120.775,98.120 117.533,94.356 113.796 C 84.963 104.470,84.020 102.808,86.063 99.174 C 87.431 96.740,90.299 95.778,93.074 96.825 M51.019 103.881 C 50.841 104.597,47.917 107.840,42.892 112.892 L 35.043 120.783 42.869 128.698 C 48.806 134.701,50.765 136.931,50.986 137.935 C 51.145 138.662,51.371 139.163,51.486 139.047 C 52.296 138.237,50.503 135.958,43.571 128.987 C 39.407 124.800,36.000 121.209,36.000 121.009 C 36.000 120.808,39.407 117.208,43.570 113.009 C 50.447 106.075,52.282 103.749,51.496 102.963 C 51.386 102.853,51.171 103.266,51.019 103.881 M137.724 113.899 C 140.983 113.967,146.203 113.966,149.324 113.899 C 152.446 113.831,149.780 113.776,143.400 113.777 C 137.020 113.777,134.466 113.832,137.724 113.899 M208.300 113.900 C 226.175 113.958,255.425 113.958,273.300 113.900 C 291.175 113.842,276.550 113.795,240.800 113.795 C 205.050 113.795,190.425 113.842,208.300 113.900 M128.738 115.617 C 127.571 116.843,127.210 117.544,127.241 118.517 L 127.282 119.800 127.572 118.600 C 128.005 116.812,128.784 115.768,130.373 114.846 C 131.388 114.257,131.580 114.016,131.038 114.009 C 130.619 114.004,129.584 114.728,128.738 115.617 M156.841 114.908 C 160.636 117.443,160.394 122.644,156.386 124.700 C 154.693 125.568,154.247 125.600,143.815 125.598 C 130.307 125.595,128.792 125.182,127.668 121.200 L 127.272 119.800 127.236 121.022 C 127.195 122.415,129.066 124.694,130.919 125.508 C 135.222 127.400,157.897 125.843,158.721 123.600 C 158.842 123.270,159.045 122.910,159.171 122.800 C 161.333 120.913,158.942 114.000,156.128 114.000 C 155.743 114.000,156.031 114.367,156.841 114.908 M173.098 115.329 C 171.331 117.096,170.657 119.328,171.325 121.202 C 172.160 123.543,172.659 124.176,174.402 125.107 L 176.076 126.000 240.800 126.000 C 313.803 126.000,307.338 126.284,309.500 122.985 C 311.480 119.964,309.436 114.048,306.400 114.010 C 306.070 114.006,306.387 114.361,307.104 114.798 C 310.857 117.086,310.885 122.397,307.155 124.600 C 305.247 125.727,178.246 126.092,175.305 124.979 C 170.955 123.333,170.411 117.545,174.359 114.908 C 175.169 114.367,175.457 114.000,175.072 114.000 C 174.717 114.000,173.829 114.598,173.098 115.329 M59.823 127.006 C 58.922 129.164,59.111 129.728,60.037 127.642 C 60.466 126.675,60.734 125.800,60.632 125.698 C 60.530 125.597,60.166 126.185,59.823 127.006 M58.573 130.243 C 58.438 130.659,58.140 131.450,57.910 132.000 C 57.332 133.385,56.748 134.852,56.396 135.800 C 56.233 136.240,55.897 137.103,55.650 137.719 C 53.331 143.488,61.332 148.652,65.738 144.231 C 66.913 143.052,72.378 130.244,71.907 129.773 C 71.722 129.589,67.200 140.774,67.200 141.414 C 67.200 144.829,60.293 146.632,57.586 143.924 C 55.188 141.526,55.248 139.790,57.963 133.049 C 58.661 131.316,59.139 129.806,59.025 129.692 C 58.912 129.578,58.708 129.826,58.573 130.243 M131.800 140.284 C 130.522 140.479,128.000 142.174,128.000 142.839 C 128.000 143.058,128.738 142.644,129.641 141.919 L 131.281 140.600 152.941 140.475 C 164.853 140.406,175.560 140.466,176.733 140.608 C 182.285 141.279,184.033 148.183,179.427 151.249 C 178.550 151.833,135.778 152.330,132.107 151.798 C 130.128 151.512,128.204 149.822,127.641 147.874 C 127.325 146.783,127.267 146.738,127.236 147.562 C 127.191 148.764,128.866 151.007,130.401 151.800 C 132.140 152.700,177.460 152.700,179.199 151.800 C 183.300 149.680,183.688 143.829,179.906 141.132 L 178.600 140.200 155.800 140.151 C 143.260 140.124,132.460 140.184,131.800 140.284 M195.383 140.268 C 194.713 140.362,193.633 140.895,192.983 141.453 L 191.800 142.468 193.400 141.534 C 195.380 140.378,214.147 140.072,216.710 141.153 C 220.590 142.790,220.919 148.597,217.272 151.072 C 216.135 151.844,199.698 152.400,195.687 151.802 C 192.179 151.279,190.036 147.635,191.318 144.372 C 191.995 142.649,191.611 142.180,190.864 143.819 C 189.617 146.557,190.857 150.007,193.654 151.581 C 195.924 152.859,214.916 152.836,217.198 151.553 C 221.190 149.310,221.458 144.164,217.732 141.321 L 216.264 140.200 206.432 140.149 C 201.024 140.121,196.052 140.175,195.383 140.268 M232.116 140.288 C 230.895 140.440,228.000 142.798,228.000 143.640 C 228.000 143.838,228.692 143.308,229.538 142.462 C 231.647 140.353,230.837 140.408,259.400 140.414 C 288.764 140.420,288.543 140.393,290.235 144.200 C 290.704 145.255,290.771 145.291,290.784 144.500 C 290.812 142.933,288.033 140.568,285.807 140.263 C 283.796 139.987,234.342 140.010,232.116 140.288 M127.200 144.800 C 127.200 145.460,127.270 146.000,127.355 146.000 C 127.440 146.000,127.588 145.460,127.685 144.800 C 127.782 144.140,127.713 143.600,127.531 143.600 C 127.349 143.600,127.200 144.140,127.200 144.800 M227.358 145.425 C 227.216 145.989,227.291 146.844,227.523 147.325 C 227.886 148.075,227.950 147.929,227.973 146.300 C 228.003 144.203,227.754 143.848,227.358 145.425 M290.454 147.887 C 290.364 149.367,287.871 151.512,285.913 151.794 C 284.971 151.930,272.320 151.987,257.800 151.921 C 229.185 151.790,230.547 151.901,228.978 149.567 C 228.563 148.949,228.153 148.514,228.068 148.599 C 227.739 148.927,229.719 151.241,230.812 151.806 C 232.480 152.669,285.859 152.701,287.520 151.840 C 289.217 150.961,290.874 148.881,290.679 147.876 L 290.509 147.000 290.454 147.887 M30.000 169.066 C 27.183 169.510,26.509 169.931,24.881 172.262 C 22.717 175.360,24.761 180.059,28.781 181.230 C 31.495 182.020,71.926 181.538,73.600 180.696 C 79.034 177.961,77.334 169.807,71.175 169.068 C 68.897 168.795,31.735 168.793,30.000 169.066 M92.000 169.172 C 85.940 170.384,84.973 178.076,90.542 180.772 C 93.028 181.976,164.798 181.904,167.200 180.696 C 172.846 177.855,170.905 169.743,164.417 169.065 C 161.053 168.713,93.797 168.813,92.000 169.172 M73.743 170.359 C 77.500 172.836,77.281 178.279,73.347 180.232 C 71.001 181.396,29.853 181.424,27.518 180.263 C 23.635 178.332,23.524 172.698,27.322 170.382 C 29.277 169.190,71.938 169.169,73.743 170.359 M167.473 170.500 C 171.016 172.910,170.738 178.200,166.963 180.180 C 165.113 181.150,96.435 181.727,92.160 180.808 C 87.308 179.765,85.765 174.635,89.255 171.145 L 90.800 169.600 128.475 169.600 L 166.150 169.600 167.473 170.500 M218.590 174.416 C 218.421 174.689,218.723 174.738,219.466 174.560 C 220.999 174.192,221.144 174.000,219.890 174.000 C 219.317 174.000,218.732 174.187,218.590 174.416 M216.445 176.017 C 214.512 177.949,214.402 179.000,214.433 195.200 C 214.472 215.922,214.514 216.000,225.649 216.000 L 231.200 216.000 231.200 227.800 L 231.200 239.600 225.224 239.600 C 221.937 239.600,219.164 239.735,219.061 239.900 C 218.864 240.219,229.576 240.112,231.106 239.779 L 232.012 239.582 231.906 227.691 L 231.800 215.800 225.600 215.600 C 214.684 215.248,215.039 215.904,214.879 195.800 C 214.746 179.136,214.862 178.016,216.929 175.995 C 217.602 175.338,218.042 174.800,217.907 174.800 C 217.772 174.800,217.114 175.347,216.445 176.017 M27.367 195.233 C 24.560 196.596,23.183 200.463,24.560 203.120 C 25.302 204.552,27.416 206.402,28.297 206.391 C 28.718 206.385,28.459 206.115,27.649 205.716 C 24.934 204.379,23.815 201.061,25.149 198.304 C 26.702 195.098,27.115 195.000,39.062 195.000 C 44.816 195.000,49.316 194.868,49.062 194.706 C 47.879 193.954,29.061 194.410,27.367 195.233 M65.808 195.315 C 61.163 197.946,61.998 206.439,66.897 206.391 C 67.572 206.385,67.379 206.191,66.127 205.623 C 62.150 203.817,61.954 198.662,65.754 195.825 C 66.845 195.010,67.206 195.000,94.529 195.000 L 122.200 195.000 123.506 195.932 C 127.204 198.569,126.706 204.011,122.600 205.835 C 121.610 206.275,121.548 206.371,122.250 206.384 C 123.926 206.415,126.800 202.679,126.800 200.467 C 126.800 199.031,124.985 196.308,123.415 195.388 L 121.730 194.400 94.565 194.407 L 67.400 194.413 65.808 195.315 M139.351 195.396 C 136.776 196.940,136.234 198.116,136.358 201.900 C 136.410 203.494,139.102 206.409,140.500 206.384 C 141.282 206.371,141.240 206.299,140.180 205.837 C 135.261 203.695,135.825 196.366,141.000 195.184 C 142.842 194.764,151.447 194.684,153.762 195.067 C 159.234 195.971,160.126 203.613,155.020 205.837 C 153.960 206.299,153.918 206.371,154.700 206.384 C 157.935 206.441,160.220 199.851,157.900 197.155 C 155.264 194.092,143.403 192.967,139.351 195.396 M169.000 195.370 C 164.469 198.097,165.430 206.487,170.262 206.384 C 170.746 206.374,170.570 206.182,169.752 205.825 C 164.710 203.631,165.627 195.960,171.038 195.067 C 173.551 194.652,191.662 194.766,193.251 195.207 C 198.419 196.643,198.548 205.750,193.404 206.046 C 192.704 206.087,192.693 206.117,193.319 206.279 C 194.321 206.539,196.771 204.568,197.442 202.960 C 198.628 200.123,197.436 196.925,194.592 195.315 C 192.038 193.868,171.422 193.913,169.000 195.370 M50.715 195.922 C 51.218 196.309,51.982 197.160,52.412 197.813 C 52.880 198.522,53.196 198.750,53.197 198.378 C 53.200 197.708,50.808 195.194,50.181 195.209 C 49.971 195.214,50.212 195.535,50.715 195.922 M53.293 200.800 C 53.293 201.570,53.375 201.885,53.476 201.500 C 53.576 201.115,53.576 200.485,53.476 200.100 C 53.375 199.715,53.293 200.030,53.293 200.800 M52.198 203.715 C 51.757 204.422,50.767 205.315,49.998 205.699 C 48.900 206.249,48.785 206.399,49.460 206.399 C 50.415 206.400,53.200 203.839,53.200 202.960 C 53.200 202.185,53.112 202.252,52.198 203.715 M29.800 206.800 C 30.240 206.989,34.290 207.144,38.800 207.144 C 43.310 207.144,47.360 206.989,47.800 206.800 C 48.275 206.596,44.619 206.456,38.800 206.456 C 32.981 206.456,29.325 206.596,29.800 206.800 M68.400 206.800 C 69.154 207.287,119.466 207.287,120.600 206.800 C 121.057 206.603,109.920 206.447,94.600 206.434 C 77.160 206.420,68.010 206.548,68.400 206.800 M142.000 206.800 C 142.330 207.013,144.850 207.188,147.600 207.188 C 150.350 207.188,152.870 207.013,153.200 206.800 C 153.601 206.541,151.749 206.412,147.600 206.412 C 143.451 206.412,141.599 206.541,142.000 206.800 M171.600 206.800 C 171.945 207.023,176.281 207.188,181.800 207.188 C 187.319 207.188,191.655 207.023,192.000 206.800 C 192.395 206.544,188.919 206.412,181.800 206.412 C 174.681 206.412,171.205 206.544,171.600 206.800 M368.800 215.584 L 362.600 215.800 362.591 227.600 L 362.582 239.400 362.697 227.700 L 362.812 216.000 368.782 216.000 C 372.331 216.000,374.853 215.838,375.000 215.600 C 375.136 215.380,375.192 215.238,375.124 215.284 C 375.056 215.330,372.210 215.465,368.800 215.584 M28.724 219.874 C 25.029 220.472,22.809 225.890,24.960 229.056 C 27.189 232.335,28.264 232.493,47.200 232.332 C 64.410 232.185,64.708 232.138,66.433 229.346 C 68.284 226.352,67.708 223.039,64.974 220.953 L 63.463 219.800 46.632 219.750 C 37.374 219.723,29.316 219.778,28.724 219.874 M78.271 219.881 C 72.405 220.803,72.578 230.034,78.494 231.791 C 81.093 232.563,118.443 232.703,121.425 231.952 C 127.098 230.523,128.456 223.770,123.716 220.557 C 122.646 219.831,82.396 219.233,78.271 219.881 M139.629 219.892 C 135.110 220.742,133.419 226.660,136.709 230.109 C 138.861 232.364,139.340 232.400,167.600 232.400 C 195.860 232.400,196.339 232.364,198.491 230.109 C 201.843 226.596,200.022 220.637,195.362 219.867 C 193.624 219.580,141.164 219.603,139.629 219.892 M62.600 220.388 C 67.329 221.480,68.575 227.708,64.629 230.524 C 62.677 231.915,28.899 231.899,26.945 230.505 C 22.957 227.660,24.199 221.534,29.000 220.372 C 30.774 219.943,60.733 219.958,62.600 220.388 M123.863 221.439 C 127.780 224.596,126.328 230.698,121.493 231.399 C 116.806 232.078,77.828 231.419,76.680 230.641 C 73.830 228.709,73.483 224.348,75.989 221.964 C 78.048 220.006,76.717 220.101,101.263 220.154 L 122.327 220.200 123.863 221.439 M194.946 220.264 C 199.964 221.093,201.474 227.821,197.280 230.667 C 195.604 231.804,139.596 231.804,137.920 230.667 C 133.937 227.964,135.260 220.986,139.888 220.288 C 141.726 220.010,193.276 219.988,194.946 220.264 M216.491 241.632 C 214.463 243.706,214.351 244.803,214.481 261.400 C 214.641 281.851,214.508 281.600,225.191 281.600 C 230.266 281.600,231.200 281.693,231.200 282.200 C 231.200 282.732,218.089 282.800,115.600 282.800 C 38.800 282.800,0.000 282.934,0.000 283.200 C 0.000 283.466,38.858 283.600,115.773 283.600 L 231.546 283.600 231.816 282.750 C 232.242 281.407,231.422 281.213,225.280 281.206 C 214.752 281.195,214.800 281.289,214.800 260.600 C 214.800 244.266,214.864 243.738,217.105 241.700 C 217.890 240.985,218.345 240.400,218.114 240.400 C 217.884 240.400,217.153 240.954,216.491 241.632 M362.598 281.604 C 362.461 281.826,362.462 282.366,362.601 282.804 C 362.884 283.696,374.400 284.083,374.400 283.200 C 374.400 282.952,372.200 282.800,368.600 282.800 C 363.757 282.800,362.800 282.703,362.800 282.210 C 362.800 281.722,363.847 281.600,368.900 281.499 L 375.000 281.378 368.924 281.289 C 365.170 281.234,362.752 281.354,362.598 281.604 M4.470 326.348 C 4.981 326.979,5.533 327.420,5.697 327.326 C 5.998 327.154,4.244 325.200,3.788 325.200 C 3.651 325.200,3.958 325.717,4.470 326.348 " stroke="none" fill="#d7c884" fill-rule="evenodd"></path><path id="path8" d="M378.768 210.900 C 378.649 211.760,378.710 212.250,378.912 212.048 C 379.105 211.855,379.198 211.181,379.119 210.549 C 378.987 209.491,378.959 209.519,378.768 210.900 M378.752 244.487 C 378.937 245.598,378.993 245.655,379.119 244.854 C 379.201 244.333,379.103 243.743,378.901 243.541 C 378.679 243.319,378.621 243.693,378.752 244.487 M374.181 283.706 C 374.074 283.985,374.038 288.980,374.100 294.806 L 374.214 305.400 374.307 294.708 L 374.400 284.015 375.300 283.795 C 375.795 283.675,381.330 283.626,387.600 283.688 L 399.000 283.800 399.105 299.385 C 399.169 308.970,399.362 315.122,399.605 315.365 C 399.865 315.625,400.000 310.202,400.000 299.480 L 400.000 283.200 387.187 283.200 C 377.222 283.200,374.332 283.312,374.181 283.706 M398.667 317.067 C 398.183 317.550,398.389 318.710,399.000 318.945 C 399.450 319.117,399.600 318.879,399.600 317.987 C 399.600 316.852,399.238 316.495,398.667 317.067 M397.590 320.626 C 397.376 321.190,397.200 321.811,397.200 322.006 C 397.200 322.201,396.905 322.525,396.544 322.727 C 396.183 322.929,396.014 323.298,396.167 323.547 C 396.631 324.297,397.076 324.065,397.600 322.800 C 397.873 322.140,398.255 321.600,398.449 321.600 C 398.642 321.600,398.800 321.150,398.800 320.600 C 398.800 319.300,398.089 319.315,397.590 320.626 M393.100 326.743 C 391.615 328.244,390.400 329.591,390.400 329.736 C 390.400 330.477,391.465 329.749,393.807 327.407 C 396.181 325.034,396.886 323.989,396.100 324.007 C 395.935 324.011,394.585 325.242,393.100 326.743 M389.075 329.858 C 388.553 330.380,388.802 330.800,389.633 330.800 C 390.099 330.800,390.397 330.590,390.308 330.325 C 390.113 329.740,389.446 329.488,389.075 329.858 M387.600 330.967 C 387.600 331.315,387.885 331.600,388.233 331.600 C 388.940 331.600,388.817 330.739,388.075 330.492 C 387.814 330.405,387.600 330.618,387.600 330.967 M385.480 331.453 C 384.918 332.015,385.224 332.400,386.233 332.400 C 386.882 332.400,387.205 332.214,387.100 331.900 C 386.908 331.322,385.892 331.041,385.480 331.453 M382.100 332.256 C 381.057 332.695,381.663 333.200,383.233 333.200 C 384.361 333.200,384.816 333.045,384.702 332.700 C 384.529 332.172,382.943 331.901,382.100 332.256 M82.200 332.800 L 20.600 333.004 77.600 333.044 C 108.950 333.066,152.600 332.966,174.600 332.822 L 214.600 332.559 179.200 332.578 C 159.730 332.588,116.080 332.688,82.200 332.800 M143.683 366.700 C 144.120 367.227,254.405 367.480,255.767 366.957 C 256.115 366.824,256.400 366.599,256.400 366.457 C 256.400 366.316,230.945 366.200,199.834 366.200 C 154.627 366.200,143.351 366.300,143.683 366.700 M262.200 366.800 C 262.860 367.237,263.897 367.596,264.505 367.597 C 265.113 367.599,265.923 367.762,266.305 367.960 C 266.687 368.157,267.870 368.742,268.933 369.260 C 271.063 370.296,274.800 373.712,274.800 374.622 C 274.800 374.940,274.980 375.200,275.200 375.200 C 277.758 375.200,270.519 368.709,266.492 367.392 C 265.346 367.017,264.507 366.551,264.628 366.355 C 264.748 366.160,263.982 366.001,262.924 366.003 L 261.000 366.005 262.200 366.800 M292.220 371.709 C 292.328 371.988,292.817 372.462,293.308 372.761 C 294.159 373.280,294.155 373.256,293.230 372.253 C 292.148 371.077,291.934 370.962,292.220 371.709 M276.704 379.400 C 276.867 380.720,277.000 385.895,277.000 390.900 C 277.000 396.700,277.145 400.000,277.400 400.001 C 277.974 400.001,277.475 379.310,276.869 378.000 C 276.491 377.181,276.461 377.433,276.704 379.400 " stroke="none" fill="#8e7e5c" fill-rule="evenodd"></path></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/app-logo.png b/src/assets/images/app-logo.png
new file mode 100644
index 0000000..9f04c2a
Binary files /dev/null and b/src/assets/images/app-logo.png differ
diff --git a/src/index.html b/src/index.html
index ead4177..0459a91 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,13 +1,22 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
-  <title>DevDesignerTools</title>
+  <title>Dev Designers Tools</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <!-- Place this tag in your head or just before your close body tag. -->
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
 </head>
-<body>
+
+<body class="mat-typography">
   <ddt-root></ddt-root>
+
 </body>
+
 </html>
diff --git a/src/main.ts b/src/main.ts
index c7b673c..664b26a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,12 +1,12 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+import { DdtAppModule } from './app/ddt-app.module';
 import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+platformBrowserDynamic().bootstrapModule(DdtAppModule)
   .catch(err => console.error(err));
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0..e69de29 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
diff --git a/src/themes/ddt-theme.scss b/src/themes/ddt-theme.scss
new file mode 100644
index 0000000..f312415
--- /dev/null
+++ b/src/themes/ddt-theme.scss
@@ -0,0 +1,77 @@
+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+// Plus imports for other components in your app.
+@import "./variables/spacemanager.scss";
+@import "./variables/utils.scss";
+@import "./variables/colors.scss";
+@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300;400;500;700&display=swap');
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+$typography-configuration: mat-typography-config(
+  $font-family: "'Dosis', sans-serif",
+  $display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
+  $display-3: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
+  $display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
+  $display-1: mat.define-typography-level(34px, 40px, 400),
+  $headline:  mat.define-typography-level(24px, 32px, 400),
+  $title: mat.define-typography-level(24px, 28px, 500),
+  $subheading-2: mat.define-typography-level(24px, 28px, 400),
+  $subheading-1: mat.define-typography-level(20px, 24px, 400),
+  $body-2: mat.define-typography-level(20px, 24px, 500),
+  $body-1: mat.define-typography-level(20px, 22px, 400),
+  $caption: mat.define-typography-level(18px, 22px, 400),
+  $button: mat.define-typography-level(14px, 22px, 500),
+  $input: mat.define-typography-level(12px, 1.125, 400)
+);
+
+@include angular-material-typography($typography-configuration);
+@include mat.core($typography-configuration);
+
+@mixin mat-core($typography-config: null) {
+  @include angular-material-typography($typography-config);
+  @include mat-ripple();
+  @include cdk-a11y();
+  @include cdk-overlay();
+  @include cdk-text-field();
+}
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$DevDesignerTools-primary: mat.define-palette(mat.$indigo-palette);
+$DevDesignerTools-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$DevDesignerTools-warn: mat.define-palette(mat.$red-palette);
+
+$dev-designer-tool-config: mat.define-typography-config(
+  $font-family: "'Dosis', sans-serif"
+);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$DevDesignerTools-theme: mat.define-dark-theme((
+  color: (
+    primary: $DevDesignerTools-primary,
+    accent: $DevDesignerTools-accent,
+    warn: $DevDesignerTools-warn,
+  ),
+  typography: $dev-designer-tool-config,
+));
+
+
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include mat.all-component-themes($DevDesignerTools-theme);
+
+/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; background-color: rgb(238, 238, 238); }
+body { margin: 0; font-family: 'Dosis', sans-serif; }
+.spacer {
+  flex: 1 1 auto;
+}
diff --git a/src/themes/variables/_animation.scss b/src/themes/variables/_animation.scss
new file mode 100644
index 0000000..a58f71d
--- /dev/null
+++ b/src/themes/variables/_animation.scss
@@ -0,0 +1,156 @@
+.animation-slide-in-up {
+  @include animation(0, 0.5s, animation-slide-in-up, ease);
+}
+
+.animation-slide-in-down {
+  @include animation(0, 0.5s, animation-slide-in-down, ease);
+}
+
+.animation-slide-in-right {
+  @include animation(0, 0.5s, animation-slide-in-right, ease);
+}
+
+.animation-slide-in-left {
+  @include animation(0, 0.5s, animation-slide-in-left, ease);
+}
+
+.animation-slide-out-up {
+  @include animation(0, 0.5s, animation-slide-out-up, ease);
+}
+
+.animation-slide-out-down {
+  @include animation(0, 0.5s, animation-slide-out-down, ease);
+}
+
+.animation-slide-out-right {
+  @include animation(0, 0.5s, animation-slide-out-right, ease);
+}
+
+.animation-slide-out-left {
+  @include animation(0, 0.5s, animation-slide-out-left, ease);
+}
+
+// -- Slide Animations -- //
+
+// Slide Out Top from Center
+@include keyframe(animation-slide-out-up) {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(0, -100%);
+  }
+}
+
+@include keyframe(animation-slide-out-down) {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(0, 100%);
+  }
+}
+
+// Slide Out Left from Center
+@include keyframe(animation-slide-out-left) {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(-100%, 0);
+  }
+}
+
+// Slide out Right from Center
+@include keyframe(animation-slide-out-right) {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(100%, 0);
+  }
+}
+
+@include keyframe(animation-slide-in-up) {
+  0% {
+    transform: translate(0, 100%);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+@include keyframe(animation-slide-in-down) {
+  0% {
+    transform: translate(0, -100%);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+// Slide in Left to Center
+@include keyframe(animation-slide-in-left) {
+  0% {
+    transform: translate(-100%, 0);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+// Slide in Right to Center
+@include keyframe(animation-slide-in-right) {
+  0% {
+    transform: translate(100%, 0);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+@mixin keyframe($animation_name) {
+  @-webkit-keyframes #{$animation_name} {
+    @content;
+  }
+
+  @-moz-keyframes #{$animation_name} {
+    @content;
+  }
+
+  @-o-keyframes #{$animation_name} {
+    @content;
+  }
+
+  @keyframes #{$animation_name} {
+    @content;
+  }
+}
+
+@mixin animation($delay, $duration, $animation, $direction: forward, $fillmode: fowards) {
+  -webkit-animation-delay: $delay;
+  -webkit-animation-duration: $duration;
+  -webkit-animation-name: $animation;
+  -webkit-animation-fill-mode: $fillmode;
+  -webkit-animation-direction: $direction;
+
+  -moz-animation-delay: $delay;
+  -moz-animation-duration: $duration;
+  -moz-animation-name: $animation;
+  -moz-animation-fill-mode: $fillmode;
+  -moz-animation-direction: $direction;
+
+  animation-delay: $delay;
+  animation-duration: $duration;
+  animation-name: $animation;
+  animation-fill-mode: $fillmode;
+  animation-direction: $direction;
+}
diff --git a/src/themes/variables/_colors.scss b/src/themes/variables/_colors.scss
new file mode 100644
index 0000000..39ecf9d
--- /dev/null
+++ b/src/themes/variables/_colors.scss
@@ -0,0 +1,289 @@
+@import "helper.scss";
+
+%text {
+  color: #fff !important;
+}
+
+%content {
+  border: 1px solid #ccc;
+  padding: 10px;
+  color: #333;
+  & .text,
+  .number {
+    @extend %text;
+  }
+}
+
+.bg {
+  &-red {
+    background-color: #f44336 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+    &-gradient {
+      background: gradient(#f44336, #d32f2f);
+      color: gradient-color(#f44336);
+    }
+  }
+  &-pink {
+    background-color: #e91e63 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+  }
+  //New Pink Color Added Here
+  &-light-pink {
+    background-color: #ffd1e0 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+  }
+
+  &-purple {
+    background-color: #9c27b0 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+  }
+
+  &-deep-purple {
+    background-color: #673ab7 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+  }
+
+  &-indigo {
+    background-color: #3f51b5 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+  }
+
+  &-blue {
+    background-color: #2196f3 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+    &-gradient {
+      background: gradient(#2196f3, #1976d2);
+      color: gradient-color(#2196f3);
+    }
+  }
+
+  &-light-blue {
+    background-color: #03a9f4 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+    &-gradient {
+      background: gradient(#e3f2fd, #90caf9);
+      color: gradient-color(#90caf9);
+    }
+  }
+
+  &-cyan {
+    background-color: #00bcd4 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+  }
+
+  &-teal {
+    background-color: #009688 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+    &-gradient {
+      background: gradient(#009688, #00796b);
+      color: gradient-color(#009688);
+    }
+  }
+
+  &-green {
+    background-color: #4caf50 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+    &-gradient {
+      background: gradient(#8bc34a, #689f38);
+      color: gradient-color(#8bc34a);
+    }
+  }
+
+  &-light-green {
+    background-color: #8bc34a !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+  }
+
+  &-lime {
+    background-color: #cddc39 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+  }
+
+  &-yellow {
+    background-color: #ffe821 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+  }
+
+  &-amber {
+    background-color: #ffc107 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+    &-gradient {
+      background: gradient(#ffc107, #ffa000);
+      color: gradient-color(#ffc107);
+    }
+  }
+
+  &-orange {
+    background-color: #ff9800 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+  }
+
+  &-deep-orange {
+    background-color: #ff5722 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+  }
+
+  &-brown {
+    background-color: #795548 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+  }
+
+  &-grey {
+    background-color: #9e9e9e !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+  }
+
+  &-blue-grey {
+    background-color: #607d8b !important;
+    color: #fff;
+
+    & .content {
+      @extend %content;
+    }
+  }
+
+  &-black {
+    background-color: #000000 !important;
+    color: #fff;
+    & .content {
+      @extend %content;
+    }
+  }
+  &-white {
+    background-color: #ffffff !important;
+    color: #fff;
+  }
+  &-extra-light-green {
+    background-color: #ddfcd6 !important;
+    color: #fff;
+  }
+}
+
+.col {
+  &-red {
+    color: #f44336 !important;
+  }
+  &-pink {
+    color: #e91e63 !important;
+  }
+  &-purple {
+    color: #9c27b0 !important;
+  }
+  &-deep-purple {
+    color: #673ab7 !important;
+  }
+  &-indigo {
+    color: #3f51b5 !important;
+  }
+  &-blue {
+    color: #2196f3 !important;
+  }
+  &-light-blue {
+    color: #03a9f4 !important;
+  }
+  &-cyan {
+    color: #00bcd4 !important;
+  }
+  &-teal {
+    color: #009688 !important;
+  }
+  &-green {
+    color: #4caf50 !important;
+  }
+  &-light-green {
+    color: #8bc34a !important;
+  }
+  &-lime {
+    color: #cddc39 !important;
+  }
+  &-yellow {
+    color: #ffe821 !important;
+  }
+  &-amber {
+    color: #ffc107 !important;
+  }
+  &-orange {
+    color: #ff9800 !important;
+  }
+  &-deep-orange {
+    color: #ff5722 !important;
+  }
+  &-brown {
+    color: #795548 !important;
+  }
+  &-grey {
+    color: #9e9e9e !important;
+  }
+  &-blue-grey {
+    color: #607d8b !important;
+  }
+  &-black {
+    color: #000000 !important;
+  }
+  &-white {
+    color: #ffffff !important;
+  }
+  &-font-green {
+    color: #109115 !important;
+  }
+  &-light-brown {
+    color: #815849 !important;
+  }
+}
diff --git a/src/themes/variables/_helper.scss b/src/themes/variables/_helper.scss
new file mode 100644
index 0000000..40bd9da
--- /dev/null
+++ b/src/themes/variables/_helper.scss
@@ -0,0 +1,76 @@
+// Import all the tools needed to customize the theme and extract parts of it
+@import "~@angular/material/theming";
+
+@mixin setMatColors($theme, $isDark) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+
+  .content {
+    display: inline-block;
+    padding: 7px 16px;
+
+    & .text {
+      font-size: 13px;
+      margin-top: 11px;
+      color: isDark($isDark);
+    }
+
+    & .number {
+      font-weight: normal;
+      font-size: 26px;
+      margin-top: 2px;
+      color: isDark($isDark);
+    }
+
+    & .number-gt-xs {
+      font-weight: normal;
+      font-size: 26px;
+      margin-top: 30px;
+      color: isDark($isDark);
+      text-align: center;
+    }
+  }
+}
+
+@function set-text-color($color) {
+  @if (lightness($color) > 50) {
+    @return #000000 is-important(true); // Lighter backgorund, return dark color
+  } @else {
+    @return #ffffff is-important(true); // Darker background, return light color
+  }
+}
+
+@function gradient($color1, $color2) {
+  @return linear-gradient(to bottom right, $color1, $color2);
+}
+
+@function gradient-color($color) {
+  @return set-text-color($color);
+}
+
+@function getMatColors($type) {
+  @if ($type == "primary") {
+    @return $primary-color;
+  }
+
+  @if ($type == "accent") {
+    @return $accent-color;
+  }
+
+  @if ($type == "warn") {
+    @return $warn-color;
+  }
+}
+
+@function isDark($dark) {
+  @if ($dark == "false") {
+    @return #000000; // Lighter backgorund, return dark color
+  } @else {
+    @return #ffffff; // Darker background, return light color
+  }
+}
+
+@function is-important($important) {
+  @return #{if($important, "!important", "")};
+}
diff --git a/src/themes/variables/_spacemanager.scss b/src/themes/variables/_spacemanager.scss
new file mode 100644
index 0000000..55c5b8c
--- /dev/null
+++ b/src/themes/variables/_spacemanager.scss
@@ -0,0 +1,112 @@
+/*
+This .scss loop will create "margin helpers" and "padding helpers" for use in your web projects.
+It will generate several classes such as:
+
+.m-r-10 which gives margin-right 10 pixels.
+.m-r-15 gives MARGIN to the RIGHT 15 pixels.
+.m-t-15 gives MARGIN to the TOP 15 pixels and so on.
+
+.p-b-5 gives PADDING to the BOTTOM of 5 pixels
+.p-l-40 gives PADDING to the LEFT of 40 pixels
+
+The first letter is "m" or "p" for MARGIN or PADDING
+Second letter is "t", "b", "l", or "r" for TOP, BOTTOM, LEFT, or RIGHT
+Third letter is the number of spacing in pixels. Adjust the amounts generated by editing the $spaceamounts variable below.
+
+*/
+
+$spaceAmounts: (
+  -1,
+  -2,
+  -3,
+  -4,
+  -5,
+  -6,
+  -7,
+  -8,
+  -9,
+  -10,
+  -15,
+  -20,
+  -25,
+  -30,
+  -35,
+  -40,
+  -45,
+  -50,
+  -60,
+  -70,
+  -75,
+  -80,
+  -85,
+  -100,
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  15,
+  20,
+  25,
+  30,
+  35,
+  40,
+  45,
+  50,
+  60,
+  70,
+  75,
+  80,
+  85,
+  100
+); // Adjust this to include the pixel amounts you need.
+$sides: (top, bottom, left, right, all, tb, lr); // Leave this variable alone
+
+@each $space in $spaceAmounts {
+  @each $side in $sides {
+    @if $side == 'all' {
+      .m-all-#{$space} {
+        margin: #{$space}px !important;
+      }
+      .p-all-#{$space} {
+        padding: #{$space}px !important;
+      }
+    } @else if $side == 'tb' {
+      .m-tb-#{$space} {
+        margin-top: #{$space}px !important;
+        margin-bottom: #{$space}px !important;
+      }
+      .p-tb-#{$space} {
+        padding-top: #{$space}px !important;
+        padding-bottom: #{$space}px !important;
+      }
+    } @else if $side == 'lr' {
+      .m-tb-#{$space} {
+        margin-left: #{$space}px !important;
+        margin-right: #{$space}px !important;
+      }
+      .p-tb-#{$space} {
+        padding-left: #{$space}px !important;
+        padding-right: #{$space}px !important;
+      }
+    } @else {
+      .m-#{str-slice($side, 0, 1)}-#{$space} {
+        margin-#{$side}: #{$space}px !important;
+      }
+
+      .p-#{str-slice($side, 0, 1)}-#{$space} {
+        padding-#{$side}: #{$space}px !important;
+      }
+    }
+  }
+}
+
+.m-l-5p {
+  margin-left:5% !important;
+}
diff --git a/src/themes/variables/_utils.scss b/src/themes/variables/_utils.scss
new file mode 100644
index 0000000..1e93aff
--- /dev/null
+++ b/src/themes/variables/_utils.scss
@@ -0,0 +1,60 @@
+$spaceAmounts: (100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0);
+$options: ("%", px, rem, vw, vh);
+
+@each $space in $spaceAmounts {
+  @each $option in $options {
+    @if $option == 'vw' {
+      .width-#{$space} {
+        width: #{$space}#{$option} !important;
+      }
+    } @else if $option == 'vh'{
+      .height-#{$space} {
+        height: #{$space}#{$option} !important;
+      }
+    } @else {
+      .width-#{$space} {
+        width: #{$space}#{$option} !important;
+      }
+
+      .height-#{$space} {
+        height: #{$space}#{$option} !important;
+      }
+    }
+  }
+}
+
+$alignments: ("center", "space-between", "space-around", "space-evenly", "flex-start", "flex-end");
+
+@each $align in $alignments {
+  .justify-#{$align} {
+    justify-content: #{$align};
+  }
+
+  .items-#{$align} {
+    align-items: #{$align};
+  }
+
+  .justify-items-#{$align} {
+    justify-items: #{$align};
+  }
+
+  .content-#{$align} {
+    align-content: #{$align};
+  }
+}
+
+$displayProps: ("block", "inline-block", "inline", "flex", "grid", "inline-flex", "inline-grid", "table", "inline-table", "list-item", "none", "contents");
+
+@each $disp in $displayProps {
+  .d-#{$disp} {
+    display: #{$disp};
+  }
+}
+
+$textAlignments: ("left", "right", "center", "revert");
+
+@each $textAlign in $textAlignments {
+  .text-#{$textAlign} {
+    text-align: #{$textAlign};
+  }
+}