diff --git a/modoboa/extensions/amavis/static/amavis/css/quarantine.css b/modoboa/extensions/amavis/static/amavis/css/quarantine.css
index 2ee4aeab5..744235dbb 100644
--- a/modoboa/extensions/amavis/static/amavis/css/quarantine.css
+++ b/modoboa/extensions/amavis/static/amavis/css/quarantine.css
@@ -1,5 +1,25 @@
-#menubar { 
-    position: fixed;
+@media (max-width: 600px){
+    th#subject,
+    td[name='subject']{
+        display: none;
+    }
+}
+@media (max-width: 770px){
+    th#to,
+    td[name='to']{
+        display: none;
+    }
+}
+
+@media (max-width: 990px){
+    #filters_bar,
+    th#date,
+    td[name='date']{
+        display: none;
+    }
+}
+
+#menubar {
     top: 60px;
     padding-left: 15px;
     padding-right: 15px;
@@ -12,11 +32,21 @@
     margin: 0;
 }
 
-#listing { 
-    position: fixed;
-    padding: 0 15px;
-    right: 0;
+#listing.fluid-content-quarantine{
+    position: relative;
+    padding-top: 30px;
+    height: 0;
+    overflow: hidden;
+    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
+}
+
+
+#listing.fluid-content-quarantine iframe {
+    position: absolute;
+    top: 0;
     left: 0;
+    width: 100%;
+    height: 100%;
 }
 
 #mailcontent {
@@ -27,14 +57,11 @@
     height: 100%;
 }
 
-#emails tbody tr:hover { 
+#emails tbody tr:hover {
     color: #0088cc;
 }
 
-#filters_bar {
-    /*padding-top: 5px;*/
-    padding-left: 15px;
-}
+
 
 thead tr {
     position: relative;
@@ -49,7 +76,7 @@ td[name=type] span {
     cursor: pointer;
 }
 
-td.unseen { 
+td.unseen {
     font-weight: bold;
 }
 
diff --git a/modoboa/extensions/amavis/static/amavis/js/quarantine.js b/modoboa/extensions/amavis/static/amavis/js/quarantine.js
index 41e25c253..de9698cfa 100644
--- a/modoboa/extensions/amavis/static/amavis/js/quarantine.js
+++ b/modoboa/extensions/amavis/static/amavis/js/quarantine.js
@@ -44,13 +44,20 @@ Quarantine.prototype = {
             $("#menubar").html(data.menu);
             $("#searchfield").searchbar({navobj: this.navobj});
         }
+
         if (data.listing != undefined) {
+
+
             $("#listing").html(data.listing);
-            $("#listing").css({
-                top: $("#menubar").outerHeight() + 60 + "px",
-                bottom: $("#bottom-bar").outerHeight() + "px",
-                overflow: "auto"
-            });
+            $("#listing:has(iframe)").addClass('fluid-content-quarantine');
+            if ($( window ).width()>1198){
+                $("#listing").css({
+                    top: $("#menubar").outerHeight() + 60 + "px",
+                    bottom: $("#bottom-bar").outerHeight() + "px",
+                    overflow: "auto"
+                });
+            }
+
         }
         this.update_listing(data);
     },
diff --git a/modoboa/extensions/amavis/templates/amavis/index.html b/modoboa/extensions/amavis/templates/amavis/index.html
index aceed6622..7bdfd3779 100644
--- a/modoboa/extensions/amavis/templates/amavis/index.html
+++ b/modoboa/extensions/amavis/templates/amavis/index.html
@@ -20,5 +20,5 @@ $(document).ready(function() {
 {% endblock %}
 {% block fixed_content %}
 <div id="menubar">{% quar_menu %}</div>
-<div id="listing"></div>
+<div id="listing" class="col-lg-12 col-md-12 col-dm-12 col-xs-12"></div>
 {% endblock %}
diff --git a/modoboa/extensions/amavis/templates/amavis/main_action_bar.html b/modoboa/extensions/amavis/templates/amavis/main_action_bar.html
index 646aa8ddc..789c27c08 100644
--- a/modoboa/extensions/amavis/templates/amavis/main_action_bar.html
+++ b/modoboa/extensions/amavis/templates/amavis/main_action_bar.html
@@ -1,38 +1,49 @@
 {% load lib_tags i18n %}
-<div class="btn-toolbar pull-left">
-  <div class="btn-group" title="{% trans 'Select' %}">
-    <a class="btn"><input type="checkbox" id="selectall" /></a>
-    <button class="btn dropdown-toggle" data-toggle="dropdown">
-      <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu">
-      <li><a name="selectmsgs" href="S">{% trans "Spam" %}</a></li>
-      <li><a name="selectmsgs" href="V">{% trans "Virus" %}</a></li>
-      <li><a name="selectmsgs" href="H">{% trans "Bad Header" %}</a></li>
-      <li><a name="selectmsgs" href="M">{% trans "Bad MIME" %}</a></li>
-      <li><a name="selectmsgs" href="B">{% trans "Banned" %}</a></li>
-    </ul>
-  </div>
-  <div class="btn-group">
-    <a name="release-multi" href="{% url 'modoboa.extensions.amavis.views.process' %}" class="btn btn-success disabled">
-      <i class="glyphicon glyphicon-ok"></i> {% trans "Release" %}
-    </a>
-  </div>
-  <div class="btn-group">
-    <a name="delete-multi" href="{% url 'modoboa.extensions.amavis.views.process' %}" class="btn btn-danger disabled">
-      <i class="glyphicon glyphicon-trash"></i> {% trans "Delete" %}
-    </a>
-  </div>
-  {% include "common/email_searchbar.html" with extraopts=extraopts %}
+        <div class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
+<div class="navbar-nav">
+
+        <div>
+            <div class="btn-group" title="{% trans 'Select' %}">
+                <a class="btn btn-default"><input type="checkbox" id="selectall" /></a>
+                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                    <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu">
+                    <li><a name="selectmsgs" href="S">{% trans "Spam" %}</a></li>
+                    <li><a name="selectmsgs" href="V">{% trans "Virus" %}</a></li>
+                    <li><a name="selectmsgs" href="H">{% trans "Bad Header" %}</a></li>
+                    <li><a name="selectmsgs" href="M">{% trans "Bad MIME" %}</a></li>
+                    <li><a name="selectmsgs" href="B">{% trans "Banned" %}</a></li>
+                </ul>
+            </div>
+            <div class="btn-group">
+              <a name="release-multi" href="{% url 'modoboa.extensions.amavis.views.process' %}" class="btn btn-success disabled">
+                <i class="glyphicon glyphicon-ok"></i> <span>{% trans "Release" %}</span>
+              </a>
+            </div>
+            <div class="btn-group">
+              <a name="delete-multi" href="{% url 'modoboa.extensions.amavis.views.process' %}" class="btn btn-danger disabled">
+                <i class="glyphicon glyphicon-trash"></i> <span>{% trans "Delete" %}</span>
+              </a>
+            </div>
+            <div class="btn-group">
+            {% include "common/email_searchbar.html" with extraopts=extraopts %}
+            </div>
+        </div>
 </div>
-<div id="filters_bar" class="btn-toolbar pull-right">
-  <span class="label label-title">{% trans "Display" %}</span>
-  <div id="filters" class="btn-group" data-toggle="buttons-radio">
-    <button name="msgtype_all" class="btn" title="{% trans 'All messages' %}">{% trans "All" %}</button>
-    <button name="msgtype_S" class="btn btn-danger" title="{% trans 'Spam only' %}">S</button>
-    <button name="msgtype_V" class="btn btn-danger" title="{% trans 'Virus only' %}">V</button>
-    <button name="msgtype_H" class="btn btn-warning" title="{% trans 'Bad Header only' %}">H</button>
-    <button name="msgtype_M" class="btn btn-warning" title="{% trans 'Bad MIME only' %}">M</button>
-    <button name="msgtype_B" class="btn btn-warning" title="{% trans 'Banned only' %}">B</button>
-  </div>
 </div>
+        <div class="col-lg-3 col-md-4">
+            <div class="btn-group">
+                <div id="filters_bar" class="navbar-nav navbar-right">
+                    <span class="label label-default">{% trans "Display" %}</span>
+                    <div id="filters" class="btn-group" data-toggle="buttons-radio">
+                        <button name="msgtype_all" class="btn btn-default" title="{% trans 'All messages' %}">{% trans "All" %}</button>
+                        <button name="msgtype_S" class="btn btn-danger" title="{% trans 'Spam only' %}">S</button>
+                        <button name="msgtype_V" class="btn btn-danger" title="{% trans 'Virus only' %}">V</button>
+                        <button name="msgtype_H" class="btn btn-warning" title="{% trans 'Bad Header only' %}">H</button>
+                        <button name="msgtype_M" class="btn btn-warning" title="{% trans 'Bad MIME only' %}">M</button>
+                        <button name="msgtype_B" class="btn btn-warning" title="{% trans 'Banned only' %}">B</button>
+                    </div>
+                </div>
+            </div>
+        </div>