diff --git a/site/layouts/partials/components/block.html b/site/layouts/partials/components/block.html
deleted file mode 100644
index 5c93d10..0000000
--- a/site/layouts/partials/components/block.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<!-- TODO convert to proper template -->
-<div class="js-block anim-block anim-block--4 anim-block-br block-styles">
-  <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
-</div>
-
-<div class="js-block anim-block anim-block--5>
-</div>
-
diff --git a/site/layouts/partials/components/card.html b/site/layouts/partials/components/card.html
deleted file mode 100644
index 20fc748..0000000
--- a/site/layouts/partials/components/card.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- TODO convert to proper template -->
-<div class="card-layout">
-  <div class="c-img-card about-card">
-    <div class="c-img-card__header background-image"></div>
-    <div class="c-img-card__body">
-      <div class="c-img-card__body-bg body-background"></div>
-      <h3>Card Heading</h3>
-      <p>
-        Amet recusandae optio quia velit quisquam. Dolorem ipsam non modi est quisquam? Quia inventore neque amet laudantium impedit a, dignissimos. Repellendus vero animi saepe tempora quibusdam! Repudiandae esse ex adipisci
-      </p>
-    </div>
-  </div>
-</div>
-</div>
-
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index 4f190ec..9773fcb 100644
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@@ -1,3 +1,3 @@
 <footer class="footer transition-fade">
-	{{ partial "components/footer/footer-2-1-1.html" . }}
+	{{ partial "templates/footer/footer-2-1-1.html" . }}
 </footer>
diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html
index 9340239..424b11c 100644
--- a/site/layouts/partials/header.html
+++ b/site/layouts/partials/header.html
@@ -1,18 +1 @@
-<header class="header is-fixed">
-  <div class="l-underlay body-bg header-bg"></div>
-  <div class="l-wrapper">
-    <nav class="nav site-nav">
-      <ul class="l-flex-list-row site-nav-title">
-        <li><a href="{{ .Site.BaseURL }}"><span class="site-title">{{ .Site.Title }}</span></a></li>
-      </ul>
-      <label class="menu-toggle site-nav-menu-btn" for="menu-toggle"><span class="site-nav-menu-btn-text menu-text a">Menu</span><span class="menu-icon"></span></label>
-      <input id="menu-toggle" class="menu-toggle-input" type="checkbox">
-      <ul class="l-flex-list-row nav-item menu-toggle-menu site-nav-nav-list">
-        <li><a class="nav-link nav-link" href="{{ .Site.BaseURL }}">Home</a></li>
-        <li><a class="nav-link nav-link" href="#about">About</a></li>
-        <li><a class="nav-link nav-link" href="#services">Services</a></li>
-        <li><a class="nav-link nav-link" href="#contact">Contact</a></li>
-      </ul>
-    </nav>
-  </div>
-</header>
+{{ partial "templates/header/header.html" . }}
diff --git a/site/layouts/partials/hero.html b/site/layouts/partials/hero.html
index cd5244b..2bd8de6 100644
--- a/site/layouts/partials/hero.html
+++ b/site/layouts/partials/hero.html
@@ -1,12 +1,5 @@
 <article id="home">
   <div class="l-screen-full hero-bg">
-    <div class="hero">
-      <div class="hero__fg">
-        <h1 class="hero-title">How Can We Help You?</h1>
-          <p class="h4 hero-sub-title">Lorem itaque a nesciunt neque porro! Hic at expedita dignissimos nostrum omnis.<p>
-      </div>
-			<div class="hero__bg">
-			</div>
-    </div>
+	  {{ partial "templates/hero/hero.html" . }}
   </div>
 </article>
diff --git a/site/layouts/partials/components/footer/footer-2-1-1.html b/site/layouts/partials/templates/footer/footer-2-1-1.html
similarity index 100%
rename from site/layouts/partials/components/footer/footer-2-1-1.html
rename to site/layouts/partials/templates/footer/footer-2-1-1.html
diff --git a/site/layouts/partials/templates/header/header.html b/site/layouts/partials/templates/header/header.html
new file mode 100644
index 0000000..9340239
--- /dev/null
+++ b/site/layouts/partials/templates/header/header.html
@@ -0,0 +1,18 @@
+<header class="header is-fixed">
+  <div class="l-underlay body-bg header-bg"></div>
+  <div class="l-wrapper">
+    <nav class="nav site-nav">
+      <ul class="l-flex-list-row site-nav-title">
+        <li><a href="{{ .Site.BaseURL }}"><span class="site-title">{{ .Site.Title }}</span></a></li>
+      </ul>
+      <label class="menu-toggle site-nav-menu-btn" for="menu-toggle"><span class="site-nav-menu-btn-text menu-text a">Menu</span><span class="menu-icon"></span></label>
+      <input id="menu-toggle" class="menu-toggle-input" type="checkbox">
+      <ul class="l-flex-list-row nav-item menu-toggle-menu site-nav-nav-list">
+        <li><a class="nav-link nav-link" href="{{ .Site.BaseURL }}">Home</a></li>
+        <li><a class="nav-link nav-link" href="#about">About</a></li>
+        <li><a class="nav-link nav-link" href="#services">Services</a></li>
+        <li><a class="nav-link nav-link" href="#contact">Contact</a></li>
+      </ul>
+    </nav>
+  </div>
+</header>
diff --git a/site/layouts/partials/templates/hero/hero.html b/site/layouts/partials/templates/hero/hero.html
new file mode 100644
index 0000000..9559a92
--- /dev/null
+++ b/site/layouts/partials/templates/hero/hero.html
@@ -0,0 +1,9 @@
+    <div class="hero">
+      <div class="hero__fg">
+        <h1 class="hero-title">How Can We Help You?</h1>
+          <p class="h4 hero-sub-title">Lorem itaque a nesciunt neque porro! Hic at expedita dignissimos nostrum omnis.</p>
+      </div>
+			<div class="hero__bg">
+			</div>
+    </div>
+
diff --git a/src/css/imports/components/base.scss b/src/css/imports/components/base.scss
deleted file mode 100644
index 7febbd4..0000000
--- a/src/css/imports/components/base.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "card";
-@import "menu-toggle";
diff --git a/src/css/imports/components/card.scss b/src/css/imports/components/card.scss
deleted file mode 100644
index 3d422db..0000000
--- a/src/css/imports/components/card.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-.c-img-card {
-  $bp-collapse: $bp-s;
-
-  z-index: 1;
-  position: relative;
-  border-radius: 8px;
-  overflow: hidden;
-
-  &__body {
-    padding: 32px 48px;
-  }
-
-  &__body-bg {
-    z-index: -1;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-  }
-
-  @media (max-width: $bp-collapse) {
-    &__header,
-    &__body,
-    &__body-bg {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-    }
-
-    &__header {
-      z-index: -1;
-    }
-
-    &__body {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      text-align: center;
-    }
-
-    &__body-bg {
-      opacity: 0.6;
-    }
-  }
-
-  @media (min-width: $bp-collapse) {
-    display: flex;
-    flex-direction: column;
-
-    &__header,
-    &__body {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    &__header {
-      flex: 0 1 50%;
-    }
-
-    &__body {
-      position: relative;
-      flex: 1 0 50%;
-    }
-
-    &__body-bg {
-      opacity: 1;
-    }
-  }
-}
diff --git a/src/css/imports/footer.scss b/src/css/imports/footer.scss
index 80e7243..e1ae9d7 100644
--- a/src/css/imports/footer.scss
+++ b/src/css/imports/footer.scss
@@ -1 +1 @@
-@import "components/footer/footer-2-1-1";
+@import "templates/footer/footer-2-1-1";
diff --git a/src/css/imports/header.scss b/src/css/imports/header.scss
index ff65bab..24f38a6 100644
--- a/src/css/imports/header.scss
+++ b/src/css/imports/header.scss
@@ -1,89 +1 @@
-.header-bg {
-  background-color: rgba(pink, 0.5);
-  opacity: 0.6;
-}
-
-.header {
-  z-index: $z-index__header;
-  position: relative;
-  top: 0;
-  left: 0;
-  width: 100%;
-
-  &.is-fixed {
-    position: fixed;
-
-    .header-bg {
-    }
-  }
-
-  &.is-absolute {
-    position: absolute;
-  }
-}
-
-.nav {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-
-  li {
-    margin-bottom: 0;
-  }
-}
-
-.nav-item {
-  margin: 0;
-}
-
-.nav-link {
-  display: block;
-  padding: 0.5 * $unit-size $unit-size;
-
-  @media (min-width: $bp-m) {
-    padding: 0.5 * $unit-size 2 * $unit-size;
-  }
-
-  &:last-child {
-    padding-right: 0;
-  }
-}
-
-.site-nav {
-  &-menu-btn {
-    @media (max-width: $bp-s) {
-      margin: 0;
-      padding: 6px 0 6px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-  }
-
-  &-nav-list {
-    @media (max-width: $bp-s) {
-      position: fixed;
-      top: 4rem;
-      bottom: 2rem;
-      left: 2rem;
-      right: 2rem;
-
-      background-color: rgba(pink, 0.5);
-    }
-  }
-}
-
-.menu-text {
-  margin-right: 0.5rem;
-}
-
-.menu-icon {
-  display: block;
-  height: 1.6rem;
-  width: 1.6rem;
-
-  border-radius: 3px;
-  background-color: currentColor;
-}
-
+@import "templates/header/header";
diff --git a/src/css/imports/components/footer/footer-2-1-1.scss b/src/css/imports/templates/footer/footer-2-1-1.scss
similarity index 100%
rename from src/css/imports/components/footer/footer-2-1-1.scss
rename to src/css/imports/templates/footer/footer-2-1-1.scss
diff --git a/src/css/imports/templates/header/header.scss b/src/css/imports/templates/header/header.scss
new file mode 100644
index 0000000..504eacc
--- /dev/null
+++ b/src/css/imports/templates/header/header.scss
@@ -0,0 +1,88 @@
+@import "menu-toggle";
+
+.header-bg {
+  background-color: rgba(pink, 0.5);
+  opacity: 0.6;
+}
+
+.header {
+  z-index: $z-index__header;
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+
+  &.is-fixed {
+    position: fixed;
+  }
+
+  &.is-absolute {
+    position: absolute;
+  }
+}
+
+.nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  li {
+    margin-bottom: 0;
+  }
+}
+
+.nav-item {
+  margin: 0;
+}
+
+.nav-link {
+  display: block;
+  padding: 0.5 * $unit-size $unit-size;
+
+  @media (min-width: $bp-m) {
+    padding: 0.5 * $unit-size 2 * $unit-size;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+}
+
+.site-nav {
+  &-menu-btn {
+    @media (max-width: $bp-s) {
+      margin: 0;
+      padding: 6px 0 6px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  &-nav-list {
+    @media (max-width: $bp-s) {
+      position: fixed;
+      top: 4rem;
+      bottom: 2rem;
+      left: 2rem;
+      right: 2rem;
+
+      background-color: rgba(pink, 0.5);
+    }
+  }
+}
+
+.menu-text {
+  margin-right: 0.5rem;
+}
+
+.menu-icon {
+  display: block;
+  height: 1.6rem;
+  width: 1.6rem;
+
+  border-radius: 3px;
+  background-color: currentColor;
+}
+
diff --git a/src/css/imports/components/menu-toggle.scss b/src/css/imports/templates/header/menu-toggle.scss
similarity index 100%
rename from src/css/imports/components/menu-toggle.scss
rename to src/css/imports/templates/header/menu-toggle.scss
diff --git a/src/css/main.css b/src/css/main.css
index cff3b0d..98fe781 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -9,8 +9,6 @@
 @import "imports/layout.scss";
 @import "imports/utility.scss";
 
-@import "imports/components/base.scss";
-
 @import "imports/header.scss";
 @import "imports/hero.scss";
 @import "imports/about.scss";