diff --git a/gedgo/models/gedcom.py b/gedgo/models/gedcom.py
index 703c58e..d46dde1 100644
--- a/gedgo/models/gedcom.py
+++ b/gedgo/models/gedcom.py
@@ -32,4 +32,4 @@ def __unicode__(self):
     @property
     def photo_sample(self):
         photos = Document.objects.filter(gedcom=self, kind='PHOTO')
-        return random.sample(photos, min(20, len(photos)))
+        return random.sample(photos, min(24, len(photos)))
diff --git a/gedgo/static/styles/style-default.css b/gedgo/static/styles/style-default.css
index cbb4707..ef765e9 100644
--- a/gedgo/static/styles/style-default.css
+++ b/gedgo/static/styles/style-default.css
@@ -1,39 +1,63 @@
 /* Move down content because we have a fixed navbar that is 50px tall */
 body {
-  background-color: #7EB5D6;
+  background-color: #F5F8FA;
+}
+
+.navbar {
+  background-color: #3097D1 !important;
+}
+.navbar-nav li a {
+  color: #fcfcfc !important;
+}
+.navbar-nav .dropdown .footlist a {
+  color: #666 !important;
+}
+.navbar-nav .active a {
+  background-color: #3097D1 !important;
+}
+.navbar-nav .open .dropdown-toggle {
+  background-color: #3097D1 !important;
 }
 
 .navbar-brand {
   color: #fff !important;
 }
-.container {
-  max-width: 780px;
+
+.main-container {
+  margin-top: 65px;
 }
 
 .main {
-  max-width: 750px;
-  padding-top: 65px;
-  background-color: #FFFBFF;
+  color: #666;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
   border-style: solid;
-  border-color: #6E6E6E;
+  border-color: #d3d3d3;
   border-width: 1px;
 }
 .section {
   margin-top: 35px;
 }
 .sidebar-thumb {
-  width: 105px;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
   margin-bottom: 10px;
 }
 .subsection-thumb {
-  width: 90px;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
   margin-bottom: 10px;
 }
 .photo-subsection {
   margin-right: 20px;
 }
 .sidebar-lead {
-  width: 210px;
+  min-width: 100%;
   margin-bottom: 10px;
 }
 .documentary-thumb {
@@ -41,7 +65,8 @@ body {
   margin-bottom: 10px;
 }
 .thumb {
-  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
   margin-bottom: 10px;
 }
 .comment-area {
diff --git a/gedgo/templates/default/base.html b/gedgo/templates/default/base.html
index e48d416..3727cd5 100644
--- a/gedgo/templates/default/base.html
+++ b/gedgo/templates/default/base.html
@@ -54,7 +54,7 @@
       </div>
     </div>
 
-    <div class="main container">
+    <div class="main-container container">
       {% if messages %}
         {% for message in messages %}
         <br />
@@ -65,10 +65,11 @@
         {% endfor %}
       {% endif %}
       <div class="row">
-        <div class="col-sm-4 hidden-xs">
+        <div class="main col-sm-4 hidden-xs">
           {% block leftsidebar %}{% endblock %}
         </div>
-        <div class="col-sm-8">
+        <div class="col-sm-1 hidden-xs"></div>
+        <div class="main col-sm-7">
           {% block content %}{% endblock %}<br>&nbsp;
         </div>
       </div>
@@ -78,4 +79,4 @@
   <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
   <script>$('#help-popover').popover({html: true})</script>
   {% block javascript %}{% endblock %}
-</html>
\ No newline at end of file
+</html>
diff --git a/gedgo/templates/default/blogpost.html b/gedgo/templates/default/blogpost.html
index 8267148..e00c880 100644
--- a/gedgo/templates/default/blogpost.html
+++ b/gedgo/templates/default/blogpost.html
@@ -41,4 +41,4 @@ <h3>People in this post:</h3>
     {% include "comment_form.html" %}
   </div>
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/gedgo/templates/default/gedcom.html b/gedgo/templates/default/gedcom.html
index 04f63cc..86d085b 100644
--- a/gedgo/templates/default/gedcom.html
+++ b/gedgo/templates/default/gedcom.html
@@ -2,11 +2,15 @@
 
 
 {% block leftsidebar %}
+<div class="row">
 {% for photo in gedcom.photo_sample %}
+  <div class="col-lg-4 col-md-6">
   <a href="{% if photo.key_person_tag %}{{ photo.key_person_tag.pointer }}{% else %}{{ photo.docfile.url }}{% endif %}">
     <img src="{{ MEDIA_URL }}{{ photo.thumb }}" class="sidebar-thumb img-rounded">
   </a>
+</div>
 {% endfor %}
+</div>
 {% endblock %}
 
 
diff --git a/gedgo/templates/default/person.html b/gedgo/templates/default/person.html
index 12a7d31..458f377 100644
--- a/gedgo/templates/default/person.html
+++ b/gedgo/templates/default/person.html
@@ -2,13 +2,21 @@
 
 
 {% block leftsidebar %}
+<div class="row">
 {% for photo in person.photos %}
     {% if not photo == person.key_photo %}
+      <div class="col-lg-4 col-md-6">
       <a href="{{ photo.docfile.url }}">
         <img src="{{ photo.thumb.url }}" class="sidebar-thumb img-rounded">
       </a>
+    </div>
     {% endif %}
+{% empty %}
+  <div class="col-lg-12">
+  <span class="text-center text-muted">(no photos)</span>
+</div>
 {% endfor %}
+</div>
 {% endblock %}