diff --git a/webapp/migrations/0037_auto_20180301_2111.py b/webapp/migrations/0037_auto_20180301_2111.py
new file mode 100644
index 0000000..b5cab47
--- /dev/null
+++ b/webapp/migrations/0037_auto_20180301_2111.py
@@ -0,0 +1,19 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.11 on 2018-03-01 19:11
+from __future__ import unicode_literals
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('webapp', '0036_auto_20180301_2011'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='committee',
+            options={'verbose_name': 'Committee', 'verbose_name_plural': 'Committees'},
+        ),
+    ]
diff --git a/webapp/models.py b/webapp/models.py
index 3010192..6f40f60 100644
--- a/webapp/models.py
+++ b/webapp/models.py
@@ -243,6 +243,15 @@ class Committee(models.Model):
     Has many Roles found under variable roles 
     """
 
+    class Meta:
+        """Meta class for Committee class."""
+
+        verbose_name = _('Committee')
+        verbose_name_plural = _('Committees')
+
+    def __str__(self):
+        return _('Committee: {}').format(self.name)
+
     name = models.CharField(max_length=255)
 
 
diff --git a/webapp/static/css/contact.css b/webapp/static/css/contact.css
new file mode 100644
index 0000000..d935e46
--- /dev/null
+++ b/webapp/static/css/contact.css
@@ -0,0 +1,6 @@
+
+.role-container {
+    background-color: aqua;
+    width: 200px;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/webapp/templates/contact.html b/webapp/templates/contact.html
index c400a99..bf51df3 100644
--- a/webapp/templates/contact.html
+++ b/webapp/templates/contact.html
@@ -4,55 +4,42 @@
 {% load i18n %}
 
 <div class="contact_div">
-    <div class="container">
-        <!--<div class="row">
-            <div class="col">-->
-                <h2>{% trans "Contact" %}</h2>
-                <div>
-                    {% if all_roles %}
-                    {% load static %}
-                        <h3>Kaikki Roolit</h3>
-                        <table>
-                        {% for role in all_roles %}
-                            <tr>
-                                <td>
-                                    <!--Haetaan kuva-->
+    {% load static %}
+    <link rel="stylesheet" href="{% static "css/contact.css" %}">
+        <h2>{% trans "Contact" %}</h2>
+                               
+        {% if committee_list %}
+                        
+            {% for com in committee_list %}
+                
+                <!--Committee title-->
+                <h4>{{ com.committee.name }}</h4>
+
+                <!--Listing all roles in this committee-->
+                {% if com.roles_list %}
+                    {% for role in com.roles_list %}
+                        <div class="role-container">
+                            <div class="row">
+                                <div class="col">
                                     <img src="static/img/missing.png">
-                                </td>
-                                <td>
-                                    <p class="rooli-otsikko">{{role}}</h3>
-                                    <p class="rooli-toimari">{{ role.official.first_name }} {{ rooli.official.last_name }}</p>
-                                    {{ role.official.email }}
-                                    {{ role.official.phone_number }}
-                                    </p>
-                                </td>
-                            </tr>
-                        {% endfor %}
-                        </table>
-                    {% else%}
-                        <p>Ei rooleja</p>
-                    {% endif %}
-                    
-                    {% if all_committees %}
-                    {% load static %}
-                        <h3>Kaikki Toimikunnat</h3>
-                        {% for com in all_committees %}
-                            <p>{{committee.name}}</p>
-                            {% if roles_list %}
-                                {% for role in roles_list %}
-                                <p>{{role.name}}</p>
-                                {% endfor %}
-                            {% else %}
-                                <p>Ei ole rooleja tällä toimikunnalla</p>
-                            {% endif %}
-                        {% endfor %}
-                    {% else%}
-                        <p>Ei Toimikuntia</p>
-                    {% endif %}
-                </div>
-            <!--</div>
-        </div>-->
-    </div>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <h5>{{role.name}}</h5>
+                                    <p>{{role.official.first_name}} 
+                                        {{role.official.last_name}}
+                                        {{role.official.email}}</p>
+                                </div>
+                            </div>
+                        </div>
+                    {% endfor %}
+                {%endif%}
+
+            {% endfor %}
+        {% else%}
+            <p>Ei Toimikuntia</p>
+        {% endif %}
 </div>
 
 {% endblock %}
diff --git a/webapp/views.py b/webapp/views.py
index 9107645..6112a36 100644
--- a/webapp/views.py
+++ b/webapp/views.py
@@ -145,8 +145,6 @@ def sosso_view(request, *args, **kwargs):
 def contact_view(request, *args, **kwargs):
     """Render "Contact" page."""
 
-    # TODO
-    #
     # Lajitellaan roolit toimikunnittain
     #   in format: context = {
     #   committee_list: [
@@ -162,15 +160,14 @@ def contact_view(request, *args, **kwargs):
     #   ]}        
     # 
 
-    #all_officials = Official.objects.all()
     all_roles = Role.objects.all()
-    all_committees = Committee.objects.all()
+    all_committees = Committee.objects.order_by('name')
 
     committee_list = []
     for committee in all_committees:
-        committee_list.append({"committee":committee, "roles_list":committee.roles})
+        committee_list.append({"committee":committee, "roles_list":committee.roles.all()})
 
-    context = {"all_roles": all_roles, "all_committees": committee_list}
+    context = {"all_roles": all_roles, "committee_list": committee_list}
 
     return render(request, "contact.html", context)