diff --git a/wger/groups/templates/group/list.html b/wger/groups/templates/group/list.html
index cc381d0c4..382278611 100644
--- a/wger/groups/templates/group/list.html
+++ b/wger/groups/templates/group/list.html
@@ -6,51 +6,49 @@
 
 {% block content %}
 
-<div class="list-group">
+<ul class="list-unstyled">
     {% for group in object_list %}
-        <a href="{% url 'groups:group:view' group.pk %}" class="list-group-item">
-        <div class="media">
-            <div style="width:60px;height:60px;" class="media-left">
+        <li class="media">
             {% if group.image %}
                 <img alt="{{ group.name }}"
-                 class="media-object img-responsive img-circle img-thumbnail"
-                 style="max-height:100%;"
-                 src="{{ group.image|thumbnail_url:'small_cropped'}}">
+                     class="mr-3 img-fluid img-thumbnail"
+                     width="80"
+                     src="{{ group.image|thumbnail_url:'small_cropped'}}">
             {% else %}
                 <img alt="{% trans 'Placeholder image' %}"
-                     class="media-object"
-                     style="opacity: 0.4; padding-left: 10px; padding-right: 10px;"
+                     class="mr-3 img-fluid img-thumbnail"
+                     width="80"
                      src="{% static 'images/icons/image-placeholder.svg' %}">
             {% endif %}
-            </div>
             <div class="media-body">
                 {% if not group.public %}
-                    <span class="label label-warning pull-right" style="margin-left: 1em;">
-                        <span class="glyphicon glyphicon-lock"></span>
+                    <span class="badge badge-pill badge-primary float-right">
+                        <span class="{% fa_class 'lock' %}"></span>
                         {% trans "Private group" %}
                     </span>
                 {% endif %}
 
                 {% if user in group.get_member_list %}
-                    <span class="label label-primary pull-right">
-                        <span class="glyphicon glyphicon-user"></span>
+                    <span class="badge badge-pill badge-primary float-right">
+                        <span class="{% fa_class 'user' %}"></span>
                         {% trans "Member" %}
                     </span>
                 {% endif %}
 
-                <h4 class="media-heading">{{ group }}</h4>
-
-                <p class="list-group-item-text">{{ group.description|truncatewords:20 }}</p>
+                <a href="{{ group.get_absolute_url}}">
+                    <h5 class="mt-0 mb-1">{{ group }}</h5>
+                </a>
+                <p>{{ group.description|truncatewords:20 }}</p>
 
             </div>
-        </div>
-        </a>
+        </li>
+
     {% empty %}
         <a href="{% url 'groups:group:add' %}" class="list-group-item">
             {% trans "Nothing found" %}
         </a>
     {% endfor %}
-</div>
+</ul>
 {% endblock %}
 
 
diff --git a/wger/groups/templates/group/view.html b/wger/groups/templates/group/view.html
index aaa56b9f8..e530f9923 100644
--- a/wger/groups/templates/group/view.html
+++ b/wger/groups/templates/group/view.html
@@ -26,43 +26,44 @@
 
 {# Render the activity stream #}
 {% for event in last_activity %}
-<div class="panel panel-default">
-    <div class="panel-body">
-        <p class="list-group-item-text pull-right">
-        {# Verb #}
-        <span class="glyphicon
-            {% if event.verb == 'added' %}
-                glyphicon-plus
-            {% elif event.verb == 'created' %}
-                glyphicon-asterisk
-            {% elif event.verb == 'edited' %}
-                glyphicon-pencil
-            {% elif event.verb == 'left' %}
-                glyphicon-log-out
-            {% elif event.verb == 'joined' %}
-                glyphicon-log-in
-            {% elif event.verb == 'promoted' %}
-                glyphicon-sunglasses
-            {% endif %}
-        "></span>
+<div class="card">
+    <div class="card-body">
+        <p class="list-group-item-text float-right">
+
+        {# Time #}
+        {{ event.timestamp|timesince }}
+
+            {# Verb #}
+        {% if event.verb == 'added' %}
+            <span class="{% fa_class 'plus' %}"></span>
+        {% elif event.verb == 'created' %}
+            <span class="{% fa_class 'asterisk' %}"></span>
+        {% elif event.verb == 'edited' %}
+            <span class="{% fa_class 'pencil-alt' %}"></span>
+        {% elif event.verb == 'left' %}
+            <span class="{% fa_class 'sign-out-alt' %}"></span>
+        {% elif event.verb == 'joined' %}
+            <span class="{% fa_class 'sign-in-alt' %}"></span>
+        {% elif event.verb == 'promoted' %}
+            <span class="{% fa_class 'asterisk' %}"></span>
+        {% endif %}
+        </p>
+
+        {# Actor #}
+        <p>
+            {{ event.actor|format_username }}
+        </p>
 
         {# Action object #}
         {% if event.action_object %}
+        <p>
             {% if event.action_object.get_absolute_url %}
                 <a href="{{ event.action_object.get_absolute_url }}">{{ event.action_object }}</a>
             {% else %}
                 {{ event.action_object }}
             {% endif %}
-        {% endif %}
-
-        {# Time #}
-        {{ event.timestamp|timesince }}
         </p>
-
-        {# Actor #}
-        <h4 class="list-group-item-heading">
-            {{ event.actor|format_username }}
-        </h4>
+        {% endif %}
     </div>
 
 </div>
@@ -77,53 +78,38 @@
 {% block sidebar %}
 
     {% if object.image %}
-        <img src="{{ object.image|thumbnail_url:'large' }}" class="img-responsive img-rounded">
+        <img src="{{ object.image|thumbnail_url:'large' }}" class="img-fluid rounded">
         <br>
     {% endif %}
 
     {% if object.description %}
-        <h4>{% trans "Description" %}</h4>
         <p style="white-space: pre-line;">{{ object.description }}</p>
     {% endif %}
 
-    {% if group_dropdown %}
-    <div class="btn-group pull-right">
-        <button type="button" class="btn btn-default dropdown-toggle btn-xs" data-toggle="dropdown">
-            {% trans "Actions" %} <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" role="menu">
-            {% for entry in group_dropdown %}
-                <li>
-                    <a href="{{ entry.1 }}">{{ entry.0 }}</a>
-                </li>
-            {% endfor %}
-        </ul>
-    </div>
-    {% endif %}
 
-    <h4>{% trans "Members" %}</h4>
+
+    <h4 class="pt-3">{% trans "Members" %}</h4>
     <ul class="list-group">
     {% for membership in memberships_list %}
     <li class="list-group-item ">
 
         {{ membership.user|format_username }}
         {% if membership.is_admin %}
-            <span class="label label-primary">{% trans "Admin" %}</span>
+            <span class="badge badge-pill badge-primary">{% trans "Admin" %}</span>
         {% endif %}
 
         {% if membership.dropdowns %}
-        <div class="btn-group pull-right">
-            <button type="button" class="btn btn-default btn-xs dropdown-toggle btn-xs" data-toggle="dropdown">
-                <span class="glyphicon glyphicon-cog"></span>
+        <div class="dropdown float-right">
+            <button class="btn btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             </button>
-            <ul class="dropdown-menu" role="menu">
+            <div class="dropdown-menu dropdown-menu-right">
                 {% for option in membership.dropdowns %}
-                    <li>
-                        <a href="{{ option.1 }}">{{ option.0 }}</a>
-                    </li>
+                    <a href="{{ option.1 }}" class="dropdown-item">{{ option.0 }}</a>
                 {% endfor %}
-            </ul>
+            </div>
         </div>
+
+
         {% endif %}
     </li>
     {% empty %}
@@ -134,50 +120,35 @@
     </ul>
 
     {% if user in object.get_admins_list and object.application_set.count %}
-        <h4>{% trans "Applicants" %}</h4>
+        <h4  class="pt-3">{% trans "Applicants" %}</h4>
         <ul class="list-group">
             {% for application in object.application_set.all %}
             <li class="list-group-item ">
                 {{ application.user|format_username }}
 
-
-                <div class="btn-group pull-right">
-                    <button type="button" class="btn btn-default dropdown-toggle btn-xs" data-toggle="dropdown">
-                        <span class="glyphicon glyphicon-cog"></span>
+                <div class="dropdown float-right">
+                    <button class="btn btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     </button>
-                    <ul class="dropdown-menu" role="menu">
-                        <li>
-                            <a href="{% url 'groups:application:accept' object.pk application.user.pk %}">
-                                <span class="glyphicon glyphicon-ok"></span>
-                                {% trans "Accept" %}
-                            </a>
-                        </li>
-                        <li>
-                            <a href="{% url 'groups:application:deny' object.pk application.user.pk %}">
-                                <span class="glyphicon glyphicon-remove"></span>
-                                {% trans "Deny" %}
-                            </a>
-                        </li>
-                    </ul>
+                    <div class="dropdown-menu dropdown-menu-right">
+                        <a href="{% url 'groups:application:accept' object.pk application.user.pk %}" class="dropdown-item">
+                            <span class="{% fa_class 'ok' %}"></span>
+                            {% trans "Accept" %}
+                        </a>
+                        <a href="{% url 'groups:application:deny' object.pk application.user.pk %}" class="dropdown-item">
+                            <span class="{% fa_class 'remove' %}"></span>
+                            {% trans "Deny" %}
+                        </a>
+                    </div>
                 </div>
 
+
             </li>
             {% endfor %}
         </ul>
     {% endif %}
 
 
-    <div class="btn-group pull-right">
-        <button type="button" class="btn btn-default dropdown-toggle btn-xs" data-toggle="dropdown">
-            {% trans "Actions" %} <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" role="menu">
-            <li>
-                <a href="{% url 'manager:workout:add' object.pk %}">{% trans 'Add workout' %}</a>
-            </li>
-        </ul>
-    </div>
-    <h4>{% trans "Workouts" %}</h4>
+    <h4  class="pt-3">{% trans "Workouts" %}</h4>
     <div class="list-group">
         {% for workout in object.workout_set.all %}
             <a class="list-group-item" href="{{ workout.get_absolute_url }}">
@@ -187,5 +158,23 @@
             <div class="list-group-item">{% trans "Nothing found" %}</div>
         {% endfor %}
     </div>
+    <a href="{% url 'manager:workout:add' object.pk %}" class="btn btn-block btn-block">{% trans 'Add workout' %}</a>
 
 {% endblock %}
+
+
+{% block options %}
+{% if group_dropdown %}
+    <div class="dropdown">
+        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <span class="{% fa_class 'cog' %}"></span>
+            {% trans "Options" %}
+        </button>
+        <div class="dropdown-menu">
+            {% for entry in group_dropdown %}
+            <a href="{{ entry.1 }}" class="dropdown-item">{{ entry.0 }}</a>
+            {% endfor %}
+        </div>
+    </div>
+    {% endif %}
+{% endblock %}
diff --git a/wger/groups/templates/group/view_application.html b/wger/groups/templates/group/view_application.html
index 4540e9801..686e910a4 100644
--- a/wger/groups/templates/group/view_application.html
+++ b/wger/groups/templates/group/view_application.html
@@ -43,12 +43,11 @@
 {#         #}
 {% block sidebar %}
     {% if object.image %}
-        <img src="{{ object.image|thumbnail_url:'large' }}" class="img-responsive img-rounded">
+        <img src="{{ object.image|thumbnail_url:'large' }}" class="img-fluid rounded">
         <br>
     {% endif %}
 
     {% if object.description %}
-        <h4>{% trans "Description" %}</h4>
         <p style="white-space: pre-line;">{{ object.description }}</p>
     {% endif %}