diff --git a/web-ui/src/main/resources/catalog/components/metadataactions/partials/recordsFilters.html b/web-ui/src/main/resources/catalog/components/metadataactions/partials/recordsFilters.html
index 2a65be2af3..3a5ecdd463 100644
--- a/web-ui/src/main/resources/catalog/components/metadataactions/partials/recordsFilters.html
+++ b/web-ui/src/main/resources/catalog/components/metadataactions/partials/recordsFilters.html
@@ -1,28 +1,19 @@
 <div data-ng-if="agg">
-  <div class="row">
-    <div class="col-md-2">
-      <h2>{{title}}</h2>
-    </div>
-    <div class="col-md-10">
-      <div data-ng-repeat="filter in filtersToProcess" class="row">
-        <div class="col-md-3">
-          <div class="pull-right">{{('facet-' + filter) | facetKeyTranslator}}</div>
-        </div>
-        <div class="col-md-9">
-          <div class="btn-group btn-group-sm" role="group" aria-label="filter">
-            <button
-              data-ng-repeat="(key, b) in agg[filter].buckets"
-              data-ng-click="filterRecordsBy(filter, b.key)"
-              data-ng-disabled="b.doc_count === children.length"
-              type="button"
-              class="btn btn-default"
-              data-ng-class="{'btn-primary': current === (filter + '-' + b.key)}"
-            >
-              {{(b.key | translate) || '&nbsp;'}} ({{b.doc_count}})
-            </button>
-          </div>
-        </div>
-      </div>
+  <h2>{{title}}</h2>
+  <p class="text-muted" translate="">filterHelp</p>
+  <div data-ng-repeat="filter in filtersToProcess">
+    <label>{{('facet-' + filter) | facetKeyTranslator}}</label>
+    <div>
+      <button
+        data-ng-repeat="(key, b) in agg[filter].buckets"
+        data-ng-click="filterRecordsBy(filter, b.key)"
+        data-ng-disabled="b.doc_count === children.length"
+        type="button"
+        class="btn btn-default btn-sm gn-margin-bottom-sm gn-margin-right-sm"
+        data-ng-class="{'btn-primary': current === (filter + '-' + b.key)}"
+      >
+        {{(b.key | translate) || '&nbsp;'}} ({{b.doc_count}})
+      </button>
     </div>
   </div>
 </div>
diff --git a/web-ui/src/main/resources/catalog/locales/en-v4.json b/web-ui/src/main/resources/catalog/locales/en-v4.json
index a00aee20f3..553c79bd53 100644
--- a/web-ui/src/main/resources/catalog/locales/en-v4.json
+++ b/web-ui/src/main/resources/catalog/locales/en-v4.json
@@ -432,5 +432,6 @@
   "lastCreatedRecords": "Last created records",
   "associationType": "Association type",
   "initiativeType": "Initiative type",
-  "associatedTo": "Associated "
+  "associatedTo": "Associated ",
+  "filterHelp": "Please click on one of the buttons below to activate the filter"
 }
diff --git a/web-ui/src/main/resources/catalog/views/default/less/gn_card_default.less b/web-ui/src/main/resources/catalog/views/default/less/gn_card_default.less
index 0279994fdf..56f7dd53ae 100644
--- a/web-ui/src/main/resources/catalog/views/default/less/gn_card_default.less
+++ b/web-ui/src/main/resources/catalog/views/default/less/gn_card_default.less
@@ -453,7 +453,10 @@ table.gn-resultview {
     .gn-card {
       min-width: 150px;
       width: calc(~"(100% / 4) - 20px");
-      @media (max-width: @screen-sm-min) {
+      @media (max-width: 1440px) {
+        width: calc(~"(100% / 3) - 20px");
+      }
+      @media (max-width: @screen-lg-min) {
         width: calc(~"(100% / 2) - 20px");
       }
       @media (max-width: @screen-xs) {
diff --git a/web-ui/src/main/resources/catalog/views/default/templates/recordView/type-series.html b/web-ui/src/main/resources/catalog/views/default/templates/recordView/type-series.html
index 19d86c0234..d5768464ad 100644
--- a/web-ui/src/main/resources/catalog/views/default/templates/recordView/type-series.html
+++ b/web-ui/src/main/resources/catalog/views/default/templates/recordView/type-series.html
@@ -28,9 +28,11 @@
     <div data-gn-data-preview="mdView.current.record"></div>
   </div>
 </div>
-<div class="col-md-12 gn-record">
+
+<div class="row">
   <!-- Records filters -->
   <div
+    class="col-md-4 col-sm-12 gn-margin-bottom gn-padding-bottom-lg"
     data-ng-if="mdView.current.record.related.uuids"
     data-gn-records-filters
     data-agg="mdView.current.record.related.children.length > 0
@@ -39,31 +41,35 @@
     data-title="{{'seriesComposedOf' | translate}}"
   ></div>
 
-  <!-- Related records -->
-  <div
-    data-ng-if="mdView.current.record.related.uuids"
-    data-gn-related-with-stats="mdView.current.record.related.children.length > 0
-                                          ? mdView.current.record.related.children
-                                          : mdView.current.record.related.siblings"
-    data-agg="mdView.current.record.related.children.length > 0
-        ? mdView.current.record.related.aggregations_children
-        :mdView.current.record.related.aggregations_siblings"
-    data-type="'blocks'"
-    data-sort-by="resourceTitle"
-    data-title="{{'seriesComposedOf' | translate}}"
-  ></div>
+  <div class="col-md-8 col-sm-12">
 
-  <!-- Related records table -->
-  <div
-    data-gn-records-table="mdView.current.record.related.children.length > 0
-                              ? mdView.current.record.related.children
-                              : mdView.current.record.related.siblings"
-    data-agg="mdView.current.record.related.children.length > 0
-        ? mdView.current.record.related.aggregations_children
-        :mdView.current.record.related.aggregations_siblings"
-    labels="{{::viewConfig.collectionTableConfig.labels}}"
-    columns="{{::viewConfig.collectionTableConfig.columns}}"
-  />
+
+    <div
+      class="gn-margin-bottom"
+      data-ng-if="mdView.current.record.related.uuids"
+      data-gn-related-with-stats="mdView.current.record.related.children.length > 0
+                                            ? mdView.current.record.related.children
+                                            : mdView.current.record.related.siblings"
+      data-agg="mdView.current.record.related.children.length > 0
+          ? mdView.current.record.related.aggregations_children
+          :mdView.current.record.related.aggregations_siblings"
+      data-type="'blocks'"
+      data-sort-by="resourceTitle"
+      data-title="{{'seriesComposedOf' | translate}}"
+    ></div>
+
+    <!-- Related records table -->
+    <div
+      data-gn-records-table="mdView.current.record.related.children.length > 0
+                                ? mdView.current.record.related.children
+                                : mdView.current.record.related.siblings"
+      data-agg="mdView.current.record.related.children.length > 0
+          ? mdView.current.record.related.aggregations_children
+          :mdView.current.record.related.aggregations_siblings"
+      labels="{{::viewConfig.collectionTableConfig.labels}}"
+      columns="{{::viewConfig.collectionTableConfig.columns}}"
+    ></div>
+  </div>
 </div>
 
 <div class="row gn-section gn-section-{{mdView.current.record.resourceType[0]}}">