201 files changed, 4205 insertions, 2926 deletions
diff --git a/client/.bootstraprc b/client/.bootstraprc
index 6ceef4fe9..cc6768d43 100644
--- a/client/.bootstraprc
+++ b/client/.bootstraprc
@@ -84,19 +84,19 @@ styles:
  navs: true
  navbar: false
  breadcrumbs: false
-  pagination: true
+  pagination: false
  pager: false
-  labels: true
+  labels: false
  badges: false
  jumbotron: false
-  thumbnails: true
+  thumbnails: false
  alerts: true
-  progress-bars: true
+  progress-bars: false
  media: true
  list-group: false
  panels: true
  wells: false
-  responsive-embed: true
+  responsive-embed: false
  close: true
  # Components w/ JavaScript
diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js
index 9cd33d2ed..f387b44f9 100644
--- a/client/config/webpack.common.js
+++ b/client/config/webpack.common.js
@@ -13,6 +13,7 @@ const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
 const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
 const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')
 const ngcWebpack = require('ngc-webpack')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
 const WebpackNotifierPlugin = require('webpack-notifier')
@@ -146,14 +147,15 @@ module.exports = function (options) {
              loader: 'sass-resources-loader',
              options: {
                resources: [
-                  helpers.root('src/sass/_variables.scss')
+                  helpers.root('src/sass/_variables.scss'),
+                  helpers.root('src/sass/_mixins.scss')
                ]
              }
            }
          ]
        },
        { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&minetype=application/font-woff' },
-        { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'file-loader' },
+        { test: /\.(otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000' },
        /* Raw loader support for *.html
         * Returns file content as string
@@ -266,6 +268,17 @@ module.exports = function (options) {
        inject: 'body'
      }),
+      new CopyWebpackPlugin([
+        {
+          from: helpers.root('src/assets/images/favicon.png'),
+          to: 'assets/images/favicon.png'
+        },
+        {
+          from: helpers.root('src/assets/images/default-avatar.png'),
+          to: 'assets/images/default-avatar.png'
+        }
+      ]),
      /*
       * Plugin: ScriptExtHtmlWebpackPlugin
       * Description: Enhances html-webpack-plugin functionality
@@ -289,6 +302,7 @@ module.exports = function (options) {
      */
      new LoaderOptionsPlugin({
        options: {
+          context: '',
          sassLoader: {
            precision: 10,
            includePaths: [ helpers.root('src/sass') ]
diff --git a/client/config/webpack.video-embed.js b/client/config/webpack.video-embed.js
index fe40194cf..2b70b6681 100644
--- a/client/config/webpack.video-embed.js
+++ b/client/config/webpack.video-embed.js
@@ -74,7 +74,8 @@ module.exports = function (options) {
                loader: 'sass-resources-loader',
                options: {
                  resources: [
-                    helpers.root('src/sass/_variables.scss')
+                    helpers.root('src/sass/_variables.scss'),
+                    helpers.root('src/sass/_mixins.scss')
                  ]
                }
              }
diff --git a/client/package.json b/client/package.json
index 39b3185cc..45f555f29 100644
--- a/client/package.json
+++ b/client/package.json
@@ -43,7 +43,6 @@
    "@types/webpack": "^3.0.0",
    "@types/webtorrent": "^0.98.4",
    "add-asset-html-webpack-plugin": "^2.0.1",
-    "angular-pipes": "^6.0.0",
    "angular2-notifications": "^0.7.7",
    "angular2-template-loader": "^0.6.0",
    "assets-webpack-plugin": "^3.4.0",
@@ -70,8 +69,10 @@
    "markdown-it": "^8.4.0",
    "ng-router-loader": "^2.0.0",
    "ngc-webpack": "3.2.2",
-    "ngx-bootstrap": "1.9.3",
+    "ngx-bootstrap": "2.0.0-beta.9",
    "ngx-chips": "1.5.3",
+    "ngx-infinite-scroll": "^0.7.0",
+    "ngx-pipes": "^2.0.5",
    "node-sass": "^4.1.1",
    "normalize.css": "^7.0.0",
    "optimize-js-plugin": "0.0.4",
@@ -86,6 +87,7 @@
    "sass-resources-loader": "^1.2.1",
    "script-ext-html-webpack-plugin": "^1.3.2",
    "source-map-loader": "^0.2.1",
+    "source-sans-pro": "^2.0.10",
    "standard": "^10.0.0",
    "string-replace-loader": "^1.0.3",
    "style-loader": "^0.19.0",
diff --git a/client/src/app/+admin/admin.component.html b/client/src/app/+admin/admin.component.html
new file mode 100644
index 000000000..0bf4c8aac
--- /dev/null
+++ b/client/src/app/+admin/admin.component.html
@@ -0,0 +1,27 @@
+<div class="row">
+  <div class="sub-menu">
+    <a *ngIf="hasUsersRight()" routerLink="/admin/users" routerLinkActive="active" class="title-page">
+      Users
+    </a>
+    <a *ngIf="hasServerFollowRight()" routerLink="/admin/follows" routerLinkActive="active" class="title-page">
+      Manage follows
+    </a>
+    <a *ngIf="hasVideoAbusesRight()" routerLink="/admin/video-abuses" routerLinkActive="active" class="title-page">
+      Video abuses
+    </a>
+    <a *ngIf="hasVideoBlacklistRight()" routerLink="/admin/video-blacklist" routerLinkActive="active" class="title-page">
+      Video blacklist
+    </a>
+    <a *ngIf="hasJobsRight()" routerLink="/admin/jobs" routerLinkActive="active" class="title-page">
+      Jobs
+    </a>
+  </div>
+  <div class="margin-content">
+    <router-outlet></router-outlet>
+  </div>
+</div>
diff --git a/client/src/app/+admin/admin.component.scss b/client/src/app/+admin/admin.component.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/client/src/app/+admin/admin.component.scss
diff --git a/client/src/app/+admin/admin.component.ts b/client/src/app/+admin/admin.component.ts
index ecd62ee61..75cd50cc7 100644
--- a/client/src/app/+admin/admin.component.ts
+++ b/client/src/app/+admin/admin.component.ts
@@ -1,7 +1,31 @@
 import { Component } from '@angular/core'
+import { UserRight } from '../../../../shared'
+import { AuthService } from '../core/auth/auth.service'
 @Component({
-  template: '<router-outlet></router-outlet>'
+  templateUrl: './admin.component.html',
+  styleUrls: [ './admin.component.scss' ]
 })
 export class AdminComponent {
+  constructor (private auth: AuthService) {}
+  hasUsersRight () {
+    return this.auth.getUser().hasRight(UserRight.MANAGE_USERS)
+  }
+  hasServerFollowRight () {
+    return this.auth.getUser().hasRight(UserRight.MANAGE_SERVER_FOLLOW)
+  }
+  hasVideoAbusesRight () {
+    return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_ABUSES)
+  }
+  hasVideoBlacklistRight () {
+    return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_BLACKLIST)
+  }
+  hasJobsRight () {
+    return this.auth.getUser().hasRight(UserRight.MANAGE_JOBS)
+  }
 }
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index 473801822..a24039fc6 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -1,16 +1,10 @@
-<div class="row">
+<p-dataTable
-  <div class="content-padding">
+    [value]="followers" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
-    <h3>Followers list</h3>
+    sortField="createdAt" (onLazyLoad)="loadLazy($event)"
+>
-    <p-dataTable
+  <p-column field="id" header="ID"></p-column>
-        [value]="followers" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+  <p-column field="follower.host" header="Host"></p-column>
-        sortField="createdAt" (onLazyLoad)="loadLazy($event)"
+  <p-column field="follower.score" header="Score"></p-column>
-    >
+  <p-column field="state" header="State"></p-column>
-      <p-column field="id" header="ID"></p-column>
+  <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
-      <p-column field="follower.host" header="Host"></p-column>
+</p-dataTable>
-      <p-column field="follower.score" header="Score"></p-column>
-      <p-column field="state" header="State"></p-column>
-      <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
-    </p-dataTable>
-  </div>
-</div>
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.scss b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
index 0a0f621c6..e69de29bb 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.scss
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
@@ -1,3 +0,0 @@
-.btn {
-  margin-top: 10px;
-}
diff --git a/client/src/app/+admin/follows/following-add/following-add.component.html b/client/src/app/+admin/follows/following-add/following-add.component.html
index 8e7dddc11..25bab9d0d 100644
--- a/client/src/app/+admin/follows/following-add/following-add.component.html
+++ b/client/src/app/+admin/follows/following-add/following-add.component.html
@@ -1,35 +1,22 @@
-<div class="row">
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-  <div class="content-padding">
-    <h3>Add following</h3>
+<form (ngSubmit)="addFollowing()">
+  <div class="form-group">
+    <label for="hosts">1 host (without "http://") per line</label>
-    <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+    <textarea
+      type="text" class="form-control" placeholder="example.com" id="hosts" name="hosts"
+      [(ngModel)]="hostsString" (ngModelChange)="onHostsChanged()" [ngClass]="{ 'input-error': hostsError }"
+    ></textarea>
-    <form (ngSubmit)="addFollowing()" [formGroup]="form">
+    <div *ngIf="hostsError" class="form-error">
-      <div class="form-group"  *ngFor="let host of hosts; let id = index; trackBy:customTrackBy">
+      {{ hostsError }}
-        <label [for]="'host-' + id">Host (so without "http://")</label>
+    </div>
+  </div>
-        <div class="input-group">
-          <input
-            type="text" class="form-control" placeholder="example.com"
-            [id]="'host-' + id" [formControlName]="'host-' + id"
-          />
-          <span class="input-group-btn">
-            <button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button>
-            <button *ngIf="displayRemoveField(id)" (click)="removeField(id)" class="btn btn-default" type="button">-</button>
-          </span>
-        </div>
-        <div [hidden]="form.controls['host-' + id].valid || form.controls['host-' + id].pristine" class="alert alert-warning">
-          It should be a valid host.
-        </div>
-      </div>
-      <div *ngIf="canMakeFriends() === false"  class="alert alert-warning">
-        It seems that you are not on a HTTPS server. Your webserver need to have TLS activated in order to follow servers.
-      </div>
-      <input type="submit" value="Add following" class="btn btn-default" [disabled]="!isFormValid()">
+  <div *ngIf="httpEnabled() === false"  class="alert alert-warning">
-    </form>
+    It seems that you are not on a HTTPS server. Your webserver needs to have TLS activated in order to follow servers.
  </div>
-</div>
+  <input type="submit" value="Add following" [disabled]="hostsError || !hostsString" class="btn btn-default">
+</form>
diff --git a/client/src/app/+admin/follows/following-add/following-add.component.scss b/client/src/app/+admin/follows/following-add/following-add.component.scss
index 5fde51636..2cb3efe28 100644
--- a/client/src/app/+admin/follows/following-add/following-add.component.scss
+++ b/client/src/app/+admin/follows/following-add/following-add.component.scss
@@ -1,7 +1,9 @@
-table {
+textarea {
-  margin-bottom: 40px;
+  height: 250px;
 }
-.input-group-btn button {
+input[type=submit] {
-  width: 35px;
+  @include peertube-button;
+  @include orange-button;
 }
diff --git a/client/src/app/+admin/follows/following-add/following-add.component.ts b/client/src/app/+admin/follows/following-add/following-add.component.ts
index 814c6f1a1..bf842129d 100644
--- a/client/src/app/+admin/follows/following-add/following-add.component.ts
+++ b/client/src/app/+admin/follows/following-add/following-add.component.ts
@@ -1,9 +1,6 @@
-import { Component, OnInit } from '@angular/core'
+import { Component } from '@angular/core'
-import { FormControl, FormGroup } from '@angular/forms'
 import { Router } from '@angular/router'
 import { NotificationsService } from 'angular2-notifications'
 import { ConfirmService } from '../../../core'
 import { validateHost } from '../../../shared'
 import { FollowService } from '../shared'
@@ -13,9 +10,9 @@ import { FollowService } from '../shared'
  templateUrl: './following-add.component.html',
  styleUrls: [ './following-add.component.scss' ]
 })
-export class FollowingAddComponent implements OnInit {
+export class FollowingAddComponent {
-  form: FormGroup
+  hostsString = ''
-  hosts: string[] = [ ]
+  hostsError: string = null
  error: string = null
  constructor (
@@ -25,76 +22,50 @@ export class FollowingAddComponent implements OnInit {
    private followService: FollowService
  ) {}
-  ngOnInit () {
+  httpEnabled () {
-    this.form = new FormGroup({})
-    this.addField()
-  }
-  addField () {
-    this.form.addControl(`host-${this.hosts.length}`, new FormControl('', [ validateHost ]))
-    this.hosts.push('')
-  }
-  canMakeFriends () {
    return window.location.protocol === 'https:'
  }
-  customTrackBy (index: number, obj: any): any {
+  onHostsChanged () {
-    return index
+    this.hostsError = null
-  }
-  displayAddField (index: number) {
-    return index === (this.hosts.length - 1)
-  }
-  displayRemoveField (index: number) {
+    const newHostsErrors = []
-    return (index !== 0 || this.hosts.length > 1) && index !== (this.hosts.length - 1)
+    const hosts = this.getNotEmptyHosts()
-  }
-  isFormValid () {
+    for (const host of hosts) {
-    // Do not check the last input
+      if (validateHost(host) === false) {
-    for (let i = 0; i < this.hosts.length - 1; i++) {
+        newHostsErrors.push(`${host} is not valid`)
-      if (!this.form.controls[`host-${i}`].valid) return false
+      }
    }
-    const lastIndex = this.hosts.length - 1
+    if (newHostsErrors.length !== 0) {
-    // If the last input (which is not the first) is empty, it's ok
+      this.hostsError = newHostsErrors.join('. ')
-    if (this.hosts[lastIndex] === '' && lastIndex !== 0) {
-      return true
-    } else {
-      return this.form.controls[`host-${lastIndex}`].valid
    }
  }
-  removeField (index: number) {
-    // Remove the last control
-    this.form.removeControl(`host-${this.hosts.length - 1}`)
-    this.hosts.splice(index, 1)
-  }
  addFollowing () {
    this.error = ''
-    const notEmptyHosts = this.getNotEmptyHosts()
+    const hosts = this.getNotEmptyHosts()
-    if (notEmptyHosts.length === 0) {
+    if (hosts.length === 0) {
-      this.error = 'You need to specify at least 1 host.'
+      this.error = 'You need to specify hosts to follow.'
-      return
    }
-    if (!this.isHostsUnique(notEmptyHosts)) {
+    if (!this.isHostsUnique(hosts)) {
      this.error = 'Hosts need to be unique.'
      return
    }
-    const confirmMessage = 'Are you sure to make friends with:<br /> - ' + notEmptyHosts.join('<br /> - ')
+    const confirmMessage = 'If you confirm, you will send a follow request to:<br /> - ' + hosts.join('<br /> - ')
    this.confirmService.confirm(confirmMessage, 'Follow new server(s)').subscribe(
      res => {
        if (res === false) return
-        this.followService.follow(notEmptyHosts).subscribe(
+        this.followService.follow(hosts).subscribe(
          status => {
            this.notificationsService.success('Success', 'Follow request(s) sent!')
-            this.router.navigate([ '/admin/follows/following-list' ])
+            setTimeout(() => this.router.navigate([ '/admin/follows/following-list' ]), 500)
          },
          err => this.notificationsService.error('Error', err.message)
@@ -103,18 +74,15 @@ export class FollowingAddComponent implements OnInit {
    )
  }
-  private getNotEmptyHosts () {
-    const notEmptyHosts = []
-    Object.keys(this.form.value).forEach((hostKey) => {
-      const host = this.form.value[hostKey]
-      if (host !== '') notEmptyHosts.push(host)
-    })
-    return notEmptyHosts
-  }
  private isHostsUnique (hosts: string[]) {
    return hosts.every(host => hosts.indexOf(host) === hosts.lastIndexOf(host))
  }
+  private getNotEmptyHosts () {
+    const hosts = this.hostsString
+      .split('\n')
+      .filter(host => host && host.length !== 0) // Eject empty hosts
+    return hosts
+  }
 }
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index a73084312..2b6cc9113 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -1,20 +1,14 @@
-<div class="row">
+<p-dataTable
-  <div class="content-padding">
+    [value]="following" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
-    <h3>Following list</h3>
+    sortField="createdAt" (onLazyLoad)="loadLazy($event)"
+>
-    <p-dataTable
+  <p-column field="id" header="ID"></p-column>
-        [value]="following" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+  <p-column field="following.host" header="Host"></p-column>
-        sortField="createdAt" (onLazyLoad)="loadLazy($event)"
+  <p-column field="state" header="State"></p-column>
-    >
+  <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
-      <p-column field="id" header="ID"></p-column>
+  <p-column styleClass="action-cell">
-      <p-column field="following.host" header="Host"></p-column>
+    <ng-template pTemplate="body" let-following="rowData">
-      <p-column field="state" header="State"></p-column>
+      <my-delete-button (click)="removeFollowing(following)"></my-delete-button>
-      <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
+    </ng-template>
-      <p-column header="Unfollow" styleClass="action-cell">
+  </p-column>
-        <ng-template pTemplate="body" let-following="rowData">
+</p-dataTable>
-          <span (click)="removeFollowing(following)" class="glyphicon glyphicon-remove glyphicon-black" title="Unfollow"></span>
-        </ng-template>
-      </p-column>
-    </p-dataTable>
-  </div>
-</div>
diff --git a/client/src/app/+admin/follows/follows.component.html b/client/src/app/+admin/follows/follows.component.html
index b67bc9736..1baba5a4d 100644
--- a/client/src/app/+admin/follows/follows.component.html
+++ b/client/src/app/+admin/follows/follows.component.html
@@ -1,4 +1,6 @@
-<div class="follows-menu">
+<div class="admin-sub-header">
+  <div class="admin-sub-title">Manage follows</div>
  <tabset #followsMenuTabs>
    <tab *ngFor="let link of links">
      <ng-template tabHeading>
@@ -8,4 +10,6 @@
  </tabset>
 </div>
 <router-outlet></router-outlet>
diff --git a/client/src/app/+admin/follows/follows.component.scss b/client/src/app/+admin/follows/follows.component.scss
index d8ab41975..835fa3b78 100644
--- a/client/src/app/+admin/follows/follows.component.scss
+++ b/client/src/app/+admin/follows/follows.component.scss
@@ -1,21 +1,4 @@
-.follows-menu {
+.admin-sub-title {
-  margin-top: 20px;
+  flex-grow: 0;
-}
+  margin-right: 30px;
-tabset /deep/ {
-  .nav-link {
-    padding: 0;
-  }
-  .tab-link {
-    display: block;
-    text-align: center;
-    height: 40px;
-    width: 120px;
-    line-height: 40px;
-    &:hover, &:active, &:focus {
-      text-decoration: none !important;
-    }
-  }
 }
diff --git a/client/src/app/+admin/follows/follows.component.ts b/client/src/app/+admin/follows/follows.component.ts
index a1be82585..f29ad384f 100644
--- a/client/src/app/+admin/follows/follows.component.ts
+++ b/client/src/app/+admin/follows/follows.component.ts
@@ -47,7 +47,7 @@ export class FollowsComponent implements OnInit, AfterViewInit {
    for (let i = 0; i < this.links.length; i++) {
      const path = this.links[i].path
-      if (url.endsWith(path) === true) {
+      if (url.endsWith(path) === true && this.followsMenuTabs.tabs[i]) {
        this.followsMenuTabs.tabs[i].active = true
        return
      }
diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
index a90267172..7aa5f4254 100644
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
@@ -1,18 +1,20 @@
-<div class="row">
+<div class="admin-sub-header">
-  <div class="content-padding">
+  <div class="admin-sub-title">Jobs list</div>
-    <h3>Jobs list</h3>
-    <p-dataTable
-        [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
-        sortField="createdAt" (onLazyLoad)="loadLazy($event)"
-    >
-      <p-column field="id" header="ID"></p-column>
-      <p-column field="category" header="Category"></p-column>
-      <p-column field="handlerName" header="Handler name"></p-column>
-      <p-column field="handlerInputData" header="Input data"></p-column>
-      <p-column field="state" header="State"></p-column>
-      <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
-      <p-column field="updatedAt" header="Updated date"></p-column>
-    </p-dataTable>
-  </div>
 </div>
+<p-dataTable
+    [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+    sortField="createdAt" (onLazyLoad)="loadLazy($event)" [scrollable]="true" [virtualScroll]="true" [scrollHeight]="scrollHeight"
+>
+  <p-column field="id" header="ID" [style]="{ width: '40px' }"></p-column>
+  <p-column field="category" header="Category" [style]="{ width: '100px' }"></p-column>
+  <p-column field="handlerName" header="Handler name" [style]="{ width: '200px' }"></p-column>
+  <p-column header="Input data">
+    <ng-template pTemplate="body" let-job="rowData">
+      <pre>{{ job.handlerInputData }}</pre>
+    </ng-template>
+  </p-column>
+  <p-column field="state" header="State" [style]="{ width: '100px' }"></p-column>
+  <p-column field="createdAt" header="Created date" [sortable]="true" [style]="{ width: '250px' }"></p-column>
+  <p-column field="updatedAt" header="Updated date" [style]="{ width: '250px' }"></p-column>
+</p-dataTable>
diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss
new file mode 100644
index 000000000..9dde13216
--- /dev/null
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss
@@ -0,0 +1,3 @@
+pre {
+  font-size: 13px;
+}
diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
index 88fe259fb..f93847f29 100644
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
@@ -1,22 +1,24 @@
-import { Component } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 import { NotificationsService } from 'angular2-notifications'
 import { SortMeta } from 'primeng/primeng'
 import { Job } from '../../../../../../shared/index'
 import { RestPagination, RestTable } from '../../../shared'
+import { viewportHeight } from '../../../shared/misc/utils'
 import { JobService } from '../shared'
 import { RestExtractor } from '../../../shared/rest/rest-extractor.service'
 @Component({
  selector: 'my-jobs-list',
  templateUrl: './jobs-list.component.html',
-  styleUrls: [ ]
+  styleUrls: [ './jobs-list.component.scss' ]
 })
-export class JobsListComponent extends RestTable {
+export class JobsListComponent extends RestTable implements OnInit {
  jobs: Job[] = []
  totalRecords = 0
-  rowsPerPage = 10
+  rowsPerPage = 20
  sort: SortMeta = { field: 'createdAt', order: 1 }
  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+  scrollHeight = ''
  constructor (
    private notificationsService: NotificationsService,
@@ -26,10 +28,14 @@ export class JobsListComponent extends RestTable {
    super()
  }
+  ngOnInit () {
+    // 270 -> headers + footer...
+    this.scrollHeight = (viewportHeight() - 380) + 'px'
+  }
  protected loadData () {
    this.jobsService
      .getJobs(this.pagination, this.sort)
-      .map(res => this.restExtractor.applyToResultListData(res, this.formatJob.bind(this)))
      .subscribe(
        resultList => {
          this.jobs = resultList.data
@@ -39,12 +45,4 @@ export class JobsListComponent extends RestTable {
        err => this.notificationsService.error('Error', err.message)
      )
  }
-  private formatJob (job: Job) {
-    const handlerInputData = JSON.stringify(job.handlerInputData)
-    return Object.assign(job, {
-      handlerInputData
-    })
-  }
 }
diff --git a/client/src/app/+admin/jobs/shared/job.service.ts b/client/src/app/+admin/jobs/shared/job.service.ts
index 49f1ab6f5..0cfbdbbea 100644
--- a/client/src/app/+admin/jobs/shared/job.service.ts
+++ b/client/src/app/+admin/jobs/shared/job.service.ts
@@ -25,6 +25,13 @@ export class JobService {
    return this.authHttp.get<ResultList<Job>>(JobService.BASE_JOB_URL, { params })
      .map(res => this.restExtractor.convertResultListDateToHuman(res))
+      .map(res => this.restExtractor.applyToResultListData(res, this.prettyPrintData))
      .catch(err => this.restExtractor.handleError(err))
  }
+  private prettyPrintData (obj: Job) {
+    const handlerInputData = JSON.stringify(obj.handlerInputData, null, 2)
+    return Object.assign(obj, { handlerInputData })
+  }
 }
diff --git a/client/src/app/+admin/users/shared/user.service.ts b/client/src/app/+admin/users/shared/user.service.ts
index e4bd5df37..dc77cc1d8 100644
--- a/client/src/app/+admin/users/shared/user.service.ts
+++ b/client/src/app/+admin/users/shared/user.service.ts
@@ -1,14 +1,12 @@
-import { Injectable } from '@angular/core'
 import { HttpClient, HttpParams } from '@angular/common/http'
-import { Observable } from 'rxjs/Observable'
+import { Injectable } from '@angular/core'
+import { BytesPipe } from 'ngx-pipes'
+import { SortMeta } from 'primeng/components/common/sortmeta'
 import 'rxjs/add/operator/catch'
 import 'rxjs/add/operator/map'
+import { Observable } from 'rxjs/Observable'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { ResultList, UserCreate, UserUpdate } from '../../../../../../shared'
-import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'
+import { RestExtractor, RestPagination, RestService, User } from '../../../shared'
-import { RestExtractor, User, RestPagination, RestService } from '../../../shared'
-import { UserCreate, UserUpdate, ResultList } from '../../../../../../shared'
 @Injectable()
 export class UserService {
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html
index 349be13c1..963e2f39a 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.html
@@ -1,73 +1,68 @@
-<div class="row">
+<div class="admin-sub-title" *ngIf="isCreation() === true">Add user</div>
-  <div class="content-padding">
+<div class="admin-sub-title" *ngIf="isCreation() === false">Edit user {{ username }}</div>
-    <h3 *ngIf="isCreation() === true">Add user</h3>
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-    <h3 *ngIf="isCreation() === false">Edit user {{ username }}</h3>
-    <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
+  <div class="form-group" *ngIf="isCreation()">
-    <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
+    <label for="username">Username</label>
-      <div class="form-group" *ngIf="isCreation()">
+    <input
-        <label for="username">Username</label>
+      type="text" class="form-control" id="username" placeholder="john"
-        <input
+      formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
-          type="text" class="form-control" id="username" placeholder="john"
+    >
-          formControlName="username"
+    <div *ngIf="formErrors.username" class="form-error">
-        >
+      {{ formErrors.username }}
-        <div *ngIf="formErrors.username" class="alert alert-danger">
+    </div>
-          {{ formErrors.username }}
+  </div>
-        </div>
-      </div>
-      <div class="form-group">
-        <label for="email">Email</label>
-        <input
-          type="text" class="form-control" id="email" placeholder="mail@example.com"
-          formControlName="email"
-        >
-        <div *ngIf="formErrors.email" class="alert alert-danger">
-          {{ formErrors.email }}
-        </div>
-      </div>
-      <div class="form-group" *ngIf="isCreation()">
+  <div class="form-group">
-        <label for="password">Password</label>
+    <label for="email">Email</label>
-        <input
+    <input
-          type="password" class="form-control" id="password"
+      type="text" class="form-control" id="email" placeholder="mail@example.com"
-          formControlName="password"
+      formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
-        >
+    >
-        <div *ngIf="formErrors.password" class="alert alert-danger">
+    <div *ngIf="formErrors.email" class="form-error">
-          {{ formErrors.password }}
+      {{ formErrors.email }}
-        </div>
+    </div>
-      </div>
+  </div>
-      <div class="form-group">
+  <div class="form-group" *ngIf="isCreation()">
-        <label for="role">Role</label>
+    <label for="password">Password</label>
-        <select class="form-control" id="role" formControlName="role">
+    <input
-          <option *ngFor="let role of roles" [value]="role.value">
+      type="password" class="form-control" id="password"
-            {{ role.label }}
+      formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
-          </option>
+    >
-        </select>
+    <div *ngIf="formErrors.password" class="form-error">
+      {{ formErrors.password }}
+    </div>
+  </div>
-        <div *ngIf="formErrors.role" class="alert alert-danger">
+  <div class="form-group">
-          {{ formErrors.role }}
+    <label for="role">Role</label>
-        </div>
+    <select class="form-control" id="role" formControlName="role">
-      </div>
+      <option *ngFor="let role of roles" [value]="role.value">
+        {{ role.label }}
+      </option>
+    </select>
-      <div class="form-group">
+    <div *ngIf="formErrors.role" class="form-error">
-        <label for="videoQuota">Video quota</label>
+      {{ formErrors.role }}
-        <select class="form-control" id="videoQuota" formControlName="videoQuota">
+    </div>
-          <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
+  </div>
-            {{ videoQuotaOption.label }}
-          </option>
-        </select>
-        <div class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
+  <div class="form-group">
-          Transcoding is enabled on server. The video quota only take in account <strong>original</strong> video. <br />
+    <label for="videoQuota">Video quota</label>
-          In maximum, this user could use ~ {{ computeQuotaWithTranscoding() | bytes }}.
+    <select class="form-control" id="videoQuota" formControlName="videoQuota">
-        </div>
+      <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
-      </div>
+        {{ videoQuotaOption.label }}
+      </option>
+    </select>
-      <input type="submit" value="{{ getFormButtonTitle() }}" class="btn btn-default" [disabled]="!form.valid">
+    <div class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
-    </form>
+      Transcoding is enabled on server. The video quota only take in account <strong>original</strong> video. <br />
+      In maximum, this user could use ~ {{ computeQuotaWithTranscoding() | bytes }}.
+    </div>
  </div>
-</div>
+  <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+</form>
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.scss b/client/src/app/+admin/users/user-edit/user-edit.component.scss
index 401caa0c6..68d270c19 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.scss
@@ -1,3 +1,21 @@
+.admin-sub-title {
+  margin-bottom: 30px;
+}
+input:not([type=submit]) {
+  @include peertube-input-text(340px);
+  display: block;
+}
+select {
+  @include peertube-select(340px);
+}
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+}
 .transcoding-information {
  margin-top: 5px;
  font-size: 11px;
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 16a8a8033..b3d90ba1e 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -1,35 +1,26 @@
-<div class="row">
+<div class="admin-sub-header">
-  <div class="content-padding">
+  <div class="admin-sub-title">Users list</div>
-    <h3>Users list</h3>
+  <a class="add-button" routerLink="/admin/users/add">
+    <span class="icon icon-add"></span>
-    <p-dataTable
+    Add user
-        [value]="users" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+  </a>
-        sortField="id" (onLazyLoad)="loadLazy($event)"
-    >
-      <p-column field="id" header="ID" [sortable]="true"></p-column>
-      <p-column field="username" header="Username" [sortable]="true"></p-column>
-      <p-column field="email" header="Email"></p-column>
-      <p-column field="videoQuota" header="Video quota"></p-column>
-      <p-column field="roleLabel" header="Role"></p-column>
-      <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
-      <p-column header="Edit" styleClass="action-cell">
-        <ng-template pTemplate="body" let-user="rowData">
-          <a [routerLink]="getRouterUserEditLink(user)" title="Edit this user">
-            <span class="glyphicon glyphicon-pencil glyphicon-black"></span>
-          </a>
-        </ng-template>
-      </p-column>
-      <p-column header="Delete" styleClass="action-cell">
-        <ng-template pTemplate="body" let-user="rowData">
-          <span (click)="removeUser(user)" class="glyphicon glyphicon-remove glyphicon-black" title="Remove this user"></span>
-        </ng-template>
-      </p-column>
-    </p-dataTable>
-    <a class="add-user btn btn-success pull-right" [routerLink]="['/admin/users/add']">
-      <span class="glyphicon glyphicon-plus"></span>
-      Add user
-    </a>
-  </div>
 </div>
+<p-dataTable
+    [value]="users" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+    sortField="id" (onLazyLoad)="loadLazy($event)"
+>
+  <p-column field="id" header="ID" [sortable]="true"></p-column>
+  <p-column field="username" header="Username" [sortable]="true"></p-column>
+  <p-column field="email" header="Email"></p-column>
+  <p-column field="videoQuota" header="Video quota"></p-column>
+  <p-column field="roleLabel" header="Role"></p-column>
+  <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
+  <p-column styleClass="action-cell">
+    <ng-template pTemplate="body" let-user="rowData">
+      <my-edit-button [routerLink]="getRouterUserEditLink(user)"></my-edit-button>
+      <my-delete-button (click)="removeUser(user)"></my-delete-button>
+    </ng-template>
+  </p-column>
+</p-dataTable>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss
index 71adef653..8b22f67ff 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/users/user-list/user-list.component.scss
@@ -1,3 +1,11 @@
-.add-user {
+  .add-button {
-  margin-top: 10px;
+    @include peertube-button-link;
-}
+    @include orange-button;
+    .icon.icon-add {
+      @include icon(22px);
+      margin-right: 3px;
+      background-image: url('../../../../assets/images/admin/add.svg');
+    }
+  }
diff --git a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html
index ab0a9d99f..d655a5e9b 100644
--- a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html
@@ -1,24 +1,19 @@
-<div class="row">
+<div class="admin-sub-header">
-  <div class="content-padding">
+  <div class="admin-sub-title">Video abuses list</div>
-  <h3>Video abuses list</h3>
-  <p-dataTable
-      [value]="videoAbuses" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
-      sortField="id" (onLazyLoad)="loadLazy($event)"
-  >
-    <p-column field="id" header="ID" [sortable]="true"></p-column>
-    <p-column field="reason" header="Reason"></p-column>
-    <p-column field="reporterServerHost" header="Reporter server host"></p-column>
-    <p-column field="reporterUsername" header="Reporter username"></p-column>
-    <p-column field="videoName" header="Video name"></p-column>
-    <p-column header="Video" styleClass="action-cell">
-      <ng-template pTemplate="body" let-videoAbuse="rowData">
-        <a [routerLink]="getRouterVideoLink(videoAbuse.videoId)" title="Go to the video">{{ videoAbuse.videoId }}</a>
-      </ng-template>
-    </p-column>
-    <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
-  </p-dataTable>
-  </div>
 </div>
+<p-dataTable
+    [value]="videoAbuses" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+    sortField="id" (onLazyLoad)="loadLazy($event)"
+>
+  <p-column field="id" header="ID" [sortable]="true"></p-column>
+  <p-column field="reason" header="Reason"></p-column>
+  <p-column field="reporterServerHost" header="Reporter server host"></p-column>
+  <p-column field="reporterUsername" header="Reporter username"></p-column>
+  <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
+  <p-column header="Video">
+    <ng-template pTemplate="body" let-videoAbuse="rowData">
+      <a [routerLink]="getRouterVideoLink(videoAbuse.videoId)" title="Go to the video">{{ videoAbuse.videoName }}</a>
+    </ng-template>
+  </p-column>
+</p-dataTable>
diff --git a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.scss b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.scss
new file mode 100644
index 000000000..6a4762650
--- /dev/null
+++ b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.scss
@@ -0,0 +1,6 @@
+/deep/ a {
+  &, &:hover, &:active, &:focus {
+    color: #000;
+  }
+}
diff --git a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts
index 654603d01..b4d3bbd24 100644
--- a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts
+++ b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts
@@ -8,7 +8,8 @@ import { VideoAbuse } from '../../../../../../shared'
 @Component({
  selector: 'my-video-abuse-list',
-  templateUrl: './video-abuse-list.component.html'
+  templateUrl: './video-abuse-list.component.html',
+  styleUrls: [ './video-abuse-list.component.scss']
 })
 export class VideoAbuseListComponent extends RestTable implements OnInit {
  videoAbuses: VideoAbuse[] = []
diff --git a/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.html
index 05d116798..1d813fa07 100644
--- a/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.html
+++ b/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.html
@@ -18,7 +18,7 @@
      <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
      <p-column header="Delete" styleClass="action-cell">
        <ng-template pTemplate="body" let-entry="rowData">
-          <span (click)="removeVideoFromBlacklist(entry)" class="glyphicon glyphicon-remove glyphicon-black" title="Remove this video from blacklist"></span>
+          <my-delete-button (click)="removeVideoFromBlacklist(entry)"></my-delete-button>
        </ng-template>
      </p-column>
    </p-dataTable>
diff --git a/client/src/app/account/account-change-password/account-change-password.component.html b/client/src/app/account/account-change-password/account-change-password.component.html
deleted file mode 100644
index 92d9f900a..000000000
--- a/client/src/app/account/account-change-password/account-change-password.component.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-<form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
-  <div class="form-group">
-    <label for="new-password">New password</label>
-    <input
-      type="password" class="form-control" id="new-password"
-      formControlName="new-password"
-    >
-    <div *ngIf="formErrors['new-password']" class="alert alert-danger">
-      {{ formErrors['new-password'] }}
-    </div>
-  </div>
-  <div class="form-group">
-    <label for="name">Confirm new password</label>
-    <input
-      type="password" class="form-control" id="new-confirmed-password"
-      formControlName="new-confirmed-password"
-    >
-  </div>
-  <input type="submit" value="Change password" class="btn btn-default" [disabled]="!form.valid">
-</form>
diff --git a/client/src/app/account/account-details/account-details.component.html b/client/src/app/account/account-details/account-details.component.html
deleted file mode 100644
index 8f4f176af..000000000
--- a/client/src/app/account/account-details/account-details.component.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
-  <div class="form-group">
-    <input
-      type="checkbox" id="displayNSFW"
-      formControlName="displayNSFW"
-    >
-    <label for="displayNSFW">Display videos that contain mature or explicit content</label>
-    <div *ngIf="formErrors['displayNSFW']" class="alert alert-danger">
-      {{ formErrors['displayNSFW'] }}
-    </div>
-  </div>
-  <input type="submit" value="Update" class="btn btn-default" [disabled]="!form.valid">
-</form>
diff --git a/client/src/app/account/account-routing.module.ts b/client/src/app/account/account-routing.module.ts
index 74d9aa03e..070b9b5c5 100644
--- a/client/src/app/account/account-routing.module.ts
+++ b/client/src/app/account/account-routing.module.ts
@@ -5,17 +5,34 @@ import { MetaGuard } from '@ngx-meta/core'
 import { LoginGuard } from '../core'
 import { AccountComponent } from './account.component'
+import { AccountSettingsComponent } from './account-settings/account-settings.component'
+import { AccountVideosComponent } from './account-videos/account-videos.component'
 const accountRoutes: Routes = [
  {
    path: 'account',
    component: AccountComponent,
-    canActivate: [ MetaGuard, LoginGuard ],
+    canActivateChild: [ MetaGuard, LoginGuard ],
-    data: {
+    children: [
-      meta: {
+      {
-        title: 'My account'
+        path: 'settings',
+        component: AccountSettingsComponent,
+        data: {
+          meta: {
+            title: 'Account settings'
+          }
+        }
+      },
+      {
+        path: 'videos',
+        component: AccountVideosComponent,
+        data: {
+          meta: {
+            title: 'Account videos'
+          }
+        }
      }
-    }
+    ]
  }
 ]
diff --git a/client/src/app/account/account-settings/account-change-password/account-change-password.component.html b/client/src/app/account/account-settings/account-change-password/account-change-password.component.html
new file mode 100644
index 000000000..b0e3cada4
--- /dev/null
+++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.html
@@ -0,0 +1,20 @@
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+<form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
+  <label for="new-password">Change password</label>
+  <input
+    type="password" id="new-password" placeholder="New password"
+    formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }"
+  >
+  <div *ngIf="formErrors['new-password']" class="form-error">
+    {{ formErrors['new-password'] }}
+  </div>
+  <input
+    type="password" id="new-confirmed-password" placeholder="Confirm new password"
+    formControlName="new-confirmed-password"
+  >
+  <input type="submit" value="Change password" [disabled]="!form.valid">
+</form>
diff --git a/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss b/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss
new file mode 100644
index 000000000..7a4fdb34d
--- /dev/null
+++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss
@@ -0,0 +1,16 @@
+input[type=password] {
+  @include peertube-input-text(340px);
+  display: block;
+  &#new-confirmed-password {
+    margin-top: 15px;
+  }
+}
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+  margin-top: 15px;
+}
diff --git a/client/src/app/account/account-change-password/account-change-password.component.ts b/client/src/app/account/account-settings/account-change-password/account-change-password.component.ts
index 69edec54b..8979e1734 100644
--- a/client/src/app/account/account-change-password/account-change-password.component.ts
+++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.ts
@@ -1,16 +1,13 @@
 import { Component, OnInit } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
-import { Router } from '@angular/router'
 import { NotificationsService } from 'angular2-notifications'
+import { FormReactive, USER_PASSWORD, UserService } from '../../../shared'
-import { FormReactive, UserService, USER_PASSWORD } from '../../shared'
 @Component({
  selector: 'my-account-change-password',
-  templateUrl: './account-change-password.component.html'
+  templateUrl: './account-change-password.component.html',
+  styleUrls: [ './account-change-password.component.scss' ]
 })
 export class AccountChangePasswordComponent extends FormReactive implements OnInit {
  error: string = null
diff --git a/client/src/app/account/account-change-password/index.ts b/client/src/app/account/account-settings/account-change-password/index.ts
index 44c330b66..44c330b66 100644
--- a/client/src/app/account/account-change-password/index.ts
+++ b/client/src/app/account/account-settings/account-change-password/index.ts
diff --git a/client/src/app/account/account-settings/account-details/account-details.component.html b/client/src/app/account/account-settings/account-details/account-details.component.html
new file mode 100644
index 000000000..bc18b39b4
--- /dev/null
+++ b/client/src/app/account/account-settings/account-details/account-details.component.html
@@ -0,0 +1,14 @@
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
+  <input
+    type="checkbox" id="displayNSFW"
+    formControlName="displayNSFW"
+  >
+  <label for="displayNSFW">Display videos that contain mature or explicit content</label>
+  <div *ngIf="formErrors['displayNSFW']" class="alert alert-danger">
+    {{ formErrors['displayNSFW'] }}
+  </div>
+  <input type="submit" value="Save" [disabled]="!form.valid">
+</form>
diff --git a/client/src/app/account/account-settings/account-details/account-details.component.scss b/client/src/app/account/account-settings/account-details/account-details.component.scss
new file mode 100644
index 000000000..5c369f968
--- /dev/null
+++ b/client/src/app/account/account-settings/account-details/account-details.component.scss
@@ -0,0 +1,13 @@
+label {
+  font-size: 15px;
+  font-weight: $font-regular;
+  margin-left: 5px;
+}
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+  display: block;
+  margin-top: 15px;
+}
diff --git a/client/src/app/account/account-details/account-details.component.ts b/client/src/app/account/account-settings/account-details/account-details.component.ts
index d7a6e6871..d835c53e5 100644
--- a/client/src/app/account/account-details/account-details.component.ts
+++ b/client/src/app/account/account-settings/account-details/account-details.component.ts
@@ -1,21 +1,14 @@
-import { Component, OnInit, Input } from '@angular/core'
+import { Component, Input, OnInit } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
-import { Router } from '@angular/router'
 import { NotificationsService } from 'angular2-notifications'
+import { UserUpdateMe } from '../../../../../../shared'
-import { AuthService } from '../../core'
+import { AuthService } from '../../../core'
-import {
+import { FormReactive, User, UserService } from '../../../shared'
-  FormReactive,
-  User,
-  UserService,
-  USER_PASSWORD
-} from '../../shared'
-import { UserUpdateMe } from '../../../../../shared'
 @Component({
  selector: 'my-account-details',
-  templateUrl: './account-details.component.html'
+  templateUrl: './account-details.component.html',
+  styleUrls: [ './account-details.component.scss' ]
 })
 export class AccountDetailsComponent extends FormReactive implements OnInit {
diff --git a/client/src/app/account/account-details/index.ts b/client/src/app/account/account-settings/account-details/index.ts
index 4829f608a..4829f608a 100644
--- a/client/src/app/account/account-details/index.ts
+++ b/client/src/app/account/account-settings/account-details/index.ts
diff --git a/client/src/app/account/account-settings/account-settings.component.html b/client/src/app/account/account-settings/account-settings.component.html
new file mode 100644
index 000000000..c0a74cc47
--- /dev/null
+++ b/client/src/app/account/account-settings/account-settings.component.html
@@ -0,0 +1,15 @@
+<div class="user">
+  <img [src]="getAvatarPath()" alt="Avatar" />
+  <div class="user-info">
+    <div class="user-info-username">{{ user.username }}</div>
+    <div class="user-info-followers">{{ user.account?.followersCount }} subscribers</div>
+  </div>
+</div>
+<div class="account-title">Account settings</div>
+<my-account-change-password></my-account-change-password>
+<div class="account-title">Filtering</div>
+<my-account-details [user]="user"></my-account-details>
diff --git a/client/src/app/account/account-settings/account-settings.component.scss b/client/src/app/account/account-settings/account-settings.component.scss
new file mode 100644
index 000000000..f514809b0
--- /dev/null
+++ b/client/src/app/account/account-settings/account-settings.component.scss
@@ -0,0 +1,28 @@
+.user {
+  display: flex;
+  img {
+    @include avatar(50px);
+    margin-right: 15px;
+  }
+  .user-info {
+    .user-info-username {
+      font-size: 20px;
+      font-weight: $font-bold;
+    }
+    .user-info-followers {
+      font-size: 15px;
+    }
+  }
+}
+.account-title {
+  text-transform: uppercase;
+  color: $orange-color;
+  font-weight: $font-bold;
+  font-size: 13px;
+  margin-top: 55px;
+  margin-bottom: 30px;
+}
diff --git a/client/src/app/account/account-settings/account-settings.component.ts b/client/src/app/account/account-settings/account-settings.component.ts
new file mode 100644
index 000000000..cba251000
--- /dev/null
+++ b/client/src/app/account/account-settings/account-settings.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core'
+import { User } from '../../shared'
+import { AuthService } from '../../core'
+@Component({
+  selector: 'my-account-settings',
+  templateUrl: './account-settings.component.html',
+  styleUrls: [ './account-settings.component.scss' ]
+})
+export class AccountSettingsComponent implements OnInit {
+  user: User = null
+  constructor (private authService: AuthService) {}
+  ngOnInit () {
+    this.user = this.authService.getUser()
+  }
+  getAvatarPath () {
+    return this.user.getAvatarPath()
+  }
+}
diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html
new file mode 100644
index 000000000..f69c0487d
--- /dev/null
+++ b/client/src/app/account/account-videos/account-videos.component.html
@@ -0,0 +1,39 @@
+<div
+  class="videos"
+  infiniteScroll
+  [infiniteScrollDistance]="0.5"
+  [infiniteScrollUpDistance]="1.5"
+  (scrolled)="onNearOfBottom()"
+  (scrolledUp)="onNearOfTop()"
+>
+  <div class="video" *ngFor="let video of videos; let i = index">
+    <input type="checkbox" [(ngModel)]="checkedVideos[video.id]" />
+    <my-video-thumbnail [video]="video"></my-video-thumbnail>
+    <div class="video-info">
+      <div class="video-info-name">{{ video.name }}</div>
+      <span class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
+    </div>
+    <!-- Display only once -->
+    <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0">
+      <div class="action-selection-mode-child">
+        <span class="action-button action-button-cancel-selection" (click)="abortSelectionMode()">
+          Cancel
+        </span>
+        <span class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()">
+          <span class="icon icon-delete-white"></span>
+          Delete
+        </span>
+      </div>
+    </div>
+    <div class="video-buttons" *ngIf="isInSelectionMode() === false">
+      <my-delete-button (click)="deleteVideo(video)"></my-delete-button>
+      <my-edit-button [routerLink]="[ '/videos', 'edit', video.uuid ]"></my-edit-button>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss
new file mode 100644
index 000000000..5459014a6
--- /dev/null
+++ b/client/src/app/account/account-videos/account-videos.component.scss
@@ -0,0 +1,96 @@
+.action-selection-mode {
+  width: 174px;
+  display: flex;
+  justify-content: flex-end;
+  .action-selection-mode-child {
+    position: fixed;
+    .action-button {
+      display: inline-block;
+    }
+    .action-button-cancel-selection {
+      @include peertube-button;
+      @include grey-button;
+      margin-right: 10px;
+    }
+    .action-button-delete-selection {
+      @include peertube-button;
+      @include orange-button;
+    }
+    .icon.icon-delete-white {
+      @include icon(21px);
+      position: relative;
+      top: -2px;
+      background-image: url('../../../assets/images/global/delete-white.svg');
+    }
+  }
+}
+/deep/ .action-button {
+  &.action-button-delete {
+    margin-right: 10px;
+  }
+}
+.video {
+  display: flex;
+  height: 130px;
+  padding-bottom: 20px;
+  input[type=checkbox] {
+    margin-right: 20px;
+    outline: 0;
+  }
+  &:first-child {
+    margin-top: 47px;
+  }
+  &:not(:last-child) {
+    margin-bottom: 20px;
+    border-bottom: 1px solid #C6C6C6;
+  }
+  my-video-thumbnail {
+    margin-right: 10px;
+  }
+  .video-info {
+    flex-grow: 1;
+    .video-info-name {
+      font-size: 16px;
+      font-weight: $font-semibold;
+    }
+    .video-info-date-views {
+      font-size: 13px;
+    }
+  }
+}
+@media screen and (max-width: 800px) {
+  .video {
+    flex-direction: column;
+    height: auto;
+    text-align: center;
+    input[type=checkbox] {
+      display: none;
+    }
+    my-video-thumbnail {
+      margin-right: 0;
+    }
+    .video-buttons {
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/client/src/app/account/account-videos/account-videos.component.ts b/client/src/app/account/account-videos/account-videos.component.ts
new file mode 100644
index 000000000..5f12cfce0
--- /dev/null
+++ b/client/src/app/account/account-videos/account-videos.component.ts
@@ -0,0 +1,97 @@
+import { Component, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { NotificationsService } from 'angular2-notifications'
+import 'rxjs/add/observable/from'
+import 'rxjs/add/operator/concatAll'
+import { Observable } from 'rxjs/Observable'
+import { ConfirmService } from '../../core/confirm'
+import { AbstractVideoList } from '../../shared/video/abstract-video-list'
+import { Video } from '../../shared/video/video.model'
+import { VideoService } from '../../shared/video/video.service'
+@Component({
+  selector: 'my-account-videos',
+  templateUrl: './account-videos.component.html',
+  styleUrls: [ './account-videos.component.scss' ]
+})
+export class AccountVideosComponent extends AbstractVideoList implements OnInit {
+  titlePage = 'My videos'
+  currentRoute = '/account/videos'
+  checkedVideos: { [ id: number ]: boolean } = {}
+  constructor (protected router: Router,
+               protected route: ActivatedRoute,
+               protected notificationsService: NotificationsService,
+               protected confirmService: ConfirmService,
+               private videoService: VideoService) {
+    super()
+  }
+  ngOnInit () {
+    super.ngOnInit()
+  }
+  abortSelectionMode () {
+    this.checkedVideos = {}
+  }
+  isInSelectionMode () {
+    return Object.keys(this.checkedVideos).some(k => this.checkedVideos[k] === true)
+  }
+  getVideosObservable () {
+    return this.videoService.getMyVideos(this.pagination, this.sort)
+  }
+  deleteSelectedVideos () {
+    const toDeleteVideosIds = Object.keys(this.checkedVideos)
+      .filter(k => this.checkedVideos[k] === true)
+      .map(k => parseInt(k, 10))
+    this.confirmService.confirm(`Do you really want to delete ${toDeleteVideosIds.length} videos?`, 'Delete').subscribe(
+      res => {
+        if (res === false) return
+        const observables: Observable<any>[] = []
+        for (const videoId of toDeleteVideosIds) {
+          const o = this.videoService
+            .removeVideo(videoId)
+            .do(() => this.spliceVideosById(videoId))
+          observables.push(o)
+        }
+        Observable.from(observables)
+          .concatAll()
+          .subscribe(
+            res => this.notificationsService.success('Success', `${toDeleteVideosIds.length} videos deleted.`),
+          err => this.notificationsService.error('Error', err.text)
+          )
+      }
+    )
+  }
+  deleteVideo (video: Video) {
+    this.confirmService.confirm(`Do you really want to delete ${video.name}?`, 'Delete').subscribe(
+      res => {
+        if (res === false) return
+        this.videoService.removeVideo(video.id)
+          .subscribe(
+            status => {
+              this.notificationsService.success('Success', `Video ${video.name} deleted.`)
+              this.spliceVideosById(video.id)
+            },
+            error => this.notificationsService.error('Error', error.text)
+          )
+      }
+    )
+  }
+  private spliceVideosById (id: number) {
+    const index = this.videos.findIndex(v => v.id === id)
+    this.videos.splice(index, 1)
+  }
+}
diff --git a/client/src/app/account/account.component.html b/client/src/app/account/account.component.html
index 177e54999..d82a4ca4d 100644
--- a/client/src/app/account/account.component.html
+++ b/client/src/app/account/account.component.html
@@ -1,25 +1,11 @@
 <div class="row">
-  <div class="content-padding">
+  <div class="sub-menu">
-    <h3>Account</h3>
+    <a routerLink="/account/settings" routerLinkActive="active" class="title-page">My account</a>
-    <div class="col-md-6 col-sm-12">
+    <a routerLink="/account/videos" routerLinkActive="active" class="title-page">My videos</a>
-      <div class="panel panel-default">
+  </div>
-        <div class="panel-heading">Change password</div>
-        <div class="panel-body">
-          <my-account-change-password></my-account-change-password>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-6 col-sm-12">
-      <div class="panel panel-default">
-        <div class="panel-heading">Update my informations</div>
-        <div class="panel-body">
+  <div class="margin-content">
-          <my-account-details [user]="user"></my-account-details>
+    <router-outlet></router-outlet>
-        </div>
-      </div>
-    </div>
  </div>
 </div>
diff --git a/client/src/app/account/account.component.scss b/client/src/app/account/account.component.scss
index 61b80d0a7..e69de29bb 100644
--- a/client/src/app/account/account.component.scss
+++ b/client/src/app/account/account.component.scss
@@ -1,3 +0,0 @@
-.panel {
-  margin-top: 40px;
-}
diff --git a/client/src/app/account/account.component.ts b/client/src/app/account/account.component.ts
index 929934f67..3d3677ab0 100644
--- a/client/src/app/account/account.component.ts
+++ b/client/src/app/account/account.component.ts
@@ -1,28 +1,8 @@
-import { Component, OnInit } from '@angular/core'
+import { Component } from '@angular/core'
-import { FormBuilder, FormGroup } from '@angular/forms'
-import { Router } from '@angular/router'
-import { NotificationsService } from 'angular2-notifications'
-import { AuthService } from '../core'
-import {
-  FormReactive,
-  User,
-  UserService,
-  USER_PASSWORD
-} from '../shared'
 @Component({
  selector: 'my-account',
  templateUrl: './account.component.html',
  styleUrls: [ './account.component.scss' ]
 })
-export class AccountComponent implements OnInit {
+export class AccountComponent {}
-  user: User = null
-  constructor (private authService: AuthService) {}
-  ngOnInit () {
-    this.user = this.authService.getUser()
-  }
-}
diff --git a/client/src/app/account/account.module.ts b/client/src/app/account/account.module.ts
index 380e9d235..020199e23 100644
--- a/client/src/app/account/account.module.ts
+++ b/client/src/app/account/account.module.ts
@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core'
+import { SharedModule } from '../shared'
 import { AccountRoutingModule } from './account-routing.module'
+import { AccountChangePasswordComponent } from './account-settings/account-change-password/account-change-password.component'
+import { AccountDetailsComponent } from './account-settings/account-details/account-details.component'
+import { AccountSettingsComponent } from './account-settings/account-settings.component'
 import { AccountComponent } from './account.component'
-import { AccountChangePasswordComponent } from './account-change-password'
-import { AccountDetailsComponent } from './account-details'
 import { AccountService } from './account.service'
-import { SharedModule } from '../shared'
+import { AccountVideosComponent } from './account-videos/account-videos.component'
 @NgModule({
  imports: [
@@ -15,8 +16,10 @@ import { SharedModule } from '../shared'
  declarations: [
    AccountComponent,
+    AccountSettingsComponent,
    AccountChangePasswordComponent,
-    AccountDetailsComponent
+    AccountDetailsComponent,
+    AccountVideosComponent
  ],
  exports: [
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index 0f9484344..fe72c9181 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -6,7 +6,7 @@ import { PreloadSelectedModulesList } from './core'
 const routes: Routes = [
  {
    path: '',
-    redirectTo: '/videos/list',
+    redirectTo: '/videos/trending',
    pathMatch: 'full'
  },
  {
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 8a826e783..da4273dda 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -1,37 +1,26 @@
-<div class="container-fluid">
+<div>
-  <div class="row header">
+  <div class="header">
-    <div class="col-md-2 col-sm-3 col-xs-3 top-left-block" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }">
+    <div class="top-left-block" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }">
-      <div class="hamburger-block" (click)="toggleMenu()">
+      <span class="icon icon-menu" (click)="toggleMenu()"></span>
-        <span class="glyphicon glyphicon-menu-hamburger"></span>
-      </div>
-      <div id="peertube-title">
+      <a id="peertube-title" [routerLink]="['/videos/list']" title="Homepage">
-        <a [routerLink]="['/videos/list']" title="Homepage"></a>
+        <span class="icon icon-logo"></span>
-      </div>
+        PeerTube
+      </a>
    </div>
-    <!-- Used for the fixed title -->
+    <div class="header-right">
-    <div class="col-md-2 col-sm-3 col-xs-3 fake-title-block"></div>
+      <my-header></my-header>
-    <!-- We need to reset col-md-* because my-search is in fixed position -->
-    <my-search class="col-md-10 col-sm-9 col-xs-9"></my-search>
-  </div>
-  <div class="row">
-    <div class="col-md-2 col-sm-3 col-xs-3 title-menu-left">
-      <div class="title-menu-left-block menu">
-        <my-menu *ngIf="isMenuDisplayed && isInAdmin() === false"></my-menu>
-        <my-menu-admin *ngIf="isMenuDisplayed && isInAdmin() === true"></my-menu-admin>
-      </div>
    </div>
+  </div>
-    <!-- Used for the fixed menu -->
+  <div class="sub-header-container">
-    <div class="fake-menu col-md-2 col-sm-3 col-xs-3">
+    <div *ngIf="isMenuDisplayed" class="title-menu-left">
+        <my-menu></my-menu>
    </div>
-    <div class="main-col" [ngClass]="getMainColClasses()">
+    <div class="main-col container-fluid" [ngClass]="getMainColClasses()">
      <div class="main-row">
        <router-outlet></router-outlet>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index a656d5c29..008c6d1f0 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -2,10 +2,15 @@
  min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
 }
+.sub-header-container {
+  margin-top: $header-height;
+}
 .title-menu-left {
  position: fixed;
  height: calc(100vh - #{$header-height});
  padding: 0;
+  width: $menu-width;
  .title-menu-left-block.menu {
    height: 100%;
@@ -14,125 +19,62 @@
 .header {
  height: $header-height;
+  position: fixed;
-  .fake-title-block {
+  top: 0;
-    display: inline-block;
+  width: 100%;
-  }
+  background-color: #fff;
+  z-index: 1000;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
+  display: flex;
  .top-left-block {
-    z-index: 100;
+    width: $menu-width;
-    background-color: #fff;
+    z-index: 1001;
-    border-right: 1px solid $header-border-color;
    height: $header-height;
-    line-height: $header-height;
-    margin-top: 0;
-    margin-bottom: 0;
    display: flex;
-    position: fixed;
+    align-items: center;
-    padding: 0;
-    &.border-bottom {
+    .icon {
-      border-bottom: 1px solid $header-border-color;
+      @include icon(22px);
-    }
-    .hamburger-block {
-      margin-right: 15px;
-      margin-left: 15px;
-      .glyphicon {
+      &.icon-menu {
-        cursor: pointer;
+        background-image: url('../assets/images/header/menu.svg');
-        position: relative;
+        margin: 0 18px 0 24px;
-        top: 4px;
      }
    }
    #peertube-title {
-      a {
+      font-size: 20px;
-        color: inherit !important;
+      font-weight: $font-bold;
-        display: block;
+      color: inherit !important;
-        background: url('../assets/logo.png') no-repeat;
+      display: flex;
-        background-size: contain;
+      align-items: center;
-        background-position: center;
-        height: 100%;
+      @include disable-default-a-behaviour;
-        margin: auto;
-        width: 135px;
+      .icon.icon-logo {
+        display: inline-block;
-        &:hover {
+        background: url('../assets/images/logo.svg') no-repeat;
-          color: inherit !important;
+        width: 23px;
-          text-decoration: none !important;
+        height: 24px;
-        }
      }
    }
    @media screen and (max-width: 500px) {
+      width: 70px;
      #peertube-title {
        display: none;
      }
-      .hamburger-block {
-        width: 100%;
-        text-align: center;
-      }
-    }
-    @media screen and (min-width: 500px) and (max-width: 600px) {
-      #peertube-title a {
-        width: 80px;
-      }
-    }
-    @media screen and (min-width: 600px) and (max-width: 700px) {
-      #peertube-title a {
-        width: 100px;
-      }
-    }
-    @media screen and (min-width: 1000px) {
-      #peertube-title a {
-        width: 120px;
-      }
-    }
-    @media screen and (min-width: 1000px) {
-      #peertube-title a {
-        width: 120px;
-      }
-    }
-    @media screen and (min-width: 1200px) {
-      padding-left: 15px;
-      .hamburger-block {
-        margin-right: 15px;
-      }
-      #peertube-title a {
-        width: 135px;
-      }
-    }
-    @media screen and (min-width: 1600px) {
-      .hamburger-block {
-        margin-right: 20px;
-      }
-      #peertube-title a {
-        width: 180px;
-      }
    }
  }
-  my-search {
+  .header-right {
-    position: fixed;
+    height: $header-height;
-    z-index: 1000;
+    display: flex;
-    // Fix col-md-* padding
+    align-items: center;
-    padding: 0;
+    flex-grow: 1;
-  }
+    justify-content: flex-end;
-  .search-col {
-    height: 100%;
-    margin-left: -15px;
-    padding: 0;
  }
 }
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 9b699fafd..b1818c298 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,8 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, ServerService } from './core'
-import { UserService } from './shared'
 @Component({
  selector: 'my-app',
@@ -62,20 +60,9 @@ export class AppComponent implements OnInit {
  }
  getMainColClasses () {
-    const colSizes = {
-      md: 10,
-      sm: 9,
-      xs: 9
-    }
    // Take all width is the menu is not displayed
-    if (this.isMenuDisplayed === false) {
+    if (this.isMenuDisplayed === false) return [ 'expanded' ]
-      Object.keys(colSizes).forEach(col => colSizes[col] = 12)
-    }
-    const classes = []
-    Object.keys(colSizes).forEach(col => classes.push(`col-${col}-${colSizes[col]}`))
-    return classes
+    return []
  }
 }
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index e71641e0d..1326e3411 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -20,6 +20,8 @@ import { LoginModule } from './login'
 import { SignupModule } from './signup'
 import { SharedModule } from './shared'
 import { VideosModule } from './videos'
+import { MenuComponent } from './menu'
+import { HeaderComponent } from './header'
 export function metaFactory (): MetaLoader {
  return new MetaStaticLoader({
@@ -47,7 +49,10 @@ const APP_PROVIDERS = [
 @NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
-    AppComponent
+    AppComponent,
+    MenuComponent,
+    HeaderComponent
  ],
  imports: [
    BrowserModule,
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index 9e6c6b888..e887dde1f 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -1,30 +1,25 @@
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { Router } from '@angular/router'
-import { Observable } from 'rxjs/Observable'
-import { Subject } from 'rxjs/Subject'
+import { NotificationsService } from 'angular2-notifications'
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
+import 'rxjs/add/observable/throw'
-import { ReplaySubject } from 'rxjs/ReplaySubject'
 import 'rxjs/add/operator/do'
 import 'rxjs/add/operator/map'
 import 'rxjs/add/operator/mergeMap'
-import 'rxjs/add/observable/throw'
+import { Observable } from 'rxjs/Observable'
+import { ReplaySubject } from 'rxjs/ReplaySubject'
-import { NotificationsService } from 'angular2-notifications'
+import { Subject } from 'rxjs/Subject'
+import { OAuthClientLocal, User as UserServerModel, UserRefreshToken, UserRole, VideoChannel } from '../../../../../shared'
-import { AuthStatus } from './auth-status.model'
+import { Account } from '../../../../../shared/models/accounts'
-import { AuthUser } from './auth-user.model'
+import { UserLogin } from '../../../../../shared/models/users/user-login.model'
-import {
-  OAuthClientLocal,
-  UserRole,
-  UserRefreshToken,
-  VideoChannel,
-  User as UserServerModel
-} from '../../../../../shared'
 // Do not use the barrel (dependency loop)
 import { RestExtractor } from '../../shared/rest'
-import { UserLogin } from '../../../../../shared/models/users/user-login.model'
 import { UserConstructorHash } from '../../shared/users/user.model'
+import { AuthStatus } from './auth-status.model'
+import { AuthUser } from './auth-user.model'
 interface UserLoginWithUsername extends UserLogin {
  access_token: string
  refresh_token: string
@@ -42,10 +37,7 @@ interface UserLoginWithUserInformation extends UserLogin {
  displayNSFW: boolean
  email: string
  videoQuota: number
-  account: {
+  account: Account
-    id: number
-    uuid: string
-  }
  videoChannels: VideoChannel[]
 }
@@ -177,19 +169,15 @@ export class AuthService {
    return this.http.post<UserRefreshToken>(AuthService.BASE_TOKEN_URL, body, { headers })
                    .map(res => this.handleRefreshToken(res))
-                    .catch(res => {
+                    .catch(err => {
-                      // The refresh token is invalid?
+                      console.error(err)
-                      if (res.status === 400 && res.error.error === 'invalid_grant') {
+                      console.log('Cannot refresh token -> logout...')
-                        console.error('Cannot refresh token -> logout...')
+                      this.logout()
-                        this.logout()
+                      this.router.navigate(['/login'])
-                        this.router.navigate(['/login'])
+                      return Observable.throw({
-                        return Observable.throw({
+                        error: 'You need to reconnect.'
-                          error: 'You need to reconnect.'
+                      })
-                        })
-                      }
-                      return this.restExtractor.handleError(res)
                    })
  }
@@ -202,7 +190,6 @@ export class AuthService {
    }
    this.mergeUserInformation(obj)
-      .do(() => this.userInformationLoaded.next(true))
      .subscribe(
        res => {
          this.user.displayNSFW = res.displayNSFW
@@ -211,6 +198,8 @@ export class AuthService {
          this.user.account = res.account
          this.user.save()
+          this.userInformationLoaded.next(true)
        }
      )
  }
diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/core/confirm/confirm.component.html
index 2726af6cc..31b735f97 100644
--- a/client/src/app/core/confirm/confirm.component.html
+++ b/client/src/app/core/confirm/confirm.component.html
@@ -6,14 +6,14 @@
        <button type="button" class="close" aria-label="Close" (click)="cancel()">
          <span aria-hidden="true">&times;</span>
        </button>
-        <h4 class="modal-title">{{ title }}</h4>
+        <h4 class="title-page title-page-single">{{ title }}</h4>
      </div>
      <div class="modal-body" [innerHtml]="message"></div>
      <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="cancel()">Cancel</button>
+        <button type="button" class="grey-button" data-dismiss="modal" (click)="cancel()">Cancel</button>
-        <button type="button" class="btn btn-primary" (click)="confirm()">Confirm</button>
+        <button type="button" class="orange-button" (click)="confirm()">Confirm</button>
      </div>
    </div>
  </div>
diff --git a/client/src/app/core/confirm/confirm.component.ts b/client/src/app/core/confirm/confirm.component.ts
index c8e41e233..0515d969a 100644
--- a/client/src/app/core/confirm/confirm.component.ts
+++ b/client/src/app/core/confirm/confirm.component.ts
@@ -11,7 +11,8 @@ export interface ConfigChangedEvent {
 @Component({
  selector: 'my-confirm',
-  templateUrl: './confirm.component.html'
+  templateUrl: './confirm.component.html',
+  styles: [ '.button { padding: 0 13px; }' ]
 })
 export class ConfirmComponent implements OnInit {
  @ViewChild('confirmModal') confirmModal: ModalDirective
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index c4ce2b637..75262e6cf 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -26,17 +26,13 @@ import { throwIfAlreadyLoaded } from './module-import-guard'
  ],
  declarations: [
-    ConfirmComponent,
+    ConfirmComponent
-    MenuComponent,
-    MenuAdminComponent
  ],
  exports: [
    SimpleNotificationsModule,
-    ConfirmComponent,
+    ConfirmComponent
-    MenuComponent,
-    MenuAdminComponent
  ],
  providers: [
diff --git a/client/src/app/core/index.ts b/client/src/app/core/index.ts
index 8358261ae..3c01e05aa 100644
--- a/client/src/app/core/index.ts
+++ b/client/src/app/core/index.ts
@@ -1,6 +1,5 @@
 export * from './auth'
 export * from './server'
 export * from './confirm'
-export * from './menu'
 export * from './routing'
 export * from './core.module'
diff --git a/client/src/app/core/menu/index.ts b/client/src/app/core/menu/index.ts
deleted file mode 100644
index c905ed20a..000000000
--- a/client/src/app/core/menu/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './menu.component'
-export * from './menu-admin.component'
diff --git a/client/src/app/core/menu/menu-admin.component.html b/client/src/app/core/menu/menu-admin.component.html
deleted file mode 100644
index 9857b2e3e..000000000
--- a/client/src/app/core/menu/menu-admin.component.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<menu>
-  <div class="panel-block">
-    <a *ngIf="hasUsersRight()" routerLink="/admin/users" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-user"></span>
-      List users
-    </a>
-    <a *ngIf="hasServerFollowRight()" routerLink="/admin/follows" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-cloud"></span>
-      Manage follows
-    </a>
-    <a *ngIf="hasVideoAbusesRight()" routerLink="/admin/video-abuses" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-alert"></span>
-      Video abuses
-    </a>
-    <a *ngIf="hasVideoBlacklistRight()" routerLink="/admin/video-blacklist" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-eye-close"></span>
-      Video blacklist
-    </a>
-    <a *ngIf="hasJobsRight()" routerLink="/admin/jobs" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-tasks"></span>
-      Jobs
-    </a>
-  </div>
-  <div class="panel-block">
-    <a routerLink="/videos/list" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-cog"></span>
-      Quit admin.
-    </a>
-  </div>
-</menu>
diff --git a/client/src/app/core/menu/menu-admin.component.ts b/client/src/app/core/menu/menu-admin.component.ts
deleted file mode 100644
index ea8d5f57c..000000000
--- a/client/src/app/core/menu/menu-admin.component.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Component } from '@angular/core'
-import { AuthService } from '../auth/auth.service'
-import { UserRight } from '../../../../../shared'
-@Component({
-  selector: 'my-menu-admin',
-  templateUrl: './menu-admin.component.html',
-  styleUrls: [ './menu.component.scss' ]
-})
-export class MenuAdminComponent {
-  constructor (private auth: AuthService) {}
-  hasUsersRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_USERS)
-  }
-  hasServerFollowRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_SERVER_FOLLOW)
-  }
-  hasVideoAbusesRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_ABUSES)
-  }
-  hasVideoBlacklistRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_BLACKLIST)
-  }
-  hasJobsRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_JOBS)
-  }
-}
diff --git a/client/src/app/core/menu/menu.component.html b/client/src/app/core/menu/menu.component.html
deleted file mode 100644
index fcde23fdd..000000000
--- a/client/src/app/core/menu/menu.component.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<menu>
-  <div class="panel-block">
-    <div class="block-title">Account</div>
-    <div id="panel-user-login" class="panel-button">
-      <a *ngIf="!isLoggedIn" routerLink="/login" routerLinkActive="active">
-        <span class="hidden-xs glyphicon glyphicon-log-in"></span>
-        Login
-      </a>
-      <a *ngIf="isLoggedIn" (click)="logout()">
-        <span class="hidden-xs glyphicon glyphicon-log-out"></span>
-        Logout
-      </a>
-    </div>
-    <a *ngIf="!isLoggedIn && isRegistrationAllowed()" routerLink="/signup" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-user"></span>
-      Signup
-    </a>
-    <a *ngIf="isLoggedIn" routerLink="/account" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-user"></span>
-      My account
-    </a>
-    <a *ngIf="isLoggedIn" routerLink="/videos/mine" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-folder-open"></span>
-      My videos
-    </a>
-  </div>
-  <div class="panel-block">
-    <div class="block-title">Videos</div>
-    <a routerLink="/videos/list" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-list"></span>
-      See videos
-    </a>
-    <a *ngIf="isLoggedIn" routerLink="/videos/upload" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-cloud-upload"></span>
-      Upload a video
-    </a>
-  </div>
-  <div *ngIf="userHasAdminAccess" class="panel-block">
-    <div class="block-title">Other</div>
-    <a [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
-      <span class="hidden-xs glyphicon glyphicon-cog"></span>
-      Administration
-    </a>
-  </div>
-</menu>
diff --git a/client/src/app/core/menu/menu.component.scss b/client/src/app/core/menu/menu.component.scss
deleted file mode 100644
index 45679c310..000000000
--- a/client/src/app/core/menu/menu.component.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-menu {
-  background-color: $black-background;
-  padding: 15px;
-  margin: 0;
-  height: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  z-index: 1000;
-  @media screen and (max-width: 550px) {
-    font-size: 90%;
-  }
-  @media screen and (min-width: 1200px) {
-    padding: 25px;
-  }
-  .panel-block {
-    margin-bottom: 15px;
-  }
-  .block-title {
-    text-transform: uppercase;
-    font-weight: bold;
-    color: $menu-color-block;
-    margin-bottom: 10px;
-  }
-  a {
-    display: block;
-    margin-left: 5px;
-    height: 30px;
-    color: $menu-color-link;
-    cursor: pointer;
-    transition: color 0.3s;
-    &:hover, &:focus {
-      text-decoration: none !important;
-      outline: none !important;
-    }
-    .glyphicon {
-      margin-right: 15px;
-    }
-    &:hover, &.active {
-      color: #fff;
-    }
-  }
-}
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index cbc4074c9..16e0595b6 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -1,5 +1,7 @@
-import { Injectable } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import 'rxjs/add/operator/do'
+import { ReplaySubject } from 'rxjs/ReplaySubject'
 import { ServerConfig } from '../../../../../shared'
@@ -8,6 +10,11 @@ export class ServerService {
  private static BASE_CONFIG_URL = API_URL + '/api/v1/config/'
  private static BASE_VIDEO_URL = API_URL + '/api/v1/videos/'
+  videoPrivaciesLoaded = new ReplaySubject<boolean>(1)
+  videoCategoriesLoaded = new ReplaySubject<boolean>(1)
+  videoLicencesLoaded = new ReplaySubject<boolean>(1)
+  videoLanguagesLoaded = new ReplaySubject<boolean>(1)
  private config: ServerConfig = {
    signup: {
      allowed: false
@@ -29,19 +36,19 @@ export class ServerService {
  }
  loadVideoCategories () {
-    return this.loadVideoAttributeEnum('categories', this.videoCategories)
+    return this.loadVideoAttributeEnum('categories', this.videoCategories, this.videoCategoriesLoaded)
  }
  loadVideoLicences () {
-    return this.loadVideoAttributeEnum('licences', this.videoLicences)
+    return this.loadVideoAttributeEnum('licences', this.videoLicences, this.videoLicencesLoaded)
  }
  loadVideoLanguages () {
-    return this.loadVideoAttributeEnum('languages', this.videoLanguages)
+    return this.loadVideoAttributeEnum('languages', this.videoLanguages, this.videoLanguagesLoaded)
  }
  loadVideoPrivacies () {
-    return this.loadVideoAttributeEnum('privacies', this.videoPrivacies)
+    return this.loadVideoAttributeEnum('privacies', this.videoPrivacies, this.videoPrivaciesLoaded)
  }
  getConfig () {
@@ -66,17 +73,20 @@ export class ServerService {
  private loadVideoAttributeEnum (
    attributeName: 'categories' | 'licences' | 'languages' | 'privacies',
-    hashToPopulate: { id: number, label: string }[]
+    hashToPopulate: { id: number, label: string }[],
+    notifier: ReplaySubject<boolean>
  ) {
    return this.http.get(ServerService.BASE_VIDEO_URL + attributeName)
-               .subscribe(data => {
+       .subscribe(data => {
-                 Object.keys(data)
+         Object.keys(data)
-                       .forEach(dataKey => {
+               .forEach(dataKey => {
-                         hashToPopulate.push({
+                 hashToPopulate.push({
-                           id: parseInt(dataKey, 10),
+                   id: parseInt(dataKey, 10),
-                           label: data[dataKey]
+                   label: data[dataKey]
-                         })
+                 })
-                       })
               })
+         notifier.next(true)
+       })
  }
 }
diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
new file mode 100644
index 000000000..c853d2b1b
--- /dev/null
+++ b/client/src/app/header/header.component.html
@@ -0,0 +1,10 @@
+<input
+    type="text" id="search-video" name="search-video" placeholder="Search..."
+    [(ngModel)]="searchValue" (keyup.enter)="doSearch()"
+>
+<span (click)="doSearch()" class="icon icon-search"></span>
+<a class="upload-button" routerLink="/videos/upload">
+  <span class="icon icon-upload"></span>
+  <span class="upload-button-label">Upload</span>
+</a>
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
new file mode 100644
index 000000000..fba70dd2f
--- /dev/null
+++ b/client/src/app/header/header.component.scss
@@ -0,0 +1,58 @@
+#search-video {
+  @include peertube-input-text($search-input-width);
+  margin-right: 15px;
+  padding-right: 25px; // For the search icon
+  &::placeholder {
+    color: #000;
+  }
+  @media screen and (max-width: 600px) {
+    width: calc(100% - 150px);
+  }
+  @media screen and (max-width: 400px) {
+    width: calc(100% - 70px);
+  }
+}
+.icon.icon-search {
+  @include icon(25px);
+  height: 21px;
+  background-image: url('../../assets/images/header/search.svg');
+  // yolo
+  position: absolute;
+  margin-left: -50px;
+  margin-top: 5px;
+}
+.upload-button {
+  @include peertube-button-link;
+  @include orange-button;
+  margin-right: 25px;
+  .icon.icon-upload {
+    @include icon(22px);
+    background-image: url('../../assets/images/header/upload.svg');
+    height: 24px;
+    vertical-align: middle;
+    margin-right: 6px;
+  }
+  @media screen and (max-width: 400px) {
+    margin-right: 10px;
+    padding: 0 10px;
+    .icon.icon-upload {
+      margin-right: 0;
+    }
+    .upload-button-label {
+      display: none;
+    }
+  }
+}
diff --git a/client/src/app/header/header.component.ts b/client/src/app/header/header.component.ts
new file mode 100644
index 000000000..a903048f2
--- /dev/null
+++ b/client/src/app/header/header.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core'
+import { Router } from '@angular/router'
+import { getParameterByName } from '../shared/misc/utils'
+@Component({
+  selector: 'my-header',
+  templateUrl: './header.component.html',
+  styleUrls: [ './header.component.scss' ]
+})
+export class HeaderComponent implements OnInit {
+  searchValue = ''
+  constructor (private router: Router) {}
+  ngOnInit () {
+    const searchQuery = getParameterByName('search', window.location.href)
+    if (searchQuery) this.searchValue = searchQuery
+  }
+  doSearch () {
+    if (!this.searchValue) return
+    this.router.navigate([ '/videos', 'search' ], {
+      queryParams: { search: this.searchValue }
+    })
+  }
+}
diff --git a/client/src/app/header/index.ts b/client/src/app/header/index.ts
new file mode 100644
index 000000000..d98d2d00a
--- /dev/null
+++ b/client/src/app/header/index.ts
@@ -0,0 +1 @@
+export * from './header.component'
diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index bcea0a27a..24807987c 100644
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.component.html
@@ -1,34 +1,33 @@
-<div class="row">
+<div class="margin-content">
-  <div class="content-padding">
+  <div class="title-page title-page-single">
+    Login
-    <h3>Login</h3>
+  </div>
-    <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+  <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-    <form role="form" (ngSubmit)="login()" [formGroup]="form">
+  <form role="form" (ngSubmit)="login()" [formGroup]="form">
-      <div class="form-group">
+    <div class="form-group">
-        <label for="username">Username</label>
+      <label for="username">Username</label>
-        <input
+      <input
-          type="text" class="form-control" id="username" placeholder="Username" required
+        type="text" id="username" placeholder="Username" required
-          formControlName="username"
+        formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
-        >
+      >
-        <div *ngIf="formErrors.username" class="alert alert-danger">
+      <div *ngIf="formErrors.username" class="form-error">
-          {{ formErrors.username }}
+        {{ formErrors.username }}
-        </div>
      </div>
+    </div>
-      <div class="form-group">
+    <div class="form-group">
-        <label for="password">Password</label>
+      <label for="password">Password</label>
-        <input
+      <input
-          type="password" class="form-control" name="password" id="password" placeholder="Password" required
+        type="password" name="password" id="password" placeholder="Password" required
-          formControlName="password"
+        formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
-        >
+      >
-        <div *ngIf="formErrors.password" class="alert alert-danger">
+      <div *ngIf="formErrors.password" class="form-error">
-          {{ formErrors.password }}
+        {{ formErrors.password }}
-        </div>
      </div>
+    </div>
-      <input type="submit" value="Login" class="btn btn-default" [disabled]="!form.valid">
+    <input type="submit" value="Login" [disabled]="!form.valid">
-    </form>
+  </form>
-  </div>
 </div>
diff --git a/client/src/app/login/login.component.scss b/client/src/app/login/login.component.scss
new file mode 100644
index 000000000..3b4326de4
--- /dev/null
+++ b/client/src/app/login/login.component.scss
@@ -0,0 +1,9 @@
+input:not([type=submit]) {
+  @include peertube-input-text(340px);
+  display: block;
+}
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+}
diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts
index 32dc9e36f..dfede5924 100644
--- a/client/src/app/login/login.component.ts
+++ b/client/src/app/login/login.component.ts
@@ -7,7 +7,8 @@ import { FormReactive } from '../shared'
 @Component({
  selector: 'my-login',
-  templateUrl: './login.component.html'
+  templateUrl: './login.component.html',
+  styleUrls: [ './login.component.scss' ]
 })
 export class LoginComponent extends FormReactive implements OnInit {
diff --git a/client/src/app/menu/index.ts b/client/src/app/menu/index.ts
new file mode 100644
index 000000000..421271c12
--- /dev/null
+++ b/client/src/app/menu/index.ts
@@ -0,0 +1 @@
+export * from './menu.component'
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
new file mode 100644
index 000000000..7a80fa4de
--- /dev/null
+++ b/client/src/app/menu/menu.component.html
@@ -0,0 +1,50 @@
+<menu>
+  <div *ngIf="isLoggedIn" class="logged-in-block">
+    <img [src]="getUserAvatarPath()" alt="Avatar" />
+    <div class="logged-in-info">
+      <a routerLink="/account/settings" class="logged-in-username">{{ user.username  }}</a>
+      <div class="logged-in-email">{{ user.email }}</div>
+    </div>
+    <div class="logged-in-more" dropdown placement="right" container="body">
+      <span class="glyphicon glyphicon-option-vertical" dropdownToggle></span>
+      <ul *dropdownMenu class="dropdown-menu">
+        <li>
+          <a (click)="logout($event)" class="dropdown-item" title="Log out" href="#">
+            Log out
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div *ngIf="!isLoggedIn" class="button-block">
+    <a routerLink="/login" class="login-button">Login</a>
+    <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a>
+  </div>
+  <div class="panel-block">
+    <div class="block-title">Videos</div>
+    <a routerLink="/videos/trending" routerLinkActive="active">
+      <span class="icon icon-videos-trending"></span>
+      Trending
+    </a>
+    <a routerLink="/videos/recently-added" routerLinkActive="active">
+      <span class="icon icon-videos-recently-added"></span>
+      Recently added
+    </a>
+  </div>
+  <div *ngIf="userHasAdminAccess" class="panel-block">
+    <div class="block-title">More</div>
+    <a [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
+      <span class="icon icon-administration"></span>
+      Administration
+    </a>
+  </div>
+</menu>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
new file mode 100644
index 000000000..97ceadde3
--- /dev/null
+++ b/client/src/app/menu/menu.component.scss
@@ -0,0 +1,193 @@
+menu {
+  background-color: $black-background;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  z-index: 1000;
+  color: $menu-color;
+  .logged-in-block {
+    height: 100px;
+    background-color: rgba(255, 255, 255, 0.15);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 35px;
+    img {
+      margin-left: 20px;
+      margin-right: 10px;
+      @include avatar(34px);
+    }
+    .logged-in-info {
+      flex-grow: 1;
+      .logged-in-username {
+        font-size: 16px;
+        font-weight: $font-semibold;
+        color: $menu-color;
+        cursor: pointer;
+        @include disable-default-a-behaviour;
+      }
+      .logged-in-email {
+        font-size: 13px;
+        color: #C6C6C6;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 140px;
+      }
+    }
+    .logged-in-more {
+      margin-right: 20px;
+      .glyphicon {
+        cursor: pointer;
+        font-size: 18px;
+      }
+    }
+  }
+  .button-block {
+    margin: 30px 25px 35px 25px;
+    .login-button, .create-account-button {
+      font-weight: $font-semibold;
+      font-size: 15px;
+      height: $button-height;
+      line-height: $button-height;
+      width: 100%;
+      border-radius: 3px;
+      text-align: center;
+      color: $menu-color;
+      display: block;
+      cursor: pointer;
+      margin-bottom: 15px;
+      @include disable-default-a-behaviour;
+      &.login-button {
+        background-color: $orange-color;
+        margin-bottom: 10px;
+      }
+      &.create-account-button {
+        background-color: rgba(255, 255, 255, 0.25);
+      }
+    }
+  }
+  .block-title {
+    text-transform: uppercase;
+    font-weight: $font-bold; // Bold
+    font-size: 13px;
+    margin-bottom: 25px;
+  }
+  .panel-block {
+    margin-bottom: 45px;
+    margin-left: 26px;
+    a {
+      display: flex;
+      color: $menu-color;
+      cursor: pointer;
+      height: 22px;
+      line-height: 22px;
+      font-size: 16px;
+      margin-bottom: 15px;
+      @include disable-default-a-behaviour;
+      .icon {
+        @include icon(22px);
+        margin-right: 18px;
+        &.icon-videos-trending {
+          position: relative;
+          top: -2px;
+          background-image: url('../../assets/images/menu/trending.svg');
+        }
+        &.icon-videos-recently-added {
+          width: 23px;
+          height: 23px;
+          position: relative;
+          top: -1px;
+          background-image: url('../../assets/images/menu/recently-added.svg');
+        }
+        &.icon-administration {
+          width: 23px;
+          height: 23px;
+          background-image: url('../../assets/images/menu/administration.svg');
+        }
+      }
+    }
+  }
+}
+@media screen and (max-width: 800px) {
+  menu {
+    .logged-in-block {
+      padding-left: 10px;
+      img {
+        display: none;
+      }
+      .logged-in-info {
+        .logged-in-username {
+          font-size: 14px;
+        }
+        .logged-in-email {
+          font-size: 11px;
+          max-width: 120px;
+        }
+      }
+      .logged-in-more {
+        margin-right: 5px;
+        .login-button, .create-account-button {
+          font-weight: $font-semibold;
+          font-size: 15px;
+          height: $button-height;
+          line-height: $button-height;
+          width: 190px;
+        }
+      }
+    }
+    .button-block {
+      margin: 20px 10px 25px 10px;
+      .login-button, .create-account-button {
+        font-size: 13px;
+      }
+    }
+    .panel-block {
+      margin-bottom: 30px;
+      margin-left: 10px;
+      a {
+        font-size: 14px;
+        .icon {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}
diff --git a/client/src/app/core/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index d2bd71534..8b8b714a8 100644
--- a/client/src/app/core/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -1,9 +1,8 @@
 import { Component, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
+import { UserRight } from '../../../../shared/models/users/user-right.enum'
-import { AuthService, AuthStatus } from '../auth'
+import { AuthService, AuthStatus, ServerService } from '../core'
-import { ServerService } from '../server'
+import { User } from '../shared/users/user.model'
-import { UserRight } from '../../../../../shared/models/users/user-right.enum'
 @Component({
  selector: 'my-menu',
@@ -11,6 +10,7 @@ import { UserRight } from '../../../../../shared/models/users/user-right.enum'
  styleUrls: [ './menu.component.scss' ]
 })
 export class MenuComponent implements OnInit {
+  user: User
  isLoggedIn: boolean
  userHasAdminAccess = false
@@ -29,16 +29,19 @@ export class MenuComponent implements OnInit {
  ngOnInit () {
    this.isLoggedIn = this.authService.isLoggedIn()
+    if (this.isLoggedIn === true) this.user = this.authService.getUser()
    this.computeIsUserHasAdminAccess()
    this.authService.loginChangedSource.subscribe(
      status => {
        if (status === AuthStatus.LoggedIn) {
          this.isLoggedIn = true
+          this.user = this.authService.getUser()
          this.computeIsUserHasAdminAccess()
          console.log('Logged in.')
        } else if (status === AuthStatus.LoggedOut) {
          this.isLoggedIn = false
+          this.user = undefined
          this.computeIsUserHasAdminAccess()
          console.log('Logged out.')
        } else {
@@ -48,6 +51,10 @@ export class MenuComponent implements OnInit {
    )
  }
+  getUserAvatarPath () {
+    return this.user.getAvatarPath()
+  }
  isRegistrationAllowed () {
    return this.serverService.getConfig().signup.allowed
  }
@@ -78,7 +85,9 @@ export class MenuComponent implements OnInit {
    return this.routesPerRight[right]
  }
-  logout () {
+  logout (event: Event) {
+    event.preventDefault()
    this.authService.logout()
    // Redirect to home page
    this.router.navigate(['/videos/list'])
diff --git a/client/src/app/shared/account/account.model.ts b/client/src/app/shared/account/account.model.ts
new file mode 100644
index 000000000..0b008188a
--- /dev/null
+++ b/client/src/app/shared/account/account.model.ts
@@ -0,0 +1,20 @@
+import { Account as ServerAccount } from '../../../../../shared/models/accounts/account.model'
+import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
+export class Account implements ServerAccount {
+  id: number
+  uuid: string
+  name: string
+  host: string
+  followingCount: number
+  followersCount: number
+  createdAt: Date
+  updatedAt: Date
+  avatar: Avatar
+  static GET_ACCOUNT_AVATAR_PATH (account: Account) {
+    if (account && account.avatar) return account.avatar.path
+    return API_URL + '/client/assets/images/default-avatar.png'
+  }
+}
diff --git a/client/src/app/shared/forms/form-validators/host.validator.ts b/client/src/app/shared/forms/form-validators/host.validator.ts
index 03e810fdb..c18a35f9b 100644
--- a/client/src/app/shared/forms/form-validators/host.validator.ts
+++ b/client/src/app/shared/forms/form-validators/host.validator.ts
@@ -1,14 +1,8 @@
-import { FormControl } from '@angular/forms'
+export function validateHost (value: string) {
-export function validateHost (c: FormControl) {
  // Thanks to http://stackoverflow.com/a/106223
  const HOST_REGEXP = new RegExp(
    '^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$'
  )
-  return HOST_REGEXP.test(c.value) ? null : {
+  return HOST_REGEXP.test(value)
-    validateHost: {
-      valid: false
-    }
-  }
 }
diff --git a/client/src/app/shared/forms/form-validators/video-abuse.ts b/client/src/app/shared/forms/form-validators/video-abuse.ts
index 3c7f26205..4b2a2b789 100644
--- a/client/src/app/shared/forms/form-validators/video-abuse.ts
+++ b/client/src/app/shared/forms/form-validators/video-abuse.ts
@@ -3,8 +3,8 @@ import { Validators } from '@angular/forms'
 export const VIDEO_ABUSE_REASON = {
  VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(300) ],
  MESSAGES: {
-    'required': 'Report reason name is required.',
+    'required': 'Report reason is required.',
-    'minlength': 'Report reson must be at least 2 characters long.',
+    'minlength': 'Report reason must be at least 2 characters long.',
-    'maxlength': 'Report reson cannot be more than 300 characters long.'
+    'maxlength': 'Report reason cannot be more than 300 characters long.'
  }
 }
diff --git a/client/src/app/shared/forms/form-validators/video.ts b/client/src/app/shared/forms/form-validators/video.ts
index 65f11f5da..45da7df4a 100644
--- a/client/src/app/shared/forms/form-validators/video.ts
+++ b/client/src/app/shared/forms/form-validators/video.ts
@@ -1,5 +1,11 @@
 import { Validators } from '@angular/forms'
+export type ValidatorMessage = {
+  [ id: string ]: {
+    [ error: string ]: string
+  }
+}
 export const VIDEO_NAME = {
  VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(120) ],
  MESSAGES: {
@@ -17,17 +23,13 @@ export const VIDEO_PRIVACY = {
 }
 export const VIDEO_CATEGORY = {
-  VALIDATORS: [ Validators.required ],
+  VALIDATORS: [ ],
-  MESSAGES: {
+  MESSAGES: {}
-    'required': 'Video category is required.'
-  }
 }
 export const VIDEO_LICENCE = {
-  VALIDATORS: [ Validators.required ],
+  VALIDATORS: [ ],
-  MESSAGES: {
+  MESSAGES: {}
-    'required': 'Video licence is required.'
-  }
 }
 export const VIDEO_LANGUAGE = {
@@ -43,9 +45,8 @@ export const VIDEO_CHANNEL = {
 }
 export const VIDEO_DESCRIPTION = {
-  VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(3000) ],
+  VALIDATORS: [ Validators.minLength(3), Validators.maxLength(3000) ],
  MESSAGES: {
-    'required': 'Video description is required.',
    'minlength': 'Video description must be at least 3 characters long.',
    'maxlength': 'Video description cannot be more than 3000 characters long.'
  }
@@ -58,10 +59,3 @@ export const VIDEO_TAGS = {
    'maxlength': 'A tag should be less than 30 characters long.'
  }
 }
-export const VIDEO_FILE = {
-  VALIDATORS: [ Validators.required ],
-  MESSAGES: {
-    'required': 'Video file is required.'
-  }
-}
diff --git a/client/src/app/shared/index.ts b/client/src/app/shared/index.ts
index 79bf5ef43..413dda16a 100644
--- a/client/src/app/shared/index.ts
+++ b/client/src/app/shared/index.ts
@@ -1,7 +1,6 @@
 export * from './auth'
 export * from './forms'
 export * from './rest'
-export * from './search'
 export * from './users'
 export * from './video-abuse'
 export * from './video-blacklist'
diff --git a/client/src/app/shared/misc/button.component.scss b/client/src/app/shared/misc/button.component.scss
new file mode 100644
index 000000000..5fcae4f10
--- /dev/null
+++ b/client/src/app/shared/misc/button.component.scss
@@ -0,0 +1,27 @@
+.action-button {
+  @include peertube-button-link;
+  font-size: 15px;
+  font-weight: $font-semibold;
+  color: #585858;
+  background-color: #E5E5E5;
+  &:hover {
+    background-color: #EFEFEF;
+  }
+  .icon {
+    @include icon(21px);
+    position: relative;
+    top: -2px;
+    &.icon-edit {
+      background-image: url('../../../assets/images/global/edit.svg');
+    }
+    &.icon-delete-grey {
+      background-image: url('../../../assets/images/global/delete-grey.svg');
+    }
+  }
+}
diff --git a/client/src/app/shared/misc/delete-button.component.html b/client/src/app/shared/misc/delete-button.component.html
new file mode 100644
index 000000000..3db483882
--- /dev/null
+++ b/client/src/app/shared/misc/delete-button.component.html
@@ -0,0 +1,4 @@
+<span class="action-button action-button-delete" >
+  <span class="icon icon-delete-grey"></span>
+  Delete
+</span>
diff --git a/client/src/app/shared/misc/delete-button.component.ts b/client/src/app/shared/misc/delete-button.component.ts
new file mode 100644
index 000000000..e04039f69
--- /dev/null
+++ b/client/src/app/shared/misc/delete-button.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core'
+@Component({
+  selector: 'my-delete-button',
+  styleUrls: [ './button.component.scss' ],
+  templateUrl: './delete-button.component.html'
+})
+export class DeleteButtonComponent {
+}
diff --git a/client/src/app/shared/misc/edit-button.component.html b/client/src/app/shared/misc/edit-button.component.html
new file mode 100644
index 000000000..6e9564bd7
--- /dev/null
+++ b/client/src/app/shared/misc/edit-button.component.html
@@ -0,0 +1,4 @@
+<a class="action-button" [routerLink]="routerLink">
+  <span class="icon icon-edit"></span>
+  Edit
+</a>
diff --git a/client/src/app/shared/misc/edit-button.component.ts b/client/src/app/shared/misc/edit-button.component.ts
new file mode 100644
index 000000000..201a618ec
--- /dev/null
+++ b/client/src/app/shared/misc/edit-button.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+@Component({
+  selector: 'my-edit-button',
+  styleUrls: [ './button.component.scss' ],
+  templateUrl: './edit-button.component.html'
+})
+export class EditButtonComponent {
+  @Input() routerLink = []
+}
diff --git a/client/src/app/shared/misc/from-now.pipe.ts b/client/src/app/shared/misc/from-now.pipe.ts
new file mode 100644
index 000000000..fac02af0b
--- /dev/null
+++ b/client/src/app/shared/misc/from-now.pipe.ts
@@ -0,0 +1,36 @@
+import { Pipe, PipeTransform } from '@angular/core'
+// Thanks: https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site
+@Pipe({ name: 'myFromNow' })
+export class FromNowPipe implements PipeTransform {
+  transform (value: number) {
+    const seconds = Math.floor((Date.now() - value) / 1000)
+    let interval = Math.floor(seconds / 31536000)
+    if (interval > 1) {
+      return interval + ' years ago'
+    }
+    interval = Math.floor(seconds / 2592000)
+    if (interval > 1) return interval + ' months ago'
+    if (interval === 1) return interval + ' month ago'
+    interval = Math.floor(seconds / 604800)
+    if (interval > 1) return interval + ' weeks ago'
+    if (interval === 1) return interval + ' week ago'
+    interval = Math.floor(seconds / 86400)
+    if (interval > 1) return interval + ' days ago'
+    if (interval === 1) return interval + ' day ago'
+    interval = Math.floor(seconds / 3600)
+    if (interval > 1) return interval + ' hours ago'
+    if (interval === 1) return interval + ' hour ago'
+    interval = Math.floor(seconds / 60)
+    if (interval >= 1) return interval + ' min ago'
+    return Math.floor(seconds) + ' sec ago'
+  }
+}
diff --git a/client/src/app/shared/misc/number-formatter.pipe.ts b/client/src/app/shared/misc/number-formatter.pipe.ts
new file mode 100644
index 000000000..8a0756a36
--- /dev/null
+++ b/client/src/app/shared/misc/number-formatter.pipe.ts
@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core'
+// Thanks: https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
+@Pipe({ name: 'myNumberFormatter' })
+export class NumberFormatterPipe implements PipeTransform {
+  private dictionary: Array<{max: number, type: string}> = [
+    { max: 1000, type: '' },
+    { max: 1000000, type: 'K' },
+    { max: 1000000000, type: 'M' }
+  ]
+  transform (value: number) {
+    const format = this.dictionary.find(d => value < d.max) || this.dictionary[this.dictionary.length - 1]
+    const calc = Math.floor(value / (format.max / 1000))
+    return `${calc}${format.type}`
+  }
+}
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
new file mode 100644
index 000000000..df9e0381a
--- /dev/null
+++ b/client/src/app/shared/misc/utils.ts
@@ -0,0 +1,23 @@
+// Thanks: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
+function getParameterByName (name: string, url: string) {
+  if (!url) url = window.location.href
+  name = name.replace(/[\[\]]/g, '\\$&')
+  const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)')
+  const results = regex.exec(url)
+  if (!results) return null
+  if (!results[2]) return ''
+  return decodeURIComponent(results[2].replace(/\+/g, ' '))
+}
+function viewportHeight () {
+  return Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
+}
+export {
+  viewportHeight,
+  getParameterByName
+}
diff --git a/client/src/app/shared/search/index.ts b/client/src/app/shared/search/index.ts
deleted file mode 100644
index d4016cf89..000000000
--- a/client/src/app/shared/search/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './search-field.type'
-export * from './search.component'
-export * from './search.model'
-export * from './search.service'
diff --git a/client/src/app/shared/search/search-field.type.ts b/client/src/app/shared/search/search-field.type.ts
deleted file mode 100644
index 7323d6cc3..000000000
--- a/client/src/app/shared/search/search-field.type.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type SearchField = 'name' | 'account' | 'host' | 'tags'
diff --git a/client/src/app/shared/search/search.component.html b/client/src/app/shared/search/search.component.html
deleted file mode 100644
index 75e9dfa59..000000000
--- a/client/src/app/shared/search/search.component.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<div class="input-group">
-  <span class="hidden-xs input-group-addon icon-addon">
-    <span class="glyphicon glyphicon-search"></span>
-  </span>
-  <input
-    type="text" id="search-video" name="search-video" class="form-control" placeholder="Search" class="form-control"
-    [(ngModel)]="searchCriteria.value" (keyup.enter)="doSearch()"
-  >
-  <div class="input-group-btn" dropdown placement="bottom right">
-    <button id="simple-btn-keyboard-nav" type="button" class="btn btn-default" dropdownToggle>
-      {{ getStringChoice(searchCriteria.field) }} <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="simple-btn-keyboard-nav" *dropdownMenu>
-      <li *ngFor="let choice of choiceKeys" class="dropdown-item" role="menu-item">
-        <a class="dropdown-item" href="#" (click)="choose($event, choice)">{{ getStringChoice(choice) }}</a>
-      </li>
-    </ul>
-  </div>
-</div>
diff --git a/client/src/app/shared/search/search.component.scss b/client/src/app/shared/search/search.component.scss
deleted file mode 100644
index 583f9586f..000000000
--- a/client/src/app/shared/search/search.component.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.icon-addon {
-  background-color: #fff;
-  border-radius: 0;
-  border-color: $header-border-color;
-  border-width: 0 0 1px 0;
-  text-align: right;
-  .glyphicon-search {
-    width: 30px;
-    font-size: 20px;
-  }
-}
-input, button, .input-group {
-  height: 100%;
-}
-input, .input-group-btn {
-  border-radius: 0;
-  border-top: none;
-  border-left: none;
-}
-input {
-  height: $header-height;
-  border-right: none;
-  font-weight: bold;
-  box-shadow: none;
-  &, &:focus {
-    border-bottom: 1px solid $header-border-color !important;
-    outline: none !important;
-    box-shadow: none !important;
-  }
-}
-button {
-  &, &:hover, &:focus, &:active, &:visited {
-    background-color: #fff !important;
-    border-color: $header-border-color !important;
-    color: #858585 !important;
-    outline: none !important;
-    height: $header-height;
-    border-width: 0 0 1px 0;
-    font-weight: bold;
-    text-decoration: none;
-    box-shadow: none;
-  }
-}
diff --git a/client/src/app/shared/search/search.component.ts b/client/src/app/shared/search/search.component.ts
deleted file mode 100644
index 6ef19c97a..000000000
--- a/client/src/app/shared/search/search.component.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Component, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
-import { Search } from './search.model'
-import { SearchField } from './search-field.type'
-import { SearchService } from './search.service'
-@Component({
-  selector: 'my-search',
-  templateUrl: './search.component.html',
-  styleUrls: [ './search.component.scss' ]
-})
-export class SearchComponent implements OnInit {
-  fieldChoices = {
-    name: 'Name',
-    account: 'Account',
-    host: 'Host',
-    tags: 'Tags'
-  }
-  searchCriteria: Search = {
-    field: 'name',
-    value: ''
-  }
-  constructor (private searchService: SearchService, private router: Router) {}
-  ngOnInit () {
-    // Subscribe if the search changed
-    // Usually changed by videos list component
-    this.searchService.updateSearch.subscribe(
-      newSearchCriteria => {
-        // Put a field by default
-        if (!newSearchCriteria.field) {
-          newSearchCriteria.field = 'name'
-        }
-        this.searchCriteria = newSearchCriteria
-      }
-    )
-  }
-  get choiceKeys () {
-    return Object.keys(this.fieldChoices)
-  }
-  choose ($event: MouseEvent, choice: SearchField) {
-    $event.preventDefault()
-    $event.stopPropagation()
-    this.searchCriteria.field = choice
-    if (this.searchCriteria.value) {
-      this.doSearch()
-    }
-  }
-  doSearch () {
-    if (this.router.url.indexOf('/videos/list') === -1) {
-      this.router.navigate([ '/videos/list' ])
-    }
-    this.searchService.searchUpdated.next(this.searchCriteria)
-  }
-  getStringChoice (choiceKey: SearchField) {
-    return this.fieldChoices[choiceKey]
-  }
-}
diff --git a/client/src/app/shared/search/search.model.ts b/client/src/app/shared/search/search.model.ts
deleted file mode 100644
index 174adf2c6..000000000
--- a/client/src/app/shared/search/search.model.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { SearchField } from './search-field.type'
-export interface Search {
-  field: SearchField
-  value: string
-}
diff --git a/client/src/app/shared/search/search.service.ts b/client/src/app/shared/search/search.service.ts
deleted file mode 100644
index 0480b46bd..000000000
--- a/client/src/app/shared/search/search.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Injectable } from '@angular/core'
-import { Subject } from 'rxjs/Subject'
-import { ReplaySubject } from 'rxjs/ReplaySubject'
-import { Search } from './search.model'
-// This class is needed to communicate between videos/ and search component
-// Remove it when we'll be able to subscribe to router changes
-@Injectable()
-export class SearchService {
-  searchUpdated: Subject<Search>
-  updateSearch: Subject<Search>
-  constructor () {
-    this.updateSearch = new Subject<Search>()
-    this.searchUpdated = new ReplaySubject<Search>(1)
-  }
-}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 456ce851e..d0e163f69 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -1,25 +1,29 @@
-import { NgModule } from '@angular/core'
-import { HttpClientModule } from '@angular/common/http'
 import { CommonModule } from '@angular/common'
+import { HttpClientModule } from '@angular/common/http'
+import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
-import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'
-import { KeysPipe } from 'angular-pipes/src/object/keys.pipe'
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
-import { ProgressbarModule } from 'ngx-bootstrap/progressbar'
-import { PaginationModule } from 'ngx-bootstrap/pagination'
 import { ModalModule } from 'ngx-bootstrap/modal'
-import { DataTableModule } from 'primeng/components/datatable/datatable'
+import { InfiniteScrollModule } from 'ngx-infinite-scroll'
+import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
 import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
+import { DataTableModule } from 'primeng/components/datatable/datatable'
 import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
+import { DeleteButtonComponent } from './misc/delete-button.component'
+import { EditButtonComponent } from './misc/edit-button.component'
+import { FromNowPipe } from './misc/from-now.pipe'
+import { LoaderComponent } from './misc/loader.component'
+import { NumberFormatterPipe } from './misc/number-formatter.pipe'
 import { RestExtractor, RestService } from './rest'
-import { SearchComponent, SearchService } from './search'
 import { UserService } from './users'
 import { VideoAbuseService } from './video-abuse'
 import { VideoBlacklistService } from './video-blacklist'
-import { LoaderComponent } from './misc/loader.component'
+import { VideoMiniatureComponent } from './video/video-miniature.component'
+import { VideoThumbnailComponent } from './video/video-thumbnail.component'
+import { VideoService } from './video/video.service'
 @NgModule({
  imports: [
@@ -31,18 +35,21 @@ import { LoaderComponent } from './misc/loader.component'
    BsDropdownModule.forRoot(),
    ModalModule.forRoot(),
-    PaginationModule.forRoot(),
-    ProgressbarModule.forRoot(),
    DataTableModule,
-    PrimeSharedModule
+    PrimeSharedModule,
+    InfiniteScrollModule,
+    NgPipesModule
  ],
  declarations: [
-    BytesPipe,
+    LoaderComponent,
-    KeysPipe,
+    VideoThumbnailComponent,
-    SearchComponent,
+    VideoMiniatureComponent,
-    LoaderComponent
+    DeleteButtonComponent,
+    EditButtonComponent,
+    NumberFormatterPipe,
+    FromNowPipe
  ],
  exports: [
@@ -54,25 +61,30 @@ import { LoaderComponent } from './misc/loader.component'
    BsDropdownModule,
    ModalModule,
-    PaginationModule,
-    ProgressbarModule,
    DataTableModule,
    PrimeSharedModule,
+    InfiniteScrollModule,
    BytesPipe,
    KeysPipe,
-    SearchComponent,
+    LoaderComponent,
-    LoaderComponent
+    VideoThumbnailComponent,
+    VideoMiniatureComponent,
+    DeleteButtonComponent,
+    EditButtonComponent,
+    NumberFormatterPipe,
+    FromNowPipe
  ],
  providers: [
    AUTH_INTERCEPTOR_PROVIDER,
    RestExtractor,
    RestService,
-    SearchService,
    VideoAbuseService,
    VideoBlacklistService,
-    UserService
+    UserService,
+    VideoService
  ]
 })
 export class SharedModule { }
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index b075ab717..b4d13f37c 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -1,10 +1,5 @@
-import {
+import { hasUserRight, User as UserServerModel, UserRight, UserRole, VideoChannel } from '../../../../../shared'
-  User as UserServerModel,
+import { Account } from '../account/account.model'
-  UserRole,
-  VideoChannel,
-  UserRight,
-  hasUserRight
-} from '../../../../../shared'
 export type UserConstructorHash = {
  id: number,
@@ -14,10 +9,7 @@ export type UserConstructorHash = {
  videoQuota?: number,
  displayNSFW?: boolean,
  createdAt?: Date,
-  account?: {
+  account?: Account,
-    id: number
-    uuid: string
-  },
  videoChannels?: VideoChannel[]
 }
 export class User implements UserServerModel {
@@ -27,10 +19,7 @@ export class User implements UserServerModel {
  role: UserRole
  displayNSFW: boolean
  videoQuota: number
-  account: {
+  account: Account
-    id: number
-    uuid: string
-  }
  videoChannels: VideoChannel[]
  createdAt: Date
@@ -61,4 +50,8 @@ export class User implements UserServerModel {
  hasRight (right: UserRight) {
    return hasUserRight(this.role, right)
  }
+  getAvatarPath () {
+    return Account.GET_ACCOUNT_AVATAR_PATH(this.account)
+  }
 }
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
new file mode 100644
index 000000000..5761f2c81
--- /dev/null
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -0,0 +1,20 @@
+<div class="margin-content">
+  <div class="title-page title-page-single">
+    {{ titlePage }}
+  </div>
+  <div
+    class="videos"
+    infiniteScroll
+    [infiniteScrollUpDistance]="1.5"
+    [infiniteScrollDistance]="0.5"
+    (scrolled)="onNearOfBottom()"
+    (scrolledUp)="onNearOfTop()"
+  >
+    <my-video-miniature
+      class="ng-animate"
+      *ngFor="let video of videos" [video]="video" [user]="user"
+    >
+    </my-video-miniature>
+  </div>
+</div>
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
new file mode 100644
index 000000000..52797bc6c
--- /dev/null
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -0,0 +1,7 @@
+.videos {
+  text-align: center;
+  my-video-miniature {
+    text-align: left;
+  }
+}
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
new file mode 100644
index 000000000..ba1635a18
--- /dev/null
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -0,0 +1,133 @@
+import { OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { NotificationsService } from 'angular2-notifications'
+import { Observable } from 'rxjs/Observable'
+import { SortField } from './sort-field.type'
+import { VideoPagination } from './video-pagination.model'
+import { Video } from './video.model'
+export abstract class AbstractVideoList implements OnInit {
+  pagination: VideoPagination = {
+    currentPage: 1,
+    itemsPerPage: 25,
+    totalItems: null
+  }
+  sort: SortField = '-createdAt'
+  defaultSort: SortField = '-createdAt'
+  videos: Video[] = []
+  loadOnInit = true
+  protected notificationsService: NotificationsService
+  protected router: Router
+  protected route: ActivatedRoute
+  protected abstract currentRoute: string
+  abstract titlePage: string
+  private loadedPages: { [ id: number ]: boolean } = {}
+  abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}>
+  ngOnInit () {
+    // Subscribe to route changes
+    const routeParams = this.route.snapshot.params
+    this.loadRouteParams(routeParams)
+    if (this.loadOnInit === true) this.loadMoreVideos('after')
+  }
+  onNearOfTop () {
+    if (this.pagination.currentPage > 1) {
+      this.previousPage()
+    }
+  }
+  onNearOfBottom () {
+    if (this.hasMoreVideos()) {
+      this.nextPage()
+    }
+  }
+  reloadVideos () {
+    this.videos = []
+    this.loadedPages = {}
+    this.loadMoreVideos('before')
+  }
+  loadMoreVideos (where: 'before' | 'after') {
+    if (this.loadedPages[this.pagination.currentPage] === true) return
+    const observable = this.getVideosObservable()
+    observable.subscribe(
+      ({ videos, totalVideos }) => {
+        // Paging is too high, return to the first one
+        if (this.pagination.currentPage > 1 && totalVideos <= ((this.pagination.currentPage - 1) * this.pagination.itemsPerPage)) {
+          this.pagination.currentPage = 1
+          this.setNewRouteParams()
+          return this.reloadVideos()
+        }
+        this.loadedPages[this.pagination.currentPage] = true
+        this.pagination.totalItems = totalVideos
+        if (where === 'before') {
+          this.videos = videos.concat(this.videos)
+        } else {
+          this.videos = this.videos.concat(videos)
+        }
+      },
+      error => this.notificationsService.error('Error', error.text)
+    )
+  }
+  protected hasMoreVideos () {
+    // No results
+    if (this.pagination.totalItems === 0) return false
+    // Not loaded yet
+    if (!this.pagination.totalItems) return true
+    const maxPage = this.pagination.totalItems / this.pagination.itemsPerPage
+    return maxPage > this.pagination.currentPage
+  }
+  protected previousPage () {
+    this.pagination.currentPage--
+    this.setNewRouteParams()
+    this.loadMoreVideos('before')
+  }
+  protected nextPage () {
+    this.pagination.currentPage++
+    this.setNewRouteParams()
+    this.loadMoreVideos('after')
+  }
+  protected buildRouteParams () {
+    // There is always a sort and a current page
+    const params = {
+      sort: this.sort,
+      page: this.pagination.currentPage
+    }
+    return params
+  }
+  protected loadRouteParams (routeParams: { [ key: string ]: any }) {
+    this.sort = routeParams['sort'] as SortField || this.defaultSort
+    if (routeParams['page'] !== undefined) {
+      this.pagination.currentPage = parseInt(routeParams['page'], 10)
+    } else {
+      this.pagination.currentPage = 1
+    }
+  }
+  protected setNewRouteParams () {
+    const routeParams = this.buildRouteParams()
+    this.router.navigate([ this.currentRoute, routeParams ])
+  }
+}
diff --git a/client/src/app/videos/shared/sort-field.type.ts b/client/src/app/shared/video/sort-field.type.ts
index 776f360f8..776f360f8 100644
--- a/client/src/app/videos/shared/sort-field.type.ts
+++ b/client/src/app/shared/video/sort-field.type.ts
diff --git a/client/src/app/videos/shared/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts
index 64cb4f847..b96f8f6c8 100644
--- a/client/src/app/videos/shared/video-details.model.ts
+++ b/client/src/app/shared/video/video-details.model.ts
@@ -1,4 +1,5 @@
-import { Video } from './video.model'
+import { Account } from '../../../../../shared/models/accounts'
+import { Video } from '../../shared/video/video.model'
 import { AuthUser } from '../../core'
 import {
  VideoDetails as VideoDetailsServerModel,
@@ -10,7 +11,7 @@ import {
 } from '../../../../../shared'
 export class VideoDetails extends Video implements VideoDetailsServerModel {
-  account: string
+  accountName: string
  by: string
  createdAt: Date
  updatedAt: Date
@@ -44,6 +45,9 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
  channel: VideoChannel
  privacy: VideoPrivacy
  privacyLabel: string
+  account: Account
+  likesPercent: number
+  dislikesPercent: number
  constructor (hash: VideoDetailsServerModel) {
    super(hash)
@@ -53,6 +57,10 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
    this.descriptionPath = hash.descriptionPath
    this.files = hash.files
    this.channel = hash.channel
+    this.account = hash.account
+    this.likesPercent = (this.likes / (this.likes + this.dislikes)) * 100
+    this.dislikesPercent = (this.dislikes / (this.likes + this.dislikes)) * 100
  }
  getAppropriateMagnetUri (actualDownloadSpeed = 0) {
@@ -71,7 +79,7 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
  }
  isRemovableBy (user: AuthUser) {
-    return user && this.isLocal === true && (this.account === user.username || user.hasRight(UserRight.REMOVE_ANY_VIDEO))
+    return user && this.isLocal === true && (this.accountName === user.username || user.hasRight(UserRight.REMOVE_ANY_VIDEO))
  }
  isBlackistableBy (user: AuthUser) {
@@ -79,6 +87,6 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
  }
  isUpdatableBy (user: AuthUser) {
-    return user && this.isLocal === true && user.username === this.account
+    return user && this.isLocal === true && user.username === this.accountName
  }
 }
diff --git a/client/src/app/videos/shared/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts
index 88d23a59f..955255bfa 100644
--- a/client/src/app/videos/shared/video-edit.model.ts
+++ b/client/src/app/shared/video/video-edit.model.ts
@@ -14,18 +14,20 @@ export class VideoEdit {
  uuid?: string
  id?: number
-  constructor (videoDetails: VideoDetails) {
+  constructor (videoDetails?: VideoDetails) {
-    this.id = videoDetails.id
+    if (videoDetails) {
-    this.uuid = videoDetails.uuid
+      this.id = videoDetails.id
-    this.category = videoDetails.category
+      this.uuid = videoDetails.uuid
-    this.licence = videoDetails.licence
+      this.category = videoDetails.category
-    this.language = videoDetails.language
+      this.licence = videoDetails.licence
-    this.description = videoDetails.description
+      this.language = videoDetails.language
-    this.name = videoDetails.name
+      this.description = videoDetails.description
-    this.tags = videoDetails.tags
+      this.name = videoDetails.name
-    this.nsfw = videoDetails.nsfw
+      this.tags = videoDetails.tags
-    this.channel = videoDetails.channel.id
+      this.nsfw = videoDetails.nsfw
-    this.privacy = videoDetails.privacy
+      this.channel = videoDetails.channel.id
+      this.privacy = videoDetails.privacy
+    }
  }
  patch (values: Object) {
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
new file mode 100644
index 000000000..7ac017235
--- /dev/null
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -0,0 +1,17 @@
+<div class="video-miniature">
+  <my-video-thumbnail [video]="video" [nsfw]="isVideoNSFWForThisUser()"></my-video-thumbnail>
+  <div class="video-miniature-information">
+    <span class="video-miniature-name">
+      <a
+        class="video-miniature-name"
+        [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoNSFWForThisUser() }"
+      >
+          {{ video.name }}
+      </a>
+    </span>
+    <span class="video-miniature-created-at-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
+    <span class="video-miniature-account">{{ video.by }}</span>
+  </div>
+</div>
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
new file mode 100644
index 000000000..37e84897b
--- /dev/null
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -0,0 +1,44 @@
+.video-miniature {
+  display: inline-block;
+  padding-right: 15px;
+  margin-bottom: 30px;
+  height: 175px;
+  vertical-align: top;
+  .video-miniature-information {
+    width: 200px;
+    margin-top: 2px;
+    line-height: normal;
+    .video-miniature-name {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: bold;
+      transition: color 0.2s;
+      font-size: 16px;
+      font-weight: $font-semibold;
+      color: #000;
+      &:hover {
+        text-decoration: none;
+      }
+      &.blur-filter {
+        filter: blur(3px);
+        padding-left: 4px;
+      }
+    }
+    .video-miniature-created-at-views {
+      display: block;
+      font-size: 13px;
+    }
+    .video-miniature-account {
+      font-size: 13px;
+      color: #585858;
+    }
+  }
+}
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index e5a87907b..4d79a74bb 100644
--- a/client/src/app/videos/video-list/shared/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -1,7 +1,6 @@
 import { Component, Input } from '@angular/core'
+import { User } from '../users'
-import { SortField, Video } from '../../shared'
+import { Video } from './video.model'
-import { User } from '../../../shared'
 @Component({
  selector: 'my-video-miniature',
@@ -9,7 +8,6 @@ import { User } from '../../../shared'
  templateUrl: './video-miniature.component.html'
 })
 export class VideoMiniatureComponent {
-  @Input() currentSort: SortField
  @Input() user: User
  @Input() video: Video
diff --git a/client/src/app/videos/shared/video-pagination.model.ts b/client/src/app/shared/video/video-pagination.model.ts
index 9e71769cb..e9db61596 100644
--- a/client/src/app/videos/shared/video-pagination.model.ts
+++ b/client/src/app/shared/video/video-pagination.model.ts
@@ -1,5 +1,5 @@
 export interface VideoPagination {
  currentPage: number
  itemsPerPage: number
-  totalItems: number
+  totalItems?: number
 }
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
new file mode 100644
index 000000000..5c698e8f6
--- /dev/null
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -0,0 +1,10 @@
+<a
+  [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name"
+class="video-thumbnail"
+>
+<img [attr.src]="video.thumbnailUrl" alt="video thumbnail" [ngClass]="{ 'blur-filter': nsfw }" />
+<div class="video-thumbnail-overlay">
+  {{ video.durationLabel }}
+</div>
+</a>
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
new file mode 100644
index 000000000..ab4f9bcb1
--- /dev/null
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -0,0 +1,28 @@
+.video-thumbnail {
+  display: inline-block;
+  position: relative;
+  border-radius: 4px;
+  overflow: hidden;
+  &:hover {
+    text-decoration: none !important;
+  }
+  img.blur-filter {
+    filter: blur(5px);
+    transform : scale(1.03);
+  }
+  .video-thumbnail-overlay {
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    display: inline-block;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    font-size: 12px;
+    font-weight: $font-bold;
+    border-radius: 3px;
+    padding: 0 5px;
+  }
+}
diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts
new file mode 100644
index 000000000..e543e9903
--- /dev/null
+++ b/client/src/app/shared/video/video-thumbnail.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core'
+import { Video } from './video.model'
+@Component({
+  selector: 'my-video-thumbnail',
+  styleUrls: [ './video-thumbnail.component.scss' ],
+  templateUrl: './video-thumbnail.component.html'
+})
+export class VideoThumbnailComponent {
+  @Input() video: Video
+  @Input() nsfw = false
+}
diff --git a/client/src/app/videos/shared/video.model.ts b/client/src/app/shared/video/video.model.ts
index 0dd41d71b..d86ef8f92 100644
--- a/client/src/app/videos/shared/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -1,8 +1,9 @@
 import { Video as VideoServerModel } from '../../../../../shared'
-import { User } from '../../shared'
+import { User } from '../'
+import { Account } from '../../../../../shared/models/accounts'
 export class Video implements VideoServerModel {
-  account: string
+  accountName: string
  by: string
  createdAt: Date
  updatedAt: Date
@@ -31,6 +32,7 @@ export class Video implements VideoServerModel {
  likes: number
  dislikes: number
  nsfw: boolean
+  account: Account
  private static createByString (account: string, serverHost: string) {
    return account + '@' + serverHost
@@ -52,7 +54,7 @@ export class Video implements VideoServerModel {
      absoluteAPIUrl = window.location.origin
    }
-    this.account = hash.account
+    this.accountName = hash.accountName
    this.createdAt = new Date(hash.createdAt.toString())
    this.categoryLabel = hash.categoryLabel
    this.category = hash.category
@@ -80,7 +82,7 @@ export class Video implements VideoServerModel {
    this.dislikes = hash.dislikes
    this.nsfw = hash.nsfw
-    this.by = Video.createByString(hash.account, hash.serverHost)
+    this.by = Video.createByString(hash.accountName, hash.serverHost)
  }
  isVideoNSFWForUser (user: User) {
diff --git a/client/src/app/videos/shared/video.service.ts b/client/src/app/shared/video/video.service.ts
index 5d25a26d4..1a0644c3d 100644
--- a/client/src/app/videos/shared/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -1,29 +1,23 @@
-import { Injectable } from '@angular/core'
-import { Observable } from 'rxjs/Observable'
 import { HttpClient, HttpParams, HttpRequest } from '@angular/common/http'
+import { Injectable } from '@angular/core'
 import 'rxjs/add/operator/catch'
 import 'rxjs/add/operator/map'
+import { Observable } from 'rxjs/Observable'
+import { Video as VideoServerModel, VideoDetails as VideoDetailsServerModel } from '../../../../../shared'
+import { ResultList } from '../../../../../shared/models/result-list.model'
+import { UserVideoRateUpdate } from '../../../../../shared/models/videos/user-video-rate-update.model'
+import { UserVideoRate } from '../../../../../shared/models/videos/user-video-rate.model'
+import { VideoRateType } from '../../../../../shared/models/videos/video-rate.type'
+import { VideoUpdate } from '../../../../../shared/models/videos/video-update.model'
+import { RestExtractor } from '../rest/rest-extractor.service'
+import { RestService } from '../rest/rest.service'
+import { Search } from '../header/search.model'
+import { UserService } from '../users/user.service'
 import { SortField } from './sort-field.type'
-import {
-  RestExtractor,
-  RestService,
-  UserService,
-  Search
-} from '../../shared'
-import { Video } from './video.model'
 import { VideoDetails } from './video-details.model'
 import { VideoEdit } from './video-edit.model'
 import { VideoPagination } from './video-pagination.model'
-import {
+import { Video } from './video.model'
-  UserVideoRate,
-  VideoRateType,
-  VideoUpdate,
-  UserVideoRateUpdate,
-  Video as VideoServerModel,
-  VideoDetails as VideoDetailsServerModel,
-  ResultList
-} from '../../../../../shared'
 @Injectable()
 export class VideoService {
@@ -48,14 +42,17 @@ export class VideoService {
  }
  updateVideo (video: VideoEdit) {
-    const language = video.language ? video.language : null
+    const language = video.language || undefined
+    const licence = video.licence || undefined
+    const category = video.category || undefined
+    const description = video.description || undefined
    const body: VideoUpdate = {
      name: video.name,
-      category: video.category,
+      category,
-      licence: video.licence,
+      licence,
      language,
-      description: video.description,
+      description,
      privacy: video.privacy,
      tags: video.tags,
      nsfw: video.nsfw
@@ -97,15 +94,14 @@ export class VideoService {
      .catch((res) => this.restExtractor.handleError(res))
  }
-  searchVideos (search: Search, videoPagination: VideoPagination, sort: SortField): Observable<{ videos: Video[], totalVideos: number}> {
+  searchVideos (search: string, videoPagination: VideoPagination, sort: SortField): Observable<{ videos: Video[], totalVideos: number}> {
-    const url = VideoService.BASE_VIDEO_URL + 'search/' + encodeURIComponent(search.value)
+    const url = VideoService.BASE_VIDEO_URL + 'search'
    const pagination = this.videoPaginationToRestPagination(videoPagination)
    let params = new HttpParams()
    params = this.restService.addRestGetParams(params, pagination, sort)
+    params = params.append('search', search)
-    if (search.field) params.set('field', search.field)
    return this.authHttp
      .get<ResultList<VideoServerModel>>(url, { params })
diff --git a/client/src/app/signup/signup.component.html b/client/src/app/signup/signup.component.html
index b8b7826eb..eb36b29f6 100644
--- a/client/src/app/signup/signup.component.html
+++ b/client/src/app/signup/signup.component.html
@@ -1,7 +1,8 @@
-<div class="row">
+<div class="margin-content">
-  <div class="content-padding">
-  <h3>Signup</h3>
+  <div class="title-page title-page-single">
+    Create an account
+  </div>
  <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
@@ -10,9 +11,9 @@
      <label for="username">Username</label>
      <input
        type="text" class="form-control" id="username" placeholder="Username"
-        formControlName="username"
+        formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
      >
-      <div *ngIf="formErrors.username" class="alert alert-danger">
+      <div *ngIf="formErrors.username" class="form-error">
        {{ formErrors.username }}
      </div>
    </div>
@@ -21,9 +22,9 @@
      <label for="email">Email</label>
      <input
        type="text" class="form-control" id="email" placeholder="Email"
-        formControlName="email"
+        formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
      >
-      <div *ngIf="formErrors.email" class="alert alert-danger">
+      <div *ngIf="formErrors.email" class="form-error">
        {{ formErrors.email }}
      </div>
    </div>
@@ -32,15 +33,14 @@
      <label for="password">Password</label>
      <input
        type="password" class="form-control" id="password" placeholder="Password"
-        formControlName="password"
+        formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
      >
-      <div *ngIf="formErrors.password" class="alert alert-danger">
+      <div *ngIf="formErrors.password" class="form-error">
        {{ formErrors.password }}
      </div>
    </div>
-    <input type="submit" value="Signup" class="btn btn-default" [disabled]="!form.valid">
+    <input type="submit" value="Signup" [disabled]="!form.valid">
  </form>
-  </div>
 </div>
diff --git a/client/src/app/signup/signup.component.scss b/client/src/app/signup/signup.component.scss
new file mode 100644
index 000000000..3b4326de4
--- /dev/null
+++ b/client/src/app/signup/signup.component.scss
@@ -0,0 +1,9 @@
+input:not([type=submit]) {
+  @include peertube-input-text(340px);
+  display: block;
+}
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+}
diff --git a/client/src/app/signup/signup.component.ts b/client/src/app/signup/signup.component.ts
index 28e1ed0a8..13390a32a 100644
--- a/client/src/app/signup/signup.component.ts
+++ b/client/src/app/signup/signup.component.ts
@@ -16,7 +16,8 @@ import { UserCreate } from '../../../../shared'
 @Component({
  selector: 'my-signup',
-  templateUrl: './signup.component.html'
+  templateUrl: './signup.component.html',
+  styleUrls: [ './signup.component.scss' ]
 })
 export class SignupComponent extends FormReactive implements OnInit {
  error: string = null
diff --git a/client/src/app/videos/shared/video-description.component.html b/client/src/app/videos/+video-edit/shared/video-description.component.html
index 7a228857c..5d05467be 100644
--- a/client/src/app/videos/shared/video-description.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-description.component.html
@@ -1,6 +1,6 @@
 <textarea
-    [(ngModel)]="description" (ngModelChange)="onModelChange()"
+  [(ngModel)]="description" (ngModelChange)="onModelChange()"
-    id="description" class="form-control" placeholder="My super video">
+  id="description" name="description">
 </textarea>
 <tabset #staticTabs class="previews">
diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.scss b/client/src/app/videos/+video-edit/shared/video-description.component.scss
new file mode 100644
index 000000000..2a4c8d189
--- /dev/null
+++ b/client/src/app/videos/+video-edit/shared/video-description.component.scss
@@ -0,0 +1,24 @@
+textarea {
+  @include peertube-input-text(100%);
+  padding: 5px 15px;
+  font-size: 15px;
+  height: 150px;
+  margin-bottom: 15px;
+}
+/deep/ {
+  .nav-link {
+    display: flex !important;
+    align-items: center;
+    height: 30px !important;
+    padding: 0 15px !important;
+  }
+  .tab-content {
+    min-height: 75px;
+    padding: 15px;
+    font-size: 15px;
+  }
+}
diff --git a/client/src/app/videos/shared/video-description.component.ts b/client/src/app/videos/+video-edit/shared/video-description.component.ts
index d9ffb7800..9b77a27e6 100644
--- a/client/src/app/videos/shared/video-description.component.ts
+++ b/client/src/app/videos/+video-edit/shared/video-description.component.ts
@@ -1,12 +1,10 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-import { Subject } from 'rxjs/Subject'
+import { truncate } from 'lodash'
 import 'rxjs/add/operator/debounceTime'
 import 'rxjs/add/operator/distinctUntilChanged'
+import { Subject } from 'rxjs/Subject'
-import { truncate } from 'lodash'
+import { MarkdownService } from '../../shared'
-import { MarkdownService } from './markdown.service'
 @Component({
  selector: 'my-video-description',
@@ -62,6 +60,8 @@ export class VideoDescriptionComponent implements ControlValueAccessor, OnInit {
  }
  private updateDescriptionPreviews () {
+    if (!this.description) return
    this.truncatedDescriptionHTML = this.markdownService.markdownToHTML(truncate(this.description, { length: 250 }))
    this.descriptionHTML = this.markdownService.markdownToHTML(this.description)
  }
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
new file mode 100644
index 000000000..8c071ce12
--- /dev/null
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -0,0 +1,86 @@
+<div class="video-edit row" [formGroup]="form">
+  <div class="col-md-8">
+    <div class="form-group">
+      <label for="name">Title</label>
+      <input type="text" id="name" formControlName="name" />
+      <div *ngIf="formErrors.name" class="form-error">
+        {{ formErrors.name }}
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
+      <tag-input
+          [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
+          formControlName="tags" maxItems="5" modelAsStrings="true"
+      ></tag-input>
+    </div>
+    <div class="form-group">
+      <label for="description">Description</label>
+      <my-video-description formControlName="description"></my-video-description>
+      <div *ngIf="formErrors.description" class="form-error">
+        {{ formErrors.description }}
+      </div>
+    </div>
+  </div>
+  <div class="col-md-4">
+    <div class="form-group">
+      <label for="category">Category</label>
+      <select id="category" formControlName="category">
+        <option></option>
+        <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
+      </select>
+      <div *ngIf="formErrors.category" class="form-error">
+        {{ formErrors.category }}
+      </div>
+    </div>
+    <div class="form-group">
+      <label for="licence">Licence</label>
+      <select id="licence" formControlName="licence">
+        <option></option>
+        <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
+      </select>
+      <div *ngIf="formErrors.licence" class="form-error">
+        {{ formErrors.licence }}
+      </div>
+    </div>
+    <div class="form-group">
+      <label for="language">Language</label>
+      <select id="language" formControlName="language">
+        <option></option>
+        <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
+      </select>
+      <div *ngIf="formErrors.language" class="form-error">
+        {{ formErrors.language }}
+      </div>
+    </div>
+    <div class="form-group">
+      <label for="privacy">Privacy</label>
+      <select id="privacy" formControlName="privacy">
+        <option></option>
+        <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
+      </select>
+      <div *ngIf="formErrors.privacy" class="form-error">
+        {{ formErrors.privacy }}
+      </div>
+    </div>
+    <div class="form-group form-group-checkbox">
+      <input type="checkbox" id="nsfw" formControlName="nsfw" />
+      <label for="nsfw">This video contains mature or explicit content</label>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 9ee0c520c..d363499ce 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -1,48 +1,126 @@
-.btn-file {
+.video-edit {
-  position: relative;
+  height: 100%;
-  overflow: hidden;
-  display: block;
+  .form-group {
+    margin-bottom: 25px;
+  }
+  input {
+    @include peertube-input-text(100%);
+    display: block;
+    &[type=checkbox] {
+      outline: 0;
+    }
+  }
+  select {
+    @include peertube-select(100%);
+  }
+  input, select {
+    font-size: 15px
+  }
+  .form-group-checkbox {
+    display: flex;
+    align-items: center;
+    label {
+      font-weight: $font-regular;
+      margin: 0;
+    }
+    input {
+      width: 10px;
+      margin-right: 10px;
+    }
+  }
 }
-.btn-file input[type=file] {
+.submit-container {
-  position: absolute;
-  top: 0;
-  right: 0;
-  min-width: 100%;
-  min-height: 100%;
-  font-size: 100px;
  text-align: right;
-  filter: alpha(opacity=0);
+  position: relative;
-  opacity: 0;
+  bottom: $button-height;
-  outline: none;
-  background: white;
-  cursor: inherit;
-  display: block;
-}
-.form-group {
+  .message-submit {
-  margin-bottom: 10px;
+    display: inline-block;
-}
+    margin-right: 25px;
+    color: #585858;
+    font-size: 15px;
+  }
+  .submit-button {
+    @include peertube-button;
+    @include orange-button;
+    display: inline-block;
-div.tags {
+    input {
-  height: 40px;
+      cursor: inherit;
-  font-size: 20px;
+      background-color: inherit;
-  margin-top: 20px;
+      border: none;
+      padding: 0;
+      outline: 0;
+    }
-  .tag {
+    .icon.icon-validate {
-    margin-right: 10px;
+      @include icon(20px);
-    .remove {
+      cursor: inherit;
-      cursor: pointer;
+      position: relative;
+      top: -1px;
+      margin-right: 4px;
+      background-image: url('../../../../assets/images/global/validate.svg');
    }
  }
 }
-div.file-to-upload {
+/deep/ {
-  height: 40px;
+  .ng2-tag-input {
+    border: none !important;
+  }
-  .glyphicon-remove {
+  .ng2-tags-container {
-    cursor: pointer;
+    display: flex;
+    align-items: center;
+    border: 1px solid #C6C6C6;
+    border-radius: 3px;
+    padding: 5px !important;
+  }
+  tag {
+    background-color: #E5E5E5 !important;
+    border-radius: 3px !important;
+    font-size: 15px !important;
+    color: #000 !important;
+    height: 30px !important;
+    line-height: 30px !important;
+    margin: 0 5px 0 0 !important;
+    cursor: default !important;
+    padding: 0 8px 0 10px !important;
+    div {
+      height: 100% !important;
+    }
+  }
+  delete-icon {
+    cursor: pointer !important;
+    height: auto !important;
+    vertical-align: middle !important;
+    padding-left: 6px !important;
+    svg {
+      height: auto !important;
+      vertical-align: middle !important;
+      fill: #585858 !important;
+    }
+    &:hover {
+      transform: none !important;
+    }
  }
 }
@@ -50,7 +128,3 @@ div.file-to-upload {
  font-size: 0.8em;
  font-style: italic;
 }
-.label-tags {
-  margin-bottom: 0;
-}
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.ts b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
new file mode 100644
index 000000000..5b1cc3f9c
--- /dev/null
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
@@ -0,0 +1,83 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms'
+import { ActivatedRoute, Router } from '@angular/router'
+import { NotificationsService } from 'angular2-notifications'
+import { ServerService } from 'app/core'
+import { VideoEdit } from 'app/shared/video/video-edit.model'
+import 'rxjs/add/observable/forkJoin'
+import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum'
+import {
+  ValidatorMessage,
+  VIDEO_CATEGORY,
+  VIDEO_DESCRIPTION,
+  VIDEO_LANGUAGE,
+  VIDEO_LICENCE,
+  VIDEO_NAME,
+  VIDEO_PRIVACY,
+  VIDEO_TAGS
+} from '../../../shared/forms/form-validators'
+@Component({
+  selector: 'my-video-edit',
+  styleUrls: [ './video-edit.component.scss' ],
+  templateUrl: './video-edit.component.html'
+})
+export class VideoEditComponent implements OnInit {
+  @Input() form: FormGroup
+  @Input() formErrors: { [ id: string ]: string } = {}
+  @Input() validationMessages: ValidatorMessage = {}
+  @Input() videoPrivacies = []
+  tags: string[] = []
+  videoCategories = []
+  videoLicences = []
+  videoLanguages = []
+  video: VideoEdit
+  tagValidators = VIDEO_TAGS.VALIDATORS
+  tagValidatorsMessages = VIDEO_TAGS.MESSAGES
+  error: string = null
+  constructor (
+    private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private notificationsService: NotificationsService,
+    private serverService: ServerService
+  ) { }
+  updateForm () {
+    this.formErrors['name'] = ''
+    this.formErrors['privacy'] = ''
+    this.formErrors['category'] = ''
+    this.formErrors['licence'] = ''
+    this.formErrors['language'] = ''
+    this.formErrors['description'] = ''
+    this.validationMessages['name'] = VIDEO_NAME.MESSAGES
+    this.validationMessages['privacy'] = VIDEO_PRIVACY.MESSAGES
+    this.validationMessages['category'] = VIDEO_CATEGORY.MESSAGES
+    this.validationMessages['licence'] = VIDEO_LICENCE.MESSAGES
+    this.validationMessages['language'] = VIDEO_LANGUAGE.MESSAGES
+    this.validationMessages['description'] = VIDEO_DESCRIPTION.MESSAGES
+    this.form.addControl('name', new FormControl('', VIDEO_NAME.VALIDATORS))
+    this.form.addControl('privacy', new FormControl('', VIDEO_PRIVACY.VALIDATORS))
+    this.form.addControl('nsfw', new FormControl(false))
+    this.form.addControl('category', new FormControl('', VIDEO_CATEGORY.VALIDATORS))
+    this.form.addControl('licence', new FormControl('', VIDEO_LICENCE.VALIDATORS))
+    this.form.addControl('language', new FormControl('', VIDEO_LANGUAGE.VALIDATORS))
+    this.form.addControl('description', new FormControl('', VIDEO_DESCRIPTION.VALIDATORS))
+    this.form.addControl('tags', new FormControl(''))
+  }
+  ngOnInit () {
+    this.updateForm()
+    this.videoCategories = this.serverService.getVideoCategories()
+    this.videoLicences = this.serverService.getVideoLicences()
+    this.videoLanguages = this.serverService.getVideoLanguages()
+  }
+}
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
index c64cea920..ce106d82f 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.module.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
@@ -3,8 +3,10 @@ import { NgModule } from '@angular/core'
 import { TagInputModule } from 'ngx-chips'
 import { TabsModule } from 'ngx-bootstrap/tabs'
-import { VideoService, MarkdownService, VideoDescriptionComponent } from '../../shared'
+import { MarkdownService } from '../../shared'
 import { SharedModule } from '../../../shared'
+import { VideoDescriptionComponent } from './video-description.component'
+import { VideoEditComponent } from './video-edit.component'
 @NgModule({
  imports: [
@@ -15,18 +17,19 @@ import { SharedModule } from '../../../shared'
  ],
  declarations: [
-    VideoDescriptionComponent
+    VideoDescriptionComponent,
+    VideoEditComponent
  ],
  exports: [
    TagInputModule,
    TabsModule,
-    VideoDescriptionComponent
+    VideoDescriptionComponent,
+    VideoEditComponent
  ],
  providers: [
-    VideoService,
    MarkdownService
  ]
 })
diff --git a/client/src/app/videos/+video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html
index b4e0f9f7c..a6f2bf6f2 100644
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -1,141 +1,53 @@
-<div class="row">
+<div class="margin-content">
-  <div class="content-padding">
+  <div class="title-page title-page-single">
+    Upload your video
+  </div>
-    <h3>Upload a video</h3>
+  <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-    <div *ngIf="error !== undefined" class="alert alert-danger">{{ error }}</div>
+  <div *ngIf="!isUploadingVideo" class="upload-video-container">
+    <div class="upload-video">
+      <div class="icon icon-upload"></div>
-    <form novalidate [formGroup]="form">
+      <div class="button-file">
-      <div class="form-group">
+        <span>Select the file to upload</span>
-        <label for="name">Name</label>
+        <input #videofileInput type="file" name="videofile" id="videofile" (change)="fileChange()" />
-        <input
-          type="text" class="form-control" id="name"
-          formControlName="name"
-        >
-        <div *ngIf="formErrors.name" class="alert alert-danger">
-          {{ formErrors.name }}
-        </div>
      </div>
      <div class="form-group">
-        <label for="privacy">Privacy</label>
+        <select [(ngModel)]="firstStepPrivacyId">
-        <select class="form-control" id="privacy" formControlName="privacy">
-          <option></option>
          <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
        </select>
-        <div *ngIf="formErrors.privacy" class="alert alert-danger">
-          {{ formErrors.privacy }}
-        </div>
-      </div>
-      <div class="form-group">
-        <input
-          type="checkbox" id="nsfw"
-          formControlName="nsfw"
-        >
-        <label for="nsfw">This video contains mature or explicit content</label>
      </div>
      <div class="form-group">
-        <label for="category">Channel</label>
+        <select [(ngModel)]="firstStepChannelId">
-        <select class="form-control" id="channelId" formControlName="channelId">
          <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
        </select>
-        <div *ngIf="formErrors.channelId" class="alert alert-danger">
-          {{ formErrors.channelId }}
-        </div>
-      </div>
-      <div class="form-group">
-        <label for="category">Category</label>
-        <select class="form-control" id="category" formControlName="category">
-          <option></option>
-          <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
-        </select>
-        <div *ngIf="formErrors.category" class="alert alert-danger">
-          {{ formErrors.category }}
-        </div>
-      </div>
-      <div class="form-group">
-        <label for="licence">Licence</label>
-        <select class="form-control" id="licence" formControlName="licence">
-          <option></option>
-          <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
-        </select>
-        <div *ngIf="formErrors.licence" class="alert alert-danger">
-          {{ formErrors.licence }}
-        </div>
-      </div>
-      <div class="form-group">
-        <label for="language">Language</label>
-        <select class="form-control" id="language" formControlName="language">
-          <option></option>
-          <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
-        </select>
-        <div *ngIf="formErrors.language" class="alert alert-danger">
-          {{ formErrors.language }}
-        </div>
-      </div>
-      <div class="form-group">
-        <label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
-        <tag-input
-          [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
-          formControlName="tags" maxItems="5" modelAsStrings="true"
-        ></tag-input>
-      </div>
-      <div class="form-group">
-        <label for="videofile">File</label>
-        <div class="btn btn-default btn-file">
-          <span>Select the video...</span>
-          <input #videofileInput type="file" name="videofile" id="videofile" (change)="fileChange($event)" />
-          <input type="hidden" name="videofileHidden" formControlName="videofile"/>
-        </div>
      </div>
+    </div>
+  </div>
-      <div class="file-to-upload">
+  <p-progressBar
-        <div class="file" *ngIf="filename">
+      *ngIf="isUploadingVideo" [value]="videoUploadPercents"
-          <span class="filename">{{ filename }}</span>
+      [ngClass]="{ processing: videoUploadPercents === 100 && videoUploaded === false }"
-          <span class="glyphicon glyphicon-remove" (click)="removeFile()"></span>
+  ></p-progressBar>
-        </div>
-      </div>
-      <div *ngIf="formErrors.videofile" class="alert alert-danger">
+  <!-- Hidden because we need to load the component -->
-        {{ formErrors.videofile }}
+  <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
-      </div>
+    <my-video-edit
+        [form]="form" [formErrors]="formErrors"
+        [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies"
+    ></my-video-edit>
-      <div class="form-group">
-        <label for="description">Description</label>
-        <my-video-description formControlName="description"></my-video-description>
-        <div *ngIf="formErrors.description" class="alert alert-danger">
+    <div class="submit-container">
-          {{ formErrors.description }}
+      <div *ngIf="videoUploaded === false" class="message-submit">Publish will be available when upload is finished</div>
-        </div>
-      </div>
-      <div class="progress">
+      <div class="submit-button" (click)="updateSecondStep()" [ngClass]="{ disabled: !form.valid || videoUploaded !== true }">
-        <progressbar [value]="progressPercent" max="100">
+        <span class="icon icon-validate"></span>
-          <ng-template [ngIf]="progressPercent === 100">
+        <input type="button" value="Publish" />
-            <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
-            Server is processing the video
-          </ng-template>
-        </progressbar>
      </div>
+    </div>
-      <div class="form-group">
+  </form>
-        <input
-          type="button" value="Upload" class="btn btn-default form-control"
-          (click)="upload()"
-        >
-      </div>
-    </form>
-  </div>
 </div>
diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss
new file mode 100644
index 000000000..39673b4b7
--- /dev/null
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -0,0 +1,96 @@
+.upload-video-container {
+  border-radius: 3px;
+  background-color: #F7F7F7;
+  border: 3px solid #EAEAEA;
+  width: 100%;
+  height: 440px;
+  text-align: center;
+  margin-top: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .upload-video {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .icon.icon-upload {
+      @include icon(90px);
+      margin-bottom: 25px;
+      cursor: default;
+      background-image: url('../../../assets/images/video/upload.svg');
+    }
+    .button-file {
+      position: relative;
+      overflow: hidden;
+      display: inline-block;
+      margin-bottom: 70px;
+      @include peertube-button;
+      @include orange-button;
+      input[type=file] {
+        position: absolute;
+        top: 0;
+        right: 0;
+        min-width: 100%;
+        min-height: 100%;
+        font-size: 100px;
+        text-align: right;
+        filter: alpha(opacity=0);
+        opacity: 0;
+        outline: none;
+        background: white;
+        cursor: inherit;
+        display: block;
+      }
+    }
+    select {
+      @include peertube-select(auto);
+      display: inline-block;
+      font-size: 15px
+    }
+  }
+}
+p-progressBar {
+  /deep/ .ui-progressbar {
+    margin-top: 25px !important;
+    margin-bottom: 40px !important;
+    font-size: 15px !important;
+    color: #fff !important;
+    height: 30px !important;
+    line-height: 30px !important;
+    border-radius: 3px !important;
+    background-color: rgba(11, 204, 41, 0.16) !important;
+    .ui-progressbar-value {
+      background-color: #0BCC29 !important;
+    }
+    .ui-progressbar-label {
+      text-align: left;
+      padding-left: 18px;
+      margin-top: 0 !important;
+    }
+  }
+  &.processing {
+    /deep/ .ui-progressbar-label {
+      // Same color as background to hide "100%"
+      color: rgba(11, 204, 41, 0.16) !important;
+      &::before {
+        content: 'Processing...';
+        color: #fff;
+      }
+    }
+  }
+}
diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts
index 1704cf486..2bbc3de17 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -1,68 +1,42 @@
+import { HttpEventType, HttpResponse } from '@angular/common/http'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
 import { Router } from '@angular/router'
 import { NotificationsService } from 'angular2-notifications'
+import { VideoService } from 'app/shared/video/video.service'
-import {
-  FormReactive,
-  VIDEO_NAME,
-  VIDEO_CATEGORY,
-  VIDEO_LICENCE,
-  VIDEO_LANGUAGE,
-  VIDEO_DESCRIPTION,
-  VIDEO_TAGS,
-  VIDEO_CHANNEL,
-  VIDEO_FILE,
-  VIDEO_PRIVACY
-} from '../../shared'
-import { AuthService, ServerService } from '../../core'
-import { VideoService } from '../shared'
 import { VideoCreate } from '../../../../../shared'
-import { HttpEventType, HttpResponse } from '@angular/common/http'
+import { VideoPrivacy } from '../../../../../shared/models/videos'
+import { AuthService, ServerService } from '../../core'
+import { FormReactive } from '../../shared'
+import { ValidatorMessage } from '../../shared/forms/form-validators'
+import { VideoEdit } from '../../shared/video/video-edit.model'
 @Component({
  selector: 'my-videos-add',
-  styleUrls: [ './shared/video-edit.component.scss' ],
+  templateUrl: './video-add.component.html',
-  templateUrl: './video-add.component.html'
+  styleUrls: [
+    './shared/video-edit.component.scss',
+    './video-add.component.scss'
+  ]
 })
 export class VideoAddComponent extends FormReactive implements OnInit {
  @ViewChild('videofileInput') videofileInput
-  progressPercent = 0
+  isUploadingVideo = false
-  tags: string[] = []
+  videoUploaded = false
-  videoCategories = []
+  videoUploadPercents = 0
-  videoLicences = []
+  videoUploadedId = 0
-  videoLanguages = []
-  videoPrivacies = []
-  userVideoChannels = []
-  tagValidators = VIDEO_TAGS.VALIDATORS
-  tagValidatorsMessages = VIDEO_TAGS.MESSAGES
-  error: string
+  error: string = null
  form: FormGroup
-  formErrors = {
+  formErrors: { [ id: string ]: string } = {}
-    name: '',
+  validationMessages: ValidatorMessage = {}
-    privacy: '',
-    category: '',
+  userVideoChannels = []
-    licence: '',
+  videoPrivacies = []
-    language: '',
+  firstStepPrivacyId = 0
-    channelId: '',
+  firstStepChannelId = 0
-    description: '',
-    videofile: ''
-  }
-  validationMessages = {
-    name: VIDEO_NAME.MESSAGES,
-    privacy: VIDEO_PRIVACY.MESSAGES,
-    category: VIDEO_CATEGORY.MESSAGES,
-    licence: VIDEO_LICENCE.MESSAGES,
-    language: VIDEO_LANGUAGE.MESSAGES,
-    channelId: VIDEO_CHANNEL.MESSAGES,
-    description: VIDEO_DESCRIPTION.MESSAGES,
-    videofile: VIDEO_FILE.MESSAGES
-  }
  constructor (
    private formBuilder: FormBuilder,
@@ -75,35 +49,23 @@ export class VideoAddComponent extends FormReactive implements OnInit {
    super()
  }
-  get filename () {
-    return this.form.value['videofile']
-  }
  buildForm () {
-    this.form = this.formBuilder.group({
+    this.form = this.formBuilder.group({})
-      name: [ '', VIDEO_NAME.VALIDATORS ],
-      nsfw: [ false ],
-      privacy: [ '', VIDEO_PRIVACY.VALIDATORS ],
-      category: [ '', VIDEO_CATEGORY.VALIDATORS ],
-      licence: [ '', VIDEO_LICENCE.VALIDATORS ],
-      language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
-      channelId: [ '', VIDEO_CHANNEL.VALIDATORS ],
-      description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
-      videofile: [ '', VIDEO_FILE.VALIDATORS ],
-      tags: [ '' ]
-    })
    this.form.valueChanges.subscribe(data => this.onValueChanged(data))
  }
  ngOnInit () {
-    this.videoCategories = this.serverService.getVideoCategories()
-    this.videoLicences = this.serverService.getVideoLicences()
-    this.videoLanguages = this.serverService.getVideoLanguages()
-    this.videoPrivacies = this.serverService.getVideoPrivacies()
    this.buildForm()
+    this.serverService.videoPrivaciesLoaded
+      .subscribe(
+        () => {
+          this.videoPrivacies = this.serverService.getVideoPrivacies()
+          // Public by default
+          this.firstStepPrivacyId = VideoPrivacy.PUBLIC
+        })
    this.authService.userInformationLoaded
      .subscribe(
        () => {
@@ -114,21 +76,13 @@ export class VideoAddComponent extends FormReactive implements OnInit {
          if (Array.isArray(videoChannels) === false) return
          this.userVideoChannels = videoChannels.map(v => ({ id: v.id, label: v.name }))
+          this.firstStepChannelId = this.userVideoChannels[0].id
-          this.form.patchValue({ channelId: this.userVideoChannels[0].id })
        }
      )
  }
-  // The goal is to keep reactive form validation (required field)
+  fileChange () {
-  // https://stackoverflow.com/a/44238894
+    this.uploadFirstStep()
-  fileChange ($event) {
-    this.form.controls['videofile'].setValue($event.target.files[0].name)
-  }
-  removeFile () {
-    this.videofileInput.nativeElement.value = ''
-    this.form.controls['videofile'].setValue('')
  }
  checkForm () {
@@ -137,62 +91,72 @@ export class VideoAddComponent extends FormReactive implements OnInit {
    return this.form.valid
  }
-  upload () {
+  uploadFirstStep () {
-    if (this.checkForm() === false) {
-      return
-    }
-    const formValue: VideoCreate = this.form.value
-    const name = formValue.name
-    const privacy = formValue.privacy
-    const nsfw = formValue.nsfw
-    const category = formValue.category
-    const licence = formValue.licence
-    const language = formValue.language
-    const channelId = formValue.channelId
-    const description = formValue.description
-    const tags = formValue.tags
    const videofile = this.videofileInput.nativeElement.files[0]
+    const name = videofile.name.replace(/\.[^/.]+$/, '')
+    const privacy = this.firstStepPrivacyId.toString()
+    const nsfw = false
+    const channelId = this.firstStepChannelId.toString()
    const formData = new FormData()
    formData.append('name', name)
-    formData.append('privacy', privacy.toString())
+    // Put the video "private" -> we wait he validates the second step
-    formData.append('category', '' + category)
+    formData.append('privacy', VideoPrivacy.PRIVATE.toString())
    formData.append('nsfw', '' + nsfw)
-    formData.append('licence', '' + licence)
    formData.append('channelId', '' + channelId)
    formData.append('videofile', videofile)
-    // Language is optional
+    this.isUploadingVideo = true
-    if (language) {
+    this.form.patchValue({
-      formData.append('language', '' + language)
+      name,
-    }
+      privacy,
+      nsfw,
-    formData.append('description', description)
+      channelId
+    })
-    for (let i = 0; i < tags.length; i++) {
-      formData.append(`tags[${i}]`, tags[i])
-    }
    this.videoService.uploadVideo(formData).subscribe(
      event => {
        if (event.type === HttpEventType.UploadProgress) {
-          this.progressPercent = Math.round(100 * event.loaded / event.total)
+          this.videoUploadPercents = Math.round(100 * event.loaded / event.total)
        } else if (event instanceof HttpResponse) {
          console.log('Video uploaded.')
-          this.notificationsService.success('Success', 'Video uploaded.')
-          // Display all the videos once it's finished
+          this.videoUploaded = true
-          this.router.navigate([ '/videos/list' ])
+          this.videoUploadedId = event.body.video.id
        }
      },
      err => {
        // Reset progress
-        this.progressPercent = 0
+        this.videoUploadPercents = 0
        this.error = err.message
      }
    )
  }
+  updateSecondStep () {
+    if (this.checkForm() === false) {
+      return
+    }
+    const video = new VideoEdit()
+    video.patch(this.form.value)
+    video.channel = this.firstStepChannelId
+    video.id = this.videoUploadedId
+    this.videoService.updateVideo(video)
+      .subscribe(
+        () => {
+          this.notificationsService.success('Success', 'Video published.')
+          this.router.navigate([ '/videos/watch', video.id ])
+        },
+        err => {
+          this.error = 'Cannot update the video.'
+          console.error(err)
+        }
+      )
+  }
 }
diff --git a/client/src/app/videos/+video-edit/video-add.module.ts b/client/src/app/videos/+video-edit/video-add.module.ts
index f58d12dac..1efecdf4d 100644
--- a/client/src/app/videos/+video-edit/video-add.module.ts
+++ b/client/src/app/videos/+video-edit/video-add.module.ts
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core'
+import { ProgressBarModule } from 'primeng/primeng'
 import { SharedModule } from '../../shared'
 import { VideoEditModule } from './shared/video-edit.module'
 import { VideoAddRoutingModule } from './video-add-routing.module'
@@ -8,7 +9,8 @@ import { VideoAddComponent } from './video-add.component'
  imports: [
    VideoAddRoutingModule,
    VideoEditModule,
-    SharedModule
+    SharedModule,
+    ProgressBarModule
  ],
  declarations: [
diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html
index b9c6139b2..261b8a130 100644
--- a/client/src/app/videos/+video-edit/video-update.component.html
+++ b/client/src/app/videos/+video-edit/video-update.component.html
@@ -1,101 +1,20 @@
-<div class="row">
+<div class="margin-content">
-  <div class="content-padding">
+  <div class="title-page title-page-single">
+    Update {{ video?.name }}
-  <h3>Update {{ video?.name }}</h3>
+  </div>
-  <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
  <form novalidate [formGroup]="form">
-    <div class="form-group">
-      <label for="name">Name</label>
-      <input
-        type="text" class="form-control" id="name"
-        formControlName="name"
-      >
-      <div *ngIf="formErrors.name" class="alert alert-danger">
-        {{ formErrors.name }}
-      </div>
-    </div>
-    <div class="form-group">
-      <label for="privacy">Privacy</label>
-      <select class="form-control" id="privacy" formControlName="privacy">
-        <option></option>
-        <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
-      </select>
-      <div *ngIf="formErrors.privacy" class="alert alert-danger">
-        {{ formErrors.privacy }}
-      </div>
-    </div>
-    <div class="form-group">
-      <input
-        type="checkbox" id="nsfw"
-        formControlName="nsfw"
-      >
-      <label for="nsfw">This video contains mature or explicit content</label>
-    </div>
-    <div class="form-group">
-      <label for="category">Category</label>
-      <select class="form-control" id="category" formControlName="category">
-        <option></option>
-        <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
-      </select>
-      <div *ngIf="formErrors.category" class="alert alert-danger">
-        {{ formErrors.category }}
-      </div>
-    </div>
-    <div class="form-group">
-      <label for="licence">Licence</label>
-      <select class="form-control" id="licence" formControlName="licence">
-        <option></option>
-        <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
-      </select>
-      <div *ngIf="formErrors.licence" class="alert alert-danger">
-        {{ formErrors.licence }}
-      </div>
-    </div>
-    <div class="form-group">
-      <label for="language">Language</label>
-      <select class="form-control" id="language" formControlName="language">
-        <option></option>
-        <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
-      </select>
-      <div *ngIf="formErrors.language" class="alert alert-danger">
-        {{ formErrors.language }}
-      </div>
-    </div>
-    <div class="form-group">
-      <label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
-      <tag-input
-        [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
-        formControlName="tags" maxItems="5" modelAsStrings="true"
-      ></tag-input>
-    </div>
-    <div class="form-group">
+    <my-video-edit
-      <label for="description">Description</label>
+      [form]="form" [formErrors]="formErrors"
-      <my-video-description formControlName="description"></my-video-description>
+      [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies"
+    ></my-video-edit>
-      <div *ngIf="formErrors.description" class="alert alert-danger">
+    <div class="submit-container">
-        {{ formErrors.description }}
+      <div class="submit-button" (click)="update()" [ngClass]="{ disabled: !form.valid }">
+        <span class="icon icon-validate"></span>
+        <input type="button" value="Update" />
      </div>
    </div>
-    <div class="form-group">
-      <input
-        type="button" value="Update" class="btn btn-default form-control"
-        (click)="update()"
-      >
-    </div>
  </form>
-  </div>
 </div>
diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts
index 0e966cb50..d1da8b6d8 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -1,23 +1,14 @@
 import { Component, OnInit } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
-import 'rxjs/add/observable/forkJoin'
 import { NotificationsService } from 'angular2-notifications'
+import 'rxjs/add/observable/forkJoin'
-import { ServerService } from '../../core'
-import {
-  FormReactive,
-  VIDEO_NAME,
-  VIDEO_CATEGORY,
-  VIDEO_LICENCE,
-  VIDEO_LANGUAGE,
-  VIDEO_DESCRIPTION,
-  VIDEO_TAGS,
-  VIDEO_PRIVACY
-} from '../../shared'
-import { VideoEdit, VideoService } from '../shared'
 import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum'
+import { ServerService } from '../../core'
+import { FormReactive } from '../../shared'
+import { ValidatorMessage } from '../../shared/forms/form-validators'
+import { VideoEdit } from '../../shared/video/video-edit.model'
+import { VideoService } from '../../shared/video/video.service'
 @Component({
  selector: 'my-videos-update',
@@ -26,34 +17,13 @@ import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.
 })
 export class VideoUpdateComponent extends FormReactive implements OnInit {
-  tags: string[] = []
-  videoCategories = []
-  videoLicences = []
-  videoLanguages = []
-  videoPrivacies = []
  video: VideoEdit
-  tagValidators = VIDEO_TAGS.VALIDATORS
-  tagValidatorsMessages = VIDEO_TAGS.MESSAGES
  error: string = null
  form: FormGroup
-  formErrors = {
+  formErrors: { [ id: string ]: string } = {}
-    name: '',
+  validationMessages: ValidatorMessage = {}
-    privacy: '',
+  videoPrivacies = []
-    category: '',
-    licence: '',
-    language: '',
-    description: ''
-  }
-  validationMessages = {
-    name: VIDEO_NAME.MESSAGES,
-    privacy: VIDEO_PRIVACY.MESSAGES,
-    category: VIDEO_CATEGORY.MESSAGES,
-    licence: VIDEO_LICENCE.MESSAGES,
-    language: VIDEO_LANGUAGE.MESSAGES,
-    description: VIDEO_DESCRIPTION.MESSAGES
-  }
  fileError = ''
@@ -69,30 +39,16 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
  }
  buildForm () {
-    this.form = this.formBuilder.group({
+    this.form = this.formBuilder.group({})
-      name: [ '', VIDEO_NAME.VALIDATORS ],
-      privacy: [ '', VIDEO_PRIVACY.VALIDATORS ],
-      nsfw: [ false ],
-      category: [ '', VIDEO_CATEGORY.VALIDATORS ],
-      licence: [ '', VIDEO_LICENCE.VALIDATORS ],
-      language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
-      description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
-      tags: [ '' ]
-    })
    this.form.valueChanges.subscribe(data => this.onValueChanged(data))
  }
  ngOnInit () {
    this.buildForm()
-    this.videoCategories = this.serverService.getVideoCategories()
-    this.videoLicences = this.serverService.getVideoLicences()
-    this.videoLanguages = this.serverService.getVideoLanguages()
    this.videoPrivacies = this.serverService.getVideoPrivacies()
    const uuid: string = this.route.snapshot.params['uuid']
    this.videoService.getVideo(uuid)
      .switchMap(video => {
        return this.videoService
@@ -104,7 +60,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
        video => {
          this.video = new VideoEdit(video)
-          // We cannot set private a video that was not private anymore
+          // We cannot set private a video that was not private
          if (video.privacy !== VideoPrivacy.PRIVATE) {
            const newVideoPrivacies = []
            for (const p of this.videoPrivacies) {
diff --git a/client/src/app/videos/+video-watch/video-download.component.html b/client/src/app/videos/+video-watch/video-download.component.html
index ddc57e999..7efc79e93 100644
--- a/client/src/app/videos/+video-watch/video-download.component.html
+++ b/client/src/app/videos/+video-watch/video-download.component.html
@@ -6,18 +6,19 @@
        <button type="button" class="close" aria-label="Close" (click)="hide()">
          <span aria-hidden="true">&times;</span>
        </button>
-        <h4 class="modal-title">Download</h4>
+        <h4 class="title-page title-page-single">Download</h4>
      </div>
      <div class="modal-body">
        <div *ngFor="let file of video.files" class="resolution-block">
          <label>{{ file.resolutionLabel }}</label>
-          <a class="btn btn-default " target="_blank" [href]="file.torrentUrl">
-            <span class="glyphicon glyphicon-download"></span>
+          <a class="orange-button-link " target="_blank" [href]="file.torrentUrl">
+            <span class="icon icon-download"></span>
            Torrent file
          </a>
-          <a class="btn btn-default" target="_blank" [href]="file.fileUrl">
+          <a class="orange-button-link" target="_blank" [href]="file.fileUrl">
-            <span class="glyphicon glyphicon-download"></span>
+            <span class="icon icon-download"></span>
            Download
          </a>
diff --git a/client/src/app/videos/+video-watch/video-download.component.scss b/client/src/app/videos/+video-watch/video-download.component.scss
new file mode 100644
index 000000000..c9d5af9c1
--- /dev/null
+++ b/client/src/app/videos/+video-watch/video-download.component.scss
@@ -0,0 +1,23 @@
+.resolution-block:not(:first-child) {
+  margin-top: 30px;
+}
+.orange-button-link {
+  margin-right: 10px;
+}
+label {
+  display: block;
+}
+.icon {
+  @include icon(21px);
+  margin-right: 5px;
+  position: relative;
+  top: -1px;
+  &.icon-download {
+    background-image: url('../../../assets/images/video/download-white.svg');
+  }
+}
diff --git a/client/src/app/videos/+video-watch/video-download.component.ts b/client/src/app/videos/+video-watch/video-download.component.ts
index c32f8d586..095df1698 100644
--- a/client/src/app/videos/+video-watch/video-download.component.ts
+++ b/client/src/app/videos/+video-watch/video-download.component.ts
@@ -1,13 +1,11 @@
 import { Component, Input, ViewChild } from '@angular/core'
 import { ModalDirective } from 'ngx-bootstrap/modal'
+import { VideoDetails } from '../../shared/video/video-details.model'
-import { VideoDetails } from '../shared'
 @Component({
  selector: 'my-video-download',
  templateUrl: './video-download.component.html',
-  styles: [ '.resolution-block { margin-top: 20px; }' ]
+  styleUrls: [ './video-download.component.scss' ]
 })
 export class VideoDownloadComponent {
  @Input() video: VideoDetails = null
diff --git a/client/src/app/videos/+video-watch/video-report.component.html b/client/src/app/videos/+video-watch/video-report.component.html
index ceb7cf50a..20474bab4 100644
--- a/client/src/app/videos/+video-watch/video-report.component.html
+++ b/client/src/app/videos/+video-watch/video-report.component.html
@@ -6,28 +6,28 @@
        <button type="button" class="close" aria-label="Close" (click)="hide()">
          <span aria-hidden="true">&times;</span>
        </button>
-        <h4 class="modal-title">Report video</h4>
+        <h4 class="title-page title-page-single">Report video</h4>
      </div>
      <div class="modal-body">
-        <form novalidate [formGroup]="form">
+        <form novalidate [formGroup]="form" (ngSubmit)="report()">
          <div class="form-group">
            <label for="reason">Reason</label>
            <textarea
              id="reason" class="form-control" placeholder="Reason..."
-              formControlName="reason"
+              formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }"
            >
            </textarea>
-            <div *ngIf="formErrors.reason" class="alert alert-danger">
+            <div *ngIf="formErrors.reason" class="form-error">
              {{ formErrors.reason }}
            </div>
          </div>
          <div class="form-group">
            <input
-              type="button" value="Report" class="btn btn-default form-control"
+              type="submit" value="Report" class="orange-button"
-              [disabled]="!form.valid" (click)="report()"
+              [disabled]="!form.valid"
            >
          </div>
        </form>
diff --git a/client/src/app/videos/+video-watch/video-report.component.ts b/client/src/app/videos/+video-watch/video-report.component.ts
index fc9b5a9d4..b94e4144e 100644
--- a/client/src/app/videos/+video-watch/video-report.component.ts
+++ b/client/src/app/videos/+video-watch/video-report.component.ts
@@ -1,11 +1,9 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
-import { ModalDirective } from 'ngx-bootstrap/modal'
 import { NotificationsService } from 'angular2-notifications'
+import { ModalDirective } from 'ngx-bootstrap/modal'
-import { FormReactive, VideoAbuseService, VIDEO_ABUSE_REASON } from '../../shared'
+import { FormReactive, VIDEO_ABUSE_REASON, VideoAbuseService } from '../../shared'
-import { VideoDetails, VideoService } from '../shared'
+import { VideoDetails } from '../../shared/video/video-details.model'
 @Component({
  selector: 'my-video-report',
diff --git a/client/src/app/videos/+video-watch/video-share.component.html b/client/src/app/videos/+video-watch/video-share.component.html
index 88f59c063..36ec38d88 100644
--- a/client/src/app/videos/+video-watch/video-share.component.html
+++ b/client/src/app/videos/+video-watch/video-share.component.html
@@ -6,7 +6,7 @@
        <button type="button" class="close" aria-label="Close" (click)="hide()">
          <span aria-hidden="true">&times;</span>
        </button>
-        <h4 class="modal-title">Share</h4>
+        <h4 class="title-page title-page-single">Share</h4>
      </div>
      <div class="modal-body">
diff --git a/client/src/app/videos/+video-watch/video-share.component.ts b/client/src/app/videos/+video-watch/video-share.component.ts
index aeef65ecf..4df9adf29 100644
--- a/client/src/app/videos/+video-watch/video-share.component.ts
+++ b/client/src/app/videos/+video-watch/video-share.component.ts
@@ -1,8 +1,6 @@
 import { Component, Input, ViewChild } from '@angular/core'
 import { ModalDirective } from 'ngx-bootstrap/modal'
+import { VideoDetails } from '../../shared/video/video-details.model'
-import { VideoDetails } from '../shared'
 @Component({
  selector: 'my-video-share',
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index f528d73c3..f99e84caf 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -1,197 +1,153 @@
-<div *ngIf="error" class="row">
-  <div class="alert alert-danger">
-    The video load seems to be abnormally long.
-    <ul>
-      <li>Maybe the server {{ video.serverHost }} is down :(</li>
-      <li>
-        If not, you can report an issue on
-        <a href="https://github.com/Chocobozzz/PeerTube/issues" title="Report an issue">
-          https://github.com/Chocobozzz/PeerTube/issues
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
 <div class="row">
  <!-- We need the video container for videojs so we just hide it -->
-  <div [hidden]="videoNotFound" class="embed-responsive embed-responsive-19by9">
+  <div [hidden]="videoNotFound" id="video-container">
-     <video id="video-container" class="video-js vjs-sublime-skin"></video>
+     <video id="video-element" class="video-js vjs-peertube-skin vjs-fluid"></video>
  </div>
  <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
-</div>
-<!-- P2P information -->
-<div id="torrent-info" class="row">
-  <div id="torrent-info-download" class="col-md-4 col-sm-4 col-xs-4">Download: {{ downloadSpeed | bytes }}/s</div>
-  <div id="torrent-info-upload" class="col-md-4 col-sm-4 col-xs-4">Upload: {{ uploadSpeed | bytes }}/s</div>
-  <div id="torrent-info-peers" class="col-md-4 col-sm-4 col-xs-4">Number of peers: {{ numPeers }}</div>
-</div>
-<!-- Video information -->
-<div *ngIf="video !== null" id="video-info">
-  <div class="row video-name-views">
-    <div class="col-xs-8 col-md-8 video-name">
-      {{ video.name }}
-    </div>
-    <div class="col-xs-4 col-md-4 pull-right video-views">
-      {{ video.views}} views
-    </div>
-  </div>
-  <div class="row video-small-blocks">
-    <div class="col-xs-5 col-xs-3 col-md-3 video-small-block video-small-block-account">
-      <a class="option" title="Access to all videos of this user" [routerLink]="['/videos/list', { field: 'account', search: video.account }]">
-        <span class="glyphicon glyphicon-user"></span>
-        <span class="video-small-block-text">{{ video.by }}</span>
-      </a>
-    </div>
-    <div class="col-xs-2 col-md-3 video-small-block video-small-block-share">
-      <a class="option" (click)="showShareModal()" title="Share the video">
-        <span class="glyphicon glyphicon-share"></span>
-        <span class="hidden-xs video-small-block-text">Share</span>
-      </a>
-    </div>
-    <div class="col-xs-2 col-md-3 video-small-block video-small-block-more">
+  <!-- Video information -->
-      <div class="video-small-block-dropdown" dropdown dropup="true" placement="right">
+  <div *ngIf="video" class="margin-content video-bottom">
-        <a class="option" title="Access to more options" dropdownToggle>
+    <div class="video-info">
-          <span class="glyphicon glyphicon-option-horizontal"></span>
+      <div class="video-info-name-actions">
-          <span class="hidden-xs video-small-block-text">More</span>
+        <div class="video-info-name">{{ video.name }}</div>
-        </a>
+        <div class="video-info-actions">
-        <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
+          <div *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" class="action-button">
-          <li *ngIf="canUserUpdateVideo()" role="menuitem">
+            <span class="icon icon-like" title="Like this video" (click)="setLike()"></span>
-            <a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.uuid ]">
+          </div>
-              <span class="glyphicon glyphicon-pencil"></span> Update
-            </a>
+          <div *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" class="action-button">
-          </li>
+            <span class="icon icon-dislike" title="Dislike this video" (click)="setDislike()"></span>
+          </div>
-          <li role="menuitem">
-            <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)">
+          <div (click)="showShareModal()" class="action-button">
-              <span class="glyphicon glyphicon-download-alt"></span> Download
+            <span class="icon icon-share"></span>
-            </a>
+            Share
-          </li>
+          </div>
-          <li *ngIf="isUserLoggedIn()" role="menuitem">
+          <div class="action-more" dropdown dropup="true" placement="right">
-            <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
+            <div class="action-button" dropdownToggle>
-              <span class="glyphicon glyphicon-alert"></span> Report
+              <span class="icon icon-more"></span>
-            </a>
+            </div>
-          </li>
+            <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
-          <li *ngIf="isVideoRemovable()" role="menuitem">
+              <li role="menuitem">
-            <a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)">
+                <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)">
-              <span class="glyphicon glyphicon-remove"></span> Delete
+                  <span class="icon icon-download"></span> Download
-            </a>
+                </a>
-          </li>
+              </li>
-          <li *ngIf="isVideoBlacklistable()" role="menuitem">
+              <li *ngIf="isUserLoggedIn()" role="menuitem">
-            <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)">
+                <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
-              <span class="glyphicon glyphicon-eye-close"></span> Blacklist
+                  <span class="icon icon-alert"></span> Report
-            </a>
+                </a>
-          </li>
+              </li>
-        </ul>
+              <li *ngIf="isVideoBlacklistable()" role="menuitem">
+                <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)">
+                  <span class="icon icon-blacklist"></span> Blacklist
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
      </div>
-    </div>
-    <div class="col-xs-3 col-md-3 video-small-block video-small-block-rating">
+      <div class="video-info-date-views-bar">
-      <div class="video-small-block-like">
+        <div class="video-info-date-views">
-        <span
+          {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
-          class="glyphicon glyphicon-thumbs-up" title="Like this video"
+        </div>
-          [ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'like' }" (click)="setLike()"
-        ></span>
-        <span class="video-small-block-text">
+        <div *ngIf="video.likes !== 0 || video.dislikes !== 0" class="video-info-likes-dislikes-bar">
-          {{ video.likes }}
+          <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
-        </span>
+        </div>
      </div>
-      <div class="video-small-block-dislike">
+      <div class="video-info-channel">
-        <span
+        {{ video.channel.name }}
-          class="glyphicon glyphicon-thumbs-down" title="Dislike this video"
+        <!-- Here will be the subscribe button -->
-          [ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'dislike' }" (click)="setDislike()"
-        ></span>
-        <span class="video-small-block-text">
-          {{ video.dislikes }}
-        </span>
      </div>
-    </div>
-  </div>
-  <div class="row video-details">
+      <div class="video-info-by">
-    <div class="video-details-date-description col-xs-8 col-md-9">
+        By {{ video.by }}
-      <div class="video-details-date">
+        <img [src]="getAvatarPath()" alt="Account avatar" />
-        Published on {{ video.createdAt | date:'short' }}
      </div>
-      <div class="video-details-description" [innerHTML]="videoHTMLDescription"></div>
+      <div class="video-info-description">
+        <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
-      <div class="video-details-description-more" *ngIf="completeDescriptionShown === false && video.description.length === 250" (click)="showMoreDescription()">
+        <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length === 250" (click)="showMoreDescription()">
-        Show more
+          Show more
-        <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
+          <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
-        <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader>
+          <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader>
-      </div>
+        </div>
-      <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-details-description-more">
+        <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
-        Show less
+          Show less
-        <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
+          <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
+        </div>
      </div>
-    </div>
-    <div class="video-details-attributes col-xs-4 col-md-3">
+      <div class="video-attributes">
-      <div class="video-details-attribute">
+        <div class="video-attribute">
-        <span class="video-details-attribute-label">
+          <span class="video-attribute-label">
-          Privacy:
+            Privacy
-        </span>
+          </span>
-        <span class="video-details-attribute-value">
+          <span class="video-attribute-value">
-          {{ video.privacyLabel }}
+            {{ video.privacyLabel }}
-        </span>
+          </span>
-      </div>
+        </div>
-      <div class="video-details-attribute">
+        <div class="video-attribute">
-        <span class="video-details-attribute-label">
+          <span class="video-attribute-label">
-          Category:
+            Category
-        </span>
+          </span>
-        <span class="video-details-attribute-value">
+          <span class="video-attribute-value">
-          {{ video.categoryLabel }}
+            {{ video.categoryLabel }}
-        </span>
+          </span>
-      </div>
+        </div>
-      <div class="video-details-attribute">
+        <div class="video-attribute">
-        <span class="video-details-attribute-label">
+          <span class="video-attribute-label">
-          Licence:
+            Licence
-        </span>
+          </span>
-        <span class="video-details-attribute-value">
+          <span class="video-attribute-value">
-          {{ video.licenceLabel }}
+            {{ video.licenceLabel }}
-        </span>
+          </span>
-      </div>
+        </div>
-      <div class="video-details-attribute">
+        <div class="video-attribute">
-        <span class="video-details-attribute-label">
+          <span class="video-attribute-label">
-          Language:
+            Language
-        </span>
+          </span>
-        <span class="video-details-attribute-value">
+          <span class="video-attribute-value">
-          {{ video.languageLabel }}
+            {{ video.languageLabel }}
-        </span>
+          </span>
-      </div>
+        </div>
-      <div class="video-details-attribute">
+        <div class="video-attribute">
-        <span class="video-details-attribute-label">
+          <span class="video-attribute-label">
-          Tags:
+            Tags
-        </span>
+          </span>
-        <div class="video-details-tags">
+          <span class="video-attribute-value">
-          <a *ngFor="let tag of video.tags" [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">
+            {{ getVideoTags() }}
-            {{ tag }}
+          </span>
-          </a>
        </div>
      </div>
    </div>
+    <div class="other-videos">
+      <div class="title-page title-page-single">
+        Other videos
+      </div>
+      <div *ngFor="let video of otherVideos">
+        <my-video-miniature [video]="video" [user]="user"></my-video-miniature>
+      </div>
+    </div>
  </div>
 </div>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index cad21dd18..9daa757b4 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -1,6 +1,22 @@
 #video-container {
-  width: 100%;
+  background-color: #000;
-  height: 100%;
+  display: flex;
+  justify-content: center;
+  #video-element {
+    width: 888px;
+    height: 500px;
+    @media screen and (max-width: 800px) {
+      height: auto;
+    }
+    // VideoJS create an inner video player
+    video {
+      outline: 0;
+      position: relative !important;
+    }
+  }
 }
 #video-not-found {
@@ -11,175 +27,153 @@
  font-weight: bold;
 }
-.embed-responsive {
+.video-bottom {
-  height: 500px;
+  margin-top: 40px;
+  display: flex;
-  @media screen and (max-width: 600px) {
+  .video-info {
-    height: 300px;
+    flex-grow: 1;
-  }
+    margin-right: 28px;
-}
-#torrent-info {
+    .video-info-name-actions {
-  font-size: 10px;
+      display: flex;
-  margin-top: 10px;
+      align-items: center;
-  text-align: center;
-  div {
-    min-width: 60px;
-  }
-}
-#video-info {
-  .video-name-views {
-    font-weight: bold;
-    font-size: 18px;
-    min-height: $video-watch-title-height;
-    display: flex;
-    align-items: center;
-    .video-name {
-      padding-left: $video-watch-info-padding-left;
-    }
-    .video-views {
+      .video-info-name {
-      text-align: right;
+        font-size: 27px;
-      // Keep a symmetry with the video name
+        font-weight: $font-semibold;
-      padding-right: $video-watch-info-padding-left
+        flex-grow: 1;
-    }
+      }
-  }
+      .video-info-actions {
+        .action-button {
+          @include peertube-button;
+          @include grey-button;
-  .video-small-blocks {
+          font-size: 15px;
-    height: $video-watch-info-height;
+          font-weight: $font-semibold;
-    color: $video-watch-info-color;
+          display: inline-block;
-    border-color: $video-watch-border-color;
+          padding: 0 10px 0 10px;
-    border-width: 1px 0px;
-    border-style: solid;
-    .video-small-block {
+          .icon {
-      height: $video-watch-info-height;
+            @include icon(21px);
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      text-align: center;
-      a {
+            position: relative;
-        cursor: pointer;
+            top: -2px;
-        transition: color 0.3s;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        &, &:hover {
-          color: inherit;
-          text-decoration:none;
-        }
-        &:hover {
+            &.icon-like {
-          color: #000 !important;
+              background-image: url('../../../assets/images/video/like-grey.svg');
-        }
+            }
-        &:hover > .glyphicon {
+            &.icon-dislike {
-          opacity: 1 !important;
+              background-image: url('../../../assets/images/video/dislike-grey.svg');
-        }
+            }
-      }
-      .option .glyphicon {
+            &.icon-share {
-        font-size: 22px;
+              background-image: url('../../../assets/images/video/share.svg');
-        color: inherit;
+            }
-        opacity: 0.15;
-        margin-bottom: 10px;
-        transition: opacity 0.3s;
-      }
-      .video-small-block-text {
+            &.icon-more {
-        font-size: 15px;
+              background-image: url('../../../assets/images/video/more.svg');
-        font-weight: bold;
+              top: -1px;
-      }
+            }
-    }
+          }
-    .video-small-block:not(:last-child) {
+          &.activated {
-      border-width: 0 1px 0 0;
+            @include orange-button;
-      border-color: $video-watch-border-color;
-      border-style: solid;
-    }
-    .video-small-block-account, .video-small-block-more {
+            .icon-like {
-      a.option {
+              background-image: url('../../../assets/images/video/like-white.svg');
-        display: block;
+            }
-        .glyphicon {
+            .icon-dislike {
-          display: block;
+              background-image: url('../../../assets/images/video/dislike-white.svg');
+            }
+          }
        }
-      }
-    }
-    .video-small-block-share, .video-small-block-more {
+        .action-more {
-      a.option {
+          display: inline-block;
-        display: block;
+          .dropdown-menu .icon {
-        .glyphicon {
+            display: inline-block;
-          display: block;
+            background-repeat: no-repeat;
+            background-size: contain;
+            width: 21px;
+            height: 21px;
+            vertical-align: middle;
+            margin-right: 5px;
+            position: relative;
+            top: -1px;
+            &.icon-download {
+              background-image: url('../../../assets/images/video/download-grey.svg');
+            }
+            &.icon-alert {
+              background-image: url('../../../assets/images/video/alert.svg');
+            }
+            &.icon-blacklist {
+              background-image: url('../../../assets/images/video/eye-closed.svg');
+            }
+          }
        }
      }
    }
-    .video-small-block-more .video-small-block-dropdown {
+    .video-info-date-views-bar {
-      position: relative;
+      display: flex;
-      .dropdown-item .glyphicon {
-        margin-right: 5px;
-      }
-    }
-    .video-small-block-rating {
-      .video-small-block-like {
+      .video-info-date-views {
+        font-size: 16px;
        margin-bottom: 10px;
+        flex-grow: 1;
      }
-      .video-small-block-text {
+      .video-info-likes-dislikes-bar {
-        vertical-align: top;
+        height: 5px;
-      }
+        width: 186px;
+        background-color: #E5E5E5;
+        margin-top: 25px;
-      .glyphicon {
+        .likes-bar {
-        font-size: 18px;
+          height: 100%;
-        margin: 0 10px 0 0;
+          background-color: #39CC0B;
-        opacity: 0.3;
+        }
      }
+    }
-      .interactive {
+    .video-info-channel {
-        cursor: pointer;
+      font-weight: $font-semibold;
-        transition: opacity, color 0.3s;
+      font-size: 15px;
+    }
-        &.activated, &:hover {
+    .video-info-by {
-          opacity: 1;
+      display: flex;
-          color: #000;
+      align-items: center;
-        }
+      font-size: 13px;
+      img {
+        width: 16px;
+        height: 16px;
+        margin-left: 3px;
      }
    }
-  }
-  .video-details {
+    .video-info-description {
-    margin-top: 30px;
+      margin: 20px 0;
+      font-size: 15px;
-    .video-details-date-description {
-      padding-left: $video-watch-info-padding-left;
      .description-loading {
        display: inline-block;
      }
-      .video-details-date {
+      .video-info-description-more {
-        font-weight: bold;
-        margin-bottom: 30px;
-      }
-      .video-details-description-more {
        cursor: pointer;
-        margin-top: 15px;
+        font-weight: $font-semibold;
-        font-weight: bold;
+        color: #585858;
-        color: #acaeb7;
+        font-size: 14px;
        .glyphicon {
          position: relative;
@@ -188,109 +182,68 @@
      }
    }
-    .video-details-attributes {
+    .video-attributes {
-      font-weight: bold;
+      .video-attribute {
-      font-size: 12px;
+        font-size: 13px;
+        display: block;
-      .video-details-attribute {
+        margin-bottom: 12px;
-        display: flex;
-        .video-details-attribute-label {
+        .video-attribute-label {
-          color: $video-watch-info-color;
+          width: 86px;
-          flex-basis: 60px;
+          display: inline-block;
-          flex-grow: 0;
+          color: #585858;
-          flex-shrink: 0;
+          font-weight: $font-bold;
-          margin-right: 5px;
        }
      }
    }
-    .video-details-tags {
-      display: flex;
-      flex-wrap: wrap;
-      a {
-        margin: 0 3px 3px 0;
-        font-size: 11px;
-      }
-    }
  }
-  @media screen and (max-width: 800px) {
+  .other-videos {
-    .video-name-views {
+    .title-page {
-      .video-name {
+      margin-top: 0;
-        padding-left: 5px;
-        padding-right: 0px;
-      }
-      .video-views {
-        padding-left: 0px;
-        padding-right: 5px;
-      }
    }
-    .video-small-blocks {
+    /deep/ .video-miniature {
-      a, .video-small-block-text {
+      display: flex;
-        font-size: 13px !important;
+      height: 100%;
-      }
+      margin-bottom: 20px;
-      .glyphicon {
-        font-size: 18px !important;
-      }
-      .video-small-block-account {
+      .video-miniature-information {
-        padding-left: 10px;
+        margin-left: 10px;
-        padding-right: 10px;
      }
    }
+  }
+}
-    .video-details {
-      .video-details-date-description {
-        padding-left: 10px;
-        font-size: 13px !important;
-      }
-      .video-details-attributes {
-        font-size: 11px !important;
-        .video-details-attribute-label {
+@media screen and (max-width: 1000px) {
-          width: 50px;
+  .other-videos {
-        }
+    display: none;
-      }
-    }
  }
+}
-  @media screen and (max-width: 500px) {
+@media screen and (max-width: 800px) {
-    .video-name-views {
+  .video-bottom {
-      font-size: 16px !important;
+    margin: 20px 0 0 0;
-    }
-    // Keep the same hierarchy than max-width: 800px
+    .video-info {
-    .video-small-blocks {
+      margin-right: 0;
-      a, .video-small-block-text {
-        font-size: 10px !important;
-      }
-      .video-small-block-account {
+      .video-info-name-actions {
-        padding-left: 5px;
+        align-items: left;
-        padding-right: 5px;
+        flex-direction: column;
+        margin-bottom: 30px;
      }
-    }
-    .video-details {
+      .video-info-date-views-bar {
-      .video-details-date-description {
+        align-items: left;
+        flex-direction: column;
        margin-bottom: 30px;
-        width: 100%;
-        .video-details-date {
+        .video-info-likes-dislikes-bar {
-          margin-bottom: 15px;
+          margin-top: 0;
        }
      }
-      .video-details-attributes {
-        padding-left: 10px;
-        padding-right: 10px;
-      }
    }
  }
 }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index b26f3092f..d4e3ec014 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -2,6 +2,7 @@ import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/co
 import { ActivatedRoute, Router } from '@angular/router'
 import { MetaService } from '@ngx-meta/core'
 import { NotificationsService } from 'angular2-notifications'
+import { VideoService } from 'app/shared/video/video.service'
 import { Observable } from 'rxjs/Observable'
 import { Subscription } from 'rxjs/Subscription'
 import videojs from 'video.js'
@@ -9,7 +10,10 @@ import { UserVideoRateType, VideoRateType } from '../../../../../shared'
 import '../../../assets/player/peertube-videojs-plugin'
 import { AuthService, ConfirmService } from '../../core'
 import { VideoBlacklistService } from '../../shared'
-import { MarkdownService, VideoDetails, VideoService } from '../shared'
+import { Account } from '../../shared/account/account.model'
+import { VideoDetails } from '../../shared/video/video-details.model'
+import { Video } from '../../shared/video/video.model'
+import { MarkdownService } from '../shared'
 import { VideoDownloadComponent } from './video-download.component'
 import { VideoReportComponent } from './video-report.component'
 import { VideoShareComponent } from './video-share.component'
@@ -24,13 +28,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
  @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
-  downloadSpeed: number
+  otherVideos: Video[] = []
  error = false
  loading = false
-  numPeers: number
  player: videojs.Player
  playerElement: HTMLMediaElement
-  uploadSpeed: number
  userRating: UserVideoRateType = null
  video: VideoDetails = null
  videoPlayerLoaded = false
@@ -58,6 +61,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  ) {}
  ngOnInit () {
+    this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt')
+      .subscribe(
+        data => this.otherVideos = data.videos,
+    err => console.error(err)
+      )
    this.paramsSub = this.route.params.subscribe(routeParams => {
      let uuid = routeParams['uuid']
      this.videoService.getVideo(uuid).subscribe(
@@ -115,27 +125,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
                     )
  }
-  removeVideo (event: Event) {
-    event.preventDefault()
-    this.confirmService.confirm('Do you really want to delete this video?', 'Delete').subscribe(
-      res => {
-        if (res === false) return
-        this.videoService.removeVideo(this.video.id)
-                         .subscribe(
-                           status => {
-                             this.notificationsService.success('Success', `Video ${this.video.name} deleted.`)
-                             // Go back to the video-list.
-                             this.router.navigate(['/videos/list'])
-                           },
-                           error => this.notificationsService.error('Error', error.text)
-                          )
-      }
-    )
-  }
  blacklistVideo (event: Event) {
    event.preventDefault()
@@ -166,7 +155,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  }
  showLessDescription () {
    this.updateVideoDescription(this.shortVideoDescription)
    this.completeDescriptionShown = false
  }
@@ -211,16 +199,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    return this.authService.isLoggedIn()
  }
-  canUserUpdateVideo () {
+  isVideoBlacklistable () {
-    return this.video.isUpdatableBy(this.authService.getUser())
+    return this.video.isBlackistableBy(this.authService.getUser())
  }
-  isVideoRemovable () {
+  getAvatarPath () {
-    return this.video.isRemovableBy(this.authService.getUser())
+    return Account.GET_ACCOUNT_AVATAR_PATH(this.video.account)
  }
-  isVideoBlacklistable () {
+  getVideoTags () {
-    return this.video.isBlackistableBy(this.authService.getUser())
+    if (!this.video || Array.isArray(this.video.tags) === false) return []
+    return this.video.tags.join(', ')
  }
  private updateVideoDescription (description: string) {
@@ -229,6 +219,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  }
  private setVideoDescriptionHTML () {
+    if (!this.video.description) {
+      this.videoHTMLDescription = ''
+      return
+    }
    this.videoHTMLDescription = this.markdownService.markdownToHTML(this.video.description)
  }
@@ -281,7 +276,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
          return this.router.navigate([ '/videos/list' ])
        }
-        this.playerElement = this.elementRef.nativeElement.querySelector('#video-container')
+        this.playerElement = this.elementRef.nativeElement.querySelector('#video-element')
        const videojsOptions = {
          controls: true,
@@ -304,12 +299,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
          this.on('customError', (event, data) => {
            self.handleError(data.err)
          })
-          this.on('torrentInfo', (event, data) => {
-            self.downloadSpeed = data.downloadSpeed
-            self.numPeers = data.numPeers
-            self.uploadSpeed = data.uploadSpeed
-          })
        })
        this.setVideoDescriptionHTML()
diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts
index 1b983200d..0b1dd5c15 100644
--- a/client/src/app/videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core'
 import { VideoWatchRoutingModule } from './video-watch-routing.module'
-import { VideoService, MarkdownService } from '../shared'
+import { MarkdownService } from '../shared'
 import { SharedModule } from '../../shared'
 import { VideoWatchComponent } from './video-watch.component'
@@ -28,8 +28,7 @@ import { VideoDownloadComponent } from './video-download.component'
  ],
  providers: [
-    MarkdownService,
+    MarkdownService
-    VideoService
  ]
 })
 export class VideoWatchModule { }
diff --git a/client/src/app/videos/shared/index.ts b/client/src/app/videos/shared/index.ts
index 3f1458088..7a66944b9 100644
--- a/client/src/app/videos/shared/index.ts
+++ b/client/src/app/videos/shared/index.ts
@@ -1,8 +1 @@
-export * from './sort-field.type'
 export * from './markdown.service'
-export * from './video.model'
-export * from './video-details.model'
-export * from './video-edit.model'
-export * from './video.service'
-export * from './video-description.component'
-export * from './video-pagination.model'
diff --git a/client/src/app/videos/shared/video-description.component.scss b/client/src/app/videos/shared/video-description.component.scss
deleted file mode 100644
index d8d73e846..000000000
--- a/client/src/app/videos/shared/video-description.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-textarea {
-  height: 150px;
-}
-.previews /deep/ {
-  .nav {
-    margin-top: 10px;
-    font-size: 0.9em;
-  }
-  .tab-content {
-    min-height: 75px;
-    padding: 5px;
-  }
-}
diff --git a/client/src/app/videos/video-list/index.ts b/client/src/app/videos/video-list/index.ts
index ed2bb1657..5e7c7886c 100644
--- a/client/src/app/videos/video-list/index.ts
+++ b/client/src/app/videos/video-list/index.ts
@@ -1,3 +1,3 @@
-export * from './my-videos.component'
+export * from './video-recently-added.component'
-export * from './video-list.component'
+export * from './video-trending.component'
-export * from './shared'
+export * from './video-search.component'
diff --git a/client/src/app/videos/video-list/my-videos.component.ts b/client/src/app/videos/video-list/my-videos.component.ts
deleted file mode 100644
index 648741a40..000000000
--- a/client/src/app/videos/video-list/my-videos.component.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { NotificationsService } from 'angular2-notifications'
-import { AbstractVideoList } from './shared'
-import { VideoService } from '../shared'
-@Component({
-  selector: 'my-videos',
-  styleUrls: [ './shared/abstract-video-list.scss' ],
-  templateUrl: './shared/abstract-video-list.html'
-})
-export class MyVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
-  constructor (
-    protected router: Router,
-    protected route: ActivatedRoute,
-    protected notificationsService: NotificationsService,
-    private videoService: VideoService
-  ) {
-    super()
-  }
-  ngOnInit () {
-    super.ngOnInit()
-  }
-  ngOnDestroy () {
-    this.subActivatedRoute.unsubscribe()
-  }
-  getVideosObservable () {
-    return this.videoService.getMyVideos(this.pagination, this.sort)
-  }
-}
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.html b/client/src/app/videos/video-list/shared/abstract-video-list.html
deleted file mode 100644
index 680fba3f5..000000000
--- a/client/src/app/videos/video-list/shared/abstract-video-list.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<div class="row">
-  <div class="content-padding">
-    <div class="videos-info">
-      <div class="col-md-9 col-xs-5 videos-total-results">
-        <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span>
-        <my-loader [loading]="loading | async"></my-loader>
-      </div>
-      <my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
-    </div>
-  </div>
-</div>
-<div class="content-padding videos-miniatures">
-  <div class="no-video" *ngIf="isThereNoVideo()">There is no video.</div>
-  <my-video-miniature
-    class="ng-animate"
-    *ngFor="let video of videos" [video]="video" [user]="user" [currentSort]="sort"
-  >
-  </my-video-miniature>
-</div>
-<pagination *ngIf="pagination.totalItems !== null && pagination.totalItems !== 0"
-  [totalItems]="pagination.totalItems" [itemsPerPage]="pagination.itemsPerPage" [maxSize]="6" [boundaryLinks]="true" [rotate]="false"
-  [(ngModel)]="pagination.currentPage" (pageChanged)="onPageChanged($event)"
-></pagination>
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.scss b/client/src/app/videos/video-list/shared/abstract-video-list.scss
deleted file mode 100644
index 4b4409602..000000000
--- a/client/src/app/videos/video-list/shared/abstract-video-list.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.videos-info {
-  @media screen and (max-width: 400px) {
-    margin-left: 0;
-  }
-  border-bottom: 1px solid #f1f1f1;
-  height: 40px;
-  line-height: 40px;
-  .videos-total-results {
-    font-size: 13px;
-  }
-  my-loader {
-    display: inline-block;
-    margin-left: 5px;
-  }
-}
-.videos-miniatures {
-  text-align: center;
-  padding-top: 0;
-  my-video-miniature {
-    text-align: left;
-  }
-  .no-video {
-    margin-top: 50px;
-    text-align: center;
-  }
-}
-pagination {
-  display: block;
-  text-align: center;
-}
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.ts b/client/src/app/videos/video-list/shared/abstract-video-list.ts
deleted file mode 100644
index 87d5bc48a..000000000
--- a/client/src/app/videos/video-list/shared/abstract-video-list.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { OnDestroy, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { Subscription } from 'rxjs/Subscription'
-import { BehaviorSubject } from 'rxjs/BehaviorSubject'
-import { Observable } from 'rxjs/Observable'
-import { NotificationsService } from 'angular2-notifications'
-import {
-  SortField,
-  Video,
-  VideoPagination
-} from '../../shared'
-export abstract class AbstractVideoList implements OnInit, OnDestroy {
-  loading: BehaviorSubject<boolean> = new BehaviorSubject(false)
-  pagination: VideoPagination = {
-    currentPage: 1,
-    itemsPerPage: 25,
-    totalItems: null
-  }
-  sort: SortField
-  videos: Video[] = []
-  protected notificationsService: NotificationsService
-  protected router: Router
-  protected route: ActivatedRoute
-  protected subActivatedRoute: Subscription
-  abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}>
-  ngOnInit () {
-    // Subscribe to route changes
-    this.subActivatedRoute = this.route.params.subscribe(routeParams => {
-      this.loadRouteParams(routeParams)
-      this.getVideos()
-    })
-  }
-  ngOnDestroy () {
-    this.subActivatedRoute.unsubscribe()
-  }
-  getVideos () {
-    this.loading.next(true)
-    this.videos = []
-    const observable = this.getVideosObservable()
-    observable.subscribe(
-      ({ videos, totalVideos }) => {
-        this.videos = videos
-        this.pagination.totalItems = totalVideos
-        this.loading.next(false)
-      },
-      error => this.notificationsService.error('Error', error.text)
-    )
-  }
-  isThereNoVideo () {
-    return !this.loading.getValue() && this.videos.length === 0
-  }
-  onPageChanged (event: { page: number }) {
-    // Be sure the current page is set
-    this.pagination.currentPage = event.page
-    this.navigateToNewParams()
-  }
-  onSort (sort: SortField) {
-    this.sort = sort
-    this.navigateToNewParams()
-  }
-  protected buildRouteParams () {
-    // There is always a sort and a current page
-    const params = {
-      sort: this.sort,
-      page: this.pagination.currentPage
-    }
-    return params
-  }
-  protected loadRouteParams (routeParams: { [ key: string ]: any }) {
-    this.sort = routeParams['sort'] as SortField || '-createdAt'
-    if (routeParams['page'] !== undefined) {
-      this.pagination.currentPage = parseInt(routeParams['page'], 10)
-    } else {
-      this.pagination.currentPage = 1
-    }
-  }
-  protected navigateToNewParams () {
-    const routeParams = this.buildRouteParams()
-    this.router.navigate([ '/videos/list', routeParams ])
-  }
-}
diff --git a/client/src/app/videos/video-list/shared/index.ts b/client/src/app/videos/video-list/shared/index.ts
deleted file mode 100644
index d8f73bcda..000000000
--- a/client/src/app/videos/video-list/shared/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './abstract-video-list'
-export * from './video-miniature.component'
-export * from './video-sort.component'
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.html b/client/src/app/videos/video-list/shared/video-miniature.component.html
deleted file mode 100644
index 6bbd29666..000000000
--- a/client/src/app/videos/video-list/shared/video-miniature.component.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<div class="video-miniature">
-  <a
-    [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.description"
-    class="video-miniature-thumbnail"
-  >
-    <img [attr.src]="video.thumbnailUrl" alt="video thumbnail" [ngClass]="{ 'blur-filter': isVideoNSFWForThisUser() }" />
-    <div class="video-miniature-thumbnail-overlay">
-      <span class="video-miniature-thumbnail-overlay-views">{{ video.views }} views</span>
-      <span class="video-miniature-thumbnail-overlay-duration">{{ video.durationLabel }}</span>
-    </div>
-  </a>
-  <div class="video-miniature-information">
-    <span class="video-miniature-name">
-      <a
-        class="video-miniature-name"
-        [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoNSFWForThisUser() }"
-      >
-          {{ video.name }}
-      </a>
-    </span>
-    <div class="video-miniature-tags">
-      <span *ngFor="let tag of video.tags" class="video-miniature-tag">
-        <a [routerLink]="['/videos/list', { field: 'tags', search: tag, sort: currentSort }]" class="label label-primary">{{ tag }}</a>
-      </span>
-    </div>
-    <a [routerLink]="['/videos/list', { field: 'account', search: video.account, sort: currentSort }]" class="video-miniature-account">{{ video.by }}</a>
-    <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
-  </div>
-</div>
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.scss b/client/src/app/videos/video-list/shared/video-miniature.component.scss
deleted file mode 100644
index 507ace098..000000000
--- a/client/src/app/videos/video-list/shared/video-miniature.component.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-.video-miniature {
-  margin: 15px 10px;
-  display: inline-block;
-  position: relative;
-  height: 190px;
-  vertical-align: top;
-  .video-miniature-thumbnail {
-    display: inline-block;
-    position: relative;
-    border-radius: 3px;
-    overflow: hidden;
-    &:hover {
-      text-decoration: none !important;
-    }
-    img.blur-filter {
-      filter: blur(5px);
-      transform : scale(1.03);
-    }
-    .video-miniature-thumbnail-overlay {
-      position: absolute;
-      right: 0px;
-      bottom: 0px;
-      display: inline-block;
-      background-color: rgba(0, 0, 0, 0.7);
-      color: #fff;
-      padding: 3px 5px;
-      font-size: 11px;
-      font-weight: bold;
-      width: 100%;
-      .video-miniature-thumbnail-overlay-views {
-      }
-      .video-miniature-thumbnail-overlay-duration {
-        float: right;
-      }
-    }
-  }
-  .video-miniature-information {
-    width: 200px;
-    .video-miniature-name {
-      height: 23px;
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-weight: bold;
-      transition: color 0.2s;
-      font-size: 15px;
-      &:hover {
-        text-decoration: none;
-      }
-      &.blur-filter {
-        filter: blur(3px);
-        padding-left: 4px;
-      }
-      .video-miniature-tags {
-        // Fix for chrome when tags are long
-        width: 201px;
-        .video-miniature-tag {
-          font-size: 13px;
-          cursor: pointer;
-          position: relative;
-          top: -2px;
-          .label {
-            transition: background-color 0.2s;
-          }
-        }
-      }
-    }
-    .video-miniature-account, .video-miniature-created-at {
-      display: block;
-      margin-left: 1px;
-      font-size: 11px;
-      color: $video-miniature-other-infos;
-      opacity: 0.9;
-    }
-    .video-miniature-account {
-      transition: color 0.2s;
-      &:hover {
-        color: #23527c;
-        text-decoration: none;
-      }
-    }
-  }
-}
diff --git a/client/src/app/videos/video-list/shared/video-sort.component.html b/client/src/app/videos/video-list/shared/video-sort.component.html
deleted file mode 100644
index 3bece0b22..000000000
--- a/client/src/app/videos/video-list/shared/video-sort.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<select class="form-control input-sm" [(ngModel)]="currentSort" (ngModelChange)="onSortChange()">
-  <option *ngFor="let choice of choiceKeys" [value]="choice">
-    {{ getStringChoice(choice) }}
-  </option>
-</select>
diff --git a/client/src/app/videos/video-list/shared/video-sort.component.ts b/client/src/app/videos/video-list/shared/video-sort.component.ts
deleted file mode 100644
index 8aa89d32b..000000000
--- a/client/src/app/videos/video-list/shared/video-sort.component.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
-import { SortField } from '../../shared'
-@Component({
-  selector: 'my-video-sort',
-  templateUrl: './video-sort.component.html'
-})
-export class VideoSortComponent {
-  @Output() sort = new EventEmitter<any>()
-  @Input() currentSort: SortField
-  sortChoices: { [ P in SortField ]: string } = {
-    'name': 'Name - Asc',
-    '-name': 'Name - Desc',
-    'duration': 'Duration - Asc',
-    '-duration': 'Duration - Desc',
-    'createdAt': 'Created Date - Asc',
-    '-createdAt': 'Created Date - Desc',
-    'views': 'Views - Asc',
-    '-views': 'Views - Desc',
-    'likes': 'Likes - Asc',
-    '-likes': 'Likes - Desc'
-  }
-  get choiceKeys () {
-    return Object.keys(this.sortChoices)
-  }
-  getStringChoice (choiceKey: SortField) {
-    return this.sortChoices[choiceKey]
-  }
-  onSortChange () {
-    this.sort.emit(this.currentSort)
-  }
-}
diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts
deleted file mode 100644
index 784162679..000000000
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { Subscription } from 'rxjs/Subscription'
-import { NotificationsService } from 'angular2-notifications'
-import { VideoService } from '../shared'
-import { Search, SearchField, SearchService } from '../../shared'
-import { AbstractVideoList } from './shared'
-@Component({
-  selector: 'my-videos-list',
-  styleUrls: [ './shared/abstract-video-list.scss' ],
-  templateUrl: './shared/abstract-video-list.html'
-})
-export class VideoListComponent extends AbstractVideoList implements OnInit, OnDestroy {
-  private search: Search
-  private subSearch: Subscription
-  constructor (
-    protected router: Router,
-    protected route: ActivatedRoute,
-    protected notificationsService: NotificationsService,
-    private videoService: VideoService,
-    private searchService: SearchService
-  ) {
-    super()
-  }
-  ngOnInit () {
-    // Subscribe to route changes
-    this.subActivatedRoute = this.route.params.subscribe(routeParams => {
-      this.loadRouteParams(routeParams)
-      // Update the search service component
-      this.searchService.updateSearch.next(this.search)
-      this.getVideos()
-    })
-    // Subscribe to search changes
-    this.subSearch = this.searchService.searchUpdated.subscribe(search => {
-      this.search = search
-      // Reset pagination
-      this.pagination.currentPage = 1
-      this.navigateToNewParams()
-    })
-  }
-  ngOnDestroy () {
-    super.ngOnDestroy()
-    this.subSearch.unsubscribe()
-  }
-  getVideosObservable () {
-    let observable = null
-    if (this.search.value) {
-      observable = this.videoService.searchVideos(this.search, this.pagination, this.sort)
-    } else {
-      observable = this.videoService.getVideos(this.pagination, this.sort)
-    }
-    return observable
-  }
-  protected buildRouteParams () {
-    const params = super.buildRouteParams()
-    // Maybe there is a search
-    if (this.search.value) {
-      params['field'] = this.search.field
-      params['search'] = this.search.value
-    }
-    return params
-  }
-  protected loadRouteParams (routeParams: { [ key: string ]: any }) {
-    super.loadRouteParams(routeParams)
-    if (routeParams['search'] !== undefined) {
-      this.search = {
-        value: routeParams['search'],
-        field: routeParams['field'] as SearchField
-      }
-    } else {
-      this.search = {
-        value: '',
-        field: 'name'
-      }
-    }
-  }
-}
diff --git a/client/src/app/videos/video-list/video-recently-added.component.ts b/client/src/app/videos/video-list/video-recently-added.component.ts
new file mode 100644
index 000000000..6168fac95
--- /dev/null
+++ b/client/src/app/videos/video-list/video-recently-added.component.ts
@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { NotificationsService } from 'angular2-notifications'
+import { AbstractVideoList } from '../../shared/video/abstract-video-list'
+import { SortField } from '../../shared/video/sort-field.type'
+import { VideoService } from '../../shared/video/video.service'
+@Component({
+  selector: 'my-videos-recently-added',
+  styleUrls: [ '../../shared/video/abstract-video-list.scss' ],
+  templateUrl: '../../shared/video/abstract-video-list.html'
+})
+export class VideoRecentlyAddedComponent extends AbstractVideoList implements OnInit {
+  titlePage = 'Recently added'
+  currentRoute = '/videos/recently-added'
+  sort: SortField = '-createdAt'
+  constructor (protected router: Router,
+               protected route: ActivatedRoute,
+               protected notificationsService: NotificationsService,
+               private videoService: VideoService) {
+    super()
+  }
+  ngOnInit () {
+    super.ngOnInit()
+  }
+  getVideosObservable () {
+    return this.videoService.getVideos(this.pagination, this.sort)
+  }
+}
diff --git a/client/src/app/videos/video-list/video-search.component.ts b/client/src/app/videos/video-list/video-search.component.ts
new file mode 100644
index 000000000..ba851d27e
--- /dev/null
+++ b/client/src/app/videos/video-list/video-search.component.ts
@@ -0,0 +1,51 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { NotificationsService } from 'angular2-notifications'
+import { AbstractVideoList } from 'app/shared/video/abstract-video-list'
+import { Subscription } from 'rxjs/Subscription'
+import { SortField } from '../../shared/video/sort-field.type'
+import { VideoService } from '../../shared/video/video.service'
+@Component({
+  selector: 'my-videos-search',
+  styleUrls: [ '../../shared/video/abstract-video-list.scss' ],
+  templateUrl: '../../shared/video/abstract-video-list.html'
+})
+export class VideoSearchComponent extends AbstractVideoList implements OnInit, OnDestroy {
+  titlePage = 'Search'
+  currentRoute = '/videos/search'
+  loadOnInit = false
+  private search = ''
+  private subActivatedRoute: Subscription
+  constructor (protected router: Router,
+               protected route: ActivatedRoute,
+               protected notificationsService: NotificationsService,
+               private videoService: VideoService) {
+    super()
+  }
+  ngOnInit () {
+    super.ngOnInit()
+    this.subActivatedRoute = this.route.queryParams.subscribe(
+      queryParams => {
+        this.search = queryParams['search']
+        this.reloadVideos()
+      },
+      err => this.notificationsService.error('Error', err.text)
+    )
+  }
+  ngOnDestroy () {
+    if (this.subActivatedRoute) {
+      this.subActivatedRoute.unsubscribe()
+    }
+  }
+  getVideosObservable () {
+    return this.videoService.searchVideos(this.search, this.pagination, this.sort)
+  }
+}
diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts
new file mode 100644
index 000000000..e80fd7f2c
--- /dev/null
+++ b/client/src/app/videos/video-list/video-trending.component.ts
@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { NotificationsService } from 'angular2-notifications'
+import { AbstractVideoList } from 'app/shared/video/abstract-video-list'
+import { SortField } from '../../shared/video/sort-field.type'
+import { VideoService } from '../../shared/video/video.service'
+@Component({
+  selector: 'my-videos-trending',
+  styleUrls: [ '../../shared/video/abstract-video-list.scss' ],
+  templateUrl: '../../shared/video/abstract-video-list.html'
+})
+export class VideoTrendingComponent extends AbstractVideoList implements OnInit {
+  titlePage = 'Trending'
+  currentRoute = '/videos/trending'
+  defaultSort: SortField = '-views'
+  constructor (protected router: Router,
+               protected route: ActivatedRoute,
+               protected notificationsService: NotificationsService,
+               private videoService: VideoService) {
+    super()
+  }
+  ngOnInit () {
+    super.ngOnInit()
+  }
+  getVideosObservable () {
+    return this.videoService.getVideos(this.pagination, this.sort)
+  }
+}
diff --git a/client/src/app/videos/videos-routing.module.ts b/client/src/app/videos/videos-routing.module.ts
index 3ca3e5486..6910421b7 100644
--- a/client/src/app/videos/videos-routing.module.ts
+++ b/client/src/app/videos/videos-routing.module.ts
@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { MetaGuard } from '@ngx-meta/core'
+import { VideoSearchComponent } from './video-list'
-import { VideoListComponent, MyVideosComponent } from './video-list'
+import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
+import { VideoTrendingComponent } from './video-list/video-trending.component'
 import { VideosComponent } from './videos.component'
 const videosRoutes: Routes = [
@@ -13,20 +13,34 @@ const videosRoutes: Routes = [
    canActivateChild: [ MetaGuard ],
    children: [
      {
-        path: 'mine',
+        path: 'list',
-        component: MyVideosComponent,
+        pathMatch: 'full',
+        redirectTo: 'recently-added'
+      },
+      {
+        path: 'trending',
+        component: VideoTrendingComponent,
        data: {
          meta: {
-            title: 'My videos'
+            title: 'Trending videos'
          }
        }
      },
      {
-        path: 'list',
+        path: 'recently-added',
-        component: VideoListComponent,
+        component: VideoRecentlyAddedComponent,
+        data: {
+          meta: {
+            title: 'Recently added videos'
+          }
+        }
+      },
+      {
+        path: 'search',
+        component: VideoSearchComponent,
        data: {
          meta: {
-            title: 'Videos list'
+            title: 'Search videos'
          }
        }
      },
@@ -50,6 +64,7 @@ const videosRoutes: Routes = [
      },
      {
        path: ':uuid',
+        pathMatch: 'full',
        redirectTo: 'watch/:uuid'
      },
      {
diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts
index 4f3054c3a..4b14d1da8 100644
--- a/client/src/app/videos/videos.module.ts
+++ b/client/src/app/videos/videos.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core'
 import { SharedModule } from '../shared'
-import { VideoService } from './shared'
+import { VideoSearchComponent } from './video-list'
-import { MyVideosComponent, VideoListComponent, VideoMiniatureComponent, VideoSortComponent } from './video-list'
+import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
+import { VideoTrendingComponent } from './video-list/video-trending.component'
 import { VideosRoutingModule } from './videos-routing.module'
 import { VideosComponent } from './videos.component'
@@ -14,18 +15,15 @@ import { VideosComponent } from './videos.component'
  declarations: [
    VideosComponent,
-    VideoListComponent,
+    VideoTrendingComponent,
-    MyVideosComponent,
+    VideoRecentlyAddedComponent,
-    VideoMiniatureComponent,
+    VideoSearchComponent
-    VideoSortComponent
  ],
  exports: [
    VideosComponent
  ],
-  providers: [
+  providers: []
-    VideoService
-  ]
 })
 export class VideosModule { }
diff --git a/client/src/assets/favicon.png b/client/src/assets/favicon.png
deleted file mode 100644
index bb57ee6b0..000000000
--- a/client/src/assets/favicon.png
+++ /dev/null
Binary files differ
diff --git a/client/src/assets/images/admin/add.svg b/client/src/assets/images/admin/add.svg
new file mode 100644
index 000000000..42b269c43
--- /dev/null
+++ b/client/src/assets/images/admin/add.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -115.000000)">
+            <g id="2" transform="translate(92.000000, 115.000000)">
+                <circle id="Oval-1" stroke="#ffffff" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                <rect id="Rectangle-1" fill="#ffffff" x="11" y="7" width="2" height="10" rx="1"></rect>
+                <rect id="Rectangle-1" fill="#ffffff" x="7" y="11" width="10" height="2" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/default-avatar.png b/client/src/assets/images/default-avatar.png
new file mode 100644
index 000000000..4b7fd2c0a
--- /dev/null
+++ b/client/src/assets/images/default-avatar.png
Binary files differ
diff --git a/client/src/assets/images/favicon.png b/client/src/assets/images/favicon.png
new file mode 100644
index 000000000..2e589cf6c
--- /dev/null
+++ b/client/src/assets/images/favicon.png
Binary files differ
diff --git a/client/src/assets/images/global/delete-grey.svg b/client/src/assets/images/global/delete-grey.svg
new file mode 100644
index 000000000..67e9e2ce7
--- /dev/null
+++ b/client/src/assets/images/global/delete-grey.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -159.000000)">
+            <g id="25" transform="translate(224.000000, 159.000000)">
+                <path d="M5,7 L5,20.0081158 C5,21.1082031 5.89706013,22 7.00585866,22 L16.9941413,22 C18.1019465,22 19,21.1066027 19,20.0081158 L19,7" id="Path-296" stroke="#585858" stroke-width="2"></path>
+                <rect id="Rectangle-424" fill="#585858" x="2" y="4" width="20" height="2" rx="1"></rect>
+                <path d="M9,10.9970301 C9,10.4463856 9.44386482,10 10,10 C10.5522847,10 11,10.4530363 11,10.9970301 L11,17.0029699 C11,17.5536144 10.5561352,18 10,18 C9.44771525,18 9,17.5469637 9,17.0029699 L9,10.9970301 Z M13,10.9970301 C13,10.4463856 13.4438648,10 14,10 C14.5522847,10 15,10.4530363 15,10.9970301 L15,17.0029699 C15,17.5536144 14.5561352,18 14,18 C13.4477153,18 13,17.5469637 13,17.0029699 L13,10.9970301 Z" id="Combined-Shape" fill="#585858"></path>
+                <path d="M9,5 L9,2.99895656 C9,2.44724809 9.45097518,2 9.99077797,2 L14.009222,2 C14.5564136,2 15,2.44266033 15,2.99895656 L15,5" id="Path-33" stroke="#585858" stroke-width="2" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/global/delete-white.svg b/client/src/assets/images/global/delete-white.svg
new file mode 100644
index 000000000..9c52de557
--- /dev/null
+++ b/client/src/assets/images/global/delete-white.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-224.000000, -159.000000)">
+            <g id="25" transform="translate(224.000000, 159.000000)">
+                <path d="M5,7 L5,20.0081158 C5,21.1082031 5.89706013,22 7.00585866,22 L16.9941413,22 C18.1019465,22 19,21.1066027 19,20.0081158 L19,7" id="Path-296" stroke="#ffffff" stroke-width="2"></path>
+                <rect id="Rectangle-424" fill="#ffffff" x="2" y="4" width="20" height="2" rx="1"></rect>
+                <path d="M9,10.9970301 C9,10.4463856 9.44386482,10 10,10 C10.5522847,10 11,10.4530363 11,10.9970301 L11,17.0029699 C11,17.5536144 10.5561352,18 10,18 C9.44771525,18 9,17.5469637 9,17.0029699 L9,10.9970301 Z M13,10.9970301 C13,10.4463856 13.4438648,10 14,10 C14.5522847,10 15,10.4530363 15,10.9970301 L15,17.0029699 C15,17.5536144 14.5561352,18 14,18 C13.4477153,18 13,17.5469637 13,17.0029699 L13,10.9970301 Z" id="Combined-Shape" fill="#ffffff"></path>
+                <path d="M9,5 L9,2.99895656 C9,2.44724809 9.45097518,2 9.99077797,2 L14.009222,2 C14.5564136,2 15,2.44266033 15,2.99895656 L15,5" id="Path-33" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/global/edit.svg b/client/src/assets/images/global/edit.svg
new file mode 100644
index 000000000..23ece68f1
--- /dev/null
+++ b/client/src/assets/images/global/edit.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>edit</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -203.000000)" stroke="#585858" stroke-width="2">
+            <g id="41" transform="translate(48.000000, 203.000000)">
+                <path d="M3,21.0000003 L3,17 L15.8898356,4.11016442 C17.0598483,2.9401517 18.9638992,2.94723715 20.1306896,4.11402752 L19.9181432,3.90148112 C21.0902894,5.07362738 21.0882407,6.97202708 19.9174652,8.1377941 L7,21.0000003 L3,21.0000003 Z" id="Path-74" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M14.5,5.5 L18.5,9.5" id="Path-75"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/global/validate.svg b/client/src/assets/images/global/validate.svg
new file mode 100644
index 000000000..5c7ee9d14
--- /dev/null
+++ b/client/src/assets/images/global/validate.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -1134.000000)" stroke="#ffffff" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="yes" transform="translate(352.000000, 88.000000)">
+                    <circle id="Oval-1" cx="12" cy="12" r="10"></circle>
+                    <polyline id="Path-288" stroke-linecap="round" stroke-linejoin="round" points="8.5 12.5 10.5 14.5 15.5 9.5"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/header/menu.svg b/client/src/assets/images/header/menu.svg
new file mode 100644
index 000000000..7101bf73b
--- /dev/null
+++ b/client/src/assets/images/header/menu.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>menu</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -203.000000)" stroke="#333333">
+            <g id="44" transform="translate(180.000000, 203.000000)">
+                <path d="M3.5,7 C3.5,6.72319836 3.72175357,6.5 3.99339768,6.5 L20.0066023,6.5 C20.2799786,6.5 20.5,6.72089465 20.5,7 C20.5,7.27680164 20.2782464,7.5 20.0066023,7.5 L3.99339768,7.5 C3.72002141,7.5 3.5,7.27910535 3.5,7 Z M3.5,12 C3.5,11.7231984 3.72175357,11.5 3.99339768,11.5 L20.0066023,11.5 C20.2799786,11.5 20.5,11.7208946 20.5,12 C20.5,12.2768016 20.2782464,12.5 20.0066023,12.5 L3.99339768,12.5 C3.72002141,12.5 3.5,12.2791054 3.5,12 Z M3.5,17 C3.5,16.7231984 3.72175357,16.5 3.99339768,16.5 L20.0066023,16.5 C20.2799786,16.5 20.5,16.7208946 20.5,17 C20.5,17.2768016 20.2782464,17.5 20.0066023,17.5 L3.99339768,17.5 C3.72002141,17.5 3.5,17.2791054 3.5,17 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
+\ No newline at end of file
diff --git a/client/src/assets/images/header/search.svg b/client/src/assets/images/header/search.svg
new file mode 100644
index 000000000..489b59e9b
--- /dev/null
+++ b/client/src/assets/images/header/search.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -115.000000)" stroke="#000" stroke-width="2">
+            <g id="3" transform="translate(136.000000, 115.000000)">
+                <circle id="Oval-3" cx="10" cy="10" r="7"></circle>
+                <path d="M15,15 L21,21" id="Path-3" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/header/upload.svg b/client/src/assets/images/header/upload.svg
new file mode 100644
index 000000000..2b07caf76
--- /dev/null
+++ b/client/src/assets/images/header/upload.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>cloud-upload</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-312.000000, -775.000000)" stroke="#fff" stroke-width="2">
+            <g id="307" transform="translate(312.000000, 775.000000)">
+                <path d="M8,18 L5,18 L5,18 C2.790861,18 1,16.209139 1,14 C1,11.790861 2.790861,10 5,10 C5.35840468,10 5.70579988,10.0471371 6.03632437,10.1355501 C6.01233106,9.92702603 6,9.71495305 6,9.5 C6,6.46243388 8.46243388,4 11.5,4 C14.0673313,4 16.2238156,5.7590449 16.8299648,8.1376465 C17.2052921,8.04765874 17.5970804,8 18,8 C20.7614237,8 23,10.2385763 23,13 C23,15.7614237 20.7614237,18 18,18 L16,18" id="Combined-Shape" stroke-linejoin="round"></path>
+                <path d="M12,13 L12,21" id="Path-58"></path>
+                <polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 12.500000) scale(1, -1) translate(-12.000000, -12.500000) " points="15 11 12 14 9 11"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/logo.svg b/client/src/assets/images/logo.svg
new file mode 100644
index 000000000..8777acd5b
--- /dev/null
+++ b/client/src/assets/images/logo.svg
@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="2799 -911 16 22"
+   version="1.1"
+   id="svg13"
+   sodipodi:docname="logo.svg"
+   width="16"
+   height="22"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06">
+  <metadata
+     id="metadata17">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1916"
+     inkscape:window-height="1040"
+     id="namedview15"
+     showgrid="false"
+     inkscape:zoom="29.790476"
+     inkscape:cx="-1.1827326"
+     inkscape:cy="12.088"
+     inkscape:window-x="0"
+     inkscape:window-y="18"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg13" />
+  <defs
+     id="defs4">
+    <style
+       id="style2">
+      .cls-3 {
+        fill: #211f20;
+      }
+      .cls-4 {
+        fill: #737373;
+      }
+      .cls-5 {
+        fill: #f1680d;
+      }
+      .cls-6 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g
+     id="Artboard_1"
+     data-name="Artboard – 1"
+     class="cls-1"
+     transform="translate(0.03356777,-1.9929667)">
+    <g
+       id="Symbol_3_1"
+       data-name="Symbol 3 – 1"
+       transform="translate(2759,-975)">
+      <g
+         id="Group_44"
+         data-name="Group 44"
+         transform="translate(0,2.333)">
+        <path
+           id="Path_4"
+           data-name="Path 4"
+           class="cls-3"
+           d="m -949,-500 v 10.667 l 8,-5.333"
+           transform="translate(989,564)"
+           inkscape:connector-curvature="0"
+           style="fill:#211f20" />
+        <path
+           id="Path_5"
+           data-name="Path 5"
+           class="cls-4"
+           d="m -949,-500 v 10.667 l 8,-5.333"
+           transform="translate(989,574.667)"
+           inkscape:connector-curvature="0"
+           style="fill:#737373" />
+        <path
+           id="Path_6"
+           data-name="Path 6"
+           class="cls-5"
+           d="m -949,-500 v 10.667 l 8,-5.333"
+           transform="translate(997,569.333)"
+           inkscape:connector-curvature="0"
+           style="fill:#f1680d" />
+        <path
+           id="Path_7"
+           data-name="Path 7"
+           class="cls-6"
+           d="M 0,0 V 10.667 L 8,5.333 Z"
+           transform="rotate(180,24,40)"
+           inkscape:connector-curvature="0"
+           style="fill:#ffffff" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/client/src/assets/images/menu/administration.svg b/client/src/assets/images/menu/administration.svg
new file mode 100644
index 000000000..b6da837d2
--- /dev/null
+++ b/client/src/assets/images/menu/administration.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>filter</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -247.000000)" fill="#808080">
+            <g id="70" transform="translate(444.000000, 247.000000)">
+                <path d="M8.82929429,17 L20.0066023,17 C20.5552407,17 21,17.4438648 21,18 C21,18.5522847 20.5550537,19 20.0066023,19 L8.82929429,19 C8.41745788,20.1651924 7.30621883,21 6,21 C4.34314575,21 3,19.6568542 3,18 C3,16.3431458 4.34314575,15 6,15 C7.30621883,15 8.41745788,15.8348076 8.82929429,17 Z M9.17070571,13 L3.99339768,13 C3.44475929,13 3,12.5561352 3,12 C3,11.4477153 3.44494629,11 3.99339768,11 L9.17070571,11 C9.58254212,9.83480763 10.6937812,9 12,9 C13.3062188,9 14.4174579,9.83480763 14.8292943,11 L20.0066023,11 C20.5552407,11 21,11.4438648 21,12 C21,12.5522847 20.5550537,13 20.0066023,13 L14.8292943,13 C14.4174579,14.1651924 13.3062188,15 12,15 C10.6937812,15 9.58254212,14.1651924 9.17070571,13 Z M15.1659641,6.98648118 C15.1124525,6.99537358 15.05751,7 15.0014977,7 L3.99850233,7 C3.44704472,7 3,6.55613518 3,6 C3,5.44771525 3.44748943,5 3.99850233,5 L15.0014977,5 C15.0575314,5 15.1124871,5.00458274 15.1660053,5.01340035 C15.5740343,3.84121344 16.6887792,3 18,3 C19.6568542,3 21,4.34314575 21,6 C21,7.65685425 19.6568542,9 18,9 C16.688735,9 15.5739592,8.15872988 15.1659641,6.98648118 Z M18,7 C18.5522847,7 19,6.55228475 19,6 C19,5.44771525 18.5522847,5 18,5 C17.4477153,5 17,5.44771525 17,6 C17,6.55228475 17.4477153,7 18,7 Z M12,13 C12.5522847,13 13,12.5522847 13,12 C13,11.4477153 12.5522847,11 12,11 C11.4477153,11 11,11.4477153 11,12 C11,12.5522847 11.4477153,13 12,13 Z M6,19 C6.55228475,19 7,18.5522847 7,18 C7,17.4477153 6.55228475,17 6,17 C5.44771525,17 5,17.4477153 5,18 C5,18.5522847 5.44771525,19 6,19 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/menu/recently-added.svg b/client/src/assets/images/menu/recently-added.svg
new file mode 100644
index 000000000..6473837f8
--- /dev/null
+++ b/client/src/assets/images/menu/recently-added.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-92.000000, -115.000000)">
+            <g id="2" transform="translate(92.000000, 115.000000)">
+                <circle id="Oval-1" stroke="#808080" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                <rect id="Rectangle-1" fill="#808080" x="11" y="7" width="2" height="10" rx="1"></rect>
+                <rect id="Rectangle-1" fill="#808080" x="7" y="11" width="10" height="2" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/menu/trending.svg b/client/src/assets/images/menu/trending.svg
new file mode 100644
index 000000000..ffc65cc04
--- /dev/null
+++ b/client/src/assets/images/menu/trending.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>graph</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-444.000000, -203.000000)" stroke-width="2" stroke="#808080">
+            <g id="50" transform="translate(444.000000, 203.000000)">
+                <polyline id="Path-96" points="3 3 3 21.006249 21.0246733 21.006249"></polyline>
+                <polyline id="Path-101" points="6 18 11 12 14 13 19 7"></polyline>
+                <polygon id="Path-102" points="20 9 20 6 17 6"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/video/alert.svg b/client/src/assets/images/video/alert.svg
new file mode 100644
index 000000000..6d3af029f
--- /dev/null
+++ b/client/src/assets/images/video/alert.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>alert</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -467.000000)">
+            <g id="161" transform="translate(48.000000, 467.000000)">
+                <path d="M12.8715755,3.50973876 L12,1.96027114 L11.1284245,3.50973876 L2.12842446,19.5097388 L1.29015252,21 L3,21 L21,21 L22.7098475,21 L21.8715755,19.5097388 L12.8715755,3.50973876 Z" id="Triangle-2" stroke="#585858" stroke-width="2" stroke-linejoin="round"></path>
+                <path d="M12,17.75 C12.6903559,17.75 13.25,17.1903559 13.25,16.5 C13.25,15.8096441 12.6903559,15.25 12,15.25 C11.3096441,15.25 10.75,15.8096441 10.75,16.5 C10.75,17.1903559 11.3096441,17.75 12,17.75 Z" id="Oval-8" fill="#585858"></path>
+                <rect id="Rectangle-3" fill="#585858" x="11" y="9" width="2" height="5" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/video/dislike-grey.svg b/client/src/assets/images/video/dislike-grey.svg
new file mode 100644
index 000000000..56a7908fb
--- /dev/null
+++ b/client/src/assets/images/video/dislike-grey.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-752.000000, -1090.000000)" stroke="#585858" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="thumbs-down" transform="translate(704.000000, 44.000000)">
+                    <path d="M6,16 C6,18.5 6.5,21 8,21 L16.9938335,21 C17.5495239,21 18.1819788,20.5956028 18.4072817,20.0949295 L20.8562951,14.6526776 C21.7640882,12.6353595 20.7154925,11 18.5092545,11 L15.5,11 C15.5,11 18.5,5 15,5 C12.5,5 11.5,11 8,11 C6.5,11 6,13.5 6,16 Z" id="Path-188" stroke-linejoin="round" transform="translate(13.591488, 13.000000) scale(1, -1) translate(-13.591488, -13.000000) "></path>
+                    <path d="M4,4.5 C4,4.5 3,7 3,10 C3,13 4,15.5 4,15.5" id="Path-189" transform="translate(3.500000, 10.000000) scale(1, -1) translate(-3.500000, -10.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/video/dislike-white.svg b/client/src/assets/images/video/dislike-white.svg
new file mode 100644
index 000000000..cfc6eaa1f
--- /dev/null
+++ b/client/src/assets/images/video/dislike-white.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-752.000000, -1090.000000)" stroke="#ffffff" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="thumbs-down" transform="translate(704.000000, 44.000000)">
+                    <path d="M6,16 C6,18.5 6.5,21 8,21 L16.9938335,21 C17.5495239,21 18.1819788,20.5956028 18.4072817,20.0949295 L20.8562951,14.6526776 C21.7640882,12.6353595 20.7154925,11 18.5092545,11 L15.5,11 C15.5,11 18.5,5 15,5 C12.5,5 11.5,11 8,11 C6.5,11 6,13.5 6,16 Z" id="Path-188" stroke-linejoin="round" transform="translate(13.591488, 13.000000) scale(1, -1) translate(-13.591488, -13.000000) "></path>
+                    <path d="M4,4.5 C4,4.5 3,7 3,10 C3,13 4,15.5 4,15.5" id="Path-189" transform="translate(3.500000, 10.000000) scale(1, -1) translate(-3.500000, -10.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/video/download-grey.svg b/client/src/assets/images/video/download-grey.svg
new file mode 100644
index 000000000..5b0cca5ef
--- /dev/null
+++ b/client/src/assets/images/video/download-grey.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>download</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-180.000000, -291.000000)" stroke="#585858" stroke-width="2">
+            <g id="84" transform="translate(180.000000, 291.000000)">
+                <path d="M12,3 L12,15" id="Path-58"></path>
+                <polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 14.000000) rotate(-270.000000) translate(-12.000000, -14.000000) " points="9 8 15 14 9 20"></polyline>
+                <path d="M3,18 L3,20.0590859 C3,20.6127331 3.44494889,21.0615528 3.99340349,21.0615528 L20.0067018,21.0615528 C20.5553434,21.0615528 21.0001052,20.6098102 21.0001051,20.0590859 L21.0001049,18" id="Path-12" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/video/download-white.svg b/client/src/assets/images/video/download-white.svg
new file mode 100644
index 000000000..0e66e06e8
--- /dev/null
+++ b/client/src/assets/images/video/download-white.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>download</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-180.000000, -291.000000)" stroke="#ffffff" stroke-width="2">
+            <g id="84" transform="translate(180.000000, 291.000000)">
+                <path d="M12,3 L12,15" id="Path-58"></path>
+                <polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 14.000000) rotate(-270.000000) translate(-12.000000, -14.000000) " points="9 8 15 14 9 20"></polyline>
+                <path d="M3,18 L3,20.0590859 C3,20.6127331 3.44494889,21.0615528 3.99340349,21.0615528 L20.0067018,21.0615528 C20.5553434,21.0615528 21.0001052,20.6098102 21.0001051,20.0590859 L21.0001049,18" id="Path-12" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/video/eye-closed.svg b/client/src/assets/images/video/eye-closed.svg
new file mode 100644
index 000000000..c5b739659
--- /dev/null
+++ b/client/src/assets/images/video/eye-closed.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-796.000000, -1046.000000)" stroke="#585858" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="eye-closed" transform="translate(760.000000, 12.000000) scale(1, -1) translate(-760.000000, -12.000000) translate(748.000000, 0.000000)">
+                    <path d="M2,14 C2,14 5,7 12,7 C19,7 22,14 22,14" id="Path-80" stroke-linejoin="round"></path>
+                    <path d="M12,7 L12,5" id="Path-81"></path>
+                    <path d="M18,8.5 L19,7" id="Path-81"></path>
+                    <path d="M21,12 L22.5,11" id="Path-81"></path>
+                    <path d="M1.5,12 L3,11" id="Path-81" transform="translate(2.250000, 11.500000) scale(1, -1) translate(-2.250000, -11.500000) "></path>
+                    <path d="M5,8.5 L6,7" id="Path-81" transform="translate(5.500000, 7.750000) scale(-1, 1) translate(-5.500000, -7.750000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/video/like-grey.svg b/client/src/assets/images/video/like-grey.svg
new file mode 100644
index 000000000..5ef6c7b31
--- /dev/null
+++ b/client/src/assets/images/video/like-grey.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>thumbs-up</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-708.000000, -643.000000)" stroke="#585858" stroke-width="2">
+            <g id="256" transform="translate(708.000000, 643.000000)">
+                <path d="M6,14 C6,16.5 6.5,19 8,19 L16.9938335,19 C17.5495239,19 18.1819788,18.5956028 18.4072817,18.0949295 L20.8562951,12.6526776 C21.7640882,10.6353595 20.7154925,9 18.5092545,9 L15.5,9 C15.5,9 18.5,3 15,3 C12.5,3 11.5,9 8,9 C6.5,9 6,11.5 6,14 Z" id="Path-188" stroke-linejoin="round"></path>
+                <path d="M4,8.5 C4,8.5 3,11 3,14 C3,17 4,19.5 4,19.5" id="Path-189"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/video/like-white.svg b/client/src/assets/images/video/like-white.svg
new file mode 100644
index 000000000..88e5f6a9a
--- /dev/null
+++ b/client/src/assets/images/video/like-white.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>thumbs-up</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-708.000000, -643.000000)" stroke="#ffffff" stroke-width="2">
+            <g id="256" transform="translate(708.000000, 643.000000)">
+                <path d="M6,14 C6,16.5 6.5,19 8,19 L16.9938335,19 C17.5495239,19 18.1819788,18.5956028 18.4072817,18.0949295 L20.8562951,12.6526776 C21.7640882,10.6353595 20.7154925,9 18.5092545,9 L15.5,9 C15.5,9 18.5,3 15,3 C12.5,3 11.5,9 8,9 C6.5,9 6,11.5 6,14 Z" id="Path-188" stroke-linejoin="round"></path>
+                <path d="M4,8.5 C4,8.5 3,11 3,14 C3,17 4,19.5 4,19.5" id="Path-189"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/video/more.svg b/client/src/assets/images/video/more.svg
new file mode 100644
index 000000000..dea392136
--- /dev/null
+++ b/client/src/assets/images/video/more.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-444.000000, -115.000000)" fill="#585858">
+            <g id="10" transform="translate(444.000000, 115.000000)">
+                <path d="M10,12 C10,10.8954305 10.8877296,10 12,10 C13.1045695,10 14,10.8877296 14,12 C14,13.1045695 13.1122704,14 12,14 C10.8954305,14 10,13.1122704 10,12 Z M17,12 C17,10.8954305 17.8877296,10 19,10 C20.1045695,10 21,10.8877296 21,12 C21,13.1045695 20.1122704,14 19,14 C17.8954305,14 17,13.1122704 17,12 Z M3,12 C3,10.8954305 3.88772964,10 5,10 C6.1045695,10 7,10.8877296 7,12 C7,13.1045695 6.11227036,14 5,14 C3.8954305,14 3,13.1122704 3,12 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/video/share.svg b/client/src/assets/images/video/share.svg
new file mode 100644
index 000000000..da0f43e81
--- /dev/null
+++ b/client/src/assets/images/video/share.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>share</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-312.000000, -203.000000)" stroke="#585858" stroke-width="2">
+            <g id="47" transform="translate(312.000000, 203.000000)">
+                <path d="M20,15 L20,18.0026083 C20,19.1057373 19.1073772,20 18.0049107,20 L5.99508929,20 C4.8932319,20 4,19.1073772 4,18.0049107 L4,5.99508929 C4,4.8932319 4.89585781,4 5.9973917,4 L9,4" id="Rectangle-460"></path>
+                <polyline id="Path-93" stroke-linejoin="round" points="13 4 20.0207973 4 20.0207973 11.0191059"></polyline>
+                <path d="M19,5 L12,12" id="Path-94" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/video/upload.svg b/client/src/assets/images/video/upload.svg
new file mode 100644
index 000000000..c5b7cb443
--- /dev/null
+++ b/client/src/assets/images/video/upload.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>cloud-upload</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-312.000000, -775.000000)" stroke="#C6C6C6" stroke-width="2">
+            <g id="307" transform="translate(312.000000, 775.000000)">
+                <path d="M8,18 L5,18 L5,18 C2.790861,18 1,16.209139 1,14 C1,11.790861 2.790861,10 5,10 C5.35840468,10 5.70579988,10.0471371 6.03632437,10.1355501 C6.01233106,9.92702603 6,9.71495305 6,9.5 C6,6.46243388 8.46243388,4 11.5,4 C14.0673313,4 16.2238156,5.7590449 16.8299648,8.1376465 C17.2052921,8.04765874 17.5970804,8 18,8 C20.7614237,8 23,10.2385763 23,13 C23,15.7614237 20.7614237,18 18,18 L16,18" id="Combined-Shape" stroke-linejoin="round"></path>
+                <path d="M12,13 L12,21" id="Path-58"></path>
+                <polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 12.500000) scale(1, -1) translate(-12.000000, -12.500000) " points="15 11 12 14 9 11"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png
deleted file mode 100644
index c1d77a24c..000000000
--- a/client/src/assets/logo.png
+++ /dev/null
Binary files differ
diff --git a/client/src/assets/player/images/arrow-down.svg b/client/src/assets/player/images/arrow-down.svg
new file mode 100644
index 000000000..3377cdab2
--- /dev/null
+++ b/client/src/assets/player/images/arrow-down.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-532.000000, -1046.000000)" stroke="#fff" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="down" transform="translate(484.000000, 0.000000)">
+                    <path d="M12,3 L12,20" id="Path-58"></path>
+                    <polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 17.000000) scale(-1, -1) translate(-12.000000, -17.000000) " points="4 21 12 13 20 21"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/player/images/arrow-up.svg b/client/src/assets/player/images/arrow-up.svg
new file mode 100644
index 000000000..b1a7890a8
--- /dev/null
+++ b/client/src/assets/player/images/arrow-up.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-488.000000, -1046.000000)" stroke="#fff" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="up" transform="translate(440.000000, 0.000000)">
+                    <path d="M12,4 L12,21" id="Path-58"></path>
+                    <polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 7.000000) scale(-1, 1) translate(-12.000000, -7.000000) " points="4 11 12 3 20 11"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/player/images/fullscreen.svg b/client/src/assets/player/images/fullscreen.svg
new file mode 100644
index 000000000..44e0041a4
--- /dev/null
+++ b/client/src/assets/player/images/fullscreen.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>fullscreen</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -159.000000)" stroke="#fff" stroke-width="2">
+            <g id="33" transform="translate(576.000000, 159.000000)">
+                <rect id="Rectangle-433" x="1" y="4" width="22" height="16" rx="1"></rect>
+                <polyline id="Path-42" stroke-linecap="round" stroke-linejoin="round" points="20 10 20 7 17 7"></polyline>
+                <polyline id="Path-42" stroke-linecap="round" stroke-linejoin="round" points="7 17 4 17 4 14"></polyline>
+                <polyline id="Path-42" stroke-linecap="round" stroke-linejoin="round" transform="translate(18.500000, 15.500000) scale(1, -1) translate(-18.500000, -15.500000) " points="20 17 20 14 17 14"></polyline>
+                <polyline id="Path-42" stroke-linecap="round" stroke-linejoin="round" transform="translate(5.500000, 8.500000) scale(1, -1) translate(-5.500000, -8.500000) " points="7 10 4 10 4 7"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/player/images/volume-mute.svg b/client/src/assets/player/images/volume-mute.svg
new file mode 100644
index 000000000..0c7c296bc
--- /dev/null
+++ b/client/src/assets/player/images/volume-mute.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>volume-mute</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-92.000000, -159.000000)" stroke="#fff" stroke-width="2">
+            <g id="22" transform="translate(92.000000, 159.000000)">
+                <path d="M2,8.99703014 C2,8.4463856 2.44335318,8 3.0093689,8 L6,8 L12,4 L12,20 L6,16 L3.0093689,16 C2.45190985,16 2,15.5469637 2,15.0029699 L2,8.99703014 Z" id="Rectangle-415" stroke-linejoin="round"></path>
+                <path d="M16,15 L22,9" id="Path-28"></path>
+                <path d="M16.0000002,15 L22.0249378,9" id="Path-28" transform="translate(19.012469, 12.000000) scale(-1, 1) translate(-19.012469, -12.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/player/images/volume.svg b/client/src/assets/player/images/volume.svg
new file mode 100644
index 000000000..590913add
--- /dev/null
+++ b/client/src/assets/player/images/volume.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-884.000000, -115.000000)" stroke="#fff" stroke-width="2">
+            <g id="20" transform="translate(884.000000, 115.000000)">
+                <path d="M2,8.99703014 C2,8.4463856 2.44335318,8 3.0093689,8 L6,8 L12,4 L12,20 L6,16 L3.0093689,16 C2.45190985,16 2,15.5469637 2,15.0029699 L2,8.99703014 Z" id="Rectangle-415" stroke-linejoin="round"></path>
+                <path d="M16,8 C16,8 18,9.5 18,12 C18,14.5 16,16 16,16" id="Path-26"></path>
+                <path d="M16.0734116,20 C19.3093571,18.9698098 22.0000001,15.5773201 22.0000001,12 C22.0000001,8.43619491 19.2903975,5.04132966 16.0734116,4" id="Oval-33"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index c54d8b5ea..4ba37b7d9 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -2,9 +2,24 @@
 import videojs, { Player } from 'video.js'
 import * as WebTorrent from 'webtorrent'
+import { VideoFile } from '../../../../shared'
 import { renderVideo } from './video-renderer'
-import { VideoFile } from '../../../../shared'
+// https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
+// Don't import all Angular stuff, just copy the code with shame
+const dictionaryBytes: Array<{max: number, type: string}> = [
+  { max: 1024, type: 'B' },
+  { max: 1048576, type: 'KB' },
+  { max: 1073741824, type: 'MB' },
+  { max: 1.0995116e12, type: 'GB' }
+]
+function bytes (value) {
+  const format = dictionaryBytes.find(d => value < d.max) || dictionaryBytes[dictionaryBytes.length - 1]
+  const calc = Math.floor(value / (format.max / 1024)).toString()
+  return [ calc, format.type ]
+}
 // videojs typings don't have some method we need
 const videojsUntyped = videojs as any
@@ -62,6 +77,7 @@ const ResolutionMenuButton = videojsUntyped.extend(MenuButton, {
  update: function () {
    this.label.innerHTML = this.player_.getCurrentResolutionLabel()
+    this.hide()
    return MenuButton.prototype.update.call(this)
  },
@@ -74,8 +90,7 @@ MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
 const Button = videojsUntyped.getComponent('Button')
 const PeertubeLinkButton = videojsUntyped.extend(Button, {
  constructor: function (player) {
-    Button.apply(this, arguments)
+    Button.call(this, player)
-    this.player = player
  },
  createEl: function () {
@@ -90,11 +105,80 @@ const PeertubeLinkButton = videojsUntyped.extend(Button, {
  },
  handleClick: function () {
-    this.player.pause()
+    this.player_.pause()
  }
 })
 Button.registerComponent('PeerTubeLinkButton', PeertubeLinkButton)
+const WebTorrentButton = videojsUntyped.extend(Button, {
+  constructor: function (player) {
+    Button.call(this, player)
+  },
+  createEl: function () {
+    const div = document.createElement('div')
+    const subDiv = document.createElement('div')
+    div.appendChild(subDiv)
+    const downloadIcon = document.createElement('span')
+    downloadIcon.classList.add('icon', 'icon-download')
+    subDiv.appendChild(downloadIcon)
+    const downloadSpeedText = document.createElement('span')
+    downloadSpeedText.classList.add('download-speed-text')
+    const downloadSpeedNumber = document.createElement('span')
+    downloadSpeedNumber.classList.add('download-speed-number')
+    const downloadSpeedUnit = document.createElement('span')
+    downloadSpeedText.appendChild(downloadSpeedNumber)
+    downloadSpeedText.appendChild(downloadSpeedUnit)
+    subDiv.appendChild(downloadSpeedText)
+    const uploadIcon = document.createElement('span')
+    uploadIcon.classList.add('icon', 'icon-upload')
+    subDiv.appendChild(uploadIcon)
+    const uploadSpeedText = document.createElement('span')
+    uploadSpeedText.classList.add('upload-speed-text')
+    const uploadSpeedNumber = document.createElement('span')
+    uploadSpeedNumber.classList.add('upload-speed-number')
+    const uploadSpeedUnit = document.createElement('span')
+    uploadSpeedText.appendChild(uploadSpeedNumber)
+    uploadSpeedText.appendChild(uploadSpeedUnit)
+    subDiv.appendChild(uploadSpeedText)
+    const peersText = document.createElement('span')
+    peersText.textContent = ' peers'
+    peersText.classList.add('peers-text')
+    const peersNumber = document.createElement('span')
+    peersNumber.classList.add('peers-number')
+    subDiv.appendChild(peersNumber)
+    subDiv.appendChild(peersText)
+    div.className = 'vjs-webtorrent'
+    // Hide the stats before we get the info
+    subDiv.className = 'vjs-webtorrent-hidden'
+    this.player_.on('torrentInfo', (event, data) => {
+      const downloadSpeed = bytes(data.downloadSpeed)
+      const uploadSpeed = bytes(data.uploadSpeed)
+      const numPeers = data.numPeers
+      downloadSpeedNumber.textContent = downloadSpeed[0]
+      downloadSpeedUnit.textContent = ' ' + downloadSpeed[1]
+      uploadSpeedNumber.textContent = uploadSpeed[0]
+      uploadSpeedUnit.textContent = ' ' + uploadSpeed[1]
+      peersNumber.textContent = numPeers
+      subDiv.className = 'vjs-webtorrent-displayed'
+    })
+    return div
+  }
+})
+Button.registerComponent('WebTorrentButton', WebTorrentButton)
 type PeertubePluginOptions = {
  videoFiles: VideoFile[]
  playerElement: HTMLVideoElement
@@ -223,6 +307,12 @@ const peertubePlugin = function (options: PeertubePluginOptions) {
      }
    }
+    const webTorrentButton = new WebTorrentButton(player)
+    controlBar.webTorrent = controlBar.el().insertBefore(webTorrentButton.el(), controlBar.progressControl.el())
+    controlBar.webTorrent.dispose = function () {
+      this.parentNode.removeChild(this)
+    }
    if (options.autoplay === true) {
      player.updateVideoFile()
    } else {
@@ -245,7 +335,7 @@ const peertubePlugin = function (options: PeertubePluginOptions) {
    }, 1000)
  })
-  function handleError (err: Error|string) {
+  function handleError (err: Error | string) {
    return player.trigger('customError', { err })
  }
 }
diff --git a/client/src/index.html b/client/src/index.html
index 8e94b903d..4af6b12f6 100644
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -11,7 +11,7 @@
    <!-- open graph and oembed tags -->
    <!-- Do not remove it! -->
-    <link rel="icon" type="image/png" href="/client/assets/favicon.png" />
+    <link rel="icon" type="image/png" href="/client/assets/images/favicon.png" />
    <!-- base url -->
    <base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">
diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss
new file mode 100644
index 000000000..2a7192fb2
--- /dev/null
+++ b/client/src/sass/_mixins.scss
@@ -0,0 +1,95 @@
+@mixin disable-default-a-behaviour {
+  &:hover, &:focus, &:active {
+    text-decoration: none !important;
+    outline: none !important;
+  }
+}
+@mixin peertube-input-text($width) {
+  display: inline-block;
+  height: $button-height;
+  width: $width;
+  background: #fff;
+  border: 1px solid #C6C6C6;
+  border-radius: 3px;
+  padding-left: 15px;
+  &::placeholder {
+    color: #585858;
+  }
+}
+@mixin orange-button {
+  color: #fff;
+  background-color: $orange-color;
+  &:hover, &:active, &:focus {
+    color: #fff;
+    background-color: $orange-hoover-color;
+  }
+  &[disabled], &.disabled {
+    cursor: default;
+    color: #fff;
+    background-color: #C6C6C6;
+  }
+}
+@mixin grey-button {
+  background-color: $grey-color;
+  color: #585858;
+  &:hover, &:active, &:focus, &[disabled], &.disabled {
+    color: #585858;
+    background-color: $grey-hoover-color;
+  }
+  &[disabled], &.disabled {
+    cursor: default;
+  }
+}
+@mixin peertube-button {
+  border: none;
+  font-weight: $font-semibold;
+  font-size: 15px;
+  height: $button-height;
+  line-height: $button-height;
+  border-radius: 3px;
+  text-align: center;
+  padding: 0 17px 0 13px;
+  cursor: pointer;
+  outline: 0;
+}
+@mixin peertube-button-link {
+  display: inline-block;
+  @include disable-default-a-behaviour;
+  @include peertube-button;
+}
+@mixin avatar ($size) {
+  width: $size;
+  height: $size;
+}
+@mixin icon ($size) {
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: $size;
+  height: $size;
+  vertical-align: middle;
+  cursor: pointer;
+}
+@mixin peertube-select ($width) {
+  background-color: #fff;
+  border: 1px solid #C6C6C6;
+  height: $button-height;
+  width: $width;
+  border-radius: 3px;
+  padding-left: 15px;
+}
diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss
index f0ffb43ba..0d310409b 100644
--- a/client/src/sass/_variables.scss
+++ b/client/src/sass/_variables.scss
@@ -1,23 +1,29 @@
-$grey-color: #555;
+$font-regular: 400;
+$font-semibold: 600;
+$font-bold: 700;
-$black-background: #1d2125;
+$grey-color: #E5E5E5;
+$grey-hoover-color: #EFEFEF;;
+$orange-color: #F1680D;
+$orange-hoover-color: #F97D46;
+$black-background: #000;
 $grey-background: #f6f2f2;
+$red-error: #FF0000;
+$expanded-horizontal-margins: 150px;
+$not-expanded-horizontal-margins: 30px;
-$menu-color-link: #9cabb8;
+$button-height: 30px;
-$menu-color-block: #686f77;
-$header-height: 65px;
+$header-height: 50px;
 $header-border-color: #e9eff6;
+$search-input-width: 375px;
+$menu-color: #fff;
+$menu-width: 240px;
 $footer-height: 30px;
 $footer-margin: 30px;
 $footer-border-color: $header-border-color;
-$video-miniature-other-infos: #686767;
-$video-watch-border-color: #eceef4;
-$video-watch-title-height: 90px;
-$video-watch-info-color: #9da0ae;
-$video-watch-info-height: 120px;
-$video-watch-info-padding-left: 40px;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 47e1b6df0..9d347d566 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,3 +1,5 @@
+$FontPathSourceSansPro: "../fonts/source-sans-pro";
+@import '~source-sans-pro/source-sans-pro';
 @import '~primeng/resources/themes/bootstrap/theme.css';
 @import '~primeng/resources/primeng.css';
 @import '~video.js/dist/video-js.css';
@@ -7,17 +9,30 @@
  display: none !important;
 }
+body {
+  font-family: 'Source Sans Pro';
+  font-weight: $font-regular;
+  color: #000;
+}
 input.readonly {
  /* Force blank on readonly inputs */
  background-color: #fff !important;
 }
-.form-control, .btn {
+label {
-  border-radius: 0;
+  font-weight: $font-bold;
+  font-size: 15px;
 }
-.dropdown-menu {
+.form-error {
-  border-radius: 0;
+  display: block;
+  color: $red-error;
+  margin-top: 5px;
+}
+.input-error {
+  border-color: $red-error !important;
 }
 .glyphicon-black {
@@ -25,44 +40,73 @@ input.readonly {
 }
 .main-col {
-  .content-padding {
+  margin-left: $menu-width;
-    padding: 15px 30px;
-    @media screen and (max-width: 800px) {
+  .margin-content {
-      padding: 15px 10px;
+    margin-left: $not-expanded-horizontal-margins;
-    }
+    margin-right: $not-expanded-horizontal-margins;
+  }
-    @media screen and (min-width: 1400px) {
+  .sub-menu {
-      padding: 15px 40px;
+    background-color: #F7F7F7;
-    }
+    width: 100%;
+    height: 81px;
+    margin-bottom: 30px;
+    display: flex;
+    align-items: center;
+    padding-left: $not-expanded-horizontal-margins;
+  }
-    @media screen and (min-width: 1600px) {
+  // Override some properties if the main content is expanded (no menu on the left)
-      padding: 15px 50px;
+  &.expanded {
+    margin-left: 0;
+    .margin-content {
+      margin-left: $expanded-horizontal-margins;
+      margin-right: $expanded-horizontal-margins;
    }
-    @media screen and (min-width: 1800px) {
+    .sub-menu {
-      padding: 15px 60px;
+      padding-left: $expanded-horizontal-margins;
    }
  }
 }
-// On small screen, menu is absolute and displayed over the page
+.title-page {
-@media screen and (max-width: 500px) {
+  color: #000;
-  .title-menu-left {
+  font-size: 16px;
-    width: 120px;
+  display: inline-block;
-    position: absolute !important;
+  margin-right: 55px;
-    z-index: 10000;
+  font-weight: $font-semibold;
+  @include disable-default-a-behaviour;
+  &.active, &.title-page-single {
+    border-bottom: 2px solid $orange-color;
+    font-weight: $font-bold;
+    margin-top: 30px;
+    margin-bottom: 25px;
  }
-  .main-col {
+  &:hover, &:active, &:focus {
-    width: 100% !important;
+    color: #000;
  }
+}
+.admin-sub-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30px;
-  .fake-menu {
+  .admin-sub-title {
-    display: none;
+    flex-grow: 1;
  }
 }
+.admin-sub-title {
+  font-size: 20px;
+  font-weight: bold;
+}
 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
 .glyphicon-refresh-animate {
  -animation: spin .7s infinite linear;
@@ -86,13 +130,209 @@ input.readonly {
  to { -moz-transform: rotate(360deg);}
 }
-/* ngprime data table customizations */
+// ngprime data table customizations
 p-datatable {
+  font-size: 15px !important;
+  .ui-datatable-scrollable-header {
+    background-color: #fff !important;
+  }
+  .ui-widget-content {
+    border: none !important;
+  }
+  .ui-datatable-virtual-table {
+    border-top: none !important;
+  }
+  td {
+    border: 1px solid #E5E5E5 !important;
+    padding-left: 15px !important;
+  }
+  tr {
+    background-color: #fff !important;
+    height: 46px;
+    &:hover {
+      background-color: #f0f0f0 !important;
+    }
+    &:not(:hover) {
+      .action-cell * {
+        display: none !important;
+      }
+    }
+    &:first-child td {
+      border-top: none !important;
+    }
+    &:last-child td {
+      border-bottom: none !important;
+    }
+  }
+  th {
+    border: none !important;
+    border-bottom: 1px solid #f0f0f0 !important;
+    text-align: left !important;
+    padding: 5px 0 5px 15px !important;
+    font-weight: $font-semibold !important;
+    color: #000 !important;
+    &.ui-sortable-column:hover:not(.ui-state-active) {
+      background-color: #f0f0f0 !important;
+      border: 1px solid #f0f0f0 !important;
+      border-width: 0 1px !important;
+    }
+    &.ui-state-active {
+      color: #fff !important;
+      background-color: $orange-color !important;
+      border: 1px solid $orange-color !important;
+      border-width: 0 1px !important;
+    }
+  }
  .action-cell {
+    width: 250px !important;
+    padding: 0 !important;
    text-align: center;
+  }
+  p-paginator {
+    .ui-paginator-bottom {
+      position: relative;
+      border: none !important;
+      border: 1px solid #f0f0f0 !important;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      a {
+        color: #000 !important;
+        font-weight: $font-semibold !important;
+        margin-right: 20px !important;
+        outline: 0 !important;
+        border-radius: 3px !important;
+        padding: 5px 2px !important;
+        &.ui-state-active {
+          &, &:hover, &:active, &:focus {
+            color: #fff !important;
+            background-color: $orange-color !important;
+          }
+        }
+      }
+    }
+  }
+}
+// Bootstrap customizations
+.dropdown-menu {
+  border-radius: 3px;
+  box-shadow: 0 3px 6px;
+  font-size: 15px;
+  .dropdown-item {
+    padding: 3px 15px;
+  }
+  a {
+    color: #000 !important;
+  }
+}
+.modal {
+  .modal-header {
+    border-bottom: none;
+    .title-page-single {
+      margin: 0;
+    }
+  }
+}
+.nav {
+  font-size: 16px !important;
+  border: none !important;
+  .nav-item .nav-link {
+    margin-right: 30px;
+    padding: 0;
+    border-radius: 3px;
+    border: none !important;
+    .tab-link {
+      display: flex !important;
+      align-items: center;
+      height: 30px !important;
+      padding: 0 15px;
+    }
+    &, & a {
+      color: #000 !important;
+      @include disable-default-a-behaviour;
+    }
+    &.active, &:hover {
+      background-color: #F0F0F0;
+    }
+    &.active {
+      font-weight: $font-semibold !important;
+    }
+  }
+}
+.orange-button {
+  @include peertube-button;
+  @include orange-button;
+}
+.orange-button-link {
+  @include peertube-button-link;
+  @include orange-button;
+}
+.grey-button {
+  @include peertube-button;
+  @include grey-button;
+}
+.grey-button-link {
+  @include peertube-button-link;
+  @include grey-button;
+}
+// On small screen, menu is absolute
+@media screen and (max-width: 800px) {
+  .title-menu-left {
+    width: 150px !important;
+    position: absolute !important;
+    z-index: 10000;
+  }
+  .main-col {
+    margin-left: 0;
+    &, &.expanded {
+      .margin-content {
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+      .sub-menu {
+        padding-left: 10px;
+        margin-bottom: 10px;
+      }
-    .glyphicon {
+      input[type=text], input[type=password] {
-      cursor: pointer;
+        width: 100% !important;
+      }
    }
  }
 }
diff --git a/client/src/sass/pre-customizations.scss b/client/src/sass/pre-customizations.scss
index 693489828..52eef50f2 100644
--- a/client/src/sass/pre-customizations.scss
+++ b/client/src/sass/pre-customizations.scss
@@ -1,4 +1,5 @@
 @import '_variables.scss';
+@import '_mixins.scss';
 $bootstrap-sass-asset-helper: false !default;
 //
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 34a958764..1c5701bea 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -1,346 +1,322 @@
-// Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files
+// Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin
-.vjs-resolution-button-label {
+$primary-foreground-color: #fff;
-  font-size: 1em;
+$primary-background-color: #000;
-  line-height: 3em;
+$font-size: 13px;
-  position: absolute;
+$control-bar-height: 34px;
-  top: 0;
-  left: -1px;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  box-sizing: inherit;
-}
-.vjs-resolution-button {
-  outline: 0 !important;
-  .vjs-menu {
+.video-js.vjs-peertube-skin {
-    .vjs-menu-content {
+  font-size: $font-size;
-      width: 4em;
+  color: $primary-foreground-color;
-      left: 50%; /* Center the menu, in it's parent */
-      margin-left: -2em; /* half of width, to center */
-    }
-    li {
+  .vjs-button > .vjs-icon-placeholder::before {
-      text-transform: none;
+    line-height: $control-bar-height;
-      font-size: 1em;
-    }
  }
-}
-// Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin
+  .vjs-mouse-display:before,
+  .vjs-play-progress:before,
-// Video JS Sublime Skin
+  .vjs-volume-level:before {
-// The following are SCSS variables to automate some of the values.
+    content: ''; /* Remove Circle From Progress Bar */
-// But don't feel limited by them. Change/replace whatever you want.
+  }
-// The color of icons, text, and the big play button border.
-// Try changing to #0f0
-$primary-foreground-color: #fff; // #fff default
-// The default color of control backgrounds is mostly black but with a little
+  .vjs-audio-button {
-// bit of blue so it can still be seen on all-black video frames, which are common.
+    display: none;
-// Try changing to #900
+  }
-$primary-background-color: #2B333F;  // #2B333F default
-// Try changing to true
+  .vjs-big-play-button {
-$center-big-play-button: true; // true default
+    outline: 0;
+    font-size: 8em;
-.video-js {
+    $big-play-width: 3em;
-  /* The base font size controls the size of everything, not just text.
+    $big-play-height: 1.5em;
-     All dimensions use em-based sizes so that the scale along with the font size.
-     Try increasing it to 15px and see what happens. */
-  font-size: 10px;
-  /* The main font color changes the ICON COLORS as well as the text */
+    border: 0;
-  color: $primary-foreground-color;
+    border-radius: 0.3em;
-}
-/* The "Big Play Button" is the play button that shows before the video plays.
-   To center it set the align values to center and middle. The typical location
-   of the button is the center, but there is trend towards moving it to a corner
-   where it gets out of the way of valuable content in the poster image.*/
-.vjs-sublime-skin .vjs-big-play-button {
-  /* The font size is what makes the big play button...big.
-     All width/height values use ems, which are a multiple of the font size.
-     If the .video-js font-size is 10px, then 3em equals 30px.*/
-  font-size: 8em;
-  /* We're using SCSS vars here because the values are used in multiple places.
-     Now that font size is set, the following em values will be a multiple of the
-     new font size. If the font-size is 3em (30px), then setting any of
-     the following values to 3em would equal 30px. 3 * font-size. */
-  $big-play-width: 3em;
-  /* 1.5em = 45px default */
-  $big-play-height: 1.5em;
-  line-height: $big-play-height;
-  height: $big-play-height;
-  width: $big-play-width;
-  /* 0.06666em = 2px default */
-  border: 0;
-  /* 0.3em = 9px default */
-  border-radius: 0.3em;
-  @if $center-big-play-button {
-    /* Align center */
    left: 50%;
    top: 50%;
    margin-left: -($big-play-width / 2);
    margin-top: -($big-play-height / 2);
-  } @else {
+    background-color: transparent !important;
-    /* Align top left. 0.5em = 15px default */
-    left: 0.5em;
-    top: 0.5em;
  }
-}
-/* The default color of control backgrounds is mostly black but with a little
+  .vjs-control-bar,
-   bit of blue so it can still be seen on all-black video frames, which are common. */
+  .vjs-big-play-button,
-.video-js .vjs-control-bar,
+  .vjs-menu-button .vjs-menu-content {
-.video-js .vjs-big-play-button,
+    background-color: rgba($primary-background-color, 0.5);
-.video-js .vjs-menu-button .vjs-menu-content {
+  }
-  /* IE8 - has no alpha support */
-  background-color: $primary-background-color;
-  /* Opacity: 1.0 = 100%, 0.0 = 0% */
-  background-color: rgba($primary-background-color, 0.7);
-  background-color: transparent;
-}
-// Make a slightly lighter version of the main background
+  $slider-bg-color: lighten($primary-background-color, 33%);
-// for the slider background.
-$slider-bg-color: lighten($primary-background-color, 33%);
-/* Slider - used for Volume bar and Progress bar */
-.video-js .vjs-slider {
-  background-color: $slider-bg-color;
-  background-color: rgba($slider-bg-color, 0.5);
-  background-color: rgba(255,255,255,.3);
-  border-radius: 2px;
-  height: 6.5px;
-}
-/* The slider bar color is used for the progress bar and the volume bar
+  .vjs-slider {
-   (the first two can be removed after a fix that's coming) */
+    background-color: rgba(255, 255, 255, .3);
-.video-js .vjs-volume-level,
+    border-radius: 2px;
-.video-js .vjs-play-progress,
+    height: 5px;
-.video-js .vjs-slider-bar {
+  }
-  background: $primary-foreground-color;
-}
-/* Enlarged Slider to enable easier tracking. Adjust all the height:6.5px to preferred height for the slider if necessary. */
+  /* The slider bar color is used for the progress bar and the volume bar
-.video-js .vjs-progress-holder .vjs-load-progress,
+     (the first two can be removed after a fix that's coming) */
-.video-js .vjs-progress-holder .vjs-load-progress div,
+  .vjs-volume-level,
-.video-js .vjs-progress-holder .vjs-play-progress,
+  .vjs-play-progress,
-.video-js .vjs-progress-holder .vjs-tooltip-progress-bar {
+  .vjs-slider-bar {
-  height: 6.5px;
+    background: $primary-foreground-color;
-}
+  }
-/* The main progress bar also has a bar that shows how much has been loaded. */
+  .vjs-load-progress {
-.video-js .vjs-load-progress {
+    background: rgba($slider-bg-color, 0.5);
-  /* For IE8 we'll lighten the color */
+  }
-  background: ligthen($slider-bg-color, 25%);
-  /* Otherwise we'll rely on stacked opacities */
-  background: rgba($slider-bg-color, 0.5);
-}
-/* The load progress bar also has internal divs that represent
+  .vjs-load-progress div {
-   smaller disconnected loaded time ranges */
+    background: rgba($slider-bg-color, 0.75);
-.video-js .vjs-load-progress div {
+  }
-  /* For IE8 we'll lighten the color */
-  background: ligthen($slider-bg-color, 50%);
-  /* Otherwise we'll rely on stacked opacities */
-  background: rgba($slider-bg-color, 0.75);
-}
-//Skin Style Starts
+  .vjs-poster {
-.vjs-sublime-skin .vjs-poster {
    outline: none; /* Remove Blue Outline on Click*/
    outline: 0;
-}
+  }
-.vjs-sublime-skin:hover .vjs-big-play-button {
-    background-color: transparent;
-}
-.vjs-sublime-skin .vjs-fullscreen-control:before,
-.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:before {
-    content: ''; /* Remove Fullscreen Exit Icon */
-}
-.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control {
-    background: #fff;
-}
-.vjs-sublime-skin .vjs-fullscreen-control {
-    border: 3px solid #fff;
-    box-sizing: border-box;
-    cursor: pointer;
-    margin-top: -7px;
-    top: 50%;
-    height: 14px;
-    width: 22px;
-    margin-right: 10px;
-}
-.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:after {
-    background: #000;
-    content: "";
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 5px;
-    width: 5px;
-}
-.vjs-sublime-skin .vjs-progress-holder {
-    margin: 0;
-}
-.vjs-sublime-skin .vjs-progress-control .vjs-progress-holder:after {
-    border-radius: 2px;
-    display: block;
-    height: 6.5px;
-}
-.vjs-sublime-skin .vjs-progress-control .vjs-load-progres,
-.vjs-sublime-skin .vjs-progress-control .vjs-play-progress {
-    border-radius: 2px;
-    height: 6.5px;
-}
-.vjs-sublime-skin .vjs-playback-rate {
-    display: none; /* Remove Playback Rate */
-}
-.vjs-sublime-skin .vjs-progress-control {
-    margin-right: 50px;
-}
-.vjs-sublime-skin .vjs-time-control {
-    right: 55px;
-}
-.vjs-sublime-skin .vjs-volume-menu-button:before {
+  .vjs-control-bar {
-    width: 1.2em;
+    height: $control-bar-height;
-    z-index: 1;
-}
-.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu,
+    .vjs-progress-control {
-.vjs-sublime-skin .vjs-volume-menu-button:focus .vjs-menu,
+      bottom: 34px;
-.vjs-sublime-skin .vjs-volume-menu-button.vjs-slider-active .vjs-menu {
+      width: 100%;
-    display: block;
+      position: absolute;
-    opacity: 1;
+      height: 5px;
-}
-.vjs-sublime-skin .vjs-volume-menu-button,
+      .vjs-progress-holder {
-.vjs-sublime-skin .vjs-volume-panel {
+        margin: 0;
-    width: 6em;
+        border-radius: 0;
-    position: absolute;
+      }
-    right: 0;
+    }
-    margin-right: 65px;
-}
-.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu-content,
+    .vjs-play-control {
-.vjs-sublime-skin .vjs-volume-menu-button:hover,
+      font-size: $font-size;
-.vjs-sublime-skin .vjs-volume-menu-button:focus,
+      padding: 0 17px;
-.vjs-sublime-skin .vjs-volume-menu-button.vjs-slider-active,
+      margin-right: 5px;
-.vjs-sublime-skin .vjs-volume-panel .vjs-volume-control,
+    }
-.vjs-sublime-skin .vjs-volume-panel:hover,
-.vjs-sublime-skin .vjs-volume-panel:focus,
-.vjs-sublime-skin .vjs-volume-panel.vjs-slider-active {
-    width: 6em;
-}
-.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu {
+    .vjs-time-control {
-    left: 23px;
+      &.vjs-current-time {
-}
+        font-size: $font-size;
+        display: inline-block;
+        padding: 0;
+        .vjs-current-time-display {
+          line-height: $control-bar-height;
+          &::after {
+            content: "/";
+            margin: 0 1px 0 2px;
+          }
+        }
+      }
+      &.vjs-duration {
+        font-size: $font-size;
+        display: inline-block;
+        padding: 0;
+        .vjs-duration-display {
+          line-height: $control-bar-height;
+        }
+      }
+      &.vjs-remaining-time {
+        display: none;
+      }
+    }
-.vjs-sublime-skin .vjs-mouse-display:before,
+    .vjs-webtorrent {
-.vjs-sublime-skin .vjs-play-progress:before,
+      width: 100%;
-.vjs-sublime-skin .vjs-volume-level:before {
+      line-height: $control-bar-height;
-    content: ''; /* Remove Circle From Progress Bar */
+      text-align: right;
-}
+      padding-right: 60px;
+      .vjs-webtorrent-displayed {
+        display: block;
+      }
+      .vjs-webtorrent-hidden {
+        display: none;
+      }
+      .download-speed-number, .upload-speed-number, .peers-number {
+        font-weight: $font-semibold;
+      }
+      .download-speed-text, .upload-speed-text, .peers-text {
+        margin-right: 15px;
+      }
+      .icon {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-size: contain;
+        vertical-align: middle;
+        background-repeat: no-repeat;
+        margin-right: 6px;
+        position: relative;
+        top: -1px;
+        &.icon-download {
+          background-image: url('../assets/player/images/arrow-down.svg');
+        }
+        &.icon-upload {
+          background-image: url('../assets/player/images/arrow-up.svg');
+        }
+      }
+    }
-.vjs-sublime-skin .vjs-mouse-display:after,
+    .vjs-mute-control {
-.vjs-sublime-skin .vjs-play-progress:after,
+      .vjs-icon-placeholder {
-.vjs-sublime-skin .vjs-time-tooltip {
+        display: inline-block;
-    width: 5.5em;
+        width: 22px;
-}
+        height: 22px;
+        vertical-align: middle;
+        background: url('../assets/player/images/volume.svg') no-repeat;
+        background-size: contain;
+        &::before {
+          content: '';
+        }
+      }
+      &.vjs-vol-0 .vjs-icon-placeholder {
+        background: url('../assets/player/images/volume-mute.svg') no-repeat;
+        background-size: contain;
+      }
+    }
-.vjs-sublime-skin .vjs-audio-button {
+    .vjs-volume-menu-button,
-    display: none;
+    .vjs-volume-panel {
-}
+      width: 6em;
+      position: absolute;
+      right: 0;
+      margin-right: 65px;
+    }
-.vjs-sublime-skin .vjs-volume-bar {
+    .vjs-volume-bar {
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC);
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat;
-    background-size: 22px 14px;
+      background-size: 22px 14px;
-    background-repeat: no-repeat;
+      height: 100%;
-    height: 100%;
+      width: 100%;
-    width: 100%;
+      max-width: 22px;
-    max-width: 22px;
+      max-height: 14px;
-    max-height: 14px;
+      margin: 7px 4px;
-    margin: 7px 4px;
+      border-radius: 0;
-    border-radius: 0;
+      top: 3px;
-}
+      .vjs-volume-level {
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat;
+        background-size: 22px 14px;
+        max-width: 22px;
+        max-height: 14px;
+        height: 100%;
+      }
+    }
-.vjs-sublime-skin .vjs-volume-level {
+    .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC);
+    .vjs-volume-panel.vjs-volume-panel-horizontal:active,
-    background-size: 22px 14px;
+    .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
-    background-repeat: no-repeat;
+    .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
-    max-width: 22px;
+      width: 6em;
-    max-height: 14px;
+      transition-property: none;
-    height: 100%;
+    }
-}
-/* New for VideoJS v6 */
+    .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
-.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
+      width: 3em;
-.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:active,
+      height: auto;
-.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
+    }
-.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
-    width: 6em;
-    transition-property: none;
-}
-.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
+    .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
-    width: 3em;
+      transition-property: none;
-    height: auto;
+    }
-}
-.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
+    .vjs-volume-panel {
-    transition-property: none;
+      .vjs-mute-control {
-}
+        width: 2em;
+        z-index: 1;
+        padding: 0;
+      }
+      .vjs-volume-control {
+        display: inline-block;
+        position: relative;
+        left: 5px;
+        opacity: 1;
+        width: 3em;
+        height: auto;
+      }
+    }
-.vjs-sublime-skin .vjs-fullscreen-control .vjs-icon-placeholder {
+    .vjs-fullscreen-control {
-    display: none; /* Remove Duplicate Fullscreen Icon */
+      width: 37px;
-}
+      .vjs-icon-placeholder {
+        display: inline-block;
+        width: 22px;
+        height: 22px;
+        vertical-align: middle;
+        background: url('../assets/player/images/fullscreen.svg') no-repeat;
+        background-size: contain;
+        &::before {
+          content: '';
+        }
+      }
+    }
-.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control {
+    .vjs-menu-button-popup {
-    width: 2em;
+      font-size: 13px;
-    z-index: 1;
+      font-weight: $font-semibold;
-    padding: 0;
+      width: 42px;
-}
+      // Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files
+      .vjs-resolution-button-label {
+        line-height: $control-bar-height;
+        position: absolute;
+        top: 0;
+        left: -1px;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        box-sizing: inherit;
+      }
+      .vjs-resolution-button {
+        outline: 0 !important;
+      }
+      .vjs-menu {
+        top: 20px;
+        .vjs-menu-content {
+          width: 4em;
+          left: 50%; /* Center the menu, in it's parent */
+          margin-left: -2em; /* half of width, to center */
+        }
+        li {
+          text-transform: none;
+          font-size: 13px;
+        }
+      }
+    }
+  }
-.vjs-sublime-skin .vjs-volume-panel .vjs-volume-control {
+  @media screen and (max-width: 450px) {
-    display: inline-block;
+    .vjs-webtorrent-displayed {
-    position: relative;
+      display: none !important;
-    left: 5px;
+    }
-    opacity: 1;
+  }
-    width: 3em;
-    height: auto;
 }
 // Thanks: https://projects.lukehaas.me/css-loaders/
 .vjs-loading-spinner {
-  margin: 0 !important;
-  position: absolute;
-  // 15px is the nav bar height
-  top: calc(50% - 15px);
  left: 50%;
  font-size: 10px;
-  position: relative;
  text-indent: -9999em;
  border: 0.7em solid rgba(255, 255, 255, 0.2);
  border-left-color: #ffffff;
@@ -367,3 +343,4 @@ $slider-bg-color: lighten($primary-background-color, 33%);
    }
  }
 }
diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html
index 0a35bc362..fa4d0bdba 100644
--- a/client/src/standalone/videos/embed.html
+++ b/client/src/standalone/videos/embed.html
@@ -11,7 +11,7 @@
  <body>
-    <video id="video-container" class="video-js vjs-sublime-skin vjs-big-play-centered">
+    <video id="video-container" class="video-js vjs-peertube-skin">
    </video>
  </body>
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
index b76f09677..9140cd37c 100644
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -23,17 +23,13 @@ html, body {
 }
 .vjs-peertube-link {
-  color: white;
+  color: #fff;
  text-decoration: none;
-  font-size: 1.3em;
+  font-size: $font-size;
-  line-height: 2.20;
+  line-height: $control-bar-height;
  transition: all .4s;
-  position: relative;
+  font-weight: $font-semibold;
-  right: 8px;
+  margin-right: 3px;
-}
-.vjs-resolution-button-label {
-  left: -7px;
 }
 .vjs-peertube-link:hover {
@@ -42,5 +38,21 @@ html, body {
 // Fix volume panel because we added a new component (PeerTube link)
 .vjs-volume-panel {
-  margin-right: 130px !important;
+  margin-right: 121px !important;
+}
+@media screen and (max-width: 350px) {
+  .vjs-play-control {
+    padding: 0 5px !important;
+    width: 25px !important;
+  }
+  .vjs-volume-control {
+    display: none !important;
+  }
+  .vjs-volume-panel {
+    width: 26px !important;
+    margin-right: 140px !important;
+  }
 }
diff --git a/client/yarn.lock b/client/yarn.lock
index c5a47bb89..bd6870061 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -264,10 +264,6 @@ amdefine@>=0.0.4:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
-angular-pipes@^6.0.0:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/angular-pipes/-/angular-pipes-6.5.3.tgz#6bed37c51ebc2adaf3412663bfe25179d0489b02"
 angular2-notifications@^0.7.7:
  version "0.7.8"
  resolved "https://registry.yarnpkg.com/angular2-notifications/-/angular2-notifications-0.7.8.tgz#ecbcb95a8d2d402af94a9a080d6664c70d33a029"
@@ -4708,9 +4704,9 @@ ngc-webpack@3.2.2:
    source-map "^0.5.6"
    ts-node "^3.2.0"
-ngx-bootstrap@1.9.3:
+ngx-bootstrap@2.0.0-beta.9:
-  version "1.9.3"
+  version "2.0.0-beta.9"
-  resolved "https://registry.yarnpkg.com/ngx-bootstrap/-/ngx-bootstrap-1.9.3.tgz#28e75d14fb1beaee609383d7694de4eb3ba03b26"
+  resolved "https://registry.yarnpkg.com/ngx-bootstrap/-/ngx-bootstrap-2.0.0-beta.9.tgz#9aa7c88269534e7a5440481f31b137549f749796"
 ngx-chips@1.5.3:
  version "1.5.3"
@@ -4718,6 +4714,14 @@ ngx-chips@1.5.3:
  dependencies:
    ng2-material-dropdown "0.7.10"
+ngx-infinite-scroll@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/ngx-infinite-scroll/-/ngx-infinite-scroll-0.7.0.tgz#a390c61c6a05ac14485e1c5bc8b4e6f6bd62fd6a"
+ngx-pipes@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/ngx-pipes/-/ngx-pipes-2.0.5.tgz#743b827e350b1e66f5bdae49e90a02fa631d4c54"
 no-case@^2.2.0:
  version "2.3.2"
  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
@@ -6602,6 +6606,10 @@ source-map@^0.6.1, source-map@~0.6.1:
  version "0.6.1"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+source-sans-pro@^2.0.10:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/source-sans-pro/-/source-sans-pro-2.0.10.tgz#c1ca859cf164a088944c5e83745085e87cd533a9"
 spdx-correct@~1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"