diff --git a/budget/static/main.css b/budget/static/main.css
index 7a0e974..0dfffb8 100644
--- a/budget/static/main.css
+++ b/budget/static/main.css
@@ -16,18 +16,21 @@ div.topbar ul.secondary-nav { padding-right: 75px; }
 
 .sidebar {
     background-color: #ABE128;
-    background-image: url("gradient.png");
-    background-position: center top;
-    background-position-x: 50%;
-    background-position-y: 0%;
+    background-position: center bottom;
     background-repeat: no-repeat;
     height: 100%;
     width: 220px;
     padding-left: 10px;
     padding-right: 10px;
+    padding-top: 10px;
+    margin-left: -10px;
+    margin-top: -10px;
+    margin-right: 15px;
+    color: black;
+
 }
 .sidebar h2 { text-align: center; }
-.sidebar button{ margin-top: 10px; float: right; }
+.sidebar button { margin-top: 10px; float: right; }
 
 .right h3 { float: right; }
 #bills { color: black; }
diff --git a/budget/templates/layout.html b/budget/templates/layout.html
index 55650d2..f94c421 100644
--- a/budget/templates/layout.html
+++ b/budget/templates/layout.html
@@ -78,7 +78,7 @@
 {% block header %}{% endblock %}
 {% block container %}
 <div class="container-fluid" style="height: 100%; padding-left: 10px;">
-    <div class="sidebar">{% block sidebar %}{% endblock %}</div>
+    {% block sidebar %}{% endblock %}
     <div class="content" style="margin-left: 250px;">
     {% for message in get_flashed_messages() %}
         <div class="flash alert-message info"><p>{{ message }}</p></div>
diff --git a/budget/templates/list_bills.html b/budget/templates/list_bills.html
index a6ab5fc..d163f7e 100644
--- a/budget/templates/list_bills.html
+++ b/budget/templates/list_bills.html
@@ -52,6 +52,7 @@
 {% endblock %}
 
 {% block sidebar %}
+<div class="sidebar">
 <h2>{{ _("Balance") }}</h2>
 
     <table class="balance">
@@ -72,6 +73,7 @@
     <form action="{{ url_for(".add_member") }}" method="post">
         {{ forms.add_member(member_form) }}
     </form>
+</div>
 {% endblock %}
 
 {% block content %}