diff --git a/_sass/_base.scss b/_sass/_base.scss
index 1caef0f..35929c9 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -7,39 +7,6 @@ figure {
     margin: 1em 0 !important;
 }
 
-.header {
-	display: flex;
-    justify-content: space-between;
-    align-items: center;
-	padding-bottom: $spacer-2;
-	margin-bottom: $spacer-4;
-	border-bottom: solid 1px $border-gray-light;
-
-	&-title a:hover {
-        text-decoration: none;
-	}
-
-    &-search {
-        flex:auto;
-        margin-right: $spacer-6;
-        margin-left: $spacer-6;
-    }
-
-	&-links {
-		list-style: none;
-		margin: $spacer-2 0;
-		li {
-			display: inline-block;
-		}
-	}
-}
-
-.footer {
-    margin-top: 3em;
-    padding: 1em;
-    border-top: 1px solid $gray-300;
-    color: $text-gray;
-}
 
 .container-sm {
     max-width: 512px;
@@ -58,18 +25,3 @@ figure {
         margin-top: 2em;
     }
 }
-
-.btn {
-
-    &:hover {
-        cursor: pointer;
-        color: $brand-color;
-    }
-}
-
-.btn-copy-code {
-    float: right;
-    .far, .fas {
-        color: $text-gray !important;
-    }
-}
diff --git a/_sass/component/_button.scss b/_sass/component/_button.scss
new file mode 100644
index 0000000..692df02
--- /dev/null
+++ b/_sass/component/_button.scss
@@ -0,0 +1,15 @@
+
+.btn {
+
+    &:hover {
+        cursor: pointer;
+        color: $brand-color;
+    }
+
+    &-copy-code {
+        float: right;
+        .far, .fas {
+            color: $text-gray !important;
+        }
+    }
+}
diff --git a/_sass/layout/_footer.scss b/_sass/layout/_footer.scss
new file mode 100644
index 0000000..f96e6eb
--- /dev/null
+++ b/_sass/layout/_footer.scss
@@ -0,0 +1,7 @@
+
+.footer {
+    margin-top: 3em;
+    padding: 1em;
+    border-top: 1px solid $gray-300;
+    color: $text-gray;
+}
diff --git a/_sass/layout/_header.scss b/_sass/layout/_header.scss
new file mode 100644
index 0000000..8a054eb
--- /dev/null
+++ b/_sass/layout/_header.scss
@@ -0,0 +1,27 @@
+
+.header {
+	display: flex;
+    justify-content: space-between;
+    align-items: center;
+	padding-bottom: $spacer-2;
+	margin-bottom: $spacer-4;
+	border-bottom: solid 1px $border-gray-light;
+
+	&-title a:hover {
+        text-decoration: none;
+	}
+
+    &-search {
+        flex:auto;
+        margin-right: $spacer-6;
+        margin-left: $spacer-6;
+    }
+
+	&-links {
+		list-style: none;
+		margin: $spacer-2 0;
+		li {
+			display: inline-block;
+		}
+	}
+}
diff --git a/_sass/main.scss b/_sass/main.scss
index 9d990f7..68a38df 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -5,6 +5,10 @@
 @import "base";
 @import "typography";
 
+@import "layout/header";
+@import "layout/footer";
+
+@import "component/button";
 @import "component/collapse";
 @import "component/search";