diff --git a/src/html/index.html b/src/html/index.html
index b43d189..ee527fb 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -37,6 +37,8 @@
             <a class="nav-link" href="#forms">Forms</a>
           <li class="li">
             <a class="nav-link" href="#validation">Validation</a>
+          <li class="li">
+            <a class="nav-link" href="#spinners">Spinners</a>
         </ul>
       </nav>
 
@@ -51,6 +53,7 @@
         @@include('buttons.html')
         @@include('forms.html')
         @@include('validation.html')
+        @@include('spinners.html')
       </main>
 
     </div>
diff --git a/src/html/spinners.html b/src/html/spinners.html
new file mode 100644
index 0000000..2fc216a
--- /dev/null
+++ b/src/html/spinners.html
@@ -0,0 +1,82 @@
+<section id="spinners" class="section section-spinner">
+  <h1 class="h1">Spinners</h1>
+
+  <h2 class="h2">Usage</h2>
+
+  <p class="p">Hover over a spinner to see it in animation.</p>
+
+  <pre class="pre pre-code">
+&lt;svg class="spinner" viewbox='0 0 16 16'&gt;
+  &lt;circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"&gt;&lt;/circle&gt;
+&lt;/svg&gt;</pre>
+
+  <h2 class="h2">Colors</h2>
+
+  <p class="p">If no color is set, spinners will inherit their color from the text color.
+
+  <pre class="pre pre-code">
+&lt;svg class="spinner spinner-blue" viewbox='0 0 16 16'&gt;...&lt;/svg&gt;
+&lt;svg class="spinner spinner-gray" viewbox='0 0 16 16'&gt;...&lt;/svg&gt;
+&lt;svg class="spinner spinner-green" viewbox='0 0 16 16'&gt;...&lt;/svg&gt;
+&lt;svg class="spinner spinner-purple" viewbox='0 0 16 16'&gt;...&lt;/svg&gt;
+&lt;svg class="spinner spinner-white" viewbox='0 0 16 16'&gt;...&lt;/svg&gt;</pre>
+
+  <div class="spinners-demo">
+    <div class="spinner-wrapper spinner-md spinner-blue">
+      <svg class="spinner" viewbox="0 0 16 16">
+        <circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"></circle>
+      </svg>
+    </div>
+
+    <div class="spinner-wrapper spinner-md spinner-gray">
+      <svg class="spinner" viewbox="0 0 16 16">
+        <circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"></circle>
+      </svg>
+    </div>
+
+    <div class="spinner-wrapper spinner-md spinner-green">
+      <svg class="spinner" viewbox="0 0 16 16">
+        <circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"></circle>
+      </svg>
+    </div>
+
+    <div class="spinner-wrapper spinner-md spinner-purple">
+      <svg class="spinner" viewbox="0 0 16 16">
+        <circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"></circle>
+      </svg>
+    </div>
+
+    <div class="spinner-wrapper spinner-md spinner-white">
+      <svg class="spinner" viewbox="0 0 16 16">
+        <circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"></circle>
+      </svg>
+    </div>
+  </div>
+
+  <h2 class="h2">Sizes</h2>
+
+  <pre class="pre pre-code">
+&lt;svg class="spinner spinner-lg" viewbox='0 0 16 16'&gt;...&lt;/svg&gt;
+&lt;svg class="spinner spinner-md" viewbox='0 0 16 16'&gt;...&lt;/svg&gt;
+&lt;svg class="spinner spinner-sm" viewbox='0 0 16 16'&gt;...&lt;/svg&gt;</pre>
+
+  <div class="spinners-demo">
+    <div class="spinner-wrapper spinner-lg">
+      <svg class="spinner" viewbox="0 0 16 16">
+        <circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"></circle>
+      </svg>
+    </div>
+
+    <div class="spinner-wrapper spinner-md">
+      <svg class="spinner" viewbox="0 0 16 16">
+        <circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"></circle>
+      </svg>
+    </div>
+
+    <div class="spinner-wrapper spinner-sm">
+      <svg class="spinner" viewbox="0 0 16 16">
+        <circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"></circle>
+      </svg>
+    </div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/src/html/validation.html b/src/html/validation.html
index 44023f6..1fb3106 100644
--- a/src/html/validation.html
+++ b/src/html/validation.html
@@ -1,7 +1,7 @@
 <!-- section -->
 <section id="validation" class="section">
 
-<h1 class="h1">Validation</h1>
+  <h1 class="h1">Validation</h1>
 
   <h2 class="h2">Inputs</h2>
   <div class="forms-inputs">
@@ -32,4 +32,6 @@ <h2 class="h2">List of Requirements</h2>
   <ul class="list list-bulleted list-validation">
     <li class="list-item ng-invalid"> Use letters, numbers, and hyphens (-)
     <li class="list-item"> Use 10 characters or less
-    <li class="list-item"> Use a unique name
\ No newline at end of file
+    <li class="list-item"> Use a unique name
+  </ul>
+</section>
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index f3afd18..1eb09ec 100755
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -9,6 +9,8 @@
 
 //   California Style Sheets
 
+// scss-lint:disable StringQuotes
+
 // global
-@import "angular/index.scss";
-@import "styleguide.scss";
\ No newline at end of file
+@import "angular/index";
+@import "styleguide";
diff --git a/src/styles/scss/layout.scss b/src/styles/scss/layout.scss
index 9b68bbb..53cf2c5 100755
--- a/src/styles/scss/layout.scss
+++ b/src/styles/scss/layout.scss
@@ -45,12 +45,12 @@ body > svg {
 
 .main {
   margin-left: 240px;
-  padding: 30px;
+  padding: 30px 30px 300px;
   position: relative;
 
   @media (max-width: 960px) {
-    padding-top: 90px;
     margin: 0;
+    padding-top: 90px;
   }
 }
 
@@ -96,4 +96,4 @@ body > svg {
     padding: 15px;
     word-wrap: normal;
   }
-}
\ No newline at end of file
+}
diff --git a/src/styles/scss/spinners.scss b/src/styles/scss/spinners.scss
new file mode 100644
index 0000000..c468ddb
--- /dev/null
+++ b/src/styles/scss/spinners.scss
@@ -0,0 +1,33 @@
+.section-spinner {
+
+  .spinners-demo {
+    display: flex;
+    margin-left: 30px;
+  }
+
+  .spinner-wrapper {
+    align-items: center;
+    background: $gray-lighterest;
+    border: 1px solid $gray-lighter;
+    border-radius: $input-border-radius;
+    cursor: pointer;
+    display: flex;
+    float: left;
+    height: 90px;
+    margin: 6px;
+    width: 90px;
+
+    &:hover .spinner {
+      animation-play-state: running;
+    }
+
+    .spinner {
+      animation-play-state: paused;
+    }
+  }
+
+  .spinner-white {
+    background: $gray;
+    border-color: $gray-dark;
+  }
+}
diff --git a/src/styles/styleguide.scss b/src/styles/styleguide.scss
index 26e068e..00670bf 100755
--- a/src/styles/styleguide.scss
+++ b/src/styles/styleguide.scss
@@ -9,15 +9,18 @@
 
 //   California Style Sheets
 
+// scss-lint:disable StringQuotes
+
 // global
-@import "scss/layout.scss";
-@import "scss/links.scss";
-@import "scss/figures.scss";
+@import "scss/layout";
+@import "scss/links";
+@import "scss/figures";
 
 // specific
-@import "scss/runnabear.scss";
-@import "scss/colors.scss";
-@import "scss/themes.scss";
-@import "scss/icons.scss";
+@import "scss/runnabear";
+@import "scss/colors";
+@import "scss/themes";
+@import "scss/icons";
 @import "scss/forms";
-@import "scss/buttons";
\ No newline at end of file
+@import "scss/buttons";
+@import "scss/spinners";