diff --git a/static/js/directives/contactsmanager.js b/static/js/directives/contactsmanager.js
index 5c197e42..21a88219 100644
--- a/static/js/directives/contactsmanager.js
+++ b/static/js/directives/contactsmanager.js
@@ -18,12 +18,13 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
-define(['jquery', 'underscore', 'text!partials/contactsmanagerbutton.html', 'text!partials/contactsmanager.html'], function($, _, templateContactsManagerButton,templateContactsManager) {
+define(['jquery', 'underscore', 'text!partials/contactsmanagerbutton.html', 'text!partials/contactsmanager.html', 'text!partials/contactsmanageradd.html', 'text!partials/contactsmanageredit.html'], function($, _, templateContactsManagerButton, templateContactsManager, templateContactsManagerAdd, templateContactsManagerEdit) {
 
 	return ['contacts', 'alertify', function(contacts, alertify) {
 
 		var contactsManagerController = ['$scope', '$modalInstance', 'contactData', 'data', 'defaultModalController', function($scope, $modalInstance, contactData, data, defaultModalController) {
-			$scope.contacts = null;
+			$scope.contacts = [];
+			$scope.search = {};
 
 			var getContacts = function() {
 				$scope.contacts = contactData.getAll();
@@ -38,9 +39,35 @@ define(['jquery', 'underscore', 'text!partials/contactsmanagerbutton.html', 'tex
 		}];
 
 		var controller = ['$scope', '$modal', function($scope, $modal) {
-			// Setup an api to pass the html body template to alertify
+			var windowClass = 'contactsmanager';
+			var modalController = contactsManagerController;
+
 			$scope.contactsManager = function() {
-				alertify.dialog.buildCustom({'windowClass': 'contactsmanager', 'header': _('Contacts Manager'), 'bodydom': templateContactsManager, 'footerdom': null, 'controller': contactsManagerController});
+				alertify.dialog.buildCustom({
+					'windowClass': windowClass,
+					'header': _('Contacts Manager'),
+					'bodydom': templateContactsManager,
+					'footerdom': null,
+					'controller': modalController
+				});
+			};
+			$scope.contactsManagerAdd = function() {
+				alertify.dialog.buildCustom({
+					'windowClass': windowClass,
+					'header': _('Find new contacts'),
+					'bodydom': templateContactsManagerAdd,
+					'footerdom': null,
+					'controller': modalController
+				});
+			};
+			$scope.contactsManagerEdit = function() {
+				alertify.dialog.buildCustom({
+					'windowClass': windowClass,
+					'header': _('Contacts Manager'),
+					'bodydom': templateContactsManagerEdit,
+					'footerdom': null,
+					'controller': modalController
+				});
 			};
 		}];
 
diff --git a/static/partials/contactsmanager.html b/static/partials/contactsmanager.html
index d727cee9..97c97555 100644
--- a/static/partials/contactsmanager.html
+++ b/static/partials/contactsmanager.html
@@ -12,7 +12,7 @@
   </div>
   <div class="row">
     <div class="col-xs-12 editlist">
-      <table class="table table-bordered table-hover table-condensed ">
+      <table class="table table-bordered table-hover table-condensed">
         <tbody>
           <tr ng-repeat="contact in contacts">
             <td class="picture">
diff --git a/static/partials/contactsmanageradd.html b/static/partials/contactsmanageradd.html
index e9cdf25d..5c8bd33c 100644
--- a/static/partials/contactsmanageradd.html
+++ b/static/partials/contactsmanageradd.html
@@ -1,9 +1,3 @@
-<div class="modal-header">
-  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">{{_('Close')}}</span></button>
-  <h4 class="modal-title" id="myModalLabel">
-    {{_('Find new contacts')}}
-  </h4>
-</div>
 <div class="modal-body">
   <div class="row head">
     <div class="col-xs-12">
@@ -19,74 +13,20 @@
   </div>
   <div class="row">
     <div class="col-xs-12 editlist">
-      <table class="table table-bordered table-hover table-condensed ">
+      <table class="table table-bordered table-hover table-condensed">
         <tbody>
-          <tr>
+          <tr ng-repeat"contact in search">
             <td class="picture">
-              <div class="userAvatar"></div>
+              <img ng-show="contact.Status.buddyPicture" ng-src="{{contact.Status.buddyPicture}}">
+              <div ng-show="!contact.Status.buddyPicture" class="buddyPicture"></div>
             </td>
             <td class="name">
-              Mike
+              <span>{{contact.Status.displayName}}</span>
             </td>
             <td class="action">
               <button class="btn btn-success">{{_('Add')}}</button>
             </td>
           </tr>
-          <tr>
-            <td class="picture">
-              <div class="userAvatar"></div>
-            </td>
-            <td class="name">
-              Mike
-            </td>
-            <td class="action">
-              <button class="btn btn-success">Add</button>
-            </td>
-          </tr>
-          <tr>
-            <td class="picture">
-              <div class="userAvatar"></div>
-            </td>
-            <td class="name">
-              Mike
-            </td>
-            <td class="action">
-              <button class="btn btn-success">Add</button>
-            </td>
-          </tr>
-          <tr>
-            <td class="picture">
-              <div class="userAvatar"></div>
-            </td>
-            <td class="name">
-              Mike
-            </td>
-            <td class="action">
-              <button class="btn btn-success">Add</button>
-            </td>
-          </tr>
-          <tr>
-            <td class="picture">
-              <div class="userAvatar"></div>
-            </td>
-            <td class="name">
-              Mike
-            </td>
-            <td class="action">
-              <button class="btn btn-success">Add</button>
-            </td>
-          </tr>
-          <tr>
-            <td class="picture">
-              <div class="userAvatar"></div>
-            </td>
-            <td class="name">
-              Mike
-            </td>
-            <td class="action">
-              <button class="btn btn-success">Add</button>
-            </td>
-          </tr>
         </tbody>
       </table>
     </div>
@@ -95,7 +35,7 @@
 <div class="modal-footer">
    <div class="row">
        <div class="col-xs-offset-10 col-xs-2">
-         <button class="btn btn-default">{{_('Done')}}</button>
+         <button class="btn btn-default" ng-click="ok()">{{_('Done')}}</button>
        </div>
     </div>
 </div>
diff --git a/static/partials/contactsmanageredit.html b/static/partials/contactsmanageredit.html
index b781649c..a1bc5aae 100644
--- a/static/partials/contactsmanageredit.html
+++ b/static/partials/contactsmanageredit.html
@@ -1,9 +1,3 @@
-<div class="modal-header">
-  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">{{_('Close')}}</span></button>
-  <h4 class="modal-title" id="myModalLabel">
-    {{_('Edit contact')}}
-  </h4>
-</div>
 <div class="modal-body">
   <div class="container-fluid">
     <div class="row">
@@ -34,8 +28,8 @@
     </div>
     <div class="col-xs-offset-4 col-xs-6">
       <div class="pull-right">
-        <button class="btn btn-default">{{_('Cancel')}}</button> 
-        <button class="btn btn-primary">{{_('Ok')}}</button>
+        <button class="btn btn-default" ng-click="cancel()">{{_('Cancel')}}</button> 
+        <button class="btn btn-primary" ng-click="ok()">{{_('Ok')}}</button>
       </div>
     </div>
   </div>