diff --git a/homepage/models.py b/homepage/models.py
index d103081..e0eefdf 100755
--- a/homepage/models.py
+++ b/homepage/models.py
@@ -38,6 +38,14 @@ class Location (models.Model):
 			draw.text((x,y), text, font=font, fill=(255,255,255))
 			img.save(output)
 
+		def add_margin(pil_img, top, right, bottom, left, color):
+		    width, height = pil_img.size
+		    new_width = width + right + left
+		    new_height = height + top + bottom
+		    result = Image.new(pil_img.mode, (new_width, new_height), color)
+		    result.paste(pil_img, (left, top))
+		    return result
+
 		self.slug = slugify(self.name)
 		self.hero = f'heros/hero-{self.slug}.png'
 		self.hero_mobile = f'heros/hero-{self.slug}-mobile.png'
@@ -66,7 +74,7 @@ class Location (models.Model):
 		drawPic(mobile_output, mobile_output, font, 100, 1470, self.slug.upper())
 		drawPic(mobile_output, mobile_output, font, 100, 1570, self.slug.upper())
 		mobile_img = Image.open(mobile_output)
-		mobile_img.resize((1920, 1080))
+		mobile_img = mobile_img.resize((1080, 1920))
 		mobile_img.save(mobile_output)
 
 		output = f'{settings.PROJECT_PATH}/media/results/results-{self.slug}.png'
diff --git a/homepage/templates/homepage/index.html b/homepage/templates/homepage/index.html
index 9408683..acecbb6 100755
--- a/homepage/templates/homepage/index.html
+++ b/homepage/templates/homepage/index.html
@@ -11,7 +11,14 @@
 
             @media (max-width: 768px) {
               .hero {
-                background-image: url("{{ location.hero_mobile.url }}");
+                background: url("{{ location.hero_mobile.url }}");
+                background-attachment: fixed
+                background-repeat: no-repeat;
+                background-position: center center; 
+                -webkit-background-size: cover;
+                -moz-background-size: cover;
+                -o-background-size: cover;
+                background-size: cover;
               }
             }
         </style>
@@ -24,8 +31,7 @@
             <div id="info-section"class="row">
               <div class="col-lg info-col p-5">
                 <h1 class="info-header">
-                  <img class="img-fluid" src="{% static 'css/res/info-header.png' %}" alt="WHAT IS THIS? <br /> AND WHAT'S HILO?">
-                  {# WHAT IS THIS?<br/> AND WHATS YOUR STORY? #}
+                  WHAT IS THIS?<br/> AND WHATS YOUR STORY?
                 </h1>
                 <p class="info">
                   inspired by a family tradition of “high, low, buffalo”, a fun exercise
@@ -87,8 +93,7 @@
                     {% endfor %}
 
                     <div class="row title pb-3 ">
-                      <img class="mx-auto img-fluid" style="max-width: 80%!important;" src="{% static 'css/res/time-to-shine.png' %}">
-                      {# <p class="mx-auto title">NOW IS YOUR TIME TO SHINE</p> #}
+                      <p class="mx-auto title shine">NOW IS YOUR TIME TO SHINE</p>
                     </div>
                     {% if hi_text %}
                       <div class="row pb-3 short-answer">
@@ -145,7 +150,7 @@
                     {% endif %}
                     {% if place_text %}
                     <div class="row title">
-                      <img class="mx-auto img-fluid" style="max-width: 80%!important;" src="{% static 'css/res/hilo-hashtag.png' %}">
+                      <p class="mx-auto title">#HILOW</p>
                     </div>
                     <div class="row pb-3 short-answer">
                       <label class="mx-auto" for="{{ form.place.id_for_label }}">{{ place_text|safe }}</label>
@@ -159,9 +164,7 @@
                     {% endif %}
                     {% if question_text %}         
                     <div class="row title">
-                      <img class="mx-auto img-fluid" style="max-width: 80%!important;" src="{% static 'css/res/bonus-question.png' %}">
-
-                      {# <p class="mx-auto title">BONUS QUESTION</p> #}
+                      <p class="mx-auto title">BONUS QUESTION</p>
                     </div>
                     <div class="row pb-3 short-answer">
                       <label class="mx-auto" for="{{ form.question.id_for_label }}">{{ question_text|safe }}</label>
@@ -175,7 +178,7 @@
                     {% endif %}
                     <div class="row">
                       <button type="submit" class="mx-auto btn text-uppercase">
-                        <img src="{% static 'css/res/submit-white.png' %}">
+                        <img width=75% src="{% static 'css/res/submit-white.png' %}">
                       </button>
                     </div>
                   </form>
diff --git a/static/css/styles.css b/static/css/styles.css
index b861554..55dfea7 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -17,7 +17,7 @@
   src: url("./fonts/FuturaPTHeavy.otf");
   font-family: "Futura-Heavy"; }
 html {
-  background-color: #4b4b4b;
+  background-color: black;
   font-family: "Hanson-Bold", "Arial", sans-serif;
   overflow-x: none !important; }
 
@@ -88,7 +88,7 @@ body::-webkit-scrollbar {
   font-family: "Hanson-Bold", "Arial", sans-serif; }
   @media (max-width: 768px) {
     .info-header {
-      font-size: 1.25em; } }
+      font-size: 1.5em; } }
 
 .info {
   font-size: .8em;
@@ -131,7 +131,7 @@ body::-webkit-scrollbar {
   font-size: 1.1em; }
 
 .title {
-  color: #000;
+  color: #fff;
   font-size: 1.40em;
   text-align: center; }
   @media (min-width: 768px) {
@@ -139,7 +139,7 @@ body::-webkit-scrollbar {
       font-size: 1.45em; } }
 
 .subtitle {
-  color: #000;
+  color: #fff;
   font-size: 1.1em; }
   @media (min-width: 768px) {
     .subtitle {
diff --git a/static/css/styles.scss b/static/css/styles.scss
index f551d93..7772914 100755
--- a/static/css/styles.scss
+++ b/static/css/styles.scss
@@ -58,14 +58,14 @@ $mobile-width: 768px;
 $dark-grey: #333;
 $darker-grey: #4b4b4b;
 $text: #000000;
-$text-light: #000;
+$text-light: #fff;
 $header-stroke: #305899;
 
 $green: #80ea7b;
 $red: #f85151;
 
 html {
-  background-color: $darker-grey;
+  background-color: black;
   font-family: $font-stack;
 
   overflow-x: none!important;
@@ -161,7 +161,7 @@ body::-webkit-scrollbar {
   //-webkit-text-stroke: 3px $header-stroke;
 
   @include mobile {
-    font-size: 1.25em;
+    font-size: 1.5em;
     //text-stroke: 2px $header-stroke;
     //-webkit-text-stroke: 2px $header-stroke;
   }