diff --git a/commentaries/templates/commentaries/commentaries.html b/commentaries/templates/commentaries/commentaries.html
index 1f486812a3d2035c8d06c1c38cc9e5ca10af79ab..ad9e2c34c890dfaa3f8484e9be4e419568febdac 100644
--- a/commentaries/templates/commentaries/commentaries.html
+++ b/commentaries/templates/commentaries/commentaries.html
@@ -1,69 +1,84 @@
 {% extends 'scipost/base.html' %}
 
+{% load bootstrap %}
+
 {% block pagetitle %}: Commentaries{% endblock pagetitle %}
 
 {% block headsup %}
 <script type="text/javascript" async src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
 {% endblock headsup %}
 
-{% block bodysup %}
+{% block content %}
 
 
-<section>
-  <div class="flex-container">
-    <div class="flex-greybox320">
-      <h1>SciPost Commentaries</h1>
-      <h3><a href="{% url 'commentaries:howto' %}">SciPost Commentaries how-to</a></h3>
-      <h3><a href="{% url 'commentaries:request_commentary' %}">Request a new Commentary Page</a></h3>
+{# <section>#}
+<div class="row">
+    <div class="col-md-4">
+        <div class="panel">
+          <h1>SciPost Commentaries</h1>
+          <h3><a href="{% url 'commentaries:howto' %}">SciPost Commentaries how-to</a></h3>
+          <h3><a href="{% url 'commentaries:request_commentary' %}">Request a new Commentary Page</a></h3>
+        </div>
     </div>
-    <div class="flex-greybox320">
-      <h2>Search SciPost Commentaries:</h2>
-      <form action="{% url 'commentaries:commentaries' %}" method="post">
-	{% csrf_token %}
-	<table>
-	  {{ form.as_table }}
-	</table>
-	<input type="submit" name="Submit" />
-      </form>
+    <div class="col-md-4">
+    	<div class="panel">
+            <h2>Search SciPost Commentaries:</h2>
+            <form action="{% url 'commentaries:commentaries' %}" class="tinyform" method="post">
+          	{% csrf_token %}
+    	  {{ form|bootstrap:'4-8' }}
+          	<input class="btn btn-secondary" type="submit" name="Submit" />
+            </form>
+        </div>
     </div>
-    <div class="flex-greybox320">
-      <h2>View SciPost Commentaries</h2>
-      <ul>
-	<li>Physics: last <a href="{% url 'commentaries:browse' discipline='physics' nrweeksback=1 %}">week</a>, <a href="{% url 'commentaries:browse' discipline='physics' nrweeksback=4 %}">month</a> or <a href="{% url 'commentaries:browse' discipline='physics' nrweeksback=52 %}">year</a> </li>
-      </ul>
+    <div class="col-md-4">
+        <div class="panel">
+          <h2>View SciPost Commentaries</h2>
+          <ul>
+    	<li>Physics: last <a href="{% url 'commentaries:browse' discipline='physics' nrweeksback=1 %}">week</a>, <a href="{% url 'commentaries:browse' discipline='physics' nrweeksback=4 %}">month</a> or <a href="{% url 'commentaries:browse' discipline='physics' nrweeksback=52 %}">year</a> </li>
+          </ul>
+        </div>
     </div>
-  </div>
+</div>
 
   {% if commentary_search_list %}
-    <br />
-    <hr class="hr12">
-    <h3>Search results:</h3>
-    <ul>
-      {% for commentary in commentary_search_list %}
-        {{ commentary.header_as_li }}
-      {% endfor %}
-    </ul>
+    <div class="row">
+        <div class="col-12">
+            <hr class="hr12">
+            <h3>Search results:</h3>
+            <ul>
+              {% for commentary in commentary_search_list %}
+                {{ commentary.header_as_li }}
+              {% endfor %}
+            </ul>
+        </div>
+    </div>
   {% elif form.has_changed %}
-    <h3>No match found for your search query.</h3>
+      <div class="row">
+          <div class="col-12">
+            <h3>No match found for your search query.</h3>
+        </div>
+    </div>
   {% endif %}
 
-</section>
 
 
 {% if comment_recent_list %}
-  <section>
-   <hr class="hr12">
-   <h2>Recent Comments</h2>
-   <ul>
-     {% for comment in comment_recent_list %}
-     {{ comment.simple_header_as_li }}
-     {% endfor %}
-   </ul>
-  </section>
+  <div class="row">
+      <div class="col-12">
+        <hr class="hr12">
+        <h2>Recent Comments</h2>
+        <ul>
+            {% for comment in comment_recent_list %}
+                {{ comment.simple_header_as_li }}
+            {% endfor %}
+        </ul>
+    </div>
+  </div>
 {% endif %}
 
 {% if commentary_recent_list %}
-<section>
+<div class="row">
+    <div class="col-12">
   <hr class="hr12">
   <h2>Recently active Commentaries:</h2>
   <ul>
@@ -71,20 +86,23 @@
     {{ commentary.header_as_li }}
     {% endfor %}
   </ul>
-</section>
+  </div>
+</div>
 {% endif %}
 
 {% if commentary_browse_list %}
-<section>
-  <hr class="hr12">
-  <h2>Commentaries in {{ discipline }} in the last {{ nrweeksback }} week{% if nrweeksback == '1' %}{% else %}s{% endif %}:</h2>
-  <ul>
-    {% for commentary in commentary_browse_list %}
-    {{ commentary.header_as_li }}
-    {% endfor %}
-  </ul>
-  {% endif %}
-</section>
+<div class="row">
+    <div class="col-12">
+      <hr class="hr12">
+      <h2>Commentaries in {{ discipline }} in the last {{ nrweeksback }} week{% if nrweeksback == '1' %}{% else %}s{% endif %}:</h2>
+      <ul>
+        {% for commentary in commentary_browse_list %}
+        {{ commentary.header_as_li }}
+        {% endfor %}
+      </ul>
+  </div>
+</div>
+{% endif %}
 
 
-{% endblock bodysup %}
+{% endblock content %}
diff --git a/scipost/static/scipost/assets/css/_form.scss b/scipost/static/scipost/assets/css/_form.scss
index 6b48198edc22fde86f80ed2667fa689e563b8cfc..a32157e8f449b55a327625597347442902e40460 100644
--- a/scipost/static/scipost/assets/css/_form.scss
+++ b/scipost/static/scipost/assets/css/_form.scss
@@ -15,3 +15,7 @@
     display: inline-block;
     font-weight: 600;
 }
+
+.tinyform .form-group {
+    margin-bottom: 0.5rem;
+}
diff --git a/scipost/static/scipost/assets/css/_navbar.scss b/scipost/static/scipost/assets/css/_navbar.scss
index 7691f7a5b7d410edbc522377611f23ac0f9777c9..4d982becf23e2779f5e79ab6f741e91a3c47d8f7 100644
--- a/scipost/static/scipost/assets/css/_navbar.scss
+++ b/scipost/static/scipost/assets/css/_navbar.scss
@@ -40,5 +40,6 @@
 }
 .panel {
     padding: 0.75rem;
+    height: 100%;
     background-color: #f4f4f4;
 }
diff --git a/scipost/templatetags/bootstrap.py b/scipost/templatetags/bootstrap.py
index 7e381793995bebe008e001b14e19cba6a7a5125f..97e73a2a51c2f14bfac33762024446d4b34fb7f8 100644
--- a/scipost/templatetags/bootstrap.py
+++ b/scipost/templatetags/bootstrap.py
@@ -12,8 +12,13 @@ register = template.Library()
 
 
 @register.filter
-def bootstrap(element):
-    markup_classes = {'label': 'col-md-2', 'value': 'col-md-10', 'single_value': ''}
+def bootstrap(element, arg='2-10'):
+    ratio = arg.split('-')
+    markup_classes = {
+        'label': 'col-md-%s' % ratio[0],
+        'value': 'col-md-%s' % ratio[1],
+        'single_value': ''
+    }
     return render(element, markup_classes)