diff --git a/static/src/less/homepage.less b/static/src/less/homepage.less
new file mode 100644
index 0000000..9d9670b
--- /dev/null
+++ b/static/src/less/homepage.less
@@ -0,0 +1,125 @@
+.index {
+  #header {
+    height: 100vh;
+    background: #232323;
+    background-size: cover;
+    background-position: fixed;
+    .jumbotron {
+      margin-top: 5vh; 
+      text-align: center; 
+      background-color: transparent; 
+      color: white; 
+      padding-bottom: 0; 
+      margin-bottom: 0;
+      h1 {
+        margin-bottom: 15px;
+      }
+      .icon {
+        cursor: pointer;
+        .transition(color 0.4s);
+        &:hover {
+          color: #ff7f00;
+        }
+      }
+    }
+  }
+  #intro-text {
+    background-color: #333;
+    .container {
+      text-align: center; 
+      margin-top: 35px; 
+      margin-bottom: 35px; 
+      color: white; 
+      font-size: 17px;
+    }
+  }
+
+
+  #project-images {
+    background: url(http://catesmechanical.com/images/blueprint-background1.jpg);
+    background-size: cover;
+    .container {
+      text-align: center; 
+      margin-top: 20px; 
+      margin-bottom: 35px;
+      font-size: 16px;
+      h1 {
+        margin-top: 0;
+        color: white;
+        font-size: 40px;
+      }
+      @media screen and (max-width: @screen-xs-max) {
+        .wrapper,
+        .wrapper .project {
+          height: 275px;
+          width: 275px;
+        }          
+      }
+
+      @media screen and (min-width: @screen-sm-min) {
+        .wrapper,
+        .wrapper .project {
+          height: 200px;
+          width: 200px;
+        }
+      }
+      @media screen and (min-width: @screen-md-min) {
+        .wrapper,
+        .wrapper .project {
+          height: 280px;
+          width: 280px;
+        }
+      }
+      & > div {
+        margin: 10px 0;
+      }
+
+      .wrapper {
+        color: white;
+        margin: 0 auto;
+        cursor: pointer;
+        background-size: cover;
+        background-position: center;
+        .box-shadow(0px 4px 5px 2px rgba(0,0,0,0.7));
+
+        &:hover .project {
+          opacity: 1;
+        } 
+
+        &.college {
+          background-image: url(http://cdn.ttgtmedia.com/rms/computerweekly/39826_college-of-richard-collyer.gif);
+        }
+        &.personal {
+          background-image: url(http://www.inzeed.com/kaleidoscope/wp-content/uploads/2014/11/stock-footage-computer-code-background1.jpg);
+        }
+        &.work {
+          background-image: url(http://www.recommendedagencies.com/images/logos/dabapps-logo-1432733278.jpg);
+        }
+
+        & .project {
+          padding: 15px;
+          .transition(~"opacity 0.5s ease-in");
+          opacity: 0;
+          background-color: rgba(0,0,0,0.6);
+
+          p, a.btn {
+            font-size: 12px;
+          }
+          h4 {
+            font-size: 23px;
+          }
+        }
+      }
+    }
+  }
+  #twitter-feed {
+    height: 75vh;
+    text-align: center;
+    .twitter-icon {
+      & > div{
+        height: 200px;
+        width: 200px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/static/src/less/style.less b/static/src/less/style.less
index f41688a..cd9587e 100644
--- a/static/src/less/style.less
+++ b/static/src/less/style.less
@@ -4,6 +4,8 @@
 // @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,700);
 @import (inline) "node_modules/animate.css/animate.css";
 @import (inline) "node_modules/normalize.css/normalize.css";
+@import 'homepage';
+
 
 /* @group Mixins */
 .transition(@value) {
@@ -49,131 +51,3 @@ a.no-color-change {
   }
 }
 /* @end Global */
-
-/* @group Homepage */
-.index {
-  #header {
-    height: 100vh;
-    background: #232323;
-    background-size: cover;
-    background-position: fixed;
-    .jumbotron {
-      margin-top: 5vh; 
-      text-align: center; 
-      background-color: transparent; 
-      color: white; 
-      padding-bottom: 0; 
-      margin-bottom: 0;
-      h1 {
-        margin-bottom: 15px;
-      }
-      .icon {
-        cursor: pointer;
-        .transition(color 0.4s);
-        &:hover {
-          color: #ff7f00;
-        }
-      }
-    }
-  }
-  #intro-text {
-    background-color: #333;
-    .container {
-      text-align: center; 
-      margin-top: 35px; 
-      margin-bottom: 35px; 
-      color: white; 
-      font-size: 17px;
-    }
-  }
-
-
-  #project-images {
-    background: url(http://catesmechanical.com/images/blueprint-background1.jpg);
-    background-size: cover;
-    .container {
-      text-align: center; 
-      margin-top: 20px; 
-      margin-bottom: 35px;
-      font-size: 16px;
-      h1 {
-        margin-top: 0;
-        color: white;
-        font-size: 40px;
-      }
-      @media screen and (max-width: @screen-xs-max) {
-        .wrapper,
-        .wrapper .project {
-          height: 275px;
-          width: 275px;
-        }          
-      }
-
-      @media screen and (min-width: @screen-sm-min) {
-        .wrapper,
-        .wrapper .project {
-          height: 200px;
-          width: 200px;
-        }
-      }
-      @media screen and (min-width: @screen-md-min) {
-        .wrapper,
-        .wrapper .project {
-          height: 280px;
-          width: 280px;
-        }
-      }
-      & > div {
-        margin: 10px 0;
-      }
-
-      .wrapper {
-        color: white;
-        margin: 0 auto;
-        cursor: pointer;
-        background-size: cover;
-        background-position: center;
-        .box-shadow(0px 4px 5px 2px rgba(0,0,0,0.7));
-
-        &:hover .project {
-          opacity: 1;
-        } 
-
-        &.college {
-          background-image: url(http://cdn.ttgtmedia.com/rms/computerweekly/39826_college-of-richard-collyer.gif);
-        }
-        &.personal {
-          background-image: url(http://www.inzeed.com/kaleidoscope/wp-content/uploads/2014/11/stock-footage-computer-code-background1.jpg);
-        }
-        &.work {
-          background-image: url(http://www.recommendedagencies.com/images/logos/dabapps-logo-1432733278.jpg);
-        }
-
-        & .project {
-          padding: 15px;
-          .transition(~"opacity 0.5s ease-in");
-          opacity: 0;
-          background-color: rgba(0,0,0,0.6);
-
-          p, a.btn {
-            font-size: 12px;
-          }
-          h4 {
-            font-size: 23px;
-          }
-        }
-      }
-    }
-  }
-  #twitter-feed {
-    height: 75vh;
-    text-align: center;
-    .twitter-icon {
-      & > div{
-        height: 200px;
-        width: 200px;
-      }
-    }
-  }
-}
-/* @end Homepage*/
\ No newline at end of file