diff --git a/client/src/app/admin/admin.routes.ts b/client/src/app/admin/admin.routes.ts
index d375a86af..f57deef62 100644
--- a/client/src/app/admin/admin.routes.ts
+++ b/client/src/app/admin/admin.routes.ts
@@ -1,6 +1,7 @@
 import { RouterConfig } from '@angular/router';
 
 import { AdminComponent } from './admin.component';
+import { FriendsRoutes } from './friends';
 import { UsersRoutes } from './users';
 
 export const AdminRoutes: RouterConfig = [
@@ -8,6 +9,7 @@ export const AdminRoutes: RouterConfig = [
     path: 'admin',
     component: AdminComponent,
     children: [
+      ...FriendsRoutes,
       ...UsersRoutes
     ]
   }
diff --git a/client/src/app/admin/friends/friend-list/friend-list.component.html b/client/src/app/admin/friends/friend-list/friend-list.component.html
new file mode 100644
index 000000000..860bd2c07
--- /dev/null
+++ b/client/src/app/admin/friends/friend-list/friend-list.component.html
@@ -0,0 +1,21 @@
+<table class="table table-hover">
+  <thead>
+    <tr>
+      <th>Url</th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr *ngFor="let friend of friends">
+      <td>{{ friend.url }}</td>
+    </tr>
+  </tbody>
+</table>
+
+<a class="add-user btn btn-danger pull-left" (click)="quitFriends()">
+  Quit friends
+</a>
+
+<a class="add-user btn btn-success pull-right" (click)="makeFriends()">
+  Make friends
+</a>
diff --git a/client/src/app/admin/friends/friend-list/friend-list.component.scss b/client/src/app/admin/friends/friend-list/friend-list.component.scss
new file mode 100644
index 000000000..cb597e12b
--- /dev/null
+++ b/client/src/app/admin/friends/friend-list/friend-list.component.scss
@@ -0,0 +1,3 @@
+table {
+  margin-bottom: 40px;
+}
diff --git a/client/src/app/admin/friends/friend-list/friend-list.component.ts b/client/src/app/admin/friends/friend-list/friend-list.component.ts
new file mode 100644
index 000000000..bf66d3ff1
--- /dev/null
+++ b/client/src/app/admin/friends/friend-list/friend-list.component.ts
@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Friend, FriendService } from '../shared';
+
+@Component({
+  selector: 'my-friend-list',
+  template: require('./friend-list.component.html'),
+  styles: [ require('./friend-list.component.scss') ]
+})
+export class FriendListComponent implements OnInit {
+  friends: Friend[];
+
+  constructor(private friendService: FriendService) {  }
+
+  ngOnInit() {
+    this.friendService.getFriends().subscribe(
+      friends => this.friends = friends,
+
+      err => alert(err)
+    );
+  }
+
+  makeFriends() {
+    this.friendService.makeFriends().subscribe(
+      status => {
+        if (status === 409) {
+          alert('Already made friends!');
+        } else {
+          alert('Made friends!');
+        }
+      },
+      error => alert(error)
+    );
+  }
+
+  quitFriends() {
+    if (!confirm('Are you sure?')) return;
+
+    this.friendService.quitFriends().subscribe(
+      status => {
+        alert('Quit friends!');
+      },
+      error => alert(error)
+    );
+  }
+}
diff --git a/client/src/app/admin/friends/friend-list/index.ts b/client/src/app/admin/friends/friend-list/index.ts
new file mode 100644
index 000000000..354c978a4
--- /dev/null
+++ b/client/src/app/admin/friends/friend-list/index.ts
@@ -0,0 +1 @@
+export * from './friend-list.component';
diff --git a/client/src/app/admin/friends/friend.service.ts b/client/src/app/admin/friends/friend.service.ts
deleted file mode 100644
index d4ab5e60f..000000000
--- a/client/src/app/admin/friends/friend.service.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Response } from '@angular/http';
-import { Observable } from 'rxjs/Observable';
-
-import { AuthHttp, AuthService } from '../../shared';
-
-@Injectable()
-export class FriendService {
-  private static BASE_FRIEND_URL: string = '/api/v1/pods/';
-
-  constructor (private authHttp: AuthHttp, private authService: AuthService) {}
-
-  makeFriends() {
-    return this.authHttp.get(FriendService.BASE_FRIEND_URL + 'makefriends')
-                    .map(res => res.status)
-                    .catch(this.handleError);
-  }
-
-  quitFriends() {
-    return this.authHttp.get(FriendService.BASE_FRIEND_URL + 'quitfriends')
-                    .map(res => res.status)
-                    .catch(this.handleError);
-  }
-
-  private handleError (error: Response): Observable<number> {
-    console.error(error);
-    return Observable.throw(error.json().error || 'Server error');
-  }
-}
diff --git a/client/src/app/admin/friends/friends.component.ts b/client/src/app/admin/friends/friends.component.ts
new file mode 100644
index 000000000..e66280f01
--- /dev/null
+++ b/client/src/app/admin/friends/friends.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { ROUTER_DIRECTIVES } from '@angular/router';
+
+import { FriendService } from './shared';
+
+@Component({
+    template: '<router-outlet></router-outlet>',
+    directives: [ ROUTER_DIRECTIVES ],
+    providers: [ FriendService ]
+})
+
+export class FriendsComponent {
+}
diff --git a/client/src/app/admin/friends/friends.routes.ts b/client/src/app/admin/friends/friends.routes.ts
new file mode 100644
index 000000000..1e3646395
--- /dev/null
+++ b/client/src/app/admin/friends/friends.routes.ts
@@ -0,0 +1,22 @@
+import { RouterConfig } from '@angular/router';
+
+import { FriendsComponent } from './friends.component';
+import { FriendListComponent } from './friend-list';
+
+export const FriendsRoutes: RouterConfig = [
+  {
+      path: 'friends',
+      component: FriendsComponent,
+      children: [
+        {
+          path: '',
+          redirectTo: 'list',
+          pathMatch: 'full'
+        },
+        {
+          path: 'list',
+          component: FriendListComponent
+        }
+      ]
+    }
+];
diff --git a/client/src/app/admin/friends/index.ts b/client/src/app/admin/friends/index.ts
index 0adc256c4..01aeedeee 100644
--- a/client/src/app/admin/friends/index.ts
+++ b/client/src/app/admin/friends/index.ts
@@ -1 +1,3 @@
-export * from './friend.service';
+export * from './shared';
+export * from './friend-list';
+export * from './friends.routes';
diff --git a/client/src/app/admin/friends/shared/friend.model.ts b/client/src/app/admin/friends/shared/friend.model.ts
new file mode 100644
index 000000000..847eb9c9c
--- /dev/null
+++ b/client/src/app/admin/friends/shared/friend.model.ts
@@ -0,0 +1,3 @@
+export interface Friend {
+  url: string;
+}
diff --git a/client/src/app/admin/friends/shared/friend.service.ts b/client/src/app/admin/friends/shared/friend.service.ts
new file mode 100644
index 000000000..da4d64611
--- /dev/null
+++ b/client/src/app/admin/friends/shared/friend.service.ts
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { Response } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+
+import { Friend } from './friend.model';
+import { AuthHttp, AuthService } from '../../../shared';
+
+@Injectable()
+export class FriendService {
+  private static BASE_FRIEND_URL: string = '/api/v1/pods/';
+
+  constructor (
+    private authHttp: AuthHttp,
+    private authService: AuthService
+  ) {}
+
+  getFriends(): Observable<Friend[]> {
+    return this.authHttp.get(FriendService.BASE_FRIEND_URL)
+                        .map(res => <Friend[]>res.json())
+                        .catch(this.handleError);
+  }
+
+  makeFriends() {
+    return this.authHttp.get(FriendService.BASE_FRIEND_URL + 'makefriends')
+                        .map(res => res.status)
+                        .catch(this.handleError);
+  }
+
+  quitFriends() {
+    return this.authHttp.get(FriendService.BASE_FRIEND_URL + 'quitfriends')
+                        .map(res => res.status)
+                        .catch(this.handleError);
+  }
+
+  private handleError (error: Response) {
+    console.error(error);
+    return Observable.throw(error.json().error || 'Server error');
+  }
+}
diff --git a/client/src/app/admin/friends/shared/index.ts b/client/src/app/admin/friends/shared/index.ts
new file mode 100644
index 000000000..0d671637d
--- /dev/null
+++ b/client/src/app/admin/friends/shared/index.ts
@@ -0,0 +1,2 @@
+export * from './friend.model';
+export * from './friend.service';
diff --git a/client/src/app/admin/menu-admin.component.html b/client/src/app/admin/menu-admin.component.html
index 15a3c764e..092ab6081 100644
--- a/client/src/app/admin/menu-admin.component.html
+++ b/client/src/app/admin/menu-admin.component.html
@@ -6,14 +6,9 @@
       <a [routerLink]="['/admin/users/list']">List users</a>
     </div>
 
-    <div id="panel-make-friends" class="panel-button">
+    <div id="panel-friends" class="panel-button">
       <span class="hidden-xs glyphicon glyphicon-cloud"></span>
-      <a (click)='makeFriends()'>Make friends</a>
-    </div>
-
-    <div id="panel-quit-friends" class="panel-button">
-      <span class="hidden-xs glyphicon glyphicon-plane"></span>
-      <a (click)='quitFriends()'>Quit friends</a>
+      <a [routerLink]="['/admin/friends/list']">Friends</a>
     </div>
   </div>
 
diff --git a/client/src/app/admin/menu-admin.component.ts b/client/src/app/admin/menu-admin.component.ts
index eb27c1e58..b23f7409e 100644
--- a/client/src/app/admin/menu-admin.component.ts
+++ b/client/src/app/admin/menu-admin.component.ts
@@ -1,42 +1,15 @@
 import { Component, Output, EventEmitter } from '@angular/core';
 import { ROUTER_DIRECTIVES } from '@angular/router';
 
-import { FriendService } from './friends';
-
 @Component({
   selector: 'my-menu-admin',
   template: require('./menu-admin.component.html'),
-  directives: [ ROUTER_DIRECTIVES ],
-  providers: [ FriendService ]
+  directives: [ ROUTER_DIRECTIVES ]
 })
 export class MenuAdminComponent {
   @Output() quittedAdmin = new EventEmitter<boolean>();
 
-  constructor(private friendService: FriendService) {}
-
-  makeFriends() {
-    this.friendService.makeFriends().subscribe(
-      status => {
-        if (status === 409) {
-          alert('Already made friends!');
-        } else {
-          alert('Made friends!');
-        }
-      },
-      error => alert(error)
-    );
-  }
-
   quitAdmin() {
     this.quittedAdmin.emit(true);
   }
-
-  quitFriends() {
-    this.friendService.quitFriends().subscribe(
-      status => {
-        alert('Quit friends!');
-      },
-      error => alert(error)
-    );
-  }
 }
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 157529133..7de2a1a75 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -33,8 +33,14 @@
     "src/app/account/index.ts",
     "src/app/admin/admin.component.ts",
     "src/app/admin/admin.routes.ts",
-    "src/app/admin/friends/friend.service.ts",
+    "src/app/admin/friends/friend-list/friend-list.component.ts",
+    "src/app/admin/friends/friend-list/index.ts",
+    "src/app/admin/friends/friends.routes.ts",
     "src/app/admin/friends/index.ts",
+    "src/app/admin/friends/shared/friend.model.ts",
+    "src/app/admin/friends/shared/friend.service.ts",
+    "src/app/admin/friends/shared/index.ts",
+    "src/app/admin/friends/users.component.ts",
     "src/app/admin/index.ts",
     "src/app/admin/menu-admin.component.ts",
     "src/app/admin/users/index.ts",