diff --git a/css/style.css b/css/style.css
index b1cbaaff10..74186dbe28 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1414,6 +1414,19 @@ ul.dropdown-menu li:hover {
     font-size: 11px;
     color: #bebebe;
 }
+.media-list > li {
+    padding: 10px;
+    border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
+    position: relative;
+/*    border-left: 3px solid rgba(255,255,255,$contentbg_transp);*/
+    border-left: 3px solid rgba(255,255,255,0);
+    font-size: 12px;
+}
+.media-list > li:hover,
+.media-list > li.selected {
+    border-left: 3px solid $link_color;
+    background-color: rgba(247, 247, 247, $contentbg_transp);
+}
 
 /* Forms */
 .form-control {
@@ -1462,7 +1475,9 @@ ul.dropdown-menu li:hover {
 /* PAGES */
 
 /* Profile-page */
-#profile-page, .photos-content-wrapper, .settings-content-wrapper {
+#profile-page, .photos-content-wrapper, .settings-content-wrapper,
+.contacts-content-wrapper, .suggest-content-wrapper, .common-content-wrapper,
+.allfriends-content-wrapper, .match-content-wrapper {
     padding: 15px;
     padding-bottom: 20px;
     margin-bottom: 20px;
@@ -1489,6 +1504,36 @@ ul.dropdown-menu li:hover {
     float: left;
 }
 
+/* contacts page */
+ul.viewcontact_wrapper {
+    margin-left: -15px;
+    margin-right: -15px;
+}
+ul.viewcontact_wrapper > li {
+    padding-left: 15px;
+}
+.contact-wrapper {
+/*    padding: 10px;
+    border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);;
+    position: relative;*/
+    /*border-left: 3px solid white;*/
+}
+.contact-wrapper.media {
+    overflow: visible;
+    word-wrap: break-word;
+}
+.contact-entry-desc {
+    color: #555;
+}
+.contact-entry-checkbox {
+    margin-top: -20px;
+}
+.contact-wrapper .media-body .contact-entry-name h4.media-heading {
+    font-weight: bold;
+    color: #777;
+    font-size: 15px;
+}
+
 /*
 * Overwriting for transparency and other colors
 */
diff --git a/templates/contact_template.tpl b/templates/contact_template.tpl
new file mode 100644
index 0000000000..13ca175ebe
--- /dev/null
+++ b/templates/contact_template.tpl
@@ -0,0 +1,59 @@
+
+<div class="contact-wrapper media" id="contact-entry-wrapper-{{$id}}" >
+	
+		<div class="contact-photo-wrapper dropdown pull-left" >
+			<div class="contact-photo mframe" id="contact-entry-photo-{{$contact.id}}" >
+
+				<a class="dropdown-toggle" id="contact-photo-menu-{{$contact.id}}" type="button"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
+					<div class="contact-photo-image-wrapper">
+						<img class="contact-photo media-object" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
+
+						{{* Overlay background on hover the avatar picture *}}
+						<div class="contact-photo-overlay">
+							<span class="contact-photo-overlay-content"><i class="fa fa-angle-down"></i></span>
+						</div>
+					</div>
+				</a>
+
+
+				{{if $contact.photo_menu}}
+				<ul class="contact-photo-menu menu-popup dropdown-menu " id="contact-photo-menu-{{$contact.id}}" role="menu" aria-labelledby="contact-photo-menu-{{$contact.id}}">
+					{{foreach $contact.photo_menu as $c}}
+					{{if $c.2}}
+					<li role="menuitem"><a target="redir" href="{{$c.1}}">{{$c.0}}</a></li>
+					{{else}}
+					<li role="menuitem"><a href="{{$c.1}}">{{$c.0}}</a></li>
+					{{/if}}
+					{{/foreach}}
+				</ul>
+
+				{{/if}}
+			</div>
+
+		</div>
+
+		<div class="media-body">
+			<div class="contact-entry-desc">
+				<div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" >
+					<h4 class="media-heading">{{$contact.name}}
+					{{if $contact.account_type}} <small class="contact-entry-details" id="contact-entry-accounttype-{{$contact.id}}">({{$contact.account_type}})</small>{{/if}}
+					</h4>
+				</div>
+				{{if $contact.alt_text}}<div class="contact-entry-details" id="contact-entry-rel-{{$contact.id}}" >{{$contact.alt_text}}</div>{{/if}}
+				{{if $contact.itemurl}}<div class="contact-entry-details" id="contact-entry-url-{{$contact.id}}" >{{$contact.itemurl}}</div>{{/if}}
+				{{if $contact.tags}}<div class="contact-entry-details" id="contact-entry-tags-{{$contact.id}}" >{{$contact.tags}}</div>{{/if}}
+				{{if $contact.details}}<div class="contact-entry-details" id="contact-entry-details-{{$contact.id}}" >{{$contact.details}}</div>{{/if}}
+				{{if $contact.network}}<div class="contact-entry-details" id="contact-entry-network-{{$contact.id}}" >{{$contact.network}}</div>{{/if}}
+			</div>
+
+			{{* if !$no_contacts_checkbox *}}
+			{{if $multiselect}}
+			<div class="checkbox contact-entry-checkbox pull-right">
+				<input id="checkbox-{{$contact.id}}" type="checkbox" class="contact-select pull-right" name="contact_batch[]" value="{{$contact.id}}">
+				<label for="checkbox-{{$contact.id}}"></label>
+			</div>
+			{{/if}}
+		</div>
+	
+
+</div>
diff --git a/templates/contacts-template.tpl b/templates/contacts-template.tpl
new file mode 100644
index 0000000000..98a2d62fcc
--- /dev/null
+++ b/templates/contacts-template.tpl
@@ -0,0 +1,98 @@
+
+<div id="contacts" class="standard-page">
+
+	{{$tabs}}
+
+	<h2 class="headding">{{$header}} {{if $total}} ({{$total}}) {{/if}}</h2>
+
+	{{if $finding}}<h4>{{$finding}}</h4>{{/if}}
+
+	<div id="contacts-search-wrapper">
+		<form id="contacts-search-form" class="navbar-form" action="{{$cmd}}" method="get" >
+			<label for="contacts-search" class="contacts-search-desc">{{$desc}}</label><br/>
+			<div class="input-group">
+				<input type="text" name="search" id="contacts-search" class="search-input form-control" onfocus="this.select();" value="{{$search|escape:'html'}}" />
+				<div class="input-group-btn">
+					<button class="btn btn-default" type="submit" name="submit" id="contacts-search-submit" value="{{$submit|escape:'html'}}"><i class="fa fa-search"></i></button>
+				</div>
+			</div>
+		</form>
+	</div>
+
+	<hr>
+	<div id="contacts-search-end"></div>
+
+	<form action="{{$baseurl}}/contacts/batch/" method="POST">
+		<ul class="nav nav-pills preferences">
+			<li class="dropdown pull-right">
+				<a class="btn btn-link dropdown-toggle" type="button" id="BatchActionDropdownMenuTools" data-toggle="dropdown" aria-expanded="true">
+					<i class="fa fa-angle-down"></i>
+				</a>
+				<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="BatchActionDropdownMenuTools">
+				{{foreach $batch_actions as $n=>$l}}
+					<li role="presentation">
+						<input class="batch-action no-input fakelist" name="{{$n}}" value="{{$l|escape:'html'}}" type="submit">
+					</li>
+				{{/foreach}}
+				</ul>
+			</li>
+		</ul>
+		<div class="clear">
+
+		<ul id="viewcontact_wrapper" class="viewcontact_wrapper media-list">
+		{{foreach $contacts as $contact}}
+			<li>{{include file="contact_template.tpl"}}</li>
+		{{/foreach}}
+		</ul>
+		<div id="contact-edit-end"></div>
+	</form>
+
+	{{$paginate}}
+</div>
+
+<div class="modal" id="PokeModal" tabindex="-1" role="dialog" aria-labelledby="PokeModal" aria-hidden="true">
+	<div class="modal-dialog">
+		<div class="modal-content">
+		</div> <!-- /.modal-content -->
+	</div> <!-- /.modal-dialog -->
+</div> <!-- /.modal -->
+
+<div class="modal" id="MailModal" tabindex="-1" role="dialog" aria-labelledby="MailModal" aria-hidden="true">
+	<div class="modal-dialog">
+		<div class="modal-content">
+		</div> <!-- /.modal-content -->
+	</div> <!-- /.modal-dialog -->
+</div> <!-- /.modal -->
+
+<script>
+ $(document).ready(function() {
+  // replace data target for poke & private Message to make Modal Dialog possible
+  $('li a[href^="{{$baseurl}}/poke/?f"]').attr('data-target','#PokeModal').attr('data-toggle', 'modal');
+  $('li a[href^="{{$baseurl}}/message/new"]').attr('data-target','#MailModal').attr('data-toggle', 'modal');
+ 
+  // javascript dialog to batch actions
+  $(".batch-action").click(function(e){
+    if (confirm($(this).attr('value')+" ?")) {
+     return true;
+    } else {
+     e.preventDefault();
+     return false;
+    }
+  });
+ 
+  // add javascript confirm dialog to "drop" links. Plain html url have "?confirm=1" to show confirmation form, we need to remove it
+  $(".drop").each(function() {
+   $(this).attr('href', $(this).attr('href').replace("confirm=1","") );
+   $(this).click(function(e){
+    if (confirm("{{$contact_drop_confirm}}")) {
+     return true;
+    } else {
+     e.preventDefault();
+     return false;
+    }
+   });
+   
+  });
+ });
+ </script>
+
diff --git a/templates/viewcontact_template.tpl b/templates/viewcontact_template.tpl
new file mode 100644
index 0000000000..0cc1f24b8f
--- /dev/null
+++ b/templates/viewcontact_template.tpl
@@ -0,0 +1,14 @@
+
+{{include file="section_title.tpl"}}
+
+{{$tab_str}}
+
+<ul id="viewcontact_wrapper{{if $id}}-{{$id}}{{/if}}" class="viewcontact_wrapper media-list">
+{{foreach $contacts as $contact}}
+	<li>{{include file="contact_template.tpl"}}</li>
+{{/foreach}}
+</ul>
+<div class="clear"></div>
+<div id="view-contact-end"></div>
+
+{{$paginate}}