diff --git a/app/Main.php b/app/Main.php
index b3f9840fe49cc011e3e40e7a1656ad2bfc3c9737..2aa7bfa150ebfc9a40e5e83c0ac795d407b2b033 100644
--- a/app/Main.php
+++ b/app/Main.php
@@ -14,7 +14,6 @@ class Main extends Controller {
     function home($f3,$args) {
         // Select a random contact
         //TODO: use weight for random
-        $rand_id = rand(0, count($f3->get('contacts'))-1);
         $contacts = $f3->get('contacts');
 
         $groups = Api::get_groups();
@@ -23,7 +22,6 @@ class Main extends Controller {
         $group_types = Api::get_group_types();
         $f3->set('group_types', $group_types);
 
-        $f3->set('contact', $contacts[$rand_id]);
         $f3->set('block_content', 'home.html');
     }
 
@@ -108,7 +106,6 @@ class Main extends Controller {
     function contactslist($f3, $args) {
         $contacts = Api::get_contacts();
         $f3->set('contacts', $contacts);
-        $f3->set('random', 2);
 
         $f3->set('block_content', 'contactslist.html');
     }
diff --git a/templates/base.html b/templates/base.html
index dc81c09ca0dbecf9dab71c03d958bf393e7ff7bd..e965a7b239ffbbf9ec260689a39b8590d13ceccc 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,4 +1,3 @@
 <include href="header.html" />
-<include href="sidebar.html" />
 <include href="{{ @block_content }}" />
 <include href="footer.html" />
diff --git a/templates/contact.html b/templates/contact.html
index a4cee32429f0fc766501b9bac4d4863a2148c437..750910d81f65c5ee71625d7a5b62a036745ecbd4 100644
--- a/templates/contact.html
+++ b/templates/contact.html
@@ -8,13 +8,19 @@
         <span class="card-title grey-text text-darken-4">
             {{ @contact.first_name }} {{ @contact.last_name }}
         </span>
+        <repeat group="{{ @group_types }}" value="{{ @group_type }}">
+        <ul>{{ @group_type.name }}
         <repeat group="{{ @contact.groups }}" value="{{ @group }}">
-        <div class="chip">
-            <check if="{{ @group.media }}">
-            <img src="{{ @group.media }}" alt="{{ @group.type }}">
-            </check>
-            {{ @group.name }}
-        </div>
+        <check if="{{ @group.type == @group_type.name }}">
+            <li class="chip">
+                <check if="{{ @group.media }}">
+                <img src="{{ @group.media }}" alt="{{ @group.type }}">
+                </check>
+                {{ @group.name }}
+            </li>
+        </check>
+        </repeat>
+        </ul>
         </repeat>
     </div>
     <div class="card-reveal">
@@ -26,7 +32,7 @@
             <input type="text" id="contact_id" name="contact_id" hidden="hidden" value="{{ @contact.id }}">
             <p>{{ _("If you want to call for free, you must provide us with your phone number 
             (the PiPhone will call that number to initiate the communication).") }}</p>
-            <div class="input-field col s12">>
+            <div class="input-field col s12">
                 <label for="phone">{{_("Your phone number:") }}</label>
                 <input type="text" name="phone" id="phone" />
             </div>
@@ -39,7 +45,6 @@
     <div class="card-action">
         <a type="button" href="#">{{ _("More info") }}</a>
         <a type="button" href="tel:{{ @contact.phone }}" target="_blank">{{ @contact.phone }}</a>
-        <a type="button" href="#">{{ _("Another random MEP") }}</a>
     </div>
 </div>
 <!-- contact page -->
diff --git a/templates/contactslist.html b/templates/contactslist.html
index 7fec512df62f195e1306ed17fc3b4a3747282b32..ded9735134ebc6684f856f6c1391ebf998fe2ee0 100644
--- a/templates/contactslist.html
+++ b/templates/contactslist.html
@@ -1,18 +1,64 @@
-<main>
-    <div class="row">
-        <div class="section indigo">
-            <div class="container">
-                <h1 class="header white-text center-on-small-only">{{ @campaign.title }}</h1>
-                <h4 class="light indigo-text text-accent-1 center-on-small-only">{{ @campaign.description }}</h4>
+<div class="col s12 m4">
+    <ul class="collection contact">
+        <nav class="nav-extended teal">
+            <div class="nav-wrapper">
+                <div class="input-field">
+                    <input type="search" id="search" class="autocomplete">
+                    <label class="label-icon" for="search"><i class="material-icons">search</i></label>
+                </div>
             </div>
-        </div>
-    </div>
-    <div class="row">
+        </nav>
         <repeat group="{{ @contacts }}" value="{{ @contact }}">
-        <div class="col s6 m4">
-            <include href="contact.html" />
-        </div>
+        <li class="collection-item avatar" data-json='{{ json_encode(@contact) }}'>
+            <img src="<check if="{{ @contact.photo == '' }}">/static/img/placeholder.jpg<false>{{ @contact.photo }}</false></check>" class="circle">
+            <span class="title">{{ @contact.last_name }} {{ @contact.full_name }}</span>
+            <ul>
+                <repeat group="{{ @contact.groups }}" value="{{ @group }}">
+                <li class="chip">{{ @group.name }}</li>
+                </repeat>
+            </ul>
+        </li>
         </repeat>
-    </div>
+    </ul>
+</div>
 <!-- contacts list -->
-</main>
+<script>
+$(document).ready(function() {
+    $('input.autocomplete').autocomplete({
+        data: {
+            <repeat group="{{ @contacts }}" value="{{ @contact }}">
+                "{{ @contact.first_name }} {{ @contact.last_name }}": <check if="{{ @contact.photo == '' }}">null<false>{{ @contact.photo }}</false></check>,
+            </repeat>
+        },
+        limit: 20,
+    });
+    var random = Math.floor((Math.random() * $('.collection-item').length));
+    $('.collection-item').click(function(){
+        update_mep($(this));
+    });
+
+    function update_mep(element) {
+        var contact = JSON.parse($(element).attr('data-json'));
+        if (contact['photo'] !== '') {
+            $('#contact-image').attr('src', contact['photo']);
+        };
+        $('#contact-full_name').html(contact['first_name'] + ' ' + contact['last_name']);
+        $('#form-contact').attr('action', '/call/' + contact['id']);
+        $('#contact_id').attr('value', contact['id']);
+        $('.groups').each(function() {
+            var group_type = $(this).attr('data-name');
+            var content = '<ul class="groups" data-name="' + group_type + '">' + group_type;
+            contact['groups'].forEach(function(group) {
+                if ( group['type'] === group_type ) {
+                    content += '<li class="chip">' + group['name'] + '</li>';
+                }
+            });
+            content += '</ul>';
+            $(this).html(content);
+        });
+        $('#contact-phone').attr('href', 'tel:' + contact['phone']);
+        $('#contact-phone').text(contact['phone']);
+    };
+    update_mep($('.collection-item').eq(random));
+});
+</script>
diff --git a/templates/footer.html b/templates/footer.html
index 79fbc42b8eee9dda439ded499d68c36c4549e74a..308b1d01b6ca1e7ab1b1fa896e6a8497bbcd1a37 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -1,7 +1,2 @@
-<script>
-$(document).ready(function() {
-    $('.button-collapse').sideNav();
-})
-</script>
 </body>
 </html>
diff --git a/templates/header.html b/templates/header.html
index b682a0283a9e34a8e7a836fdd200ba087267780d..9349c87f8adbc50b58a6873f5d6cc11e63ebd36c 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -9,10 +9,47 @@
     <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="/static/css/bootstrap.min.css" rel="stylesheet">
     <link type="text/css" rel="stylesheet" href="/static/css/materialize.min.css"  media="screen,projection"/>
-    <!-- piphone specific CSS -->
-    <link type="text/css" rel="stylesheet" href="/static/css/piphone.css">
     <!-- JS Materialize -->
     <script src="/static/js/jquery-2.1.1.js"></script>
     <script type="text/javascript" src="/static/js/materialize.min.js"></script>
 </head>
 <body>
+    <header class="blue-grey">
+        <div class="section no-pad-bot">
+            <div class="container">
+                <div class="row center">
+                    <h1 class="header center-on-small-only blue-grey-text text-darken-3">{{ @campaign.title}}</h1>
+                </div>
+                <div class="row">
+                    <div class="col s12 m6">
+                        <p class="flow-text blue-grey-text text-lighten-4">
+                        {{ @campaign.description }}
+                        </p>
+                        <a href="#navbar" class="btn waves-effect waves-light leat accent-2 right">{{ _("Act Now!") }}</a>
+                    </div>
+                    <div class="col s12 m6">
+                        <check if="{{ @organization.logo }}">
+                        <img src="{{ @organization.logo }}">
+                        </check>
+                        <h4 class="light header blue-grey-text text-darken-2">
+                            {{ @organization.name }}
+                        </h4>
+                        <p class="flow-text blue-grey-text text-lighten-4">
+                        {{ @organization.description }}
+                        </p>
+                        <a href="{{ @organization.website }}" class="btn waves-effect waves-light blue accent-2 right">{{ _("Visit Us!") }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <nav class="blue-grey darken-2" id="navbar">
+            <div class="container nav-wrapper">
+                <ul class="left">
+                    <li class="waves-effect <check if="{{ @block_content == 'home.html' }}">active</check>"><a href="/#navbar">Act</a></li>
+                    <li class="waves-effect"><a href="#">Campaign</a></li>
+                    <li class="waves-effect"><a href="#">About the piphone</a></li>
+                </ul>
+            </div>
+        </nav>
+    </header>
+    <main>
diff --git a/templates/home.html b/templates/home.html
index a3d0b950da1b1fbf71a435de009600d234606a6d..a88557a09aba09ff2a54ccd5b667bc8a08c37592 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -1,15 +1,57 @@
-<main>
-    <div class="row">
-        <div class="section indigo">
-            <div class="container">
-                <h1 class="header white-text center-on-small-only">{{ @campaign.title }}</h1>
-                <h4 class="light indigo-text text-accent-1 center-on-small-only">{{ @campaign.description }}</h4>
+<div class="row">
+    <div class="col s6 m8">
+        <div class="container center">
+            <h4 class="blue-grey-text header">
+                {{ _("Call a representative and make your voice heard!") }}
+            </h4>
+            <!-- contact page -->
+            <div class="col s12 offset-m3 m6">
+                <div class="card sticky-action">
+                    <div class="card-image">
+                        <img id="contact-image" src="/static/img/placeholder.jpg">
+                        <a class="btn-floating btn-large halfway-fab waves-effect activator green">
+                            <i class="material-icons">phone</i>
+                        </a>
+                    </div>
+                    <div class="card-content">
+                        <span class="card-title grey-text text-darken-4" id="contact-full_name">
+                            John Doe
+                        </span>
+                        <repeat group="{{ @group_types }}" value="{{ @group_type }}">
+                        <ul class="groups" data-name="{{ @group_type.name }}">{{ @group_type.name }}
+                            <li class="chip">
+                                Group
+                            </li>
+                        </ul>
+                        </repeat>
+                    </div>
+                    <div class="card-reveal">
+                        <span id="contact-full_name-2" class="card-title grey-text text-darken-4">John Doe
+                            <i class="material-icons right">close</i>
+                        </span>
+                        <h5>{{ _("Call for free") }}</h5>
+                        <form id="form-contact" method="post" action="">
+                            <input type="text" id="contact_id" name="contact_id" hidden="hidden" value="">
+                            <p>{{ _("If you want to call for free, you must provide us with your phone number 
+                            (the PiPhone will call that number to initiate the communication).") }}</p>
+                            <div class="input-field col s12">
+                                <label for="phone">{{_("Your phone number:") }}</label>
+                                <input type="text" name="phone" id="phone" />
+                            </div>
+                            <p>
+                            {{ _('Starting with your <a href="https://en.wikipedia.org/wiki/List_of_country_calling_codes#Zones_3-4:_Europe">country code</a>, without the initial 0') }}
+                            </p>
+                            <input class="btn btn-default" type="submit" value="{{ _('Call me') }}" />
+                        </form>
+                    </div>
+                    <div class="card-action">
+                        <a type="button" href="#">{{ _("More info") }}</a>
+                        <a type="button" id="contact-phone" href="tel:" target="_blank">+33987654321</a>
+                    </div>
+                </div>
+                <!-- contact page -->
             </div>
         </div>
     </div>
-    <div class="row">
-        <div class="col s6 m4 offset-m4">
-            <include href="contact.html">
-        </div>
-    </div>
-</main>
+    <include href="contactslist.html">
+</div>