diff --git a/pages/static/pages/css/styles.css b/pages/static/pages/css/styles.css
index 3ed1744..c800536 100644
--- a/pages/static/pages/css/styles.css
+++ b/pages/static/pages/css/styles.css
@@ -92,6 +92,23 @@ body {
   color: #444;
 }
 
+#progress {
+  width: 100%;
+  background-color: #eee;
+  border-radius: 50px;
+}
+
+#bar {
+  width: 1%;
+  height: 50px;
+  background-color: #0000ff ;
+  text-align: center;
+  line-height: 50px;
+  color: white;
+  border-radius: 50px;
+  transition: all 1s;
+}
+
 /* mobile styles */
 
 @media (max-width: 768px) {
diff --git a/pages/templates/pages/index.html b/pages/templates/pages/index.html
index 23a959c..478de09 100644
--- a/pages/templates/pages/index.html
+++ b/pages/templates/pages/index.html
@@ -3,24 +3,6 @@
 {% block title %}Home{% endblock title %}
 {% block css %}
     <link rel="stylesheet" type="text/css" href="{% static 'pages/css/styles.css' %}">
-    <style>
-    #progress {
-      width: 100%;
-      background-color: #eee;
-      border-radius: 50px;
-    }
-
-    #bar {
-      width: 1%;
-      height: 50px;
-      background-color: #0000ff ;
-      text-align: center;
-      line-height: 50px;
-      color: white;
-      border-radius: 50px;
-      transition: all 1s;
-    }
-    </style>
 {% endblock css %}
 {% block content %}
 <div class="jumbotron jumbotron-fluid">
@@ -45,32 +27,33 @@
     </div>
 </div>
 
-<br><br><br>
-<div class="container news">
-    <h1 class="text-center font-weight-bold">{{ bar.name }}!</h1>
-    <br><br>
-    <div id="progress">
-      <div id="bar">$0</div>
-    </div>
-    <script>
-    document.addEventListener("DOMContentLoaded", function(){
-      var thing = ({{ bar.money_raised }})/50000;
-      thing = thing * 100;
-      console.log(thing);
-      width = 1;
-      var id = setInterval(frame, 100);
-      function frame() {
-          if (width < thing) {
-              width+=.25;
-              document.getElementById('bar').style.width = width + "%";
-              document.getElementById('bar').innerHTML = "$" + (width * 500)
-          } else {
-              document.getElementById('bar').style.width = thing + "%";
-              document.getElementById('bar').innerHTML = "$" + (thing * 500)
-              clearInterval(id);
-          }
-      }
-    });
-    </script>
-</div>
+{% if bar %}
+  <div class="container news">
+      <h1 class="text-center font-weight-bold">{{ bar.name }}!</h1>
+      <br><br>
+      <div id="progress">
+        <div id="bar">$0</div>
+      </div>
+      <script>
+      document.addEventListener("DOMContentLoaded", function(){
+        var thing = ({{ bar.money_raised }})/50000;
+        thing = thing * 100;
+        console.log(thing);
+        width = 1;
+        var id = setInterval(frame, 100);
+        function frame() {
+            if (width < thing) {
+                width+=.25;
+                document.getElementById('bar').style.width = width + "%";
+                document.getElementById('bar').innerHTML = "$" + (width * 500)
+            } else {
+                document.getElementById('bar').style.width = thing + "%";
+                document.getElementById('bar').innerHTML = "$" + (thing * 500)
+                clearInterval(id);
+            }
+        }
+      });
+      </script>
+  </div>
+{% endif %}
 {% endblock content %}
\ No newline at end of file
diff --git a/pages/views.py b/pages/views.py
index 59cdca5..ed7b4b2 100644
--- a/pages/views.py
+++ b/pages/views.py
@@ -12,7 +12,13 @@ def index(request):
         stories = []
         bar = None
 
-    return render(request, 'pages/index.html', {'stories': stories, 'animate': True, 'bar': bar})
+    context = {
+        'stories': stories,
+        'animate': True,
+        'bar': bar
+    }
+
+    return render(request, 'pages/index.html')
 
 
 def council(request):