diff --git a/src/App.vue b/src/App.vue
index 300d95d..d9d31f2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,11 @@
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
 
+<SparcHeader link-component="router-link" :currentPath="$route.name"/>
+      <el-date-picker
+        v-model="date1"
+        type="date"
+        placeholder="Pick a day">
+      </el-date-picker>
     <div>
 
     <sparc-checkbox
@@ -35,8 +32,6 @@
     />
   </div>
  
-
-    <SparcLogo></SparcLogo>
     <breadcrumb-trail
         :breadcrumb="breadcrumbs"
         link-component="router-link"
@@ -385,12 +380,13 @@
         </div>
       </div>
     </content-tab-card>
-  </main>
+
 </template>
 
 <script>
   import ListCard from './components/ListCard/ListCard.vue'
   import HelloWorld from './components/HelloWorld.vue'
+  import SparcHeader from './components/SparcHeader.vue'
   import SparcTooltip from './components/SparcTooltip.vue'
   import SparcLogo from './components/SparcLogo.vue'
   import LargeModal from './components/largemodal.vue'
@@ -1130,9 +1126,11 @@
       }],
       activeTabId: "Team Information"
     }
+    const date1=""
   export default {
     components: {
       HelloWorld,
+      SparcHeader,
       SparcTooltip,
       SparcLogo,
       LargeModal,
@@ -1146,7 +1144,7 @@
       ContentOverviewCard,
       ContentTabCard,
       EventCard,
-      MultiSelect
+      MultiSelect,
       ListCard,
 
     },
@@ -1229,7 +1227,8 @@
         contentTabCard: tabCard,
         eventCardEvent,
         singleLevelSelectOptions,
-        multiLevelSelectOptions
+        multiLevelSelectOptions,
+        date1
 
       }
     },
diff --git a/src/components/SparcHeader.vue b/src/components/SparcHeader.vue
new file mode 100644
index 0000000..1d85e74
--- /dev/null
+++ b/src/components/SparcHeader.vue
@@ -0,0 +1,784 @@
+<template>
+    <div class="header">
+      <div class="header__nav">
+        <div class="header__nav--parent">
+          <template v-for="item in parentLinks" :key="item.displayTitle">
+            <component class="svg-icon" :is="item.icon" width="18" height="18" />
+            <!-- Expect this to be either nuxt-link or router-link -->
+            <component
+              :is="linkComponent"
+              :to="item.href"
+              class="nav5"
+            >{{ item.displayTitle }}</component>
+          </template>
+        </div>
+        <div class="header__nav--main">
+          <div class="nav-main-container">
+            <button class="nav-main-container__mobile-menu" @click="openMobileNav">
+              <Hamburger class="svg-icon" height="25" width="25"></Hamburger>
+            </button>
+            <div class="logo">
+              <component
+                :is="linkComponent"
+                :to="{ name: 'index' }"
+              >
+                <!-- Provide a way to slot in the logo -->
+                <slot name="logo">
+                  <sparc-logo />
+                </slot>
+              </component>
+            </div>
+            <button
+              v-if="shouldShowSearch"
+              class="nav-main-container__mobile-search"
+              @click="openMobileSearch"
+              @enter="executeSearch"
+            >
+              <magnifying-glass class="svg-icon" height="25" width="25" dir="left" ></magnifying-glass>
+            </button>
+            <div :class="[searchOpen ? 'search-overlay' : '']">
+              <div v-if="searchOpen" class="search-mobile">
+                <input type="text" placeholder="Search Datasets" />
+                <div class="search-mobile__close" @click="closeMobileSearch">
+                  x
+                </div>
+              </div>
+            </div>
+  
+            <div :class="[menuOpen ? 'overlay' : '']">
+              <div class="mobile-navigation" :class="[menuOpen ? 'open' : '']">
+                <ul>
+                  <li v-for="link in links" :key="link.href" style="z-index: 100;">
+                    <component
+                      :is="linkComponent"
+                      :to="link.href"
+                      :class="{ active: activeLink(link.href) }"
+                      exact-active-class="active"
+                    >{{ link.displayTitle }}</component>
+                  </li>
+                  <hr class="divider" />
+                </ul>
+                <ul class="mobile-navigation__links">
+                  <template v-for="item in parentLinks" :key="item.displayTitle" >
+                    <li class="nav6">
+                      <component :is="item.icon" width="18" height="18"></component>
+                      <component
+                        :is="linkComponent"
+                        :to="item.href"
+                      >{{ item.displayTitle }}</component>
+                    </li>
+                  </template>
+                </ul>
+                <div class="mobile-navigation__links--social">
+                  <a :href="twitterLink" target="_blank">
+                    <twitterLink class="svg-icon" width="30" height="26" color="#606266" ></twitterLink>
+                  </a>
+                  <a :href="youtubeLink" target="_blank">
+                    <youtubeLink class="svg-icon" width="30" height="26" color="#606266"></youtubeLink>
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div class="nav-main-container__search">
+              <el-input
+                v-model="searchQuery"
+                type="text"
+                class="nav-main-container__search-input"
+                placeholder="Search"
+                @keyup.native.enter="executeSearch"
+              >
+              <template v-slot:prepend>
+                <el-select v-model="searchSelect">
+                  <el-option
+                    v-for="option in searchSelectOptions"
+                    :key="option.key"
+                    :label="option.label"
+                    :value="option.value"
+                  />
+                </el-select>
+              </template>
+              </el-input>
+              <button class="nav-main-container__search-button" @click="executeSearch">
+                <magnifying-glass 
+                  class="svg-icon"
+                  color="white"
+                  height="25"
+                  width="25"
+                  dir="left">
+
+                </magnifying-glass>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import SparcLogo from "./SparcLogo.vue"
+  import Help from "./icons/Help.vue"
+  import Contact from "./icons/Contact.vue";
+  import About from "./icons/About.vue";
+  import Hamburger from "./icons/Hamburger.vue";
+  import MagnifyingGlass from "./icons/MagnifyingGlass.vue"
+  import YoutubeFull from "./icons/YoutubeFull.vue";
+  import TwitterFull from "./icons/TwitterFull.vue";
+
+  export default {
+    name: "SparcHeader",
+    props: {
+      linkComponent: {
+        type: String,
+        default: "nuxt-link"
+      },
+      twitterLink: {
+        type: String,
+        default: "https://twitter.com/sparc_science"
+      },
+      youtubeLink: {
+        type: String,
+        default: "https://www.youtube.com/results?search_query=sparc+nih"
+      },
+      links: {
+        type: Array,
+        default: function() { return [
+            {
+              title: "index",
+              displayTitle: "Home",
+              href: "/"
+            },
+            {
+              title: "data",
+              displayTitle: "Find Data",
+              href: "/data?type=dataset"
+            },
+            {
+              title: "resources",
+              displayTitle: "Tools & Resources",
+              href:""
+           //   href: `/resources?type=${process.env.ctf_resource_id}`
+            },
+            {
+              title: "maps",
+              displayTitle: "Maps",
+              href: "/maps"
+            },
+            {
+              title: "news-and-events",
+              displayTitle: "News & Events",
+              href: "/news-and-events"
+            }
+          ]
+        }
+      },
+      parentLinks: {
+        type: Array,
+        default: function() { return [
+            {
+              displayTitle: "About SPARC",
+              icon: "about",
+              href: "about"
+            },
+            {
+              displayTitle: "Contact Us",
+              icon: "contact",
+              href: "/contact-us"
+            },
+            {
+              displayTitle: "Need Help?",
+              icon: "help",
+              href: "help"
+            }
+          ] 
+        }
+      },
+      currentPath: {
+        type: String,
+        default: "/"
+      }
+    },
+    components: {
+      SparcLogo,
+      Help,
+      Contact,
+      About,
+      MagnifyingGlass,
+      Hamburger,
+      TwitterFull,
+      YoutubeFull
+    },
+    data: () => ({
+      menuOpen: false,
+      searchOpen: false,
+      searchQuery: "",
+      searchSelect: "data",
+      searchSelectOptions: [
+        {
+          key: "data",
+          value: "data",
+          label: "Datasets"
+        },
+        {
+          key: "resources",
+          value: "resources",
+          label: "Resources"
+        },
+        {
+          key: "news-and-events",
+          value: "news-and-events",
+          label: "News and Events"
+        },
+        {
+          key: "help",
+          value: "help",
+          label: "Support Center"
+        }
+      ]
+    }),
+  
+    computed: {
+      /**
+       * Compute if search should be visible
+       * @returns {Boolean}
+       */
+      shouldShowSearch: function() {
+        if (this.$route)
+          return this.$route.name !== "data";
+        else
+          return true
+      }
+    },
+  
+    watch: {
+      /**
+       * Watches for the route path to hide
+       * mobile nav on menu click
+       **/
+      currentPath: {
+        handler: function(val) {
+          if (val) {
+            this.menuOpen = false;
+          }
+        },
+        immediate: true
+      },
+  
+      /**
+       * Watches menuOpen to check if it's false
+       * to enable scrolling
+       */
+      menuOpen: {
+        handler: function(val) {
+          if (!val) {
+            this.$emit("updateDisabledScrolling", false);
+          }
+        },
+        immediate: true
+      }
+    },
+  
+    methods: {
+      /**
+       * Sets a link to active based on current page
+       * @param {String} query
+       */
+      activeLink: function(query) {
+        if (this.currentPath === query) {
+          return true;
+        } else {
+          return false;
+        }
+      },
+      /**
+       * Opens the mobile version of the navigation
+       */
+      openMobileNav: function() {
+        if (!this.menuOpen) {
+          this.searchOpen = false; // just in case the search menu is open aconstso
+          this.$emit("updateDisabledScrolling", false);
+          this.menuOpen = true;
+        } else {
+          this.menuOpen = false;
+          this.$emit("updateDisabledScrolling", false);
+        }
+      },
+  
+      /**
+       * Opens the mobile version of the search bar
+       */
+      openMobileSearch: function() {
+        this.searchOpen = true;
+        this.menuOpen = false;
+        this.$emit("updateDisabledScrolling", false);
+      },
+  
+      /**
+       * Closes the mobile version of the search bar
+       */
+      closeMobileSearch: function() {
+        this.searchOpen = false;
+        this.$emit("updateDisabledScrolling", false);
+      },
+  
+      /**
+       * Executes a search query based on selected
+       * option and query
+       */
+      executeSearch: function() {
+        const option = this.searchSelectOptions.find(
+          o => o.value === this.searchSelect
+        );
+        const searchKey = option.value === "data" ? "q" : "search";
+        const type =
+          option.value === "data"
+            ? "dataset"
+            : option.value === "resources"
+            ? "sparcPartners"
+            : undefined;
+  
+        this.$router.push({
+          name: option.value,
+          query: {
+            type,
+            [searchKey]: this.searchQuery
+          }
+        });
+  
+        this.searchQuery = "";
+        this.searchSelect = "data";
+      }
+    }
+  };
+  </script>
+  
+  <style scoped lang="scss">
+  @import '../assets/_variables.scss';
+  
+  .nav {
+    height: 4em;
+    padding: 0;
+    padding-top: 1rem;
+  }
+  
+  .header {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    @media (min-width: 320px) and (max-width: 1023px) {
+      align-items: center;
+    }
+  }
+  @media (min-width: 320px) and (max-width: 1023px) {
+    .overlay {
+      position: absolute;
+      top: 56px;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 10;
+      background-color: rgba(0, 0, 0, 0.25);
+    }
+  }
+  
+  @media (min-width: 320px) and (max-width: 1023px) {
+    .search-overlay {
+      position: absolute;
+      top: 56px;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 10;
+      background-color: rgba(0, 0, 0, 0.25);
+    }
+  }
+  
+  .divider {
+    display: none;
+    @media screen and (max-width: 1023px) {
+      border: 0;
+      clear: both;
+      display: block;
+      width: 89%;
+      background-color: $lightGrey;
+      height: 1px;
+      margin-left: 0;
+      margin-top: 11px;
+    }
+  }
+  
+  .header__nav {
+    background-color: $darkBlue;
+    width: 100%;
+  }
+  
+  .header__nav--parent {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    .svg-icon {
+      color: $cochlear;
+      padding-right: 0.5rem;
+      padding-top: 0.2rem;
+    }
+    img {
+      margin-right: 5px;
+    }
+    a {
+      padding-right: 32px;
+      text-decoration: none;
+    }
+    @media (min-width: 320px) and (max-width: 1023px) {
+      & {
+        display: none;
+      }
+    }
+  }
+  
+  .header__nav--main {
+    height: 82px;
+    background-color: $cochlear;
+    padding-top: 2rem;
+    padding-left: 33px;
+    display: flex;
+    flex-direction: row;
+    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 25%), 0 2px 2px 0 rgb(33 43 54 / 20%);
+    @media (min-width: 320px) and (max-width: 1023px) {
+      height: 41px;
+      padding-left: 0;
+      padding-top: 9px;
+      .nav-main-container__mobile-menu {
+        padding-left: 2px;
+      }
+      box-shadow: none;
+    }
+  
+    .mobile-navigation__links {
+      display: none;
+      &--social {
+        display: none;
+      }
+      @media (min-width: 320px) and (max-width: 1023px) {
+        display: flex;
+        flex-direction: column;
+        a {
+          font-size: 12px;
+          margin-left: 0.5rem;
+          line-height:24px;
+          font-weight:400;
+        }
+  
+        &--social {
+          display: flex;
+          flex-direction: row;
+          margin-top: 15rem;
+          .svg-icon {
+            margin-right: 1rem;
+          }
+        }
+      }
+    }
+  
+    a {
+      color: $app-secondary-color;
+      font-size: 16px;
+      line-height: 32px;
+      font-weight: 500;
+      padding-top: 5px;
+      text-decoration: none;
+    }
+  }
+  
+  .nav-main-container__mobile-search {
+    background: none;
+    border: none;
+    color: #000;
+    display: flex;
+    outline: none;
+    padding-bottom: 1rem;
+    cursor: pointer;
+    &:hover:not(:active),
+    &:focus:not(:active) {
+      color: $app-primary-color;
+    }
+    @media (min-width: 64em) {
+      display: none;
+    }
+  }
+  
+  .nav-main-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    @media (min-width: 320px) and (max-width: 1023px) {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin: 0;
+      width: 100%;
+      box-shadow: 0 2px 2px 0 rgb(0 0 0 / 25%), 0 2px 2px 0 rgb(33 43 54 / 20%);
+    }
+  }
+  
+  .logo
+  {
+    height: 62px;
+    width: 127px;
+    white-space: nowrap;
+    margin-right: 16px;
+    @media (min-width: 320px) and (max-width: 1023px) {
+      height: 2rem;
+      width: 100%;
+      margin-right: 0;
+      padding-top: 0.1rem;
+    }
+  }
+  
+  .nav-main-container__search {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    width: 54%;
+    margin-right: 1rem;
+    @media (min-width: 320px) and (max-width: 1023px) {
+      width: 0;
+    }
+  }
+  
+  .nav-main-container__search-input {
+    width: 30vw;
+    height: 34px;
+  
+    @media screen and (max-width: 1023px) {
+      display: none;
+    }
+    .el-select {
+      width: 150px;
+      :deep(.el-input--suffix) {
+        .el-input__wrapper{
+          padding:0;
+        }
+        .el-input__inner {
+          // border-radius: 4px 0px 0px 5px; 
+          // border: solid 1px $lightGrey;
+        }
+      }
+    }
+  }
+  
+  .nav-main-container__search-button {
+    background-color: $app-primary-color;
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    margin-left: 9px;
+    margin-top: 1px;
+    border: none;
+    cursor: pointer;
+    @media screen and (max-width: 1023px) {
+      display: none;
+    }
+  }
+  
+  ::placeholder {
+    /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: #909399;
+    opacity: 1; /* Firefox */
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 32px;
+    padding-left: 7px;
+  }
+  
+  :-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: lightgray;
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 32px;
+    padding-left: 7px;
+  }
+  
+  .nav-main-container__mobile-menu {
+    background: none;
+    border: none;
+    color: #000;
+    display: none;
+    font-size: 24px;
+    margin: 0;
+    outline: none;
+    padding: 10px;
+    transform: translate(12px, -8px);
+    -webkit-appearance: none;
+  
+    &:hover:not(:active),
+    &:focus:not(:active) {
+      color: $app-primary-color;
+    }
+  
+    @media screen and (max-width: 1023px) {
+      & {
+        display: block;
+      }
+    }
+  }
+  
+  .mobile-navigation {
+    padding: 0px;
+    height: 100%;
+    margin-left: 1rem;
+    width: 120%;
+    ul {
+      padding-left: 0;
+      margin-top: 0.5rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      li {
+        display: inline;
+        padding-right: 5rem;
+        @media screen and (min-width: 1023px) {
+          padding-right: 0.5rem;
+        }
+  
+        a {
+          text-decoration: none;
+          color: $darkBlue;
+          padding-bottom: 0.2rem;
+          font-weight: 500;
+  
+          &.active,
+          &:hover,
+          &:focus {
+            border-bottom: 2px solid $app-primary-color;
+            color: $app-primary-color;
+          }
+        }
+      }
+  
+      @media (min-width: 320px) and (max-width: 1023px) {
+        a {
+          font-size: 14px;
+          font-weight: 300;
+          line-height: 32px;
+        }
+      }
+    }
+  
+    @media (min-width: 320px) and (max-width: 1023px) {
+      & {
+        background: $background;
+        bottom: 0;
+        display: none;
+        flex-direction: column;
+        left: 0;
+        padding: 1em;
+        position: fixed;
+        right: 6rem;
+        top: 3.4rem;
+        z-index: 9999;
+        &.open {
+          display: flex;
+          margin-left: 0;
+          margin-right: 1rem;
+          width: 14rem;
+          overflow: auto;
+        }
+      }
+      ul {
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+        padding: 0;
+        li {
+          margin: 0.25rem 0;
+        }
+      }
+    }
+  }
+  
+  .search-mobile {
+    display: none;
+  }
+  
+  @media (min-width: 320px) and (max-width: 1023px) {
+    .search-mobile {
+      background-color: $cochlear;
+      flex-direction: column;
+      left: 0;
+      position: fixed;
+      right: 6rem;
+      top: 3.4rem;
+      z-index: 9999;
+      display: flex;
+      width: 100%;
+      height: 3rem;
+      line-height:3rem;
+      padding-left:1rem;
+      border-top: solid 1px lightgray;
+      box-shadow: 0 2px 2px 0 rgb(0 0 0 / 25%), 0 2px 2px 0 rgb(33 43 54 / 20%);
+  
+      &__close {
+        width: 27px;
+        height: 3rem;
+        position: inherit;
+        right: 0.8rem;
+        line-height:3rem;
+        cursor: pointer;
+      }
+  
+      &--icon {
+        color: $neutralGrey;
+        width: 20px;
+        height: 20px;
+      }
+  
+      input {
+        height: 100%;
+        font-size: 16px;
+        width: 90%;
+        border:none;
+        &:focus-visible {
+          outline:none;
+        }
+      }
+    }
+  
+    input {
+      height: 2rem;
+      font-size: 16px;
+      width: 90%;
+    }
+  
+    ::placeholder {
+      /* Chrome, Firefox, Opera, Safari 10.1+ */
+      color: lightgrey;
+      opacity: 1; /* Firefox */
+      font-size: 16px;
+      font-weight: 300;
+      line-height: 32px;
+      padding-left: 7px;
+    }
+  
+    :-ms-input-placeholder {
+      /* Internet Explorer 10-11 */
+      color: lightgrey;
+      font-size: 16px;
+      font-weight: 300;
+      line-height: 32px;
+      padding-left: 7px;
+    }
+  }
+  
+  .data-portal-title {
+    font-size: 14px;
+    color: #303133;
+    line-height: 14px;
+    position: relative;
+    bottom: 5px;
+    margin-left: 5px;
+    user-select: none;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/components/icons/About.vue b/src/components/icons/About.vue
new file mode 100644
index 0000000..796d172
--- /dev/null
+++ b/src/components/icons/About.vue
@@ -0,0 +1,31 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :width="width"
+      :height="height"
+      :fill="color"
+      viewBox="0 0 24 24"
+    >
+    <path pid="0" d="M12 5a7 7 0 11-7 7 7.008 7.008 0 017-7m0-2a9 9 0 109 9 9 9 0 00-9-9z"/><path pid="1" d="M12 7.148a.9.9 0 10.9.9.9.9 0 00-.9-.9zM12 17.148a1 1 0 01-1-1v-5.4a1 1 0 112 0v5.4a1 1 0 01-1 1z"/>
+   </svg>
+  </template>
+  
+  <script>
+  export default {
+    name: "About",
+    props: {
+      width: {
+        type: Number,
+        default: 16,
+      },
+      height: {
+        type: Number,
+        default: 16,
+      },
+      color: {
+        type: String,
+        default: "currentColor",
+      },
+    },
+  };
+  </script>
\ No newline at end of file
diff --git a/src/components/icons/Contact.vue b/src/components/icons/Contact.vue
new file mode 100644
index 0000000..5d1cc25
--- /dev/null
+++ b/src/components/icons/Contact.vue
@@ -0,0 +1,31 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :width="width"
+      :height="height"
+      :fill="color"
+      viewBox="0 0 24 24"
+    >
+   <path pid="0" d="M19 5.6v7.219h-4.181V16.1l-3.889-3.282H5V5.6h14m2-2H3v11.218h7.2l3.331 2.81 3.288 2.772v-5.582H21V3.6z"/>
+   </svg>
+  </template>
+  
+  <script>
+  export default {
+    name: "Contact",
+    props: {
+      width: {
+        type: Number,
+        default: 16,
+      },
+      height: {
+        type: Number,
+        default: 16,
+      },
+      color: {
+        type: String,
+        default: "currentColor",
+      },
+    },
+  };
+  </script>
diff --git a/src/components/icons/Hamburger.vue b/src/components/icons/Hamburger.vue
new file mode 100644
index 0000000..30c8b0a
--- /dev/null
+++ b/src/components/icons/Hamburger.vue
@@ -0,0 +1,32 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :width="width"
+      :height="height"
+      :fill="color"
+      viewBox="0 0 24 24"
+    >
+    <path pid="0" d="M20 8H4a1 1 0 010-2h16a1 1 0 010 2zM20 13H4a1 1 0 010-2h16a1 1 0 010 2zM20 18H4a1 1 0 010-2h16a1 1 0 010 2z"/>
+   </svg>
+  </template>
+  
+  <script>
+  export default {
+    name: "Hamburger",
+    props: {
+      width: {
+        type: Number,
+        default: 16,
+      },
+      height: {
+        type: Number,
+        default: 16,
+      },
+      color: {
+        type: String,
+        default: "currentColor",
+      },
+    },
+  };
+  </script>
+    
\ No newline at end of file
diff --git a/src/components/icons/Help.vue b/src/components/icons/Help.vue
index 9b4dd10..0c90808 100644
--- a/src/components/icons/Help.vue
+++ b/src/components/icons/Help.vue
@@ -1,8 +1,27 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" :width="width" :height="height" :fill="color">
     <title>Help Icon</title>
     <circle cx="12" cy="15.824" r="0.753"/>
     <path d="M12,14.256a.75.75,0,0,1-.75-.75v-1c0-.529.419-.818.862-1.124.623-.43,1.138-.83,1.138-1.376A1.209,1.209,0,0,0,12,8.756a1.252,1.252,0,0,0-1.25,1.25.75.75,0,0,1-1.5,0A2.753,2.753,0,0,1,12,7.256a2.721,2.721,0,0,1,2.75,2.75,3.3,3.3,0,0,1-1.786,2.61c-.079.055-.152.1-.214.147v.743A.75.75,0,0,1,12,14.256Z"/>
     <path d="M12,5a7,7,0,1,1-7,7,7.008,7.008,0,0,1,7-7m0-2a9,9,0,1,0,9,9,9,9,0,0,0-9-9Z"/>
   </svg>
-</template>
\ No newline at end of file
+</template>
+<script>
+export default {
+  name: "Calendar",
+  props: {
+    width: {
+      type: Number,
+      default: 16,
+    },
+    height: {
+      type: Number,
+      default: 17,
+    },
+    color: {
+      type: String,
+      default: "currentColor",
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/icons/MagnifyingGlass.vue b/src/components/icons/MagnifyingGlass.vue
new file mode 100644
index 0000000..a09810d
--- /dev/null
+++ b/src/components/icons/MagnifyingGlass.vue
@@ -0,0 +1,37 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="width"
+    :height="height"
+    :fill="color"
+    :direction="dir"
+    viewBox="0 0 24 24"
+  >
+  <path pid="0" d="M13 4c-3.3 0-6 2.7-6 6 0 1.3.4 2.5 1.1 3.5l-4.8 4.8c-.4.4-.4 1 0 1.4.2.2.4.3.7.3s.5-.1.7-.3l4.8-4.8c1 .7 2.2 1.1 3.5 1.1 3.3 0 6-2.7 6-6s-2.7-6-6-6zm0 10c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"/>
+ </svg>
+</template>
+
+<script>
+export default {
+  name: "MagnifyingGlass",
+  props: {
+    width: {
+      type: Number,
+      default: 16,
+    },
+    height: {
+      type: Number,
+      default: 16,
+    },
+    color: {
+      type: String,
+      default: "currentColor",
+    },
+    dir:{
+      type:String,
+      default: "ltr"
+    }
+  },
+};
+</script>
+
diff --git a/src/components/icons/TwitterFull.vue b/src/components/icons/TwitterFull.vue
new file mode 100644
index 0000000..88a76f4
--- /dev/null
+++ b/src/components/icons/TwitterFull.vue
@@ -0,0 +1,33 @@
+
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :width="width"
+      :height="height"
+      :fill="color"
+      viewBox="0 0 24 19.5"
+    >
+    <path pid="0" d="M7.5 19.5c9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5-.9.4-1.9.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-1.9-2-5-2.1-7-.2-1.3 1.2-1.8 3-1.4 4.7C7.9 5.8 4.2 4 1.7.9.4 3.1 1 6 3.2 7.5c-.8-.1-1.6-.3-2.2-.6V7c0 2.3 1.7 4.4 4 4.8-.7.2-1.5.2-2.2.1.6 2 2.5 3.4 4.6 3.4-1.7 1.4-3.9 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.4 2.2"/>
+   </svg>
+  </template>
+  
+  <script>
+  export default {
+    name: "TwitterFull",
+    props: {
+      width: {
+        type: Number,
+        default: 16,
+      },
+      height: {
+        type: Number,
+        default: 16,
+      },
+      color: {
+        type: String,
+        default: "currentColor",
+      },
+    },
+  };
+  </script>
+    
\ No newline at end of file
diff --git a/src/components/icons/YoutubeFull.vue b/src/components/icons/YoutubeFull.vue
new file mode 100644
index 0000000..7888625
--- /dev/null
+++ b/src/components/icons/YoutubeFull.vue
@@ -0,0 +1,32 @@
+
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :width="width"
+      :height="height"
+      :fill="color"
+      viewBox="0 0 24 19.5"
+    >
+    <path pid="0" d="M23.5 2.6c-.3-1-1.1-1.9-2.1-2.1C19.5 0 12 0 12 0S4.5 0 2.6.5C1.6.8.8 1.6.5 2.6 0 4.5 0 8.5 0 8.5s0 3.9.5 5.8c.3 1 1.1 1.9 2.1 2.1 1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5c1-.3 1.8-1.1 2.1-2.1.5-1.9.5-5.8.5-5.8s0-4-.5-5.9zM9.5 12V4.9l6.3 3.6L9.5 12z"/>
+   </svg>
+  </template>
+  
+  <script>
+  export default {
+    name: "YoutubeFull",
+    props: {
+      width: {
+        type: Number,
+        default: 16,
+      },
+      height: {
+        type: Number,
+        default: 16,
+      },
+      color: {
+        type: String,
+        default: "currentColor",
+      },
+    },
+  };
+  </script>
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
index c5a7a4a..077a71e 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -15,6 +15,9 @@ import Breadcrumb from './BreadcrumbTrail.vue'
 import IconCard from './IconCard.vue'
 import ContentTabCard from './ContentTabCard.vue'
 import ContentOverviewCard from './ContentOverviewCard.vue'
+import EventCard from './EventCard.vue'
+import SparcHeader from './SparcHeader.vue'
+
 
 export default {
   install(app) {
@@ -27,11 +30,12 @@ export default {
     app.component('DropdownMultiselect', DropdownMultiselect);
     app.component('Pagination', Pagination);
     app.component('PaginationMenu', PaginationMenu);
-    app.component('MultiSelect',MultiSelect);
+    app.component('EventCard',EventCard);
     app.component('ContentOverviewCard', ContentOverviewCard);
+    app.component('SparcHeader',SparcHeader);
+    app.component('MultiSelect',MultiSelect);
     app.component('Breadcrumb', Breadcrumb);
     app.component('IconCard', IconCard);
     app.component('ContentTabCard', ContentTabCard);
-
   },
 };
diff --git a/src/main.js b/src/main.js
index 17f7dfc..6a2d864 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,7 +6,12 @@ import {createRouter, createWebHashHistory} from 'vue-router'
 import App from './App.vue'
 
 const app = createApp(App)
-const routes = []
+const routes = [
+    {
+    name: "index",
+    path:"/index",
+}
+]
 const router = createRouter({history:createWebHashHistory(), routes})
 
 app.use(router)