diff --git a/packages/cms/lib/modules/resource-form-widgets/views/includes/fields/tags.html b/packages/cms/lib/modules/resource-form-widgets/views/includes/fields/tags.html
index 858c80bdd..1bad4f576 100644
--- a/packages/cms/lib/modules/resource-form-widgets/views/includes/fields/tags.html
+++ b/packages/cms/lib/modules/resource-form-widgets/views/includes/fields/tags.html
@@ -3,7 +3,9 @@
         and data.groupedOpenstadTags[field.tagType] 
         and data.groupedOpenstadTags[field.tagType].length %}
 
+        <div id="resource-form-tag-group-{{field.tagType}}" class="form-tag-group">
     {% for tag in data.groupedOpenstadTags[field.tagType] %}
+     
       <div class="checkbox">
         <input
           type="checkbox"
@@ -14,8 +16,10 @@
           {% if field.idea.tags %}checked{% endif %}
         />
         <label for="checkbox-{{loop.index}}-{{tag.id}}" class="checkbox-label">{{tag.name}}</label>
-      </div>    
+    </div>
     {% endfor %}
+  </div>    
+
   {% endif %}
   </div>
   
@@ -25,16 +29,18 @@
     {% set outer_loop = loop %}
 
     {% if field.showTagTypeLabels %}
-      {% if outer_loop.length > 1 and key !== 'undefined' %}
+      {% if outer_loop.length > 1 and key !== 'undefined' and key !== 'null'%}
         <p>{{key}}</p>
       {% endif %}
 
-      {% if outer_loop.length > 1 and key == 'undefined' %}
+      {% if outer_loop.length > 1 and key == 'undefined' or key == 'null' %}
         <p>Overig</p>
       {% endif %}
     {% endif %}
 
-      {% for tag in tagList %}
+    <div id="resource-form-tag-group-{{key if key !=='undefined' and key !== 'null' else 'Overig'}}" class="form-tag-group">
+
+    {% for tag in tagList %}
       <div class="checkbox">
         <input
           type="checkbox"
@@ -47,6 +53,8 @@
         <label for="checkbox-{{outer_loop.index}}-{{loop.index}}-{{tag.id}}" class="checkbox-label">{{tag.name}}</label>
       </div>    
     {% endfor %}
+  </div>
+
   {% endfor %}
 {% endif %}
 </div>
diff --git a/packages/cms/lib/modules/resource-overview-widgets/public/css/main.less b/packages/cms/lib/modules/resource-overview-widgets/public/css/main.less
index 6bb907cf2..cccc92ab6 100644
--- a/packages/cms/lib/modules/resource-overview-widgets/public/css/main.less
+++ b/packages/cms/lib/modules/resource-overview-widgets/public/css/main.less
@@ -99,69 +99,68 @@ input.search {
   margin: 15px 0;
 }
 
-.resource-tag {
-  border: solid 2px #ec0000;
-}
-
-
-.resource-tag {
-  padding: 0 20px;
-  height: 40px;
-  margin: 5px 0;
-  border-radius: 20px;
-  border: solid 2px #164995;
-  display: inline-block;
-  //height minus bordersize
-  line-height: 36px;
-  text-align: center;
-  font-size: 17px;
-  color: black;
-  font-weight: bold;
-  position: relative;
-  padding-left: 40px;
-  transition: all 200ms ease-in;
-  overflow: hidden;
+.mobile-tag-group, .tag-group {
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.mobile-tag-group a, .tag-group a {
+  color: #000;
+  text-decoration: none;
+  padding: 0;
   margin: 0;
-
-  @media @phone {
-    float: left;
-    clear: left;
-    margin: 5px 0;
-  }
-
-  &::after {
-    content: '+';
-    position: absolute;
-    top: -1px;
-    left: 15px;
-    font-size: 22px;
-  }
-
+  transition: all 200ms ease-in;
+}
+.mobile-tag-group a:hover, .tag-group a:hover {
   &:hover, &:active {
     text-decoration: none;
     transform: scale(1.03);
   }
+}
 
-  &--selected {
-    background: #164995 ;
-    color: white ;
-    padding-right: 40px;
-    padding-left: 20px;
-
-    &::after {
-      content: '✕';
-      position: absolute;
-      top: 11px;
-      right: 15px;
-      font-size: 17px;
-      line-height: 1;
-      left: auto;
-    }
+.mobile-tag-group .tag, .tag-group .tag {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 24px;
+  border-radius: 32px;
+  border: 2px solid #164995;
 
-    &:hover, &:active {
+  &.large {
+    padding: 4px 20px;
+  }
+  
+  &:after {
+    content:'a';
+    margin-left: 12px;
+    content: '+';
+    color: #000;
+    font-weight: bold;
+    font-size: 2rem;
+    vertical-align: middle;
+  }
+  
+  &.selected {
+    background: #164995;
+    color: white;
+    &:after {
+      margin-left: 12px;
+      content: 'x';
       color: white;
-    }
+      font-size: 1.5rem;
+      vertical-align: middle;
+    } 
   }
+} 
+.mobile-tag-group-title, .tag-group-title {
+  margin: 8px 0px;
+}
+
+.tag  p {
+  margin: 0;
 }
 
 .search-wrapper button[type="submit"],.search-wrapper .search-reset {
diff --git a/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/group-variants/grouped.njk b/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/group-variants/grouped.njk
new file mode 100644
index 000000000..f96786f47
--- /dev/null
+++ b/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/group-variants/grouped.njk
@@ -0,0 +1,8 @@
+{% for key, tagList in data.widget.groupedOpenstadTags %}
+    <div id="tag-group-container-{{ 'tags' if key === 'undefined' else key }}" class="tag-group-container">
+        <p class="{{ tagGroupPrefix }}tag-group-title">{{ "Overig" if key === 'undefined' or key === 'null' else key }}</p>
+        <div id="{{ tagGroupPrefix }}tag-group-{{ 'tags' if key === 'undefined' else key }}" class="{{ tagGroupPrefix }}tag-group">
+            {% include 'includes/controls/tag-includes/tag-buttons.njk' %}
+        </div>
+    </div>
+{% endfor %}
\ No newline at end of file
diff --git a/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/group-variants/non-grouped.njk b/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/group-variants/non-grouped.njk
new file mode 100644
index 000000000..2759f2ba8
--- /dev/null
+++ b/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/group-variants/non-grouped.njk
@@ -0,0 +1,5 @@
+<div id="{{ tagGroupPrefix }}tag-group-none }}" class="{{ tagGroupPrefix }}tag-group">
+    {% for key, tagList in data.widget.groupedOpenstadTags %}
+        {% include 'includes/controls/tag-includes/tag-buttons.njk' %}
+    {% endfor %}
+</div>
\ No newline at end of file
diff --git a/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/group-variants/single-group.njk b/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/group-variants/single-group.njk
new file mode 100644
index 000000000..768107406
--- /dev/null
+++ b/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/group-variants/single-group.njk
@@ -0,0 +1,5 @@
+<div id="{{ tagGroupPrefix }}tag-group-{{ data.widget.tagType }}" class="{{ tagGroupPrefix }}tag-group">
+        {% for tagList in [data.widget.groupedOpenstadTags[data.widget.tagType]] %}
+                {% include 'includes/controls/tag-includes/tag-buttons.njk' %}
+        {% endfor %}
+</div>
\ No newline at end of file
diff --git a/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/tag-buttons.njk b/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/tag-buttons.njk
new file mode 100644
index 000000000..88374c9c3
--- /dev/null
+++ b/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/tag-buttons.njk
@@ -0,0 +1,17 @@
+{% for tag in tagList %}
+        {% if data
+                .widget
+                .isTagSelected(tag, data.query) %}
+                <a href="{{ data.widget.formatTagRemoveUrl(tag, data.query) }}" class="openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">
+                        <div class="tag selected">
+                                <p>{{ tag.name }}</p>
+                        </div>
+                </a>
+        {% else %}
+                <a href="{{ data.widget.formatTagSelectUrl(tag, data.query) }}" class="openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">
+                        <div class="tag">
+                                <p>{{ tag.name }}</p>
+                        </div>
+                </a>
+        {% endif %}
+{% endfor %}
\ No newline at end of file
diff --git a/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/tags_desktop.njk b/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/tags_desktop.njk
new file mode 100644
index 000000000..4aecaa9e1
--- /dev/null
+++ b/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/tags_desktop.njk
@@ -0,0 +1,12 @@
+{% set  tagGroupPrefix = "" %}
+<div class="resource-overview-tags-container hidden-xs">
+    {% if data.widget.tagType %}
+        {% include 'includes/controls/tag-includes/group-variants/single-group.njk' %}
+    {% endif %}
+    {% if not data.widget.showTagTypeLabels and not data.widget.tagType %}
+        {% include 'includes/controls/tag-includes/group-variants/non-grouped.njk' %}
+    {% endif %}
+    {% if data.widget.showTagTypeLabels and data.widget.tagType === '' %}
+        {% include 'includes/controls/tag-includes/group-variants/grouped.njk' %}
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/tags_mobile.njk b/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/tags_mobile.njk
new file mode 100644
index 000000000..c7602370e
--- /dev/null
+++ b/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/tags_mobile.njk
@@ -0,0 +1,26 @@
+{% set  tagGroupPrefix = "mobile-" %}
+<div id="filter-tags-modal" class="content-modal content-modal--l">
+    <div class="content-modal-content">
+        <div class="content-modal-body">
+            <h3 class="filter-tags-modal-title">Filter op tags</h3>
+            <a href="#closed" class="content-modal-close">
+                <img src="{{ data.siteUrl }}/modules/openstad-assets/img/close.svg" width="13" height="13"/>
+            </a>
+            {% if data.widget.tagType %}
+                {% include 'includes/controls/tag-includes/group-variants/single-group.njk' %}
+            {% endif %}
+            {% if not data.widget.showTagTypeLabels and not data.widget.tagType %}
+                {% include 'includes/controls/tag-includes/group-variants/non-grouped.njk' %}
+            {% endif %}
+            {% if data.widget.showTagTypeLabels and data.widget.tagType === '' %}
+                {% include 'includes/controls/tag-includes/group-variants/grouped.njk' %}
+            {% endif %}
+            <br/>
+            <div>
+                <a href="#closed" class="filled-button stretch">
+                    Toon resultaten
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tags.html b/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tags.html
index 6aec1f4ac..d9f16b2d0 100644
--- a/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tags.html
+++ b/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tags.html
@@ -4,70 +4,7 @@
     Filter op tags
   </a>
 </div>
-<div class="resource-overview-tags-container hidden-xs">
-
-  {% if data.widget.tagType and data.widget.groupedOpenstadTags[data.widget.tagType] and data.widget.groupedOpenstadTags[data.widget.tagType].length %}
-    {% for tag in data.widget.groupedOpenstadTags[data.widget.tagType] %}
-      {% if data.widget.isTagSelected(tag, data.query) %}
-        <a href="{{data.widget.formatTagRemoveUrl(tag, data.query)}}" class="resource-tag resource-tag--selected openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}asdfsaf</a>
-        {% else %}
-        <a href="{{data.widget.formatTagSelectUrl(tag, data.query)}}" class="resource-tag openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}fasfasfds</a>
-      {% endif %}
-    {% endfor %}
-  {% endif %}
-
-
-  
-
-  {% if data.widget.tagType === '' and data.widget.groupedOpenstadTags %}
-
-    {% for key, tagList in data.widget.groupedOpenstadTags %}
-
-      {% if data.widget.showTagTypeLabels %}
-        <div>
-           
-          <p> {{ "tags" if key === 'undefined' else key }}</p>
-            {% for tag in tagList %}
-              {% if data.widget.isTagSelected(tag, data.query) %}
-                <a href="{{data.widget.formatTagRemoveUrl(tag, data.query)}}" class="resource-tag resource-tag--selected openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
-                {% else %}
-                <a href="{{data.widget.formatTagSelectUrl(tag, data.query)}}" class="resource-tag openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
-              {% endif %}
-            {% endfor %}
-          </div>
-      {% else%}
-      {% for tag in tagList %}
-        {% if data.widget.isTagSelected(tag, data.query) %}
-          <a href="{{data.widget.formatTagRemoveUrl(tag, data.query)}}" class="resource-tag resource-tag--selected openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
-          {% else %}
-          <a href="{{data.widget.formatTagSelectUrl(tag, data.query)}}" class="resource-tag openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
-        {% endif %}
-      {% endfor %}
-    {% endif%}  
-  {% endfor %}  
-{% endif %}
-</div>
-<div id="filter-tags-modal" class="content-modal content-modal--l">
-  <div class="content-modal-content">
-    <div class="content-modal-body">
-      <h3 class="filter-tags-modal-title "> Filter op tags </h3>
-      <a href="#closed" class="content-modal-close">
-        <img src="{{data.siteUrl}}/modules/openstad-assets/img/close.svg" width="13" height="13">
-      </a>
-      {% for tag in data.widget.openstadTags %}
-      {% if data.widget.isTagSelected(tag, data.query) %}
-      <a href="{{data.widget.formatTagRemoveUrl(tag, data.query)}}" class="resource-tag resource-tag--selected openstad-ajax-refresh-link resource-tag--{{tag.id}}" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
-      {% else %}
-      <a href="{{data.widget.formatTagSelectUrl(tag, data.query)}}" class="resource-tag openstad-ajax-refresh-link resource-tag--{{tag.id}}" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
-      {% endif %}
-      {% endfor %}
-      <br />
-      <div>
-        <a href="#closed" class="filled-button stretch">
-          Toon resultaten
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
-{% endif %}
+<!-- On desktop screen -->
+{% include 'includes/controls/tag-includes/tags_desktop.njk' %}
+<!-- On mobile screen -->
+{% include 'includes/controls/tag-includes/tags_mobile.njk' %} {% endif %}