diff --git a/static/css/styles.css b/static/css/styles.css
index 0d358e86..4ac8b562 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -46,11 +46,47 @@ h6 {
 
 body {
   background: #333;
-  color: #fff;
+  color: #ffffff;
+}
+
+.intro {
+  height: 100vh;
+}
+
+.intro h1 {
+  margin-top: 15vh;
+  font-size: 5em;
+  color: #ff6c00;
+}
+
+.intro h2 {
+  margin-top: 3vh;
+  font-size: 2em;
 }
 
 .input {
-  min-height: 1000px;
+  margin-top: 20vh;
+  min-height: 50px;
+}
+
+.input h4 {
+  font-size: 1.5em;
+  margin-bottom: 2em;
+}
+
+.upload {
+  width: 600px;
+}
+
+.submit {
+  padding: 10px;
+  border-radius: 5px;
+  background-color: #ff6c00;
+  color: #ffffff;
+}
+
+.submit:hover, .submit:active, .submit:focus {
+  background-color: #FF5300;
 }
 
 .spacer {
@@ -61,5 +97,29 @@ body {
 .video {
   width: 832px;
   height: auto;
+  margin-left: 8vw;
+}
+
+.pills {
+  margin-left: 8vw;
+}
+
+.nav-link {
+  color: #ff6c00;
+}
+
+.nav-link:hover {
+  color: #ffffff;
+}
+
+.active {
+  color: #ffffff;
+  background-color: #ff6c00 !important;
+}
+
+.tab-pane img {
+  width: 832px;
+  height: 400px;
+  margin-left: -8vw;
 }
 /*# sourceMappingURL=styles.css.map */
\ No newline at end of file
diff --git a/static/css/styles.css.map b/static/css/styles.css.map
index fe43c330..8da75d7e 100644
--- a/static/css/styles.css.map
+++ b/static/css/styles.css.map
@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AAAA,WAAW;AAQX,OAAO,CAAC,iGAAI;AAEZ,mEAAmE;AAuBnE,kBAAkB;AAClB,AAAA,IAAI,EAAC,IAAI,CAAA;EACP,SAAS,EAAE,IAAI;EACf,WAAW,EAhBD,QAAQ,EAAE,UAAU;EAiB9B,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;CACnB;;AAED,AAAA,CAAC,CAAA;EACC,MAAM,EAAE,UAAU;EAClB,WAAW,EAAE,KAAK;CAEnB;;AAED,AAAA,EAAE,EAAC,EAAE,EAAC,EAAE,EAAC,EAAE,EAAC,EAAE,EAAC,EAAE,CAAA;EACf,WAAW,EA7BE,QAAQ,EAAE,UAAU;EA8BjC,WAAW,EAnBG,KAAK;EAoBnB,WAAW,EAAE,GAAG;CACjB;;AACD,AAAA,EAAE,CAAA;EACA,SAAS,EA7BI,GAAG;CA8BjB;;AAED,AAAA,EAAE,CAAA;EACA,SAAS,EAhCI,KAAK;CAiCnB;;AAED,AAAA,EAAE,CAAA;EACA,SAAS,EAnCI,MAAM;CAoCpB;;AAED,AAAA,EAAE,CAAA;EACD,SAAS,EAtCI,GAAG;CAuChB;;AAED,AAAA,EAAE,CAAA;EACA,SAAS,EAzCI,MAAK;CA0CnB;;AAED,AAAA,EAAE,CAAA;EACA,SAAS,EA5CI,OAAM;CA6CpB;;AAGD,AAAA,IAAI,CAAC;EACH,UAAU,EA7EC,IAAI;EA8Ef,KAAK,EA5EA,IAAI;CA6EV;;AAGD,AAAA,MAAM,CAAC;EACL,UAAU,EAAE,MAAM;CACnB;;AAED,AAAA,OAAO,CAAC;EACN,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;CACZ;;AAED,AAAA,MAAM,CAAC;EACL,KAAK,EAAC,KAAK;EACX,MAAM,EAAC,IAAI;CACZ",
+    "mappings": "AAAA,WAAW;AASX,OAAO,CAAC,iGAAI;AAEZ,mEAAmE;AAuBnE,kBAAkB;AAClB,AAAA,IAAI,EAAC,IAAI,CAAA;EACP,SAAS,EAAE,IAAI;EACf,WAAW,EAhBD,QAAQ,EAAE,UAAU;EAiB9B,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;CACnB;;AAED,AAAA,CAAC,CAAA;EACC,MAAM,EAAE,UAAU;EAClB,WAAW,EAAE,KAAK;CAEnB;;AAED,AAAA,EAAE,EAAC,EAAE,EAAC,EAAE,EAAC,EAAE,EAAC,EAAE,EAAC,EAAE,CAAA;EACf,WAAW,EA7BE,QAAQ,EAAE,UAAU;EA8BjC,WAAW,EAnBG,KAAK;EAoBnB,WAAW,EAAE,GAAG;CACjB;;AACD,AAAA,EAAE,CAAA;EACA,SAAS,EA7BI,GAAG;CA8BjB;;AAED,AAAA,EAAE,CAAA;EACA,SAAS,EAhCI,KAAK;CAiCnB;;AAED,AAAA,EAAE,CAAA;EACA,SAAS,EAnCI,MAAM;CAoCpB;;AAED,AAAA,EAAE,CAAA;EACD,SAAS,EAtCI,GAAG;CAuChB;;AAED,AAAA,EAAE,CAAA;EACA,SAAS,EAzCI,MAAK;CA0CnB;;AAED,AAAA,EAAE,CAAA;EACA,SAAS,EA5CI,OAAM;CA6CpB;;AAGD,AAAA,IAAI,CAAC;EACH,UAAU,EA9EC,IAAI;EA+Ef,KAAK,EA5EA,OAAO;CA6Eb;;AAGD,AAAA,MAAM,CAAC;EACL,MAAM,EAAE,KAAK;CAYd;;AAbD,AAGE,MAHI,CAGJ,EAAE,CAAA;EACA,UAAU,EAAE,IAAI;EAChB,SAAS,EAAE,GAAG;EACd,KAAK,EAxFG,OAAO;CAyFhB;;AAPH,AASE,MATI,CASJ,EAAE,CAAC;EACD,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,GAAG;CACf;;AAIH,AAAA,MAAM,CAAC;EACL,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;CAOjB;;AATD,AAIE,MAJI,CAIJ,EAAE,CAAC;EACD,SAAS,EAAE,KAAK;EAChB,aAAa,EAAE,GAAG;CACnB;;AAIH,AAAA,OAAO,CAAC;EACN,KAAK,EAAE,KAAK;CACb;;AAED,AAAA,OAAO,CAAC;EACN,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,GAAG;EAClB,gBAAgB,EApHN,OAAO;EAqHjB,KAAK,EAnHA,OAAO;CAwHb;;AATD,AAME,OANK,AAMJ,MAAM,EANT,OAAO,AAMK,OAAO,EANnB,OAAO,AAMe,MAAM,CAAC;EACzB,gBAAgB,EAvHZ,OAAO;CAwHZ;;AAIH,AAAA,OAAO,CAAC;EACN,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;CACZ;;AAED,AAAA,MAAM,CAAC;EACL,KAAK,EAAC,KAAK;EACX,MAAM,EAAC,IAAI;EACX,WAAW,EAAE,GAAG;CACjB;;AAED,AAAA,MAAM,CAAC;EACL,WAAW,EAAE,GAAG;CACjB;;AAED,AAAA,SAAS,CAAC;EACR,KAAK,EA7IK,OAAO;CAkJlB;;AAND,AAGE,SAHO,AAGN,MAAM,CAAC;EACN,KAAK,EA9IF,OAAO;CA+IX;;AAEH,AAAA,OAAO,CAAC;EACN,KAAK,EAlJA,OAAO;EAmJZ,gBAAgB,EArJN,OAAO,CAqJY,UAAU;CACxC;;AAED,AACE,SADO,CACP,GAAG,CAAA;EACD,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,WAAW,EAAE,IAAI;CAClB",
     "sources": [
         "styles.scss"
     ],
diff --git a/static/css/styles.scss b/static/css/styles.scss
index cb45770f..72815b3a 100644
--- a/static/css/styles.scss
+++ b/static/css/styles.scss
@@ -1,7 +1,8 @@
 /*General*/
 $primary-bg: #333;
 $highlight: #ff6c00;
-$text: #fff;
+$hover: #FF5300;
+$text: #ffffff;
 $ease: all .15s ease-in-out;
 $row-spacing: 5%;
 $mobile-spacing: 25px;
@@ -81,10 +82,49 @@ body {
 }
 
 
+.intro {
+  height: 100vh;
+   
+  h1{
+    margin-top: 15vh;
+    font-size: 5em;
+    color: $highlight;
+  }
+
+  h2 {
+    margin-top: 3vh;
+    font-size: 2em;
+  }
+}
+
+
 .input {
-  min-height: 1000px;
+  margin-top: 20vh;
+  min-height: 50px;
+
+  h4 {
+    font-size: 1.5em;
+    margin-bottom: 2em;
+  }
+
+}
+
+.upload {
+  width: 600px;
+}
+
+.submit {
+  padding: 10px;
+  border-radius: 5px;
+  background-color: $highlight;
+  color: $text;
+
+  &:hover, &:active, &:focus {
+    background-color: $hover;
+  }
 }
 
+
 .spacer {
   height: 500px;
   width: 100%;
@@ -93,4 +133,29 @@ body {
 .video {
   width:832px;
   height:auto;
+  margin-left: 8vw;
+}
+
+.pills {
+  margin-left: 8vw;
+}
+
+.nav-link {
+  color: $highlight;
+
+  &:hover {
+    color: $text;
+  }
+}
+.active {
+  color: $text;
+  background-color: $highlight !important;
+}
+
+.tab-pane {
+  img{
+    width: 832px;
+    height: 400px;
+    margin-left: -8vw;
+  }
 }
\ No newline at end of file
diff --git a/static/js/custom-scripts.js b/static/js/custom-scripts.js
index e69de29b..56e27f90 100644
--- a/static/js/custom-scripts.js
+++ b/static/js/custom-scripts.js
@@ -0,0 +1,8 @@
+function getFiles() {
+const testFolder = '../static/upload/';
+const fs = require('fs');
+
+fs.readdirSync(testFolder).forEach(file => {
+  console.log(file);
+});
+}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index b60ade8d..718c2cbf 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -16,30 +16,30 @@
 
   <!--Intro to Site Page-->
   <div class="container">
-    <div class="intro">
-      <h1>Intelliment</h1>
-      <h2>Positivity Driven Education</h2>
-    </div>
+    <div class="intro ">
+      <h1 class="row justify-content-center">Intelliment</h1>
+      <h2 class="row justify-content-center">Positivity Driven Education</h2>
+   
     <div class="input">
-      <h4>Upload your video to get started!</h4>
+      <h4 class="row justify-content-center">Upload your video to get started!</h4>
       
       <!--Form to upload-->
-      <form method=post enctype=multipart/form-data>
-        <input type=file name=file>
-        <input type=submit value=Upload>
+      <form method=post enctype=multipart/form-data class="row justify-content-center">
+        <input type=file name=file class="upload">
+        <input type=submit value=Upload class="submit">
       </form>
-      
     </div>
+  </div>
 
-    <div class="video d-flex justify-content-center">
+    <div class="video d-flex row justify-content-center">
       <!-- 16:9 aspect ratio -->
-      <div class="embed-responsive embed-responsive-16by9">
-        <iframe class="embed-responsive-item" src="./static/upload/test.mp4"></iframe>
+      <div class="embed-responsive embed-responsive-16by9" >
+        <iframe allowfullscreen class="embed-responsive-item" src="../static/upload/test.mp4"></iframe>
       </div>
     </div>
     <br>
     <!--Pill Tabs-->
-    <div>
+    <div class="pills">
       <div>
         <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
           <li class="nav-item">
@@ -55,16 +55,16 @@ <h4>Upload your video to get started!</h4>
             <a class="nav-link" id="pills-four-tab" data-toggle="pill" href="#pills-four" role="tab" aria-controls="pills-four" aria-selected="false">Happy</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" id="pills-five-tab" data-toggle="pill" href="#pills-five" role="tab" aria-controls="pills-give" aria-selected="false">Sad</a>
+            <a class="nav-link" id="pills-five-tab" data-toggle="pill" href="#pills-five" role="tab" aria-controls="pills-five" aria-selected="false">Sad</a>
           </li>
         </ul>
       </div>
       <div class="tab-content d-flex justify-content-center" id="pills-tabContent">
-        <div class="tab-pane fade show active" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab"><img src="./static/graphs/angry.png"></div>
-        <div class="tab-pane fade" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab"><img src="./static/graphs/calm.png"></div>
-        <div class="tab-pane fade" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab"><img src="./static/graphs/confused.png"></div>
-        <div class="tab-pane fade" id="pills-four" role="tabpanel" aria-labelledby="pills-four-tab"><img src="./static/graphs/happy.png"></div>
-        <div class="tab-pane fade" id="pills-five" role="tabpanel" aria-labelledby="pills-five-tab"><img src="./static/graphs/sad.png"></div>
+        <div class="tab-pane fade show active" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab"><img src="../static/graphs/angry.png"></div>
+        <div class="tab-pane fade" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab"><img src="../static/graphs/calm.png"></div>
+        <div class="tab-pane fade" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab"><img src="../static/graphs/confused.png"></div>
+        <div class="tab-pane fade" id="pills-four" role="tabpanel" aria-labelledby="pills-four-tab"><img src="../static/graphs/happy.png"></div>
+        <div class="tab-pane fade" id="pills-five" role="tabpanel" aria-labelledby="pills-five-tab"><img src="../static/graphs/sad.png"></div>
       </div>
     </div>