345 files changed, 8017 insertions, 2796 deletions

diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index fc5736aba..1df1ef2ad 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -20,7 +20,7 @@
     </div>
 
     <div i18n class="middle-title" *ngIf="html.administrator || maintenanceLifetime || businessModel">
-      Administrators & sustainability
+      ADMINISTRATORS & SUSTAINABILITY
     </div>
 
     <div class="block administrator" *ngIf="html.administrator">
@@ -48,7 +48,7 @@
     </div>
 
     <div i18n class="middle-title" *ngIf="html.description">
-      Information
+      INFORMATION
     </div>
 
     <div class="block description">
@@ -58,7 +58,7 @@
     </div>
 
     <div i18n class="middle-title" *ngIf="html.moderationInformation || html.codeOfConduct || html.terms">
-      Moderation
+      MODERATION
     </div>
 
     <div class="block moderation-information" *ngIf="html.moderationInformation">
@@ -80,7 +80,7 @@
     </div>
 
     <div i18n class="middle-title" *ngIf="html.hardwareInformation">
-      Other information
+      OTHER INFORMATION
     </div>
 
     <div class="block hardware-information" *ngIf="html.hardwareInformation">
@@ -96,9 +96,8 @@
   </div>
 
   <div class="col">
-    <div i18n class="middle-title">
-      Statistics
-    </div>
+    <div class="anchor" id="statistics"></div>
+    <div i18n class="middle-title">STATISTICS</div>
     <my-instance-statistics></my-instance-statistics>
   </div>
 </div>
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index 87beb13da..e1809d7b7 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -1,19 +1,18 @@
-import { Component, OnInit, ViewChild } from '@angular/core'
+import { Component, OnInit, ViewChild, AfterViewChecked } from '@angular/core'
 import { Notifier, ServerService } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
 import { InstanceService } from '@app/shared/instance/instance.service'
-import { MarkdownService } from '@app/shared/renderer'
-import { forkJoin } from 'rxjs'
-import { map, switchMap } from 'rxjs/operators'
 import { ServerConfig } from '@shared/models'
+import { ActivatedRoute } from '@angular/router'
+import { ResolverData } from './about-instance.resolver'
+import { ViewportScroller } from '@angular/common'
 
 @Component({
   selector: 'my-about-instance',
   templateUrl: './about-instance.component.html',
   styleUrls: [ './about-instance.component.scss' ]
 })
-export class AboutInstanceComponent implements OnInit {
+export class AboutInstanceComponent implements OnInit, AfterViewChecked {
   @ViewChild('contactAdminModal', { static: true }) contactAdminModal: ContactAdminModalComponent
 
   shortDescription = ''
@@ -37,11 +36,10 @@ export class AboutInstanceComponent implements OnInit {
   serverConfig: ServerConfig
 
   constructor (
-    private notifier: Notifier,
+    private viewportScroller: ViewportScroller,
+    private route: ActivatedRoute,
     private serverService: ServerService,
-    private instanceService: InstanceService,
-    private markdownService: MarkdownService,
-    private i18n: I18n
+    private instanceService: InstanceService
   ) {}
 
   get instanceName () {
@@ -56,35 +54,27 @@ export class AboutInstanceComponent implements OnInit {
     return this.serverConfig.instance.isNSFW
   }
 
-  ngOnInit () {
+  async ngOnInit () {
     this.serverConfig = this.serverService.getTmpConfig()
     this.serverService.getConfig()
         .subscribe(config => this.serverConfig = config)
 
-    this.instanceService.getAbout()
-        .pipe(
-          switchMap(about => {
-            return forkJoin([
-              this.instanceService.buildTranslatedLanguages(about),
-              this.instanceService.buildTranslatedCategories(about)
-            ]).pipe(map(([ languages, categories ]) => ({ about, languages, categories })))
-          })
-        ).subscribe(
-      async ({ about, languages, categories }) => {
-        this.languages = languages
-        this.categories = categories
-
-        this.shortDescription = about.instance.shortDescription
-
-        this.creationReason = about.instance.creationReason
-        this.maintenanceLifetime = about.instance.maintenanceLifetime
-        this.businessModel = about.instance.businessModel
-
-        this.html = await this.instanceService.buildHtml(about)
-      },
-
-      () => this.notifier.error(this.i18n('Cannot get about information from server'))
-    )
+    const { about, languages, categories }: ResolverData = this.route.snapshot.data.instanceData
+
+    this.languages = languages
+    this.categories = categories
+
+    this.shortDescription = about.instance.shortDescription
+
+    this.creationReason = about.instance.creationReason
+    this.maintenanceLifetime = about.instance.maintenanceLifetime
+    this.businessModel = about.instance.businessModel
+
+    this.html = await this.instanceService.buildHtml(about)
+  }
+
+  ngAfterViewChecked () {
+    if (window.location.hash) this.viewportScroller.scrollToAnchor(window.location.hash.replace('#', ''))
   }
 
   openContactModal () {
diff --git a/client/src/app/+about/about-instance/about-instance.resolver.ts b/client/src/app/+about/about-instance/about-instance.resolver.ts
new file mode 100644
index 000000000..94c6abe5a
--- /dev/null
+++ b/client/src/app/+about/about-instance/about-instance.resolver.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core'
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router'
+import { map, switchMap } from 'rxjs/operators'
+import { forkJoin } from 'rxjs'
+import { InstanceService } from '@app/shared/instance/instance.service'
+import { About } from '@shared/models/server'
+
+export type ResolverData = { about: About, languages: string[], categories: string[] }
+
+@Injectable()
+export class AboutInstanceResolver implements Resolve<any> {
+  constructor (
+    private instanceService: InstanceService
+  ) {}
+
+  resolve (route: ActivatedRouteSnapshot) {
+    return this.instanceService.getAbout()
+               .pipe(
+                 switchMap(about => {
+                   return forkJoin([
+                     this.instanceService.buildTranslatedLanguages(about),
+                     this.instanceService.buildTranslatedCategories(about)
+                   ]).pipe(map(([ languages, categories ]) => ({ about, languages, categories })))
+                 })
+               )
+  }
+}
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html
index c3c71bdee..7d93796ec 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.html
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html
@@ -10,7 +10,7 @@
       <div class="form-group">
         <label i18n for="fromName">Your name</label>
         <input
-          type="text" id="fromName"
+          type="text" id="fromName" class="form-control"
           formControlName="fromName" [ngClass]="{ 'input-error': formErrors.fromName }"
         >
         <div *ngIf="formErrors.fromName" class="form-error">{{ formErrors.fromName }}</div>
@@ -19,7 +19,7 @@
       <div class="form-group">
         <label i18n for="fromEmail">Your email</label>
         <input
-          type="text" id="fromEmail"
+          type="text" id="fromEmail" class="form-control"
           formControlName="fromEmail" [ngClass]="{ 'input-error': formErrors['fromEmail'] }"
         >
         <div *ngIf="formErrors.fromEmail" class="form-error">{{ formErrors.fromEmail }}</div>
@@ -28,7 +28,7 @@
       <div class="form-group">
         <label i18n for="subject">Subject</label>
         <input
-          type="text" id="subject"
+          type="text" id="subject" class="form-control"
           formControlName="subject" [ngClass]="{ 'input-error': formErrors['subject'] }"
         >
         <div *ngIf="formErrors.subject" class="form-error">{{ formErrors.subject }}</div>
@@ -36,7 +36,7 @@
 
       <div class="form-group">
         <label i18n for="body">Your message</label>
-        <textarea id="body" formControlName="body" [ngClass]="{ 'input-error': formErrors['body'] }">
+        <textarea id="body" formControlName="body" class="form-control" [ngClass]="{ 'input-error': formErrors['body'] }">
         </textarea>
         <div *ngIf="formErrors.body" class="form-error">{{ formErrors.body }}</div>
       </div>
@@ -44,9 +44,10 @@
       <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
       <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hide()">
-          Cancel
-        </span>
+        <input
+          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          (click)="hide()" (key.enter)="hide()"
+        >
 
         <input
           type="submit" i18n-value value="Submit" class="action-button-submit"
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.ts b/client/src/app/+about/about-instance/contact-admin-modal.component.ts
index 2ed41e741..d5e146b82 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.ts
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.ts
@@ -51,7 +51,7 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit {
   }
 
   show () {
-    this.openedModal = this.modalService.open(this.modal, { keyboard: false })
+    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false })
   }
 
   hide () {
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.html b/client/src/app/+about/about-peertube/about-peertube.component.html
index 26a3d4554..e5a8b2097 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.html
+++ b/client/src/app/+about/about-peertube/about-peertube.component.html
@@ -65,8 +65,11 @@
   <div class="privacy-contributors">
     <my-about-peertube-contributors></my-about-peertube-contributors>
 
-    <div class="p2p-privacy">
-      <h3 i18n class="section-title">P2P & Privacy</h3>
+    <div class="p2p-privacy">     
+      <h3 class="section-title">
+        <div class="anchor" id="privacy"></div> <!-- privacy anchor -->
+        <ng-container i18n>P2P & Privacy</ng-container>
+      </h3>
 
       <p i18n>
         PeerTube uses the BitTorrent protocol to share bandwidth between users by default to help lower the load on the server,
@@ -95,7 +98,7 @@
         <li i18n>
           For each request sent, the tracker returns random peers at a limited number.
           For instance, if there are 1000 peers in the swarm and the tracker sends only 20 peers for each request, there must be at least 50
-          requests sent to know every peers in the swarm
+          requests sent to know every peer in the swarm
         </li>
 
         <li i18n>
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.ts b/client/src/app/+about/about-peertube/about-peertube.component.ts
index 64fd30837..98c5f93c3 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.ts
+++ b/client/src/app/+about/about-peertube/about-peertube.component.ts
@@ -1,4 +1,5 @@
-import { Component } from '@angular/core'
+import { Component, AfterViewChecked } from '@angular/core'
+import { ViewportScroller } from '@angular/common'
 
 @Component({
   selector: 'my-about-peertube',
@@ -6,5 +7,12 @@ import { Component } from '@angular/core'
   styleUrls: [ './about-peertube.component.scss' ]
 })
 
-export class AboutPeertubeComponent {
+export class AboutPeertubeComponent implements AfterViewChecked {
+  constructor (
+    private viewportScroller: ViewportScroller
+  ) {}
+
+  ngAfterViewChecked () {
+    if (window.location.hash) this.viewportScroller.scrollToAnchor(window.location.hash.replace('#', ''))
+  }
 }
diff --git a/client/src/app/+about/about-routing.module.ts b/client/src/app/+about/about-routing.module.ts
index 33e5070cb..91ccb846f 100644
--- a/client/src/app/+about/about-routing.module.ts
+++ b/client/src/app/+about/about-routing.module.ts
@@ -5,6 +5,7 @@ import { AboutComponent } from './about.component'
 import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component'
 import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
 import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component'
+import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance.resolver'
 
 const aboutRoutes: Routes = [
   {
@@ -24,6 +25,9 @@ const aboutRoutes: Routes = [
           meta: {
             title: 'About this instance'
           }
+        },
+        resolve: {
+          instanceData: AboutInstanceResolver
         }
       },
       {
diff --git a/client/src/app/+about/about.component.html b/client/src/app/+about/about.component.html
index 0c4a5156d..da16b933d 100644
--- a/client/src/app/+about/about.component.html
+++ b/client/src/app/+about/about.component.html
@@ -2,11 +2,11 @@
   <div class="sub-menu">
 
     <div class="links">
-      <a i18n routerLink="instance" routerLinkActive="active" class="title-page">Instance</a>
+      <a i18n routerLink="instance" routerLinkActive="active" class="title-page title-page-about">Instance</a>
 
-      <a i18n routerLink="peertube" routerLinkActive="active" class="title-page">PeerTube</a>
+      <a i18n routerLink="peertube" routerLinkActive="active" class="title-page title-page-about">PeerTube</a>
 
-      <a i18n routerLink="follows" routerLinkActive="active" class="title-page">Follows</a>
+      <a i18n routerLink="follows" routerLinkActive="active" class="title-page title-page-about">Follows</a>
     </div>
   </div>
 
diff --git a/client/src/app/+about/about.module.ts b/client/src/app/+about/about.module.ts
index 14bf76e55..84d697540 100644
--- a/client/src/app/+about/about.module.ts
+++ b/client/src/app/+about/about.module.ts
@@ -7,6 +7,7 @@ import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertub
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
 import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component'
 import { AboutPeertubeContributorsComponent } from '@app/+about/about-peertube/about-peertube-contributors.component'
+import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance.resolver'
 
 @NgModule({
   imports: [
@@ -28,6 +29,7 @@ import { AboutPeertubeContributorsComponent } from '@app/+about/about-peertube/a
   ],
 
   providers: [
+    AboutInstanceResolver
   ]
 })
 export class AboutModule { }
diff --git a/client/src/app/+accounts/account-about/account-about.component.html b/client/src/app/+accounts/account-about/account-about.component.html
index f857e5a52..3ae11b49c 100644
--- a/client/src/app/+accounts/account-about/account-about.component.html
+++ b/client/src/app/+accounts/account-about/account-about.component.html
@@ -1,11 +1,11 @@
 <div *ngIf="account" class="row">
   <div class="block col-md-6 col-sm-12">
-    <div i18n class="small-title">Description</div>
+    <div i18n class="small-title">DESCRIPTION</div>
     <div class="content" [innerHtml]="getAccountDescription()"></div>
   </div>
 
   <div class="block col-md-6 col-sm-12">
-    <div i18n class="small-title">Stats</div>
+    <div i18n class="small-title">STATS</div>
 
     <div i18n class="content">Joined {{ account.createdAt | date }}</div>
   </div>
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 781156840..8f1ff21a5 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -25,7 +25,7 @@
       </div>
 
       <a *ngIf="getVideosOf(videoChannel).length !== 0" class="show-more" i18n [routerLink]="getVideoChannelLink(videoChannel)">
-        Show this channel
+        SHOW THIS CHANNEL
       </a>
     </div>
   </div>
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index a258c7b86..042290809 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -29,4 +29,11 @@
   }
 }
 
-
+@media screen and (max-width: $mobile-view) {
+  .section {
+    .section-title {
+      flex-direction: column;
+      align-items: normal;
+    }
+  }
+}
diff --git a/client/src/app/+accounts/account-videos/account-videos.component.ts b/client/src/app/+accounts/account-videos/account-videos.component.ts
index ac4477c18..41b27b541 100644
--- a/client/src/app/+accounts/account-videos/account-videos.component.ts
+++ b/client/src/app/+accounts/account-videos/account-videos.component.ts
@@ -12,6 +12,8 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { Subscription } from 'rxjs'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { Notifier, ServerService } from '@app/core'
+import { UserService } from '@app/shared'
+import { LocalStorageService } from '@app/shared/misc/storage.service'
 
 @Component({
   selector: 'my-account-videos',
@@ -34,9 +36,11 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit,
     protected serverService: ServerService,
     protected route: ActivatedRoute,
     protected authService: AuthService,
+    protected userService: UserService,
     protected notifier: Notifier,
     protected confirmService: ConfirmService,
     protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
     private accountService: AccountService,
     private videoService: VideoService
   ) {
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 85f7dd30c..af80337ce 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -7,14 +7,13 @@
       <div class="actor-info">
         <div class="actor-names">
           <div class="actor-display-name">{{ account.displayName }}</div>
-          <div class="actor-name">{{ account.nameWithHost }}
-
-          <button ngxClipboard [cbContent]="account.nameWithHostForced" (click)="activateCopiedMessage()"
-                  class="btn btn-outline-secondary btn-sm copy-button"
-          >
-            <span class="glyphicon glyphicon-copy"></span>
-          </button>
-
+          <div class="actor-name">
+            <span>{{ account.nameWithHost }}</span>
+            <button [cdkCopyToClipboard]="account.nameWithHostForced" (click)="activateCopiedMessage()"
+                    class="btn btn-outline-secondary btn-sm copy-button"
+            >
+              <span class="glyphicon glyphicon-copy"></span>
+            </button>
           </div>
           <span *ngIf="accountUser?.blocked" [ngbTooltip]="accountUser.blockedReason" class="badge badge-danger" i18n>Banned</span>
           <span *ngIf="account.mutedByUser" class="badge badge-danger" i18n>Muted</span>
@@ -33,17 +32,17 @@
       </div>
 
       <div class="right-buttons">
-        <a *ngIf="isAccountManageable" routerLink="/my-account" class="btn btn-outline-tertiary mr-2" i18n>Manage</a>
+        <a *ngIf="isAccountManageable && !isInSmallView" routerLink="/my-account" class="btn btn-outline-tertiary mr-2" i18n>Manage account</a>
         <my-subscribe-button *ngIf="videoChannels" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
       </div>
     </div>
 
-    <div class="links">
-      <a i18n routerLink="video-channels" routerLinkActive="active" class="title-page">Video channels</a>
-
-      <a i18n routerLink="videos" routerLinkActive="active" class="title-page">Videos</a>
+    <div class="links w-100">
+      <ng-template #linkTemplate let-item="item">
+        <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
+      </ng-template>
 
-      <a i18n routerLink="about" routerLinkActive="active" class="title-page">About</a>
+      <list-overflow [items]="links" [itemTemplate]="linkTemplate"></list-overflow>
     </div>
   </div>
 
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 96484c9d3..12170e371 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -1,3 +1,9 @@
+// Bootstrap grid utilities require functions, variables and mixins
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+@import 'node_modules/bootstrap/scss/grid';
+
 @import '_variables';
 @import '_mixins';
 
@@ -13,7 +19,16 @@
   display: flex;
   height: max-content;
   margin-left: auto;
-  margin-top: 20px;
+  margin-top: 10px;
+
+  @include media-breakpoint-down(lg) {
+    flex-flow: column-reverse;
+
+    a {
+      margin-top: 0.25rem;
+      margin-right: 0 !important;
+    }
+  }
 
   a {
     @include peertube-button-outline;
@@ -41,3 +56,32 @@ my-user-moderation-dropdown,
   padding: 5px;
   margin-top: -2px;
 }
+
+@media screen and (max-width: $mobile-view) {
+  .sub-menu {
+    .actor {
+      flex-direction: column;
+      align-items: center;
+
+      img,
+      .actor-info .actor-names .actor-display-name {
+        margin-right: 0;
+      }
+
+      .actor-info  {
+        .actor-names {
+          flex-direction: column;
+          align-items: center;
+        }
+
+        my-user-moderation-dropdown {
+          margin-left: 0;
+        }
+
+        .actor-followers {
+          text-align: center;
+        }
+      }
+    }
+  }
+}
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index ad611f221..bf71179f3 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -3,13 +3,15 @@ import { ActivatedRoute } from '@angular/router'
 import { AccountService } from '@app/shared/account/account.service'
 import { Account } from '@app/shared/account/account.model'
 import { RestExtractor, UserService } from '@app/shared'
-import { catchError, distinctUntilChanged, first, map, switchMap, tap } from 'rxjs/operators'
-import { forkJoin, Subscription } from 'rxjs'
+import { catchError, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators'
+import { Subscription } from 'rxjs'
 import { AuthService, Notifier, RedirectService } from '@app/core'
 import { User, UserRight } from '../../../../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { ListOverflowItem } from '@app/shared/misc/list-overflow.component'
+import { ScreenService } from '@app/shared/misc/screen.service'
 
 @Component({
   templateUrl: './accounts.component.html',
@@ -19,6 +21,7 @@ export class AccountsComponent implements OnInit, OnDestroy {
   account: Account
   accountUser: User
   videoChannels: VideoChannel[] = []
+  links: ListOverflowItem[] = []
 
   isAccountManageable = false
   accountFollowerTitle = ''
@@ -34,6 +37,7 @@ export class AccountsComponent implements OnInit, OnDestroy {
     private restExtractor: RestExtractor,
     private redirectService: RedirectService,
     private authService: AuthService,
+    private screenService: ScreenService,
     private i18n: I18n
   ) {
   }
@@ -70,6 +74,12 @@ export class AccountsComponent implements OnInit, OnDestroy {
 
                           err => this.notifier.error(err.message)
                         )
+
+    this.links = [
+      { label: this.i18n('VIDEO CHANNELS'), routerLink: 'video-channels' },
+      { label: this.i18n('VIDEOS'), routerLink: 'videos' },
+      { label: this.i18n('ABOUT'), routerLink: 'about' }
+    ]
   }
 
   ngOnDestroy () {
@@ -83,6 +93,10 @@ export class AccountsComponent implements OnInit, OnDestroy {
     )
   }
 
+  get isInSmallView () {
+    return this.screenService.isInSmallView()
+  }
+
   onUserChanged () {
     this.getUserIfNeeded(this.account)
   }
@@ -96,7 +110,7 @@ export class AccountsComponent implements OnInit, OnDestroy {
   }
 
   subscribersDisplayFor (count: number) {
-    return this.i18n(`{count, plural, =1 {1 subscriber} other {${count} subscribers}}`, { count })
+    return this.i18n('{count, plural, =1 {1 subscriber} other {{{count}} subscribers}}', { count })
   }
 
   private getUserIfNeeded (account: Account) {
diff --git a/client/src/app/+admin/admin.component.html b/client/src/app/+admin/admin.component.html
index 9a3d90c18..76d297c52 100644
--- a/client/src/app/+admin/admin.component.html
+++ b/client/src/app/+admin/admin.component.html
@@ -1,28 +1,10 @@
 <div class="row">
   <div class="sub-menu">
-    <a i18n *ngIf="hasUsersRight()" routerLink="/admin/users" routerLinkActive="active" class="title-page">
-      Users
-    </a>
+    <ng-template #linkTemplate let-item="item">
+      <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ item.label }}</a>
+    </ng-template>
 
-    <a i18n *ngIf="hasServerFollowRight()" routerLink="/admin/follows" routerLinkActive="active" class="title-page">
-      Manage follows
-    </a>
-
-    <a i18n *ngIf="hasVideoAbusesRight() || hasVideoBlacklistRight()" routerLink="/admin/moderation" routerLinkActive="active" class="title-page">
-      Moderation
-    </a>
-
-    <a i18n *ngIf="hasConfigRight()" routerLink="/admin/config" routerLinkActive="active" class="title-page">
-      Configuration
-    </a>
-
-    <a i18n *ngIf="hasPluginsRight()" routerLink="/admin/plugins" routerLinkActive="active" class="title-page">
-      Plugins/Themes
-    </a>
-
-    <a i18n *ngIf="hasJobsRight() || hasLogsRight() || hasDebugRight()" routerLink="/admin/system" routerLinkActive="active" class="title-page">
-      System
-    </a>
+    <list-overflow [items]="items" [itemTemplate]="linkTemplate"></list-overflow>
   </div>
 
   <div class="margin-content">
diff --git a/client/src/app/+admin/admin.component.ts b/client/src/app/+admin/admin.component.ts
index b23999d40..9662522dc 100644
--- a/client/src/app/+admin/admin.component.ts
+++ b/client/src/app/+admin/admin.component.ts
@@ -1,12 +1,28 @@
-import { Component } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 import { UserRight } from '../../../../shared'
 import { AuthService } from '../core/auth/auth.service'
+import { ListOverflowItem } from '@app/shared/misc/list-overflow.component'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   templateUrl: './admin.component.html'
 })
-export class AdminComponent {
-  constructor (private auth: AuthService) {}
+export class AdminComponent implements OnInit {
+  items: ListOverflowItem[] = []
+
+  constructor (
+    private auth: AuthService,
+    private i18n: I18n
+  ) {}
+
+  ngOnInit () {
+    if (this.hasUsersRight()) this.items.push({ label: this.i18n('Users'), routerLink: '/admin/users' })
+    if (this.hasServerFollowRight()) this.items.push({ label: this.i18n('Follows & redundancies'), routerLink: '/admin/follows' })
+    if (this.hasVideoAbusesRight() || this.hasVideoBlacklistRight()) this.items.push({ label: this.i18n('Moderation'), routerLink: '/admin/moderation' })
+    if (this.hasConfigRight()) this.items.push({ label: this.i18n('Configuration'), routerLink: '/admin/config' })
+    if (this.hasPluginsRight()) this.items.push({ label: this.i18n('Plugins/Themes'), routerLink: '/admin/plugins' })
+    if (this.hasJobsRight() || this.hasLogsRight() || this.hasDebugRight()) this.items.push({ label: this.i18n('System'), routerLink: '/admin/system' })
+  }
 
   hasUsersRight () {
     return this.auth.getUser().hasRight(UserRight.MANAGE_USERS)
diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index 9c56b5750..d04313c0a 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -5,7 +5,7 @@ import { TableModule } from 'primeng/table'
 import { SharedModule } from '../shared'
 import { AdminRoutingModule } from './admin-routing.module'
 import { AdminComponent } from './admin.component'
-import { FollowersListComponent, FollowingAddComponent, FollowsComponent } from './follows'
+import { FollowersListComponent, FollowsComponent, VideoRedundanciesListComponent } from './follows'
 import { FollowingListComponent } from './follows/following-list/following-list.component'
 import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersComponent, UserUpdateComponent } from './users'
 import {
@@ -16,7 +16,6 @@ import {
 } from './moderation'
 import { ModerationComponent } from '@app/+admin/moderation/moderation.component'
 import { RedundancyCheckboxComponent } from '@app/+admin/follows/shared/redundancy-checkbox.component'
-import { RedundancyService } from '@app/+admin/follows/shared/redundancy.service'
 import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } from '@app/+admin/moderation/instance-blocklist'
 import { JobsComponent } from '@app/+admin/system/jobs/jobs.component'
 import { JobService, LogsComponent, LogsService, SystemComponent } from '@app/+admin/system'
@@ -27,23 +26,31 @@ import { PluginSearchComponent } from '@app/+admin/plugins/plugin-search/plugin-
 import { PluginShowInstalledComponent } from '@app/+admin/plugins/plugin-show-installed/plugin-show-installed.component'
 import { SelectButtonModule } from 'primeng/selectbutton'
 import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
+import { VideoRedundancyInformationComponent } from '@app/+admin/follows/video-redundancies-list/video-redundancy-information.component'
+import { ChartModule } from 'primeng/chart'
+import { BatchDomainsModalComponent } from './config/shared/batch-domains-modal.component'
+import { VideoAbuseDetailsComponent } from './moderation/video-abuse-list/video-abuse-details.component'
 
 @NgModule({
   imports: [
     AdminRoutingModule,
+
+    SharedModule,
+
     TableModule,
     SelectButtonModule,
-    SharedModule
+    ChartModule
   ],
 
   declarations: [
     AdminComponent,
 
     FollowsComponent,
-    FollowingAddComponent,
     FollowersListComponent,
     FollowingListComponent,
     RedundancyCheckboxComponent,
+    VideoRedundanciesListComponent,
+    VideoRedundancyInformationComponent,
 
     UsersComponent,
     UserCreateComponent,
@@ -54,6 +61,7 @@ import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
     ModerationComponent,
     VideoBlacklistListComponent,
     VideoAbuseListComponent,
+    VideoAbuseDetailsComponent,
     VideoAutoBlacklistListComponent,
     ModerationCommentModalComponent,
     InstanceServerBlocklistComponent,
@@ -70,7 +78,9 @@ import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
     DebugComponent,
 
     ConfigComponent,
-    EditCustomConfigComponent
+    EditCustomConfigComponent,
+
+    BatchDomainsModalComponent
   ],
 
   exports: [
@@ -78,7 +88,6 @@ import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
   ],
 
   providers: [
-    RedundancyService,
     JobService,
     LogsService,
     DebugService,
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 915d60090..5703d5a2e 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -1,671 +1,808 @@
 <form role="form" [formGroup]="form">
 
-  <ngb-tabset class="root-tabset bootstrap">
+  <div ngbNav #nav="ngbNav" class="nav-tabs">
 
-    <ngb-tab i18n-title title="Instance information">
-      <ng-template ngbTabContent>
+    <ng-container ngbNavItem="instance-information">
+      <a ngbNavLink i18n>Instance information</a>
+
+      <ng-template ngbNavContent>
 
         <ng-container formGroupName="instance">
 
-          <div i18n class="inner-form-title">Instance</div>
+          <div class="form-row mt-5"> <!-- instance grid -->
+            <div class="form-group col-12 col-lg-4 col-xl-3">
+              <div i18n class="inner-form-title">INSTANCE</div>
+            </div>
 
-          <div class="form-group">
-            <label i18n for="instanceName">Name</label>
-            <input
-              type="text" id="instanceName"
-              formControlName="name" [ngClass]="{ 'input-error': formErrors.instance.name }"
-            >
-            <div *ngIf="formErrors.instance.name" class="form-error">{{ formErrors.instance.name }}</div>
-          </div>
+            <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
-          <div class="form-group">
-            <label i18n for="instanceShortDescription">Short description</label>
-            <textarea
-              id="instanceShortDescription" formControlName="shortDescription" class="small"
-              [ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }"
-            ></textarea>
-            <div *ngIf="formErrors.instance.shortDescription" class="form-error">{{ formErrors.instance.shortDescription }}</div>
-          </div>
+              <div class="form-group">
+                <label i18n for="instanceName">Name</label>
+                <input
+                  type="text" id="instanceName" class="form-control"
+                  formControlName="name" [ngClass]="{ 'input-error': formErrors.instance.name }"
+                >
+                <div *ngIf="formErrors.instance.name" class="form-error">{{ formErrors.instance.name }}</div>
+              </div>
 
-          <div class="form-group">
-            <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
-            <my-markdown-textarea
-              name="instanceDescription" formControlName="description" textareaWidth="500px" [previewColumn]="true"
-              [classes]="{ 'input-error': formErrors['instance.description'] }"
-            ></my-markdown-textarea>
-            <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div>
-          </div>
+              <div class="form-group">
+                <label i18n for="instanceShortDescription">Short description</label>
+                <textarea
+                  id="instanceShortDescription" formControlName="shortDescription" class="form-control small"
+                  [ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }"
+                ></textarea>
+                <div *ngIf="formErrors.instance.shortDescription" class="form-error">{{ formErrors.instance.shortDescription }}</div>
+              </div>
 
-          <div class="form-group">
-            <label i18n for="instanceCategories">Main instance categories</label>
+              <div class="form-group">
+                <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
+                <my-markdown-textarea
+                  name="instanceDescription" formControlName="description" textareaMaxWidth="500px"
+                  [classes]="{ 'input-error': formErrors['instance.description'] }"
+                ></my-markdown-textarea>
+                <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div>
+              </div>
 
-            <div>
-              <p-multiSelect
-                inputId="instanceCategories" [options]="categoryItems" formControlName="categories" showToggleAll="false"
-                [defaultLabel]="getDefaultCategoryLabel()" [selectedItemsLabel]="getSelectedCategoryLabel()"
-                emptyFilterMessage="No results found" i18n-emptyFilterMessage
-              ></p-multiSelect>
-            </div>
-          </div>
+              <div class="form-group">
+                <label i18n for="instanceCategories">Main instance categories</label>
+
+                <div>
+                  <p-multiSelect
+                    inputId="instanceCategories" [options]="categoryItems" formControlName="categories" [showToggleAll]="false"
+                    [defaultLabel]="getDefaultCategoryLabel()" [selectedItemsLabel]="getSelectedCategoryLabel()"
+                    emptyFilterMessage="No results found" i18n-emptyFilterMessage
+                  ></p-multiSelect>
+                </div>
+              </div>
 
-          <div class="form-group">
-            <label i18n for="instanceLanguages">Main languages you/your moderators speak</label>
+              <div class="form-group">
+                <label i18n for="instanceLanguages">Main languages you/your moderators speak</label>
+
+                <div>
+                  <p-multiSelect
+                    inputId="instanceLanguages" [options]="languageItems" formControlName="languages" [showToggleAll]="false"
+                    [defaultLabel]="getDefaultLanguageLabel()" [selectedItemsLabel]="getSelectedLanguageLabel()"
+                    emptyFilterMessage="No results found" i18n-emptyFilterMessage
+                  ></p-multiSelect>
+                </div>
+              </div>
 
-            <div>
-              <p-multiSelect
-                inputId="instanceLanguages" [options]="languageItems" formControlName="languages" showToggleAll="false"
-                [defaultLabel]="getDefaultLanguageLabel()" [selectedItemsLabel]="getSelectedLanguageLabel()"
-                emptyFilterMessage="No results found" i18n-emptyFilterMessage
-              ></p-multiSelect>
             </div>
           </div>
 
-          <div i18n class="inner-form-title">Moderation & NSFW</div>
+          <div class="form-row mt-4"> <!-- moderation & nsfw grid -->
+            <div class="form-group col-12 col-lg-4 col-xl-3">
+              <div i18n class="inner-form-title">MODERATION & NSFW</div>
+              <div i18n class="inner-for-description">
+                Manage <a routerLink="/admin/users">users</a> to build a moderation team.
+              </div>
+            </div>
 
-          <div class="form-group">
-            <my-peertube-checkbox inputName="instanceIsNSFW" formControlName="isNSFW">
-              <ng-template ptTemplate="label">
-                <ng-container i18n>This instance is dedicated to sensitive or NSFW content</ng-container>
-              </ng-template>
+            <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
-              <ng-template ptTemplate="help">
-                <ng-container i18n>
-                  Enabling it will allow other administrators to know that you are mainly federating sensitive content.<br /><br />
-                  Moreover, the NSFW checkbox on video upload will be automatically checked by default.
-                </ng-container>
-              </ng-template>
-            </my-peertube-checkbox>
-          </div>
+              <div class="form-group">
+                <my-peertube-checkbox inputName="instanceIsNSFW" formControlName="isNSFW">
+                  <ng-template ptTemplate="label">
+                    <ng-container i18n>This instance is dedicated to sensitive or NSFW content</ng-container>
+                  </ng-template>
 
-          <div class="form-group">
-            <label i18n for="instanceDefaultNSFWPolicy">Policy on videos containing sensitive content</label>
+                  <ng-template ptTemplate="help">
+                    <ng-container i18n>
+                      Enabling it will allow other administrators to know that you are mainly federating sensitive content.<br /><br />
+                      Moreover, the NSFW checkbox on video upload will be automatically checked by default.
+                    </ng-container>
+                  </ng-template>
+                </my-peertube-checkbox>
+              </div>
 
-            <my-help>
-              <ng-template ptTemplate="customHtml">
-                <ng-container i18n>
-                  With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
-                </ng-container>
-              </ng-template>
-            </my-help>
-
-            <div class="peertube-select-container">
-              <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy">
-                <option i18n value="do_not_list">Do not list</option>
-                <option i18n value="blur">Blur thumbnails</option>
-                <option i18n value="display">Display</option>
-              </select>
-            </div>
-            <div *ngIf="formErrors.instance.defaultNSFWPolicy" class="form-error">{{ formErrors.instance.defaultNSFWPolicy }}</div>
-          </div>
+              <div class="form-group">
+                <label i18n for="instanceDefaultNSFWPolicy">Policy on videos containing sensitive content</label>
 
-          <div class="form-group">
-            <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
-            <my-markdown-textarea
-              name="instanceTerms" formControlName="terms" textareaWidth="500px" [previewColumn]="true"
-              [ngClass]="{ 'input-error': formErrors['instance.terms'] }"
-            ></my-markdown-textarea>
-            <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
-          </div>
+                <my-help>
+                  <ng-template ptTemplate="customHtml">
+                    <ng-container i18n>
+                      With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
+                    </ng-container>
+                  </ng-template>
+                </my-help>
+
+                <div class="peertube-select-container">
+                  <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy" class="form-control">
+                    <option i18n value="undefined" disabled>Policy for sensitive videos</option>
+                    <option i18n value="do_not_list">Do not list</option>
+                    <option i18n value="blur">Blur thumbnails</option>
+                    <option i18n value="display">Display</option>
+                  </select>
+                </div>
+                <div *ngIf="formErrors.instance.defaultNSFWPolicy" class="form-error">{{ formErrors.instance.defaultNSFWPolicy }}</div>
+              </div>
 
-          <div class="form-group">
-            <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
-            <my-markdown-textarea
-              name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaWidth="500px" [previewColumn]="true"
-              [ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }"
-            ></my-markdown-textarea>
-            <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div>
-          </div>
+              <div class="form-group">
+                <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
+                <my-markdown-textarea
+                  name="instanceTerms" formControlName="terms" textareaMaxWidth="500px"
+                  [ngClass]="{ 'input-error': formErrors['instance.terms'] }"
+                ></my-markdown-textarea>
+                <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
+              </div>
 
-          <div class="form-group">
-            <label i18n for="instanceModerationInformation">Moderation information</label><my-help helpType="markdownText"></my-help>
-            <div i18n class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div>
+              <div class="form-group">
+                <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
+                <my-markdown-textarea
+                  name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaMaxWidth="500px"
+                  [ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }"
+                ></my-markdown-textarea>
+                <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div>
+              </div>
 
-            <my-markdown-textarea
-              name="instanceModerationInformation" formControlName="moderationInformation" textareaWidth="500px" [previewColumn]="true"
-              [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }"
-            ></my-markdown-textarea>
-            <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
+              <div class="form-group">
+                <label i18n for="instanceModerationInformation">Moderation information</label><my-help helpType="markdownText"></my-help>
+                <div i18n class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div>
+
+                <my-markdown-textarea
+                  name="instanceModerationInformation" formControlName="moderationInformation" textareaMaxWidth="500px"
+                  [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }"
+                ></my-markdown-textarea>
+                <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
+              </div>
+
+            </div>
           </div>
 
-          <div i18n class="inner-form-title">You and your instance</div>
+          <div class="form-row mt-4"> <!-- you and your instance grid -->
+            <div class="form-group col-12 col-lg-4 col-xl-3">
+              <div i18n class="inner-form-title">YOU AND YOUR INSTANCE</div>
+            </div>
 
-          <div class="form-group">
-            <label i18n for="instanceAdministrator">Who is behind the instance?</label>
-            <div i18n class="label-small-info">A single person? A non-profit? A company?</div>
+            <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
-            <my-markdown-textarea
-              name="instanceAdministrator" formControlName="administrator" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true"
-              [classes]="{ 'input-error': formErrors['instance.administrator'] }"
-            ></my-markdown-textarea>
+              <div class="form-group">
+                <label i18n for="instanceAdministrator">Who is behind the instance?</label>
+                <div i18n class="label-small-info">A single person? A non-profit? A company?</div>
 
-            <div *ngIf="formErrors.instance.administrator" class="form-error">{{ formErrors.instance.administrator }}</div>
-          </div>
+                <my-markdown-textarea
+                  name="instanceAdministrator" formControlName="administrator" textareaMaxWidth="500px" textareaHeight="75px"
+                  [classes]="{ 'input-error': formErrors['instance.administrator'] }"
+                ></my-markdown-textarea>
 
-          <div class="form-group">
-            <label i18n for="instanceCreationReason">Why did you create this instance?</label>
-            <div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
+                <div *ngIf="formErrors.instance.administrator" class="form-error">{{ formErrors.instance.administrator }}</div>
+              </div>
 
-            <textarea
-              id="instanceCreationReason" formControlName="creationReason" class="small"
-              [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
-            ></textarea>
-            <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
-          </div>
+              <div class="form-group">
+                <label i18n for="instanceCreationReason">Why did you create this instance?</label>
+                <div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
+
+                <textarea
+                  id="instanceCreationReason" formControlName="creationReason" class="small" class="form-control"
+                  [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
+                ></textarea>
+                <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
+              </div>
 
-          <div class="form-group">
-            <label i18n for="instanceMaintenanceLifetime">How long do you plan to maintain this instance?</label>
-            <div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
+              <div class="form-group">
+                <label i18n for="instanceMaintenanceLifetime">How long do you plan to maintain this instance?</label>
+                <div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
+
+                <textarea
+                  id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" class="form-control small"
+                  [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
+                ></textarea>
+                <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
+              </div>
 
-            <textarea
-              id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" class="small"
-              [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
-            ></textarea>
-            <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
+              <div class="form-group">
+                <label i18n for="instanceBusinessModel">How will you finance the PeerTube server?</label>
+                <div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
+
+                <textarea
+                  id="instanceBusinessModel" formControlName="businessModel" class="form-control small"
+                  [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
+                ></textarea>
+                <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
+              </div>
+
+            </div>
           </div>
 
-          <div class="form-group">
-            <label i18n for="instanceBusinessModel">How will you finance the PeerTube server?</label>
-            <div i18n class="label-small-info">With your own funds? With users donations? Advertising?</div>
+          <div class="form-row mt-4"> <!-- other information grid -->
+            <div class="form-group col-12 col-lg-4 col-xl-3">
+              <div i18n class="inner-form-title">OTHER INFORMATION</div>
+            </div>
 
-            <textarea
-              id="instanceBusinessModel" formControlName="businessModel" class="small"
-              [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
-            ></textarea>
-            <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
-          </div>
+            <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
-          <div i18n class="inner-form-title">Other information</div>
+              <div class="form-group">
+                <label i18n for="instanceHardwareInformation">What server/hardware does the instance run on?</label>
+                <div i18n class="label-small-info">i.e. 2vCore 2GB RAM, a direct the link to the server you rent, etc.</div>
 
-          <div class="form-group">
-            <label i18n for="instanceHardwareInformation">What server/hardware does the instance run on?</label>
-            <div i18n class="label-small-info">2vCore 2GB RAM/or directly the link to the server you rent etc</div>
+                <my-markdown-textarea
+                  name="instanceHardwareInformation" formControlName="hardwareInformation" textareaMaxWidth="500px" textareaHeight="75px"
+                  [classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }"
+                ></my-markdown-textarea>
 
-            <my-markdown-textarea
-              name="instanceHardwareInformation" formControlName="hardwareInformation" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true"
-              [classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }"
-            ></my-markdown-textarea>
+                <div *ngIf="formErrors.instance.hardwareInformation" class="form-error">{{ formErrors.instance.hardwareInformation }}</div>
+              </div>
 
-            <div *ngIf="formErrors.instance.hardwareInformation" class="form-error">{{ formErrors.instance.hardwareInformation }}</div>
+            </div>
           </div>
 
         </ng-container>
       </ng-template>
-    </ngb-tab>
-
-    <ngb-tab i18n-title title="Basic configuration">
-      <ng-template ngbTabContent>
+    </ng-container>
 
-        <div i18n class="inner-form-title">Theme & Default route</div>
+    <ng-container ngbNavItem="basic-configuration">
+      <a ngbNavLink i18n>Basic configuration</a>
 
-        <ng-container formGroupName="theme">
-          <div class="form-group">
-            <label i18n for="themeDefault">Global theme</label>
+      <ng-template ngbNavContent>
 
-            <div class="peertube-select-container">
-              <select formControlName="default" id="themeDefault">
-                <option i18n value="default">default</option>
-
-                <option *ngFor="let theme of availableThemes" [value]="theme">{{ theme }}</option>
-              </select>
+        <div class="form-row mt-5"> <!-- appearance grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
+            <div i18n class="inner-form-title">APPEARANCE</div>
+            <div i18n class="inner-for-description">
+              Use <a routerLink="/admin/plugins">plugins & themes</a> for more involved changes, or <a routerLink="/admin/config/edit-custom" fragment="customizations" (click)="gotoAnchor()">add slight customizations</a>.
             </div>
           </div>
-        </ng-container>
-
 
-        <div class="form-group" formGroupName="instance">
-          <label i18n for="instanceDefaultClientRoute">Default client route</label>
-          <div class="peertube-select-container">
-            <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute">
-              <option i18n value="/videos/overview">Discover videos</option>
-              <option i18n value="/videos/trending">Trending videos</option>
-              <option i18n value="/videos/most-liked">Most liked videos</option>
-              <option i18n value="/videos/recently-added">Recently added videos</option>
-              <option i18n value="/videos/local">Local videos</option>
-            </select>
-          </div>
-          <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error">{{ formErrors.instance.defaultClientRoute }}</div>
-        </div>
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
-        <div i18n class="inner-form-title">Signup</div>
-
-        <ng-container formGroupName="signup">
-          <div class="form-group">
-            <my-peertube-checkbox
-              inputName="signupEnabled" formControlName="enabled"
-              i18n-labelText labelText="Signup enabled"
-            >
-              <ng-container ngProjectAs="extra">
-                <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }"
-                  inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
-                  i18n-labelText labelText="Signup requires email verification"
-                ></my-peertube-checkbox>
-
-                <div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3">
-                  <label i18n for="signupLimit">Signup limit</label>
-                  <input
-                    type="text" id="signupLimit"
-                    formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
-                  >
-                  <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
-                </div>
-              </ng-container>
-            </my-peertube-checkbox>
-          </div>
-        </ng-container>
+            <ng-container formGroupName="theme">
+              <div class="form-group">
+                <label i18n for="themeDefault">Theme</label>
 
+                <div class="peertube-select-container">
+                  <select formControlName="default" id="themeDefault" class="form-control">
+                    <option i18n value="default">default</option>
 
-        <div i18n class="inner-form-title">Users</div>
+                    <option *ngFor="let theme of availableThemes" [value]="theme">{{ theme }}</option>
+                  </select>
+                </div>
+              </div>
+            </ng-container>
 
-        <ng-container formGroupName="user">
-          <div class="form-group">
-            <label i18n for="userVideoQuota">Default video quota per user</label>
-            <div class="peertube-select-container">
-              <select id="userVideoQuota" formControlName="videoQuota">
-                <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
-                  {{ videoQuotaOption.label }}
-                </option>
-              </select>
+            <div class="form-group" formGroupName="instance">
+              <label i18n for="instanceDefaultClientRoute">Landing page</label>
+              <div class="peertube-select-container">
+                <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute" class="form-control">
+                  <option i18n value="/videos/overview">Discover videos</option>
+                  <option i18n value="/videos/trending">Trending videos</option>
+                  <option i18n value="/videos/most-liked">Most liked videos</option>
+                  <option i18n value="/videos/recently-added">Recently added videos</option>
+                  <option i18n value="/videos/local">Local videos</option>
+                </select>
+              </div>
+              <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error">{{ formErrors.instance.defaultClientRoute }}</div>
             </div>
-            <div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</div>
+
           </div>
+        </div>
 
-          <div class="form-group">
-            <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
-            <div class="peertube-select-container">
-              <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily">
-                <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
-                  {{ videoQuotaDailyOption.label }}
-                </option>
-              </select>
+        <div class="form-row mt-4"> <!-- new users grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
+            <div i18n class="inner-form-title">NEW USERS</div>
+            <div i18n class="inner-for-description">
+              Manage <a routerLink="/admin/users">users</a> to set their quota individually.
             </div>
-            <div *ngIf="formErrors.user.videoQuotaDaily" class="form-error">{{ formErrors.user.videoQuotaDaily }}</div>
           </div>
-        </ng-container>
 
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
-        <div i18n class="inner-form-title">Import</div>
+            <ng-container formGroupName="signup">
+              <div class="form-group">
+                <my-peertube-checkbox
+                  inputName="signupEnabled" formControlName="enabled"
+                  i18n-labelText labelText="Signup enabled"
+                >
+                  <ng-container ngProjectAs="description">
+                    <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
+                  </ng-container>
+                  <ng-container ngProjectAs="extra">
+                    <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }"
+                      inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
+                      i18n-labelText labelText="Signup requires email verification"
+                    ></my-peertube-checkbox>
+
+                    <div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3">
+                      <label i18n for="signupLimit">Signup limit</label>
+                      <input
+                        type="number" min="-1" id="signupLimit" class="form-control"
+                        formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
+                      >
+                      <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
+                      <small *ngIf="form.value['signup']['limit'] === -1" class="text-muted">Signup won't be limited to a fixed number of users.</small>
+                    </div>
+                  </ng-container>
+                </my-peertube-checkbox>
+              </div>
+            </ng-container>
 
-        <ng-container formGroupName="import">
-          <ng-container formGroupName="videos">
+            <ng-container formGroupName="user">
+              <div class="form-group">
+                <label i18n for="userVideoQuota">Default video quota per user</label>
+                <div class="peertube-select-container">
+                  <select id="userVideoQuota" formControlName="videoQuota" class="form-control">
+                    <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value" [disabled]="videoQuotaOption.disabled">
+                      {{ videoQuotaOption.label }}
+                    </option>
+                  </select>
+                </div>
+                <div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</div>
+              </div>
 
-            <div class="form-group" formGroupName="http">
-              <my-peertube-checkbox
-                inputName="importVideosHttpEnabled" formControlName="enabled"
-                i18n-labelText labelText="Allow import with HTTP URL (i.e. YouTube)"
-              ></my-peertube-checkbox>
-            </div>
+              <div class="form-group">
+                <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
+                <div class="peertube-select-container">
+                  <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
+                    <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value" [disabled]="videoQuotaDailyOption.disabled">
+                      {{ videoQuotaDailyOption.label }}
+                    </option>
+                  </select>
+                </div>
+                <div *ngIf="formErrors.user.videoQuotaDaily" class="form-error">{{ formErrors.user.videoQuotaDaily }}</div>
+              </div>
+            </ng-container>
 
-            <div class="form-group" formGroupName="torrent">
-              <my-peertube-checkbox
-                inputName="importVideosTorrentEnabled" formControlName="enabled"
-                i18n-labelText labelText="Allow import with a torrent file or a magnet URI"
-              ></my-peertube-checkbox>
-            </div>
+          </div>
+        </div>
 
-          </ng-container>
-        </ng-container>
+        <div class="form-row mt-4"> <!-- new videos grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
+            <div i18n class="inner-form-title">NEW VIDEOS</div>
+          </div>
 
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
-        <div i18n class="inner-form-title">Auto-blacklist</div>
+            <ng-container formGroupName="import">
+              <ng-container formGroupName="videos">
 
-        <ng-container formGroupName="autoBlacklist">
-          <ng-container formGroupName="videos">
-            <ng-container formGroupName="ofUsers">
+                <div class="form-group" formGroupName="http">
+                  <my-peertube-checkbox
+                    inputName="importVideosHttpEnabled" formControlName="enabled"
+                    i18n-labelText labelText="Allow import with HTTP URL (i.e. YouTube)"
+                  ></my-peertube-checkbox>
+                </div>
 
-              <div class="form-group">
-                <my-peertube-checkbox
-                  inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled"
-                  i18n-labelText labelText="Blacklist new videos automatically"
-                >
-                <ng-container ngProjectAs="description">
-                  <span i18n>Videos of regular users will stay private until a moderator reviews them. Can be overriden per user.</span>
-                </ng-container>
-              </my-peertube-checkbox>
-              </div>
+                <div class="form-group" formGroupName="torrent">
+                  <my-peertube-checkbox
+                    inputName="importVideosTorrentEnabled" formControlName="enabled"
+                    i18n-labelText labelText="Allow import with a torrent file or a magnet URI"
+                  ></my-peertube-checkbox>
+                </div>
 
+              </ng-container>
             </ng-container>
-          </ng-container>
-        </ng-container>
 
+            <ng-container formGroupName="autoBlacklist">
+              <ng-container formGroupName="videos">
+                <ng-container formGroupName="ofUsers">
+
+                  <div class="form-group">
+                    <my-peertube-checkbox
+                      inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled"
+                      i18n-labelText labelText="Blacklist new videos automatically"
+                    >
+                    <ng-container ngProjectAs="description">
+                      <span i18n>Unless a user is marked as trusted, their videos will stay private until a moderator reviews them.</span>
+                    </ng-container>
+                  </my-peertube-checkbox>
+                  </div>
 
-        <div i18n class="inner-form-title">Instance followers</div>
+                </ng-container>
+              </ng-container>
+            </ng-container>
 
-        <ng-container formGroupName="followers">
-          <ng-container formGroupName="instance">
+          </div>
+        </div>
 
-            <div class="form-group">
-              <my-peertube-checkbox
-                inputName="followersInstanceEnabled" formControlName="enabled"
-                i18n-labelText labelText="Other instances can follow your instance"
-              ></my-peertube-checkbox>
+        <div class="form-row mt-4"> <!-- federation grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
+            <div i18n class="inner-form-title">FEDERATION</div>
+            <div i18n class="inner-form-description">
+              Manage <a routerLink="/admin/follows">relations</a> with other instances.
             </div>
+          </div>
 
-            <div class="form-group">
-              <my-peertube-checkbox
-                inputName="followersInstanceManualApproval" formControlName="manualApproval"
-                i18n-labelText labelText="Manually approve new instance followers"
-              ></my-peertube-checkbox>
-            </div>
-          </ng-container>
-        </ng-container>
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
-        <div i18n class="inner-form-title">Instance followings</div>
+            <ng-container formGroupName="followers">
+              <ng-container formGroupName="instance">
 
-        <ng-container formGroupName="followings">
-          <ng-container formGroupName="instance">
+                <div class="form-group">
+                  <my-peertube-checkbox
+                    inputName="followersInstanceEnabled" formControlName="enabled"
+                    i18n-labelText labelText="Other instances can follow yours"
+                  ></my-peertube-checkbox>
+                </div>
 
-            <ng-container formGroupName="autoFollowBack">
-              <div class="form-group">
-                <my-peertube-checkbox
-                  inputName="followingsInstanceAutoFollowBackEnabled" formControlName="enabled"
-                  i18n-labelText labelText="Automatically follow other instances that follow you"
-                >
-                  <ng-container ngProjectAs="description">
-                    <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
-                  </ng-container>
-                </my-peertube-checkbox>
-              </div>
+                <div class="form-group">
+                  <my-peertube-checkbox
+                    inputName="followersInstanceManualApproval" formControlName="manualApproval"
+                    i18n-labelText labelText="Manually approve new instance followers"
+                  ></my-peertube-checkbox>
+                </div>
+              </ng-container>
             </ng-container>
 
-            <ng-container formGroupName="autoFollowIndex">
-              <div class="form-group">
-                <my-peertube-checkbox
-                  inputName="followingsInstanceAutoFollowIndexEnabled" formControlName="enabled"
-                  i18n-labelText labelText="Automatically follow instances of the public index"
-                >
-                  <ng-container ngProjectAs="description">
-                    <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
-                  </ng-container>
+            <ng-container formGroupName="followings">
+              <ng-container formGroupName="instance">
+
+                <ng-container formGroupName="autoFollowBack">
+                  <div class="form-group">
+                    <my-peertube-checkbox
+                      inputName="followingsInstanceAutoFollowBackEnabled" formControlName="enabled"
+                      i18n-labelText labelText="Automatically follow back instances"
+                    >
+                      <ng-container ngProjectAs="description">
+                        <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
+                      </ng-container>
+                    </my-peertube-checkbox>
+                  </div>
+                </ng-container>
 
-                  <ng-container ngProjectAs="extra">
-                    <div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled() }">
-                      <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
-                      <input
-                        type="text" id="followingsInstanceAutoFollowIndexUrl"
-                        formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
-                      >
-                      <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
-                    </div>
-                  </ng-container>
-                </my-peertube-checkbox>
-              </div>
+                <ng-container formGroupName="autoFollowIndex">
+                  <div class="form-group">
+                    <my-peertube-checkbox
+                      inputName="followingsInstanceAutoFollowIndexEnabled" formControlName="enabled"
+                      i18n-labelText labelText="Automatically follow instances of a public index"
+                    >
+                      <ng-container ngProjectAs="description">
+                        <p i18n>⚠️ This functionality requires a lot of attention and extra moderation.</p>
+
+                        <span i18n>
+                          You should only follow indexes you trust, or <a href="https://framagit.org/framasoft/peertube/instances-peertube#peertube-auto-follow">host your own</a>.
+                        </span>
+                      </ng-container>
+
+                      <ng-container ngProjectAs="extra">
+                        <div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled() }">
+                          <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
+                          <input
+                            type="text" id="followingsInstanceAutoFollowIndexUrl" class="form-control"
+                            formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
+                          >
+                          <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
+                        </div>
+                      </ng-container>
+                    </my-peertube-checkbox>
+                  </div>
 
+                </ng-container>
+              </ng-container>
             </ng-container>
-          </ng-container>
-        </ng-container>
 
+          </div>
+        </div>
+
+        <div class="form-row mt-4"> <!-- administrators grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
+            <div i18n class="inner-form-title">ADMINISTRATORS</div>
+          </div>
 
-        <div i18n class="inner-form-title">Administrator</div>
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
-        <div class="form-group" formGroupName="admin">
-          <label i18n for="adminEmail">Admin email</label>
-          <input
-            type="text" id="adminEmail"
-            formControlName="email" [ngClass]="{ 'input-error': formErrors['admin.email'] }"
-          >
-          <div *ngIf="formErrors.admin.email" class="form-error">{{ formErrors.admin.email }}</div>
-        </div>
+            <div class="form-group" formGroupName="admin">
+              <label i18n for="adminEmail">Admin email</label>
+              <input
+                type="text" id="adminEmail" class="form-control"
+                formControlName="email" [ngClass]="{ 'input-error': formErrors['admin.email'] }"
+              >
+              <div *ngIf="formErrors.admin.email" class="form-error">{{ formErrors.admin.email }}</div>
+            </div>
+
+            <div class="form-group" formGroupName="contactForm">
+              <my-peertube-checkbox
+                inputName="enableContactForm" formControlName="enabled"
+                i18n-labelText labelText="Enable contact form"
+              ></my-peertube-checkbox>
+            </div>
 
-        <div class="form-group" formGroupName="contactForm">
-          <my-peertube-checkbox
-            inputName="enableContactForm" formControlName="enabled"
-            i18n-labelText labelText="Enable contact form"
-          ></my-peertube-checkbox>
+          </div>
         </div>
 
       </ng-template>
-    </ngb-tab>
-
-    <ngb-tab i18n-title title="Services">
-      <ng-template ngbTabContent>
-        <div i18n class="inner-form-title">Twitter</div>
+    </ng-container>
 
-        <ng-container formGroupName="services">
-          <ng-container formGroupName="twitter">
+    <ng-container ngbNavItem="services">
+      <a ngbNavLink i18n>Services</a>
 
-            <div class="form-group">
-              <label i18n for="signupLimit">Your Twitter username</label>
+      <ng-template ngbNavContent>
 
-              <my-help>
-                <ng-template ptTemplate="customHtml">
-                  <ng-container i18n>Indicates the Twitter account for the website or platform on which the content was published.</ng-container>
-                </ng-template>
-              </my-help>
-
-              <input
-                type="text" id="servicesTwitterUsername"
-                formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }"
-              >
-              <div *ngIf="formErrors.services.twitter.username" class="form-error">{{ formErrors.services.twitter.username }}</div>
+        <div class="form-row mt-5"> <!-- twitter grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
+            <div i18n class="inner-form-title">TWITTER</div>
+            <div i18n class="inner-form-description">
+              Optional. If any, provide the Twitter account representing your instance to improve link previews.
             </div>
+          </div>
 
-            <div class="form-group">
-              <my-peertube-checkbox inputName="servicesTwitterWhitelisted" formControlName="whitelisted">
-                <ng-template ptTemplate="label">
-                  <ng-container i18n>Instance whitelisted by Twitter</ng-container>
-                </ng-template>
-
-                <ng-template ptTemplate="help">
-                  <ng-container i18n>
-                    If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
-                    If the instance is not whitelisted, we use an image link card that will redirect on your PeerTube instance.<br /><br />
-                    Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on
-                    <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a>
-                    to see if you instance is whitelisted.
-                  </ng-container>
-                </ng-template>
-              </my-peertube-checkbox>
-            </div>
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
-          </ng-container>
-        </ng-container>
+            <ng-container formGroupName="services">
+              <ng-container formGroupName="twitter">
 
-    </ng-template>
-    </ngb-tab>
+                <div class="form-group">
+                  <label i18n for="signupLimit">Your Twitter username</label>
 
-    <ngb-tab i18n-title title="Advanced configuration">
-      <ng-template ngbTabContent>
+                  <input
+                    type="text" id="servicesTwitterUsername" class="form-control"
+                    formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }"
+                  >
+                  <div *ngIf="formErrors.services.twitter.username" class="form-error">{{ formErrors.services.twitter.username }}</div>
+                </div>
 
-        <div i18n class="inner-form-title">Transcoding</div>
+                <div class="form-group">
+                  <my-peertube-checkbox inputName="servicesTwitterWhitelisted" formControlName="whitelisted">
+                    <ng-template ptTemplate="label">
+                      <ng-container i18n>Instance whitelisted by Twitter</ng-container>
+                    </ng-template>
+
+                    <ng-template ptTemplate="help">
+                      <ng-container i18n>
+                        If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
+                        If the instance is not whitelisted, we use an image link card that will redirect on your PeerTube instance.<br /><br />
+                        Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on
+                        <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a>
+                        to see if you instance is whitelisted.
+                      </ng-container>
+                    </ng-template>
+                  </my-peertube-checkbox>
+                </div>
 
-        <ng-container formGroupName="transcoding">
-          <div class="form-group">
-            <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled">
-              <ng-template ptTemplate="label">
-                <ng-container i18n>Transcoding enabled</ng-container>
-              </ng-template>
+              </ng-container>
+            </ng-container>
 
-              <ng-template ptTemplate="help">
-                <ng-container i18n>If you disable transcoding, many videos from your users will not work!</ng-container>
-              </ng-template>
-            </my-peertube-checkbox>
           </div>
+        </div>
+      </ng-template>
+    </ng-container>
 
-          <ng-container *ngIf="isTranscodingEnabled()">
+    <ng-container ngbNavItem="advanced-configuration">
+      <a ngbNavLink i18n>Advanced configuration</a>
 
-            <div class="form-group">
-              <my-peertube-checkbox
-                inputName="transcodingAllowAdditionalExtensions" formControlName="allowAdditionalExtensions"
-                i18n-labelText labelText="Allow additional extensions"
-              >
-                <ng-template ptTemplate="help">
-                  <ng-container i18n>Allow your users to upload .mkv, .mov, .avi and .flv videos</ng-container>
-                </ng-template>
-              </my-peertube-checkbox>
-            </div>
+      <ng-template ngbNavContent>
 
-            <div class="form-group">
-              <my-peertube-checkbox
-                inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
-                i18n-labelText labelText="Allow audio files upload"
-              >
-                <ng-template ptTemplate="help">
-                  <ng-container i18n>Allow your users to upload audio files that will be merged with the preview file on upload</ng-container>
-                </ng-template>
-              </my-peertube-checkbox>
+        <div class="form-row mt-5"> <!-- transcoding grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
+            <div i18n class="inner-form-title">TRANSCODING</div>
+            <div i18n class="inner-form-description">
+              Process uploaded videos so that they are in a streamable form that any device can play. Though costly in
+              resources, this is a critical part of PeerTube, so tread carefully.
             </div>
+          </div>
 
-            <ng-container formGroupName="webtorrent">
-              <div class="form-group" >
-                <my-peertube-checkbox
-                  inputName="transcodingWebTorrentEnabled" formControlName="enabled"
-                  i18n-labelText labelText="WebTorrent support enabled"
-                >
-                  <ng-template ptTemplate="help">
-                    <ng-container i18n>
-                      <strong>Experimental, we suggest you to not disable webtorrent support for now</strong>
-
-                      <p>If you also enabled HLS support, it will multiply videos storage by 2</p>
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
-                      <br />
+            <ng-container formGroupName="transcoding">
 
-                      <strong>If disabled, breaks federation with PeerTube instances < 2.1</strong>
-                    </ng-container>
+              <div class="form-group">
+                <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled">
+                  <ng-template ptTemplate="label">
+                    <ng-container i18n>Transcoding enabled</ng-container>
                   </ng-template>
-                </my-peertube-checkbox>
-              </div>
-            </ng-container>
 
-            <ng-container formGroupName="hls">
-              <div class="form-group" >
-                <my-peertube-checkbox
-                  inputName="transcodingHlsEnabled" formControlName="enabled"
-                  i18n-labelText labelText="HLS support enabled"
-                >
                   <ng-template ptTemplate="help">
-                    <ng-container i18n>
-                      <strong>Requires ffmpeg >= 4.1</strong>
+                    <ng-container i18n>If you disable transcoding, many videos from your users will not work!</ng-container>
+                  </ng-template>
 
-                      <p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with the current default player:</p>
-                      <ul>
-                        <li>Resolution change is smoother</li>
-                        <li>Faster playback in particular with long videos</li>
-                        <li>More stable playback (less bugs/infinite loading)</li>
-                      </ul>
+                  <ng-container ngProjectAs="extra">
 
-                      <p>If you also enabled WebTorrent support, it will multiply videos storage by 2</p>
+                    <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+                      <my-peertube-checkbox
+                        inputName="transcodingAllowAdditionalExtensions" formControlName="allowAdditionalExtensions"
+                        i18n-labelText labelText="Allow additional extensions"
+                      >
+                        <ng-container ngProjectAs="description">
+                          <span i18n>Allows users to upload .mkv, .mov, .avi and .flv videos.</span>
+                        </ng-container>
+                      </my-peertube-checkbox>
+                    </div>
+
+                    <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+                      <my-peertube-checkbox
+                        inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
+                        i18n-labelText labelText="Allow audio files upload"
+                      >
+                        <ng-container ngProjectAs="description">
+                          <span i18n>Allows users to upload audio files that will be merged with the preview file on upload.</span>
+                        </ng-container>
+                      </my-peertube-checkbox>
+                    </div>
+
+                    <ng-container formGroupName="webtorrent">
+                      <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+                        <my-peertube-checkbox
+                          inputName="transcodingWebTorrentEnabled" formControlName="enabled"
+                          i18n-labelText labelText="WebTorrent support enabled"
+                        >
+                          <ng-template ptTemplate="help">
+                            <ng-container i18n>
+                              <strong>Experimental, we suggest you to not disable webtorrent support for now</strong>
+
+                              <p>If you also enabled HLS support, it will multiply videos storage by 2</p>
+
+                              <br />
+
+                              <strong>If disabled, breaks federation with PeerTube instances < 2.1</strong>
+                            </ng-container>
+                          </ng-template>
+                        </my-peertube-checkbox>
+                      </div>
                     </ng-container>
-                  </ng-template>
+
+                    <ng-container formGroupName="hls">
+                      <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+                        <my-peertube-checkbox
+                          inputName="transcodingHlsEnabled" formControlName="enabled"
+                          i18n-labelText labelText="HLS support enabled"
+                        >
+                          <ng-template ptTemplate="help">
+                            <ng-container i18n>
+                              <strong>Requires ffmpeg >= 4.1</strong>
+
+                              <p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with the current default player:</p>
+                              <ul>
+                                <li>Resolution change is smoother</li>
+                                <li>Faster playback in particular with long videos</li>
+                                <li>More stable playback (less bugs/infinite loading)</li>
+                              </ul>
+
+                              <p>If you also enabled WebTorrent support, it will multiply videos storage by 2</p>
+                            </ng-container>
+                          </ng-template>
+                        </my-peertube-checkbox>
+                      </div>
+                    </ng-container>
+
+                  </ng-container>
                 </my-peertube-checkbox>
               </div>
-            </ng-container>
 
-            <div class="form-group">
-              <label i18n for="transcodingThreads">Transcoding threads</label>
-              <div class="peertube-select-container">
-                <select id="transcodingThreads" formControlName="threads">
-                  <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
-                    {{ transcodingThreadOption.label }}
-                  </option>
-                </select>
+              <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+                <label i18n for="transcodingThreads">Transcoding threads</label>
+                <div class="peertube-select-container">
+                  <select id="transcodingThreads" formControlName="threads" class="form-control">
+                    <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
+                      {{ transcodingThreadOption.label }}
+                    </option>
+                  </select>
+                </div>
+                <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
               </div>
-              <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
-            </div>
 
-            <ng-container formGroupName="resolutions">
-              <div class="form-group" *ngFor="let resolution of resolutions">
-                <my-peertube-checkbox
-                  [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
-                  i18n-labelText labelText="Resolution {{resolution.label}} enabled"
-                >
-                  <ng-template *ngIf="resolution.description" ptTemplate="help">
-                    <div [innerHTML]="resolution.description"></div>
-                  </ng-template>
-                </my-peertube-checkbox>
-              </div>
-            </ng-container>
+              <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
 
-          </ng-container>
-        </ng-container>
+                <label i18n for="transcodingThreads">Resolutions to generate</label>
 
-        <div class="inner-form-title">
-          <ng-container i18n>Cache</ng-container>
+                <div class="ml-2 mt-2 d-flex flex-column">
+                  <ng-container formGroupName="resolutions">
+                    <div class="form-group" *ngFor="let resolution of resolutions">
+                      <my-peertube-checkbox
+                        [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
+                        labelText="{{resolution.label}}"
+                      >
+                        <ng-template *ngIf="resolution.description" ptTemplate="help">
+                          <div [innerHTML]="resolution.description"></div>
+                        </ng-template>
+                      </my-peertube-checkbox>
+                    </div>
+                  </ng-container>
+                </div>
 
-          <my-help>
-            <ng-template ptTemplate="customHtml">
-              <ng-container i18n>Some files are not federated (previews, captions). We fetch them directly from the origin instance and cache them.</ng-container>
-            </ng-template>
-          </my-help>
-        </div>
+              </div>
+
+            </ng-container>
 
-        <ng-container formGroupName="cache">
-          <div class="form-group" formGroupName="previews">
-            <label i18n for="cachePreviewsSize">Previews cache size</label>
-            <input
-              type="text" id="cachePreviewsSize"
-              formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }"
-            >
-            <div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div>
           </div>
+        </div>
 
-          <div class="form-group" formGroupName="captions">
-            <label i18n for="cacheCaptionsSize">Video captions cache size</label>
-            <input
-              type="text" id="cacheCaptionsSize"
-              formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }"
-            >
-            <div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div>
+        <div class="form-row mt-4"> <!-- cache grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
+            <div i18n class="inner-form-title">CACHE</div>
+            <div i18n class="inner-form-description">
+              Some files are not federated, and fetched when necessary. Define their caching policies.
+            </div>
           </div>
-        </ng-container>
 
-        <div i18n class="inner-form-title">Customizations</div>
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
-        <ng-container formGroupName="instance">
-          <ng-container formGroupName="customizations">
-            <div class="form-group">
-              <label i18n for="customizationJavascript">JavaScript</label>
-              <my-help>
-                <ng-template ptTemplate="customHtml">
-                  <ng-container i18n>
-                    Write JavaScript code directly.<br />Example: <pre>console.log('my instance is amazing');</pre>
-                  </ng-container>
-                </ng-template>
-              </my-help>
+            <ng-container formGroupName="cache">
+              <div class="form-group" formGroupName="previews">
+                <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
+                <input
+                  type="number" min="0" id="cachePreviewsSize" class="form-control"
+                  formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }"
+                >
+                <div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div>
+              </div>
 
-              <textarea
-                id="customizationJavascript" formControlName="javascript"
-                [ngClass]="{ 'input-error': formErrors['instance.customizations.javascript'] }"
-              ></textarea>
+              <div class="form-group" formGroupName="captions">
+                <label i18n for="cacheCaptionsSize">Number of video captions to keep in cache</label>
+                <input
+                  type="number" min="0" id="cacheCaptionsSize" class="form-control"
+                  formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }"
+                >
+                <div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div>
+              </div>
+            </ng-container>
 
-              <div *ngIf="formErrors.instance.customizations.javascript" class="form-error">{{ formErrors.instance.customizations.javascript }}</div>
-            </div>
+          </div>
+        </div>
 
-            <div class="form-group">
-              <label for="customizationCSS">CSS</label>
-
-              <my-help>
-                <ng-template ptTemplate="customHtml">
-                  <ng-container i18n>
-                    Write CSS code directly. Example:<br /><br />
-<pre>
-#custom-css {{ '{' }}
-  color: red;
-{{ '}' }}
-</pre>
-
-                    Prepend with <em>#custom-css</em> to override styles. Example:<br /><br />
-<pre>
-#custom-css .logged-in-email {{ '{' }}
-  color: red;
-{{ '}' }}
-</pre>
-                  </ng-container>
-                </ng-template>
-              </my-help>
-
-              <textarea
-                id="customizationCSS" formControlName="css"
-                [ngClass]="{ 'input-error': formErrors['instance.customizations.css'] }"
-              ></textarea>
-              <div *ngIf="formErrors.instance.customizations.css" class="form-error">{{ formErrors.instance.customizations.css }}</div>
+        <div class="form-row mt-4"> <!-- cache grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
+            <div class="anchor" id="customizations"></div> <!-- customizations anchor -->
+            <div i18n class="inner-form-title">CUSTOMIZATIONS</div>
+            <div i18n class="inner-form-description">
+              Slight modifications to your PeerTube instance for when creating a plugin or theme is overkill.
             </div>
-          </ng-container>
-        </ng-container>
+          </div>
 
-      </ng-template>
-    </ngb-tab>
-  </ngb-tabset>
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+
+            <ng-container formGroupName="instance">
+              <ng-container formGroupName="customizations">
+                <div class="form-group">
+                  <label i18n for="customizationJavascript">JavaScript</label>
+                  <my-help>
+                    <ng-template ptTemplate="customHtml">
+                      <ng-container i18n>
+                        Write JavaScript code directly.<br />Example: <pre>console.log('my instance is amazing');</pre>
+                      </ng-container>
+                    </ng-template>
+                  </my-help>
+
+                  <textarea
+                    id="customizationJavascript" formControlName="javascript" class="form-control"
+                    [ngClass]="{ 'input-error': formErrors['instance.customizations.javascript'] }"
+                  ></textarea>
+
+                  <div *ngIf="formErrors.instance.customizations.javascript" class="form-error">{{ formErrors.instance.customizations.javascript }}</div>
+                </div>
 
-  <input (click)="formValidated()" type="submit" i18n-value value="Update configuration" [disabled]="!form.valid">
-  <span class="form-error" i18n *ngIf="!form.valid">It seems like the configuration is invalid. Please search for potential errors in the different tabs.</span>
+                <div class="form-group">
+                  <label for="customizationCSS">CSS</label>
+
+                  <my-help>
+                    <ng-template ptTemplate="customHtml">
+                      <ng-container i18n>
+                        Write CSS code directly. Example:<br /><br />
+    <pre>
+    #custom-css {{ '{' }}
+      color: red;
+    {{ '}' }}
+    </pre>
+                        Prepend with <em>#custom-css</em> to override styles. Example:<br /><br />
+    <pre>
+    #custom-css .logged-in-email {{ '{' }}
+      color: red;
+    {{ '}' }}
+    </pre>
+                      </ng-container>
+                    </ng-template>
+                  </my-help>
+
+                  <textarea
+                    id="customizationCSS" formControlName="css" class="form-control"
+                    [ngClass]="{ 'input-error': formErrors['instance.customizations.css'] }"
+                  ></textarea>
+                  <div *ngIf="formErrors.instance.customizations.css" class="form-error">{{ formErrors.instance.customizations.css }}</div>
+                </div>
+              </ng-container>
+            </ng-container>
+
+          </div>
+        </div>
+
+      </ng-template>
+    </ng-container>
+  </div>
+
+  <div [ngbNavOutlet]="nav"></div>
+
+  <div class="form-row mt-4"> <!-- submit placement block -->
+    <div class="col-md-7 col-xl-5"></div>
+    <div class="col-md-5 col-xl-5">
+      <input (click)="formValidated()" type="submit" i18n-value value="Update configuration" [disabled]="!form.valid">
+      <span class="form-error" i18n *ngIf="!form.valid">It seems like the configuration is invalid. Please search for potential errors in the different tabs.</span>
+    </div>
+  </div>
 </form>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index 60d608028..9ee960ad6 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -1,12 +1,24 @@
 @import '_variables';
 @import '_mixins';
 
-.form-group {
-  margin-bottom: 25px;
+$form-base-input-width: 340px;
+
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
+form {
+  padding-bottom: 1.5rem;
 }
 
 input[type=text] {
-  @include peertube-input-text(340px);
+  @include peertube-input-text($form-base-input-width);
+  display: block;
+}
+
+input[type=number] {
+  @include peertube-input-text(315px);
   display: block;
 }
 
@@ -15,14 +27,15 @@ input[type=checkbox] {
 }
 
 .peertube-select-container {
-  @include peertube-select-container(340px);
+  @include peertube-select-container($form-base-input-width);
 }
 
 input[type=submit] {
   @include peertube-button;
   @include orange-button;
 
-  margin-top: 20px;
+  display: flex;
+  margin-left: auto;
 
   & + .form-error {
     display: inline;
@@ -31,17 +44,13 @@ input[type=submit] {
 }
 
 .inner-form-title {
-  text-transform: uppercase;
-  color: var(--mainColor);
-  font-weight: $font-bold;
-  font-size: 13px;
-  margin-top: 30px;
-  margin-bottom: 10px;
+  @include settings-big-title;
 }
 
 textarea {
   @include peertube-textarea(500px, 150px);
 
+  max-width: 100%;
   display: block;
 
   &.small {
@@ -58,3 +67,13 @@ textarea {
   opacity: .5;
   pointer-events: none;
 }
+
+.form-group-right {
+  padding-top: 2px;
+}
+
+ngb-tabset:not(.previews) ::ng-deep {
+  .nav-link {
+    font-size: 105%;
+  }
+}
\ No newline at end of file
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index c88e81c01..cea314cea 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { AfterViewChecked, Component, OnInit, ViewChild } from '@angular/core'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { ServerService } from '@app/core/server/server.service'
 import { CustomConfigValidatorsService, FormReactive, UserValidatorsService } from '@app/shared'
@@ -9,13 +9,19 @@ import { FormValidatorService } from '@app/shared/forms/form-validators/form-val
 import { SelectItem } from 'primeng/api'
 import { forkJoin } from 'rxjs'
 import { ServerConfig } from '@shared/models'
+import { ViewportScroller } from '@angular/common'
+import { NgbNav } from '@ng-bootstrap/ng-bootstrap'
 
 @Component({
   selector: 'my-edit-custom-config',
   templateUrl: './edit-custom-config.component.html',
   styleUrls: [ './edit-custom-config.component.scss' ]
 })
-export class EditCustomConfigComponent extends FormReactive implements OnInit {
+export class EditCustomConfigComponent extends FormReactive implements OnInit, AfterViewChecked {
+  // FIXME: use built-in router
+  @ViewChild('nav') nav: NgbNav
+
+  initDone = false
   customConfig: CustomConfig
 
   resolutions: { id: string, label: string, description?: string }[] = []
@@ -27,6 +33,7 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
   private serverConfig: ServerConfig
 
   constructor (
+    private viewportScroller: ViewportScroller,
     protected formValidatorService: FormValidatorService,
     private customConfigValidatorsService: CustomConfigValidatorsService,
     private userValidatorsService: UserValidatorsService,
@@ -226,6 +233,13 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     this.checkTranscodingFields()
   }
 
+  ngAfterViewChecked () {
+    if (!this.initDone) {
+      this.initDone = true
+      this.gotoAnchor()
+    }
+  }
+
   isTranscodingEnabled () {
     return this.form.value['transcoding']['enabled'] === true
   }
@@ -272,6 +286,18 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     return this.i18n('No category')
   }
 
+  gotoAnchor () {
+    const hashToNav = {
+      'customizations': 'advanced-configuration'
+    }
+    const hash = window.location.hash.replace('#', '')
+
+    if (hash && Object.keys(hashToNav).includes(hash)) {
+      this.nav.select(hashToNav[hash])
+      setTimeout(() => this.viewportScroller.scrollToAnchor(hash), 100)
+    }
+  }
+
   private updateForm () {
     this.form.patchValue(this.customConfig)
   }
diff --git a/client/src/app/+admin/config/shared/batch-domains-modal.component.html b/client/src/app/+admin/config/shared/batch-domains-modal.component.html
new file mode 100644
index 000000000..1b85c8f48
--- /dev/null
+++ b/client/src/app/+admin/config/shared/batch-domains-modal.component.html
@@ -0,0 +1,43 @@
+<ng-template #modal>
+  <div class="modal-header">
+    <h4 i18n class="modal-title">{{ action }}</h4>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+
+  <div class="modal-body">
+    <form novalidate [formGroup]="form" (ngSubmit)="submit()">
+      <div class="form-group">
+        <label i18n for="hosts">1 host (without "http://") per line</label>
+
+        <textarea
+          [placeholder]="placeholder" formControlName="domains" type="text" id="hosts" name="hosts"
+          class="form-control" [ngClass]="{ 'input-error': formErrors['domains'] }" ngbAutofocus
+        ></textarea>
+
+        <div *ngIf="formErrors.domains" class="form-error">
+          {{ formErrors.domains }}
+
+          <div *ngIf="form.controls['domains'].errors.validDomains">
+            {{ form.controls['domains'].errors.validDomains.value }}
+          </div>
+        </div>
+      </div>
+
+      <ng-content select="warning"></ng-content>
+
+      <div class="form-group inputs">
+        <input
+          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          (click)="hide()" (key.enter)="hide()"
+        >
+
+        <input
+          type="submit" [value]="action" class="action-button-submit"
+          [disabled]="!form.valid"
+        >
+      </div>
+    </form>
+  </div>
+
+</ng-template>
diff --git a/client/src/app/+admin/config/shared/batch-domains-modal.component.scss b/client/src/app/+admin/config/shared/batch-domains-modal.component.scss
new file mode 100644
index 000000000..9621a566f
--- /dev/null
+++ b/client/src/app/+admin/config/shared/batch-domains-modal.component.scss
@@ -0,0 +1,3 @@
+textarea {
+  height: 200px;
+}
diff --git a/client/src/app/+admin/config/shared/batch-domains-modal.component.ts b/client/src/app/+admin/config/shared/batch-domains-modal.component.ts
new file mode 100644
index 000000000..620f2726b
--- /dev/null
+++ b/client/src/app/+admin/config/shared/batch-domains-modal.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { FormReactive } from '@app/shared/forms'
+import { BatchDomainsValidatorsService } from './batch-domains-validators.service'
+
+@Component({
+  selector: 'my-batch-domains-modal',
+  templateUrl: './batch-domains-modal.component.html',
+  styleUrls: [ './batch-domains-modal.component.scss' ]
+})
+export class BatchDomainsModalComponent extends FormReactive implements OnInit {
+  @ViewChild('modal', { static: true }) modal: NgbModal
+  @Input() placeholder = 'example.com'
+  @Input() action: string
+  @Output() domains = new EventEmitter<string[]>()
+
+  private openedModal: NgbModalRef
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private modalService: NgbModal,
+    private batchDomainsValidatorsService: BatchDomainsValidatorsService,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    if (!this.action) this.action = this.i18n('Process domains')
+
+    this.buildForm({
+      domains: this.batchDomainsValidatorsService.DOMAINS
+    })
+  }
+
+  openModal () {
+    this.openedModal = this.modalService.open(this.modal, { centered: true })
+  }
+
+  hide () {
+    this.openedModal.close()
+  }
+
+  submit () {
+    this.domains.emit(
+      this.batchDomainsValidatorsService.getNotEmptyHosts(this.form.controls['domains'].value)
+    )
+    this.form.reset()
+    this.hide()
+  }
+}
diff --git a/client/src/app/+admin/config/shared/batch-domains-validators.service.ts b/client/src/app/+admin/config/shared/batch-domains-validators.service.ts
new file mode 100644
index 000000000..46fa6514d
--- /dev/null
+++ b/client/src/app/+admin/config/shared/batch-domains-validators.service.ts
@@ -0,0 +1,68 @@
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { Validators, ValidatorFn } from '@angular/forms'
+import { Injectable } from '@angular/core'
+import { BuildFormValidator, validateHost } from '@app/shared/forms/form-validators'
+
+@Injectable()
+export class BatchDomainsValidatorsService {
+  readonly DOMAINS: BuildFormValidator
+
+  constructor (private i18n: I18n) {
+    this.DOMAINS = {
+      VALIDATORS: [ Validators.required, this.validDomains, this.isHostsUnique ],
+      MESSAGES: {
+        'required': this.i18n('Domain is required.'),
+        'validDomains': this.i18n('Domains entered are invalid.'),
+        'uniqueDomains': this.i18n('Domains entered contain duplicates.')
+      }
+    }
+  }
+
+  getNotEmptyHosts (hosts: string) {
+    return hosts
+      .split('\n')
+      .filter((host: string) => host && host.length !== 0) // Eject empty hosts
+  }
+
+  private validDomains: ValidatorFn = (control) => {
+    if (!control.value) return null
+
+    const newHostsErrors = []
+    const hosts = this.getNotEmptyHosts(control.value)
+
+    for (const host of hosts) {
+      if (validateHost(host) === false) {
+        newHostsErrors.push(this.i18n('{{host}} is not valid', { host }))
+      }
+    }
+
+    /* Is not valid. */
+    if (newHostsErrors.length !== 0) {
+      return {
+        'validDomains': {
+          reason: 'invalid',
+          value: newHostsErrors.join('. ') + '.'
+        }
+      }
+    }
+
+    /* Is valid. */
+    return null
+  }
+
+  private isHostsUnique: ValidatorFn = (control) => {
+    if (!control.value) return null
+
+    const hosts = this.getNotEmptyHosts(control.value)
+
+    if (hosts.every((host: string) => hosts.indexOf(host) === hosts.lastIndexOf(host))) {
+      return null
+    } else {
+      return {
+        'uniqueDomains': {
+          reason: 'invalid'
+        }
+      }
+    }
+  }
+}
diff --git a/client/src/app/+admin/config/shared/config.service.ts b/client/src/app/+admin/config/shared/config.service.ts
index 28a3d67d6..874b8094d 100644
--- a/client/src/app/+admin/config/shared/config.service.ts
+++ b/client/src/app/+admin/config/shared/config.service.ts
@@ -10,8 +10,8 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 export class ConfigService {
   private static BASE_APPLICATION_URL = environment.apiUrl + '/api/v1/config'
 
-  videoQuotaOptions: { value: number, label: string }[] = []
-  videoQuotaDailyOptions: { value: number, label: string }[] = []
+  videoQuotaOptions: { value: number, label: string, disabled?: boolean }[] = []
+  videoQuotaDailyOptions: { value: number, label: string, disabled?: boolean }[] = []
 
   constructor (
     private authHttp: HttpClient,
@@ -19,8 +19,10 @@ export class ConfigService {
     private i18n: I18n
   ) {
     this.videoQuotaOptions = [
+      { value: undefined, label: 'Default quota', disabled: true },
       { value: -1, label: this.i18n('Unlimited') },
-      { value: 0, label: '0' },
+      { value: undefined, label: '─────', disabled: true },
+      { value: 0, label: this.i18n('None - no upload possible') },
       { value: 100 * 1024 * 1024, label: this.i18n('100MB') },
       { value: 500 * 1024 * 1024, label: this.i18n('500MB') },
       { value: 1024 * 1024 * 1024, label: this.i18n('1GB') },
@@ -30,8 +32,10 @@ export class ConfigService {
     ]
 
     this.videoQuotaDailyOptions = [
+      { value: undefined, label: 'Default daily upload limit', disabled: true },
       { value: -1, label: this.i18n('Unlimited') },
-      { value: 0, label: '0' },
+      { value: undefined, label: '─────', disabled: true },
+      { value: 0, label: this.i18n('None - no upload possible') },
       { value: 10 * 1024 * 1024, label: this.i18n('10MB') },
       { value: 50 * 1024 * 1024, label: this.i18n('50MB') },
       { value: 100 * 1024 * 1024, label: this.i18n('100MB') },
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 6b5f3b450..93378a533 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,35 +1,46 @@
 <p-table
-  [value]="followers" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)"
+  [value]="followers" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} followers"
 >
   <ng-template pTemplate="caption">
     <div class="caption">
-      <input
-        type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-        (keyup)="onSearch($event.target.value)"
-      >
+      <div class="ml-auto has-feedback has-clear">
+        <input
+          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+          (keyup)="onSearch($event)"
+        >
+        <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
+        <span class="sr-only" i18n>Clear filters</span>
+      </div>
     </div>
   </ng-template>
 
   <ng-template pTemplate="header">
     <tr>
       <th i18n>Follower handle</th>
-      <th i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
-      <th i18n pSortableColumn="score">Score <p-sortIcon field="score"></p-sortIcon></th>
-      <th i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th></th>
+      <th style="width: 100px;" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
+      <th style="width: 100px;" i18n pSortableColumn="score">Score <p-sortIcon field="score"></p-sortIcon></th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 100px;"></th>
     </tr>
   </ng-template>
 
   <ng-template pTemplate="body" let-follow>
     <tr>
-      <td><a [href]="follow.follower.url" target="_blank" rel="noopener noreferrer">{{ follow.follower.name + '@' + follow.follower.host }}</a></td>
+      <td>
+        <a [href]="follow.follower.url" i18n-title title="Open actor page in a new tab" target="_blank" rel="noopener noreferrer">
+          {{ follow.follower.name + '@' + follow.follower.host }}
+          <span class="glyphicon glyphicon-new-window"></span>
+        </a>
+      </td>
 
       <td *ngIf="follow.state === 'accepted'" i18n>Accepted</td>
       <td *ngIf="follow.state === 'pending'" i18n>Pending</td>
 
       <td>{{ follow.score }}</td>
-      <td>{{ follow.createdAt }}</td>
+      <td>{{ follow.createdAt | date: 'short' }}</td>
 
       <td class="action-cell">
         <ng-container *ngIf="follow.state === 'pending'">
@@ -41,4 +52,15 @@
       </td>
     </tr>
   </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="6">
+        <div class="empty-table-message">
+          <ng-container *ngIf="search" i18n>No follower found matching current filters.</ng-container>
+          <ng-container *ngIf="!search" i18n>Your instance doesn't have any follower.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
 </p-table>
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 964b3f99b..14189ff11 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
@@ -9,6 +9,20 @@
   }
 }
 
+a {
+  @include disable-default-a-behaviour;
+  display: inline-block;
+
+  &, &:hover {
+    color: var(--mainForegroundColor);
+  }
+
+  span {
+    font-size: 80%;
+    color: var(--inputPlaceholderColor);
+  }
+}
+
 .action-cell {
   my-button:first-child {
     margin-right: 10px;
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.ts b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
index 707daef84..17352a601 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.ts
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
@@ -9,13 +9,12 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 @Component({
   selector: 'my-followers-list',
   templateUrl: './followers-list.component.html',
-  styleUrls: [ './followers-list.component.scss' ]
+  styleUrls: [ '../follows.component.scss', './followers-list.component.scss' ]
 })
 export class FollowersListComponent extends RestTable implements OnInit {
   followers: ActorFollow[] = []
   totalRecords = 0
-  rowsPerPage = 10
-  sort: SortMeta = { field: 'createdAt', order: 1 }
+  sort: SortMeta = { field: 'createdAt', order: -1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
   constructor (
@@ -31,6 +30,10 @@ export class FollowersListComponent extends RestTable implements OnInit {
     this.initialize()
   }
 
+  getIdentifier () {
+    return 'FollowersListComponent'
+  }
+
   acceptFollower (follow: ActorFollow) {
     follow.state = 'accepted'
 
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
deleted file mode 100644
index e08decb3f..000000000
--- a/client/src/app/+admin/follows/following-add/following-add.component.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-
-<form (ngSubmit)="addFollowing()">
-  <div class="form-group">
-    <label i18n for="hosts">1 host (without "http://") per line</label>
-
-    <textarea
-      type="text" class="form-control" placeholder="example.com" id="hosts" name="hosts"
-      [(ngModel)]="hostsString" (ngModelChange)="onHostsChanged()" [ngClass]="{ 'input-error': hostsError }"
-    ></textarea>
-
-    <div *ngIf="hostsError" class="form-error">
-      {{ hostsError }}
-    </div>
-  </div>
-
-  <div i18n *ngIf="httpEnabled() === false"  class="alert alert-warning">
-    It seems that you are not on a HTTPS server. Your webserver needs to have TLS activated in order to follow servers.
-  </div>
-
-  <input type="submit" i18n-value value="Add following" [disabled]="hostsError || !hostsString" class="btn btn-secondary">
-</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
deleted file mode 100644
index 1baddc95f..000000000
--- a/client/src/app/+admin/follows/following-add/following-add.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-textarea {
-  height: 250px;
-}
-
-.form-control {
-  &, &:focus {
-    background-color: var(--inputColor);
-    color: var(--mainForegroundColor);
-  }
-}
-
-input[type=submit] {
-  @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
deleted file mode 100644
index 308bbb0c5..000000000
--- a/client/src/app/+admin/follows/following-add/following-add.component.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Component } from '@angular/core'
-import { Router } from '@angular/router'
-import { Notifier } from '@app/core'
-import { ConfirmService } from '../../../core'
-import { validateHost } from '../../../shared'
-import { FollowService } from '@app/shared/instance/follow.service'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-
-@Component({
-  selector: 'my-following-add',
-  templateUrl: './following-add.component.html',
-  styleUrls: [ './following-add.component.scss' ]
-})
-export class FollowingAddComponent {
-  hostsString = ''
-  hostsError: string = null
-  error: string = null
-
-  constructor (
-    private router: Router,
-    private notifier: Notifier,
-    private confirmService: ConfirmService,
-    private followService: FollowService,
-    private i18n: I18n
-  ) {}
-
-  httpEnabled () {
-    return window.location.protocol === 'https:'
-  }
-
-  onHostsChanged () {
-    this.hostsError = null
-
-    const newHostsErrors = []
-    const hosts = this.getNotEmptyHosts()
-
-    for (const host of hosts) {
-      if (validateHost(host) === false) {
-        newHostsErrors.push(this.i18n('{{host}} is not valid', { host }))
-      }
-    }
-
-    if (newHostsErrors.length !== 0) {
-      this.hostsError = newHostsErrors.join('. ')
-    }
-  }
-
-  async addFollowing () {
-    this.error = ''
-
-    const hosts = this.getNotEmptyHosts()
-    if (hosts.length === 0) {
-      this.error = this.i18n('You need to specify hosts to follow.')
-    }
-
-    if (!this.isHostsUnique(hosts)) {
-      this.error = this.i18n('Hosts need to be unique.')
-      return
-    }
-
-    const confirmMessage = this.i18n('If you confirm, you will send a follow request to:<br /> - ') + hosts.join('<br /> - ')
-    const res = await this.confirmService.confirm(confirmMessage, this.i18n('Follow new server(s)'))
-    if (res === false) return
-
-    this.followService.follow(hosts).subscribe(
-      () => {
-        this.notifier.success(this.i18n('Follow request(s) sent!'))
-
-        setTimeout(() => this.router.navigate([ '/admin/follows/following-list' ]), 500)
-      },
-
-      err => this.notifier.error(err.message)
-    )
-  }
-
-  private isHostsUnique (hosts: string[]) {
-    return hosts.every(host => hosts.indexOf(host) === hosts.lastIndexOf(host))
-  }
-
-  private getNotEmptyHosts () {
-    return this.hostsString
-      .split('\n')
-      .filter(host => host && host.length !== 0) // Eject empty hosts
-  }
-}
diff --git a/client/src/app/+admin/follows/following-add/index.ts b/client/src/app/+admin/follows/following-add/index.ts
deleted file mode 100644
index 1b1897ffa..000000000
--- a/client/src/app/+admin/follows/following-add/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './following-add.component'
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 5a252eda9..059c07295 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,36 +1,49 @@
 <p-table
-  [value]="following" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)"
+  [value]="following" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} hosts"
 >
   <ng-template pTemplate="caption">
     <div class="caption">
-      <div>
+      <div class="ml-auto has-feedback has-clear">
         <input
           type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-          (keyup)="onSearch($event.target.value)"
+          (keyup)="onSearch($event)"
         >
+        <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
+        <span class="sr-only" i18n>Clear filters</span>
       </div>
+      <a class="ml-2 follow-button" (click)="addDomainsToFollow()" (key.enter)="addDomainsToFollow()">
+        <my-global-icon iconName="add"></my-global-icon>
+        <ng-container i18n>Follow domain</ng-container>
+      </a>
     </div>
   </ng-template>
 
   <ng-template pTemplate="header">
     <tr>
       <th i18n>Host</th>
-      <th i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
-      <th i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th i18n pSortableColumn="redundancyAllowed">Redundancy allowed <p-sortIcon field="redundancyAllowed"></p-sortIcon></th>
-      <th></th>
+      <th style="width: 100px;" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 160px;" i18n pSortableColumn="redundancyAllowed">Redundancy allowed <p-sortIcon field="redundancyAllowed"></p-sortIcon></th>
+      <th style="width: 100px;"></th>
     </tr>
   </ng-template>
 
   <ng-template pTemplate="body" let-follow>
     <tr>
-      <td>{{ follow.following.host }}</td>
+      <td>
+        <a [href]="'https://' + follow.following.host" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
+          {{ follow.following.host }}
+          <span class="glyphicon glyphicon-new-window"></span>
+        </a>
+      </td>
 
       <td *ngIf="follow.state === 'accepted'" i18n>Accepted</td>
       <td *ngIf="follow.state === 'pending'" i18n>Pending</td>
 
-      <td>{{ follow.createdAt }}</td>
+      <td>{{ follow.createdAt | date: 'short' }}</td>
       <td>
         <my-redundancy-checkbox
           [host]="follow.following.host" [redundancyAllowed]="follow.following.hostRedundancyAllowed"
@@ -41,4 +54,23 @@
       </td>
     </tr>
   </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="6">
+        <div class="empty-table-message">
+          <ng-container *ngIf="search" i18n>No host found matching current filters.</ng-container>
+          <ng-container *ngIf="!search" i18n>Your instance is not following anyone.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
 </p-table>
+
+<my-batch-domains-modal #batchDomainsModal i18n-action action="Follow domains" (domains)="addFollowing($event)">
+  <ng-container ngProjectAs="warning">
+    <div i18n *ngIf="httpEnabled() === false"  class="alert alert-warning">
+      It seems that you are not on a HTTPS server. Your webserver needs to have TLS activated in order to follow servers.
+    </div>
+  </ng-container>
+</my-batch-domains-modal>
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.scss b/client/src/app/+admin/follows/following-list/following-list.component.scss
index a6f0656b8..563f8d2bc 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.scss
+++ b/client/src/app/+admin/follows/following-list/following-list.component.scss
@@ -1,10 +1,28 @@
 @import '_variables';
 @import '_mixins';
 
+a {
+  @include disable-default-a-behaviour;
+  display: inline-block;
+
+  &, &:hover {
+    color: var(--mainForegroundColor);
+  }
+
+  span {
+    font-size: 80%;
+    color: var(--inputPlaceholderColor);
+  }
+}
+
 .caption {
   justify-content: flex-end;
 
   input {
     @include peertube-input-text(250px);
   }
-}
\ No newline at end of file
+}
+
+.follow-button {
+  @include create-button;
+}
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.ts b/client/src/app/+admin/follows/following-list/following-list.component.ts
index 3d78c254f..6ddbf02d6 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.ts
+++ b/client/src/app/+admin/follows/following-list/following-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
 import { SortMeta } from 'primeng/api'
 import { ActorFollow } from '../../../../../../shared/models/actors/follow.model'
@@ -6,17 +6,19 @@ import { ConfirmService } from '../../../core/confirm/confirm.service'
 import { RestPagination, RestTable } from '../../../shared'
 import { FollowService } from '@app/shared/instance/follow.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { BatchDomainsModalComponent } from '@app/+admin/config/shared/batch-domains-modal.component'
 
 @Component({
   selector: 'my-followers-list',
   templateUrl: './following-list.component.html',
-  styleUrls: [ './following-list.component.scss' ]
+  styleUrls: [ '../follows.component.scss', './following-list.component.scss' ]
 })
 export class FollowingListComponent extends RestTable implements OnInit {
+  @ViewChild('batchDomainsModal') batchDomainsModal: BatchDomainsModalComponent
+
   following: ActorFollow[] = []
   totalRecords = 0
-  rowsPerPage = 10
-  sort: SortMeta = { field: 'createdAt', order: 1 }
+  sort: SortMeta = { field: 'createdAt', order: -1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
   constructor (
@@ -32,6 +34,29 @@ export class FollowingListComponent extends RestTable implements OnInit {
     this.initialize()
   }
 
+  getIdentifier () {
+    return 'FollowingListComponent'
+  }
+
+  addDomainsToFollow () {
+    this.batchDomainsModal.openModal()
+  }
+
+  httpEnabled () {
+    return window.location.protocol === 'https:'
+  }
+
+  async addFollowing (hosts: string[]) {
+    this.followService.follow(hosts).subscribe(
+      () => {
+        this.notifier.success(this.i18n('Follow request(s) sent!'))
+        this.loadData()
+      },
+
+      err => this.notifier.error(err.message)
+    )
+  }
+
   async removeFollowing (follow: ActorFollow) {
     const res = await this.confirmService.confirm(
       this.i18n('Do you really want to unfollow {{host}}?', { host: follow.following.host }),
diff --git a/client/src/app/+admin/follows/follows.component.html b/client/src/app/+admin/follows/follows.component.html
index 21d477132..7b5bcc2db 100644
--- a/client/src/app/+admin/follows/follows.component.html
+++ b/client/src/app/+admin/follows/follows.component.html
@@ -1,13 +1,13 @@
 <div class="admin-sub-header">
-  <div i18n class="form-sub-title">Manage follows</div>
+  <div i18n class="form-sub-title">Follows & redundancies</div>
 
   <div class="admin-sub-nav">
     <a i18n routerLink="following-list" routerLinkActive="active">Following</a>
 
-    <a i18n routerLink="following-add" routerLinkActive="active">Follow</a>
-
     <a i18n routerLink="followers-list" routerLinkActive="active">Followers</a>
+
+    <a i18n routerLink="video-redundancies-list" routerLinkActive="active">Video redundancies</a>
   </div>
 </div>
 
-<router-outlet></router-outlet>
\ No newline at end of file
+<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 766d7853b..32394f698 100644
--- a/client/src/app/+admin/follows/follows.component.scss
+++ b/client/src/app/+admin/follows/follows.component.scss
@@ -1,4 +1,10 @@
+@import "mixins";
+
 .form-sub-title {
   flex-grow: 0;
   margin-right: 30px;
 }
+
+.empty-table-message {
+  @include empty-state;
+}
diff --git a/client/src/app/+admin/follows/follows.routes.ts b/client/src/app/+admin/follows/follows.routes.ts
index e84c79e82..8270ae444 100644
--- a/client/src/app/+admin/follows/follows.routes.ts
+++ b/client/src/app/+admin/follows/follows.routes.ts
@@ -2,10 +2,10 @@ import { Routes } from '@angular/router'
 
 import { UserRightGuard } from '../../core'
 import { FollowsComponent } from './follows.component'
-import { FollowingAddComponent } from './following-add'
 import { FollowersListComponent } from './followers-list'
 import { UserRight } from '../../../../../shared'
 import { FollowingListComponent } from './following-list/following-list.component'
+import { VideoRedundanciesListComponent } from '@app/+admin/follows/video-redundancies-list'
 
 export const FollowsRoutes: Routes = [
   {
@@ -41,12 +41,11 @@ export const FollowsRoutes: Routes = [
       },
       {
         path: 'following-add',
-        component: FollowingAddComponent,
-        data: {
-          meta: {
-            title: 'Add follow'
-          }
-        }
+        redirectTo: 'following-list'
+      },
+      {
+        path: 'video-redundancies-list',
+        component: VideoRedundanciesListComponent
       }
     ]
   }
diff --git a/client/src/app/+admin/follows/index.ts b/client/src/app/+admin/follows/index.ts
index e94f33710..285955468 100644
--- a/client/src/app/+admin/follows/index.ts
+++ b/client/src/app/+admin/follows/index.ts
@@ -1,5 +1,5 @@
-export * from './following-add'
 export * from './followers-list'
 export * from './following-list'
+export * from './video-redundancies-list'
 export * from './follows.component'
 export * from './follows.routes'
diff --git a/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts b/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts
index fa1da26bf..9d7883d97 100644
--- a/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts
+++ b/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core'
 import { Notifier } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { RedundancyService } from '@app/+admin/follows/shared/redundancy.service'
+import { RedundancyService } from '@app/shared/video/redundancy.service'
 
 @Component({
   selector: 'my-redundancy-checkbox',
diff --git a/client/src/app/+admin/follows/shared/redundancy.service.ts b/client/src/app/+admin/follows/shared/redundancy.service.ts
deleted file mode 100644
index 87ae01c04..000000000
--- a/client/src/app/+admin/follows/shared/redundancy.service.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { catchError, map } from 'rxjs/operators'
-import { HttpClient } from '@angular/common/http'
-import { Injectable } from '@angular/core'
-import { RestExtractor } from '@app/shared'
-import { environment } from '../../../../environments/environment'
-
-@Injectable()
-export class RedundancyService {
-  static BASE_USER_SUBSCRIPTIONS_URL = environment.apiUrl + '/api/v1/server/redundancy'
-
-  constructor (
-    private authHttp: HttpClient,
-    private restExtractor: RestExtractor
-  ) { }
-
-  updateRedundancy (host: string, redundancyAllowed: boolean) {
-    const url = RedundancyService.BASE_USER_SUBSCRIPTIONS_URL + '/' + host
-
-    const body = { redundancyAllowed }
-
-    return this.authHttp.put(url, body)
-               .pipe(
-                 map(this.restExtractor.extractDataBool),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
-}
diff --git a/client/src/app/+admin/follows/video-redundancies-list/index.ts b/client/src/app/+admin/follows/video-redundancies-list/index.ts
new file mode 100644
index 000000000..6a7c7f483
--- /dev/null
+++ b/client/src/app/+admin/follows/video-redundancies-list/index.ts
@@ -0,0 +1 @@
+export * from './video-redundancies-list.component'
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
new file mode 100644
index 000000000..28d57f83c
--- /dev/null
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
@@ -0,0 +1,100 @@
+<div class="admin-sub-header">
+  <div class="select-filter-block">
+    <label for="displayType" i18n>Display</label>
+
+    <div class="peertube-select-container">
+      <select id="displayType" name="displayType" [(ngModel)]="displayType" (ngModelChange)="onDisplayTypeChanged()" class="form-control">
+        <option value="my-videos" i18n>My videos duplicated by remote instances</option>
+        <option value="remote-videos" i18n>Remote videos duplicated by my instance</option>
+      </select>
+    </div>
+  </div>
+</div>
+
+<p-table
+  [value]="videoRedundancies" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+  (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
+>
+  <ng-template pTemplate="header">
+    <tr>
+      <th style="width: 40px;"></th>
+      <th style="width: 160px;" i18n *ngIf="isDisplayingRemoteVideos()">Strategy</th>
+      <th i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th >
+      <th style="width: 100px;" i18n *ngIf="isDisplayingRemoteVideos()">Total size</th>
+      <th style="width: 80px;"></th>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="body" let-expanded="expanded" let-redundancy>
+    <tr>
+
+      <td>
+        <span class="expander" i18n-ngbTooltip ngbTooltip="List redundancies" [pRowToggler]="redundancy">
+          <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
+        </span>
+      </td>
+
+      <td *ngIf="isDisplayingRemoteVideos()">{{ getRedundancyStrategy(redundancy) }}</td>
+
+      <td>
+        <a [href]="redundancy.url" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
+          {{ redundancy.name }}
+          <span class="glyphicon glyphicon-new-window"></span>
+        </a>
+      </td>
+
+      <td *ngIf="isDisplayingRemoteVideos()">{{ getTotalSize(redundancy) | bytes: 1 }}</td>
+
+      <td class="action-cell">
+        <my-delete-button (click)="removeRedundancy(redundancy)"></my-delete-button>
+      </td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="rowexpansion" let-redundancy>
+    <tr *ngIf="redundancy.redundancies.files.length !== 0">
+      <td class="expand-cell" [attr.colspan]="getColspan()">
+        <div *ngFor="let file of redundancy.redundancies.files" class="expansion-block">
+          <my-video-redundancy-information [redundancyElement]="file"></my-video-redundancy-information>
+        </div>
+      </td>
+    </tr>
+
+    <tr *ngIf="redundancy.redundancies.streamingPlaylists.length !== 0">
+      <td class="expand-cell" [attr.colspan]="getColspan()">
+        <div *ngFor="let playlist of redundancy.redundancies.streamingPlaylists">
+          <my-video-redundancy-information [redundancyElement]="playlist"></my-video-redundancy-information>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="6">
+        <div class="empty-table-message">
+          <ng-container *ngIf="isDisplayingRemoteVideos()" i18n>Your instance doesn't mirror any video.</ng-container>
+          <ng-container *ngIf="!isDisplayingRemoteVideos()" i18n>Your instance has no mirrored videos.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
+
+
+<div class="redundancies-charts" *ngIf="isDisplayingRemoteVideos()">
+  <div class="form-sub-title" i18n>Enabled strategies stats</div>
+
+  <div class="chart-blocks">
+
+    <div *ngIf="noRedundancies" i18n class="no-results">
+      No redundancy strategy is enabled on your instance.
+    </div>
+
+    <div class="chart-block" *ngFor="let r of redundanciesGraphsData">
+      <p-chart type="pie" [data]="r.graphData" [options]="r.options" width="300px" height="300px"></p-chart>
+    </div>
+
+  </div>
+</div>
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
new file mode 100644
index 000000000..dc43e4007
--- /dev/null
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
@@ -0,0 +1,51 @@
+@import '_variables';
+@import '_mixins';
+
+a {
+  @include disable-default-a-behaviour;
+  display: inline-block;
+
+  &, &:hover {
+    color: var(--mainForegroundColor);
+  }
+
+  span {
+    font-size: 80%;
+    color: var(--inputPlaceholderColor);
+  }
+}
+
+.expansion-block {
+  margin-bottom: 20px;
+}
+
+.admin-sub-header {
+  justify-content: flex-end;
+
+  .select-filter-block {
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+
+    label {
+      margin-bottom: 2px;
+    }
+
+    .peertube-select-container {
+      @include peertube-select-container(auto);
+    }
+  }
+}
+
+.redundancies-charts {
+  margin-top: 50px;
+
+  .chart-blocks {
+    display: flex;
+    justify-content: center;
+
+    .chart-block {
+      margin: 0 20px;
+    }
+  }
+}
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
new file mode 100644
index 000000000..267a1f58e
--- /dev/null
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
@@ -0,0 +1,187 @@
+import { Component, OnInit } from '@angular/core'
+import { Notifier, ServerService } from '@app/core'
+import { SortMeta } from 'primeng/api'
+import { ConfirmService } from '../../../core/confirm/confirm.service'
+import { RestPagination, RestTable } from '../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoRedundanciesTarget, VideoRedundancy } from '@shared/models'
+import { peertubeLocalStorage } from '@app/shared/misc/peertube-web-storage'
+import { VideosRedundancyStats } from '@shared/models/server'
+import { BytesPipe } from 'ngx-pipes'
+import { RedundancyService } from '@app/shared/video/redundancy.service'
+
+@Component({
+  selector: 'my-video-redundancies-list',
+  templateUrl: './video-redundancies-list.component.html',
+  styleUrls: [ '../follows.component.scss', './video-redundancies-list.component.scss' ]
+})
+export class VideoRedundanciesListComponent extends RestTable implements OnInit {
+  private static LOCAL_STORAGE_DISPLAY_TYPE = 'video-redundancies-list-display-type'
+
+  videoRedundancies: VideoRedundancy[] = []
+  totalRecords = 0
+
+  sort: SortMeta = { field: 'name', order: 1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+  displayType: VideoRedundanciesTarget = 'my-videos'
+
+  redundanciesGraphsData: { stats: VideosRedundancyStats, graphData: object, options: object }[] = []
+
+  noRedundancies = false
+
+  private bytesPipe: BytesPipe
+
+  constructor (
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private redundancyService: RedundancyService,
+    private serverService: ServerService,
+    private i18n: I18n
+  ) {
+    super()
+
+    this.bytesPipe = new BytesPipe()
+  }
+
+  getIdentifier () {
+    return 'VideoRedundanciesListComponent'
+  }
+
+  ngOnInit () {
+    this.loadSelectLocalStorage()
+
+    this.initialize()
+
+    this.serverService.getServerStats()
+        .subscribe(res => {
+          const redundancies = res.videosRedundancy
+
+          if (redundancies.length === 0) this.noRedundancies = true
+
+          for (const r of redundancies) {
+            this.buildPieData(r)
+          }
+        })
+  }
+
+  getColspan () {
+    if (this.isDisplayingRemoteVideos()) return 5
+
+    return 4
+  }
+
+  isDisplayingRemoteVideos () {
+    return this.displayType === 'remote-videos'
+  }
+
+  getTotalSize (redundancy: VideoRedundancy) {
+    return redundancy.redundancies.files.reduce((a, b) => a + b.size, 0) +
+      redundancy.redundancies.streamingPlaylists.reduce((a, b) => a + b.size, 0)
+  }
+
+  onDisplayTypeChanged () {
+    this.pagination.start = 0
+    this.saveSelectLocalStorage()
+
+    this.loadData()
+  }
+
+  getRedundancyStrategy (redundancy: VideoRedundancy) {
+    if (redundancy.redundancies.files.length !== 0) return redundancy.redundancies.files[0].strategy
+    if (redundancy.redundancies.streamingPlaylists.length !== 0) return redundancy.redundancies.streamingPlaylists[0].strategy
+
+    return ''
+  }
+
+  buildPieData (stats: VideosRedundancyStats) {
+    const totalSize = stats.totalSize
+      ? stats.totalSize - stats.totalUsed
+      : stats.totalUsed
+
+    if (totalSize === 0) return
+
+    this.redundanciesGraphsData.push({
+      stats,
+      graphData: {
+        labels: [ this.i18n('Used'), this.i18n('Available') ],
+        datasets: [
+          {
+            data: [ stats.totalUsed, totalSize ],
+            backgroundColor: [
+              '#FF6384',
+              '#36A2EB'
+            ],
+            hoverBackgroundColor: [
+              '#FF6384',
+              '#36A2EB'
+            ]
+          }
+        ]
+      },
+      options: {
+        title: {
+          display: true,
+          text: stats.strategy
+        },
+
+        tooltips: {
+          callbacks: {
+            label: (tooltipItem: any, data: any) => {
+              const dataset = data.datasets[tooltipItem.datasetIndex]
+              let label = data.labels[tooltipItem.index]
+              if (label) label += ': '
+              else label = ''
+
+              label += this.bytesPipe.transform(dataset.data[tooltipItem.index], 1)
+              return label
+            }
+          }
+        }
+      }
+    })
+  }
+
+  async removeRedundancy (redundancy: VideoRedundancy) {
+    const message = this.i18n('Do you really want to remove this video redundancy?')
+    const res = await this.confirmService.confirm(message, this.i18n('Remove redundancy'))
+    if (res === false) return
+
+    this.redundancyService.removeVideoRedundancies(redundancy)
+      .subscribe(
+        () => {
+          this.notifier.success(this.i18n('Video redundancies removed!'))
+          this.loadData()
+        },
+
+        err => this.notifier.error(err.message)
+      )
+
+  }
+
+  protected loadData () {
+    const options = {
+      pagination: this.pagination,
+      sort: this.sort,
+      target: this.displayType
+    }
+
+    this.redundancyService.listVideoRedundancies(options)
+                      .subscribe(
+                        resultList => {
+                          this.videoRedundancies = resultList.data
+                          this.totalRecords = resultList.total
+                        },
+
+                        err => this.notifier.error(err.message)
+                      )
+  }
+
+  private loadSelectLocalStorage () {
+    const displayType = peertubeLocalStorage.getItem(VideoRedundanciesListComponent.LOCAL_STORAGE_DISPLAY_TYPE)
+    if (displayType) this.displayType = displayType as VideoRedundanciesTarget
+  }
+
+  private saveSelectLocalStorage () {
+    peertubeLocalStorage.setItem(VideoRedundanciesListComponent.LOCAL_STORAGE_DISPLAY_TYPE, this.displayType)
+  }
+}
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.html b/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.html
new file mode 100644
index 000000000..9de6e4661
--- /dev/null
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.html
@@ -0,0 +1,19 @@
+<div>
+  <span class="label">Url</span>
+  <a target="_blank" rel="noopener noreferrer" [href]="redundancyElement.fileUrl">{{ redundancyElement.fileUrl }}</a>
+</div>
+
+<div>
+  <span class="label">Created on</span>
+  <span>{{ redundancyElement.createdAt | date: 'medium' }}</span>
+</div>
+
+<div>
+  <span class="label">Expires on</span>
+  <span>{{ redundancyElement.expiresOn | date: 'medium' }}</span>
+</div>
+
+<div>
+  <span class="label">Size</span>
+  <span>{{ redundancyElement.size | bytes: 1 }}</span>
+</div>
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss
new file mode 100644
index 000000000..6b09fbb01
--- /dev/null
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss
@@ -0,0 +1,8 @@
+@import '_variables';
+@import '_mixins';
+
+.label {
+  display: inline-block;
+  min-width: 100px;
+  font-weight: $font-semibold;
+}
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.ts b/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.ts
new file mode 100644
index 000000000..6f3090c08
--- /dev/null
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+import { FileRedundancyInformation, StreamingPlaylistRedundancyInformation } from '@shared/models'
+
+@Component({
+  selector: 'my-video-redundancy-information',
+  templateUrl: './video-redundancy-information.component.html',
+  styleUrls: [ './video-redundancy-information.component.scss' ]
+})
+export class VideoRedundancyInformationComponent {
+  @Input() redundancyElement: FileRedundancyInformation | StreamingPlaylistRedundancyInformation
+}
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
index 7797bc56e..a4ab2a58c 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
@@ -1,22 +1,64 @@
 <p-table
-  [value]="blockedAccounts" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)"
+  [value]="blockedAccounts" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} muted accounts"
 >
+  <ng-template pTemplate="caption">
+    <div class="caption">
+      <div class="ml-auto has-feedback has-clear">
+        <input
+          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+          (keyup)="onSearch($event)"
+        >
+        <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
+        <span class="sr-only" i18n>Clear filters</span>
+      </div>
+    </div>
+  </ng-template>
 
   <ng-template pTemplate="header">
     <tr>
-      <th i18n>Account</th>
-      <th i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 100%;" i18n>Account</th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 100px;"></th> <!-- column for action buttons --> 
     </tr>
   </ng-template>
 
   <ng-template pTemplate="body" let-accountBlock>
     <tr>
-      <td>{{ accountBlock.blockedAccount.nameWithHost }}</td>
-      <td>{{ accountBlock.createdAt }}</td>
+      <td>
+        <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
+          <div class="chip two-lines">
+            <img
+              class="avatar"
+              [src]="accountBlock.blockedAccount.avatar?.path"
+              (error)="switchToDefaultAvatar($event)"
+              alt="Avatar"
+            >
+            <div>
+              {{ accountBlock.blockedAccount.displayName }}
+              <span class="text-muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>
+            </div>
+          </div>
+        </a>
+      </td>
+
+      <td>{{ accountBlock.createdAt | date: 'short' }}</td>
       <td class="action-cell">
         <button class="unblock-button" (click)="unblockAccount(accountBlock)" i18n>Unmute</button>
       </td>
     </tr>
   </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="6">
+        <div class="empty-table-message">
+          <ng-container *ngIf="search" i18n>No account found matching current filters.</ng-container>
+          <ng-container *ngIf="!search" i18n>No account found.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
 </p-table>
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts
index 032bf745a..73a9ae75d 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts
@@ -2,18 +2,18 @@ import { Component, OnInit } from '@angular/core'
 import { Notifier } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { RestPagination, RestTable } from '@app/shared'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { AccountBlock, BlocklistService } from '@app/shared/blocklist'
+import { Actor } from '@app/shared/actor/actor.model'
 
 @Component({
   selector: 'my-instance-account-blocklist',
-  styleUrls: [ './instance-account-blocklist.component.scss' ],
+  styleUrls: [ '../moderation.component.scss', './instance-account-blocklist.component.scss' ],
   templateUrl: './instance-account-blocklist.component.html'
 })
 export class InstanceAccountBlocklistComponent extends RestTable implements OnInit {
   blockedAccounts: AccountBlock[] = []
   totalRecords = 0
-  rowsPerPage = 10
   sort: SortMeta = { field: 'createdAt', order: -1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
@@ -29,6 +29,14 @@ export class InstanceAccountBlocklistComponent extends RestTable implements OnIn
     this.initialize()
   }
 
+  getIdentifier () {
+    return 'InstanceAccountBlocklistComponent'
+  }
+
+  switchToDefaultAvatar ($event: Event) {
+    ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
+  }
+
   unblockAccount (accountBlock: AccountBlock) {
     const blockedAccount = accountBlock.blockedAccount
 
@@ -45,7 +53,11 @@ export class InstanceAccountBlocklistComponent extends RestTable implements OnIn
   }
 
   protected loadData () {
-    return this.blocklistService.getInstanceAccountBlocklist(this.pagination, this.sort)
+    return this.blocklistService.getInstanceAccountBlocklist({
+      pagination: this.pagination,
+      sort: this.sort,
+      search: this.search
+    })
       .subscribe(
         resultList => {
           this.blockedAccounts = resultList.data
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html
index f634ba834..dab068dd6 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html
@@ -1,23 +1,59 @@
 <p-table
-  [value]="blockedServers" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)"
+  [value]="blockedServers" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} muted instances"
 >
+  <ng-template pTemplate="caption">
+    <div class="caption">
+      <div class="ml-auto has-feedback has-clear">
+        <input
+          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+          (keyup)="onSearch($event)"
+        >
+        <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
+        <span class="sr-only" i18n>Clear filters</span>
+      </div>
+      <a class="ml-2 block-button" (click)="addServersToBlock()" (key.enter)="addServersToBlock()">
+        <my-global-icon iconName="add"></my-global-icon>
+        <ng-container i18n>Mute domain</ng-container>
+      </a>
+    </div>
+  </ng-template>
 
   <ng-template pTemplate="header">
     <tr>
-      <th i18n>Instance</th>
-      <th i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th></th>
+      <th style="width: 100%;" i18n>Instance</th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 100px;"></th> <!-- column for action buttons -->
     </tr>
   </ng-template>
 
   <ng-template pTemplate="body" let-serverBlock>
     <tr>
-      <td>{{ serverBlock.blockedServer.host }}</td>
-      <td>{{ serverBlock.createdAt }}</td>
+      <td>
+        <a [href]="'https://' + serverBlock.blockedServer.host" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
+          {{ serverBlock.blockedServer.host }}
+          <span class="glyphicon glyphicon-new-window"></span>
+        </a>
+      </td>
+      <td>{{ serverBlock.createdAt | date: 'short' }}</td>
       <td class="action-cell">
         <button class="unblock-button" (click)="unblockServer(serverBlock)" i18n>Unmute</button>
       </td>
     </tr>
   </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="6">
+        <div class="empty-table-message">
+          <ng-container *ngIf="search" i18n>No server found matching current filters.</ng-container>
+          <ng-container *ngIf="!search" i18n>No server found.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
 </p-table>
+
+<my-batch-domains-modal #batchDomainsModal i18n-action action="Mute domains" (domains)="onDomainsToBlock($event)"></my-batch-domains-modal>
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss
index 6028b75ea..c6c71587f 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss
@@ -1,7 +1,25 @@
 @import '_variables';
 @import '_mixins';
 
+a {
+  @include disable-default-a-behaviour;
+  display: inline-block;
+
+  &, &:hover {
+    color: var(--mainForegroundColor);
+  }
+
+  span {
+    font-size: 80%;
+    color: var(--inputPlaceholderColor);
+  }
+}
+
 .unblock-button {
   @include peertube-button;
   @include grey-button;
-}
\ No newline at end of file
+}
+
+.block-button {
+  @include create-button;
+}
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.ts b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.ts
index db3dfcd1c..559c9c0b0 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.ts
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.ts
@@ -1,20 +1,22 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { RestPagination, RestTable } from '@app/shared'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { BlocklistService } from '@app/shared/blocklist'
 import { ServerBlock } from '../../../../../../shared'
+import { BatchDomainsModalComponent } from '@app/+admin/config/shared/batch-domains-modal.component'
 
 @Component({
   selector: 'my-instance-server-blocklist',
-  styleUrls: [ './instance-server-blocklist.component.scss' ],
+  styleUrls: [ '../moderation.component.scss', './instance-server-blocklist.component.scss' ],
   templateUrl: './instance-server-blocklist.component.html'
 })
 export class InstanceServerBlocklistComponent extends RestTable implements OnInit {
+  @ViewChild('batchDomainsModal') batchDomainsModal: BatchDomainsModalComponent
+
   blockedServers: ServerBlock[] = []
   totalRecords = 0
-  rowsPerPage = 10
   sort: SortMeta = { field: 'createdAt', order: -1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
@@ -30,6 +32,10 @@ export class InstanceServerBlocklistComponent extends RestTable implements OnIni
     this.initialize()
   }
 
+  getIdentifier () {
+    return 'InstanceServerBlocklistComponent'
+  }
+
   unblockServer (serverBlock: ServerBlock) {
     const host = serverBlock.blockedServer.host
 
@@ -43,8 +49,29 @@ export class InstanceServerBlocklistComponent extends RestTable implements OnIni
       )
   }
 
+  addServersToBlock () {
+    this.batchDomainsModal.openModal()
+  }
+
+  onDomainsToBlock (domains: string[]) {
+    domains.forEach(domain => {
+      this.blocklistService.blockServerByInstance(domain)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Instance {{domain}} muted by your instance.', { domain }))
+
+            this.loadData()
+          }
+        )
+    })
+  }
+
   protected loadData () {
-    return this.blocklistService.getInstanceServerBlocklist(this.pagination, this.sort)
+    return this.blocklistService.getInstanceServerBlocklist({
+      pagination: this.pagination,
+      sort: this.sort,
+      search: this.search
+    })
       .subscribe(
         resultList => {
           this.blockedServers = resultList.data
diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss
index 13b019c5b..26c2a30d4 100644
--- a/client/src/app/+admin/moderation/moderation.component.scss
+++ b/client/src/app/+admin/moderation/moderation.component.scss
@@ -1,25 +1,151 @@
 @import 'variables';
 @import 'mixins';
+@import 'miniature';
 
 .form-sub-title {
   flex-grow: 0;
   margin-right: 30px;
 }
 
-.moderation-expanded-label {
-  font-weight: $font-semibold;
-  min-width: 200px;
-  display: inline-block;
-  vertical-align: top;
+.caption {
+  justify-content: flex-end;
+
+  input {
+    @include peertube-input-text(250px);
+    flex-grow: 1;
+  }
 }
 
-.moderation-expanded-text {
-  display: inline-block;
+.empty-table-message {
+  @include empty-state;
 }
 
 .moderation-expanded {
-  word-wrap: break-word;
-  overflow: visible !important;
-  text-overflow: unset !important;
-  white-space: unset !important;
+  font-size: 90%;
+
+  .moderation-expanded-label {
+    font-weight: $font-semibold;
+    display: inline-block;
+    vertical-align: top;
+    text-align: right;
+  }
+  
+  .moderation-expanded-text {
+    display: inline-flex;
+    word-wrap: break-word;
+  
+    ::ng-deep p:last-child {
+      margin-bottom: 0px !important;
+    }
+  }
+}
+
+.video-table-states {
+  & > :not(:first-child) {
+    margin-left: .4rem;
+  }
+}
+
+.screenratio {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 56%;
+
+  div {
+    @include miniature-thumbnail;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--inputPlaceholderColor);
+  }
+
+  ::ng-deep iframe {
+    position: absolute;
+    width: 100% !important;
+    height: 100% !important;
+    left: 0;
+    top: 0;
+  }
+}
+
+.chip {
+  @include chip;
+}
+
+my-action-dropdown.show {
+  ::ng-deep .dropdown-root {
+    display: block !important;
+  }
+}
+
+
+.video-table-video-link {
+  @include disable-outline;
+  position: relative;
+  top: 3px;
+}
+
+.video-table-video {
+  display: inline-flex;
+
+  .video-table-video-image {
+    @include miniature-thumbnail;
+
+    $image-height: 45px;
+
+    height: $image-height;
+    width: #{(16/9) * $image-height};
+    margin-right: 0.5rem;
+    border-radius: 2px;
+    border: none;
+    background: transparent;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    img {
+      height: 100%;
+      width: 100%;
+      border-radius: 2px;
+    }
+
+    span {
+      color: var(--inputPlaceholderColor);
+    }
+
+    .video-table-video-image-label {
+      @include static-thumbnail-overlay;
+      position: absolute;
+      border-radius: 3px;
+      font-size: 10px;
+      padding: 0 3px;
+      line-height: 1.3;
+      bottom: 2px;
+      right: 2px;
+    }
+  }
+
+  .video-table-video-text {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 90%;
+    color: var(--mainForegroundColor);
+    line-height: 1rem;
+
+    div .glyphicon {
+      font-size: 80%;
+      color: gray;
+      margin-left: 0.1rem;
+    }
+
+    div + div {
+      font-size: 80%;
+    }
+  }
 }
diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
index 303a788d2..8082e93f4 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
@@ -8,7 +8,9 @@
   <div class="modal-body">
     <form novalidate [formGroup]="form" (ngSubmit)="banUser()">
       <div class="form-group">
-        <textarea formControlName="moderationComment" [ngClass]="{ 'input-error': formErrors['moderationComment'] }">
+        <textarea
+          formControlName="moderationComment" ngbAutofocus i18-placeholder placeholder="Comment this report…"
+          [ngClass]="{ 'input-error': formErrors['moderationComment'] }" class="form-control">
         </textarea>
         <div *ngIf="formErrors.moderationComment" class="form-error">
           {{ formErrors.moderationComment }}
@@ -20,7 +22,10 @@
       </div>
 
       <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span>
+        <input
+          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          (click)="hide()" (key.enter)="hide()"
+        >
 
         <input
           type="submit" i18n-value value="Update this comment" class="action-button-submit"
diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
index f8a5ef8cb..a0471f2b0 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
+++ b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
@@ -32,13 +32,13 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI
 
   ngOnInit () {
     this.buildForm({
-      moderationComment: this.videoAbuseValidatorsService.VIDEO_ABUSE_REASON
+      moderationComment: this.videoAbuseValidatorsService.VIDEO_ABUSE_MODERATION_COMMENT
     })
   }
 
   openModal (abuseToComment: VideoAbuse) {
     this.abuseToComment = abuseToComment
-    this.openedModal = this.modalService.open(this.modal)
+    this.openedModal = this.modalService.open(this.modal, { centered: true })
 
     this.form.patchValue({
       moderationComment: this.abuseToComment.moderationComment
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html
new file mode 100644
index 000000000..2abcc0669
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html
@@ -0,0 +1,77 @@
+<div class="d-flex moderation-expanded">
+  <!-- report left part (report details) -->
+  <div class="col-8">
+
+    <!-- report metadata -->
+    <div class="d-flex">
+      <span class="col-3 moderation-expanded-label" i18n>Reporter</span>
+      <span class="col-9 moderation-expanded-text">
+        <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reporter:&quot;' + videoAbuse.reporterAccount.displayName + '&quot;' }" class="chip">
+          <img
+            class="avatar"
+            [src]="videoAbuse.reporterAccount.avatar?.path"
+            (error)="switchToDefaultAvatar($event)"
+            alt="Avatar"
+          >
+          <div>
+            <span class="text-muted">{{ videoAbuse.reporterAccount.nameWithHost }}</span>
+          </div>
+        </a>
+        <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' + videoAbuse.reporterAccount.displayName + '&quot;' }" class="ml-auto text-muted video-details-links" i18n>
+          {videoAbuse.countReportsForReporter, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
+        </a>
+      </span>
+    </div>
+
+    <div class="d-flex">
+      <span class="col-3 moderation-expanded-label" i18n>Reportee</span>
+      <span class="col-9 moderation-expanded-text">
+        <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' +videoAbuse.video.channel.ownerAccount.displayName + '&quot;' }" class="chip">
+          <img
+            class="avatar"
+            [src]="videoAbuse.video.channel.ownerAccount?.avatar?.path"
+            (error)="switchToDefaultAvatar($event)"
+            alt="Avatar"
+          >
+          <div>
+            <span class="text-muted">{{ videoAbuse.video.channel.ownerAccount ? videoAbuse.video.channel.ownerAccount.nameWithHost : '' }}</span>
+          </div>
+        </a>
+        <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' +videoAbuse.video.channel.ownerAccount.displayName + '&quot;' }" class="ml-auto text-muted video-details-links" i18n>
+          {videoAbuse.countReportsForReportee, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
+        </a>
+      </span>
+    </div>
+
+    <div class="d-flex" *ngIf="videoAbuse.updatedAt">
+      <span class="col-3 moderation-expanded-label" i18n>Updated</span>
+      <time class="col-9 moderation-expanded-text video-details-date-updated">{{ videoAbuse.updatedAt | date: 'medium' }}</time>
+    </div>
+
+    <!-- report text -->
+    <div class="mt-3 d-flex">
+      <span class="col-3 moderation-expanded-label">
+        <ng-container i18n>Report</ng-container>
+        <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': '#' + videoAbuse.id  }" class="ml-1 text-muted">#{{ videoAbuse.id }}</a>
+      </span>
+      <span class="col-9 moderation-expanded-text" [innerHTML]="videoAbuse.reasonHtml"></span>
+    </div>
+
+    <div class="mt-3 d-flex" *ngIf="videoAbuse.moderationComment">
+      <span class="col-3 moderation-expanded-label" i18n>Note</span>
+      <span class="col-9 moderation-expanded-text" [innerHTML]="videoAbuse.moderationCommentHtml"></span>
+    </div>
+
+  </div>
+
+  <!-- report right part (video details) -->
+  <div class="col-4">
+    <div class="screenratio">
+      <div *ngIf="videoAbuse.video.deleted || videoAbuse.video.blacklisted">
+        <span i18n *ngIf="videoAbuse.video.deleted">The video was deleted</span>
+        <span i18n *ngIf="!videoAbuse.video.deleted">The video was blacklisted</span>
+      </div>
+      <div *ngIf="!videoAbuse.video.deleted && !videoAbuse.video.blacklisted" [innerHTML]="videoAbuse.embedHtml"></div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.ts b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.ts
new file mode 100644
index 000000000..d9cb19845
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core'
+import { Account } from '@app/shared/account/account.model'
+import { Actor } from '@app/shared/actor/actor.model'
+import { ProcessedVideoAbuse } from './video-abuse-list.component'
+
+@Component({
+  selector: 'my-video-abuse-details',
+  templateUrl: './video-abuse-details.component.html',
+  styleUrls: [ '../moderation.component.scss' ]
+})
+export class VideoAbuseDetailsComponent {
+  @Input() videoAbuse: ProcessedVideoAbuse
+
+  switchToDefaultAvatar ($event: Event) {
+    ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
+  }
+}
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
index 30eb2dbde..1c9530152 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
@@ -1,13 +1,45 @@
 <p-table
-  [value]="videoAbuses" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+  [value]="videoAbuses" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id" [resizableColumns]="true"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} reports"
+  (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
 >
+  <ng-template pTemplate="caption">
+    <div class="caption">
+      <div class="ml-auto">
+        <div class="input-group has-feedback has-clear">
+          <div class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
+            <div class="input-group-text" ngbDropdownToggle>
+              <span class="caret" aria-haspopup="menu" role="button"></span>
+            </div>
+
+            <div role="menu" ngbDropdownMenu>
+              <h6 class="dropdown-header" i18n>Advanced report filters</h6>
+              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'state:pending' }" class="dropdown-item" i18n>Unsolved reports</a>
+              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'state:accepted' }" class="dropdown-item" i18n>Accepted reports</a>
+              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'state:rejected' }" class="dropdown-item" i18n>Refused reports</a>
+              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'videoIs:blacklisted' }" class="dropdown-item" i18n>Reports with blacklisted videos</a>
+              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'videoIs:deleted' }" class="dropdown-item" i18n>Reports with deleted videos</a>
+            </div>
+          </div>
+          <input
+            type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+            (keyup)="onAbuseSearch($event)"
+          >
+          <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetTableFilter()"></a>
+          <span class="sr-only" i18n>Clear filters</span>
+        </div>
+      </div>
+    </div>
+  </ng-template>
+
   <ng-template pTemplate="header">
-    <tr>
-      <th style="width: 40px"></th>
-      <th i18n>Reporter</th>
-      <th i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+    <tr> <!-- header -->
+      <th style="width: 40px;"></th>
+      <th style="width: 20%;" pResizableColumn i18n>Reporter</th>
       <th i18n>Video</th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
       <th i18n pSortableColumn="state" style="width: 80px;">State <p-sortIcon field="state"></p-sortIcon></th>
       <th style="width: 120px;"></th>
     </tr>
@@ -15,51 +47,103 @@
 
   <ng-template pTemplate="body" let-expanded="expanded" let-videoAbuse>
     <tr>
-      <td class="expand-cell">
-        <span class="expander" [pRowToggler]="videoAbuse">
+      <td class="c-hand" [pRowToggler]="videoAbuse" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
+        <span class="expander">
           <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
         </span>
       </td>
 
       <td>
-        <a [href]="videoAbuse.reporterAccount.url" i18n-title title="Go to the account" target="_blank" rel="noopener noreferrer">
-          {{ createByString(videoAbuse.reporterAccount) }}
+        <a [href]="videoAbuse.reporterAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
+          <div class="chip two-lines">
+            <img
+              class="avatar"
+              [src]="videoAbuse.reporterAccount.avatar?.path"
+              (error)="switchToDefaultAvatar($event)"
+              alt="Avatar"
+            >
+            <div>
+              {{ videoAbuse.reporterAccount.displayName }}
+              <span class="text-muted">{{ videoAbuse.reporterAccount.nameWithHost }}</span>
+            </div>
+          </div>
         </a>
       </td>
 
-      <td>{{ videoAbuse.createdAt }}</td>
-
-      <td>
-        <a [href]="getVideoUrl(videoAbuse)" i18n-title title="Go to the video" target="_blank" rel="noopener noreferrer">
-          {{ videoAbuse.video.name }}
+      <td *ngIf="!videoAbuse.video.deleted">
+        <a [href]="getVideoUrl(videoAbuse)" class="video-table-video-link" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
+          <div class="video-table-video">
+            <div class="video-table-video-image">
+              <img [src]="videoAbuse.video.thumbnailPath">
+              <span
+                class="video-table-video-image-label" *ngIf="videoAbuse.count > 1"
+                i18n-title title="This video has been reported multiple times."
+              >
+                {{ videoAbuse.nth }}/{{ videoAbuse.count }}
+              </span>
+            </div>
+            <div class="video-table-video-text">
+              <div>
+                {{ videoAbuse.video.name }}
+                <span *ngIf="!videoAbuse.video.blacklisted" class="glyphicon glyphicon-new-window"></span>
+                <span *ngIf="videoAbuse.video.blacklisted" i18n-title title="Video was blacklisted" class="glyphicon glyphicon-ban-circle"></span>
+              </div>
+              <div class="text-muted" i18n>by {{ videoAbuse.video.channel?.displayName }} on {{ videoAbuse.video.channel?.host }} </div>
+            </div>
+          </div>
         </a>
       </td>
 
-      <td>
+      <td *ngIf="videoAbuse.video.deleted" class="c-hand" [pRowToggler]="videoAbuse">
+        <div class="video-table-video" i18n-title title="Video was deleted">
+          <div class="video-table-video-image">
+            <span i18n>Deleted</span>
+          </div>
+          <div class="video-table-video-text">
+            <div>
+              {{ videoAbuse.video.name }}
+              <span class="glyphicon glyphicon-trash"></span>
+            </div>
+            <div class="text-muted" i18n>by {{ videoAbuse.video.channel?.displayName }} on {{ videoAbuse.video.channel?.host }} </div>
+          </div>
+        </div>
+      </td>
+
+      <td class="c-hand" [pRowToggler]="videoAbuse">{{ videoAbuse.createdAt | date: 'short'  }}</td>
+
+      <td class="c-hand video-abuse-states" [pRowToggler]="videoAbuse">
         <span *ngIf="isVideoAbuseAccepted(videoAbuse)" [title]="videoAbuse.state.label" class="glyphicon glyphicon-ok"></span>
         <span *ngIf="isVideoAbuseRejected(videoAbuse)" [title]="videoAbuse.state.label" class="glyphicon glyphicon-remove"></span>
+        <span *ngIf="videoAbuse.moderationComment" container="body" placement="left auto" [ngbTooltip]="videoAbuse.moderationComment" class="glyphicon glyphicon-comment"></span>
       </td>
 
       <td class="action-cell">
-        <my-action-dropdown placement="bottom-right" i18n-label label="Actions" [actions]="videoAbuseActions" [entry]="videoAbuse"></my-action-dropdown>
+        <my-action-dropdown
+          [ngClass]="{ 'show': expanded }" placement="bottom-right top-right left auto" container="body"
+          i18n-label label="Actions" [actions]="videoAbuseActions" [entry]="videoAbuse"
+        ></my-action-dropdown>
       </td>
     </tr>
   </ng-template>
 
   <ng-template pTemplate="rowexpansion" let-videoAbuse>
       <tr>
-        <td class="moderation-expanded" colspan="6">
-          <div>
-            <span i18n class="moderation-expanded-label">Reason:</span>
-            <span class="moderation-expanded-text" [innerHTML]="videoAbuse.reasonHtml"></span>
-          </div>
-          <div *ngIf="videoAbuse.moderationComment">
-            <span i18n class="moderation-expanded-label">Moderation comment:</span>
-            <span class="moderation-expanded-text" [innerHTML]="videoAbuse.moderationCommentHtml"></span>
-          </div>
+        <td class="expand-cell" colspan="6">
+          <my-video-abuse-details [videoAbuse]="videoAbuse"></my-video-abuse-details>
         </td>
       </tr>
   </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="6">
+        <div class="empty-table-message">
+          <ng-container *ngIf="search" i18n>No video abuses found matching current filters.</ng-container>
+          <ng-container *ngIf="!search" i18n>No video abuses found.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
 </p-table>
 
 <my-moderation-comment-modal #moderationCommentModal (commentUpdated)="onModerationCommentUpdated()"></my-moderation-comment-modal>
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
new file mode 100644
index 000000000..8eee15b64
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
@@ -0,0 +1,23 @@
+@import 'mixins';
+@import 'miniature';
+
+.video-details-date-updated {
+  font-size: 90%;
+  margin-top: .1rem;
+}
+
+.video-details-links {
+  @include disable-default-a-behaviour;
+}
+
+.video-abuse-states .glyphicon-comment {
+  margin-left: 0.5rem;
+}
+
+.input-group {
+  @include peertube-input-group(300px);
+
+  .dropdown-toggle::after {
+    margin-left: 0;
+  }
+}
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
index 778f18d3d..39f619cc3 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
@@ -1,65 +1,222 @@
-import { Component, OnInit, ViewChild } from '@angular/core'
-import { Account } from '../../../shared/account/account.model'
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'
+import { Account } from '@app/shared/account/account.model'
 import { Notifier } from '@app/core'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { VideoAbuse, VideoAbuseState } from '../../../../../../shared'
-import { RestPagination, RestTable, VideoAbuseService } from '../../../shared'
+import { RestPagination, RestTable, VideoAbuseService, VideoBlacklistService } from '../../../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { DropdownAction } from '../../../shared/buttons/action-dropdown.component'
 import { ConfirmService } from '../../../core/index'
 import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
 import { Video } from '../../../shared/video/video.model'
 import { MarkdownService } from '@app/shared/renderer'
+import { Actor } from '@app/shared/actor/actor.model'
+import { buildVideoLink, buildVideoEmbed } from 'src/assets/player/utils'
+import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
+import { DomSanitizer } from '@angular/platform-browser'
+import { BlocklistService } from '@app/shared/blocklist'
+import { VideoService } from '@app/shared/video/video.service'
+import { ActivatedRoute, Params, Router } from '@angular/router'
+import { filter } from 'rxjs/operators'
+
+export type ProcessedVideoAbuse = VideoAbuse & {
+  moderationCommentHtml?: string,
+  reasonHtml?: string
+  embedHtml?: string
+  updatedAt?: Date
+  // override bare server-side definitions with rich client-side definitions
+  reporterAccount: Account
+  video: VideoAbuse['video'] & {
+    channel: VideoAbuse['video']['channel'] & {
+      ownerAccount: Account
+    }
+  }
+}
 
 @Component({
   selector: 'my-video-abuse-list',
   templateUrl: './video-abuse-list.component.html',
-  styleUrls: [ '../moderation.component.scss']
+  styleUrls: [ '../moderation.component.scss', './video-abuse-list.component.scss' ]
 })
-export class VideoAbuseListComponent extends RestTable implements OnInit {
+export class VideoAbuseListComponent extends RestTable implements OnInit, AfterViewInit {
   @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent
 
-  videoAbuses: (VideoAbuse & { moderationCommentHtml?: string, reasonHtml?: string })[] = []
+  videoAbuses: ProcessedVideoAbuse[] = []
   totalRecords = 0
-  rowsPerPage = 10
   sort: SortMeta = { field: 'createdAt', order: 1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
-  videoAbuseActions: DropdownAction<VideoAbuse>[] = []
+  videoAbuseActions: DropdownAction<VideoAbuse>[][] = []
 
   constructor (
     private notifier: Notifier,
     private videoAbuseService: VideoAbuseService,
+    private blocklistService: BlocklistService,
+    private videoService: VideoService,
+    private videoBlacklistService: VideoBlacklistService,
     private confirmService: ConfirmService,
     private i18n: I18n,
-    private markdownRenderer: MarkdownService
+    private markdownRenderer: MarkdownService,
+    private sanitizer: DomSanitizer,
+    private route: ActivatedRoute,
+    private router: Router
   ) {
     super()
 
     this.videoAbuseActions = [
-      {
-        label: this.i18n('Delete this report'),
-        handler: videoAbuse => this.removeVideoAbuse(videoAbuse)
-      },
-      {
-        label: this.i18n('Update moderation comment'),
-        handler: videoAbuse => this.openModerationCommentModal(videoAbuse)
-      },
-      {
-        label: this.i18n('Mark as accepted'),
-        handler: videoAbuse => this.updateVideoAbuseState(videoAbuse, VideoAbuseState.ACCEPTED),
-        isDisplayed: videoAbuse => !this.isVideoAbuseAccepted(videoAbuse)
-      },
-      {
-        label: this.i18n('Mark as rejected'),
-        handler: videoAbuse => this.updateVideoAbuseState(videoAbuse, VideoAbuseState.REJECTED),
-        isDisplayed: videoAbuse => !this.isVideoAbuseRejected(videoAbuse)
-      }
+      [
+        {
+          label: this.i18n('Internal actions'),
+          isHeader: true
+        },
+        {
+          label: this.i18n('Delete report'),
+          handler: videoAbuse => this.removeVideoAbuse(videoAbuse)
+        },
+        {
+          label: this.i18n('Add note'),
+          handler: videoAbuse => this.openModerationCommentModal(videoAbuse),
+          isDisplayed: videoAbuse => !videoAbuse.moderationComment
+        },
+        {
+          label: this.i18n('Update note'),
+          handler: videoAbuse => this.openModerationCommentModal(videoAbuse),
+          isDisplayed: videoAbuse => !!videoAbuse.moderationComment
+        },
+        {
+          label: this.i18n('Mark as accepted'),
+          handler: videoAbuse => this.updateVideoAbuseState(videoAbuse, VideoAbuseState.ACCEPTED),
+          isDisplayed: videoAbuse => !this.isVideoAbuseAccepted(videoAbuse)
+        },
+        {
+          label: this.i18n('Mark as rejected'),
+          handler: videoAbuse => this.updateVideoAbuseState(videoAbuse, VideoAbuseState.REJECTED),
+          isDisplayed: videoAbuse => !this.isVideoAbuseRejected(videoAbuse)
+        }
+      ],
+      [
+        {
+          label: this.i18n('Actions for the video'),
+          isHeader: true,
+          isDisplayed: videoAbuse => !videoAbuse.video.deleted
+        },
+        {
+          label: this.i18n('Blacklist video'),
+          isDisplayed: videoAbuse => !videoAbuse.video.deleted && !videoAbuse.video.blacklisted,
+          handler: videoAbuse => {
+            this.videoBlacklistService.blacklistVideo(videoAbuse.video.id, undefined, true)
+              .subscribe(
+                () => {
+                  this.notifier.success(this.i18n('Video blacklisted.'))
+
+                  this.updateVideoAbuseState(videoAbuse, VideoAbuseState.ACCEPTED)
+                },
+
+                err => this.notifier.error(err.message)
+              )
+          }
+        },
+        {
+          label: this.i18n('Unblacklist video'),
+          isDisplayed: videoAbuse => !videoAbuse.video.deleted && videoAbuse.video.blacklisted,
+          handler: videoAbuse => {
+            this.videoBlacklistService.removeVideoFromBlacklist(videoAbuse.video.id)
+              .subscribe(
+                () => {
+                  this.notifier.success(this.i18n('Video unblacklisted.'))
+
+                  this.updateVideoAbuseState(videoAbuse, VideoAbuseState.ACCEPTED)
+                },
+
+                err => this.notifier.error(err.message)
+              )
+          }
+        },
+        {
+          label: this.i18n('Delete video'),
+          isDisplayed: videoAbuse => !videoAbuse.video.deleted,
+          handler: async videoAbuse => {
+            const res = await this.confirmService.confirm(
+              this.i18n('Do you really want to delete this video?'),
+              this.i18n('Delete')
+            )
+            if (res === false) return
+
+            this.videoService.removeVideo(videoAbuse.video.id)
+              .subscribe(
+                () => {
+                  this.notifier.success(this.i18n('Video deleted.'))
+
+                  this.updateVideoAbuseState(videoAbuse, VideoAbuseState.ACCEPTED)
+                },
+
+                err => this.notifier.error(err.message)
+              )
+          }
+        }
+      ],
+      [
+        {
+          label: this.i18n('Actions for the reporter'),
+          isHeader: true
+        },
+        {
+          label: this.i18n('Mute reporter'),
+          handler: async videoAbuse => {
+            const account = videoAbuse.reporterAccount as Account
+
+            this.blocklistService.blockAccountByInstance(account)
+              .subscribe(
+                () => {
+                  this.notifier.success(
+                    this.i18n('Account {{nameWithHost}} muted by the instance.', { nameWithHost: account.nameWithHost })
+                  )
+
+                  account.mutedByInstance = true
+                },
+
+                err => this.notifier.error(err.message)
+              )
+          }
+        },
+        {
+          label: this.i18n('Mute server'),
+          isDisplayed: videoAbuse => !videoAbuse.reporterAccount.userId,
+          handler: async videoAbuse => {
+            this.blocklistService.blockServerByInstance(videoAbuse.reporterAccount.host)
+              .subscribe(
+                () => {
+                  this.notifier.success(
+                    this.i18n('Server {{host}} muted by the instance.', { host: videoAbuse.reporterAccount.host })
+                  )
+                },
+
+                err => this.notifier.error(err.message)
+              )
+          }
+        }
+      ]
     ]
   }
 
   ngOnInit () {
     this.initialize()
+
+    this.route.queryParams
+      .pipe(filter(params => params.search !== undefined && params.search !== null))
+      .subscribe(params => {
+        this.search = params.search
+        this.setTableFilter(params.search)
+        this.loadData()
+      })
+  }
+
+  ngAfterViewInit () {
+    if (this.search) this.setTableFilter(this.search)
+  }
+
+  getIdentifier () {
+    return 'VideoAbuseListComponent'
   }
 
   openModerationCommentModal (videoAbuse: VideoAbuse) {
@@ -70,10 +227,25 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
     this.loadData()
   }
 
-  createByString (account: Account) {
-    return Account.CREATE_BY_STRING(account.name, account.host)
+  /* Table filter functions */
+  onAbuseSearch (event: Event) {
+    this.onSearch(event)
+    this.setQueryParams((event.target as HTMLInputElement).value)
+  }
+
+  setQueryParams (search: string) {
+    const queryParams: Params = {}
+    if (search) Object.assign(queryParams, { search })
+    this.router.navigate([ '/admin/moderation/video-abuses/list' ], { queryParams })
   }
 
+  resetTableFilter () {
+    this.setTableFilter('')
+    this.setQueryParams('')
+    this.resetSearch()
+  }
+  /* END Table filter functions */
+
   isVideoAbuseAccepted (videoAbuse: VideoAbuse) {
     return videoAbuse.state.id === VideoAbuseState.ACCEPTED
   }
@@ -86,6 +258,19 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
     return Video.buildClientUrl(videoAbuse.video.uuid)
   }
 
+  getVideoEmbed (videoAbuse: VideoAbuse) {
+    const absoluteAPIUrl = getAbsoluteAPIUrl()
+    const embedUrl = buildVideoLink({
+      baseUrl: absoluteAPIUrl + '/videos/embed/' + videoAbuse.video.uuid,
+      warningTitle: false
+    })
+    return buildVideoEmbed(embedUrl)
+  }
+
+  switchToDefaultAvatar ($event: Event) {
+    ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
+  }
+
   async removeVideoAbuse (videoAbuse: VideoAbuse) {
     const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this abuse report?'), this.i18n('Delete'))
     if (res === false) return
@@ -111,24 +296,34 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
   }
 
   protected loadData () {
-    return this.videoAbuseService.getVideoAbuses(this.pagination, this.sort)
-               .subscribe(
-                 async resultList => {
-                   this.totalRecords = resultList.total
+    return this.videoAbuseService.getVideoAbuses({
+      pagination: this.pagination,
+      sort: this.sort,
+      search: this.search
+    }).subscribe(
+        async resultList => {
+          this.totalRecords = resultList.total
+          const videoAbuses = []
+
+          for (const abuse of resultList.data) {
+            Object.assign(abuse, {
+              reasonHtml: await this.toHtml(abuse.reason),
+              moderationCommentHtml: await this.toHtml(abuse.moderationComment),
+              embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse)),
+              reporterAccount: new Account(abuse.reporterAccount)
+            })
 
-                   this.videoAbuses = resultList.data
+            if (abuse.video.channel?.ownerAccount) abuse.video.channel.ownerAccount = new Account(abuse.video.channel.ownerAccount)
+            if (abuse.updatedAt === abuse.createdAt) delete abuse.updatedAt
 
-                   for (const abuse of this.videoAbuses) {
-                     Object.assign(abuse, {
-                       reasonHtml: await this.toHtml(abuse.reason),
-                       moderationCommentHtml: await this.toHtml(abuse.moderationComment)
-                     })
-                   }
+            videoAbuses.push(abuse as ProcessedVideoAbuse)
+          }
 
-                 },
+          this.videoAbuses = videoAbuses
+        },
 
-                 err => this.notifier.error(err.message)
-               )
+        err => this.notifier.error(err.message)
+      )
   }
 
   private toHtml (text: string) {
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
index a0b89acc6..c4c4e765a 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
@@ -1,47 +1,98 @@
 <p-table
-  [value]="blacklist" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+  [value]="blacklist" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} blacklisted videos"
+  (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
 >
+  <ng-template pTemplate="caption">
+    <div class="caption">
+      <div class="ml-auto has-feedback has-clear">
+        <input
+          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+          (keyup)="onSearch($event)"
+        >
+        <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
+        <span class="sr-only" i18n>Clear filters</span>
+      </div>
+    </div>
+  </ng-template>
+
   <ng-template pTemplate="header">
     <tr>
       <th style="width: 40px"></th>
-      <th i18n pSortableColumn="name">Video name <p-sortIcon field="name"></p-sortIcon></th>
-      <th i18n>Sensitive</th>
-      <th i18n>Unfederated</th>
-      <th i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th>
+      <th style="width: 100px;" i18n>Sensitive</th>
+      <th style="width: 120px;" i18n>Unfederated</th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
       <th style="width: 120px;"></th>
     </tr>
   </ng-template>
 
   <ng-template pTemplate="body" let-videoBlacklist let-expanded="expanded">
     <tr>
-      <td class="expand-cell">
-        <span *ngIf="videoBlacklist.reason" class="expander" [pRowToggler]="videoBlacklist">
+      <td *ngIf="!videoBlacklist.reason"></td>
+      <td *ngIf="videoBlacklist.reason" class="expand-cell c-hand" [pRowToggler]="videoBlacklist" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
+        <span class="expander">
           <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
         </span>
       </td>
 
       <td>
-        <a [href]="getVideoUrl(videoBlacklist)" i18n-title title="Go to the video" target="_blank" rel="noopener noreferrer">
-          {{ videoBlacklist.video.name }}
+        <a [href]="getVideoUrl(videoBlacklist)" class="video-table-video-link" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
+          <div class="video-table-video">
+            <div class="video-table-video-image">
+              <img [src]="videoBlacklist.video.thumbnailPath">
+            </div>
+            <div class="video-table-video-text">
+              <div>
+                {{ videoBlacklist.video.name }}
+                <span i18n-title title="Video was blacklisted" class="glyphicon glyphicon-ban-circle"></span>
+              </div>
+              <div class="text-muted">by {{ videoBlacklist.video.channel?.displayName }} on {{ videoBlacklist.video.channel?.host }} </div>
+            </div>
+          </div>
         </a>
       </td>
 
-      <td>{{ booleanToText(videoBlacklist.video.nsfw) }}</td>
-      <td>{{ booleanToText(videoBlacklist.unfederated) }}</td>
-      <td>{{ videoBlacklist.createdAt }}</td>
+      <ng-container *ngIf="videoBlacklist.reason">
+        <td class="c-hand" [pRowToggler]="videoBlacklist">{{ booleanToText(videoBlacklist.video.nsfw) }}</td>
+        <td class="c-hand" [pRowToggler]="videoBlacklist">{{ booleanToText(videoBlacklist.unfederated) }}</td>
+        <td class="c-hand" [pRowToggler]="videoBlacklist">{{ videoBlacklist.createdAt | date: 'short' }}</td>
+      </ng-container>
+      <ng-container *ngIf="!videoBlacklist.reason">
+        <td>{{ booleanToText(videoBlacklist.video.nsfw) }}</td>
+        <td>{{ booleanToText(videoBlacklist.unfederated) }}</td>
+        <td>{{ videoBlacklist.createdAt | date: 'short' }}</td>
+      </ng-container>
 
       <td class="action-cell">
-        <my-action-dropdown i18n-label  placement="bottom-right" label="Actions" [actions]="videoBlacklistActions" [entry]="videoBlacklist"></my-action-dropdown>
+        <my-action-dropdown
+          [ngClass]="{ 'show': expanded }" placement="bottom-right" container="body"
+          i18n-label label="Actions" [actions]="videoBlacklistActions" [entry]="videoBlacklist"
+        ></my-action-dropdown>
       </td>
     </tr>
   </ng-template>
 
   <ng-template pTemplate="rowexpansion" let-videoBlacklist>
     <tr>
-      <td class="moderation-expanded" colspan="6">
-        <span i18n class="moderation-expanded-label">Blacklist reason:</span>
-        <span class="moderation-expanded-text" [innerHTML]="videoBlacklist.reasonHtml"></span>
+      <td class="expand-cell" colspan="6">
+        <div class="d-flex moderation-expanded">
+          <span class="col-2 moderation-expanded-label" i18n>Blacklist reason:</span>
+          <span class="col-9 moderation-expanded-text" [innerHTML]="videoBlacklist.reasonHtml"></span>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="6">
+        <div class="empty-table-message">
+          <ng-container *ngIf="search" i18n>No blacklisted video found matching current filters.</ng-container>
+          <ng-container *ngIf="!search" i18n>No blacklisted video found.</ng-container>
+        </div>
       </td>
     </tr>
   </ng-template>
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
index 5876f658b..63ecdeb9f 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { Notifier, ServerService } from '@app/core'
 import { ConfirmService } from '../../../core'
 import { RestPagination, RestTable, VideoBlacklistService } from '../../../shared'
@@ -17,8 +17,7 @@ import { MarkdownService } from '@app/shared/renderer'
 export class VideoBlacklistListComponent extends RestTable implements OnInit {
   blacklist: (VideoBlacklist & { reasonHtml?: string })[] = []
   totalRecords = 0
-  rowsPerPage = 10
-  sort: SortMeta = { field: 'createdAt', order: 1 }
+  sort: SortMeta = { field: 'createdAt', order: -1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
   listBlacklistTypeFilter: VideoBlacklistType = undefined
 
@@ -38,7 +37,7 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit {
   ngOnInit () {
     this.serverService.getConfig()
         .subscribe(config => {
-          // don't filter if auto-blacklist not enabled as this will be only list
+          // don't filter if auto-blacklist is not enabled as this will be the only list
           if (config.autoBlacklist.videos.ofUsers.enabled) {
             this.listBlacklistTypeFilter = VideoBlacklistType.MANUAL
           }
@@ -54,6 +53,10 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit {
     ]
   }
 
+  getIdentifier () {
+    return 'VideoBlacklistListComponent'
+  }
+
   getVideoUrl (videoBlacklist: VideoBlacklist) {
     return Video.buildClientUrl(videoBlacklist.video.uuid)
   }
@@ -87,7 +90,12 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit {
   }
 
   protected loadData () {
-    this.videoBlacklistService.listBlacklist(this.pagination, this.sort, this.listBlacklistTypeFilter)
+    this.videoBlacklistService.listBlacklist({
+      pagination: this.pagination,
+      sort: this.sort,
+      search: this.search,
+      type: this.listBlacklistTypeFilter
+    })
       .subscribe(
         async resultList => {
           this.totalRecords = resultList.total
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
index 4526aaf66..a2d0fde08 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
@@ -10,22 +10,19 @@
   <div class="card plugin" *ngFor="let plugin of plugins">
     <div class="card-body">
       <div class="first-row">
-        <a class="plugin-name" [routerLink]="getShowRouterLink(plugin)" title="Show plugin settings">{{ plugin.name }}</a>
+        <span class="plugin-name">{{ plugin.name }}</span>
 
         <span class="plugin-version">{{ plugin.version }}</span>
-      </div>
 
-      <div class="second-row">
-        <div class="description">{{ plugin.description }}</div>
+        <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Go to the plugin homepage">
+          <my-global-icon iconName="home"></my-global-icon>
+        </a>
 
-        <div class="buttons">
-          <a class="action-button action-button-edit grey-button" target="_blank" rel="noopener noreferrer"
-             [href]="plugin.homepage" i18n-title title="Go to the plugin homepage"
-          >
-            <my-global-icon iconName="go"></my-global-icon>
-            <span i18n class="button-label">Homepage</span>
-          </a>
+        <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="'https://www.npmjs.com/package/peertube-plugin-' + plugin.name" i18n-title title="Go to the plugin homepage">
+          <my-global-icon iconName="npm"></my-global-icon>
+        </a>
 
+        <div class="buttons">
           <my-edit-button *ngIf="pluginType !== PluginType.THEME" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
 
           <my-button class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
@@ -35,6 +32,10 @@
           <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label></my-delete-button>
         </div>
       </div>
+
+      <div class="second-row">
+        <div class="description">{{ plugin.description }}</div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
index f18c2e6ca..a8973f2b2 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
@@ -89,10 +89,10 @@ export class PluginListInstalledComponent implements OnInit {
 
   getNoResultMessage () {
     if (this.pluginType === PluginType.PLUGIN) {
-      return this.i18n('You don\'t have plugins installed yet.')
+      return this.i18n("You don't have plugins installed yet.")
     }
 
-    return this.i18n('You don\'t have themes installed yet.')
+    return this.i18n("You don't have themes installed yet.")
   }
 
   isUpdateAvailable (plugin: PeerTubePlugin) {
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index 6ec6301b1..9f942c4b3 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -3,7 +3,7 @@
 </div>
 
 <div class="search-bar">
-  <input type="text" (input)="onSearchChange($event.target.value)" i18n-placeholder placeholder="Search..."/>
+  <input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..."/>
 </div>
 
 <div class="alert alert-info" i18n *ngIf="pluginInstalled">
@@ -37,25 +37,26 @@
 
         <span class="plugin-version">{{ plugin.latestVersion }}</span>
 
-        <span *ngIf="plugin.installed" class="badge badge-success">Installed</span>
-      </div>
+        <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Go to the plugin homepage">
+          <my-global-icon iconName="home"></my-global-icon>
+        </a>
 
-      <div class="second-row">
-        <div class="description">{{ plugin.description }}</div>
+        <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="'https://www.npmjs.com/package/peertube-plugin-' + plugin.name" i18n-title title="Go to the plugin npm package">
+          <my-global-icon iconName="npm"></my-global-icon>
+        </a>
 
-        <div class="buttons">
-          <a class="action-button action-button-edit grey-button" target="_blank" rel="noopener noreferrer"
-             [href]="plugin.homepage" i18n-title title="Go to the plugin homepage"
-          >
-            <my-global-icon iconName="go"></my-global-icon>
-            <span i18n class="button-label">Homepage</span>
-          </a>
+        <span *ngIf="plugin.installed" class="badge badge-success">Installed</span>
 
+        <div class="buttons">
           <my-button class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)" [loading]="isInstalling(plugin)"
                      label="Install" icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
           ></my-button>
         </div>
       </div>
+
+      <div class="second-row">
+        <div class="description">{{ plugin.description }}</div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
index ed06825c8..20f169e13 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
@@ -25,5 +25,5 @@
 .badge {
   font-size: 13px;
   font-weight: $font-semibold;
-  margin-left: 5px;
+  margin-left: 15px;
 }
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
index e08ded3f1..dc59e759b 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
@@ -70,8 +70,10 @@ export class PluginSearchComponent implements OnInit {
     this.reloadPlugins()
   }
 
-  onSearchChange (search: string) {
-    this.searchSubject.next(search)
+  onSearchChange (event: Event) {
+    const target = event.target as HTMLInputElement
+
+    this.searchSubject.next(target.value)
   }
 
   reloadPlugins () {
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
index 95dd74d31..f3fc429ff 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
@@ -8,9 +8,27 @@
   <form *ngIf="hasRegisteredSettings()" role="form" (ngSubmit)="formValidated()" [formGroup]="form">
     <div class="form-group" *ngFor="let setting of registeredSettings">
       <label *ngIf="setting.type !== 'input-checkbox'" [attr.for]="setting.name" [innerHTML]="setting.label"></label>
+
       <input *ngIf="setting.type === 'input'" type="text" [id]="setting.name" [formControlName]="setting.name" />
+
       <textarea *ngIf="setting.type === 'input-textarea'" type="text" [id]="setting.name" [formControlName]="setting.name"></textarea>
 
+      <my-help *ngIf="setting.type === 'markdown-text'" helpType="markdownText"></my-help>
+
+      <my-help *ngIf="setting.type === 'markdown-enhanced'" helpType="markdownEnhanced"></my-help>
+
+      <my-markdown-textarea
+        *ngIf="setting.type === 'markdown-text'"
+        markdownType="text" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px"
+        [classes]="{ 'input-error': formErrors['settings.name'] }"
+      ></my-markdown-textarea>
+
+      <my-markdown-textarea
+        *ngIf="setting.type === 'markdown-enhanced'"
+        markdownType="enhanced" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px"
+        [classes]="{ 'input-error': formErrors['settings.name'] }"
+      ></my-markdown-textarea>
+
       <my-peertube-checkbox
         *ngIf="setting.type === 'input-checkbox'"
         [id]="setting.name"
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
index 21c180a70..cc35aec57 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
@@ -5,9 +5,15 @@ h2 {
   margin-bottom: 20px;
 }
 
-textarea,
 input:not([type=submit]) {
   @include peertube-input-text(340px);
+
+  display: block;
+}
+
+textarea {
+  @include peertube-textarea(340px, 200px);
+
   display: block;
 }
 
diff --git a/client/src/app/+admin/plugins/plugins.component.scss b/client/src/app/+admin/plugins/plugins.component.scss
index 9f61bcf7a..04ca8126a 100644
--- a/client/src/app/+admin/plugins/plugins.component.scss
+++ b/client/src/app/+admin/plugins/plugins.component.scss
@@ -5,3 +5,29 @@
   flex-grow: 0;
   margin-right: 30px;
 }
+
+@media screen and (max-width: $small-view) {
+  ::ng-deep .plugins .plugin .first-row {
+    flex-wrap: wrap;
+
+    .plugin-name,
+    .plugin-version,
+    .plugin-icon {
+      margin-bottom: 10px;
+    }
+
+    .buttons {
+      my-edit-button,
+      my-delete-button,
+      my-button {
+        .action-button {
+          padding: 0 13px;
+        }
+
+        .button-label {
+          display: none;
+        }
+      }
+    }
+  }
+}
diff --git a/client/src/app/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
index 87a709b00..3f4fad7b9 100644
--- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
@@ -7,6 +7,8 @@
 }
 
 .first-row {
+  display: flex;
+  align-items: center;
   margin-bottom: 10px;
 
   .plugin-name {
@@ -18,6 +20,26 @@
   .plugin-version {
     opacity: 0.6;
   }
+
+  .plugin-icon {
+    margin-left: 10px;
+    
+    my-global-icon {
+      @include apply-svg-color($grey-foreground-color);
+      
+      &[iconName="npm"] {
+        @include fill-svg-color($grey-foreground-color);
+      }
+    }
+  }
+
+  .buttons {
+    margin-left: auto;
+    width: max-content;
+    > *:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
 }
 
 .second-row {
@@ -29,13 +51,6 @@
   .description {
     opacity: 0.8
   }
-
-  .buttons {
-    margin-left: 10px;
-    > *:not(:last-child) {
-      margin-right: 10px;
-    }
-  }
 }
 
 .action-button {
diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
index 7e2c40aae..56ea91d0b 100644
--- a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
+++ b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
@@ -10,11 +10,26 @@
     ::ng-deep {
       .ui-button-text {
         font-size: 15px;
+        font-weight: 600;
+      }
+
+      .ui-button.ui-state-default {
+        background-color: #f0f0f0;
+        border: 1px solid #f0f0f0;
       }
 
       .ui-button.ui-state-active {
         background-color: var(--mainColor);
         border-color: var(--mainColor);
+
+        &:hover {
+          background-color: var(--mainHoverColor);
+          border-color: var(--mainHoverColor);
+        }
+      }
+
+      .ui-button:not(.ui-state-active).ui-state-focus {
+        box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
       }
     }
   }
diff --git a/client/src/app/+admin/system/debug/debug.component.scss b/client/src/app/+admin/system/debug/debug.component.scss
index 90addd284..7bc8fa946 100644
--- a/client/src/app/+admin/system/debug/debug.component.scss
+++ b/client/src/app/+admin/system/debug/debug.component.scss
@@ -2,5 +2,10 @@
 @import '_mixins';
 
 .root {
-  font-size: 14px;
+  font-size: 15px;
+
+  code {
+    font-size: 14px;
+    font-weight: $font-semibold;
+  }
 }
diff --git a/client/src/app/+admin/system/jobs/jobs.component.html b/client/src/app/+admin/system/jobs/jobs.component.html
index b0f68eadd..038dfa522 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.html
+++ b/client/src/app/+admin/system/jobs/jobs.component.html
@@ -1,10 +1,8 @@
 <div class="admin-sub-header">
-  <div i18n class="form-sub-title">Jobs list</div>
-
   <div class="select-filter-block">
     <label for="jobType" i18n>Job type</label>
     <div class="peertube-select-container">
-      <select id="jobType" name="jobType" [(ngModel)]="jobType" (ngModelChange)="onJobStateOrTypeChanged()">
+      <select id="jobType" name="jobType" [(ngModel)]="jobType" (ngModelChange)="onJobStateOrTypeChanged()" class="form-control">
         <option *ngFor="let jobType of jobTypes" [value]="jobType">{{ jobType }}</option>
       </select>
     </div>
@@ -13,7 +11,7 @@
   <div class="select-filter-block">
     <label for="jobState" i18n>Job state</label>
     <div class="peertube-select-container">
-      <select id="jobState" name="jobState" [(ngModel)]="jobState" (ngModelChange)="onJobStateOrTypeChanged()">
+      <select id="jobState" name="jobState" [(ngModel)]="jobState" (ngModelChange)="onJobStateOrTypeChanged()" class="form-control">
         <option *ngFor="let state of jobStates" [value]="state">{{ state }}</option>
       </select>
     </div>
@@ -21,12 +19,13 @@
 </div>
 
 <p-table
-  [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" dataKey="uniqId"
+  [value]="jobs" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" dataKey="uniqId"
   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" [first]="pagination.start"
-  [tableStyle]="{'table-layout':'auto'}"
+  [tableStyle]="{'table-layout':'auto'}" (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
 >
   <ng-template pTemplate="header">
     <tr>
+      <th style="width: 40px"></th>
       <th class="job-id" i18n>ID</th>
       <th class="job-type" i18n>Type</th>
       <th class="job-date" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
@@ -35,7 +34,13 @@
   </ng-template>
 
   <ng-template pTemplate="body" let-expanded="expanded" let-job>
-    <tr class="expander" [pRowToggler]="job">
+    <tr>
+      <td class="expand-cell">
+        <span class="expander" [pRowToggler]="job" i18n-ngbTooltip ngbTooltip="More information">
+          <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
+        </span>
+      </td>
+
       <td class="job-id" [title]="job.id">{{ job.id }}</td>
       <td class="job-type">{{ job.type }}</td>
       <td class="job-date">{{ job.createdAt }}</td>
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index 4cb706d2d..c33e14292 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -18,7 +18,8 @@
 }
 
 .admin-sub-header {
-  align-items: flex-end;
+  flex-direction: row !important;
+  justify-content: flex-end;
 
   .select-filter-block {
     &:not(:last-child) {
diff --git a/client/src/app/+admin/system/jobs/jobs.component.ts b/client/src/app/+admin/system/jobs/jobs.component.ts
index 20c8ea71a..4f7f7c368 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.ts
+++ b/client/src/app/+admin/system/jobs/jobs.component.ts
@@ -16,8 +16,8 @@ import { JobTypeClient } from '../../../../types/job-type-client.type'
   styleUrls: [ './jobs.component.scss' ]
 })
 export class JobsComponent extends RestTable implements OnInit {
-  private static JOB_STATE_LOCAL_STORAGE_STATE = 'jobs-list-state'
-  private static JOB_STATE_LOCAL_STORAGE_TYPE = 'jobs-list-type'
+  private static LOCAL_STORAGE_STATE = 'jobs-list-state'
+  private static LOCAL_STORAGE_TYPE = 'jobs-list-type'
 
   jobState: JobStateClient = 'waiting'
   jobStates: JobStateClient[] = [ 'active', 'completed', 'failed', 'waiting', 'delayed' ]
@@ -34,12 +34,12 @@ export class JobsComponent extends RestTable implements OnInit {
     'video-file-import',
     'video-import',
     'videos-views',
-    'activitypub-refresher'
+    'activitypub-refresher',
+    'video-redundancy'
   ]
 
   jobs: Job[] = []
   totalRecords: number
-  rowsPerPage = 10
   sort: SortMeta = { field: 'createdAt', order: -1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
@@ -56,6 +56,10 @@ export class JobsComponent extends RestTable implements OnInit {
     this.initialize()
   }
 
+  getIdentifier () {
+    return 'JobsComponent'
+  }
+
   onJobStateOrTypeChanged () {
     this.pagination.start = 0
 
@@ -77,15 +81,15 @@ export class JobsComponent extends RestTable implements OnInit {
   }
 
   private loadJobStateAndType () {
-    const state = peertubeLocalStorage.getItem(JobsComponent.JOB_STATE_LOCAL_STORAGE_STATE)
+    const state = peertubeLocalStorage.getItem(JobsComponent.LOCAL_STORAGE_STATE)
     if (state) this.jobState = state as JobState
 
-    const type = peertubeLocalStorage.getItem(JobsComponent.JOB_STATE_LOCAL_STORAGE_TYPE)
+    const type = peertubeLocalStorage.getItem(JobsComponent.LOCAL_STORAGE_TYPE)
     if (type) this.jobType = type as JobType
   }
 
   private saveJobStateAndType () {
-    peertubeLocalStorage.setItem(JobsComponent.JOB_STATE_LOCAL_STORAGE_STATE, this.jobState)
-    peertubeLocalStorage.setItem(JobsComponent.JOB_STATE_LOCAL_STORAGE_TYPE, this.jobType)
+    peertubeLocalStorage.setItem(JobsComponent.LOCAL_STORAGE_STATE, this.jobState)
+    peertubeLocalStorage.setItem(JobsComponent.LOCAL_STORAGE_TYPE, this.jobType)
   }
 }
diff --git a/client/src/app/+admin/system/logs/logs.component.html b/client/src/app/+admin/system/logs/logs.component.html
index ddad1314f..ae1b0c601 100644
--- a/client/src/app/+admin/system/logs/logs.component.html
+++ b/client/src/app/+admin/system/logs/logs.component.html
@@ -1,18 +1,18 @@
 <div class="header">
   <div class="peertube-select-container">
-    <select [(ngModel)]="logType" (ngModelChange)="refresh()">
+    <select [(ngModel)]="logType" (ngModelChange)="refresh()" class="form-control">
       <option *ngFor="let logTypeChoice of logTypeChoices" [value]="logTypeChoice.id">{{ logTypeChoice.label }}</option>
     </select>
   </div>
 
   <div class="peertube-select-container">
-    <select [(ngModel)]="startDate" (ngModelChange)="refresh()">
+    <select [(ngModel)]="startDate" (ngModelChange)="refresh()" class="form-control">
       <option *ngFor="let timeChoice of timeChoices" [value]="timeChoice.id">{{ timeChoice.label }}</option>
     </select>
   </div>
 
   <div class="peertube-select-container" *ngIf="!isAuditLog()">
-    <select [(ngModel)]="level" (ngModelChange)="refresh()">
+    <select [(ngModel)]="level" (ngModelChange)="refresh()" class="form-control">
       <option *ngFor="let levelChoice of levelChoices" [value]="levelChoice.id">{{ levelChoice.label }}</option>
     </select>
   </div>
@@ -21,7 +21,7 @@
 </div>
 
 <div class="logs">
-  <div *ngIf="loading">Loading...</div>
+  <div *ngIf="loading" i18n>Loading...</div>
 
   <div #logsElement>
     <div *ngFor="let log of logs" class="log-row" [ngClass]="{ error: log.level === 'error', warn: log.level === 'warn' }">
diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss
index dae8b21c7..087155254 100644
--- a/client/src/app/+admin/system/logs/logs.component.scss
+++ b/client/src/app/+admin/system/logs/logs.component.scss
@@ -28,7 +28,7 @@
   }
 
   .warn {
-    color: $orange-color;
+    color: var(--mainColor);
   }
 
   .error {
@@ -57,3 +57,38 @@
   }
 }
 
+@media screen and (max-width: $small-view) {
+  .header {
+    flex-direction: column;
+
+    .peertube-select-container,
+    my-button {
+      width: 100% !important;
+      margin-left: 0px !important;
+      margin-bottom: 10px !important;
+    }
+
+    my-button {
+      text-align: center;
+    }
+  }
+}
+
+@media screen and (max-width: #{$small-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    .header {
+      flex-direction: column;
+
+      .peertube-select-container,
+      my-button {
+        width: 100% !important;
+        margin-left: 0px !important;
+        margin-bottom: 10px !important;
+      }
+
+      my-button {
+        text-align: center;
+      }
+    }
+  }
+}
diff --git a/client/src/app/+admin/users/user-edit/user-create.component.ts b/client/src/app/+admin/users/user-edit/user-create.component.ts
index e726ec4d7..a394418cb 100644
--- a/client/src/app/+admin/users/user-edit/user-create.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-create.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
+import { Router, ActivatedRoute } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
 import { UserCreate, UserRole } from '../../../../../../shared'
 import { UserEdit } from './user-edit'
@@ -8,6 +8,7 @@ import { FormValidatorService } from '@app/shared/forms/form-validators/form-val
 import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { UserService } from '@app/shared'
+import { ScreenService } from '@app/shared/misc/screen.service'
 
 @Component({
   selector: 'my-user-create',
@@ -21,8 +22,10 @@ export class UserCreateComponent extends UserEdit implements OnInit {
     protected serverService: ServerService,
     protected formValidatorService: FormValidatorService,
     protected configService: ConfigService,
+    protected screenService: ScreenService,
     protected auth: AuthService,
     private userValidatorsService: UserValidatorsService,
+    private route: ActivatedRoute,
     private router: Router,
     private notifier: Notifier,
     private userService: UserService,
@@ -45,7 +48,7 @@ export class UserCreateComponent extends UserEdit implements OnInit {
     this.buildForm({
       username: this.userValidatorsService.USER_USERNAME,
       email: this.userValidatorsService.USER_EMAIL,
-      password: this.userValidatorsService.USER_PASSWORD,
+      password: this.isPasswordOptional() ? this.userValidatorsService.USER_PASSWORD_OPTIONAL : this.userValidatorsService.USER_PASSWORD,
       role: this.userValidatorsService.USER_ROLE,
       videoQuota: this.userValidatorsService.USER_VIDEO_QUOTA,
       videoQuotaDaily: this.userValidatorsService.USER_VIDEO_QUOTA_DAILY,
@@ -78,6 +81,11 @@ export class UserCreateComponent extends UserEdit implements OnInit {
     return true
   }
 
+  isPasswordOptional () {
+    const serverConfig = this.route.snapshot.data.serverConfig
+    return serverConfig.email.enabled
+  }
+
   getFormButtonTitle () {
     return this.i18n('Create user')
   }
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 4ff4d0d12..d30a606d6 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,105 +1,204 @@
-<div i18n class="form-sub-title" *ngIf="isCreation() === true">Create user</div>
-<div i18n class="form-sub-title" *ngIf="isCreation() === false">Edit user {{ username }}</div>
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item">
+      <a routerLink="/admin/users" i18n>Users</a>
+    </li>
 
-<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+    <ng-container *ngIf="isCreation()">
+      <li class="breadcrumb-item active" i18n>Create</li>
+    </ng-container>
+    <ng-container *ngIf="!isCreation()">
+      <li class="breadcrumb-item active" i18n>Edit</li>
+      <li class="breadcrumb-item active" aria-current="page">
+        <a *ngIf="user" [routerLink]="[ '/accounts', user?.username ]">{{ user?.username }}</a>
+      </li>
+    </ng-container>
+  </ol>
+</nav>
 
-<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
-  <div class="form-group" *ngIf="isCreation()">
-    <label i18n for="username">Username</label>
-    <input
-      type="text" id="username" i18n-placeholder placeholder="john"
-      formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
-    >
-    <div *ngIf="formErrors.username" class="form-error">
-      {{ formErrors.username }}
+<ng-template #dashboard>
+  <div *ngIf="!isCreation() && user" class="dashboard">
+    <div>
+      <a>
+        <div class="dashboard-num">{{ user.videosCount }} ({{ user.videoQuotaUsed | bytes: 0 }})</div>
+        <div class="dashboard-label" i18n>{user.videosCount, plural, =1 {Video} other {Videos}}</div>
+      </a>
     </div>
-  </div>
-
-  <div class="form-group">
-    <label i18n for="email">Email</label>
-    <input
-      type="text" id="email" i18n-placeholder placeholder="mail@example.com"
-      formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
-      autocomplete="off"
-    >
-    <div *ngIf="formErrors.email" class="form-error">
-      {{ formErrors.email }}
+    <div>
+      <a>
+        <div class="dashboard-num">{{ user.videoChannels.length || 0 }}</div>
+        <div class="dashboard-label" i18n>{user.videoChannels.length, plural, =1 {Channel} other {Channels}}</div>
+      </a>
     </div>
-  </div>
-
-  <div class="form-group" *ngIf="isCreation()">
-    <label i18n for="password">Password</label>
-    <input
-      type="password" id="password" autocomplete="new-password"
-      formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
-    >
-    <div *ngIf="formErrors.password" class="form-error">
-      {{ formErrors.password }}
+    <div>
+      <a>
+        <div class="dashboard-num">{{ subscribersCount }}</div>
+        <div class="dashboard-label" i18n>{subscribersCount, plural, =1 {Subscriber} other {Subscribers}}</div>
+      </a>
+    </div>
+    <div>
+      <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:' + user?.account.displayName }">
+        <div class="dashboard-num">{{ user.videoAbusesCount }}</div>
+        <div class="dashboard-label" i18n>Incriminated in reports</div>
+      </a>
+    </div>
+    <div>
+      <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reporter:' + user?.account.displayName + ' state:accepted' }">
+        <div class="dashboard-num">{{ user.videoAbusesAcceptedCount }} / {{ user.videoAbusesCreatedCount }}</div>
+        <div class="dashboard-label" i18n>Authored reports accepted</div>
+      </a>
+    </div>
+    <div>
+      <a>
+        <div class="dashboard-num">{{ user.videoCommentsCount }}</div>
+        <div class="dashboard-label" i18n>{user.videoCommentsCount, plural, =1 {Comment} other {Comments}}</div>
+      </a>
     </div>
   </div>
+</ng-template>
 
-  <div class="form-group">
-    <label i18n for="role">Role</label>
-    <div class="peertube-select-container">
-      <select id="role" formControlName="role">
-        <option *ngFor="let role of getRoles()" [value]="role.value">
-          {{ role.label }}
-        </option>
-      </select>
-    </div>
+<div class="form-row" *ngIf="!isInBigView()"> <!-- hidden on large screens, as it is then displayed on the right side of the form -->
+  <div class="col-12 col-xl-3"></div>
 
-    <div *ngIf="formErrors.role" class="form-error">
-      {{ formErrors.role }}
-    </div>
+  <div class="form-group-right col-12 col-xl-9">
+    <ng-template *ngTemplateOutlet="dashboard"></ng-template>
   </div>
+</div>
 
-  <div class="form-group">
-    <label i18n for="videoQuota">Video quota</label>
-    <div class="peertube-select-container">
-      <select id="videoQuota" formControlName="videoQuota">
-        <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
-          {{ videoQuotaOption.label }}
-        </option>
-      </select>
-    </div>
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-    <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
-      Transcoding is enabled on server. The video quota only take in account <strong>original</strong> video. <br />
-      At most, this user could use ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
+<div class="form-row mt-4"> <!-- user grid -->
+  <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="anchor" id="user"></div> <!-- user anchor -->
+    <div *ngIf="isCreation()" class="account-title" i18n>NEW USER</div>
+    <div *ngIf="!isCreation() && user" class="account-title">
+      <my-actor-avatar-info [actor]="user.account"></my-actor-avatar-info>
     </div>
   </div>
 
-  <div class="form-group">
-    <label i18n for="videoQuotaDaily">Daily video quota</label>
-    <div class="peertube-select-container">
-      <select id="videoQuotaDaily" formControlName="videoQuotaDaily">
-        <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
-          {{ videoQuotaDailyOption.label }}
-        </option>
-      </select>
+  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }">
+
+    <form role="form" (ngSubmit)="formValidated()" [formGroup]="form" [ngClass]="{ 'col-5': isInBigView() }">
+      <div class="form-group" *ngIf="isCreation()">
+        <label i18n for="username">Username</label>
+        <input
+          type="text" id="username" i18n-placeholder placeholder="john" class="form-control"
+          formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
+        >
+        <div *ngIf="formErrors.username" class="form-error">
+          {{ formErrors.username }}
+        </div>
+      </div>
+  
+      <div class="form-group">
+        <label i18n for="email">Email</label>
+        <input
+          type="text" id="email" i18n-placeholder placeholder="mail@example.com" class="form-control"
+          formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
+          autocomplete="off"
+        >
+        <div *ngIf="formErrors.email" class="form-error">
+          {{ formErrors.email }}
+        </div>
+      </div>
+  
+      <div class="form-group" *ngIf="isCreation()">
+        <label i18n for="password">Password</label>
+        <my-help *ngIf="isPasswordOptional()">
+          <ng-template ptTemplate="customHtml">
+            <ng-container i18n>
+              If you leave the password empty, an email will be sent to the user.
+            </ng-container>
+          </ng-template>
+        </my-help>
+        <input
+          type="password" id="password" autocomplete="new-password" class="form-control"
+          formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+        >
+        <div *ngIf="formErrors.password" class="form-error">
+          {{ formErrors.password }}
+        </div>
+      </div>
+  
+      <div class="form-group">
+        <label i18n for="role">Role</label>
+        <div class="peertube-select-container">
+            <select id="role" formControlName="role" class="form-control">
+              <option *ngFor="let role of roles" [value]="role.value">
+               {{ role.label }}
+              </option>
+            </select>
+        </div>
+  
+        <div *ngIf="formErrors.role" class="form-error">
+          {{ formErrors.role }}
+        </div>
+      </div>
+  
+      <div class="form-group">
+        <label i18n for="videoQuota">Video quota</label>
+        <div class="peertube-select-container">
+          <select id="videoQuota" formControlName="videoQuota" class="form-control">
+            <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value" [disabled]="videoQuotaOption.disabled">
+              {{ videoQuotaOption.label }}
+            </option>
+          </select>
+        </div>
+  
+        <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
+          Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br />
+          At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
+        </div>
+      </div>
+  
+      <div class="form-group">
+        <label i18n for="videoQuotaDaily">Daily video quota</label>
+        <div class="peertube-select-container">
+          <select id="videoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
+            <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value" [disabled]="videoQuotaDailyOption.disabled">
+              {{ videoQuotaDailyOption.label }}
+            </option>
+          </select>
+        </div>
+      </div>
+  
+      <div class="form-group">
+        <my-peertube-checkbox
+          inputName="byPassAutoBlacklist" formControlName="byPassAutoBlacklist"
+          i18n-labelText labelText="Doesn't need review before a video goes public"
+        ></my-peertube-checkbox>
+      </div>
+  
+      <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+    </form>
+
+    <div *ngIf="isInBigView()" class="col-7">
+      <ng-template *ngTemplateOutlet="dashboard"></ng-template>
     </div>
+
   </div>
+</div>
+
 
-  <div class="form-group">
-    <my-peertube-checkbox
-      inputName="byPassAutoBlacklist" formControlName="byPassAutoBlacklist"
-      i18n-labelText labelText="Bypass video auto blacklist"
-    ></my-peertube-checkbox>
+<div *ngIf="!isCreation() && user" class="form-row mt-4"> <!-- danger zone grid -->
+  <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="anchor" id="danger"></div> <!-- danger zone anchor -->
+    <div i18n class="account-title">DANGER ZONE</div>
   </div>
 
-  <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
-</form>
+  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }">
 
-<div *ngIf="!isCreation()" class="danger-zone">
-  <div class="account-title" i18n>Danger Zone</div>
+    <div class="danger-zone">
+      <div class="form-group reset-password-email">
+        <label i18n>Send a link to reset the password by email to the user</label>
+        <button (click)="resetPassword()" i18n>Ask for new password</button>
+      </div>
 
-  <div class="form-group reset-password-email">
-    <label i18n>Send a link to reset the password by email to the user</label>
-    <button (click)="resetPassword()" i18n>Ask for new password</button>
-  </div>
+      <div class="form-group">
+        <label i18n>Manually set the user password</label>
+        <my-user-password [userId]="user.id"></my-user-password>
+      </div>
+    </div>
 
-  <div class="form-group">
-    <label i18n>Manually set the user password</label>
-    <my-user-password [userId]="userId"></my-user-password>
   </div>
 </div>
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 c1cc4ca45..d4c1b600e 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,8 +1,13 @@
 @import '_variables';
 @import '_mixins';
 
-.form-sub-title {
-  margin-bottom: 30px;
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
+.account-title {
+  @include settings-big-title;
 }
 
 input:not([type=submit]) {
@@ -26,18 +31,9 @@ input[type=submit], button {
   font-size: 11px;
 }
 
-.account-title {
-  @include in-content-small-title;
-
-  margin-top: 55px;
-  margin-bottom: 30px;
-}
-
 .danger-zone {
   .reset-password-email {
     margin-bottom: 30px;
-    padding-bottom: 30px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
     button {
       display: block;
@@ -45,3 +41,20 @@ input[type=submit], button {
     }
   }
 }
+
+.breadcrumb {
+  @include breadcrumb;
+}
+
+.dashboard {
+  @include dashboard;
+  max-width: 900px;
+}
+
+my-actor-avatar-info ::ng-deep {
+  .actor-img-edit-container,
+  .actor-info-followers,
+  .actor-info-username {
+    display: none;
+  }
+}
diff --git a/client/src/app/+admin/users/user-edit/user-edit.ts b/client/src/app/+admin/users/user-edit/user-edit.ts
index 02f1dcd42..6e2952c44 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.ts
+++ b/client/src/app/+admin/users/user-edit/user-edit.ts
@@ -4,17 +4,22 @@ import { ServerConfig, USER_ROLE_LABELS, UserRole, VideoResolution } from '../..
 import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { UserAdminFlag } from '@shared/models/users/user-flag.model'
 import { OnInit } from '@angular/core'
+import { User } from '@app/shared/users/user.model'
+import { ScreenService } from '@app/shared/misc/screen.service'
 
 export abstract class UserEdit extends FormReactive implements OnInit {
-  videoQuotaOptions: { value: string, label: string }[] = []
-  videoQuotaDailyOptions: { value: string, label: string }[] = []
+  videoQuotaOptions: { value: string, label: string, disabled?: boolean }[] = []
+  videoQuotaDailyOptions: { value: string, label: string, disabled?: boolean }[] = []
   username: string
-  userId: number
+  user: User
+
+  roles: { value: string, label: string }[] = []
 
   protected serverConfig: ServerConfig
 
   protected abstract serverService: ServerService
   protected abstract configService: ConfigService
+  protected abstract screenService: ScreenService
   protected abstract auth: AuthService
   abstract isCreation (): boolean
   abstract getFormButtonTitle (): string
@@ -23,17 +28,34 @@ export abstract class UserEdit extends FormReactive implements OnInit {
     this.serverConfig = this.serverService.getTmpConfig()
     this.serverService.getConfig()
         .subscribe(config => this.serverConfig = config)
+
+    this.buildRoles()
+  }
+
+  get subscribersCount () {
+    const forAccount = this.user
+      ? this.user.account.followersCount
+      : 0
+    const forChannels = this.user
+      ? this.user.videoChannels.map(c => c.followersCount).reduce((a, b) => a + b, 0)
+      : 0
+    return forAccount + forChannels
+  }
+
+  isInBigView () {
+    return this.screenService.getWindowInnerWidth() > 1600
   }
 
-  getRoles () {
+  buildRoles () {
     const authUser = this.auth.getUser()
 
     if (authUser.role === UserRole.ADMINISTRATOR) {
-      return Object.keys(USER_ROLE_LABELS)
+      this.roles = Object.keys(USER_ROLE_LABELS)
             .map(key => ({ value: key.toString(), label: USER_ROLE_LABELS[key] }))
+      return
     }
 
-    return [
+    this.roles = [
       { value: UserRole.USER.toString(), label: USER_ROLE_LABELS[UserRole.USER] }
     ]
   }
@@ -72,9 +94,22 @@ export abstract class UserEdit extends FormReactive implements OnInit {
   protected buildQuotaOptions () {
     // These are used by a HTML select, so convert key into strings
     this.videoQuotaOptions = this.configService
-                                 .videoQuotaOptions.map(q => ({ value: q.value.toString(), label: q.label }))
+                                 .videoQuotaOptions.map(q => ({
+                                   value: q.value?.toString(),
+                                   label: q.label,
+                                   disabled: q.disabled
+                                 }))
 
     this.videoQuotaDailyOptions = this.configService
-                                      .videoQuotaDailyOptions.map(q => ({ value: q.value.toString(), label: q.label }))
+                                      .videoQuotaDailyOptions.map(q => ({
+                                        value: q.value?.toString(),
+                                        label: q.label,
+                                        disabled: q.disabled
+                                      }))
+
+    console.log(
+      this.videoQuotaOptions,
+      this.videoQuotaDailyOptions
+    )
   }
 }
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.html b/client/src/app/+admin/users/user-edit/user-password.component.html
index a1e1f6216..1238d1839 100644
--- a/client/src/app/+admin/users/user-edit/user-password.component.html
+++ b/client/src/app/+admin/users/user-edit/user-password.component.html
@@ -2,7 +2,7 @@
   <div class="form-group">
 
     <div class="input-group">
-      <input id="password" [attr.type]="showPassword ? 'text' : 'password'"
+      <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control"
         formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
       >
       <div class="input-group-append">
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.ts b/client/src/app/+admin/users/user-edit/user-password.component.ts
index 5b3040440..ecad000f7 100644
--- a/client/src/app/+admin/users/user-edit/user-password.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-password.component.ts
@@ -23,8 +23,6 @@ export class UserPasswordComponent extends FormReactive implements OnInit {
   constructor (
     protected formValidatorService: FormValidatorService,
     private userValidatorsService: UserValidatorsService,
-    private route: ActivatedRoute,
-    private router: Router,
     private notifier: Notifier,
     private userService: UserService,
     private i18n: I18n
diff --git a/client/src/app/+admin/users/user-edit/user-update.component.ts b/client/src/app/+admin/users/user-edit/user-update.component.ts
index d1682a99d..e0e1fbddf 100644
--- a/client/src/app/+admin/users/user-edit/user-update.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-update.component.ts
@@ -4,13 +4,15 @@ import { Subscription } from 'rxjs'
 import { AuthService, Notifier } from '@app/core'
 import { ServerService } from '../../../core'
 import { UserEdit } from './user-edit'
-import { User, UserUpdate } from '../../../../../../shared'
+import { User as UserType, UserUpdate, UserRole } from '../../../../../../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { UserService } from '@app/shared'
 import { UserAdminFlag } from '@shared/models/users/user-flag.model'
+import { User } from '@app/shared/users/user.model'
+import { ScreenService } from '@app/shared/misc/screen.service'
 
 @Component({
   selector: 'my-user-update',
@@ -19,9 +21,6 @@ import { UserAdminFlag } from '@shared/models/users/user-flag.model'
 })
 export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
   error: string
-  userId: number
-  userEmail: string
-  username: string
 
   private paramsSub: Subscription
 
@@ -29,6 +28,7 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
     protected formValidatorService: FormValidatorService,
     protected serverService: ServerService,
     protected configService: ConfigService,
+    protected screenService: ScreenService,
     protected auth: AuthService,
     private userValidatorsService: UserValidatorsService,
     private route: ActivatedRoute,
@@ -45,7 +45,12 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
   ngOnInit () {
     super.ngOnInit()
 
-    const defaultValues = { videoQuota: '-1', videoQuotaDaily: '-1' }
+    const defaultValues = {
+      role: UserRole.USER.toString(),
+      videoQuota: '-1',
+      videoQuotaDaily: '-1'
+    }
+
     this.buildForm({
       email: this.userValidatorsService.USER_EMAIL,
       role: this.userValidatorsService.USER_ROLE,
@@ -56,7 +61,7 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
 
     this.paramsSub = this.route.params.subscribe(routeParams => {
       const userId = routeParams['id']
-      this.userService.getUser(userId).subscribe(
+      this.userService.getUser(userId, true).subscribe(
         user => this.onUserFetched(user),
 
         err => this.error = err.message
@@ -78,9 +83,9 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
     userUpdate.videoQuota = parseInt(this.form.value['videoQuota'], 10)
     userUpdate.videoQuotaDaily = parseInt(this.form.value['videoQuotaDaily'], 10)
 
-    this.userService.updateUser(this.userId, userUpdate).subscribe(
+    this.userService.updateUser(this.user.id, userUpdate).subscribe(
       () => {
-        this.notifier.success(this.i18n('User {{username}} updated.', { username: this.username }))
+        this.notifier.success(this.i18n('User {{username}} updated.', { username: this.user.username }))
         this.router.navigate([ '/admin/users/list' ])
       },
 
@@ -92,15 +97,19 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
     return false
   }
 
+  isPasswordOptional () {
+    return false
+  }
+
   getFormButtonTitle () {
     return this.i18n('Update user')
   }
 
   resetPassword () {
-    this.userService.askResetPassword(this.userEmail).subscribe(
+    this.userService.askResetPassword(this.user.email).subscribe(
       () => {
         this.notifier.success(
-          this.i18n('An email asking for password reset has been sent to {{username}}.', { username: this.username })
+          this.i18n('An email asking for password reset has been sent to {{username}}.', { username: this.user.username })
         )
       },
 
@@ -108,14 +117,12 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
     )
   }
 
-  private onUserFetched (userJson: User) {
-    this.userId = userJson.id
-    this.username = userJson.username
-    this.userEmail = userJson.email
+  private onUserFetched (userJson: UserType) {
+    this.user = new User(userJson)
 
     this.form.patchValue({
       email: userJson.email,
-      role: userJson.role,
+      role: userJson.role.toString(),
       videoQuota: userJson.videoQuota,
       videoQuotaDaily: userJson.videoQuotaDaily,
       byPassAutoBlacklist: userJson.adminFlags & UserAdminFlag.BY_PASS_VIDEO_AUTO_BLACKLIST
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 ca05bac19..768a3034d 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
@@ -8,9 +8,12 @@
 </div>
 
 <p-table
-  [value]="users" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+  [value]="users" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id" [resizableColumns]="true"
   [(selection)]="selectedUsers"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} users"
+  (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
 >
   <ng-template pTemplate="caption">
     <div class="caption">
@@ -22,11 +25,13 @@
         </my-action-dropdown>
       </div>
 
-      <div>
+      <div class="has-feedback has-clear">
         <input
           type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-          (keyup)="onSearch($event.target.value)"
+          (keyup)="onSearch($event)"
         >
+        <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
+        <span class="sr-only" i18n>Clear filters</span>
       </div>
     </div>
   </ng-template>
@@ -37,11 +42,12 @@
         <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
       </th>
       <th style="width: 40px"></th>
-      <th i18n pSortableColumn="username">Username <p-sortIcon field="username"></p-sortIcon></th>
+      <th pResizableColumn i18n pSortableColumn="username">Username <p-sortIcon field="username"></p-sortIcon></th>
       <th i18n>Email</th>
-      <th i18n pSortableColumn="videoQuotaUsed">Video quota <p-sortIcon field="videoQuotaUsed"></p-sortIcon></th>
-      <th i18n>Role</th>
-      <th i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 140px;" i18n pSortableColumn="videoQuotaUsed">Video quota <p-sortIcon field="videoQuotaUsed"></p-sortIcon></th>
+      <th style="width: 120px;" i18n>Role</th>
+      <th style="width: 140px;" pResizableColumn i18n>Auth plugin</th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
       <th style="width: 50px;"></th>
     </tr>
   </ng-template>
@@ -49,19 +55,30 @@
   <ng-template pTemplate="body" let-expanded="expanded" let-user>
 
     <tr [pSelectableRow]="user" [ngClass]="{ banned: user.blocked }">
-      <td class="expand-cell">
+      <td>
         <p-tableCheckbox [value]="user"></p-tableCheckbox>
       </td>
 
-      <td>
+      <td class="expand-cell">
         <span *ngIf="user.blockedReason" class="expander" [pRowToggler]="user">
           <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
         </span>
       </td>
 
       <td>
-        <a i18n-title title="Go to the account page" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]">
-          {{ user.username }}
+        <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]">
+          <div class="chip two-lines">
+            <img
+              class="avatar"
+              [src]="user?.account?.avatar?.path"
+              (error)="switchToDefaultAvatar($event)"
+              alt="Avatar"
+            >
+            <div>
+              {{ user.account.displayName }}
+              <span class="text-muted">{{ user.username }}</span>
+            </div>
+          </div>
           <span i18n *ngIf="user.blocked" class="banned-info">(banned)</span>
         </a>
       </td>
@@ -81,7 +98,13 @@
 
       <td>{{ user.videoQuotaUsed }} / {{ user.videoQuota }}</td>
       <td>{{ user.roleLabel }}</td>
-      <td [title]="user.createdAt">{{ user.createdAt }}</td>
+
+      <td>
+        <ng-container *ngIf="user.pluginAuth">{{ user.pluginAuth }}</ng-container>
+      </td>
+
+      <td [title]="user.createdAt">{{ user.createdAt | date: 'short' }}</td>
+
       <td class="action-cell">
         <my-user-moderation-dropdown *ngIf="!isInSelectionMode()" [user]="user" (userChanged)="onUserChanged()" (userDeleted)="onUserChanged()">
         </my-user-moderation-dropdown>
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 5274be01c..99b22aaea 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
@@ -24,3 +24,12 @@ tr.banned {
     @include peertube-input-text(250px);
   }
 }
+
+p-tableCheckbox {
+  position: relative;
+  top: -2.5px;
+}
+
+.chip {
+  @include chip;
+}
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index 7c5e8eaa4..da50b7ed0 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -1,12 +1,13 @@
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { AuthService, Notifier } from '@app/core'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { ConfirmService, ServerService } from '../../../core'
 import { RestPagination, RestTable, UserService } from '../../../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerConfig, User } from '../../../../../../shared'
 import { UserBanModalComponent } from '@app/shared/moderation'
 import { DropdownAction } from '@app/shared/buttons/action-dropdown.component'
+import { Actor } from '@app/shared/actor/actor.model'
 
 @Component({
   selector: 'my-user-list',
@@ -18,7 +19,6 @@ export class UserListComponent extends RestTable implements OnInit {
 
   users: User[] = []
   totalRecords = 0
-  rowsPerPage = 10
   sort: SortMeta = { field: 'createdAt', order: 1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
@@ -86,6 +86,10 @@ export class UserListComponent extends RestTable implements OnInit {
     ]
   }
 
+  getIdentifier () {
+    return 'UserListComponent'
+  }
+
   openBanUserModal (users: User[]) {
     for (const user of users) {
       if (user.username === 'root') {
@@ -101,6 +105,10 @@ export class UserListComponent extends RestTable implements OnInit {
     this.loadData()
   }
 
+  switchToDefaultAvatar ($event: Event) {
+    ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
+  }
+
   async unbanUsers (users: User[]) {
     const message = this.i18n('Do you really want to unban {{num}} users?', { num: users.length })
 
diff --git a/client/src/app/+admin/users/users.routes.ts b/client/src/app/+admin/users/users.routes.ts
index 8b3791bd3..2d4f9305e 100644
--- a/client/src/app/+admin/users/users.routes.ts
+++ b/client/src/app/+admin/users/users.routes.ts
@@ -5,6 +5,7 @@ import { UserRight } from '../../../../../shared'
 import { UsersComponent } from './users.component'
 import { UserCreateComponent, UserUpdateComponent } from './user-edit'
 import { UserListComponent } from './user-list'
+import { ServerConfigResolver } from '@app/core/routing/server-config-resolver.service'
 
 export const UsersRoutes: Routes = [
   {
@@ -36,6 +37,9 @@ export const UsersRoutes: Routes = [
           meta: {
             title: 'Create a user'
           }
+        },
+        resolve: {
+          serverConfig: ServerConfigResolver
         }
       },
       {
diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.html b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.html
index a96a11f5e..fb9e6546e 100644
--- a/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.html
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.html
@@ -3,7 +3,7 @@
 </div>
 
 <p-table
-  [value]="blockedAccounts" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+  [value]="blockedAccounts" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage"
   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)"
 >
 
@@ -11,6 +11,7 @@
     <tr>
       <th i18n>Account</th>
       <th i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th></th> <!-- column for action buttons -->
     </tr>
   </ng-template>
 
diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts
index e3025dec4..fd1fabcdb 100644
--- a/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core'
 import { Notifier } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { RestPagination, RestTable } from '@app/shared'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { AccountBlock, BlocklistService } from '@app/shared/blocklist'
 
 @Component({
@@ -13,7 +13,6 @@ import { AccountBlock, BlocklistService } from '@app/shared/blocklist'
 export class MyAccountBlocklistComponent extends RestTable implements OnInit {
   blockedAccounts: AccountBlock[] = []
   totalRecords = 0
-  rowsPerPage = 10
   sort: SortMeta = { field: 'createdAt', order: -1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
@@ -29,6 +28,10 @@ export class MyAccountBlocklistComponent extends RestTable implements OnInit {
     this.initialize()
   }
 
+  getIdentifier () {
+    return 'MyAccountBlocklistComponent'
+  }
+
   unblockAccount (accountBlock: AccountBlock) {
     const blockedAccount = accountBlock.blockedAccount
 
diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.html b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.html
index 329cfb08f..6359b4461 100644
--- a/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.html
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.html
@@ -3,7 +3,7 @@
 </div>
 
 <p-table
-  [value]="blockedServers" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+  [value]="blockedServers" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage"
   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)"
 >
 
@@ -11,7 +11,7 @@
     <tr>
       <th i18n>Instance</th>
       <th i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th></th>
+      <th></th> <!-- column for action buttons -->
     </tr>
   </ng-template>
 
diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts
index 4c5cc28b8..483c11804 100644
--- a/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core'
 import { Notifier } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { RestPagination, RestTable } from '@app/shared'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { ServerBlock } from '../../../../../shared'
 import { BlocklistService } from '@app/shared/blocklist'
 
@@ -14,7 +14,6 @@ import { BlocklistService } from '@app/shared/blocklist'
 export class MyAccountServerBlocklistComponent extends RestTable implements OnInit {
   blockedServers: ServerBlock[] = []
   totalRecords = 0
-  rowsPerPage = 10
   sort: SortMeta = { field: 'createdAt', order: -1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
@@ -30,6 +29,10 @@ export class MyAccountServerBlocklistComponent extends RestTable implements OnIn
     this.initialize()
   }
 
+  getIdentifier () {
+    return 'MyAccountServerBlocklistComponent'
+  }
+
   unblockServer (serverBlock: ServerBlock) {
     const host = serverBlock.blockedServer.host
 
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.html b/client/src/app/+my-account/my-account-history/my-account-history.component.html
index 4c361cec3..56d63f299 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.html
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.html
@@ -11,7 +11,7 @@
 </div>
 
 
-<div class="no-history" i18n *ngIf="pagination.totalItems === 0">You don't have videos history yet.</div>
+<div class="no-history" i18n *ngIf="pagination.totalItems === 0">You don't have any video history yet.</div>
 
 <div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()" class="videos">
   <div class="video" *ngFor="let video of videos">
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.scss b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
index af6395fb1..9eeeaf310 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.scss
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
@@ -12,6 +12,8 @@
 .top-buttons {
   margin-bottom: 20px;
   display: flex;
+  align-items: center;
+  flex-wrap: wrap;
 
   .history-switch {
     display: flex;
@@ -38,3 +40,20 @@
     flex-grow: 1;
   }
 }
+
+@media screen and (max-width: $mobile-view) {
+  .top-buttons {
+    .history-switch label, .delete-history {
+      @include ellipsis;
+    }
+
+    .history-switch label {
+      width: 60%;
+    }
+
+    .delete-history {
+      margin-left: auto;
+      max-width: 32%;
+    }
+  }
+}
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.ts b/client/src/app/+my-account/my-account-history/my-account-history.component.ts
index 13607119e..5f0ccee50 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.ts
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.ts
@@ -11,6 +11,7 @@ import { ScreenService } from '@app/shared/misc/screen.service'
 import { UserHistoryService } from '@app/shared/users/user-history.service'
 import { UserService } from '@app/shared'
 import { Notifier, ServerService } from '@app/core'
+import { LocalStorageService } from '@app/shared/misc/storage.service'
 
 @Component({
   selector: 'my-account-history',
@@ -35,6 +36,7 @@ export class MyAccountHistoryComponent extends AbstractVideoList implements OnIn
     protected userService: UserService,
     protected notifier: Notifier,
     protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
     private confirmService: ConfirmService,
     private videoService: VideoService,
     private userHistoryService: UserHistoryService
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
index 43d1f82ab..73f7c7b24 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -23,3 +23,13 @@
 my-user-notifications {
   font-size: 15px;
 }
+
+@media screen and (max-width: $mobile-view) {
+  .header {
+    flex-direction: column;
+
+    & >:first-child {
+      margin-bottom: 15px;
+    }
+  }
+}
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
index 674a4e8a2..a155d90e0 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
+++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
@@ -21,9 +21,10 @@
 
   <div class="modal-footer inputs">
     <div class="form-group inputs">
-      <span i18n class="action-button action-button-cancel" (click)="dismiss()">
-        Cancel
-      </span>
+      <input
+        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        (click)="dismiss()" (key.enter)="dismiss()"
+      >
 
       <input
           type="submit" i18n-value value="Submit" class="action-button-submit"
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
index 6df929ec9..d5682914e 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
@@ -53,7 +53,7 @@ export class MyAccountAcceptOwnershipComponent extends FormReactive implements O
   show (videoChangeOwnership: VideoChangeOwnership) {
     this.videoChangeOwnership = videoChangeOwnership
     this.modalService
-      .open(this.modal)
+      .open(this.modal, { centered: true })
       .result
       .then(() => this.acceptOwnership())
       .catch(() => this.videoChangeOwnership = undefined)
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
index c5fd3ccb9..354176a11 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
@@ -1,7 +1,7 @@
 <p-table
     [value]="videoChangeOwnerships"
     [lazy]="true"
-    [paginator]="true"
+    [paginator]="totalRecords > 0"
     [totalRecords]="totalRecords"
     [rows]="rowsPerPage"
     [sortField]="sort.field"
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
index aeeb0e5a7..f0a6303d1 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
 import { RestPagination, RestTable } from '@app/shared'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { VideoChangeOwnership } from '../../../../../shared'
 import { VideoOwnershipService } from '@app/shared/video-ownership'
 import { Account } from '@app/shared/account/account.model'
@@ -14,7 +14,6 @@ import { MyAccountAcceptOwnershipComponent } from './my-account-accept-ownership
 export class MyAccountOwnershipComponent extends RestTable implements OnInit {
   videoChangeOwnerships: VideoChangeOwnership[] = []
   totalRecords = 0
-  rowsPerPage = 10
   sort: SortMeta = { field: 'createdAt', order: -1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
@@ -31,6 +30,10 @@ export class MyAccountOwnershipComponent extends RestTable implements OnInit {
     this.initialize()
   }
 
+  getIdentifier () {
+    return 'MyAccountOwnershipComponent'
+  }
+
   createByString (account: Account) {
     return Account.CREATE_BY_STRING(account.name, account.host)
   }
diff --git a/client/src/app/+my-account/my-account-routing.module.ts b/client/src/app/+my-account/my-account-routing.module.ts
index 018d6f996..f44b60ec9 100644
--- a/client/src/app/+my-account/my-account-routing.module.ts
+++ b/client/src/app/+my-account/my-account-routing.module.ts
@@ -5,9 +5,6 @@ import { LoginGuard } from '../core'
 import { MyAccountComponent } from './my-account.component'
 import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component'
 import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component'
-import { MyAccountVideoChannelsComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channels.component'
-import { MyAccountVideoChannelCreateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-create.component'
-import { MyAccountVideoChannelUpdateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-update.component'
 import { MyAccountVideoImportsComponent } from '@app/+my-account/my-account-video-imports/my-account-video-imports.component'
 import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-subscriptions/my-account-subscriptions.component'
 import { MyAccountOwnershipComponent } from '@app/+my-account/my-account-ownership/my-account-ownership.component'
@@ -49,30 +46,7 @@ const myAccountRoutes: Routes = [
 
       {
         path: 'video-channels',
-        component: MyAccountVideoChannelsComponent,
-        data: {
-          meta: {
-            title: 'Account video channels'
-          }
-        }
-      },
-      {
-        path: 'video-channels/create',
-        component: MyAccountVideoChannelCreateComponent,
-        data: {
-          meta: {
-            title: 'Create new video channel'
-          }
-        }
-      },
-      {
-        path: 'video-channels/update/:videoChannelId',
-        component: MyAccountVideoChannelUpdateComponent,
-        data: {
-          meta: {
-            title: 'Update video channel'
-          }
-        }
+        loadChildren: () => import('./my-account-video-channels/my-account-video-channels.module').then(m => m.MyAccountVideoChannelsModule)
       },
 
       {
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
index 76886c73e..f39f66696 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
@@ -14,7 +14,7 @@
   <div class="form-group">
     <label i18n for="new-email">New email</label>
     <input
-      type="email" id="new-email" i18n-placeholder placeholder="Your new email"
+      type="email" id="new-email" i18n-placeholder placeholder="Your new email" class="form-control"
       formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }"
     >
     <div *ngIf="formErrors['new-email']" class="form-error">
@@ -25,7 +25,7 @@
   <div class="form-group">
     <input
       type="password" id="password" i18n-placeholder placeholder="Your password" autocomplete="off"
-      formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+      formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" class="form-control"
     >
     <div *ngIf="formErrors['password']" class="form-error">
       {{ formErrors['password'] }}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
index 81eba3ec9..aec709ea0 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
@@ -1,6 +1,11 @@
 @import '_variables';
 @import '_mixins';
 
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
 input[type=password],
 input[type=email] {
   @include peertube-input-text(340px);
@@ -16,7 +21,7 @@ input[type=submit] {
 .current-email,
 .pending-email {
   font-size: 16px;
-  margin: 15px 0;
+  margin-bottom: 15px;
 
   .email {
     font-weight: $font-semibold;
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
index cec70c6b5..4756cfecd 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
@@ -5,7 +5,7 @@
   <label i18n for="current-password">Change password</label>
   <input
     type="password" id="current-password" i18n-placeholder placeholder="Current password" autocomplete="current-password"
-    formControlName="current-password" [ngClass]="{ 'input-error': formErrors['current-password'] }"
+    formControlName="current-password" [ngClass]="{ 'input-error': formErrors['current-password'] }" class="form-control"
   >
   <div *ngIf="formErrors['current-password']" class="form-error">
     {{ formErrors['current-password'] }}
@@ -13,7 +13,7 @@
 
   <input
     type="password" id="new-password" i18n-placeholder placeholder="New password" autocomplete="new-password"
-    formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }"
+    formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }" class="form-control"
   >
   <div *ngIf="formErrors['new-password']" class="form-error">
     {{ formErrors['new-password'] }}
@@ -21,7 +21,7 @@
 
   <input
     type="password" id="new-confirmed-password" i18n-placeholder placeholder="Confirm new password" autocomplete="new-password"
-    formControlName="new-confirmed-password"
+    formControlName="new-confirmed-password" class="form-control"
   >
   <div *ngIf="formErrors['new-confirmed-password']" class="form-error">
     {{ formErrors['new-confirmed-password'] }}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
index e641482f0..381afae07 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
@@ -1,6 +1,11 @@
 @import '_variables';
 @import '_mixins';
 
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
 input[type=password] {
   @include peertube-input-text(340px);
   display: block;
diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html
index c542cc675..6e22abeed 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html
@@ -1,5 +1,5 @@
 <div class="delete-me">
-  <p i18n>Once you delete your account, there is no going back. Please be certain.</p>
+  <p i18n>Once you delete your account, there is no going back. You will be asked to confirm this action.</p>
 
   <button (click)="deleteMe()" i18n>Delete your account</button>
-</div>
\ No newline at end of file
+</div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
index 0ca310468..7f7806732 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
@@ -7,5 +7,6 @@
   button {
     @include peertube-button;
     @include grey-button;
+    @include disable-outline;
   }
 }
\ No newline at end of file
diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts
index 41021c592..25d862867 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts
@@ -24,7 +24,7 @@ export class MyAccountDangerZoneComponent {
 
   async deleteMe () {
     const res = await this.confirmService.confirmWithInput(
-      this.i18n('Are you sure you want to delete your account? This will delete all your data, including channels, videos etc.'),
+      this.i18n('Are you sure you want to delete your account? This will delete all your data, including channels, videos and comments. Content cached by other servers and other third-parties might make longer to be deleted.'),
       this.i18n('Type your username to confirm'),
       this.user.username,
       this.i18n('Delete your account'),
diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html
index f034c6bb3..0d0ddc0f2 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html
@@ -1,9 +1,10 @@
 <form role="form" (ngSubmit)="updateInterfaceSettings()" [formGroup]="form">
+
   <div class="form-group">
     <label i18n for="theme">Theme</label>
 
     <div class="peertube-select-container">
-      <select formControlName="theme" id="theme">
+      <select formControlName="theme" id="theme" class="form-control">
         <option i18n value="instance-default">instance default</option>
         <option i18n value="default">peertube default</option>
 
@@ -12,5 +13,5 @@
     </div>
   </div>
 
-  <input type="submit" i18n-value value="Save" [disabled]="!form.valid">
+  <input *ngIf="!reactiveUpdate" type="submit" class="mt-0" i18n-value value="Save" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss
index 629f01733..7818dfc02 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss
@@ -1,6 +1,11 @@
 @import '_variables';
 @import '_mixins';
 
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
 input[type=submit] {
   @include peertube-button;
   @include orange-button;
diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts
index 441f89f10..b6c17c0e3 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts
@@ -1,21 +1,26 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input, OnInit, OnDestroy } from '@angular/core'
 import { Notifier, ServerService } from '@app/core'
 import { ServerConfig, UserUpdateMe } from '../../../../../../shared'
 import { AuthService } from '../../../core'
-import { FormReactive, User, UserService } from '../../../shared'
+import { FormReactive } from '../../../shared/forms/form-reactive'
+import { User, UserService } from '../../../shared/users'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
-import { Subject } from 'rxjs'
+import { Subject, Subscription } from 'rxjs'
 
 @Component({
   selector: 'my-account-interface-settings',
   templateUrl: './my-account-interface-settings.component.html',
   styleUrls: [ './my-account-interface-settings.component.scss' ]
 })
-export class MyAccountInterfaceSettingsComponent extends FormReactive implements OnInit {
+export class MyAccountInterfaceSettingsComponent extends FormReactive implements OnInit, OnDestroy {
   @Input() user: User = null
+  @Input() reactiveUpdate = false
+  @Input() notifyOnUpdate = true
   @Input() userInformationLoaded: Subject<any>
 
+  formValuesWatcher: Subscription
+
   private serverConfig: ServerConfig
 
   constructor (
@@ -48,9 +53,17 @@ export class MyAccountInterfaceSettingsComponent extends FormReactive implements
         this.form.patchValue({
           theme: this.user.theme
         })
+
+        if (this.reactiveUpdate) {
+          this.formValuesWatcher = this.form.valueChanges.subscribe(val => this.updateInterfaceSettings())
+        }
       })
   }
 
+  ngOnDestroy () {
+    this.formValuesWatcher?.unsubscribe()
+  }
+
   updateInterfaceSettings () {
     const theme = this.form.value['theme']
 
@@ -58,14 +71,19 @@ export class MyAccountInterfaceSettingsComponent extends FormReactive implements
       theme
     }
 
-    this.userService.updateMyProfile(details).subscribe(
-      () => {
-        this.authService.refreshUserInformation()
+    if (this.authService.isLoggedIn()) {
+      this.userService.updateMyProfile(details).subscribe(
+        () => {
+          this.authService.refreshUserInformation()
 
-        this.notifier.success(this.i18n('Interface settings updated.'))
-      },
+          if (this.notifyOnUpdate) this.notifier.success(this.i18n('Interface settings updated.'))
+        },
 
-      err => this.notifier.error(err.message)
-    )
+        err => this.notifier.error(err.message)
+      )
+    } else {
+      this.userService.updateMyAnonymousProfile(details)
+      if (this.notifyOnUpdate) this.notifier.success(this.i18n('Interface settings updated.'))
+    }
   }
 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
index 7cd5c3b46..75e52fa1b 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -8,15 +8,16 @@
 
   &:first-child {
     font-size: 16px;
-
-    & > div {
-      font-weight: $font-semibold;
-    }
   }
 
   & > div {
+    padding: 10px;
     width: 350px;
 
+    &:nth-child(2) {
+      max-width: 60px !important;
+    }
+
     @media screen and (max-width: $small-view) {
       width: auto;
 
@@ -25,9 +26,4 @@
       }
     }
   }
-
-  & > div {
-    padding: 10px
-  }
 }
-
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
index 05c0b5ddc..818e34ee0 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
@@ -5,7 +5,7 @@
   <div class="form-group">
     <label i18n for="display-name">Display name</label>
     <input
-      type="text" id="display-name"
+      type="text" id="display-name" class="form-control"
       formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
     >
     <div *ngIf="formErrors['display-name']" class="form-error">
@@ -16,7 +16,7 @@
   <div class="form-group">
     <label i18n for="description">Description</label>
     <textarea
-      id="description" formControlName="description"
+      id="description" formControlName="description" class="form-control"
       [ngClass]="{ 'input-error': formErrors['description'] }"
     ></textarea>
     <div *ngIf="formErrors.description" class="form-error">
@@ -24,5 +24,5 @@
     </div>
   </div>
 
-  <input type="submit" i18n-value value="Update my profile" [disabled]="!form.valid">
+  <input type="submit" i18n-value value="Save" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
index 6aabb60f4..5995bae4a 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
@@ -1,6 +1,11 @@
 @import '_variables';
 @import '_mixins';
 
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
 .form-group:first-child {
   margin-bottom: 15px;
 }
@@ -11,12 +16,6 @@ input[type=text] {
   display: block;
 }
 
-textarea {
-  @include peertube-textarea(500px, 150px);
-
-  display: block;
-}
-
 input[type=submit] {
   @include peertube-button;
   @include orange-button;
@@ -24,3 +23,9 @@ input[type=submit] {
   margin-top: 15px;
 }
 
+textarea {
+  @include peertube-textarea(500px, 150px);
+  max-width: 100%;
+
+  display: block;
+}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index 9f187b574..f1c466545 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -1,34 +1,89 @@
-<my-actor-avatar-info [actor]="user.account" (avatarChange)="onAvatarChange($event)"></my-actor-avatar-info>
+<div class="form-row"> <!-- profile grid -->
+  <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div i18n class="account-title">PROFILE</div>
+  </div>
+
+  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <my-actor-avatar-info [actor]="user.account" (avatarChange)="onAvatarChange($event)"></my-actor-avatar-info>
+
+    <div class="user-quota mb-3">
+      <div>
+        <div class="progress" i18n-title title="Total video quota">
+          <div class="progress-bar" role="progressbar" [style]="{ width: userVideoQuotaPercentage + '%' }" [attr.aria-valuenow]="userVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="userVideoQuota">{{ userVideoQuotaUsed | bytes: 0 }}</div>
+          <span class="ml-auto mr-2">{{ userVideoQuota }}</span>
+        </div>
+      </div>
+
+      <div *ngIf="hasDailyQuota()" class="mt-3">
+        <div class="progress" i18n-title title="Daily video quota">
+          <div class="progress-bar secondary" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }" [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="userVideoQuotaDaily">{{ userVideoQuotaUsedDaily | bytes: 0 }}</div>
+          <span class="ml-auto mr-2">{{ userVideoQuotaDaily }}</span>
+        </div>
+      </div>
+    </div>
+
+    <my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile>
+  </div>
+</div>
 
-<div class="user-quota">
-  <div>
-    <span i18n class="user-quota-label">Total video quota:</span>
-    <ng-container i18n>{{ userVideoQuotaUsed | bytes: 0 }} used</ng-container> / {{ userVideoQuota }}
+<div class="form-row mt-5"> <!-- video settings grid -->
+  <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="anchor" id="video-settings"></div> <!-- video settings anchor -->
+    <div i18n class="account-title">VIDEO SETTINGS</div>
   </div>
 
-  <div *ngIf="hasDailyQuota()">
-    <span i18n class="user-quota-label">Daily video quota:</span>
-    <ng-container>{{ userVideoQuotaUsedDaily | bytes: 0 }} used</ng-container> / {{ userVideoQuotaDaily }}
+  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <my-account-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-video-settings>
   </div>
 </div>
 
-<div i18n class="account-title">Profile</div>
-<my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile>
+<div class="form-row mt-5"> <!-- notifications grid -->
+  <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="anchor" id="notifications"></div> <!-- notifications anchor -->
+    <div i18n class="account-title">NOTIFICATIONS</div>
+  </div>
 
-<div i18n class="account-title">Video settings</div>
-<my-account-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-video-settings>
+  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <my-account-notification-preferences [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-notification-preferences>
+  </div>
+</div>
 
-<div i18n class="account-title">Notifications</div>
-<my-account-notification-preferences [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-notification-preferences>
+<div class="form-row mt-5"> <!-- interface grid -->
+  <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div i18n class="account-title">INTERFACE</div>
+  </div>
 
-<div i18n class="account-title">Interface</div>
-<my-account-interface-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-interface-settings>
+  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <my-account-interface-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-interface-settings>
+  </div>
+</div>
 
-<div i18n class="account-title">Password</div>
-<my-account-change-password></my-account-change-password>
+<div class="form-row mt-5"> <!-- password grid -->
+  <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div i18n class="account-title">PASSWORD</div>
+  </div>
+
+  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <my-account-change-password></my-account-change-password>
+  </div>
+</div>
+
+<div class="form-row mt-5"> <!-- email grid -->
+  <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div i18n class="account-title">EMAIL</div>
+  </div>
 
-<div i18n class="account-title">Email</div>
-<my-account-change-email></my-account-change-email>
+  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <my-account-change-email></my-account-change-email>
+  </div>
+</div>
+
+<div class="form-row mt-5"> <!-- danger zone grid -->
+  <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div i18n class="account-title">DANGER ZONE</div>
+  </div>
 
-<div i18n class="account-title">Danger zone</div>
-<my-account-danger-zone [user]="user"></my-account-danger-zone>
+  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <my-account-danger-zone [user]="user"></my-account-danger-zone>
+  </div>
+</div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
index d0395aca9..3e1792e3e 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
@@ -5,15 +5,23 @@
   font-size: 15px;
   margin-top: 20px;
 
-  .user-quota-label {
+  label {
     margin-right: 5px;
-    font-weight: $font-semibold;
   }
 }
 
 .account-title {
-  @include in-content-small-title;
+  @include settings-big-title;
+}
+
+.progress {
+  @include progressbar;
+  width: 500px;
+  max-width: 100%;
+}
 
-  margin-top: 55px;
-  margin-bottom: 30px;
+@media screen and (max-width: $small-view) {
+  .progress {
+    width: 100%;
+  }
 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
index e314cdbea..5f2db9854 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
@@ -1,26 +1,30 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, AfterViewChecked } from '@angular/core'
 import { Notifier } from '@app/core'
 import { BytesPipe } from 'ngx-pipes'
 import { AuthService } from '../../core'
 import { User } from '../../shared'
 import { UserService } from '../../shared/users'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ViewportScroller } from '@angular/common'
 
 @Component({
   selector: 'my-account-settings',
   templateUrl: './my-account-settings.component.html',
   styleUrls: [ './my-account-settings.component.scss' ]
 })
-export class MyAccountSettingsComponent implements OnInit {
+export class MyAccountSettingsComponent implements OnInit, AfterViewChecked {
   user: User = null
 
   userVideoQuota = '0'
   userVideoQuotaUsed = 0
+  userVideoQuotaPercentage = 15
 
   userVideoQuotaDaily = '0'
   userVideoQuotaUsedDaily = 0
+  userVideoQuotaDailyPercentage = 15
 
   constructor (
+    private viewportScroller: ViewportScroller,
     private userService: UserService,
     private authService: AuthService,
     private notifier: Notifier,
@@ -38,12 +42,14 @@ export class MyAccountSettingsComponent implements OnInit {
       () => {
         if (this.user.videoQuota !== -1) {
           this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString()
+          this.userVideoQuotaPercentage = this.user.videoQuota * 100 / this.userVideoQuotaUsed
         } else {
           this.userVideoQuota = this.i18n('Unlimited')
         }
 
         if (this.user.videoQuotaDaily !== -1) {
           this.userVideoQuotaDaily = new BytesPipe().transform(this.user.videoQuotaDaily, 0).toString()
+          this.userVideoQuotaDailyPercentage = this.user.videoQuotaDaily * 100 / this.userVideoQuotaUsedDaily
         } else {
           this.userVideoQuotaDaily = this.i18n('Unlimited')
         }
@@ -57,6 +63,10 @@ export class MyAccountSettingsComponent implements OnInit {
       })
   }
 
+  ngAfterViewChecked () {
+    if (window.location.hash) this.viewportScroller.scrollToAnchor(window.location.hash.replace('#', ''))
+  }
+
   onAvatarChange (formData: FormData) {
     this.userService.changeAvatar(formData)
       .subscribe(
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
index 17d8cde06..0dda33af2 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
@@ -1,5 +1,5 @@
 <form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
-  <div class="form-group">
+  <div class="form-group form-group-select">
     <label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label>
     <my-help>
       <ng-template ptTemplate="customHtml">
@@ -10,7 +10,8 @@
     </my-help>
 
     <div class="peertube-select-container">
-      <select id="nsfwPolicy" formControlName="nsfwPolicy">
+      <select id="nsfwPolicy" formControlName="nsfwPolicy" class="form-control">
+        <option i18n value="undefined" disabled>Policy for sensitive videos</option>
         <option i18n value="do_not_list">Do not list</option>
         <option i18n value="blur">Blur thumbnails</option>
         <option i18n value="display">Display</option>
@@ -18,7 +19,7 @@
     </div>
   </div>
 
-  <div class="form-group">
+  <div class="form-group form-group-select">
     <label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label>
     <my-help>
       <ng-template ptTemplate="customHtml">
@@ -28,33 +29,47 @@
 
     <div>
       <p-multiSelect
-        inputId="videoLanguages" [options]="languageItems" formControlName="videoLanguages" showToggleAll="true"
+        inputId="videoLanguages" [options]="languageItems" formControlName="videoLanguages" [showToggleAll]="true"
         [defaultLabel]="getDefaultVideoLanguageLabel()" [selectedItemsLabel]="getSelectedVideoLanguageLabel()"
         emptyFilterMessage="No results found" i18n-emptyFilterMessage
       ></p-multiSelect>
     </div>
   </div>
 
+  <ng-content select="inner-title"></ng-content>
+
   <div class="form-group">
     <my-peertube-checkbox
-      inputName="webTorrentEnabled" formControlName="webTorrentEnabled"
-      i18n-labelText labelText="Use P2P to exchange parts of the video with others"
-    ></my-peertube-checkbox>
+      inputName="webTorrentEnabled" formControlName="webTorrentEnabled" [recommended]="true"
+      i18n-labelText labelText="Help share videos being played"
+    >
+      <ng-container ngProjectAs="description">
+        <span i18n>The <a routerLink="/about/peertube" fragment="privacy">sharing system</a> implies that some technical information about your system (such as a public IP address) can be sent to other peers, but greatly helps to reduce server load.</span>
+      </ng-container>
+    </my-peertube-checkbox>
   </div>
 
   <div class="form-group">
     <my-peertube-checkbox
       inputName="autoPlayVideo" formControlName="autoPlayVideo"
-      i18n-labelText labelText="Automatically plays video"
-    ></my-peertube-checkbox>
+      i18n-labelText labelText="Automatically play videos"
+    >
+      <ng-container ngProjectAs="description">
+        <span i18n>When on a video page, directly start playing the video.</span>
+      </ng-container>
+    </my-peertube-checkbox>
   </div>
 
   <div class="form-group">
     <my-peertube-checkbox
       inputName="autoPlayNextVideo" formControlName="autoPlayNextVideo"
-      i18n-labelText labelText="Automatically starts playing next video"
-    ></my-peertube-checkbox>
+      i18n-labelText labelText="Automatically start playing the next video"
+    >
+      <ng-container ngProjectAs="description">
+        <span i18n>When a video ends, follow up with the next suggested video.</span>
+      </ng-container>
+    </my-peertube-checkbox>
   </div>
 
-  <input type="submit" i18n-value value="Save" [disabled]="!form.valid">
+  <input *ngIf="!reactiveUpdate" type="submit" i18n-value value="Save" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
index 1881be762..430250b87 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
@@ -1,11 +1,15 @@
 @import '_variables';
 @import '_mixins';
 
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
 input[type=submit] {
   @include peertube-button;
   @include orange-button;
 
-  display: block;
   margin-top: 15px;
 }
 
@@ -13,4 +17,8 @@ input[type=submit] {
   @include peertube-select-container(340px);
 
   margin-bottom: 30px;
-}
\ No newline at end of file
+}
+
+.form-group-select {
+  margin-bottom: 30px;
+}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts
index a66159b3f..0aaa54cd7 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts
@@ -1,24 +1,31 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input, OnInit, OnDestroy } from '@angular/core'
 import { Notifier, ServerService } from '@app/core'
-import { UserUpdateMe } from '../../../../../../shared'
+import { UserUpdateMe } from '../../../../../../shared/models/users'
+import { User, UserService } from '@app/shared/users'
 import { AuthService } from '../../../core'
-import { FormReactive, User, UserService } from '../../../shared'
+import { FormReactive } from '@app/shared/forms/form-reactive'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
-import { forkJoin, Subject } from 'rxjs'
+import { forkJoin, Subject, Subscription } from 'rxjs'
 import { SelectItem } from 'primeng/api'
 import { first } from 'rxjs/operators'
+import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
+import { pick } from 'lodash-es'
 
 @Component({
   selector: 'my-account-video-settings',
   templateUrl: './my-account-video-settings.component.html',
   styleUrls: [ './my-account-video-settings.component.scss' ]
 })
-export class MyAccountVideoSettingsComponent extends FormReactive implements OnInit {
+export class MyAccountVideoSettingsComponent extends FormReactive implements OnInit, OnDestroy {
   @Input() user: User = null
+  @Input() reactiveUpdate = false
+  @Input() notifyOnUpdate = true
   @Input() userInformationLoaded: Subject<any>
 
   languageItems: SelectItem[] = []
+  defaultNSFWPolicy: NSFWPolicyType
+  formValuesWatcher: Subscription
 
   constructor (
     protected formValidatorService: FormValidatorService,
@@ -32,6 +39,8 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI
   }
 
   ngOnInit () {
+    let oldForm: any
+
     this.buildForm({
       nsfwPolicy: null,
       webTorrentEnabled: null,
@@ -42,8 +51,9 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI
 
     forkJoin([
       this.serverService.getVideoLanguages(),
+      this.serverService.getConfig(),
       this.userInformationLoaded.pipe(first())
-    ]).subscribe(([ languages ]) => {
+    ]).subscribe(([ languages, config ]) => {
       this.languageItems = [ { label: this.i18n('Unknown language'), value: '_unknown' } ]
       this.languageItems = this.languageItems
                                .concat(languages.map(l => ({ label: l.label, value: l.id })))
@@ -52,17 +62,32 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI
         ? this.user.videoLanguages
         : this.languageItems.map(l => l.value)
 
+      this.defaultNSFWPolicy = config.instance.defaultNSFWPolicy
+
       this.form.patchValue({
-        nsfwPolicy: this.user.nsfwPolicy,
+        nsfwPolicy: this.user.nsfwPolicy || this.defaultNSFWPolicy,
         webTorrentEnabled: this.user.webTorrentEnabled,
         autoPlayVideo: this.user.autoPlayVideo === true,
         autoPlayNextVideo: this.user.autoPlayNextVideo,
         videoLanguages
       })
+
+      if (this.reactiveUpdate) {
+        oldForm = { ...this.form.value }
+        this.formValuesWatcher = this.form.valueChanges.subscribe((formValue: any) => {
+          const updatedKey = Object.keys(formValue).find(k => formValue[k] !== oldForm[k])
+          oldForm = { ...this.form.value }
+          this.updateDetails([updatedKey])
+        })
+      }
     })
   }
 
-  updateDetails () {
+  ngOnDestroy () {
+    this.formValuesWatcher?.unsubscribe()
+  }
+
+  updateDetails (onlyKeys?: string[]) {
     const nsfwPolicy = this.form.value[ 'nsfwPolicy' ]
     const webTorrentEnabled = this.form.value['webTorrentEnabled']
     const autoPlayVideo = this.form.value['autoPlayVideo']
@@ -81,7 +106,7 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI
       }
     }
 
-    const details: UserUpdateMe = {
+    let details: UserUpdateMe = {
       nsfwPolicy,
       webTorrentEnabled,
       autoPlayVideo,
@@ -89,15 +114,22 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI
       videoLanguages
     }
 
-    this.userService.updateMyProfile(details).subscribe(
-      () => {
-        this.notifier.success(this.i18n('Video settings updated.'))
+    if (onlyKeys) details = pick(details, onlyKeys)
 
-        this.authService.refreshUserInformation()
-      },
+    if (this.authService.isLoggedIn()) {
+      this.userService.updateMyProfile(details).subscribe(
+        () => {
+          this.authService.refreshUserInformation()
 
-      err => this.notifier.error(err.message)
-    )
+          if (this.notifyOnUpdate) this.notifier.success(this.i18n('Video settings updated.'))
+        },
+
+        err => this.notifier.error(err.message)
+      )
+    } else {
+      this.userService.updateMyAnonymousProfile(details)
+      if (this.notifyOnUpdate) this.notifier.success(this.i18n('Display/Video settings updated.'))
+    }
   }
 
   getDefaultVideoLanguageLabel () {
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
index 7ac3c910f..ba8d56689 100644
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
@@ -41,4 +41,27 @@
   }
 }
 
+@media screen and (max-width: $small-view) {
+  .video-channels-header {
+    text-align: center;
+  }
+
+  .video-channel {
+    .video-channel-info {
+      padding-bottom: 10px;
+      text-align: center;
+
+      .video-channel-names {
+        flex-direction: column;
+        align-items: center !important;
+        margin: auto;
+      }
+    }
+
+    img {
+      margin-right: 0;
+    }
+  }
+}
+
 
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
index f87df87df..048d143cd 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
@@ -1,72 +1,105 @@
-<my-actor-avatar-info
-  *ngIf="isCreation() === false && videoChannelToUpdate"
-  [actor]="videoChannelToUpdate" (avatarChange)="onAvatarChange($event)"
-></my-actor-avatar-info>
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item">
+      <a routerLink="/my-account/video-channels" i18n>My Channels</a>
+    </li>
 
-<div i18n class="form-sub-title" *ngIf="isCreation() === true">Create a video channel</div>
+    <ng-container *ngIf="isCreation()">
+      <li class="breadcrumb-item active" i18n>Create</li>
+    </ng-container>
+    <ng-container *ngIf="!isCreation()">
+      <li class="breadcrumb-item active" i18n>Edit</li>
+      <li class="breadcrumb-item active" aria-current="page">
+        <a *ngIf="videoChannelToUpdate" [routerLink]="[ '/my-account/video-channels/update', videoChannelToUpdate?.nameWithHost ]">{{ videoChannelToUpdate?.displayName }}</a>
+      </li>
+    </ng-container>
+  </ol>
+</nav>
 
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
-  <div class="form-group" *ngIf="isCreation() === true">
-    <label i18n for="name">Name</label>
-    <div class="input-group">
-      <input
-        type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
-        formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }"
-      >
-      <div class="input-group-append">
-        <span class="input-group-text">@{{ instanceHost }}</span>
-      </div>
-    </div>
-    <div *ngIf="formErrors['name']" class="form-error">
-      {{ formErrors['name'] }}
-    </div>
-  </div>
 
-  <div class="form-group">
-    <label i18n for="display-name">Display name</label>
-    <input
-      type="text" id="display-name"
-      formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
-    >
-    <div *ngIf="formErrors['display-name']" class="form-error">
-      {{ formErrors['display-name'] }}
+  <div class="form-row"> <!-- channel grid -->
+    <div class="form-group col-12 col-lg-4 col-xl-3">
+      <div *ngIf="isCreation()" class="video-channel-title" i18n>NEW CHANNEL</div>
+      <div *ngIf="!isCreation() && videoChannelToUpdate" class="video-channel-title" i18n>CHANNEL</div>
     </div>
-  </div>
 
-  <div class="form-group">
-    <label i18n for="description">Description</label>
-    <textarea
-      id="description" formControlName="description"
-      [ngClass]="{ 'input-error': formErrors['description'] }"
-    ></textarea>
-    <div *ngIf="formErrors.description" class="form-error">
-      {{ formErrors.description }}
-    </div>
-  </div>
+    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+
+      <div class="form-group" *ngIf="isCreation()">
+        <label i18n for="name">Name</label>
+        <div class="input-group">
+          <input
+            type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
+            formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control"
+          >
+          <div class="input-group-append">
+            <span class="input-group-text">@{{ instanceHost }}</span>
+          </div>
+        </div>
+        <div *ngIf="formErrors['name']" class="form-error">
+          {{ formErrors['name'] }}
+        </div>
+      </div>
+
+      <my-actor-avatar-info
+        *ngIf="!isCreation() && videoChannelToUpdate"
+        [actor]="videoChannelToUpdate" (avatarChange)="onAvatarChange($event)"
+      ></my-actor-avatar-info>
+
+      <div class="form-group">
+        <label i18n for="display-name">Display name</label>
+        <input
+          type="text" id="display-name" class="form-control"
+          formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
+        >
+        <div *ngIf="formErrors['display-name']" class="form-error">
+          {{ formErrors['display-name'] }}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label i18n for="description">Description</label>
+        <textarea
+          id="description" formControlName="description" class="form-control"
+          [ngClass]="{ 'input-error': formErrors['description'] }"
+        ></textarea>
+        <div *ngIf="formErrors.description" class="form-error">
+          {{ formErrors.description }}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="support">Support</label>
+        <my-help
+          helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support your channel (membership platform...).<br /><br />
+    When you will upload a video in this channel, the video support field will be automatically filled by this text."
+        ></my-help>
+        <my-markdown-textarea
+            id="support" formControlName="support" textareaMaxWidth="500px" markdownType="enhanced"
+            [classes]="{ 'input-error': formErrors['support'] }"
+        ></my-markdown-textarea>
+        <div *ngIf="formErrors.support" class="form-error">
+          {{ formErrors.support }}
+        </div>
+      </div>
+
+      <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()">
+        <my-peertube-checkbox
+          inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate"
+          i18n-labelText labelText="Overwrite support field of all videos of this channel"
+        ></my-peertube-checkbox>
+      </div>
 
-  <div class="form-group">
-    <label for="support">Support</label>
-    <my-help
-      helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support your channel (membership platform...).<br /><br />
-When you will upload a video in this channel, the video support field will be automatically filled by this text."
-    ></my-help>
-    <my-markdown-textarea
-        id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
-        [classes]="{ 'input-error': formErrors['support'] }"
-    ></my-markdown-textarea>
-    <div *ngIf="formErrors.support" class="form-error">
-      {{ formErrors.support }}
     </div>
   </div>
 
-  <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()">
-    <my-peertube-checkbox
-      inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate"
-      i18n-labelText labelText="Overwrite support field of all videos of this channel"
-    ></my-peertube-checkbox>
+  <div class="form-row"> <!-- submit placement block -->
+    <div class="col-md-7 col-xl-5"></div>
+    <div class="col-md-5 col-xl-5 d-inline-flex">
+      <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+    </div>
   </div>
-
-  <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
index d35e0ed64..8f8af655c 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
@@ -1,8 +1,13 @@
 @import '_variables';
 @import '_mixins';
 
-.form-sub-title {
-  margin-bottom: 20px;
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
+.video-channel-title {
+  @include settings-big-title;
 }
 
 my-actor-avatar-info {
@@ -18,14 +23,22 @@ my-actor-avatar-info {
   height: 30px;
 }
 
-input[type=text] {
-  @include peertube-input-text(340px);
+input {
+  &[type=text] {
+    @include peertube-input-text(340px);
 
-  display: block;
+    display: block;
+
+    &#name {
+      width: auto;
+      flex-grow: 1;
+    }
+  }
 
-  &#name {
-    width: auto;
-    flex-grow: 1;
+  &[type=submit] {
+    @include peertube-button;
+    @include orange-button;
+    margin-left: auto;
   }
 }
 
@@ -39,7 +52,16 @@ textarea {
   @include peertube-select-container(340px);
 }
 
-input[type=submit] {
-  @include peertube-button;
-  @include orange-button;
+.breadcrumb {
+  @include breadcrumb;
+}
+
+@media screen and (max-width: $small-view) {
+  input[type=text]#name {
+    width: auto !important;
+  }
+
+  label[for=name] + div, textarea {
+    width: 100%;
+  }
 }
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts
index 7479442d1..355cb4f55 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts
@@ -9,7 +9,7 @@ export abstract class MyAccountVideoChannelEdit extends FormReactive {
   abstract isCreation (): boolean
   abstract getFormButtonTitle (): string
 
-  // FIXME: We need this method so angular does not complain in the child template
+  // We need this method so angular does not complain in child template that doesn't need this
   onAvatarChange (formData: FormData) { /* empty */ }
 
   // Should be implemented by the child
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels-routing.module.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels-routing.module.ts
new file mode 100644
index 000000000..94037e18f
--- /dev/null
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels-routing.module.ts
@@ -0,0 +1,41 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { MyAccountVideoChannelUpdateComponent } from './my-account-video-channel-update.component'
+import { MyAccountVideoChannelCreateComponent } from './my-account-video-channel-create.component'
+import { MyAccountVideoChannelsComponent } from './my-account-video-channels.component'
+
+const myAccountVideoChannelsRoutes: Routes = [
+  {
+    path: '',
+    component: MyAccountVideoChannelsComponent,
+    data: {
+      meta: {
+        title: 'Account video channels'
+      }
+    }
+  },
+  {
+    path: 'create',
+    component: MyAccountVideoChannelCreateComponent,
+    data: {
+      meta: {
+        title: 'Create new video channel'
+      }
+    }
+  },
+  {
+    path: 'update/:videoChannelId',
+    component: MyAccountVideoChannelUpdateComponent,
+    data: {
+      meta: {
+        title: 'Update video channel'
+      }
+    }
+  }
+]
+
+@NgModule({
+  imports: [ RouterModule.forChild(myAccountVideoChannelsRoutes) ],
+  exports: [ RouterModule ]
+})
+export class MyAccountVideoChannelsRoutingModule {}
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
index 11e87ba79..03d45227e 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
@@ -1,12 +1,12 @@
 <div class="video-channels-header">
   <a class="create-button" routerLink="create">
     <my-global-icon iconName="add"></my-global-icon>
-    <ng-container i18n>Create a new video channel</ng-container>
+    <ng-container i18n>Create video channel</ng-container>
   </a>
 </div>
 
 <div class="video-channels">
-  <div *ngFor="let videoChannel of videoChannels" class="video-channel">
+  <div *ngFor="let videoChannel of videoChannels; let i = index" class="video-channel">
     <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]">
       <img [src]="videoChannel.avatarUrl" alt="Avatar" />
     </a>
@@ -17,13 +17,16 @@
         <div class="video-channel-name">{{ videoChannel.nameWithHost }}</div>
       </a>
 
-      <div i18n class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div>
+      <div i18n class="video-channel-followers">{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
+
+      <div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end">
+        <p-chart *ngIf="videoChannelsChartData && videoChannelsChartData[i]" type="line" [data]="videoChannelsChartData[i]" [options]="chartOptions" width="40vw" height="100px"></p-chart>
+      </div>
     </div>
 
     <div class="video-channel-buttons">
-      <my-delete-button (click)="deleteVideoChannel(videoChannel)"></my-delete-button>
-
       <my-edit-button [routerLink]="[ 'update', videoChannel.nameWithHost ]"></my-edit-button>
+      <my-delete-button (click)="deleteVideoChannel(videoChannel)"></my-delete-button>
     </div>
   </div>
 </div>
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
index 20582e478..e1acf6cd6 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
@@ -6,13 +6,14 @@
 }
 
 ::ng-deep .action-button {
-  &.action-button-delete {
+  &.action-button-edit {
     margin-right: 10px;
   }
 }
 
 .video-channel {
   @include row-blocks;
+  padding-bottom: 0;
 
   img {
     @include avatar(80px);
@@ -58,15 +59,28 @@
   margin: 20px 0 50px;
 }
 
-@media screen and (max-width: 800px) {
+::ng-deep .chartjs-render-monitor {
+  position: relative;
+  top: 1px;
+}
+
+@media screen and (max-width: $small-view) {
   .video-channels-header {
     text-align: center;
   }
 
   .video-channel {
-    .video-channel-names {
-      flex-direction: column;
-      align-items: center !important;
+    padding-bottom: 10px;
+
+    .video-channel-info {
+      padding-bottom: 10px;
+      text-align: center;
+
+      .video-channel-names {
+        flex-direction: column;
+        align-items: center !important;
+        margin: auto;
+      }
     }
 
     img {
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts
index 3b01b6c9f..75d6d8acd 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts
@@ -4,9 +4,12 @@ import { AuthService } from '../../core/auth'
 import { ConfirmService } from '../../core/confirm'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
+import { ScreenService } from '@app/shared/misc/screen.service'
 import { User } from '@app/shared'
 import { flatMap } from 'rxjs/operators'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { min, minBy, max, maxBy } from 'lodash-es'
+import { ChartData } from 'chart.js'
 
 @Component({
   selector: 'my-account-video-channels',
@@ -15,6 +18,9 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 })
 export class MyAccountVideoChannelsComponent implements OnInit {
   videoChannels: VideoChannel[] = []
+  videoChannelsChartData: ChartData[]
+  videoChannelsMinimumDailyViews = 0
+  videoChannelsMaximumDailyViews: number
 
   private user: User
 
@@ -23,6 +29,7 @@ export class MyAccountVideoChannelsComponent implements OnInit {
     private notifier: Notifier,
     private confirmService: ConfirmService,
     private videoChannelService: VideoChannelService,
+    private screenService: ScreenService,
     private i18n: I18n
   ) {}
 
@@ -32,6 +39,59 @@ export class MyAccountVideoChannelsComponent implements OnInit {
     this.loadVideoChannels()
   }
 
+  get isInSmallView () {
+    return this.screenService.isInSmallView()
+  }
+
+  get chartOptions () {
+    return {
+      legend: {
+        display: false
+      },
+      scales: {
+        xAxes: [{
+          display: false
+        }],
+        yAxes: [{
+          display: false,
+          ticks: {
+            min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)),
+            max: Math.max(1, this.videoChannelsMaximumDailyViews)
+          }
+        }]
+      },
+      layout: {
+        padding: {
+          left: 15,
+          right: 15,
+          top: 10,
+          bottom: 0
+        }
+      },
+      elements: {
+        point: {
+          radius: 0
+        }
+      },
+      tooltips: {
+        mode: 'index',
+        intersect: false,
+        custom: function (tooltip: any) {
+          if (!tooltip) return
+          // disable displaying the color box
+          tooltip.displayColors = false
+        },
+        callbacks: {
+          label: (tooltip: any, data: any) => `${tooltip.value} views`
+        }
+      },
+      hover: {
+        mode: 'index',
+        intersect: false
+      }
+    }
+  }
+
   async deleteVideoChannel (videoChannel: VideoChannel) {
     const res = await this.confirmService.confirmWithInput(
       this.i18n(
@@ -63,7 +123,37 @@ export class MyAccountVideoChannelsComponent implements OnInit {
 
   private loadVideoChannels () {
     this.authService.userInformationLoaded
-        .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account)))
-        .subscribe(res => this.videoChannels = res.data)
+        .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true)))
+        .subscribe(res => {
+          this.videoChannels = res.data
+
+          // chart data
+          this.videoChannelsChartData = this.videoChannels.map(v => ({
+            labels: v.viewsPerDay.map(day => day.date.toLocaleDateString()),
+            datasets: [
+              {
+                  label: this.i18n('Views for the day'),
+                  data: v.viewsPerDay.map(day => day.views),
+                  fill: false,
+                  borderColor: "#c6c6c6"
+              }
+            ]
+          } as ChartData))
+
+          // chart options that depend on chart data:
+          // we don't want to skew values and have min at 0, so we define what the floor/ceiling is here
+          this.videoChannelsMinimumDailyViews = min(
+            this.videoChannels.map(v => minBy( // compute local minimum daily views for each channel, by their "views" attribute
+              v.viewsPerDay,
+              day => day.views
+            ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
+          )
+          this.videoChannelsMaximumDailyViews = max(
+            this.videoChannels.map(v => maxBy( // compute local maximum daily views for each channel, by their "views" attribute
+              v.viewsPerDay,
+              day => day.views
+            ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
+          )
+        })
   }
 }
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.module.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.module.ts
new file mode 100644
index 000000000..87d6b762f
--- /dev/null
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core'
+import { ChartModule } from 'primeng/chart'
+import { MyAccountVideoChannelsRoutingModule } from './my-account-video-channels-routing.module'
+import { MyAccountVideoChannelsComponent } from './my-account-video-channels.component'
+import { MyAccountVideoChannelCreateComponent } from './my-account-video-channel-create.component'
+import { MyAccountVideoChannelUpdateComponent } from './my-account-video-channel-update.component'
+import { SharedModule } from '@app/shared'
+
+@NgModule({
+  imports: [
+    MyAccountVideoChannelsRoutingModule,
+    SharedModule,
+    ChartModule
+  ],
+
+  declarations: [
+    MyAccountVideoChannelsComponent,
+    MyAccountVideoChannelCreateComponent,
+    MyAccountVideoChannelUpdateComponent
+  ],
+
+  exports: [],
+  providers: []
+})
+export class MyAccountVideoChannelsModule { }
diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
index 329948cb5..37c6ad6b4 100644
--- a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
+++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
@@ -1,6 +1,7 @@
 <p-table
-  [value]="videoImports" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+  [value]="videoImports" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage"
   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+  (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
 >
   <ng-template pTemplate="header">
     <tr>
@@ -15,8 +16,8 @@
 
   <ng-template pTemplate="body" let-expanded="expanded" let-videoImport>
     <tr>
-      <td>
-        <span *ngIf="videoImport.error" class="expander" [pRowToggler]="videoImport">
+      <td class="expand-cell">
+        <span *ngIf="videoImport.error" class="expander" [pRowToggler]="videoImport" i18n-ngbTooltip ngbTooltip="See the error">
           <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
         </span>
       </td>
@@ -28,13 +29,14 @@
         </ng-template>
       </td>
 
-      <td *ngIf="isVideoImportPending(videoImport)">
-        {{ videoImport.video?.name }}
-      </td>
-      <td *ngIf="isVideoImportSuccess(videoImport) && videoImport.video">
-        <a [href]="getVideoUrl(videoImport.video)" target="_blank" rel="noopener noreferrer">{{ videoImport.video?.name }}</a>
+      <td>
+        <ng-container *ngIf="isVideoImportPending(videoImport)">{{ videoImport.video?.name }}</ng-container>
+        <ng-container *ngIf="isVideoImportSuccess(videoImport) && videoImport.video">
+          <a [href]="getVideoUrl(videoImport.video)" target="_blank" rel="noopener noreferrer">{{ videoImport.video?.name }}</a>
+        </ng-container>
+        <ng-container *ngIf="isVideoImportSuccess(videoImport) && !videoImport.video" i18n>This video was deleted</ng-container>
+        <ng-container *ngIf="isVideoImportFailed(videoImport)"></ng-container>
       </td>
-      <td *ngIf="isVideoImportFailed(videoImport)"></td>
 
       <td>{{ videoImport.state.label }}</td>
       <td>{{ videoImport.createdAt }}</td>
diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts
index 21a10c8ff..4452154eb 100644
--- a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts
+++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts
@@ -1,8 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { RestPagination, RestTable } from '@app/shared'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { Notifier } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoImport, VideoImportState } from '../../../../../shared/models/videos'
 import { VideoImportService } from '@app/shared/video-import'
 
@@ -14,14 +13,12 @@ import { VideoImportService } from '@app/shared/video-import'
 export class MyAccountVideoImportsComponent extends RestTable implements OnInit {
   videoImports: VideoImport[] = []
   totalRecords = 0
-  rowsPerPage = 10
   sort: SortMeta = { field: 'createdAt', order: 1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
   constructor (
     private notifier: Notifier,
-    private videoImportService: VideoImportService,
-    private i18n: I18n
+    private videoImportService: VideoImportService
   ) {
     super()
   }
@@ -30,6 +27,10 @@ export class MyAccountVideoImportsComponent extends RestTable implements OnInit
     this.initialize()
   }
 
+  getIdentifier () {
+    return 'MyAccountVideoImportsComponent'
+  }
+
   isVideoImportSuccess (videoImport: VideoImport) {
     return videoImport.state.id === VideoImportState.SUCCESS
   }
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html
index 82321459f..05335dc1a 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html
@@ -1,71 +1,102 @@
-<div i18n class="form-sub-title" *ngIf="isCreation() === true">Create a new playlist</div>
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item">
+      <a routerLink="/my-account/video-playlists" i18n>My Playlists</a>
+    </li>
+
+    <ng-container *ngIf="isCreation()">
+      <li class="breadcrumb-item active" i18n>Create</li>
+    </ng-container>
+    <ng-container *ngIf="!isCreation()">
+      <li class="breadcrumb-item active" i18n>Edit</li>
+      <li class="breadcrumb-item active" aria-current="page">
+        <a *ngIf="videoPlaylistToUpdate" [routerLink]="[ '/my-account/video-playlists/update', videoPlaylistToUpdate?.uuid ]">{{ videoPlaylistToUpdate?.displayName }}</a>
+      </li>
+    </ng-container>
+  </ol>
+</nav>
 
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
-  <div class="row">
-    <div class="col-md-12 col-xl-6">
-      <div class="form-group">
-        <label i18n for="displayName">Display name</label>
-        <input
-          type="text" id="displayName"
-          formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
-        >
-        <div *ngIf="formErrors['displayName']" class="form-error">
-          {{ formErrors['displayName'] }}
-        </div>
-      </div>
 
-      <div class="form-group">
-        <label i18n for="description">Description</label>
-        <textarea
-          id="description" formControlName="description"
-          [ngClass]="{ 'input-error': formErrors['description'] }"
-        ></textarea>
-        <div *ngIf="formErrors.description" class="form-error">
-          {{ formErrors.description }}
-        </div>
-      </div>
+  <div class="form-row"> <!-- playlist grid -->
+    <div class="form-group col-12 col-lg-4 col-xl-3">
+      <div *ngIf="isCreation()" class="video-playlist-title" i18n>NEW PLAYLIST</div>
+      <div *ngIf="!isCreation() && videoPlaylistToUpdate" class="video-playlist-title" i18n>PLAYLIST</div>
     </div>
 
-    <div class="col-md-12 col-xl-6">
-      <div class="form-group">
-        <label i18n for="privacy">Privacy</label>
-        <div class="peertube-select-container">
-          <select id="privacy" formControlName="privacy">
-            <option *ngFor="let privacy of videoPlaylistPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
-          </select>
+    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+
+      <div class="col-md-12 col-xl-6">
+        <div class="form-group">
+          <label i18n for="displayName">Display name</label>
+          <input
+            type="text" id="displayName"
+            formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
+          >
+          <div *ngIf="formErrors['displayName']" class="form-error">
+            {{ formErrors['displayName'] }}
+          </div>
         </div>
 
-        <div *ngIf="formErrors.privacy" class="form-error">
-          {{ formErrors.privacy }}
+        <div class="form-group">
+          <label i18n for="description">Description</label>
+          <textarea
+            id="description" formControlName="description"
+            [ngClass]="{ 'input-error': formErrors['description'] }"
+          ></textarea>
+          <div *ngIf="formErrors.description" class="form-error">
+            {{ formErrors.description }}
+          </div>
         </div>
       </div>
 
-      <div class="form-group">
-        <label i18n>Channel</label>
-        <div class="peertube-select-container">
-          <select formControlName="videoChannelId">
-            <option></option>
-            <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
-          </select>
+      <div class="col-md-12 col-xl-6">
+        <div class="form-group">
+          <label i18n for="privacy">Privacy</label>
+          <div class="peertube-select-container">
+            <select id="privacy" formControlName="privacy">
+              <option *ngFor="let privacy of videoPlaylistPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
+            </select>
+          </div>
+
+          <div *ngIf="formErrors.privacy" class="form-error">
+            {{ formErrors.privacy }}
+          </div>
         </div>
 
-        <div *ngIf="formErrors['videoChannelId']" class="form-error">
-          {{ formErrors['videoChannelId'] }}
+        <div class="form-group">
+          <label i18n>Channel</label>
+          <div class="peertube-select-container">
+            <select formControlName="videoChannelId">
+              <option></option>
+              <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
+            </select>
+          </div>
+
+          <div *ngIf="formErrors['videoChannelId']" class="form-error">
+            {{ formErrors['videoChannelId'] }}
+          </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <label i18n>Playlist thumbnail</label>
+        <div class="form-group">
+          <label i18n>Playlist thumbnail</label>
+
+          <my-preview-upload
+            i18n-inputLabel inputLabel="Edit" inputName="thumbnailfile" formControlName="thumbnailfile"
+            previewWidth="223px" previewHeight="122px"
+          ></my-preview-upload>
+        </div>
+      </div>
 
-        <my-preview-upload
-          i18n-inputLabel inputLabel="Edit" inputName="thumbnailfile" formControlName="thumbnailfile"
-          previewWidth="223px" previewHeight="122px"
-        ></my-preview-upload>
+      <div class="form-row"> <!-- submit placement block -->
+        <div class="col-md-7 col-xl-5"></div>
+        <div class="col-md-5 col-xl-5 d-inline-flex">
+          <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+        </div>
       </div>
     </div>
   </div>
 
-  <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.scss
index 5af846d8e..08fab1101 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.scss
@@ -1,8 +1,13 @@
 @import '_variables';
 @import '_mixins';
 
-.form-sub-title {
-  margin-bottom: 20px;
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
+.video-playlist-title {
+  @include settings-big-title;
 }
 
 input[type=text] {
@@ -25,3 +30,7 @@ input[type=submit] {
   @include peertube-button;
   @include orange-button;
 }
+
+.breadcrumb {
+  @include breadcrumb;
+}
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
index 9657ac11d..a4ca0f45d 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
@@ -11,6 +11,11 @@
 
   display: flex;
   justify-content: center;
+
+  /* fix ellipsis dots background color */
+  ::ng-deep .miniature-name::after {
+    background-color: var(--submenuColor) !important;
+  }
 }
 
 // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples
@@ -37,3 +42,9 @@
 .videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
+
+@media screen and (max-width: $small-view) {
+  .playlist-info {
+    margin-top: -$sub-menu-margin-bottom-small-view;
+  }
+}
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
index dd6a0e55b..86844ce01 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
@@ -5,7 +5,7 @@
 
   <a class="create-button" routerLink="create">
     <my-global-icon iconName="add"></my-global-icon>
-    <ng-container i18n>Create a new playlist</ng-container>
+    <ng-container i18n>Create playlist</ng-container>
   </a>
 </div>
 
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
index 4e4156b22..4381d74b0 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
@@ -43,7 +43,7 @@
   }
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: $small-view) {
   .video-playlists-header {
     text-align: center;
   }
@@ -67,3 +67,22 @@
     }
   }
 }
+
+@media only screen and (min-width: $mobile-view) and (max-width: $small-view) {
+  .video-playlists-header {
+    input[type=text] {
+      width: 42% !important;
+    }
+  }
+}
+
+@media screen and (max-width: $mobile-view) {
+  .video-playlists-header {
+    flex-direction: column;
+
+    input[type=text] {
+      width: 100% !important;
+      margin-bottom: 12px;
+    }
+  }
+}
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index 8248cc94f..40bae7668 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -54,3 +54,47 @@ my-delete-button,
 my-edit-button {
   margin-right: 10px;
 }
+
+@media screen and (max-width: $small-view) {
+  .videos-header {
+    flex-direction: column;
+  }
+
+  ::ng-deep {
+    .video-miniature {
+      align-items: center;
+
+      .video-bottom,
+      .video-bottom .video-miniature-information {
+        /* same width than a.video-thumbnail */
+        max-width: 223px !important;
+      }
+    }
+  }
+
+  my-delete-button,
+  my-edit-button {
+    margin-right: 0px;
+
+    ::ng-deep {
+      span, a {
+        margin-right: 0px;
+      }
+    }
+  }
+
+  my-delete-button,
+  my-edit-button,
+  my-button {
+    margin-top: 15px;
+    width: 100%;
+    text-align: center;
+
+    ::ng-deep {
+      .action-button {
+        /* same width than a.video-thumbnail */
+        width: 223px;
+      }
+    }
+  }
+}
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
index 22f127904..9d809d2bf 100644
--- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
+++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
@@ -18,9 +18,10 @@
 
   <div class="modal-footer inputs">
     <div class="form-group inputs">
-      <span i18n class="action-button action-button-cancel" (click)="dismiss()">
-        Cancel
-      </span>
+      <input
+        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        (click)="dismiss()" (key.enter)="dismiss()"
+      >
 
       <input
         type="submit" i18n-value value="Submit" class="action-button-submit"
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
index 36d1ea091..f4e2b5955 100644
--- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
@@ -43,7 +43,7 @@ export class VideoChangeOwnershipComponent extends FormReactive implements OnIni
   show (video: Video) {
     this.video = video
     this.modalService
-      .open(this.modal)
+      .open(this.modal, { centered: true })
       .result
       .then(() => this.changeOwnership())
       .catch((_) => _) // Called when closing (cancel) the modal without validating, do nothing
diff --git a/client/src/app/+my-account/my-account.component.html b/client/src/app/+my-account/my-account.component.html
index 3999252be..d885eb243 100644
--- a/client/src/app/+my-account/my-account.component.html
+++ b/client/src/app/+my-account/my-account.component.html
@@ -1,7 +1,7 @@
 <div class="row">
   <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
 
-  <div class="margin-content">
+  <div class="margin-content pb-5">
     <router-outlet></router-outlet>
   </div>
 </div>
diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss
index 4f111efdf..fd47aec86 100644
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -1,3 +1,8 @@
 .row {
   flex-direction: column;
+  width: 100%;
+
+  & > my-top-menu-dropdown:nth-child(1) {
+    flex-grow: 1;
+  }
 }
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index 6cf1499d3..72b9fd9f2 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -1,11 +1,10 @@
-import { TableModule } from 'primeng/table'
 import { NgModule } from '@angular/core'
+import { TableModule } from 'primeng/table'
 import { AutoCompleteModule } from 'primeng/autocomplete'
 import { InputSwitchModule } from 'primeng/inputswitch'
 import { SharedModule } from '../shared'
 import { MyAccountRoutingModule } from './my-account-routing.module'
 import { MyAccountChangePasswordComponent } from './my-account-settings/my-account-change-password/my-account-change-password.component'
-import { MyAccountVideoSettingsComponent } from './my-account-settings/my-account-video-settings/my-account-video-settings.component'
 import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component'
 import { MyAccountComponent } from './my-account.component'
 import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component'
@@ -13,10 +12,6 @@ import { VideoChangeOwnershipComponent } from './my-account-videos/video-change-
 import { MyAccountOwnershipComponent } from './my-account-ownership/my-account-ownership.component'
 import { MyAccountAcceptOwnershipComponent } from './my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component'
 import { MyAccountProfileComponent } from '@app/+my-account/my-account-settings/my-account-profile/my-account-profile.component'
-import { MyAccountVideoChannelsComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channels.component'
-import { MyAccountVideoChannelCreateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-create.component'
-import { MyAccountVideoChannelUpdateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-update.component'
-import { ActorAvatarInfoComponent } from '@app/+my-account/shared/actor-avatar-info.component'
 import { MyAccountVideoImportsComponent } from '@app/+my-account/my-account-video-imports/my-account-video-imports.component'
 import { MyAccountDangerZoneComponent } from '@app/+my-account/my-account-settings/my-account-danger-zone'
 import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-subscriptions/my-account-subscriptions.component'
@@ -37,7 +32,6 @@ import {
 } from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component'
 import { DragDropModule } from '@angular/cdk/drag-drop'
 import { MyAccountChangeEmailComponent } from '@app/+my-account/my-account-settings/my-account-change-email'
-import { MyAccountInterfaceSettingsComponent } from '@app/+my-account/my-account-settings/my-account-interface'
 
 @NgModule({
   imports: [
@@ -54,20 +48,14 @@ import { MyAccountInterfaceSettingsComponent } from '@app/+my-account/my-account
     MyAccountComponent,
     MyAccountSettingsComponent,
     MyAccountChangePasswordComponent,
-    MyAccountVideoSettingsComponent,
     MyAccountProfileComponent,
     MyAccountChangeEmailComponent,
-    MyAccountInterfaceSettingsComponent,
 
     MyAccountVideosComponent,
 
     VideoChangeOwnershipComponent,
     MyAccountOwnershipComponent,
     MyAccountAcceptOwnershipComponent,
-    MyAccountVideoChannelsComponent,
-    MyAccountVideoChannelCreateComponent,
-    MyAccountVideoChannelUpdateComponent,
-    ActorAvatarInfoComponent,
     MyAccountVideoImportsComponent,
     MyAccountDangerZoneComponent,
     MyAccountSubscriptionsComponent,
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.html b/client/src/app/+my-account/shared/actor-avatar-info.component.html
index 8bdff2f5a..82f5123de 100644
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.html
+++ b/client/src/app/+my-account/shared/actor-avatar-info.component.html
@@ -1,6 +1,16 @@
 <ng-container *ngIf="actor">
   <div class="actor">
-    <img [src]="actor.avatarUrl" alt="Avatar" />
+    <div class="d-flex">
+      <img [src]="actor.avatarUrl" alt="Avatar" />
+
+      <div class="actor-img-edit-container">
+        <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', '+ maxSizeText +': '+ maxAvatarSizeInBytes +')'" placement="right" container="body">
+          <my-global-icon iconName="edit"></my-global-icon>
+          <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/>
+        </div>
+      </div>
+    </div>
+
 
     <div class="actor-info">
       <div class="actor-info-names">
@@ -10,10 +20,4 @@
       <div i18n class="actor-info-followers">{{ actor.followersCount }} subscribers</div>
     </div>
   </div>
-
-  <div class="button-file">
-    <span i18n>Change the avatar</span>
-    <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()" />
-  </div>
-  <div i18n class="file-max-size">(extensions: {{ avatarExtensions }}, max size: {{ maxAvatarSize | bytes }})</div>
 </ng-container>
\ No newline at end of file
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.scss b/client/src/app/+my-account/shared/actor-avatar-info.component.scss
index 86f8108b9..5a66ecfd2 100644
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.scss
+++ b/client/src/app/+my-account/shared/actor-avatar-info.component.scss
@@ -5,12 +5,42 @@
   display: flex;
 
   img {
-    @include avatar(50px);
+    @include avatar(100px);
 
     margin-right: 15px;
   }
 
+  .actor-img-edit-container {
+    position: relative;
+    width: 0;
+
+    .actor-img-edit-button {
+      @include peertube-button-file(21px);
+      @include button-with-icon(19px);
+    
+      margin-top: 10px;
+      margin-bottom: 5px;
+      border-radius: 50%;
+      top: 55px;
+      right: 45px;
+      cursor: pointer;
+
+      input {
+        width: 30px;
+        height: 30px;
+      }
+
+      my-global-icon {
+        right: 7px;
+      }
+    }
+  }
+
   .actor-info {
+    justify-content: center;
+    display: inline-flex;
+    flex-direction: column;
+
     .actor-info-names {
       display: flex;
       align-items: center;
@@ -35,21 +65,7 @@
 
     .actor-info-followers {
       font-size: 15px;
+      padding-bottom: .5rem;
     }
   }
 }
-
-.button-file {
-  @include peertube-button-file(160px);
-
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
-
-.file-max-size {
-  display: inline-block;
-  font-size: 13px;
-
-  position: relative;
-  top: -10px;
-}
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.ts b/client/src/app/+my-account/shared/actor-avatar-info.component.ts
index 101dfa556..8e4a7a602 100644
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.ts
+++ b/client/src/app/+my-account/shared/actor-avatar-info.component.ts
@@ -4,6 +4,8 @@ import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { Account } from '@app/shared/account/account.model'
 import { Notifier } from '@app/core'
 import { ServerConfig } from '@shared/models'
+import { BytesPipe } from 'ngx-pipes'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-actor-avatar-info',
@@ -11,18 +13,25 @@ import { ServerConfig } from '@shared/models'
   styleUrls: [ './actor-avatar-info.component.scss' ]
 })
 export class ActorAvatarInfoComponent implements OnInit {
-  @ViewChild('avatarfileInput', { static: false }) avatarfileInput: ElementRef<HTMLInputElement>
+  @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
 
   @Input() actor: VideoChannel | Account
 
   @Output() avatarChange = new EventEmitter<FormData>()
 
+  maxSizeText: string
+
   private serverConfig: ServerConfig
+  private bytesPipe: BytesPipe
 
   constructor (
     private serverService: ServerService,
-    private notifier: Notifier
-  ) {}
+    private notifier: Notifier,
+    private i18n: I18n
+  ) {
+    this.bytesPipe = new BytesPipe()
+    this.maxSizeText = this.i18n('max size')
+  }
 
   ngOnInit (): void {
     this.serverConfig = this.serverService.getTmpConfig()
@@ -47,7 +56,11 @@ export class ActorAvatarInfoComponent implements OnInit {
     return this.serverConfig.avatar.file.size.max
   }
 
+  get maxAvatarSizeInBytes () {
+    return this.bytesPipe.transform(this.maxAvatarSize)
+  }
+
   get avatarExtensions () {
-    return this.serverConfig.avatar.file.extensions.join(',')
+    return this.serverConfig.avatar.file.extensions.join(', ')
   }
 }
diff --git a/client/src/app/+signup/+register/register-step-channel.component.html b/client/src/app/+signup/+register/register-step-channel.component.html
index 88ff6e3ff..170c2964e 100644
--- a/client/src/app/+signup/+register/register-step-channel.component.html
+++ b/client/src/app/+signup/+register/register-step-channel.component.html
@@ -40,7 +40,7 @@
     </div>
 
     <div class="name-information" i18n>
-      The channel name is a unique identifier of your channel on this instance. It's like an address mail, so other people can find your channel.
+      The channel name is a unique identifier of your channel on this and all the other instances. It's as unique as an email address, which makes it easy for other people to interact with it.
     </div>
 
     <div *ngIf="formErrors.name" class="form-error">
diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html
index a2a657660..1bd378b13 100644
--- a/client/src/app/+signup/+register/register-step-user.component.html
+++ b/client/src/app/+signup/+register/register-step-user.component.html
@@ -21,7 +21,7 @@
     <div class="input-group">
       <input
         type="text" id="username" i18n-placeholder placeholder="Example: jane_doe"
-        formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
+        formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }"
       >
       <div class="input-group-append">
         <span class="input-group-text">@{{ instanceHost }}</span>
@@ -29,7 +29,7 @@
     </div>
 
     <div class="name-information" i18n>
-      The username is a unique identifier of your account on this instance. It's like an address mail, so other people can find you.
+      The username is a unique identifier of your account on this and all the other instances. It's as unique as an email address, which makes it easy for other people to interact with it.
     </div>
 
     <div *ngIf="formErrors.username" class="form-error">
@@ -41,7 +41,7 @@
     <label for="email" i18n>Email</label>
     <input
       type="text" id="email" i18n-placeholder placeholder="Email"
-      formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
+      formControlName="email" class="form-control" [ngClass]="{ 'input-error': formErrors['email'] }"
     >
     <div *ngIf="formErrors.email" class="form-error">
       {{ formErrors.email }}
@@ -52,7 +52,7 @@
     <label for="password" i18n>Password</label>
     <input
       type="password" id="password" i18n-placeholder placeholder="Password" autocomplete="new-password"
-      formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+      formControlName="password" class="form-control" [ngClass]="{ 'input-error': formErrors['password'] }"
     >
     <div *ngIf="formErrors.password" class="form-error">
       {{ formErrors.password }}
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 2f62dd59d..e135b5cb4 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -44,7 +44,7 @@
       }
     }
 
-    @media screen and (max-width: 500px) {
+    @media screen and (max-width: $mobile-view) {
       width: auto;
     }
   }
diff --git a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
index 2e4180632..ece9d1022 100644
--- a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
+++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
@@ -8,7 +8,7 @@
       <label i18n for="verify-email-email">Email</label>
       <input
         type="email" id="verify-email-email" i18n-placeholder placeholder="Email address" required
-        formControlName="verify-email-email" [ngClass]="{ 'input-error': formErrors['verify-email-email'] }"
+        formControlName="verify-email-email" class="form-control" [ngClass]="{ 'input-error': formErrors['verify-email-email'] }"
       >
       <div *ngIf="formErrors['verify-email-email']" class="form-error">
           {{ formErrors['verify-email-email'] }}
diff --git a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html
index 9655668d7..c02213ebb 100644
--- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html
+++ b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html
@@ -1,19 +1,19 @@
 <div *ngIf="videoChannel" class="row">
   <div class="description col-md-6 col-sm-12">
     <div class="block">
-      <div i18n class="small-title">Description</div>
+      <div i18n class="small-title">DESCRIPTION</div>
       <div class="content" [innerHtml]="getVideoChannelDescription()"></div>
     </div>
 
     <div class="block" *ngIf="supportHTML">
-      <div i18n class="small-title">Support this channel</div>
+      <div i18n class="small-title">SUPPORT THIS CHANNEL</div>
       <div class="content" [innerHtml]="supportHTML"></div>
     </div>
   </div>
 
   <div class="stats col-md-6 col-sm-12">
     <div class="block">
-      <div i18n class="small-title">Stats</div>
+      <div i18n class="small-title">STATS</div>
       <div i18n class="content">Created {{ videoChannel.createdAt | date }}</div>
     </div>
   </div>
diff --git a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
index f4fe14662..9eaa3ba32 100644
--- a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
+++ b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
@@ -12,6 +12,8 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { Subscription } from 'rxjs'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { Notifier, ServerService } from '@app/core'
+import { UserService } from '@app/shared'
+import { LocalStorageService } from '@app/shared/misc/storage.service'
 
 @Component({
   selector: 'my-video-channel-videos',
@@ -34,9 +36,11 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
     protected serverService: ServerService,
     protected route: ActivatedRoute,
     protected authService: AuthService,
+    protected userService: UserService,
     protected notifier: Notifier,
     protected confirmService: ConfirmService,
     protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
     private videoChannelService: VideoChannelService,
     private videoService: VideoService
   ) {
@@ -72,7 +76,7 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
                .getVideoChannelVideos(this.videoChannel, newPagination, this.sort)
                .pipe(
                  tap(({ total }) => {
-                   this.titlePage = this.i18n(`{total, plural, =1 {Published 1 video} other {Published ${total} videos}}`, { total })
+                   this.titlePage = this.i18n(`{total, plural, =1 {Published 1 video} other {Published {{total}} videos}}`, { total })
                  })
                )
   }
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index f0bb083ca..43b5cd92e 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -7,32 +7,40 @@
       <div class="actor-info">
         <div class="actor-names">
           <div class="actor-display-name">{{ videoChannel.displayName }}</div>
-          <div class="actor-name">{{ videoChannel.nameWithHost }}
-            <button ngxClipboard [cbContent]="videoChannel.nameWithHost" (click)="activateCopiedMessage()"
+          <div class="actor-name">
+            <span>{{ videoChannel.nameWithHost }}</span>
+            <button [cdkCopyToClipboard]="videoChannel.nameWithHostForced" (click)="activateCopiedMessage()"
                     class="btn btn-outline-secondary btn-sm copy-button"
             >
               <span class="glyphicon glyphicon-copy"></span>
             </button>
           </div>
+        </div>
 
-          <div class="right-buttons">
-            <a *ngIf="isChannelManageable" [routerLink]="[ '/my-account/video-channels/update', videoChannel.nameWithHost ]" class="btn btn-outline-tertiary mr-2" i18n>Manage</a>
-            <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
-          </div>
+        <div class="right-buttons">
+          <a *ngIf="isChannelManageable && !isInSmallView" [routerLink]="[ '/my-account/video-channels/update', videoChannel.nameWithHost ]" class="btn btn-outline-tertiary mr-2" i18n>
+            Manage channel
+          </a>
+          <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
         </div>
-        <div class="actor-followers" i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
 
-        <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Go the owner account page" class="actor-owner">
-          <span i18n>Created by {{ videoChannel.ownerBy }}</span>
-          <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
-        </a>
+        <div class="actor-lower">
+          <div class="actor-followers" i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
+
+          <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Go the owner account page" class="actor-owner">
+            <span class="d-inline-flex"><span i18n class="d-none d-sm-block mr-1">Created by</span>{{ videoChannel.ownerBy }}</span>
+            <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
+          </a>
+        </div>
       </div>
     </div>
 
-    <div class="links">
-      <a i18n routerLink="videos" routerLinkActive="active" class="title-page">Videos</a>
-      <a i18n routerLink="video-playlists" routerLinkActive="active" class="title-page">Video playlists</a>
-      <a i18n routerLink="about" routerLinkActive="active" class="title-page">About</a>
+    <div class="links w-100">
+      <ng-template #linkTemplate let-item="item">
+        <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
+      </ng-template>
+
+      <list-overflow [items]="links" [itemTemplate]="linkTemplate"></list-overflow>
     </div>
   </div>
 
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 50b69e7ac..0a49f53cf 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -1,3 +1,9 @@
+// Bootstrap grid utilities require functions, variables and mixins
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+@import 'node_modules/bootstrap/scss/grid';
+
 @import '_variables';
 @import '_mixins';
 
@@ -8,6 +14,21 @@
     width: 100%;
   }
 
+  .actor-info {
+    display: grid !important;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: 1fr auto / 1fr auto;
+    grid-template-areas: "name buttons" "lower buttons";
+
+    @include media-breakpoint-down(lg) {
+      grid-template-areas: "name name" "lower buttons";
+    }
+  }
+
+  .actor-names {
+    grid-area: name;
+  }
+
   .actor-name {
     flex-grow: 1;
 
@@ -23,7 +44,19 @@
   display: flex;
   height: max-content;
   margin-left: auto;
-  margin-top: 20px;
+  margin-top: 10px;
+
+  grid-row: buttons-start / span buttons-end;
+  grid-column: buttons-start;
+
+  @include media-breakpoint-down(lg) {
+    flex-flow: column-reverse;
+
+    a {
+      margin-top: 0.25rem;
+      margin-right: 0 !important;
+    }
+  }
 
   a {
     @include peertube-button-outline;
@@ -33,4 +66,17 @@
   my-subscribe-button {
     height: min-content;
   }
-}
\ No newline at end of file
+}
+
+@media screen and (max-width: $mobile-view) {
+  .sub-menu {
+    .actor {
+      flex-direction: column;
+
+      .actor-info .actor-names {
+        flex-direction: column;
+        align-items: normal;
+      }
+    }
+  }
+}
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
index 7b335b13f..a3563c747 100644
--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@@ -9,16 +9,19 @@ import { AuthService, Notifier } from '@app/core'
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ListOverflowItem } from '@app/shared/misc/list-overflow.component'
+import { ScreenService } from '@app/shared/misc/screen.service'
 
 @Component({
   templateUrl: './video-channels.component.html',
   styleUrls: [ './video-channels.component.scss' ]
 })
 export class VideoChannelsComponent implements OnInit, OnDestroy {
-  @ViewChild('subscribeButton', { static: false }) subscribeButton: SubscribeButtonComponent
+  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
 
   videoChannel: VideoChannel
   hotkeys: Hotkey[]
+  links: ListOverflowItem[] = []
   isChannelManageable = false
 
   private routeSub: Subscription
@@ -30,7 +33,8 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
     private authService: AuthService,
     private videoChannelService: VideoChannelService,
     private restExtractor: RestExtractor,
-    private hotkeysService: HotkeysService
+    private hotkeysService: HotkeysService,
+    private screenService: ScreenService
   ) { }
 
   ngOnInit () {
@@ -62,6 +66,12 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
       }, undefined, this.i18n('Subscribe to the account'))
     ]
     if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys)
+
+    this.links = [
+      { label: this.i18n('VIDEOS'), routerLink: 'videos' },
+      { label: this.i18n('VIDEO PLAYLISTS'), routerLink: 'video-playlists' },
+      { label: this.i18n('ABOUT'), routerLink: 'about' }
+    ]
   }
 
   ngOnDestroy () {
@@ -71,6 +81,10 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
     if (this.isUserLoggedIn()) this.hotkeysService.remove(this.hotkeys)
   }
 
+  get isInSmallView () {
+    return this.screenService.isInSmallView()
+  }
+
   isUserLoggedIn () {
     return this.authService.isLoggedIn()
   }
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index b5a677d15..a87f4ce1b 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -4,10 +4,13 @@ import { RouteReuseStrategy, RouterModule, Routes } from '@angular/router'
 import { PreloadSelectedModulesList } from './core'
 import { AppComponent } from '@app/app.component'
 import { CustomReuseStrategy } from '@app/core/routing/custom-reuse-strategy'
+import { MenuGuards } from '@app/core/routing/menu-guard.service'
 
 const routes: Routes = [
   {
     path: 'admin',
+    canActivate: [ MenuGuards.close() ],
+    canDeactivate: [ MenuGuards.open() ],
     loadChildren: () => import('./+admin/admin.module').then(m => m.AdminModule)
   },
   {
@@ -54,6 +57,7 @@ const routes: Routes = [
     })
   ],
   providers: [
+    MenuGuards.guards,
     PreloadSelectedModulesList,
     { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }
   ],
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 2660c5377..b0d2e5050 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -2,36 +2,31 @@
 
 <my-hotkeys-cheatsheet></my-hotkeys-cheatsheet>
 
-<div [ngClass]="{ 'user-logged-in': isUserLoggedIn(), 'user-not-logged-in': !isUserLoggedIn() }">
+<div class="peertube-container" [ngClass]="{ 'user-logged-in': isUserLoggedIn(), 'user-not-logged-in': !isUserLoggedIn() }">
   <div class="header">
 
-    <div class="top-left-block" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }">
-      <span class="icon icon-menu" (click)="toggleMenu()"></span>
+    <div class="top-left-block">
+      <span class="icon icon-menu" (click)="menu.toggleMenu()"></span>
 
-      <a class="peertube-title" [routerLink]="defaultRoute" title="Homepage">
+      <a class="peertube-title" [routerLink]="defaultRoute" title="Homepage" i18n-title>
         <span class="icon icon-logo"></span>
         <span class="instance-name">{{ instanceName }}</span>
       </a>
     </div>
 
-    <div class="header-right" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }">
-      <my-header></my-header>
+    <div class="header-right">
+      <my-header class="w-100 d-flex justify-content-end"></my-header>
     </div>
   </div>
 
   <div class="sub-header-container">
-    <my-menu *ngIf="isMenuDisplayed"></my-menu>
+    <my-menu *ngIf="menu.isMenuDisplayed"></my-menu>
 
-    <div id="content" tabindex="-1" class="main-col container-fluid" [ngClass]="{ expanded: isMenuDisplayed === false }">
+    <div id="content" tabindex="-1" class="main-col" [ngClass]="{ expanded: menu.isMenuDisplayed === false }">
 
       <div class="main-row">
         <router-outlet></router-outlet>
       </div>
-
-      <footer class="row">
-        <a href="https://joinpeertube.org" title="PeerTube website" target="_blank" rel="noopener noreferrer" i18n>Powered by PeerTube</a>&nbsp;-&nbsp;
-        <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE" title="PeerTube license" target="_blank" rel="noopener noreferrer">CopyLeft 2015-2020</a>
-      </footer>
     </div>
   </div>
 </div>
@@ -59,3 +54,5 @@
   <my-welcome-modal #welcomeModal></my-welcome-modal>
   <my-instance-config-warning-modal #instanceConfigWarningModal></my-instance-config-warning-modal>
 </ng-template>
+
+<my-custom-modal #customModal></my-custom-modal>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 51a7a3dd1..0c33dc4a1 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -1,6 +1,10 @@
 @import '_variables';
 @import '_mixins';
 
+.peertube-container {
+  padding-bottom: 20px;
+}
+
 .main-row {
   min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
 }
@@ -8,6 +12,7 @@
 .sub-header-container {
   margin-top: $header-height;
   background-color: var(--mainBackgroundColor);
+  width: 100%;
 }
 
 .header {
@@ -16,12 +21,12 @@
   top: 0;
   width: 100%;
   background-color: var(--mainBackgroundColor);
-  z-index: 1000;
+  z-index: z(header);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
   display: flex;
 
   .top-left-block {
-    z-index: 1001;
+    z-index: 1;
     height: $header-height;
     display: flex;
     align-items: center;
@@ -61,7 +66,7 @@
       }
     }
 
-    @media screen and (max-width: 500px) {
+    @media screen and (max-width: $mobile-view) {
       width: 70px;
 
       .peertube-title {
@@ -83,11 +88,3 @@
     flex: 1;
   }
 }
-
-footer {
-  padding: 10px 0;
-  font-size: 11px;
-  margin-top: $footer-margin;
-  height: $footer-height;
-  justify-content: center;
-}
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 03eb83cb8..12c0efd8a 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,13 +1,12 @@
-import { Component, OnInit, ViewChild } from '@angular/core'
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
 import { Event, GuardsCheckStart, NavigationEnd, Router, Scroll } from '@angular/router'
 import { AuthService, RedirectService, ServerService, ThemeService } from '@app/core'
 import { is18nPath } from '../../../shared/models/i18n'
 import { ScreenService } from '@app/shared/misc/screen.service'
-import { debounceTime, filter, map, pairwise } from 'rxjs/operators'
+import { filter, map, pairwise } from 'rxjs/operators'
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { fromEvent } from 'rxjs'
 import { PlatformLocation, ViewportScroller } from '@angular/common'
 import { PluginService } from '@app/core/plugins/plugin.service'
 import { HooksService } from '@app/core/plugins/hooks.service'
@@ -15,21 +14,21 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { POP_STATE_MODAL_DISMISS } from '@app/shared/misc/constants'
 import { WelcomeModalComponent } from '@app/modal/welcome-modal.component'
 import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component'
+import { CustomModalComponent } from '@app/modal/custom-modal.component'
 import { ServerConfig, UserRole } from '@shared/models'
 import { User } from '@app/shared'
 import { InstanceService } from '@app/shared/instance/instance.service'
+import { MenuService } from './core/menu/menu.service'
 
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.scss' ]
 })
-export class AppComponent implements OnInit {
-  @ViewChild('welcomeModal', { static: false }) welcomeModal: WelcomeModalComponent
-  @ViewChild('instanceConfigWarningModal', { static: false }) instanceConfigWarningModal: InstanceConfigWarningModalComponent
-
-  isMenuDisplayed = true
-  isMenuChangedByUser = false
+export class AppComponent implements OnInit, AfterViewInit {
+  @ViewChild('welcomeModal') welcomeModal: WelcomeModalComponent
+  @ViewChild('instanceConfigWarningModal') instanceConfigWarningModal: InstanceConfigWarningModalComponent
+  @ViewChild('customModal') customModal: CustomModalComponent
 
   customCSS: SafeHtml
 
@@ -50,7 +49,8 @@ export class AppComponent implements OnInit {
     private themeService: ThemeService,
     private hooks: HooksService,
     private location: PlatformLocation,
-    private modalService: NgbModal
+    private modalService: NgbModal,
+    public menu: MenuService
   ) { }
 
   get instanceName () {
@@ -78,37 +78,23 @@ export class AppComponent implements OnInit {
       this.authService.refreshUserInformation()
     }
 
-    // Do not display menu on small screens
-    if (this.screenService.isInSmallView()) {
-      this.isMenuDisplayed = false
-    }
-
     this.initRouteEvents()
     this.injectJS()
     this.injectCSS()
 
     this.initHotkeys()
 
-    fromEvent(window, 'resize')
-      .pipe(debounceTime(200))
-      .subscribe(() => this.onResize())
-
     this.location.onPopState(() => this.modalService.dismissAll(POP_STATE_MODAL_DISMISS))
 
     this.openModalsIfNeeded()
   }
 
-  isUserLoggedIn () {
-    return this.authService.isLoggedIn()
-  }
-
-  toggleMenu () {
-    this.isMenuDisplayed = !this.isMenuDisplayed
-    this.isMenuChangedByUser = true
+  ngAfterViewInit () {
+    this.pluginService.initializeCustomModal(this.customModal)
   }
 
-  onResize () {
-    this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
+  isUserLoggedIn () {
+    return this.authService.isLoggedIn()
   }
 
   private initRouteEvents () {
@@ -176,7 +162,7 @@ export class AppComponent implements OnInit {
     eventsObs.pipe(
       filter((e: Event): e is GuardsCheckStart => e instanceof GuardsCheckStart),
       filter(() => this.screenService.isInSmallView())
-    ).subscribe(() => this.isMenuDisplayed = false) // User clicked on a link in the menu, change the page
+    ).subscribe(() => this.menu.isMenuDisplayed = false) // User clicked on a link in the menu, change the page
   }
 
   private injectJS () {
@@ -249,7 +235,7 @@ export class AppComponent implements OnInit {
       }, undefined, this.i18n('Focus the search bar')),
 
       new Hotkey('b', (event: KeyboardEvent): boolean => {
-        this.toggleMenu()
+        this.menu.toggleMenu()
         return false
       }, undefined, this.i18n('Toggle the left menu')),
 
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index dda705811..5a3b109da 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -4,22 +4,23 @@ import { ServerService } from '@app/core'
 import { ResetPasswordModule } from '@app/reset-password'
 
 import { MetaLoader, MetaModule, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core'
-import { ClipboardModule } from 'ngx-clipboard'
 import 'focus-visible'
 
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
 import { CoreModule } from './core'
-import { HeaderComponent } from './header'
+import { HeaderComponent, SearchTypeaheadComponent, SuggestionsComponent, SuggestionComponent } from './header'
 import { LoginModule } from './login'
 import { AvatarNotificationComponent, LanguageChooserComponent, MenuComponent } from './menu'
 import { SharedModule } from './shared'
 import { VideosModule } from './videos'
-import { buildFileLocale, getCompleteLocale, isDefaultLocale } from '../../../shared/models/i18n'
-import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
 import { SearchModule } from '@app/search'
 import { WelcomeModalComponent } from '@app/modal/welcome-modal.component'
 import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component'
+import { buildFileLocale, getCompleteLocale, isDefaultLocale } from '@shared/models'
+import { APP_BASE_HREF } from '@angular/common'
+import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
+import { CustomModalComponent } from '@app/modal/custom-modal.component'
 
 export function metaFactory (serverService: ServerService): MetaLoader {
   return new MetaStaticLoader({
@@ -40,16 +41,19 @@ export function metaFactory (serverService: ServerService): MetaLoader {
 
     MenuComponent,
     LanguageChooserComponent,
+    QuickSettingsModalComponent,
     AvatarNotificationComponent,
     HeaderComponent,
+    SearchTypeaheadComponent,
+    SuggestionsComponent,
+    SuggestionComponent,
 
+    CustomModalComponent,
     WelcomeModalComponent,
     InstanceConfigWarningModalComponent
   ],
   imports: [
     BrowserModule,
-    // FIXME: https://github.com/maxisam/ngx-clipboard/issues/133
-    ClipboardModule,
 
     CoreModule,
     SharedModule,
@@ -69,22 +73,22 @@ export function metaFactory (serverService: ServerService): MetaLoader {
 
     AppRoutingModule // Put it after all the module because it has the 404 route
   ],
+
   providers: [
     {
+      provide: APP_BASE_HREF,
+      useValue: '/'
+    },
+
+    {
       provide: TRANSLATIONS,
       useFactory: (locale: string) => {
-        // On dev mode, test localization
-        if (isOnDevLocale()) {
-          locale = buildFileLocale(getDevLocale())
-          return require(`raw-loader!../locale/angular.${locale}.xlf`)
-        }
-
         // Default locale, nothing to translate
         const completeLocale = getCompleteLocale(locale)
         if (isDefaultLocale(completeLocale)) return ''
 
         const fileLocale = buildFileLocale(locale)
-        return require(`raw-loader!../locale/angular.${fileLocale}.xlf`)
+        return require(`raw-loader!../locale/angular.${fileLocale}.xlf`).default
       },
       deps: [ LOCALE_ID ]
     },
diff --git a/client/src/app/core/auth/auth-user.model.ts b/client/src/app/core/auth/auth-user.model.ts
index 1447daead..4ad904beb 100644
--- a/client/src/app/core/auth/auth-user.model.ts
+++ b/client/src/app/core/auth/auth-user.model.ts
@@ -67,17 +67,6 @@ class Tokens {
 }
 
 export class AuthUser extends User implements ServerMyUserModel {
-  private static KEYS = {
-    ID: 'id',
-    ROLE: 'role',
-    EMAIL: 'email',
-    VIDEOS_HISTORY_ENABLED: 'videos-history-enabled',
-    USERNAME: 'username',
-    NSFW_POLICY: 'nsfw_policy',
-    WEBTORRENT_ENABLED: 'peertube-videojs-' + 'webtorrent_enabled',
-    AUTO_PLAY_VIDEO: 'auto_play_video'
-  }
-
   tokens: Tokens
   specialPlaylists: MyUserSpecialPlaylist[]
 
@@ -106,10 +95,6 @@ export class AuthUser extends User implements ServerMyUserModel {
     peertubeLocalStorage.removeItem(this.KEYS.USERNAME)
     peertubeLocalStorage.removeItem(this.KEYS.ID)
     peertubeLocalStorage.removeItem(this.KEYS.ROLE)
-    peertubeLocalStorage.removeItem(this.KEYS.NSFW_POLICY)
-    peertubeLocalStorage.removeItem(this.KEYS.WEBTORRENT_ENABLED)
-    peertubeLocalStorage.removeItem(this.KEYS.VIDEOS_HISTORY_ENABLED)
-    peertubeLocalStorage.removeItem(this.KEYS.AUTO_PLAY_VIDEO)
     peertubeLocalStorage.removeItem(this.KEYS.EMAIL)
     Tokens.flush()
   }
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index 9ae008e39..de8c509d1 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -29,6 +29,7 @@ type UserLoginWithUserInformation = UserLoginWithUsername & User
 export class AuthService {
   private static BASE_CLIENT_URL = environment.apiUrl + '/api/v1/oauth-clients/local'
   private static BASE_TOKEN_URL = environment.apiUrl + '/api/v1/users/token'
+  private static BASE_REVOKE_TOKEN_URL = environment.apiUrl + '/api/v1/users/revoke-token'
   private static BASE_USER_INFORMATION_URL = environment.apiUrl + '/api/v1/users/me'
   private static LOCAL_STORAGE_OAUTH_CLIENT_KEYS = {
     CLIENT_ID: 'client_id',
@@ -145,7 +146,7 @@ export class AuthService {
     return !!this.getAccessToken()
   }
 
-  login (username: string, password: string) {
+  login (username: string, password: string, token?: string) {
     // Form url encoded
     const body = {
       client_id: this.clientId,
@@ -157,6 +158,8 @@ export class AuthService {
       password
     }
 
+    if (token) Object.assign(body, { externalAuthToken: token })
+
     const headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
     return this.http.post<UserLogin>(AuthService.BASE_TOKEN_URL, objectToUrlEncoded(body), { headers })
                .pipe(
@@ -168,7 +171,16 @@ export class AuthService {
   }
 
   logout () {
-    // TODO: make an HTTP request to revoke the tokens
+    const authHeaderValue = this.getRequestHeaderValue()
+    const headers = new HttpHeaders().set('Authorization', authHeaderValue)
+
+    this.http.post<void>(AuthService.BASE_REVOKE_TOKEN_URL, {}, { headers })
+    .subscribe(
+      () => { /* nothing to do */ },
+
+      err => console.error(err)
+    )
+
     this.user = null
 
     AuthUser.flush()
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index 5943af4da..a1734ad80 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -13,6 +13,7 @@ import { throwIfAlreadyLoaded } from './module-import-guard'
 import { LoginGuard, RedirectService, UserRightGuard } from './routing'
 import { ServerService } from './server'
 import { ThemeService } from './theme'
+import { MenuService } from './menu'
 import { HotkeyModule } from 'angular2-hotkeys'
 import { CheatSheetComponent } from './hotkeys'
 import { ToastModule } from 'primeng/toast'
@@ -59,6 +60,7 @@ import { HooksService } from '@app/core/plugins/hooks.service'
     ConfirmService,
     ServerService,
     ThemeService,
+    MenuService,
     LoginGuard,
     UserRightGuard,
     UnloggedGuard,
diff --git a/client/src/app/core/hotkeys/hotkeys.component.scss b/client/src/app/core/hotkeys/hotkeys.component.scss
index 3aa0b6252..a970260c9 100644
--- a/client/src/app/core/hotkeys/hotkeys.component.scss
+++ b/client/src/app/core/hotkeys/hotkeys.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .cfp-hotkeys-container {
   display: flex !important;
   align-items: center;
@@ -23,7 +26,7 @@
 }
 
 .cfp-hotkeys-container.fade.in {
-  z-index: 10002;
+  z-index: z(hotkeys);
   visibility: visible;
   opacity: 1;
 }
@@ -91,7 +94,7 @@
   cursor: pointer;
 }
 
-@media all and (max-width: 500px) {
+@media all and (max-width: $mobile-view) {
   .cfp-hotkeys {
     font-size: 0.8em;
   }
diff --git a/client/src/app/core/menu/index.ts b/client/src/app/core/menu/index.ts
new file mode 100644
index 000000000..516a49aca
--- /dev/null
+++ b/client/src/app/core/menu/index.ts
@@ -0,0 +1 @@
+export * from './menu.service'
diff --git a/client/src/app/core/menu/menu.service.ts b/client/src/app/core/menu/menu.service.ts
new file mode 100644
index 000000000..ecb2bceb7
--- /dev/null
+++ b/client/src/app/core/menu/menu.service.ts
@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core'
+import { ScreenService } from '@app/shared/misc/screen.service'
+import { fromEvent } from 'rxjs'
+import { debounceTime } from 'rxjs/operators'
+
+@Injectable()
+export class MenuService {
+  isMenuDisplayed = true
+  isMenuChangedByUser = false
+
+  constructor (
+    private screenService: ScreenService
+  ) {
+    // Do not display menu on small screens
+    if (this.screenService.isInSmallView()) {
+      this.isMenuDisplayed = false
+    }
+
+    fromEvent(window, 'resize')
+      .pipe(debounceTime(200))
+      .subscribe(() => this.onResize())
+  }
+
+  toggleMenu () {
+    this.isMenuDisplayed = !this.isMenuDisplayed
+    this.isMenuChangedByUser = true
+  }
+
+  onResize () {
+    this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
+  }
+}
diff --git a/client/src/app/core/plugins/hooks.service.ts b/client/src/app/core/plugins/hooks.service.ts
index a6a444c32..2fbf406d1 100644
--- a/client/src/app/core/plugins/hooks.service.ts
+++ b/client/src/app/core/plugins/hooks.service.ts
@@ -1,9 +1,8 @@
+import { from, Observable } from 'rxjs'
+import { mergeMap, switchMap } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { PluginService } from '@app/core/plugins/plugin.service'
 import { ClientActionHookName, ClientFilterHookName } from '@shared/models/plugins/client-hook.model'
-import { from, Observable } from 'rxjs'
-import { mergeMap, switchMap } from 'rxjs/operators'
-import { ServerService } from '@app/core/server'
 import { PluginClientScope } from '@shared/models/plugins/plugin-client-scope.type'
 
 type RawFunction<U, T> = (params: U) => T
@@ -11,10 +10,7 @@ type ObservableFunction<U, T> = RawFunction<U, Observable<T>>
 
 @Injectable()
 export class HooksService {
-  constructor (
-    private server: ServerService,
-    private pluginService: PluginService
-  ) { }
+  constructor (private pluginService: PluginService) { }
 
   wrapObsFun
     <P, R, H1 extends ClientFilterHookName, H2 extends ClientFilterHookName>
diff --git a/client/src/app/core/plugins/plugin.service.ts b/client/src/app/core/plugins/plugin.service.ts
index da5114048..c6efcac6d 100644
--- a/client/src/app/core/plugins/plugin.service.ts
+++ b/client/src/app/core/plugins/plugin.service.ts
@@ -13,13 +13,16 @@ import { PluginClientScope } from '@shared/models/plugins/plugin-client-scope.ty
 import { RegisterClientHookOptions } from '@shared/models/plugins/register-client-hook.model'
 import { HttpClient } from '@angular/common/http'
 import { AuthService } from '@app/core/auth'
+import { Notifier } from '@app/core/notification'
 import { RestExtractor } from '@app/shared/rest'
+import { MarkdownService } from '@app/shared/renderer'
 import { PluginType } from '@shared/models/plugins/plugin.type'
 import { PublicServerSetting } from '@shared/models/plugins/public-server.setting'
 import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
 import { RegisterClientHelpers } from '../../../types/register-client-option.model'
 import { PluginTranslation } from '@shared/models/plugins/plugin-translation.model'
 import { importModule } from '@app/shared/misc/utils'
+import { CustomModalComponent } from '@app/modal/custom-modal.component'
 
 interface HookStructValue extends RegisterClientHookOptions {
   plugin: ServerConfigPlugin
@@ -44,11 +47,14 @@ export class PluginService implements ClientHook {
     common: new ReplaySubject<boolean>(1),
     search: new ReplaySubject<boolean>(1),
     'video-watch': new ReplaySubject<boolean>(1),
-    signup: new ReplaySubject<boolean>(1)
+    signup: new ReplaySubject<boolean>(1),
+    login: new ReplaySubject<boolean>(1)
   }
 
   translationsObservable: Observable<PluginTranslation>
 
+  customModal: CustomModalComponent
+
   private plugins: ServerConfigPlugin[] = []
   private scopes: { [ scopeName: string ]: PluginInfo[] } = {}
   private loadedScripts: { [ script: string ]: boolean } = {}
@@ -60,6 +66,8 @@ export class PluginService implements ClientHook {
   constructor (
     private router: Router,
     private authService: AuthService,
+    private notifier: Notifier,
+    private markdownRenderer: MarkdownService,
     private server: ServerService,
     private zone: NgZone,
     private authHttp: HttpClient,
@@ -80,6 +88,10 @@ export class PluginService implements ClientHook {
       })
   }
 
+  initializeCustomModal (customModal: CustomModalComponent) {
+    this.customModal = customModal
+  }
+
   ensurePluginsAreBuilt () {
     return this.pluginsBuilt.asObservable()
                .pipe(first(), shareReplay())
@@ -272,6 +284,32 @@ export class PluginService implements ClientHook {
         return this.authService.isLoggedIn()
       },
 
+      notifier: {
+        info: (text: string, title?: string, timeout?: number) => this.notifier.info(text, title, timeout),
+        error: (text: string, title?: string, timeout?: number) => this.notifier.error(text, title, timeout),
+        success: (text: string, title?: string, timeout?: number) => this.notifier.success(text, title, timeout)
+      },
+
+      showModal: (input: {
+        title: string,
+        content: string,
+        close?: boolean,
+        cancel?: { value: string, action?: () => void },
+        confirm?: { value: string, action?: () => void }
+      }) => {
+        this.customModal.show(input)
+      },
+
+      markdownRenderer: {
+        textMarkdownToHTML: (textMarkdown: string) => {
+          return this.markdownRenderer.textMarkdownToHTML(textMarkdown)
+        },
+
+        enhancedMarkdownToHTML: (enhancedMarkdown: string) => {
+          return this.markdownRenderer.enhancedMarkdownToHTML(enhancedMarkdown)
+        }
+      },
+
       translate: (value: string) => {
         return this.translationsObservable
             .pipe(map(allTranslations => allTranslations[npmName]))
diff --git a/client/src/app/core/routing/custom-reuse-strategy.ts b/client/src/app/core/routing/custom-reuse-strategy.ts
index a9f61acec..c0f9f04e0 100644
--- a/client/src/app/core/routing/custom-reuse-strategy.ts
+++ b/client/src/app/core/routing/custom-reuse-strategy.ts
@@ -1,5 +1,7 @@
 import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router'
+import { Injectable } from '@angular/core'
 
+@Injectable()
 export class CustomReuseStrategy implements RouteReuseStrategy {
   storedRouteHandles = new Map<string, DetachedRouteHandle>()
   recentlyUsed: string
@@ -76,6 +78,6 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
   }
 
   private isReuseEnabled (route: ActivatedRouteSnapshot) {
-    return route.data.reuse && route.data.reuse.enabled && route.queryParams['a-state']
+    return route.data.reuse && route.data.reuse.enabled && route.queryParams[ 'a-state' ]
   }
 }
diff --git a/client/src/app/core/routing/index.ts b/client/src/app/core/routing/index.ts
index 9f0b4eac5..58b83bb2a 100644
--- a/client/src/app/core/routing/index.ts
+++ b/client/src/app/core/routing/index.ts
@@ -2,3 +2,4 @@ export * from './login-guard.service'
 export * from './user-right-guard.service'
 export * from './preload-selected-modules-list'
 export * from './redirect.service'
+export * from './menu-guard.service'
diff --git a/client/src/app/core/routing/menu-guard.service.ts b/client/src/app/core/routing/menu-guard.service.ts
new file mode 100644
index 000000000..907d145fd
--- /dev/null
+++ b/client/src/app/core/routing/menu-guard.service.ts
@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core'
+import { CanActivate, CanDeactivate } from '@angular/router'
+import { MenuService } from '@app/core/menu'
+import { ScreenService } from '@app/shared/misc/screen.service'
+
+abstract class MenuGuard implements CanActivate, CanDeactivate<any> {
+  display = true
+  canDeactivate = this.canActivate
+
+  constructor (protected menu: MenuService, protected screen: ScreenService, display: boolean) {
+    this.display = display
+  }
+
+  canActivate (): boolean {
+    // small screens already have the site-wide onResize from screenService
+    // > medium screens have enough space to fit the administrative menus
+    if (!this.screen.isInMobileView() && this.screen.isInMediumView()) {
+      this.menu.isMenuDisplayed = this.display
+    }
+    return true
+  }
+}
+
+@Injectable()
+export class OpenMenuGuard extends MenuGuard {
+  constructor (menu: MenuService, screen: ScreenService) { super(menu, screen, true) }
+}
+
+@Injectable()
+export class CloseMenuGuard extends MenuGuard {
+  constructor (menu: MenuService, screen: ScreenService) { super(menu, screen, false) }
+}
+
+@Injectable()
+export class MenuGuards {
+  public static guards = [
+    OpenMenuGuard,
+    CloseMenuGuard
+  ]
+
+  static open () {
+    return OpenMenuGuard
+  }
+
+  static close () {
+    return CloseMenuGuard
+  }
+}
diff --git a/client/src/app/core/routing/preload-selected-modules-list.ts b/client/src/app/core/routing/preload-selected-modules-list.ts
index 3bca60317..64af68225 100644
--- a/client/src/app/core/routing/preload-selected-modules-list.ts
+++ b/client/src/app/core/routing/preload-selected-modules-list.ts
@@ -1,7 +1,9 @@
-import { Observable, timer as observableTimer, of as ofObservable } from 'rxjs'
+import { Observable, of as ofObservable, timer as observableTimer } from 'rxjs'
 import { switchMap } from 'rxjs/operators'
 import { PreloadingStrategy, Route } from '@angular/router'
+import { Injectable } from '@angular/core'
 
+@Injectable()
 export class PreloadSelectedModulesList implements PreloadingStrategy {
   preload (route: Route, load: Function): Observable<any> {
     if (!route.data || !route.data.preload) return ofObservable(null)
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 3997ce6db..eac8f85e4 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -9,6 +9,7 @@ import { VideoConstant } from '../../../../../shared/models/videos'
 import { isDefaultLocale, peertubeTranslate } from '../../../../../shared/models/i18n'
 import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
 import { sortBy } from '@app/shared/misc/utils'
+import { ServerStats } from '@shared/models/server'
 
 @Injectable()
 export class ServerService {
@@ -16,6 +17,8 @@ export class ServerService {
   private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/'
   private static BASE_VIDEO_PLAYLIST_URL = environment.apiUrl + '/api/v1/video-playlists/'
   private static BASE_LOCALE_URL = environment.apiUrl + '/client/locales/'
+  private static BASE_STATS_URL = environment.apiUrl + '/api/v1/server/stats'
+
   private static CONFIG_LOCAL_STORAGE_KEY = 'server-config'
 
   configReloaded = new Subject<void>()
@@ -44,8 +47,16 @@ export class ServerService {
         css: ''
       }
     },
+    search: {
+      remoteUri: {
+        users: true,
+        anonymous: false
+      }
+    },
     plugin: {
-      registered: []
+      registered: [],
+      registeredExternalAuths: [],
+      registeredIdAndPassAuths: []
     },
     theme: {
       registered: [],
@@ -238,6 +249,10 @@ export class ServerService {
     return this.localeObservable.pipe(first())
   }
 
+  getServerStats () {
+    return this.http.get<ServerStats>(ServerService.BASE_STATS_URL)
+  }
+
   private loadAttributeEnum <T extends string | number> (
     baseUrl: string,
     attributeName: 'categories' | 'licences' | 'languages' | 'privacies',
@@ -250,17 +265,19 @@ export class ServerService {
                               .pipe(map(data => ({ data, translations })))
                  }),
                  map(({ data, translations }) => {
-                   const hashToPopulate: VideoConstant<T>[] = []
-
-                   Object.keys(data)
-                         .forEach(dataKey => {
-                           const label = data[ dataKey ]
-
-                           hashToPopulate.push({
-                             id: (attributeName === 'languages' ? dataKey : parseInt(dataKey, 10)) as T,
-                             label: peertubeTranslate(label, translations)
-                           })
-                         })
+                   const hashToPopulate: VideoConstant<T>[] = Object.keys(data)
+                                                                    .map(dataKey => {
+                                                                      const label = data[ dataKey ]
+
+                                                                      const id = attributeName === 'languages'
+                                                                        ? dataKey as T
+                                                                        : parseInt(dataKey, 10) as T
+
+                                                                      return {
+                                                                        id,
+                                                                        label: peertubeTranslate(label, translations)
+                                                                      }
+                                                                    })
 
                    if (sort === true) sortBy(hashToPopulate, 'label')
 
diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts
index 2c5873cb3..c0189ad32 100644
--- a/client/src/app/core/theme/theme.service.ts
+++ b/client/src/app/core/theme/theme.service.ts
@@ -4,16 +4,14 @@ import { ServerService } from '@app/core/server'
 import { environment } from '../../../environments/environment'
 import { PluginService } from '@app/core/plugins/plugin.service'
 import { ServerConfig, ServerConfigTheme } from '@shared/models'
-import { peertubeLocalStorage } from '@app/shared/misc/peertube-web-storage'
 import { first } from 'rxjs/operators'
+import { User } from '@app/shared/users/user.model'
+import { UserService } from '@app/shared/users/user.service'
+import { LocalStorageService } from '@app/shared/misc/storage.service'
 
 @Injectable()
 export class ThemeService {
 
-  private static KEYS = {
-    LAST_ACTIVE_THEME: 'last_active_theme'
-  }
-
   private oldThemeName: string
   private themes: ServerConfigTheme[] = []
 
@@ -24,8 +22,10 @@ export class ThemeService {
 
   constructor (
     private auth: AuthService,
+    private userService: UserService,
     private pluginService: PluginService,
-    private server: ServerService
+    private server: ServerService,
+    private localStorageService: LocalStorageService
   ) {}
 
   initialize () {
@@ -77,11 +77,11 @@ export class ThemeService {
   private getCurrentTheme () {
     if (this.themeFromLocalStorage) return this.themeFromLocalStorage.name
 
-    if (this.auth.isLoggedIn()) {
-      const theme = this.auth.getUser().theme
-      if (theme !== 'instance-default') return theme
-    }
+    const theme = this.auth.isLoggedIn()
+      ? this.auth.getUser().theme
+      : this.userService.getAnonymousUser().theme
 
+    if (theme !== 'instance-default') return theme
     return this.serverConfig.theme.default
   }
 
@@ -111,9 +111,9 @@ export class ThemeService {
 
       this.pluginService.reloadLoadedScopes()
 
-      peertubeLocalStorage.setItem(ThemeService.KEYS.LAST_ACTIVE_THEME, JSON.stringify(theme))
+      this.localStorageService.setItem(User.KEYS.THEME, JSON.stringify(theme), false)
     } else {
-      peertubeLocalStorage.removeItem(ThemeService.KEYS.LAST_ACTIVE_THEME)
+      this.localStorageService.removeItem(User.KEYS.THEME, false)
     }
 
     this.oldThemeName = currentTheme
@@ -126,6 +126,10 @@ export class ThemeService {
 
     if (!this.auth.isLoggedIn()) {
       this.updateCurrentTheme()
+
+      this.localStorageService.watch([User.KEYS.THEME]).subscribe(
+        () => this.updateCurrentTheme()
+      )
     }
 
     this.auth.userInformationLoaded
@@ -134,7 +138,7 @@ export class ThemeService {
   }
 
   private loadAndSetFromLocalStorage () {
-    const lastActiveThemeString = peertubeLocalStorage.getItem(ThemeService.KEYS.LAST_ACTIVE_THEME)
+    const lastActiveThemeString = this.localStorageService.getItem(User.KEYS.THEME)
     if (!lastActiveThemeString) return
 
     try {
diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index 4fd18f9bd..49e219187 100644
--- a/client/src/app/header/header.component.html
+++ b/client/src/app/header/header.component.html
@@ -1,8 +1,4 @@
-<input
-  type="text" id="search-video" name="search-video" [attr.aria-label]="ariaLabelTextForSearch" i18n-placeholder placeholder="Search videos, channels…"
-  [(ngModel)]="searchValue" (keyup.enter)="doSearch()"
->
-<span (click)="doSearch()" class="icon icon-search"></span>
+<my-search-typeahead class="w-100 d-flex justify-content-end"></my-search-typeahead>
 
 <a class="upload-button" routerLink="/videos/upload">
   <my-global-icon iconName="upload"></my-global-icon>
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index 2bbde74bc..91b390773 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -1,51 +1,8 @@
 @import '_variables';
 @import '_mixins';
 
-#search-video {
-  @include peertube-input-text($search-input-width);
-  padding-left: 10px;
+my-search-typeahead {
   margin-right: 15px;
-  padding-right: 40px; // For the search icon
-  font-size: 14px;
-
-  transition: box-shadow .3s ease;
-
-  /* light border style */
-  border: 1px solid var(--mainBackgroundColor);
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
-
-  &:focus {
-    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
-  }
-
-  &::placeholder {
-    color: var(--inputPlaceholderColor);
-  }
-
-  &:focus::placeholder {
-    opacity: 0 !important;
-  }
-
-  @media screen and (max-width: 800px) {
-    width: calc(100% - 150px);
-  }
-
-  @media screen and (max-width: 600px) {
-    width: calc(100% - 70px);
-  }
-}
-
-.icon.icon-search {
-  @include icon(25px);
-  height: 21px;
-
-  background-color: var(--mainForegroundColor);
-  mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
-
-  // yolo
-  position: absolute;
-  margin-left: -50px;
-  margin-top: 5px;
 }
 
 .upload-button {
@@ -56,10 +13,6 @@
   color: var(--mainBackgroundColor) !important;
   margin-right: 25px;
 
-  @media screen and (max-width: 800px) {
-    margin-right: 0;
-  }
-
   @media screen and (max-width: 600px) {
     margin-right: 10px;
     padding: 0 10px;
diff --git a/client/src/app/header/header.component.ts b/client/src/app/header/header.component.ts
index 92a7eded6..cce76b0d1 100644
--- a/client/src/app/header/header.component.ts
+++ b/client/src/app/header/header.component.ts
@@ -1,10 +1,4 @@
-import { filter, first, map, tap } from 'rxjs/operators'
-import { Component, OnInit } from '@angular/core'
-import { ActivatedRoute, NavigationEnd, Params, Router } from '@angular/router'
-import { getParameterByName } from '../shared/misc/utils'
-import { AuthService, Notifier, ServerService } from '@app/core'
-import { of } from 'rxjs'
-import { I18n } from '@ngx-translate/i18n-polyfill'
+import { Component } from '@angular/core'
 
 @Component({
   selector: 'my-header',
@@ -12,54 +6,4 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
   styleUrls: [ './header.component.scss' ]
 })
 
-export class HeaderComponent implements OnInit {
-  searchValue = ''
-  ariaLabelTextForSearch = ''
-
-  constructor (
-    private router: Router,
-    private route: ActivatedRoute,
-    private auth: AuthService,
-    private serverService: ServerService,
-    private authService: AuthService,
-    private notifier: Notifier,
-    private i18n: I18n
-  ) {}
-
-  ngOnInit () {
-    this.ariaLabelTextForSearch = this.i18n('Search videos, channels')
-
-    this.router.events
-        .pipe(
-          filter(e => e instanceof NavigationEnd),
-          map(() => getParameterByName('search', window.location.href))
-        )
-        .subscribe(searchQuery => this.searchValue = searchQuery || '')
-  }
-
-  doSearch () {
-    const queryParams: Params = {}
-
-    if (window.location.pathname === '/search' && this.route.snapshot.queryParams) {
-      Object.assign(queryParams, this.route.snapshot.queryParams)
-    }
-
-    Object.assign(queryParams, { search: this.searchValue })
-
-    const o = this.auth.isLoggedIn()
-      ? this.loadUserLanguagesIfNeeded(queryParams)
-      : of(true)
-
-    o.subscribe(() => this.router.navigate([ '/search' ], { queryParams }))
-  }
-
-  private loadUserLanguagesIfNeeded (queryParams: any) {
-    if (queryParams && queryParams.languageOneOf) return of(queryParams)
-
-    return this.auth.userInformationLoaded
-               .pipe(
-                 first(),
-                 tap(() => Object.assign(queryParams, { languageOneOf: this.auth.getUser().videoLanguages }))
-               )
-  }
-}
+export class HeaderComponent {}
diff --git a/client/src/app/header/index.ts b/client/src/app/header/index.ts
index d98d2d00a..a882d4d1f 100644
--- a/client/src/app/header/index.ts
+++ b/client/src/app/header/index.ts
@@ -1 +1,4 @@
 export * from './header.component'
+export * from './search-typeahead.component'
+export * from './suggestions.component'
+export * from './suggestion.component'
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html
new file mode 100644
index 000000000..710268664
--- /dev/null
+++ b/client/src/app/header/search-typeahead.component.html
@@ -0,0 +1,53 @@
+<div class="d-inline-flex position-relative" id="typeahead-container">
+  <input
+    type="text" id="search-video" name="search-video" #searchVideo i18n-placeholder placeholder="Search videos, channels…"
+    [(ngModel)]="search" (ngModelChange)="onSearchChange()" (keyup)="handleKey($event)" (keydown.enter)="doSearch()"
+  >
+  <span class="icon icon-search" (click)="doSearch()"></span>
+
+  <div class="position-absolute jump-to-suggestions">
+    <!-- suggestions -->
+    <my-suggestions *ngIf="search && newSearch" [results]="results" [highlight]="search" (init)="initKeyboardEventsManager($event)"></my-suggestions>
+
+    <!-- suggestion help, not shown until one of the suggestions is selected and specific to that suggestion -->
+    <div *ngIf="showHelp" id="typeahead-help" class="overflow-hidden">
+      <ng-container *ngIf="activeResult.type === 'search-global'">
+        <div class="d-flex justify-content-between">
+          <label class="small-title" i18n>GLOBAL SEARCH</label>
+          <div class="advanced-search-status text-muted">
+            <span *ngIf="serverConfig" class="mr-1" i18n>using {{ serverConfig.followings.instance.autoFollowIndex.indexUrl }}</span>
+            <i class="glyphicon glyphicon-globe"></i>
+          </div>
+        </div>
+        <div class="text-muted" i18n>Results will be augmented with those of a third-party index. Only data necessary to make the query will be sent.</div>
+      </ng-container>
+    </div>
+
+    <!-- search instructions, when search input is empty -->
+    <div *ngIf="areInstructionsDisplayed" id="typeahead-instructions" class="overflow-hidden">
+      <div class="d-flex justify-content-between">
+        <label class="small-title" i18n>ADVANCED SEARCH</label>
+        <div class="advanced-search-status c-help">
+          <span [ngClass]="canSearchAnyURI ? 'text-success' : 'text-muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows.">
+            <span *ngIf="canSearchAnyURI" class="mr-1" i18n>any instance</span>
+            <span *ngIf="!canSearchAnyURI" class="mr-1" i18n>only followed instances</span>
+            <i [ngClass]="canSearchAnyURI ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i>
+          </span>
+        </div>
+      </div>
+      <ul>
+        <li>
+          <em>@channel_id@domain</em> <span class="flex-auto text-muted" i18n>channel</span>
+        </li>
+        <li>
+          <em>URL</em> <span class="text-muted" i18n>channel</span>
+        </li>
+        <li>
+          <em>UUID</em> <span class="text-muted" i18n>video</span>
+        </li>
+      </ul>
+      <span class="text-muted" i18n>Any other text will return matching video or channel names.</span>
+    </div>
+  </div>
+
+</div>
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
new file mode 100644
index 000000000..33b88825f
--- /dev/null
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -0,0 +1,145 @@
+@import '_mixins';
+@import '_variables';
+@import '_bootstrap-variables';
+@import '~bootstrap/scss/mixins/_breakpoints';
+
+#search-video {
+  @include peertube-input-text($search-input-width);
+  padding-left: 10px;
+  padding-right: 40px; // For the search icon
+  font-size: 14px;
+
+  &::placeholder {
+    color: var(--inputPlaceholderColor);
+  }
+}
+
+.icon.icon-search {
+  @include icon(25px);
+  height: 21px;
+
+  background-color: var(--mainForegroundColor);
+  mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
+
+  // yolo
+  position: absolute;
+  margin-left: -35px;
+  margin-top: 5px;
+}
+
+.jump-to-suggestions {
+  top: 100%;
+  left: 0;
+  z-index: z(typeahead);
+  width: 100%;
+}
+
+#typeahead-help,
+#typeahead-instructions,
+my-suggestions ::ng-deep ul {
+  border: 1px solid var(--mainBackgroundColor);
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+  background: var(--mainBackgroundColor);
+  transition: .3s ease;
+  transition-property: box-shadow;
+}
+
+#typeahead-help,
+#typeahead-instructions {
+  margin-top: 10px;
+  width: 100%;
+  padding: .5rem 1rem;
+  white-space: normal;
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin-bottom: .5rem;
+
+    em {
+      font-weight: 600;
+      margin-right: 0.2rem;
+      font-style: normal;
+    }
+  }
+}
+
+#typeahead-container {
+  input {
+    border: 1px solid var(--mainBackgroundColor) !important;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
+    flex-grow: 1;
+    transition: box-shadow .3s ease, width .2s ease;
+  }
+
+  @media screen and (min-width: $mobile-view) {
+    margin-left: 10px;
+  }
+
+  @media screen and (max-width: $small-view) {
+    flex: 1;
+
+    input {
+      width: unset;
+    }
+  }
+
+  span {
+    right: 10px;
+  }
+
+  & > div:last-child {
+    // we have to switch the display and not the opacity, 
+    // to avoid clashing with the rest of the interface.
+    display: none;
+  }
+
+  &:focus,
+  ::ng-deep &:focus-within {
+    & > div:last-child {
+      @media screen and (min-width: $mobile-view) {
+        display: initial !important;
+      }
+      
+      #typeahead-help,
+      #typeahead-instructions,
+      my-suggestions ::ng-deep ul {
+        box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px;
+      }
+    }
+
+    ::ng-deep input {
+      box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+
+      @include media-breakpoint-up(lg) {
+        width: 500px;
+      }
+    }
+  }
+}
+
+.glyphicon {
+  top: 3px;
+}
+
+.advanced-search-status {
+  height: max-content;
+  cursor: default;
+
+  &.c-help {
+    cursor: help;
+  }
+}
+
+.small-title {
+  @include in-content-small-title;
+
+  margin-bottom: .5rem;
+}
+
+::ng-deep my-suggestion {
+  width: 100%;
+}
diff --git a/client/src/app/header/search-typeahead.component.ts b/client/src/app/header/search-typeahead.component.ts
new file mode 100644
index 000000000..2bf1072f4
--- /dev/null
+++ b/client/src/app/header/search-typeahead.component.ts
@@ -0,0 +1,179 @@
+import { Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChild } from '@angular/core'
+import { ActivatedRoute, Params, Router } from '@angular/router'
+import { AuthService, ServerService } from '@app/core'
+import { first, tap } from 'rxjs/operators'
+import { ListKeyManager } from '@angular/cdk/a11y'
+import { Result, SuggestionComponent } from './suggestion.component'
+import { of } from 'rxjs'
+import { ServerConfig } from '@shared/models'
+
+@Component({
+  selector: 'my-search-typeahead',
+  templateUrl: './search-typeahead.component.html',
+  styleUrls: [ './search-typeahead.component.scss' ]
+})
+export class SearchTypeaheadComponent implements OnInit, OnDestroy {
+  @ViewChild('searchVideo', { static: true }) searchInput: ElementRef<HTMLInputElement>
+
+  hasChannel = false
+  inChannel = false
+  newSearch = true
+
+  search = ''
+  serverConfig: ServerConfig
+
+  inThisChannelText: string
+
+  keyboardEventsManager: ListKeyManager<SuggestionComponent>
+  results: Result[] = []
+
+  constructor (
+    private authService: AuthService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private serverService: ServerService
+  ) {}
+
+  ngOnInit () {
+    this.route.queryParams
+      .pipe(first(params => this.isOnSearch() && params.search !== undefined && params.search !== null))
+      .subscribe(params => this.search = params.search)
+    this.serverService.getConfig()
+      .subscribe(config => this.serverConfig = config)
+  }
+
+  ngOnDestroy () {
+    if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
+  }
+
+  get activeResult () {
+    return this.keyboardEventsManager?.activeItem?.result
+  }
+
+  get areInstructionsDisplayed () {
+    return !this.search
+  }
+
+  get showHelp () {
+    return this.search && this.newSearch && this.activeResult?.type === 'search-global'
+  }
+
+  get canSearchAnyURI () {
+    if (!this.serverConfig) return false
+    return this.authService.isLoggedIn()
+      ? this.serverConfig.search.remoteUri.users
+      : this.serverConfig.search.remoteUri.anonymous
+  }
+
+  onSearchChange () {
+    this.computeResults()
+  }
+
+  computeResults () {
+    this.newSearch = true
+    let results: Result[] = []
+
+    if (this.search) {
+      results = [
+        /* Channel search is still unimplemented. Uncomment when it is.
+        {
+          text: this.search,
+          type: 'search-channel'
+        },
+        */
+        {
+          text: this.search,
+          type: 'search-instance',
+          default: true
+        },
+        /* Global search is still unimplemented. Uncomment when it is.
+        {
+          text: this.search,
+          type: 'search-global'
+        },
+        */
+        ...results
+      ]
+    }
+
+    this.results = results.filter(
+      (result: Result) => {
+        // if we're not in a channel or one of its videos/playlits, show all channel-related results
+        if (!(this.hasChannel || this.inChannel)) return !result.type.includes('channel')
+        // if we're in a channel, show all channel-related results except for the channel redirection itself
+        if (this.inChannel) return result.type !== 'channel'
+        // all other result types are kept
+        return true
+      }
+    )
+  }
+
+  setEventItems (event: { items: QueryList<SuggestionComponent>, index?: number }) {
+    event.items.forEach(e => {
+      if (this.keyboardEventsManager.activeItem && this.keyboardEventsManager.activeItem === e) {
+        this.keyboardEventsManager.activeItem.active = true
+      } else {
+        e.active = false
+      }
+    })
+  }
+
+  initKeyboardEventsManager (event: { items: QueryList<SuggestionComponent>, index?: number }) {
+    if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
+
+    this.keyboardEventsManager = new ListKeyManager(event.items)
+
+    if (event.index !== undefined) {
+      this.keyboardEventsManager.setActiveItem(event.index)
+    } else {
+      this.keyboardEventsManager.setFirstItemActive()
+    }
+
+    this.keyboardEventsManager.change.subscribe(
+      _ => this.setEventItems(event)
+    )
+  }
+
+  handleKey (event: KeyboardEvent) {
+    event.stopImmediatePropagation()
+    if (!this.keyboardEventsManager) return
+
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
+        this.keyboardEventsManager.onKeydown(event)
+        break
+    }
+  }
+
+  isOnSearch () {
+    return window.location.pathname === '/search'
+  }
+
+  doSearch () {
+    this.newSearch = false
+    const queryParams: Params = {}
+
+    if (this.isOnSearch() && this.route.snapshot.queryParams) {
+      Object.assign(queryParams, this.route.snapshot.queryParams)
+    }
+
+    Object.assign(queryParams, { search: this.search })
+
+    const o = this.authService.isLoggedIn()
+      ? this.loadUserLanguagesIfNeeded(queryParams)
+      : of(true)
+
+    o.subscribe(() => this.router.navigate([ '/search' ], { queryParams }))
+  }
+
+  private loadUserLanguagesIfNeeded (queryParams: any) {
+    if (queryParams && queryParams.languageOneOf) return of(queryParams)
+
+    return this.authService.userInformationLoaded
+               .pipe(
+                 first(),
+                 tap(() => Object.assign(queryParams, { languageOneOf: this.authService.getUser().videoLanguages }))
+               )
+  }
+}
diff --git a/client/src/app/header/suggestion.component.html b/client/src/app/header/suggestion.component.html
new file mode 100644
index 000000000..d7ae3450a
--- /dev/null
+++ b/client/src/app/header/suggestion.component.html
@@ -0,0 +1,22 @@
+<a tabindex="-1" class="d-flex flex-auto flex-items-center p-2" [class.focus-visible]="active">
+  <div class="flex-shrink-0 mr-2 text-center">
+    <my-global-icon *ngIf="result.type !== 'channel'" iconName="search"></my-global-icon>
+    <my-global-icon *ngIf="result.type === 'channel'" iconName="folder"></my-global-icon>
+  </div>
+
+  <img class="avatar mr-2 flex-shrink-0 d-none" alt="" aria-label="Team" src="" width="28" height="28">
+
+  <div class="flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target" [attr.aria-label]="result.text" [innerHTML]="result.text | highlight : highlight"></div>
+
+  <div *ngIf="result.type !== 'channel' && result.type !== 'suggestion'" class="border rounded flex-shrink-0 px-1 bg-gray text-gray-light ml-1 f6">
+    <span *ngIf="result.type === 'search-channel'" i18n>In this channel</span>
+    <span *ngIf="result.type === 'search-instance'" i18n>In this instance</span>
+    <span *ngIf="result.type === 'search-global'" i18n>In the vidiverse</span>
+    <span *ngIf="result.type === 'search-any'" aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
+  </div>
+
+  <div *ngIf="result.type === 'channel'" aria-hidden="true" class="border rounded flex-shrink-0 px-1 bg-gray text-gray-light ml-1 f6 d-on-nav-focus" i18n>
+    Jump to channel
+    <span class="d-inline-block ml-1 v-align-middle">↵</span>
+  </div>
+</a>
\ No newline at end of file
diff --git a/client/src/app/header/suggestion.component.scss b/client/src/app/header/suggestion.component.scss
new file mode 100644
index 000000000..1de2f43bd
--- /dev/null
+++ b/client/src/app/header/suggestion.component.scss
@@ -0,0 +1,32 @@
+@import '_mixins';
+
+a {
+  @include disable-default-a-behaviour;
+  width: 100%;
+
+  &, &:hover {
+    color: var(--mainForegroundColor);
+
+    &.focus-visible {
+      background-color: var(--mainHoverColor);
+      color: var(--mainBackgroundColor);
+    }
+  }
+}
+
+.bg-gray {
+  background-color: var(--mainBackgroundColor);
+}
+
+.text-gray-light {
+  color: var(--mainForegroundColor);
+}
+
+my-global-icon {
+  width: 17px;
+  position: relative;
+  top: -2px;
+  margin: 5px;
+
+  @include apply-svg-color(var(--mainForegroundColor));
+}
diff --git a/client/src/app/header/suggestion.component.ts b/client/src/app/header/suggestion.component.ts
new file mode 100644
index 000000000..69641b511
--- /dev/null
+++ b/client/src/app/header/suggestion.component.ts
@@ -0,0 +1,37 @@
+import { Input, Component, Output, EventEmitter, OnInit, ChangeDetectionStrategy } from '@angular/core'
+import { RouterLink } from '@angular/router'
+import { ListKeyManagerOption } from '@angular/cdk/a11y'
+
+export type Result = {
+  text: string
+  type: 'channel' | 'suggestion' | 'search-channel' | 'search-instance' | 'search-global' | 'search-any'
+  routerLink?: RouterLink,
+  default?: boolean
+}
+
+@Component({
+  selector: 'my-suggestion',
+  templateUrl: './suggestion.component.html',
+  styleUrls: [ './suggestion.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SuggestionComponent implements OnInit, ListKeyManagerOption {
+  @Input() result: Result
+  @Input() highlight: string
+  @Output() selected = new EventEmitter()
+
+  disabled = false
+  active = false
+
+  getLabel () {
+    return this.result.text
+  }
+
+  ngOnInit () {
+    if (this.result.default) this.active = true
+  }
+
+  selectItem () {
+    this.selected.emit(this.result)
+  }
+}
diff --git a/client/src/app/header/suggestions.component.html b/client/src/app/header/suggestions.component.html
new file mode 100644
index 000000000..8d017d78d
--- /dev/null
+++ b/client/src/app/header/suggestions.component.html
@@ -0,0 +1,6 @@
+<ul role="listbox" class="p-0 m-0">
+  <li *ngFor="let result of results; let i = index" class="d-flex flex-justify-start flex-items-center p-0 f5"
+      role="option" aria-selected="true" (mouseenter)="hoverItem(i)">
+    <my-suggestion [result]="result" [highlight]="highlight"></my-suggestion>
+  </li>
+</ul>
\ No newline at end of file
diff --git a/client/src/app/header/suggestions.component.ts b/client/src/app/header/suggestions.component.ts
new file mode 100644
index 000000000..ee3ef73c2
--- /dev/null
+++ b/client/src/app/header/suggestions.component.ts
@@ -0,0 +1,24 @@
+import { Input, QueryList, Component, Output, AfterViewInit, EventEmitter, ViewChildren, ChangeDetectionStrategy } from '@angular/core'
+import { SuggestionComponent } from './suggestion.component'
+
+@Component({
+  selector: 'my-suggestions',
+  templateUrl: './suggestions.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SuggestionsComponent implements AfterViewInit {
+  @Input() results: any[]
+  @Input() highlight: string
+  @ViewChildren(SuggestionComponent) listItems: QueryList<SuggestionComponent>
+  @Output() init = new EventEmitter()
+
+  ngAfterViewInit () {
+    this.listItems.changes.subscribe(
+      _ => this.init.emit({ items: this.listItems })
+    )
+  }
+
+  hoverItem (index: number) {
+    this.init.emit({ items: this.listItems, index: index })
+  }
+}
diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index 0b0bacff0..599b203ae 100644
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.component.html
@@ -3,59 +3,79 @@
     Login
   </div>
 
-  <div class="alert alert-info" *ngIf="signupAllowed === false" role="alert">
-    <h6 class="alert-heading" i18n>
-      If you are looking for an account…
-    </h6>
+  <div class="alert alert-danger" i18n *ngIf="externalAuthError">
+    Sorry but there was an issue with the external login process. Please <a routerLink="/about">contact an administrator</a>.
+  </div>
 
-    <div i18n>
-      Currently this instance doesn't allow for user registration, but you can find an instance
-      that gives you the possibility to sign up for an account and upload your videos there.
+  <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">
+    <div class="looking-for-account alert alert-info" *ngIf="signupAllowed === false" role="alert">
+      <h6 class="alert-heading" i18n>
+        If you are looking for an account…
+      </h6>
 
-      <br />
+      <div i18n>
+        Currently this instance doesn't allow for user registration, but you can find an instance
+        that gives you the possibility to sign up for an account and upload your videos there.
 
-      Find yours among multiple instances at <a class="alert-link" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>.
-    </div>
-  </div>
-
-  <div *ngIf="error" class="alert alert-danger">{{ error }}
-    <span *ngIf="error === 'User email is not verified.'"> <a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a></span>
-  </div>
+        <br />
 
-  <form role="form" (ngSubmit)="login()" [formGroup]="form">
-    <div class="form-group">
-      <div>
-        <label i18n for="username">User</label>
-        <input
-          type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1"
-          formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" #emailInput
-        >
-        <a i18n *ngIf="signupAllowed === true" routerLink="/signup" class="create-an-account">
-          or create an account
-        </a>
+        Find yours among multiple instances at <a class="alert-link" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>.
       </div>
+    </div>
 
-      <div *ngIf="formErrors.username" class="form-error">
-        {{ formErrors.username }}
-      </div>
+    <div *ngIf="error" class="alert alert-danger">{{ error }}
+      <span *ngIf="error === 'User email is not verified.'"> <a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a></span>
     </div>
 
-    <div class="form-group">
-      <label i18n for="password">Password</label>
-      <div>
-        <input
-          type="password" name="password" id="password" i18n-placeholder placeholder="Password" required tabindex="2" autocomplete="current-password"
-          formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
-        >
-        <a i18n class="forgot-password-button" (click)="openForgotPasswordModal()" title="Click here to reset your password">I forgot my password</a>
-      </div>
-      <div *ngIf="formErrors.password" class="form-error">
-        {{ formErrors.password }}
+    <div class="login-form-and-externals">
+
+      <form role="form" (ngSubmit)="login()" [formGroup]="form">
+        <div class="form-group">
+          <div>
+            <label i18n for="username">User</label>
+            <input
+              type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1"
+              formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" #usernameInput
+            >
+            <a i18n *ngIf="signupAllowed === true" routerLink="/signup" class="create-an-account">
+              or create an account
+            </a>
+          </div>
+
+          <div *ngIf="formErrors.username" class="form-error">
+            {{ formErrors.username }}
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label i18n for="password">Password</label>
+          <div>
+            <input
+              type="password" name="password" id="password" i18n-placeholder placeholder="Password" required tabindex="2" autocomplete="current-password"
+              formControlName="password" class="form-control" [ngClass]="{ 'input-error': formErrors['password'] }"
+            >
+            <a i18n-title class="forgot-password-button" (click)="openForgotPasswordModal()" title="Click here to reset your password">I forgot my password</a>
+          </div>
+          <div *ngIf="formErrors.password" class="form-error">
+            {{ formErrors.password }}
+          </div>
+        </div>
+
+        <input type="submit" i18n-value value="Login" [disabled]="!form.valid">
+      </form>
+
+      <div class="external-login-blocks" *ngIf="getExternalLogins().length !== 0">
+        <div class="block-title" i18n>Or sign in with</div>
+
+        <div>
+          <a class="external-login-block" *ngFor="let auth of getExternalLogins()" [href]="getAuthHref(auth)" role="button">
+            {{ auth.authDisplayName }}
+          </a>
+        </div>
       </div>
     </div>
 
-    <input type="submit" i18n-value value="Login" [disabled]="!form.valid">
-  </form>
+  </ng-container>
 </div>
 
 <ng-template #forgotPasswordModal>
@@ -81,7 +101,10 @@
   </div>
 
   <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-cancel" (click)="hideForgotPasswordModal()">Cancel</span>
+    <input
+      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+      (click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
+    >
 
     <input
       type="submit" i18n-value value="Send me an email to reset my password" class="action-button-submit"
diff --git a/client/src/app/login/login.component.scss b/client/src/app/login/login.component.scss
index 8ac231475..db9f78f7c 100644
--- a/client/src/app/login/login.component.scss
+++ b/client/src/app/login/login.component.scss
@@ -21,9 +21,46 @@ input[type=submit] {
   color: var(--mainForegroundColor);
   cursor: pointer;
   transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
-  
+
   &:hover {
     text-decoration: none !important;
     opacity: .7 !important;
   }
 }
+
+.login-form-and-externals {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 15px;
+
+  form {
+    margin: 0 50px 20px 0;
+  }
+
+  .external-login-blocks {
+    min-width: 200px;
+
+    .block-title {
+      font-weight: $font-semibold;
+    }
+
+    .external-login-block {
+      @include disable-default-a-behaviour;
+
+      cursor: pointer;
+      border: 1px solid #d1d7e0;
+      border-radius: 5px;
+      color: var(--mainForegroundColor);
+      margin: 10px 10px 0 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 35px;
+      min-width: 100px;
+
+      &:hover {
+        background-color: rgba(209, 215, 224, 0.5)
+      }
+    }
+  }
+}
diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts
index 580f28822..fff4b43f6 100644
--- a/client/src/app/login/login.component.ts
+++ b/client/src/app/login/login.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
+import { Component, ElementRef, OnInit, ViewChild, AfterViewInit } from '@angular/core'
 import { Notifier, RedirectService } from '@app/core'
 import { UserService } from '@app/shared'
 import { AuthService } from '../core'
@@ -8,7 +8,9 @@ import { FormValidatorService } from '@app/shared/forms/form-validators/form-val
 import { LoginValidatorsService } from '@app/shared/forms/form-validators/login-validators.service'
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 import { ActivatedRoute } from '@angular/router'
-import { ServerConfig } from '@shared/models/server/server-config.model'
+import { ServerConfig, RegisteredExternalAuthConfig } from '@shared/models/server/server-config.model'
+import { environment } from 'src/environments/environment'
+import { HooksService } from '@app/core/plugins/hooks.service'
 
 @Component({
   selector: 'my-login',
@@ -16,13 +18,17 @@ import { ServerConfig } from '@shared/models/server/server-config.model'
   styleUrls: [ './login.component.scss' ]
 })
 
-export class LoginComponent extends FormReactive implements OnInit {
-  @ViewChild('emailInput', { static: true }) input: ElementRef
+export class LoginComponent extends FormReactive implements OnInit, AfterViewInit {
+  @ViewChild('usernameInput', { static: false }) usernameInput: ElementRef
   @ViewChild('forgotPasswordModal', { static: true }) forgotPasswordModal: ElementRef
 
   error: string = null
   forgotPasswordEmail = ''
 
+  isAuthenticatedWithExternalAuth = false
+  externalAuthError = false
+  externalLogins: string[] = []
+
   private openedForgotPasswordModal: NgbModalRef
   private serverConfig: ServerConfig
 
@@ -35,6 +41,7 @@ export class LoginComponent extends FormReactive implements OnInit {
     private userService: UserService,
     private redirectService: RedirectService,
     private notifier: Notifier,
+    private hooks: HooksService,
     private i18n: I18n
   ) {
     super()
@@ -49,14 +56,40 @@ export class LoginComponent extends FormReactive implements OnInit {
   }
 
   ngOnInit () {
-    this.serverConfig = this.route.snapshot.data.serverConfig
+    const snapshot = this.route.snapshot
+
+    this.serverConfig = snapshot.data.serverConfig
+
+    if (snapshot.queryParams.externalAuthToken) {
+      this.loadExternalAuthToken(snapshot.queryParams.username, snapshot.queryParams.externalAuthToken)
+      return
+    }
+
+    if (snapshot.queryParams.externalAuthError) {
+      this.externalAuthError = true
+      return
+    }
 
     this.buildForm({
       username: this.loginValidatorsService.LOGIN_USERNAME,
       password: this.loginValidatorsService.LOGIN_PASSWORD
     })
+  }
+
+  ngAfterViewInit () {
+    if (this.usernameInput) {
+      this.usernameInput.nativeElement.focus()
+    }
+
+    this.hooks.runAction('action:login.init', 'login')
+  }
 
-    this.input.nativeElement.focus()
+  getExternalLogins () {
+    return this.serverConfig.plugin.registeredExternalAuths
+  }
+
+  getAuthHref (auth: RegisteredExternalAuthConfig) {
+    return environment.apiUrl + `/plugins/${auth.name}/${auth.version}/auth/${auth.authName}`
   }
 
   login () {
@@ -68,11 +101,7 @@ export class LoginComponent extends FormReactive implements OnInit {
       .subscribe(
         () => this.redirectService.redirectToPreviousRoute(),
 
-        err => {
-          if (err.message.indexOf('credentials are invalid') !== -1) this.error = this.i18n('Incorrect username or password.')
-          else if (err.message.indexOf('blocked') !== -1) this.error = this.i18n('You account is blocked.')
-          else this.error = err.message
-        }
+        err => this.handleError(err)
       )
   }
 
@@ -99,4 +128,24 @@ export class LoginComponent extends FormReactive implements OnInit {
   hideForgotPasswordModal () {
     this.openedForgotPasswordModal.close()
   }
+
+  private loadExternalAuthToken (username: string, token: string) {
+    this.isAuthenticatedWithExternalAuth = true
+
+    this.authService.login(username, null, token)
+    .subscribe(
+      () => this.redirectService.redirectToPreviousRoute(),
+
+      err => {
+        this.handleError(err)
+        this.isAuthenticatedWithExternalAuth = false
+      }
+    )
+  }
+
+  private handleError (err: any) {
+    if (err.message.indexOf('credentials are invalid') !== -1) this.error = this.i18n('Incorrect username or password.')
+    else if (err.message.indexOf('blocked') !== -1) this.error = this.i18n('You account is blocked.')
+    else this.error = err.message
+  }
 }
diff --git a/client/src/app/menu/avatar-notification.component.html b/client/src/app/menu/avatar-notification.component.html
index 7975afba5..df2a102a3 100644
--- a/client/src/app/menu/avatar-notification.component.html
+++ b/client/src/app/menu/avatar-notification.component.html
@@ -30,7 +30,7 @@
     </div>
 
     <my-user-notifications
-      [ignoreLoadingBar]="true" [infiniteScroll]="false" itemsPerPage="10"
+      [ignoreLoadingBar]="true" [infiniteScroll]="false" [itemsPerPage]="10"
       [markAllAsReadSubject]="markAllAsReadSubject" (notificationsLoaded)="onNotificationLoaded()"
     ></my-user-notifications>
 
diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts
index 989a11849..c447f031c 100644
--- a/client/src/app/menu/avatar-notification.component.ts
+++ b/client/src/app/menu/avatar-notification.component.ts
@@ -6,7 +6,6 @@ import { Notifier, UserNotificationSocket } from '@app/core'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 import { NavigationEnd, Router } from '@angular/router'
 import { filter } from 'rxjs/operators'
-import { UserNotificationsComponent } from '@app/shared'
 
 @Component({
   selector: 'my-avatar-notification',
diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss
index 72deb3952..6226a85cb 100644
--- a/client/src/app/menu/language-chooser.component.scss
+++ b/client/src/app/menu/language-chooser.component.scss
@@ -4,6 +4,13 @@
 .help-to-translate {
   @include peertube-button-link;
   @include orange-button;
+
+  &.focus-visible,
+  &:focus {
+    box-shadow: none;
+  }
+
+  border-radius: 0;
 }
 
 .modal-body {
diff --git a/client/src/app/menu/language-chooser.component.ts b/client/src/app/menu/language-chooser.component.ts
index 4a6e4c75a..9bc934ad4 100644
--- a/client/src/app/menu/language-chooser.component.ts
+++ b/client/src/app/menu/language-chooser.component.ts
@@ -1,7 +1,9 @@
-import { Component, ElementRef, ViewChild } from '@angular/core'
+import { Component, ElementRef, ViewChild, Inject, LOCALE_ID } from '@angular/core'
 import { I18N_LOCALES } from '../../../../shared'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { sortBy } from '@app/shared/misc/utils'
+import { getCompleteLocale } from '@shared/models/i18n'
+import { isOnDevLocale, getDevLocale } from '@app/shared/i18n/i18n-utils'
 
 @Component({
   selector: 'my-language-chooser',
@@ -13,7 +15,10 @@ export class LanguageChooserComponent {
 
   languages: { id: string, label: string }[] = []
 
-  constructor (private modalService: NgbModal) {
+  constructor (
+    private modalService: NgbModal,
+    @Inject(LOCALE_ID) private localeId: string
+  ) {
     const l = Object.keys(I18N_LOCALES)
                     .map(k => ({ id: k, label: I18N_LOCALES[k] }))
 
@@ -21,11 +26,18 @@ export class LanguageChooserComponent {
   }
 
   show () {
-    this.modalService.open(this.modal)
+    this.modalService.open(this.modal, { centered: true })
   }
 
   buildLanguageLink (lang: { id: string }) {
     return window.location.origin + '/' + lang.id
   }
 
+  getCurrentLanguage () {
+    const english = 'English'
+    const locale = isOnDevLocale() ? getDevLocale() : getCompleteLocale(this.localeId)
+
+    if (locale) return I18N_LOCALES[locale] || english
+    return english
+  }
 }
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 675fb597d..1cb51ef55 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -8,34 +8,65 @@
           <a *ngIf="user.account" [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="logged-in-display-name">{{ user.account?.displayName }}</a>
           <a *ngIf="!user.account" routerLink="/my-account/settings" class="logged-in-display-name">{{ user.account?.displayName }}</a>
 
-          <div ngxClipboard [cbContent]="user.account?.nameWithHost" class="logged-in-username">{{ user.username }}</div>
+          <div class="logged-in-username">{{ user.username }}</div>
         </div>
 
-        <div class="logged-in-more" ngbDropdown placement="bottom-right auto">
+        <div class="logged-in-more" ngbDropdown [placement]="placement" container="body" autoClose="outside">
           <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button"></my-global-icon>
 
           <div ngbDropdownMenu>
-            <a *ngIf="user.account" [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="dropdown-item">
+            <a *ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/accounts', user.account.nameWithHost ]">
               <my-global-icon iconName="go"></my-global-icon> <ng-container i18n>Public profile</ng-container>
             </a>
 
             <div class="dropdown-divider"></div>
 
-            <a routerLink="/my-account" class="dropdown-item">
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account">
               <my-global-icon iconName="user"></my-global-icon> <ng-container i18n>Account settings</ng-container>
             </a>
 
-            <a routerLink="/my-account/video-channels" class="dropdown-item">
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/video-channels">
               <my-global-icon iconName="folder"></my-global-icon> <ng-container i18n>Channels settings</ng-container>
             </a>
 
             <div class="dropdown-divider"></div>
 
-            <a class="dropdown-item" href="https://joinpeertube.org/help" target="_blank" rel="noopener noreferrer">
-              <my-global-icon iconName="help"></my-global-icon> <ng-container i18n>Help</ng-container>
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openLanguageChooser()">
+              <my-global-icon iconName="language"></my-global-icon>
+              <ng-container i18n>Interface: {{ language }}</ng-container>
+              <i class="ml-auto glyphicon glyphicon-menu-right"></i>
             </a>
 
-            <a (click)="logout($event)" class="dropdown-item" href="#">
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-settings">
+              <my-global-icon iconName="video-lang"></my-global-icon>
+              <ng-container i18n>Videos: {{ videoLanguages.join(', ') }}</ng-container>
+              <i class="ml-auto glyphicon glyphicon-menu-right"></i>
+            </a>
+
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-settings">
+              <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy === 'display' }" iconName="sensitive"></my-global-icon>
+              <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy !== 'display' }" iconName="unsensitive"></my-global-icon>
+              <ng-container i18n>Sensitive: {{ nsfwPolicy }}</ng-container>
+              <i class="ml-auto glyphicon glyphicon-menu-right"></i>
+            </a>
+
+            <a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
+              <my-global-icon iconName="p2p"></my-global-icon>
+              <ng-container i18n>Help share videos</ng-container>
+              <input type="checkbox" [checked]="user.webTorrentEnabled"/><label class="ml-auto" for="switch">Toggle p2p</label>
+            </a>
+
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account">
+              <my-global-icon iconName="more-horizontal"></my-global-icon> <ng-container i18n>More account settings</ng-container>
+            </a>
+
+            <div class="dropdown-divider"></div>
+
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openHotkeysCheatSheet()">
+              <i class="icon icon-shortcuts"></i> <ng-container i18n>Keyboard shortcuts</ng-container>
+            </a>
+
+            <a ngbDropdownItem ngbDropdownToggle (click)="logout($event)" class="dropdown-item" href="#">
               <my-global-icon iconName="sign-out"></my-global-icon> <ng-container i18n>Log out</ng-container>
             </a>
           </div>
@@ -48,7 +79,7 @@
       </div>
 
       <div *ngIf="isLoggedIn" class="panel-block">
-        <div i18n class="block-title">My library</div>
+        <div i18n class="block-title">MY LIBRARY</div>
 
         <a routerLink="/my-account/videos" routerLinkActive="active">
           <my-global-icon iconName="videos"></my-global-icon>
@@ -73,7 +104,7 @@
       </div>
 
       <div class="panel-block">
-        <div i18n class="block-title">Videos</div>
+        <div i18n class="block-title">VIDEOS</div>
 
         <a routerLink="/videos/overview" routerLinkActive="active">
           <my-global-icon iconName="globe"></my-global-icon>
@@ -100,32 +131,56 @@
           <ng-container i18n>Local</ng-container>
         </a>
       </div>
+    </div>
 
+    <div class="footer">
       <div class="panel-block">
-        <div class="block-title" i18n>More</div>
-
         <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
-          <my-global-icon iconName="administration"></my-global-icon>
+          <my-global-icon iconName="cog"></my-global-icon>
           <ng-container i18n>Administration</ng-container>
         </a>
-
-        <a routerLink="/about" routerLinkActive="active">
-          <my-global-icon iconName="about"></my-global-icon>
+        <a *ngIf="!isLoggedIn" (click)="openQuickSettings()">
+          <my-global-icon iconName="cog"></my-global-icon>
+          <ng-container i18n>Settings</ng-container>
+        </a>
+        <a routerLink="/about/instance">
+          <my-global-icon iconName="help"></my-global-icon>
           <ng-container i18n>About</ng-container>
         </a>
       </div>
-    </div>
 
-    <div class="footer d-flex justify-content-between">
-      <span class="language">
-        <span tabindex="0" role="button" (keyup.enter)="openLanguageChooser()" (click)="openLanguageChooser()" i18n-title title="Change the language" class="icon icon-language"></span>
-      </span>
+      <div class="bottom-links">
 
-      <span class="shortcuts">
-        <span tabindex="0" role="button" (keyup.enter)="openHotkeysCheatSheet()" (click)="openHotkeysCheatSheet()" i18n-title title="Show keyboard shortcuts" class="icon icon-shortcuts"></span>
-      </span>
+        <div class="footer-links">
+          <div *ngIf="isLoggedIn === false">
+            <span role="button" (click)="openLanguageChooser()" class="c-hand" i18n>Interface: {{ language }}</span>
+          </div>
+
+          <div>
+            <a i18n routerLink="/about/instance">Contact</a>
+            <a i18n href="https://joinpeertube.org/help" i18n-title title="Get help using PeerTube" target="_blank" rel="noopener noreferrer">Help</a>
+            <a i18n href="https://joinpeertube.org/faq" i18n-title title="Frequently asked questions about PeerTube" target="_blank" rel="noopener noreferrer">FAQ</a>
+            <a i18n routerLink="/about/instance" fragment="statistics">Stats</a>
+            <a i18n href="https://docs.joinpeertube.org/api-rest-reference.html" i18n-title title="API documentation" target="_blank" rel="noopener noreferrer">API</a>
+            <a (click)="openHotkeysCheatSheet()" class="c-hand" i18n>Shortcuts</a>
+          </div>
+        </div>
+
+        <div class="footer-copyleft">
+          <small class="d-inline" i18n-title title="powered by PeerTube - CopyLeft 2015-2020">
+            <a href="https://joinpeertube.org" i18n-title title="PeerTube website" target="_blank" rel="noopener noreferrer" i18n>
+              powered by PeerTube
+            </a>
+
+            <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE" i18n-title title="PeerTube license" target="_blank" rel="noopener noreferrer">
+              <span aria-label="copyleft" class="d-inline-block" style="transform: rotateY(180deg)">&copy;</span> 2015-2020
+            </a>
+          </small>
+        </div>
+      </div>
     </div>
   </menu>
 </div>
 
 <my-language-chooser #languageChooserModal></my-language-chooser>
+<my-quick-settings #quickSettingsModal></my-quick-settings>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index b05173751..5bff0c328 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -6,7 +6,8 @@
   height: calc(100vh - #{$header-height});
   padding: 0;
   width: $menu-width;
-  z-index: 10000;
+  z-index: z(menu);
+  scrollbar-color: var(--actionButtonColor) var(--menuBackgroundColor);
 }
 
 menu {
@@ -26,9 +27,13 @@ menu {
     overflow-y: auto;
   }
 
+  @media not all and (hover: hover) and (pointer: fine) {
+    overflow-y: auto;
+  }
+
   &.logged-in {
     .panel-block {
-      margin-bottom: 25px;
+      margin-bottom: 20px;
     }
 
     .block-title {
@@ -87,22 +92,6 @@ menu {
           @include apply-svg-color(var(--menuForegroundColor));
         }
       }
-
-      .dropdown-item {
-        @include dropdown-with-icon-item;
-
-        my-global-icon {
-          width: 22px;
-          height: 22px;
-
-          &[iconName="sign-out"] {
-            position: relative;
-            right: -1px;
-            height: 21px;
-            width: 21px;
-          }
-        }
-      }
     }
   }
 
@@ -142,7 +131,7 @@ menu {
   }
 
   .panel-block {
-    margin-bottom: 45px;
+    margin-bottom: 15px;
 
     a {
       @include disable-default-a-behaviour;
@@ -197,58 +186,160 @@ menu {
   }
 
   .footer {
-    padding-bottom: 15px;
-    padding-left: $menu-lateral-padding;
-    padding-right: $menu-lateral-padding;
     width: $menu-width;
+    padding-bottom: 15px;
 
-    .language, .shortcuts, .color-palette {
-      display: inline-block;
-      color: $menu-bottom-color;
-      cursor: pointer;
-      font-size: 12px;
-      font-weight: $font-semibold;
+    .bottom-links {
+      display: flex;
+      flex-direction: column;
+      padding: 0 $menu-lateral-padding;
+    }
 
-      .icon {
-        @include disable-outline;
-        @include icon(28px);
-        opacity: 0.9;
+    $footer-links-base-opacity: .8;
 
-        &.icon-language  {
-          position: relative;
-          top: -1px;
-          width: 28px;
-          height: 24px;
+    .footer-links {
+      &, > div {
+        display: flex;
+        flex-wrap: wrap;
+      }
 
-          background-image: url('../../assets/images/menu/language.png');
+      a, span[role=button] {
+        display: inline-block;
+        text-decoration: none;
+        color: var(--mainBackgroundColor);
+        opacity: $footer-links-base-opacity;
+        white-space: nowrap;
+        font-size: 90%;
+        font-weight: 500;
+        line-height: 1.4rem;
+        margin-right: 8px;
+
+        &.inline-global-icon {
+          display: inline-flex;
+          align-items: center;
+          white-space: nowrap;
+          height: 1.4rem;
+
+          my-global-icon {
+            @include apply-svg-color(var(--mainBackgroundColor));
+
+            display: flex;
+            width: auto;
+            height: 90%;
+            margin-right: .2rem;
+          }
         }
+      }
+    }
 
-        &.icon-shortcuts  {
-          position: relative;
-          top: -1px;
-          width: 24px;
-          height: 24px;
+    .footer-copyleft small a {
+      @include disable-default-a-behaviour;
 
-          background-image: url('../../assets/images/menu/keyboard.png');
-          filter: invert(100%);
-        }
+      color: var(--mainBackgroundColor);
+      opacity: $footer-links-base-opacity - .2;
+    }
+  }
+}
 
-        &.icon-moonsun  {
-          margin-left: 10px;
-          position: relative;
-          top: -1px;
-          width: 24px;
-          height: 24px;
+.dropdown-menu {
+  width: calc(100% + 40px);
+}
 
-          background-image: url('../../assets/images/menu/moonsun.svg');
-        }
+.dropdown-item {
+  @include dropdown-with-icon-item;
 
-        &:hover {
-          opacity: 1;
-        }
-      }
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  i.glyphicon-menu-right {
+    opacity: .4;
+  }
+
+  my-global-icon {
+    &[iconName="cog"],
+    &[iconName="sign-out"] {
+      position: relative;
+      right: -2px;
+      height: 20px;
+      width: 20px;
     }
   }
+
+  my-global-icon.not-displayed {
+    display: none;
+  }
+
+  &:hover {
+    my-global-icon.hover-display-toggle.not-displayed {
+      display: inherit;
+    }
+    my-global-icon.hover-display-toggle {
+      display: none;
+    }
+  }
+}
+
+.more-settings {
+  text-transform: uppercase;
+  font-size: 80%;
+  color: #6c757d;
+}
+
+.icon {
+  @include disable-outline;
+  @include icon(22px);
+  opacity: 0.8;
+
+  &.icon-shortcuts  {
+    position: relative;
+    top: -1px;
+    margin-right: 10px;
+
+    background-image: url('../../assets/images/menu/keyboard.png');
+  }
+}
+
+input[type=checkbox]{
+  position: absolute;
+  visibility: hidden;
+}
+
+label {
+  cursor: pointer;
+  text-indent: -9999px;
+  width: 35px;
+  height: 20px;
+  background: #cccccc;
+  display: block;
+  border-radius: 100px;
+  position: relative;
+  margin: 0;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 14px;
+    height: 14px;
+    background: var(--mainBackgroundColor);
+    border-radius: 50%;
+    transition: 0.3s ease-out;
+  }
+
+  &:active:after {
+    width: 40px;
+  }
+}
+
+input:checked + label {
+  background: var(--mainColor);
+
+  &:after {
+    left: calc(100% - 3px);
+    transform: translateX(-100%);
+  }
 }
 
 @media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 1d7651e78..015c14bce 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -1,10 +1,14 @@
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { UserRight } from '../../../../shared/models/users/user-right.enum'
-import { AuthService, AuthStatus, RedirectService, ServerService, ThemeService } from '../core'
-import { User } from '../shared/users/user.model'
+import { AuthService, AuthStatus, RedirectService, ServerService } from '../core'
+import { User } from '@app/shared/users/user.model'
+import { UserService } from '@app/shared/users/user.service'
 import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
 import { HotkeysService } from 'angular2-hotkeys'
-import { ServerConfig } from '@shared/models'
+import { ServerConfig, VideoConstant } from '@shared/models'
+import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ScreenService } from '@app/shared/misc/screen.service'
 
 @Component({
   selector: 'my-menu',
@@ -13,12 +17,17 @@ import { ServerConfig } from '@shared/models'
 })
 export class MenuComponent implements OnInit {
   @ViewChild('languageChooserModal', { static: true }) languageChooserModal: LanguageChooserComponent
+  @ViewChild('quickSettingsModal', { static: true }) quickSettingsModal: QuickSettingsModalComponent
 
   user: User
   isLoggedIn: boolean
+
   userHasAdminAccess = false
   helpVisible = false
 
+  videoLanguages: string[] = []
+
+  private languages: VideoConstant<string>[] = []
   private serverConfig: ServerConfig
   private routesPerRight: { [ role in UserRight ]?: string } = {
     [UserRight.MANAGE_USERS]: '/admin/users',
@@ -31,10 +40,25 @@ export class MenuComponent implements OnInit {
 
   constructor (
     private authService: AuthService,
+    private userService: UserService,
     private serverService: ServerService,
     private redirectService: RedirectService,
-    private hotkeysService: HotkeysService
-  ) {}
+    private hotkeysService: HotkeysService,
+    private screenService: ScreenService,
+    private i18n: I18n
+  ) { }
+
+  get isInMobileView () {
+    return this.screenService.isInMobileView()
+  }
+
+  get placement () {
+    if (this.isInMobileView) {
+      return 'left-top auto'
+    } else {
+      return 'right-top auto'
+    }
+  }
 
   ngOnInit () {
     this.serverConfig = this.serverService.getTmpConfig()
@@ -63,9 +87,35 @@ export class MenuComponent implements OnInit {
       }
     )
 
-    this.hotkeysService.cheatSheetToggle.subscribe(isOpen => {
-      this.helpVisible = isOpen
-    })
+    this.hotkeysService.cheatSheetToggle
+        .subscribe(isOpen => this.helpVisible = isOpen)
+
+    this.serverService.getVideoLanguages()
+        .subscribe(languages => {
+          this.languages = languages
+
+          this.authService.userInformationLoaded
+              .subscribe(() => this.buildUserLanguages())
+        })
+  }
+
+  get language () {
+    return this.languageChooserModal.getCurrentLanguage()
+  }
+
+  get nsfwPolicy () {
+    if (!this.user) return
+
+    switch (this.user.nsfwPolicy) {
+      case 'do_not_list':
+        return this.i18n('hide')
+
+      case 'blur':
+        return this.i18n('blur')
+
+      case 'display':
+        return this.i18n('display')
+    }
   }
 
   isRegistrationAllowed () {
@@ -117,6 +167,40 @@ export class MenuComponent implements OnInit {
     this.hotkeysService.cheatSheetToggle.next(!this.helpVisible)
   }
 
+  openQuickSettings () {
+    this.quickSettingsModal.show()
+  }
+
+  toggleUseP2P () {
+    if (!this.user) return
+    this.user.webTorrentEnabled = !this.user.webTorrentEnabled
+
+    this.userService.updateMyProfile({ webTorrentEnabled: this.user.webTorrentEnabled })
+        .subscribe(() => this.authService.refreshUserInformation())
+  }
+
+  langForLocale (localeId: string) {
+    if (localeId === '_unknown') return this.i18n('Unknown')
+
+    return this.languages.find(lang => lang.id === localeId).label
+  }
+
+  private buildUserLanguages () {
+    if (!this.user) {
+      this.videoLanguages = []
+      return
+    }
+
+    if (!this.user.videoLanguages) {
+      this.videoLanguages = [ this.i18n('any language') ]
+      return
+    }
+
+    this.videoLanguages = this.user.videoLanguages
+                              .map(locale => this.langForLocale(locale))
+                              .map(value => value === undefined ? '?' : value)
+  }
+
   private computeIsUserHasAdminAccess () {
     const right = this.getFirstAdminRightAvailable()
 
diff --git a/client/src/app/modal/custom-modal.component.html b/client/src/app/modal/custom-modal.component.html
new file mode 100644
index 000000000..06ecc2743
--- /dev/null
+++ b/client/src/app/modal/custom-modal.component.html
@@ -0,0 +1,20 @@
+<ng-template #modal let-hide="close">
+  <div class="modal-header">
+    <h4 class="modal-title">{{title}}</h4>
+    <my-global-icon *ngIf="close" iconName="cross" aria-label="Close" role="button" (click)="onCloseClick()"></my-global-icon>
+  </div>
+    
+  <div class="modal-body" [innerHTML]="content"></div>
+
+  <div *ngIf="hasCancel() || hasConfirm()" class="modal-footer inputs">
+    <input
+      *ngIf="hasCancel()" type="button" role="button" value="{{cancel.value}}" class="action-button action-button-cancel"
+      (click)="onCancelClick()" (key.enter)="onCancelClick()"
+    >
+
+    <input
+      *ngIf="hasConfirm()" type="button" role="button" value="{{confirm.value}}" class="action-button action-button-confirm"
+      (click)="onConfirmClick()" (key.enter)="onConfirmClick()"
+    >
+  </div>
+</ng-template>
diff --git a/client/src/app/modal/custom-modal.component.scss b/client/src/app/modal/custom-modal.component.scss
new file mode 100644
index 000000000..a7fa30cf5
--- /dev/null
+++ b/client/src/app/modal/custom-modal.component.scss
@@ -0,0 +1,20 @@
+@import '_mixins';
+@import '_variables';
+
+.modal-body {
+  font-size: 15px;
+}
+
+li {
+  margin-bottom: 10px;
+}
+
+.action-button-cancel {
+  @include peertube-button;
+  @include grey-button;
+}
+
+.action-button-confirm {
+  @include peertube-button;
+  @include orange-button;
+}
diff --git a/client/src/app/modal/custom-modal.component.ts b/client/src/app/modal/custom-modal.component.ts
new file mode 100644
index 000000000..a98579085
--- /dev/null
+++ b/client/src/app/modal/custom-modal.component.ts
@@ -0,0 +1,93 @@
+import { Component, ElementRef, ViewChild, Input } from '@angular/core'
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+
+@Component({
+  selector: 'my-custom-modal',
+  templateUrl: './custom-modal.component.html',
+  styleUrls: [ './custom-modal.component.scss' ]
+})
+export class CustomModalComponent {
+  @ViewChild('modal', { static: true }) modal: ElementRef
+
+  @Input() title: string
+  @Input() content: string
+  @Input() close?: boolean
+  @Input() cancel?: { value: string, action?: () => void }
+  @Input() confirm?: { value: string, action?: () => void }
+
+  private modalRef: NgbModalRef
+
+  constructor (
+    private modalService: NgbModal
+  ) { }
+
+  show (input: {
+    title: string,
+    content: string,
+    close?: boolean,
+    cancel?: { value: string, action?: () => void },
+    confirm?: { value: string, action?: () => void }
+  }) {
+    if (this.modalRef instanceof NgbModalRef && this.modalService.hasOpenModals()) {
+      console.error('Cannot open another custom modal, one is already opened.')
+      return
+    }
+
+    const { title, content, close, cancel, confirm } = input
+
+    this.title = title
+    this.content = content
+    this.close = close
+    this.cancel = cancel
+    this.confirm = confirm
+
+    this.modalRef = this.modalService.open(this.modal, {
+      centered: true,
+      backdrop: 'static',
+      keyboard: false,
+      size: 'lg'
+    })
+  }
+
+  onCancelClick () {
+    this.modalRef.close()
+
+    if (typeof this.cancel.action === 'function') {
+      this.cancel.action()
+    }
+
+    this.destroy()
+  }
+
+  onCloseClick () {
+    this.modalRef.close()
+    this.destroy()
+  }
+
+  onConfirmClick () {
+    this.modalRef.close()
+
+    if (typeof this.confirm.action === 'function') {
+      this.confirm.action()
+    }
+
+    this.destroy()
+  }
+
+  hasCancel () {
+    return typeof this.cancel !== 'undefined'
+  }
+
+  hasConfirm () {
+    return typeof this.confirm !== 'undefined'
+  }
+
+  private destroy () {
+    delete this.modalRef
+    delete this.title
+    delete this.content
+    delete this.close
+    delete this.cancel
+    delete this.confirm
+  }
+}
diff --git a/client/src/app/modal/instance-config-warning-modal.component.html b/client/src/app/modal/instance-config-warning-modal.component.html
index 93391c0a8..44c994bc8 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.html
+++ b/client/src/app/modal/instance-config-warning-modal.component.html
@@ -21,7 +21,7 @@
       <li i18n *ngIf="!about.instance.terms">Instance terms</li>
     </ul>
 
-    <p>
+    <p i18n>
       Please consider to configure these fields to help people to choose <strong>the appropriate instance</strong>.
       Without them, your instance may not be referenced on <a target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org">JoinPeerTube website</a>.
     </p>
@@ -40,7 +40,10 @@
 
     </my-peertube-checkbox>
 
-    <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span>
+    <input
+      type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel"
+      (click)="hide()" (key.enter)="hide()"
+    >
   </div>
 
 </ng-template>
diff --git a/client/src/app/modal/instance-config-warning-modal.component.ts b/client/src/app/modal/instance-config-warning-modal.component.ts
index 742a7dd41..5e1433548 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.ts
+++ b/client/src/app/modal/instance-config-warning-modal.component.ts
@@ -24,7 +24,7 @@ export class InstanceConfigWarningModalComponent {
   show (about: About) {
     this.about = about
 
-    const ref = this.modalService.open(this.modal)
+    const ref = this.modalService.open(this.modal, { centered: true })
 
     ref.result.finally(() => {
       if (this.stopDisplayModal === true) this.doNotOpenAgain()
diff --git a/client/src/app/modal/quick-settings-modal.component.html b/client/src/app/modal/quick-settings-modal.component.html
new file mode 100644
index 000000000..e2ea51b92
--- /dev/null
+++ b/client/src/app/modal/quick-settings-modal.component.html
@@ -0,0 +1,20 @@
+<ng-template #modal let-hide="close">
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Settings</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+  
+  <div class="modal-body">
+    <div i18n class="mb-4 quick-settings-title">Display settings</div>
+
+    <my-account-video-settings *ngIf="!isUserLoggedIn()" [user]="user" [userInformationLoaded]="userInformationLoaded" [reactiveUpdate]="true" [notifyOnUpdate]="true">
+      <ng-container ngProjectAs="inner-title">
+        <div i18n class="mb-4 mt-4 quick-settings-title">Video settings</div>
+      </ng-container>
+    </my-account-video-settings>
+
+    <div i18n class="mb-4 mt-4 quick-settings-title">Interface settings</div>
+
+    <my-account-interface-settings *ngIf="!isUserLoggedIn()" [user]="user" [userInformationLoaded]="userInformationLoaded" [reactiveUpdate]="true" [notifyOnUpdate]="true"></my-account-interface-settings>
+  </div>
+</ng-template>
diff --git a/client/src/app/modal/quick-settings-modal.component.scss b/client/src/app/modal/quick-settings-modal.component.scss
new file mode 100644
index 000000000..ef21542f3
--- /dev/null
+++ b/client/src/app/modal/quick-settings-modal.component.scss
@@ -0,0 +1,39 @@
+@import '_mixins';
+
+.modal-button {
+  @include disable-default-a-behaviour;
+  transform: translateY(2px);
+
+  button {
+    @include peertube-button;
+    @include grey-button;
+    @include button-with-icon(18px, 4px, -1px);
+
+    my-global-icon {
+      @include apply-svg-color(#585858);
+    }
+  }
+
+  & + .modal-button {
+    margin-left: 1rem;
+  }
+}
+
+.icon {
+  @include disable-outline;
+  @include icon(22px);
+  opacity: 0.6;
+  margin-left: -1px;
+
+  &.icon-shortcuts  {
+    position: relative;
+    top: -1px;
+    margin-right: 4px;
+
+    background-image: url('../../assets/images/menu/keyboard.png');
+  }
+}
+
+.quick-settings-title {
+  @include in-content-small-title;
+}
\ No newline at end of file
diff --git a/client/src/app/modal/quick-settings-modal.component.ts b/client/src/app/modal/quick-settings-modal.component.ts
new file mode 100644
index 000000000..41d6c9f47
--- /dev/null
+++ b/client/src/app/modal/quick-settings-modal.component.ts
@@ -0,0 +1,62 @@
+import { Component, ViewChild, OnInit } from '@angular/core'
+import { AuthService, AuthStatus } from '@app/core'
+import { FormReactive, FormValidatorService, UserService, User } from '@app/shared'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { ReplaySubject } from 'rxjs'
+import { LocalStorageService } from '@app/shared/misc/storage.service'
+import { filter } from 'rxjs/operators'
+
+@Component({
+  selector: 'my-quick-settings',
+  templateUrl: './quick-settings-modal.component.html',
+  styleUrls: [ './quick-settings-modal.component.scss' ]
+})
+export class QuickSettingsModalComponent extends FormReactive implements OnInit {
+  @ViewChild('modal', { static: true }) modal: NgbModal
+
+  user: User
+  userInformationLoaded = new ReplaySubject<boolean>(1)
+
+  private openedModal: NgbModalRef
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private modalService: NgbModal,
+    private userService: UserService,
+    private authService: AuthService,
+    private localStorageService: LocalStorageService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.user = this.userService.getAnonymousUser()
+    this.localStorageService.watch().subscribe(
+      () => this.user = this.userService.getAnonymousUser()
+    )
+    this.userInformationLoaded.next(true)
+
+    this.authService.loginChangedSource
+      .pipe(filter(status => status !== AuthStatus.LoggedIn))
+      .subscribe(
+        () => {
+          this.user = this.userService.getAnonymousUser()
+          this.userInformationLoaded.next(true)
+        }
+      )
+  }
+
+  isUserLoggedIn () {
+    return this.authService.isLoggedIn()
+  }
+
+  show () {
+    this.openedModal = this.modalService.open(this.modal, { centered: true })
+  }
+
+  hide () {
+    this.openedModal.close()
+    this.form.reset()
+  }
+}
diff --git a/client/src/app/modal/welcome-modal.component.html b/client/src/app/modal/welcome-modal.component.html
index 9b210eb4d..8bfcc4bf6 100644
--- a/client/src/app/modal/welcome-modal.component.html
+++ b/client/src/app/modal/welcome-modal.component.html
@@ -76,10 +76,14 @@
   </div>
 
   <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-understood" (click)="hide()">Remind me later</span>
-
-    <a i18n (click)="doNotOpenAgain(); hide()" class="configure-instance-button" href="/admin/config/edit-custom" target="_blank"
-       rel="noopener noreferrer">
+    <input
+      type="button" role="button" i18n-value value="Remind me later" class="action-button action-button-understood"
+      (click)="hide()" (key.enter)="hide()"
+    >
+
+    <a i18n (click)="doNotOpenAgain(); hide()" (key.enter)="doNotOpenAgain(); hide()"
+       class="configure-instance-button" href="/admin/config/edit-custom" target="_blank"
+       rel="noopener noreferrer" ngbAutofocus>
       Configure my instance
     </a>
   </div>
diff --git a/client/src/app/modal/welcome-modal.component.ts b/client/src/app/modal/welcome-modal.component.ts
index 19a147b85..e022776e3 100644
--- a/client/src/app/modal/welcome-modal.component.ts
+++ b/client/src/app/modal/welcome-modal.component.ts
@@ -18,7 +18,8 @@ export class WelcomeModalComponent {
   ) { }
 
   show () {
-    this.modalService.open(this.modal,{
+    this.modalService.open(this.modal, {
+      centered: true,
       backdrop: 'static',
       keyboard: false,
       size: 'lg'
diff --git a/client/src/app/search/search-filters.component.html b/client/src/app/search/search-filters.component.html
index 07fb2c048..54fc7338f 100644
--- a/client/src/app/search/search-filters.component.html
+++ b/client/src/app/search/search-filters.component.html
@@ -46,6 +46,7 @@
               type="text" id="original-publication-after" name="original-publication-after"
               i18n-placeholder placeholder="After..."
               [(ngModel)]="originallyPublishedStartYear"
+              class="form-control"
             >
           </div>
           <div class="col-sm-6">
@@ -55,6 +56,7 @@
               type="text" id="original-publication-before" name="original-publication-before"
               i18n-placeholder placeholder="Before..."
               [(ngModel)]="originallyPublishedEndYear"
+              class="form-control"
             >
           </div>
         </div>
@@ -102,8 +104,8 @@
           Reset
         </button>
         <div class="peertube-select-container">
-          <select id="category" name="category" [(ngModel)]="advancedSearch.categoryOneOf">
-            <option [value]="undefined" i18n>Any or no category set</option>
+          <select id="category" name="category" [(ngModel)]="advancedSearch.categoryOneOf" class="form-control">
+            <option [value]="undefined" i18n>Display all categories</option>
             <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
           </select>
         </div>
@@ -115,8 +117,8 @@
           Reset
         </button>
         <div class="peertube-select-container">
-          <select id="licence" name="licence" [(ngModel)]="advancedSearch.licenceOneOf">
-            <option [value]="undefined" i18n>Any or no license set</option>
+          <select id="licence" name="licence" [(ngModel)]="advancedSearch.licenceOneOf" class="form-control">
+            <option [value]="undefined" i18n>Display all licenses</option>
             <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
           </select>
         </div>
@@ -128,8 +130,8 @@
           Reset
         </button>
         <div class="peertube-select-container">
-          <select id="language" name="language" [(ngModel)]="advancedSearch.languageOneOf">
-            <option [value]="undefined" i18n>Any or no language set</option>
+          <select id="language" name="language" [(ngModel)]="advancedSearch.languageOneOf" class="form-control">
+            <option [value]="undefined" i18n>Display all languages</option>
             <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
           </select>
         </div>
@@ -146,7 +148,7 @@
           [(ngModel)]="advancedSearch.tagsAllOf" name="tagsAllOf" id="tagsAllOf"
           [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
           i18n-placeholder placeholder="+ Tag" i18n-secondaryPlaceholder secondaryPlaceholder="Enter a tag"
-          maxItems="5" modelAsStrings="true"
+          [maxItems]="5" [modelAsStrings]="true"
         ></tag-input>
       </div>
 
@@ -159,7 +161,7 @@
           [(ngModel)]="advancedSearch.tagsOneOf" name="tagsOneOf" id="tagsOneOf"
           [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
           i18n-placeholder placeholder="+ Tag" i18n-secondaryPlaceholder secondaryPlaceholder="Enter a tag"
-          maxItems="5" modelAsStrings="true"
+          [maxItems]="5" [modelAsStrings]="true"
         ></tag-input>
       </div>
     </div>
diff --git a/client/src/app/search/search-filters.component.scss b/client/src/app/search/search-filters.component.scss
index 99af2e4c5..a88a1c0b0 100644
--- a/client/src/app/search/search-filters.component.scss
+++ b/client/src/app/search/search-filters.component.scss
@@ -66,65 +66,4 @@ input[type=submit] {
   white-space: nowrap;
 }
 
-::ng-deep {
-  .ng2-tag-input {
-    border: none !important;
-  }
-
-  .ng2-tags-container {
-    display: flex;
-    align-items: center;
-    border: 1px solid #C6C6C6;
-    border-radius: 3px;
-    padding: 5px !important;
-    height: max-content;
-  }
-
-  tag-input-form {
-    input {
-      height: 30px !important;
-      font-size: 12px !important;
-
-      background-color: var(--mainBackgroundColor) !important;
-      color: var(--mainForegroundColor) !important;
-    }
-  }
-
-  tag {
-    background-color: $grey-background-color !important;
-    color: #000 !important;
-    border-radius: 3px !important;
-    font-size: 12px !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 {
-      position: relative;
-      top: -1px;
-      height: auto !important;
-      vertical-align: middle !important;
-
-      path  {
-        fill: $grey-foreground-color !important;
-      }
-    }
-
-    &:hover {
-      transform: none !important;
-    }
-  }
-}
+@include ng2-tags;
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index d4d8bbcf7..641647e2e 100644
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -82,11 +82,35 @@
 }
 
 @media screen and (max-width: $small-view) {
-  .video-channel-names {
-    flex-direction: column !important;
+  .search-result {
+    .entry.video-channel,
+    .entry.video {
+      flex-direction: column;
+      height: auto;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      
+      img {
+        margin: 0;
+      }
+
+      img {
+        margin: 0;
+      }
 
-    .video-channel-name {
-      margin-left: 0 !important;
+      .video-channel-info .video-channel-names {
+        align-items: center;
+        flex-direction: column !important;
+
+        .video-channel-name {
+          margin-left: 0 !important;
+        }
+      }
+
+      my-subscribe-button {
+        margin-top: 5px;
+      }
     }
   }
 }
@@ -100,12 +124,6 @@
     }
 
     .entry {
-      flex-direction: column;
-      height: auto;
-      justify-content: center;
-      align-items: center;
-      text-align: center;
-
       &.video {
         .video-info-name,
         .video-info-account {
@@ -126,16 +144,6 @@
           }
         }
       }
-
-      &.video-channel {
-        .video-channel-info .video-channel-names {
-          align-items: center;
-        }
-
-        my-subscribe-button {
-          margin-top: 5px;
-        }
-      }
     }
   }
 }
diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts
index dfd8d8823..075994dd3 100644
--- a/client/src/app/search/search.component.ts
+++ b/client/src/app/search/search.component.ts
@@ -141,7 +141,8 @@ export class SearchComponent implements OnInit, OnDestroy {
     return this.advancedSearch.size()
   }
 
-  removeVideoFromArray (video: Video) {
+  // Add VideoChannel for typings, but the template already checks "video" argument is a video
+  removeVideoFromArray (video: Video | VideoChannel) {
     this.results = this.results.filter(r => !this.isVideo(r) || r.id !== video.id)
   }
 
diff --git a/client/src/app/search/search.service.ts b/client/src/app/search/search.service.ts
index 7610fee8c..3cad5aaa7 100644
--- a/client/src/app/search/search.service.ts
+++ b/client/src/app/search/search.service.ts
@@ -11,6 +11,7 @@ import { Video } from '@app/shared/video/video.model'
 import { AdvancedSearch } from '@app/search/advanced-search.model'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
+import { peertubeLocalStorage } from '@app/shared/misc/peertube-web-storage'
 
 @Injectable()
 export class SearchService {
@@ -21,7 +22,11 @@ export class SearchService {
     private restExtractor: RestExtractor,
     private restService: RestService,
     private videoService: VideoService
-  ) {}
+  ) {
+    // Add ability to override search endpoint if the user updated this local storage key
+    const searchUrl = peertubeLocalStorage.getItem('search-url')
+    if (searchUrl) SearchService.BASE_SEARCH_URL = searchUrl
+  }
 
   searchVideos (parameters: {
     search: string,
diff --git a/client/src/app/shared/angular/from-now.pipe.ts b/client/src/app/shared/angular/from-now.pipe.ts
index 3a9a76411..9851468ee 100644
--- a/client/src/app/shared/angular/from-now.pipe.ts
+++ b/client/src/app/shared/angular/from-now.pipe.ts
@@ -12,9 +12,8 @@ export class FromNowPipe implements PipeTransform {
     const seconds = Math.floor((Date.now() - argDate.getTime()) / 1000)
 
     let interval = Math.floor(seconds / 31536000)
-    if (interval > 1) {
-      return this.i18n('{{interval}} years ago', { interval })
-    }
+    if (interval > 1) return this.i18n('{{interval}} years ago', { interval })
+    if (interval === 1) return this.i18n('{{interval}} year ago', { interval })
 
     interval = Math.floor(seconds / 2592000)
     if (interval > 1) return this.i18n('{{interval}} months ago', { interval })
@@ -35,6 +34,6 @@ export class FromNowPipe implements PipeTransform {
     interval = Math.floor(seconds / 60)
     if (interval >= 1) return this.i18n('{{interval}} min ago', { interval })
 
-    return this.i18n('{{interval}} sec ago', { interval: Math.max(0, seconds) })
+    return this.i18n('just now')
   }
 }
diff --git a/client/src/app/shared/angular/highlight.pipe.ts b/client/src/app/shared/angular/highlight.pipe.ts
new file mode 100644
index 000000000..fb6042280
--- /dev/null
+++ b/client/src/app/shared/angular/highlight.pipe.ts
@@ -0,0 +1,54 @@
+import { PipeTransform, Pipe } from '@angular/core'
+import { SafeHtml } from '@angular/platform-browser'
+
+// Thanks https://gist.github.com/adamrecsko/0f28f474eca63e0279455476cc11eca7#gistcomment-2917369
+@Pipe({ name: 'highlight' })
+export class HighlightPipe implements PipeTransform {
+  /* use this for single match search */
+  static SINGLE_MATCH = 'Single-Match'
+  /* use this for single match search with a restriction that target should start with search string */
+  static SINGLE_AND_STARTS_WITH_MATCH = 'Single-And-StartsWith-Match'
+  /* use this for global search */
+  static MULTI_MATCH = 'Multi-Match'
+
+  // tslint:disable-next-line:no-empty
+  constructor () {}
+
+  transform (
+      contentString: string = null,
+      stringToHighlight: string = null,
+      option = 'Single-And-StartsWith-Match',
+      caseSensitive = false,
+      highlightStyleName = 'search-highlight'
+  ): SafeHtml {
+    if (stringToHighlight && contentString && option) {
+      let regex: any = ''
+      const caseFlag: string = !caseSensitive ? 'i' : ''
+      switch (option) {
+        case 'Single-Match': {
+          regex = new RegExp(stringToHighlight, caseFlag)
+          break
+        }
+        case 'Single-And-StartsWith-Match': {
+          regex = new RegExp('^' + stringToHighlight, caseFlag)
+          break
+        }
+        case 'Multi-Match': {
+          regex = new RegExp(stringToHighlight, 'g' + caseFlag)
+          break
+        }
+        default: {
+          // default will be a global case-insensitive match
+          regex = new RegExp(stringToHighlight, 'gi')
+        }
+      }
+      const replaced = contentString.replace(
+          regex,
+          (match) => `<span class="${highlightStyleName}">${match}</span>`
+      )
+      return replaced
+    } else {
+      return contentString
+    }
+  }
+}
diff --git a/client/src/app/shared/angular/timestamp-route-transformer.directive.ts b/client/src/app/shared/angular/timestamp-route-transformer.directive.ts
index f4d9aeb1f..45e023695 100644
--- a/client/src/app/shared/angular/timestamp-route-transformer.directive.ts
+++ b/client/src/app/shared/angular/timestamp-route-transformer.directive.ts
@@ -10,31 +10,30 @@ export class TimestampRouteTransformerDirective {
   public onClick ($event: Event) {
     const target = $event.target as HTMLLinkElement
 
-    if (target.hasAttribute('href')) {
-      const ngxLink = document.createElement('a')
-      ngxLink.href = target.getAttribute('href')
-
-      // we only care about reflective links
-      if (ngxLink.host !== window.location.host) return
-
-      const ngxLinkParams = new URLSearchParams(ngxLink.search)
-      if (ngxLinkParams.has('start')) {
-        const separators = ['h', 'm', 's']
-        const start = ngxLinkParams
-          .get('start')
-          .match(new RegExp('(\\d{1,9}[' + separators.join('') + '])','g')) // match digits before any given separator
-          .map(t => {
-            if (t.includes('h')) return parseInt(t, 10) * 3600
-            if (t.includes('m')) return parseInt(t, 10) * 60
-            return parseInt(t, 10)
-          })
-          .reduce((acc, t) => acc + t)
-        this.timestampClicked.emit(start)
-      }
-
-      $event.preventDefault()
-    }
-
-    return
+    if (target.hasAttribute('href') !== true) return
+
+    const ngxLink = document.createElement('a')
+    ngxLink.href = target.getAttribute('href')
+
+    // we only care about reflective links
+    if (ngxLink.host !== window.location.host) return
+
+    const ngxLinkParams = new URLSearchParams(ngxLink.search)
+    if (ngxLinkParams.has('start') !== true) return
+
+    const separators = ['h', 'm', 's']
+    const start = ngxLinkParams
+      .get('start')
+      .match(new RegExp('(\\d{1,9}[' + separators.join('') + '])','g')) // match digits before any given separator
+      .map(t => {
+        if (t.includes('h')) return parseInt(t, 10) * 3600
+        if (t.includes('m')) return parseInt(t, 10) * 60
+        return parseInt(t, 10)
+      })
+      .reduce((acc, t) => acc + t)
+
+    this.timestampClicked.emit(start)
+
+    $event.preventDefault()
   }
 }
diff --git a/client/src/app/shared/angular/video-duration-formatter.pipe.ts b/client/src/app/shared/angular/video-duration-formatter.pipe.ts
index c92631a75..4b6767415 100644
--- a/client/src/app/shared/angular/video-duration-formatter.pipe.ts
+++ b/client/src/app/shared/angular/video-duration-formatter.pipe.ts
@@ -1,19 +1,28 @@
 import { Pipe, PipeTransform } from '@angular/core'
-
-// Thanks: https://stackoverflow.com/a/46055604
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Pipe({
   name: 'myVideoDurationFormatter'
 })
 export class VideoDurationPipe implements PipeTransform {
+
+  constructor (private i18n: I18n) {
+
+  }
+
   transform (value: number): string {
-    const minutes = Math.floor(value / 60)
-    const hours = Math.floor(minutes / 60)
+    const hours = Math.floor(value / 3600)
+    const minutes = Math.floor((value % 3600) / 60)
+    const seconds = value % 60
 
     if (hours > 0) {
-      return hours + ' h ' + (minutes - hours * 60) + ' min ' + (value - (minutes - hours * 60) * 60) + ' sec'
+      return this.i18n('{{hours}} h {{minutes}} min {{seconds}} sec', { hours, minutes, seconds })
+    }
+
+    if (minutes > 0) {
+      return this.i18n('{{minutes}} min {{seconds}} sec', { minutes, seconds })
     }
 
-    return minutes + ' min ' + (value - minutes * 60) + ' sec'
+    return this.i18n('{{seconds}} sec', { seconds })
   }
 }
diff --git a/client/src/app/shared/blocklist/blocklist.service.ts b/client/src/app/shared/blocklist/blocklist.service.ts
index c1f7312f0..5cf265bc1 100644
--- a/client/src/app/shared/blocklist/blocklist.service.ts
+++ b/client/src/app/shared/blocklist/blocklist.service.ts
@@ -76,10 +76,14 @@ export class BlocklistService {
 
   /*********************** Instance -> Account blocklist ***********************/
 
-  getInstanceAccountBlocklist (pagination: RestPagination, sort: SortMeta) {
+  getInstanceAccountBlocklist (options: { pagination: RestPagination, sort: SortMeta, search: string }) {
+    const { pagination, sort, search } = options
+
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
 
+    if (search) params = params.append('search', search)
+
     return this.authHttp.get<ResultList<AccountBlock>>(BlocklistService.BASE_SERVER_BLOCKLIST_URL + '/accounts', { params })
                .pipe(
                  map(res => this.restExtractor.convertResultListDateToHuman(res)),
@@ -104,10 +108,14 @@ export class BlocklistService {
 
   /*********************** Instance -> Server blocklist ***********************/
 
-  getInstanceServerBlocklist (pagination: RestPagination, sort: SortMeta) {
+  getInstanceServerBlocklist (options: { pagination: RestPagination, sort: SortMeta, search: string }) {
+    const { pagination, sort, search } = options
+
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
 
+    if (search) params = params.append('search', search)
+
     return this.authHttp.get<ResultList<ServerBlock>>(BlocklistService.BASE_SERVER_BLOCKLIST_URL + '/servers', { params })
                .pipe(
                  map(res => this.restExtractor.convertResultListDateToHuman(res)),
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index cd993db9f..952b3b6f8 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -1,4 +1,4 @@
-<div class="dropdown-root" ngbDropdown [placement]="placement" *ngIf="areActionsDisplayed(actions, entry)">
+<div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)">
   <div
     class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
     ngbDropdownToggle role="button"
@@ -24,17 +24,27 @@
             </div>
           </ng-template>
 
-          <a *ngIf="action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" class="dropdown-item" [routerLink]="action.linkBuilder(entry)" [title]="action.title || ''">
+          <a
+            *ngIf="action.linkBuilder && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            class="dropdown-item"  [routerLink]="action.linkBuilder(entry)" [title]="action.title || ''"
+          >
             <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
           </a>
 
           <span
-            *ngIf="!action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" (click)="action.handler(entry)"
-            class="custom-action dropdown-item" role="button" [title]="action.title || ''"
+            *ngIf="!action.linkBuilder && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            class="custom-action dropdown-item" role="button" [title]="action.title || ''" (click)="action.handler(entry)"
           >
             <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
           </span>
 
+          <h6
+            *ngIf="!action.linkBuilder && action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            class="dropdown-header" role="button" [title]="action.title || ''" (click)="action.handler(entry)"
+          >
+            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
+          </h6>
+
         </ng-container>
       </ng-container>
 
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index 442c90984..7a030f32c 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -51,6 +51,10 @@
 }
 
 .dropdown-menu {
+  .dropdown-header {
+    padding: 0.2rem 1rem;
+  }
+
   .dropdown-item {
     display: flex;
     cursor: pointer;
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index a8b3ab16c..15f9556dc 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -9,6 +9,7 @@ export type DropdownAction<T> = {
   handler?: (a: T) => any
   linkBuilder?: (a: T) => (string | number)[]
   isDisplayed?: (a: T) => boolean
+  isHeader?: boolean
 }
 
 export type DropdownButtonSize = 'normal' | 'small'
@@ -26,6 +27,7 @@ export class ActionDropdownComponent<T> {
   @Input() entry: T
 
   @Input() placement = 'bottom-left auto'
+  @Input() container: null | 'body'
 
   @Input() buttonSize: DropdownButtonSize = 'normal'
   @Input() buttonDirection: DropdownDirection = 'horizontal'
@@ -34,10 +36,10 @@ export class ActionDropdownComponent<T> {
   @Input() label: string
   @Input() theme: DropdownTheme = 'grey'
 
-  getActions () {
-    if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions
+  getActions (): DropdownAction<T>[][] {
+    if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions as DropdownAction<T>[][]
 
-    return [ this.actions ]
+    return [ this.actions as DropdownAction<T>[] ]
   }
 
   areActionsDisplayed (actions: Array<DropdownAction<T> | DropdownAction<T>[]>, entry: T): boolean {
diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss
index 2a8cfc748..3ccfefd7e 100644
--- a/client/src/app/shared/buttons/button.component.scss
+++ b/client/src/app/shared/buttons/button.component.scss
@@ -10,11 +10,26 @@ my-small-loader ::ng-deep .root {
 .action-button {
   @include peertube-button-link;
   @include button-with-icon(21px, 0, -2px);
+}
 
-  // FIXME: Firefox does not apply global .orange-button icon color
-  &.orange-button {
-    @include apply-svg-color(#fff)
-  }
+.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;
 }
 
 // In a table, try to minimize the space taken by this button
diff --git a/client/src/app/shared/buttons/edit-button.component.ts b/client/src/app/shared/buttons/edit-button.component.ts
index 1fe4f7b30..9cfe1a3bb 100644
--- a/client/src/app/shared/buttons/edit-button.component.ts
+++ b/client/src/app/shared/buttons/edit-button.component.ts
@@ -8,5 +8,5 @@ import { Component, Input } from '@angular/core'
 
 export class EditButtonComponent {
   @Input() label: string
-  @Input() routerLink: string[] = []
+  @Input() routerLink: string[] | string = []
 }
diff --git a/client/src/app/shared/confirm/confirm.component.html b/client/src/app/shared/confirm/confirm.component.html
index 65df1cd4d..dbc8c23e3 100644
--- a/client/src/app/shared/confirm/confirm.component.html
+++ b/client/src/app/shared/confirm/confirm.component.html
@@ -16,11 +16,15 @@
   </div>
 
   <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-cancel" (click)="dismiss()" role="button">Cancel</span>
+    <input
+      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+      (click)="dismiss()" (key.enter)="dismiss()"
+    >
 
     <input
+      ngbAutofocus
       type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()"
-      (click)="close()"
+      (click)="close()" (key.enter)="confirm()"
     >
   </div>
 </ng-template>
diff --git a/client/src/app/shared/confirm/confirm.component.ts b/client/src/app/shared/confirm/confirm.component.ts
index 763454c4f..c6e40fe72 100644
--- a/client/src/app/shared/confirm/confirm.component.ts
+++ b/client/src/app/shared/confirm/confirm.component.ts
@@ -45,7 +45,6 @@ export class ConfirmComponent implements OnInit {
     )
   }
 
-  @HostListener('document:keydown.enter')
   confirm () {
     if (this.openedModal) this.openedModal.close()
   }
@@ -60,7 +59,7 @@ export class ConfirmComponent implements OnInit {
   showModal () {
     this.inputValue = ''
 
-    this.openedModal = this.modalService.open(this.confirmModal)
+    this.openedModal = this.modalService.open(this.confirmModal, { centered: true })
 
     this.openedModal.result
         .then(() => this.confirmService.confirmResponse.next(true))
diff --git a/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts b/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
index 767e3f026..d20754d11 100644
--- a/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
@@ -56,7 +56,7 @@ export class CustomConfigValidatorsService {
     }
 
     this.SIGNUP_LIMIT = {
-      VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
+      VALIDATORS: [ Validators.required, Validators.min(-1), Validators.pattern('-?[0-9]+') ],
       MESSAGES: {
         'required': this.i18n('Signup limit is required.'),
         'min': this.i18n('Signup limit must be greater than 1.'),
diff --git a/client/src/app/shared/forms/form-validators/user-validators.service.ts b/client/src/app/shared/forms/form-validators/user-validators.service.ts
index 4dff3e422..13b9228d4 100644
--- a/client/src/app/shared/forms/form-validators/user-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/user-validators.service.ts
@@ -8,6 +8,7 @@ export class UserValidatorsService {
   readonly USER_USERNAME: BuildFormValidator
   readonly USER_EMAIL: BuildFormValidator
   readonly USER_PASSWORD: BuildFormValidator
+  readonly USER_PASSWORD_OPTIONAL: BuildFormValidator
   readonly USER_CONFIRM_PASSWORD: BuildFormValidator
   readonly USER_VIDEO_QUOTA: BuildFormValidator
   readonly USER_VIDEO_QUOTA_DAILY: BuildFormValidator
@@ -56,6 +57,17 @@ export class UserValidatorsService {
       }
     }
 
+    this.USER_PASSWORD_OPTIONAL = {
+      VALIDATORS: [
+        Validators.minLength(6),
+        Validators.maxLength(255)
+      ],
+      MESSAGES: {
+        'minlength': this.i18n('Password must be at least 6 characters long.'),
+        'maxlength': this.i18n('Password cannot be more than 255 characters long.')
+      }
+    }
+
     this.USER_CONFIRM_PASSWORD = {
       VALIDATORS: [],
       MESSAGES: {
diff --git a/client/src/app/shared/forms/input-readonly-copy.component.html b/client/src/app/shared/forms/input-readonly-copy.component.html
index 27571b63f..9566e9741 100644
--- a/client/src/app/shared/forms/input-readonly-copy.component.html
+++ b/client/src/app/shared/forms/input-readonly-copy.component.html
@@ -1,8 +1,8 @@
-<div class="input-group">
+<div class="input-group input-group-sm">
   <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="value" />
 
   <div class="input-group-append">
-    <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
+    <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
       <span class="glyphicon glyphicon-copy"></span>
     </button>
   </div>
diff --git a/client/src/app/shared/forms/markdown-textarea.component.html b/client/src/app/shared/forms/markdown-textarea.component.html
index 0925b9ad5..a519f3e0a 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.html
+++ b/client/src/app/shared/forms/markdown-textarea.component.html
@@ -1,17 +1,36 @@
-<div class="root" [ngStyle]="{ 'flex-direction': flexDirection }">
-  <textarea
+<div class="root" [ngClass]="{ 'maximized': isMaximized }" [ngStyle]="{ 'max-width': textareaMaxWidth }">
+  <textarea #textarea
     [(ngModel)]="content" (ngModelChange)="onModelChange()"
-    [ngClass]="classes" [ngStyle]="{ width: textareaWidth, height: textareaHeight, 'margin-right': textareaMarginRight }"
+    class="form-control" [ngClass]="classes"
+    [ngStyle]="{ height: textareaHeight }"
     [id]="name" [name]="name">
   </textarea>
 
-  <ngb-tabset *ngIf="arePreviewsDisplayed()" class="previews" type="pills">
-    <ngb-tab *ngIf="truncate !== undefined" i18n-title title="Truncated preview">
-      <ng-template ngbTabContent><div [innerHTML]="truncatedPreviewHTML"></div></ng-template>
-    </ngb-tab>
+  <div ngbNav #nav="ngbNav" class="nav-pills nav-preview">
+    <ng-container ngbNavItem *ngIf="truncate !== undefined">
+      <a ngbNavLink i18n>Truncated preview</a>
 
-    <ngb-tab i18n-title title="Complete preview">
-      <ng-template ngbTabContent><div [innerHTML]="previewHTML"></div></ng-template>
-    </ngb-tab>
-  </ngb-tabset>
+      <ng-template ngbNavContent>
+        <div [innerHTML]="truncatedPreviewHTML"></div>
+      </ng-template>
+    </ng-container>
+
+    <ng-container ngbNavItem>
+      <a ngbNavLink i18n>Complete preview</a>
+
+      <ng-template ngbNavContent>
+        <div [innerHTML]="previewHTML"></div>
+      </ng-template>
+    </ng-container>
+
+    <my-button
+      *ngIf="!isMaximized" icon="fullscreen" (click)="onMaximizeClick()"
+    ></my-button>
+
+    <my-button
+      *ngIf="isMaximized" icon="exit-fullscreen" (click)="onMaximizeClick()"
+    ></my-button>
+  </div>
+
+  <div [ngbNavOutlet]="nav"></div>
 </div>
diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss
index eacaf36a2..8e5739e45 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/forms/markdown-textarea.component.scss
@@ -1,34 +1,250 @@
 @import '_variables';
 @import '_mixins';
 
-.root {
-  display: flex;
+$nav-preview-tab-height: 30px;
+$base-padding: 15px;
+$input-border-color: #C6C6C6;
+$input-border-radius: 3px;
+
+@mixin in-small-view {
+  .root {
+    display: flex;
+    flex-direction: column;
+
+    textarea {
+      @include peertube-textarea(100%, 150px);
+
+      background-color: var(--textareaBackgroundColor);
+      font-family: monospace;
+      font-size: 13px;
+      border-bottom: none;
+      border-bottom-left-radius: unset;
+      border-bottom-right-radius: unset;
+    }
 
-  textarea {
-    @include peertube-textarea(100%, 150px);
+    .nav-preview {
+      display: block;
+      text-align: right;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      padding-left: 10px;
+      padding-right: 10px;
+      border-top: 1px dashed $input-border-color;
+      border-left: 1px solid $input-border-color;
+      border-right: 1px solid $input-border-color;
+      border-bottom: 1px solid $input-border-color;
+      border-bottom-right-radius: $input-border-radius;
 
-    margin-bottom: 15px;
+      border-bottom-left-radius: $input-border-radius;
+      ::ng-deep {
+        .nav-link {
+          display: none !important;
+        }
+
+        .grey-button {
+          padding: 0 12px 0 12px;
+        }
+      }
+    }
+
+    ::ng-deep {
+      .tab-content {
+        display: none;
+      }
+    }
   }
+}
+
+@mixin nav-preview-medium {
+  display: flex;
+  flex-grow: 1;
+  border-bottom-left-radius: unset;
+  border-bottom-right-radius: unset;
+  border-bottom: 2px solid var(--mainColor);
 
-  .previews {
-    max-height: 150px;
-    overflow-y: auto;
-    flex-grow: 1;
+  :first-child {
+    margin-left: auto;
   }
 
   ::ng-deep {
     .nav-link {
       display: flex !important;
       align-items: center;
-      height: 30px !important;
+      height: $nav-preview-tab-height !important;
       padding: 0 15px !important;
+      font-size: 85% !important;
+      opacity: .7;
+    }
+
+    .grey-button {
+      margin-left: 5px;
+    }
+  }
+}
+
+@mixin content-preview-base {
+  display: block;
+  min-height: 75px;
+  padding: $base-padding;
+  overflow-y: auto;
+  font-size: 15px;
+  word-wrap: break-word;
+}
+
+@mixin maximized-base {
+  flex-direction: row;
+  z-index: #{z(header) - 1};
+  position: fixed;
+  top: $header-height;
+  left: $menu-width;
+  max-height: none !important;
+  max-width: none !important;
+  width: calc(100% - #{$menu-width});
+  height: calc(100vh - #{$header-height}) !important;
+
+  $nav-preview-vertical-padding: 40px;
+
+  .nav-preview {
+    @include nav-preview-medium();
+    padding-top: #{$nav-preview-vertical-padding / 2};
+    padding-bottom: #{$nav-preview-vertical-padding / 2};
+    padding-left: 0px;
+    padding-right: 0px;
+    position: absolute;
+    background-color: var(--mainBackgroundColor);
+    width: 100% !important;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+
+    :last-child {
+      margin-right: $not-expanded-horizontal-margins;
     }
+  }
+
+  ::ng-deep .tab-content {
+    @include content-preview-base();
+    background-color: var(--mainBackgroundColor);
+    scrollbar-color: var(--actionButtonColor) var(--mainBackgroundColor);
+  }
 
-    .tab-content {
-      min-height: 75px;
-      padding: 15px;
-      font-size: 15px;
-      word-wrap: break-word;
+  textarea,
+  ::ng-deep .tab-content {
+    max-height: none !important;
+    max-width: none !important;
+    margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
+    height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
+    width: 50% !important;
+    border: none !important;
+    border-radius: unset !important;
+  }
+
+  :host-context(.expanded) {
+    .root.maximized {
+      left: 0;
+      width: 100%;
+    }
+  }
+}
+
+@mixin maximized-in-small-view {
+  .root.maximized {
+    @include maximized-base();
+
+    textarea {
+      display: none;
     }
+
+    ::ng-deep .tab-content {
+      width: 100% !important;
+    }
+  }
+}
+
+@mixin maximized-tabs-in-mobile-view {
+  // Ellipsis on tabs for mobile view
+  .root.maximized {
+    .nav-preview {
+      ::ng-deep .nav-link {
+        @include ellipsis();
+
+        display: block !important;
+        max-width: 45% !important;
+        padding: 5px 0 !important;
+        margin-right: 10px !important;
+        text-align: center;
+
+        &:not(.active) {
+          max-width: 15% !important;
+        }
+
+        &.active {
+          padding: 5px 15px !important;
+        }
+      }
+    }
+  }
+}
+
+@mixin in-medium-view {
+  .root {
+    .nav-preview {
+      @include nav-preview-medium();
+    }
+
+    ::ng-deep .tab-content {
+      @include content-preview-base();
+      max-height: 210px;
+      border-bottom: 1px solid $input-border-color;
+      border-left: 1px solid $input-border-color;
+      border-right: 1px solid $input-border-color;
+      border-bottom-left-radius: $input-border-radius;
+      border-bottom-right-radius: $input-border-radius;
+    }
+  }
+}
+
+@mixin maximized-in-medium-view {
+  .root.maximized {
+    @include maximized-base();
+
+    textarea {
+      display: block;
+      padding: $base-padding;
+      border-right: 1px dashed $input-border-color !important;
+      resize: none;
+      scrollbar-color: var(--actionButtonColor) var(--textareaBackgroundColor);
+
+      &:focus {
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+@include in-small-view();
+@include maximized-in-small-view();
+
+@media only screen and (max-width: $mobile-view) {
+  @include maximized-tabs-in-mobile-view();
+}
+
+@media only screen and (max-width: #{$mobile-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include maximized-tabs-in-mobile-view();
+  }
+}
+
+@media only screen and (min-width: $small-view) {
+  :host-context(.expanded) {
+    @include in-medium-view();
+  }
+
+  @include maximized-in-medium-view();
+}
+
+@media only screen and (min-width: #{$small-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include in-medium-view();
   }
 }
diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts
index 19cd37573..dde7b4d98 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/forms/markdown-textarea.component.ts
@@ -1,5 +1,5 @@
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
-import { Component, forwardRef, Input, OnInit } from '@angular/core'
+import { Component, forwardRef, Input, OnInit, ViewChild, ElementRef } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { Subject } from 'rxjs'
 import truncate from 'lodash-es/truncate'
@@ -21,19 +21,19 @@ import { MarkdownService } from '@app/shared/renderer'
 
 export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   @Input() content = ''
-  @Input() classes: string[] = []
-  @Input() textareaWidth = '100%'
+  @Input() classes: string[] | { [klass: string]: any[] | any } = []
+  @Input() textareaMaxWidth = '100%'
   @Input() textareaHeight = '150px'
-  @Input() previewColumn = false
   @Input() truncate: number
   @Input() markdownType: 'text' | 'enhanced' = 'text'
   @Input() markdownVideo = false
   @Input() name = 'description'
 
-  textareaMarginRight = '0'
-  flexDirection = 'column'
+  @ViewChild('textarea') textareaElement: ElementRef
+
   truncatedPreviewHTML = ''
   previewHTML = ''
+  isMaximized = false
 
   private contentChanged = new Subject<string>()
 
@@ -51,11 +51,6 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
         .subscribe(() => this.updatePreviews())
 
     this.contentChanged.next(this.content)
-
-    if (this.previewColumn) {
-      this.flexDirection = 'row'
-      this.textareaMarginRight = '15px'
-    }
   }
 
   propagateChange = (_: any) => { /* empty */ }
@@ -80,8 +75,26 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
     this.contentChanged.next(this.content)
   }
 
-  arePreviewsDisplayed () {
-    return this.screenService.isInSmallView() === false
+  onMaximizeClick () {
+    this.isMaximized = !this.isMaximized
+
+    // Make sure textarea have the focus
+    this.textareaElement.nativeElement.focus()
+
+    // Make sure the window has no scrollbars
+    if (!this.isMaximized) {
+      this.unlockBodyScroll()
+    } else {
+      this.lockBodyScroll()
+    }
+  }
+
+  private lockBodyScroll () {
+    document.getElementById('content').classList.add('lock-scroll')
+  }
+
+  private unlockBodyScroll () {
+    document.getElementById('content').classList.remove('lock-scroll')
   }
 
   private async updatePreviews () {
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.html b/client/src/app/shared/forms/peertube-checkbox.component.html
index c740d852c..704f3e696 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/forms/peertube-checkbox.component.html
@@ -29,6 +29,8 @@
         <ng-template *ngTemplateOutlet="helpTemplate"></ng-template>
       </ng-template>
     </my-help>
+
+    <div *ngIf="recommended" class="recommended" i18n>Recommended</div>
   </div>
 
   <div class="ml-4 d-flex flex-column">
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss
index 3120509b3..c1233e8a5 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/forms/peertube-checkbox.component.scss
@@ -34,4 +34,19 @@
   .wrapper:empty {
     display: none;
   }
+
+  .recommended {
+    margin-left: .5rem;
+    align-self: baseline;
+    display: inline-block;
+    padding: 4px 6px;
+    cursor: default;
+    border-radius: 3px;
+    font-size: 12px;
+    line-height: 12px;
+    font-weight: 500;
+    color: var(--inputPlaceholderColor);
+    background-color: rgba(217,225,232,.1);
+    border: 1px solid rgba(217,225,232,.5);
+  }
 }
\ No newline at end of file
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.ts b/client/src/app/shared/forms/peertube-checkbox.component.ts
index cb7ec8eda..89e79fecd 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.ts
+++ b/client/src/app/shared/forms/peertube-checkbox.component.ts
@@ -21,6 +21,7 @@ export class PeertubeCheckboxComponent implements ControlValueAccessor, AfterCon
   @Input() labelInnerHTML: string
   @Input() helpPlacement = 'top auto'
   @Input() disabled = false
+  @Input() recommended = false
 
   @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective<'label' | 'help'>>
 
diff --git a/client/src/app/shared/forms/timestamp-input.component.scss b/client/src/app/shared/forms/timestamp-input.component.scss
index e7dbcd997..9671cc65f 100644
--- a/client/src/app/shared/forms/timestamp-input.component.scss
+++ b/client/src/app/shared/forms/timestamp-input.component.scss
@@ -1,8 +1,15 @@
+@import 'variables';
+
 p-inputmask {
   ::ng-deep input {
     width: 80px;
     font-size: 15px;
 
     border: none;
+
+    &:focus-within,
+    &:focus {
+      box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+    }
   }
 }
diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index 806aca347..d2700f6c3 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -1,57 +1,62 @@
 import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 const icons = {
-  'add': require('!!raw-loader?!../../../assets/images/global/add.svg'),
-  'user': require('!!raw-loader?!../../../assets/images/global/user.svg'),
-  'sign-out': require('!!raw-loader?!../../../assets/images/global/sign-out.svg'),
-  'syndication': require('!!raw-loader?!../../../assets/images/global/syndication.svg'),
-  'help': require('!!raw-loader?!../../../assets/images/global/help.svg'),
-  'sparkle': require('!!raw-loader?!../../../assets/images/global/sparkle.svg'),
-  'alert': require('!!raw-loader?!../../../assets/images/global/alert.svg'),
-  'cloud-error': require('!!raw-loader?!../../../assets/images/global/cloud-error.svg'),
-  'clock': require('!!raw-loader?!../../../assets/images/global/clock.svg'),
-  'user-add': require('!!raw-loader?!../../../assets/images/global/user-add.svg'),
-  'no': require('!!raw-loader?!../../../assets/images/global/no.svg'),
-  'cloud-download': require('!!raw-loader?!../../../assets/images/global/cloud-download.svg'),
-  'undo': require('!!raw-loader?!../../../assets/images/global/undo.svg'),
-  'history': require('!!raw-loader?!../../../assets/images/global/history.svg'),
-  'circle-tick': require('!!raw-loader?!../../../assets/images/global/circle-tick.svg'),
-  'cog': require('!!raw-loader?!../../../assets/images/global/cog.svg'),
-  'download': require('!!raw-loader?!../../../assets/images/global/download.svg'),
-  'go': require('!!raw-loader?!../../../assets/images/menu/go.svg'),
-  'edit': require('!!raw-loader?!../../../assets/images/global/edit.svg'),
-  'im-with-her': require('!!raw-loader?!../../../assets/images/global/im-with-her.svg'),
-  'delete': require('!!raw-loader?!../../../assets/images/global/delete.svg'),
-  'server': require('!!raw-loader?!../../../assets/images/global/server.svg'),
-  'cross': require('!!raw-loader?!../../../assets/images/global/cross.svg'),
-  'validate': require('!!raw-loader?!../../../assets/images/global/validate.svg'),
-  'tick': require('!!raw-loader?!../../../assets/images/global/tick.svg'),
-  'repeat': require('!!raw-loader?!../../../assets/images/global/repeat.svg'),
-  'inbox-full': require('!!raw-loader?!../../../assets/images/global/inbox-full.svg'),
-  'dislike': require('!!raw-loader?!../../../assets/images/video/dislike.svg'),
-  'support': require('!!raw-loader?!../../../assets/images/video/support.svg'),
-  'like': require('!!raw-loader?!../../../assets/images/video/like.svg'),
-  'more-horizontal': require('!!raw-loader?!../../../assets/images/global/more-horizontal.svg'),
-  'more-vertical': require('!!raw-loader?!../../../assets/images/global/more-vertical.svg'),
-  'share': require('!!raw-loader?!../../../assets/images/video/share.svg'),
-  'upload': require('!!raw-loader?!../../../assets/images/video/upload.svg'),
-  'playlist-add': require('!!raw-loader?!../../../assets/images/video/playlist-add.svg'),
-  'play': require('!!raw-loader?!../../../assets/images/global/play.svg'),
-  'playlists': require('!!raw-loader?!../../../assets/images/global/playlists.svg'),
-  'about': require('!!raw-loader?!../../../assets/images/menu/about.svg'),
-  'globe': require('!!raw-loader?!../../../assets/images/menu/globe.svg'),
-  'home': require('!!raw-loader?!../../../assets/images/menu/home.svg'),
-  'recently-added': require('!!raw-loader?!../../../assets/images/menu/recently-added.svg'),
-  'trending': require('!!raw-loader?!../../../assets/images/menu/trending.svg'),
-  'videos': require('!!raw-loader?!../../../assets/images/global/videos.svg'),
-  'folder': require('!!raw-loader?!../../../assets/images/global/folder.svg'),
-  'administration': require('!!raw-loader?!../../../assets/images/menu/administration.svg'),
-  'subscriptions': require('!!raw-loader?!../../../assets/images/menu/subscriptions.svg'),
-  'users': require('!!raw-loader?!../../../assets/images/global/users.svg'),
-  'search': require('!!raw-loader?!../../../assets/images/global/search.svg'),
-  'refresh': require('!!raw-loader?!../../../assets/images/global/refresh.svg')
+  'add': require('!!raw-loader?!../../../assets/images/global/add.svg').default,
+  'user': require('!!raw-loader?!../../../assets/images/global/user.svg').default,
+  'sign-out': require('!!raw-loader?!../../../assets/images/global/sign-out.svg').default,
+  'syndication': require('!!raw-loader?!../../../assets/images/global/syndication.svg').default,
+  'help': require('!!raw-loader?!../../../assets/images/global/help.svg').default,
+  'sparkle': require('!!raw-loader?!../../../assets/images/global/sparkle.svg').default,
+  'alert': require('!!raw-loader?!../../../assets/images/global/alert.svg').default,
+  'cloud-error': require('!!raw-loader?!../../../assets/images/global/cloud-error.svg').default,
+  'clock': require('!!raw-loader?!../../../assets/images/global/clock.svg').default,
+  'user-add': require('!!raw-loader?!../../../assets/images/global/user-add.svg').default,
+  'no': require('!!raw-loader?!../../../assets/images/global/no.svg').default,
+  'cloud-download': require('!!raw-loader?!../../../assets/images/global/cloud-download.svg').default,
+  'undo': require('!!raw-loader?!../../../assets/images/global/undo.svg').default,
+  'history': require('!!raw-loader?!../../../assets/images/global/history.svg').default,
+  'circle-tick': require('!!raw-loader?!../../../assets/images/global/circle-tick.svg').default,
+  'cog': require('!!raw-loader?!../../../assets/images/global/cog.svg').default,
+  'download': require('!!raw-loader?!../../../assets/images/global/download.svg').default,
+  'go': require('!!raw-loader?!../../../assets/images/menu/go.svg').default,
+  'edit': require('!!raw-loader?!../../../assets/images/global/edit.svg').default,
+  'im-with-her': require('!!raw-loader?!../../../assets/images/global/im-with-her.svg').default,
+  'delete': require('!!raw-loader?!../../../assets/images/global/delete.svg').default,
+  'server': require('!!raw-loader?!../../../assets/images/global/server.svg').default,
+  'cross': require('!!raw-loader?!../../../assets/images/global/cross.svg').default,
+  'validate': require('!!raw-loader?!../../../assets/images/global/validate.svg').default,
+  'tick': require('!!raw-loader?!../../../assets/images/global/tick.svg').default,
+  'repeat': require('!!raw-loader?!../../../assets/images/global/repeat.svg').default,
+  'inbox-full': require('!!raw-loader?!../../../assets/images/global/inbox-full.svg').default,
+  'dislike': require('!!raw-loader?!../../../assets/images/video/dislike.svg').default,
+  'support': require('!!raw-loader?!../../../assets/images/video/support.svg').default,
+  'like': require('!!raw-loader?!../../../assets/images/video/like.svg').default,
+  'more-horizontal': require('!!raw-loader?!../../../assets/images/global/more-horizontal.svg').default,
+  'more-vertical': require('!!raw-loader?!../../../assets/images/global/more-vertical.svg').default,
+  'share': require('!!raw-loader?!../../../assets/images/video/share.svg').default,
+  'upload': require('!!raw-loader?!../../../assets/images/video/upload.svg').default,
+  'playlist-add': require('!!raw-loader?!../../../assets/images/video/playlist-add.svg').default,
+  'play': require('!!raw-loader?!../../../assets/images/global/play.svg').default,
+  'playlists': require('!!raw-loader?!../../../assets/images/global/playlists.svg').default,
+  'globe': require('!!raw-loader?!../../../assets/images/menu/globe.svg').default,
+  'home': require('!!raw-loader?!../../../assets/images/menu/home.svg').default,
+  'recently-added': require('!!raw-loader?!../../../assets/images/menu/recently-added.svg').default,
+  'trending': require('!!raw-loader?!../../../assets/images/menu/trending.svg').default,
+  'video-lang': require('!!raw-loader?!../../../assets/images/global/video-lang.svg').default,
+  'videos': require('!!raw-loader?!../../../assets/images/global/videos.svg').default,
+  'folder': require('!!raw-loader?!../../../assets/images/global/folder.svg').default,
+  'subscriptions': require('!!raw-loader?!../../../assets/images/menu/subscriptions.svg').default,
+  'language': require('!!raw-loader?!../../../assets/images/menu/language.svg').default,
+  'unsensitive': require('!!raw-loader?!../../../assets/images/menu/eye.svg').default,
+  'sensitive': require('!!raw-loader?!../../../assets/images/menu/eye-closed.svg').default,
+  'p2p': require('!!raw-loader?!../../../assets/images/menu/p2p.svg').default,
+  'users': require('!!raw-loader?!../../../assets/images/global/users.svg').default,
+  'search': require('!!raw-loader?!../../../assets/images/global/search.svg').default,
+  'refresh': require('!!raw-loader?!../../../assets/images/global/refresh.svg').default,
+  'npm': require('!!raw-loader?!../../../assets/images/global/npm.svg').default,
+  'fullscreen': require('!!raw-loader?!../../../assets/images/global/fullscreen.svg').default,
+  'exit-fullscreen': require('!!raw-loader?!../../../assets/images/global/exit-fullscreen.svg').default
 }
 
 export type GlobalIconName = keyof typeof icons
diff --git a/client/src/app/shared/images/preview-upload.component.html b/client/src/app/shared/images/preview-upload.component.html
index 5e1d5211b..7c3a2b588 100644
--- a/client/src/app/shared/images/preview-upload.component.html
+++ b/client/src/app/shared/images/preview-upload.component.html
@@ -1,13 +1,11 @@
 <div class="root">
   <div class="preview-container">
     <my-reactive-file
-      [inputName]="inputName" [inputLabel]="inputLabel" [extensions]="videoImageExtensions" [maxFileSize]="maxVideoImageSize"
-      icon="edit" (fileChanged)="onFileChanged($event)"
+      [inputName]="inputName" [inputLabel]="inputLabel" [extensions]="videoImageExtensions" [maxFileSize]="maxVideoImageSize" placement="right"
+      icon="edit" (fileChanged)="onFileChanged($event)" [ngbTooltip]="'(extensions: '+ videoImageExtensions +', '+ maxSizeText +': '+ maxVideoImageSizeInBytes +')'"
     ></my-reactive-file>
 
     <img *ngIf="imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" [src]="imageSrc" class="preview" />
     <div *ngIf="!imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" class="preview no-image"></div>
   </div>
-
-  <div i18n class="file-constraints">(extensions: {{ allowedExtensionsMessage }}, max size: {{ maxVideoImageSize | bytes }})</div>
 </div>
diff --git a/client/src/app/shared/images/preview-upload.component.scss b/client/src/app/shared/images/preview-upload.component.scss
index 257060239..8f3522115 100644
--- a/client/src/app/shared/images/preview-upload.component.scss
+++ b/client/src/app/shared/images/preview-upload.component.scss
@@ -16,11 +16,13 @@
     }
 
     .preview {
-      border: 2px solid grey;
+      object-fit: cover;
       border-radius: 4px;
+      max-width: 100%;
 
       &.no-image {
-        background-color: #ececec;
+        border: 2px solid grey;
+        background-color: var(--mainBackgroundColor);
       }
     }
   }
diff --git a/client/src/app/shared/images/preview-upload.component.ts b/client/src/app/shared/images/preview-upload.component.ts
index f56f5b1f8..7519734ba 100644
--- a/client/src/app/shared/images/preview-upload.component.ts
+++ b/client/src/app/shared/images/preview-upload.component.ts
@@ -3,6 +3,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
 import { ServerService } from '@app/core'
 import { ServerConfig } from '@shared/models'
+import { BytesPipe } from 'ngx-pipes'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-preview-upload',
@@ -24,14 +26,20 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
 
   imageSrc: SafeResourceUrl
   allowedExtensionsMessage = ''
+  maxSizeText: string
 
   private serverConfig: ServerConfig
-  private file: File
+  private bytesPipe: BytesPipe
+  private file: Blob
 
   constructor (
     private sanitizer: DomSanitizer,
-    private serverService: ServerService
-  ) {}
+    private serverService: ServerService,
+    private i18n: I18n
+  ) {
+    this.bytesPipe = new BytesPipe()
+    this.maxSizeText = this.i18n('max size')
+  }
 
   get videoImageExtensions () {
     return this.serverConfig.video.image.extensions
@@ -41,6 +49,10 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
     return this.serverConfig.video.image.size.max
   }
 
+  get maxVideoImageSizeInBytes () {
+    return this.bytesPipe.transform(this.maxVideoImageSize)
+  }
+
   ngOnInit () {
     this.serverConfig = this.serverService.getTmpConfig()
     this.serverService.getConfig()
@@ -49,7 +61,7 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
     this.allowedExtensionsMessage = this.videoImageExtensions.join(', ')
   }
 
-  onFileChanged (file: File) {
+  onFileChanged (file: Blob) {
     this.file = file
 
     this.propagateChange(this.file)
diff --git a/client/src/app/shared/instance/instance-features-table.component.html b/client/src/app/shared/instance/instance-features-table.component.html
index fd8b3354f..99b854d13 100644
--- a/client/src/app/shared/instance/instance-features-table.component.html
+++ b/client/src/app/shared/instance/instance-features-table.component.html
@@ -37,8 +37,8 @@
     <tr>
       <td i18n class="sub-label">Video uploads</td>
       <td>
-        <span *ngIf="serverConfig.autoBlacklist.videos.ofUsers.enabled">Requires manual validation by moderators</span>
-        <span *ngIf="!serverConfig.autoBlacklist.videos.ofUsers.enabled">Automatically published</span>
+        <span i18n *ngIf="serverConfig.autoBlacklist.videos.ofUsers.enabled">Requires manual validation by moderators</span>
+        <span i18n *ngIf="!serverConfig.autoBlacklist.videos.ofUsers.enabled">Automatically published</span>
       </td>
     </tr>
 
@@ -91,5 +91,16 @@
         <my-feature-boolean [value]="serverConfig.tracker.enabled"></my-feature-boolean>
       </td>
     </tr>
+
+    <tr>
+      <td i18n class="label" colspan="2">Search</td>
+    </tr>
+
+    <tr>
+      <td i18n class="sub-label">Users can resolve distant content</td>
+      <td>
+        <my-feature-boolean [value]="serverConfig.search.remoteUri.users"></my-feature-boolean>
+      </td>
+    </tr>
   </table>
 </div>
diff --git a/client/src/app/shared/instance/instance-statistics.component.ts b/client/src/app/shared/instance/instance-statistics.component.ts
index 8ec728f05..40aa8a4c0 100644
--- a/client/src/app/shared/instance/instance-statistics.component.ts
+++ b/client/src/app/shared/instance/instance-statistics.component.ts
@@ -1,9 +1,6 @@
-import { map } from 'rxjs/operators'
-import { HttpClient } from '@angular/common/http'
 import { Component, OnInit } from '@angular/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerStats } from '@shared/models/server'
-import { environment } from '../../../environments/environment'
+import { ServerService } from '@app/core'
 
 @Component({
   selector: 'my-instance-statistics',
@@ -11,27 +8,15 @@ import { environment } from '../../../environments/environment'
   styleUrls: [ './instance-statistics.component.scss' ]
 })
 export class InstanceStatisticsComponent implements OnInit {
-  private static BASE_STATS_URL = environment.apiUrl + '/api/v1/server/stats'
-
   serverStats: ServerStats = null
 
   constructor (
-    private http: HttpClient,
-    private i18n: I18n
+    private serverService: ServerService
   ) {
   }
 
   ngOnInit () {
-    this.getStats()
-      .subscribe(
-        res => {
-          this.serverStats = res
-        }
-      )
-  }
-
-  getStats () {
-    return this.http
-      .get<ServerStats>(InstanceStatisticsComponent.BASE_STATS_URL)
+    this.serverService.getServerStats()
+        .subscribe(res => this.serverStats = res)
   }
 }
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.html b/client/src/app/shared/menu/top-menu-dropdown.component.html
index 35511ee62..d577f757d 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.html
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.html
@@ -1,12 +1,22 @@
-<div class="sub-menu">
-  <ng-container *ngFor="let menuEntry of menuEntries">
+<div class="sub-menu" [ngClass]="{ 'no-scroll': isModalOpened }">
+  <ng-container *ngFor="let menuEntry of menuEntries; index as id">
 
-    <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page">{{ menuEntry.label }}</a>
+    <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>
 
-    <div *ngIf="!menuEntry.routerLink" ngbDropdown [container]="container" class="parent-entry" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
+    <div *ngIf="!menuEntry.routerLink" ngbDropdown [container]="container" class="parent-entry"
+      #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
       <span
+        *ngIf="isInSmallView"
+        [ngClass]="{ active: !!suffixLabels[menuEntry.label] }"
+        (click)="openModal(id)" role="button" class="title-page title-page-settings">
+        <ng-container i18n>{{ menuEntry.label }}</ng-container>
+        <ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container>
+      </span>
+
+      <span
+        *ngIf="!isInSmallView"
         (mouseenter)="openDropdownOnHover(dropdown)" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
-        (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page"
+        (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page title-page-settings"
       >
         <ng-container i18n>{{ menuEntry.label }}</ng-container>
         <ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container>
@@ -20,6 +30,21 @@
         </a>
       </div>
     </div>
-
   </ng-container>
 </div>
+
+<ng-template #modal let-close="close" let-dismiss="dismiss">
+  <div class="modal-body">
+    <ng-container *ngFor="let menuEntry of menuEntries; index as id">
+      <div [ngClass]="{ hidden: id !== currentMenuEntryIndex }">
+        <a *ngFor="let menuChild of menuEntry.children"
+          [ngClass]="{ icon: hasIcons }"
+          [routerLink]="menuChild.routerLink" routerLinkActive="active" (click)="dismissOtherModals()">
+          <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName"></my-global-icon>
+
+          {{ menuChild.label }}
+        </a>
+      </div>
+    </ng-container>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.scss b/client/src/app/shared/menu/top-menu-dropdown.component.scss
index 1be699a88..5f90dcf80 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.scss
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.scss
@@ -25,3 +25,32 @@
 
   top: -1px;
 }
+
+.sub-menu.no-scroll {
+  overflow-x: hidden;
+}
+
+.modal-body {
+  .hidden {
+    display: none;
+  }
+
+  a {
+    @include disable-default-a-behaviour;
+
+    color: currentColor;
+    box-sizing: border-box;
+    display: block;
+    font-size: 1.2rem;
+    padding: 9px 12px;
+    text-align: initial;
+    text-transform: unset;
+    width: 100%;
+
+    &.active {
+      color: var(--mainBackgroundColor) !important;
+      background-color: var(--mainHoverColor);
+      opacity: .9;
+    }
+  }
+}
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.ts b/client/src/app/shared/menu/top-menu-dropdown.component.ts
index 5ccdafb54..f98240804 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.ts
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts
@@ -1,8 +1,14 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import {
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild
+} from '@angular/core'
 import { filter, take } from 'rxjs/operators'
 import { NavigationEnd, Router } from '@angular/router'
 import { Subscription } from 'rxjs'
-import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { GlobalIconName } from '@app/shared/images/global-icon.component'
 import { ScreenService } from '@app/shared/misc/screen.service'
 
@@ -26,32 +32,40 @@ export type TopMenuDropdownParam = {
 export class TopMenuDropdownComponent implements OnInit, OnDestroy {
   @Input() menuEntries: TopMenuDropdownParam[] = []
 
+  @ViewChild('modal', { static: true }) modal: NgbModal
+
   suffixLabels: { [ parentLabel: string ]: string }
   hasIcons = false
   container: undefined | 'body' = undefined
+  isModalOpened = false
+  currentMenuEntryIndex: number
 
   private openedOnHover = false
   private routeSub: Subscription
 
   constructor (
     private router: Router,
+    private modalService: NgbModal,
     private screen: ScreenService
-  ) {}
+  ) { }
+
+  get isInSmallView () {
+    return this.screen.isInSmallView()
+  }
 
   ngOnInit () {
     this.updateChildLabels(window.location.pathname)
 
     this.routeSub = this.router.events
-                        .pipe(filter(event => event instanceof NavigationEnd))
-                        .subscribe(() => this.updateChildLabels(window.location.pathname))
+      .pipe(filter(event => event instanceof NavigationEnd))
+      .subscribe(() => this.updateChildLabels(window.location.pathname))
 
     this.hasIcons = this.menuEntries.some(
       e => e.children && e.children.some(c => !!c.iconName)
     )
 
-    // FIXME: We have to set body for the container to avoid because of scroll overflow on mobile view
-    // But this break our hovering system
-    if (this.screen.isInMobileView()) {
+    // We have to set body for the container to avoid scroll overflow on mobile and small views
+    if (this.isInSmallView) {
       this.container = 'body'
     }
   }
@@ -86,6 +100,27 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
     this.openedOnHover = false
   }
 
+  openModal (index: number) {
+    this.currentMenuEntryIndex = index
+    this.isModalOpened = true
+
+    this.modalService.open(this.modal, {
+      centered: true,
+      beforeDismiss: async () => {
+        this.onModalDismiss()
+        return true
+      }
+    })
+  }
+
+  onModalDismiss () {
+    this.isModalOpened = false
+  }
+
+  dismissOtherModals () {
+    this.modalService.dismissAll()
+  }
+
   private updateChildLabels (path: string) {
     this.suffixLabels = {}
 
diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index f55a516e4..3c8b66cd5 100644
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -17,6 +17,7 @@
 
 ::ng-deep {
   .help-popover {
+    z-index: z(help-popover) !important;
     max-width: 300px;
 
     .popover-body {
@@ -26,7 +27,7 @@
       font-size: 13px;
       background-color: var(--mainBackgroundColor);
       color: var(--mainForegroundColor);
-      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+      border-radius: 3px;
 
       p {
         margin-bottom: 0;
diff --git a/client/src/app/shared/misc/list-overflow.component.html b/client/src/app/shared/misc/list-overflow.component.html
new file mode 100644
index 000000000..986572801
--- /dev/null
+++ b/client/src/app/shared/misc/list-overflow.component.html
@@ -0,0 +1,35 @@
+<div #itemsParent class="d-flex align-items-center text-nowrap w-100 list-overflow-parent">
+  <span [id]="getId(id)" #itemsRendered *ngFor="let item of items; index as id">
+    <ng-container *ngTemplateOutlet="itemTemplate; context: {item: item}"></ng-container>
+  </span>
+  
+  <ng-container *ngIf="isMenuDisplayed()">
+    <button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()">
+      <span class="glyphicon glyphicon-chevron-down"></span>
+    </button>
+  
+    <div *ngIf="!isInMobileView" class="list-overflow-menu" ngbDropdown container="body" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)">
+      <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ routeActive: active }"
+        ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
+      >
+        <span class="glyphicon glyphicon-chevron-down"></span>
+      </button>
+  
+      <div ngbDropdownMenu>
+        <a *ngFor="let item of items | slice:showItemsUntilIndexExcluded:items.length"
+          [routerLink]="item.routerLink" routerLinkActive="active" class="dropdown-item">
+          {{ item.label }}
+        </a>
+      </div>
+    </div>
+  </ng-container>
+</div >
+
+<ng-template #modal let-close="close" let-dismiss="dismiss">
+  <div class="modal-body">
+    <a *ngFor="let item of items | slice:showItemsUntilIndexExcluded:items.length"
+       [routerLink]="item.routerLink" routerLinkActive="active" (click)="dismissOtherModals()">
+       {{ item.label }}
+    </a>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/misc/list-overflow.component.scss b/client/src/app/shared/misc/list-overflow.component.scss
new file mode 100644
index 000000000..1e5fe4c10
--- /dev/null
+++ b/client/src/app/shared/misc/list-overflow.component.scss
@@ -0,0 +1,61 @@
+@import '_mixins';
+
+:host {
+  width: 100%;
+}
+
+.list-overflow-parent {
+  overflow: hidden;
+}
+
+.list-overflow-menu {
+  position: absolute;
+  right: 25px;
+}
+
+button {
+  width: 30px;
+  border: none;
+
+  &::after {
+    display: none;
+  }
+
+  &.routeActive {
+    &::after {
+      display: inherit;
+      border: 2px solid var(--mainColor);
+      position: relative;
+      right: 95%;
+      top: 50%;
+    }
+  }
+}
+
+::ng-deep .dropdown-menu {
+  margin-top: 0 !important;
+  position: static;
+  right: auto;
+  bottom: auto
+}
+
+.modal-body {
+  a {
+    @include disable-default-a-behaviour;
+
+    color: currentColor;
+    box-sizing: border-box;
+    display: block;
+    font-size: 1.2rem;
+    padding: 9px 12px;
+    text-align: initial;
+    text-transform: unset;
+    width: 100%;
+
+    &.active {
+      color: var(--mainBackgroundColor) !important;
+      background-color: var(--mainHoverColor);
+      opacity: .9;
+    }
+  }
+}
diff --git a/client/src/app/shared/misc/list-overflow.component.ts b/client/src/app/shared/misc/list-overflow.component.ts
new file mode 100644
index 000000000..30f43ba43
--- /dev/null
+++ b/client/src/app/shared/misc/list-overflow.component.ts
@@ -0,0 +1,120 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  HostListener,
+  Input,
+  QueryList,
+  TemplateRef,
+  ViewChild,
+  ViewChildren
+} from '@angular/core'
+import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { lowerFirst, uniqueId } from 'lodash-es'
+import { ScreenService } from './screen.service'
+import { take } from 'rxjs/operators'
+
+export interface ListOverflowItem {
+  label: string
+  routerLink: string | any[]
+}
+
+@Component({
+  selector: 'list-overflow',
+  templateUrl: './list-overflow.component.html',
+  styleUrls: [ './list-overflow.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ListOverflowComponent<T extends ListOverflowItem> implements AfterViewInit {
+  @Input() items: T[]
+  @Input() itemTemplate: TemplateRef<{item: T}>
+
+  @ViewChild('modal', { static: true }) modal: ElementRef
+  @ViewChild('itemsParent', { static: true }) parent: ElementRef<HTMLDivElement>
+  @ViewChildren('itemsRendered') itemsRendered: QueryList<ElementRef>
+
+  showItemsUntilIndexExcluded: number
+  active = false
+  isInTouchScreen = false
+  isInMobileView = false
+
+  private openedOnHover = false
+
+  constructor (
+    private cdr: ChangeDetectorRef,
+    private modalService: NgbModal,
+    private screenService: ScreenService
+  ) {}
+
+  ngAfterViewInit () {
+    setTimeout(() => this.onWindowResize(), 0)
+  }
+
+  isMenuDisplayed () {
+    return !!this.showItemsUntilIndexExcluded
+  }
+
+  @HostListener('window:resize')
+  onWindowResize () {
+    this.isInTouchScreen = !!this.screenService.isInTouchScreen()
+    this.isInMobileView = !!this.screenService.isInMobileView()
+
+    const parentWidth = this.parent.nativeElement.getBoundingClientRect().width
+    let showItemsUntilIndexExcluded: number
+    let accWidth = 0
+
+    for (const [index, el] of this.itemsRendered.toArray().entries()) {
+      accWidth += el.nativeElement.getBoundingClientRect().width
+      if (showItemsUntilIndexExcluded === undefined) {
+        showItemsUntilIndexExcluded = (parentWidth < accWidth) ? index : undefined
+      }
+
+      const e = document.getElementById(this.getId(index))
+      const shouldBeVisible = showItemsUntilIndexExcluded ? index < showItemsUntilIndexExcluded : true
+      e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
+    }
+
+    this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
+    this.cdr.markForCheck()
+  }
+
+  openDropdownOnHover (dropdown: NgbDropdown) {
+    this.openedOnHover = true
+    dropdown.open()
+
+    // Menu was closed
+    dropdown.openChange
+            .pipe(take(1))
+            .subscribe(() => this.openedOnHover = false)
+  }
+
+  dropdownAnchorClicked (dropdown: NgbDropdown) {
+    if (this.openedOnHover) {
+      this.openedOnHover = false
+      return
+    }
+
+    return dropdown.toggle()
+  }
+
+  closeDropdownIfHovered (dropdown: NgbDropdown) {
+    if (this.openedOnHover === false) return
+
+    dropdown.close()
+    this.openedOnHover = false
+  }
+
+  toggleModal () {
+    this.modalService.open(this.modal, { centered: true })
+  }
+
+  dismissOtherModals () {
+    this.modalService.dismissAll()
+  }
+
+  getId (id: number | string = uniqueId()): string {
+    return lowerFirst(this.constructor.name) + '_' + id
+  }
+}
diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts
index 220d41d59..9c71a8c83 100644
--- a/client/src/app/shared/misc/screen.service.ts
+++ b/client/src/app/shared/misc/screen.service.ts
@@ -14,6 +14,10 @@ export class ScreenService {
     return this.getWindowInnerWidth() < 800
   }
 
+  isInMediumView () {
+    return this.getWindowInnerWidth() < 1100
+  }
+
   isInMobileView () {
     return this.getWindowInnerWidth() < 500
   }
diff --git a/client/src/app/shared/misc/storage.service.ts b/client/src/app/shared/misc/storage.service.ts
new file mode 100644
index 000000000..0d4a8ab53
--- /dev/null
+++ b/client/src/app/shared/misc/storage.service.ts
@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core'
+import { Observable, Subject } from 'rxjs'
+import {
+  peertubeLocalStorage,
+  peertubeSessionStorage
+} from './peertube-web-storage'
+import { filter } from 'rxjs/operators'
+
+abstract class StorageService {
+  protected instance: Storage
+  static storageSub = new Subject<string>()
+
+  watch (keys?: string[]): Observable<string> {
+    return StorageService.storageSub.asObservable().pipe(filter(val => keys ? keys.includes(val) : true))
+  }
+
+  getItem (key: string) {
+    return this.instance.getItem(key)
+  }
+
+  setItem (key: string, data: any, notifyOfUpdate = true) {
+    this.instance.setItem(key, data)
+    if (notifyOfUpdate) StorageService.storageSub.next(key)
+  }
+
+  removeItem (key: string, notifyOfUpdate = true) {
+    this.instance.removeItem(key)
+    if (notifyOfUpdate) StorageService.storageSub.next(key)
+  }
+}
+
+@Injectable()
+export class LocalStorageService extends StorageService {
+  protected instance: Storage = peertubeLocalStorage
+}
+
+@Injectable()
+export class SessionStorageService extends StorageService {
+  protected instance: Storage = peertubeSessionStorage
+}
diff --git a/client/src/app/shared/moderation/user-ban-modal.component.html b/client/src/app/shared/moderation/user-ban-modal.component.html
index f38ea543d..365eb1938 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.html
+++ b/client/src/app/shared/moderation/user-ban-modal.component.html
@@ -8,8 +8,10 @@
   <div class="modal-body">
     <form novalidate [formGroup]="form" (ngSubmit)="banUser()">
       <div class="form-group">
-        <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
-        </textarea>
+        <textarea
+          i18n-placeholder placeholder="Reason..." formControlName="reason"
+          class="form-control" [ngClass]="{ 'input-error': formErrors['reason'] }"
+        ></textarea>
         <div *ngIf="formErrors.reason" class="form-error">
           {{ formErrors.reason }}
         </div>
@@ -20,7 +22,10 @@
       </div>
 
       <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span>
+        <input
+          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          (click)="hide()" (key.enter)="hide()"
+        >
 
         <input
           type="submit" i18n-value value="Ban this user" class="action-button-submit"
diff --git a/client/src/app/shared/moderation/user-ban-modal.component.ts b/client/src/app/shared/moderation/user-ban-modal.component.ts
index cf0e1577a..1647e3691 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.ts
+++ b/client/src/app/shared/moderation/user-ban-modal.component.ts
@@ -39,7 +39,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
 
   openModal (user: User | User[]) {
     this.usersToBan = user
-    this.openedModal = this.modalService.open(this.modal)
+    this.openedModal = this.modalService.open(this.modal, { centered: true })
   }
 
   hide () {
diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
index 11d8588f4..c8ccaa800 100644
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
@@ -14,13 +14,13 @@ import { ServerConfig } from '@shared/models'
   templateUrl: './user-moderation-dropdown.component.html'
 })
 export class UserModerationDropdownComponent implements OnInit, OnChanges {
-  @ViewChild('userBanModal', { static: false }) userBanModal: UserBanModalComponent
+  @ViewChild('userBanModal') userBanModal: UserBanModalComponent
 
   @Input() user: User
   @Input() account: Account
 
   @Input() buttonSize: 'normal' | 'small' = 'normal'
-  @Input() placement = 'left'
+  @Input() placement = 'left-top left-bottom auto'
   @Input() label: string
 
   @Output() userChanged = new EventEmitter()
diff --git a/client/src/app/shared/overview/overview.service.ts b/client/src/app/shared/overview/overview.service.ts
index 79cb781f7..6d8af8052 100644
--- a/client/src/app/shared/overview/overview.service.ts
+++ b/client/src/app/shared/overview/overview.service.ts
@@ -1,5 +1,5 @@
 import { catchError, map, switchMap, tap } from 'rxjs/operators'
-import { HttpClient } from '@angular/common/http'
+import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { forkJoin, Observable, of } from 'rxjs'
 import { VideosOverview as VideosOverviewServer, peertubeTranslate } from '../../../../../shared/models'
@@ -21,9 +21,12 @@ export class OverviewService {
     private serverService: ServerService
   ) {}
 
-  getVideosOverview (): Observable<VideosOverview> {
+  getVideosOverview (page: number): Observable<VideosOverview> {
+    let params = new HttpParams()
+    params = params.append('page', page + '')
+
     return this.authHttp
-               .get<VideosOverviewServer>(OverviewService.BASE_OVERVIEW_URL + 'videos')
+               .get<VideosOverviewServer>(OverviewService.BASE_OVERVIEW_URL + 'videos', { params })
                .pipe(
                  switchMap(serverVideosOverview => this.updateVideosOverview(serverVideosOverview)),
                  catchError(err => this.restExtractor.handleError(err))
diff --git a/client/src/app/shared/renderer/html-renderer.service.ts b/client/src/app/shared/renderer/html-renderer.service.ts
index 94a8aa4c6..1ddd8fe2f 100644
--- a/client/src/app/shared/renderer/html-renderer.service.ts
+++ b/client/src/app/shared/renderer/html-renderer.service.ts
@@ -19,15 +19,18 @@ export class HtmlRendererService {
       allowedTags: [ 'a', 'p', 'span', 'br', 'strong', 'em', 'ul', 'ol', 'li' ],
       allowedSchemes: [ 'http', 'https' ],
       allowedAttributes: {
-        'a': [ 'href', 'class', 'target' ]
+        'a': [ 'href', 'class', 'target', 'rel' ]
       },
       transformTags: {
         a: (tagName, attribs) => {
+          let rel = 'noopener noreferrer'
+          if (attribs.rel === 'me') rel += ' me'
+
           return {
             tagName,
             attribs: Object.assign(attribs, {
               target: '_blank',
-              rel: 'noopener noreferrer'
+              rel
             })
           }
         }
diff --git a/client/src/app/shared/renderer/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts
index 0d3fde537..f0c87326f 100644
--- a/client/src/app/shared/renderer/markdown.service.ts
+++ b/client/src/app/shared/renderer/markdown.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core'
-import { MarkdownIt } from 'markdown-it'
 import { buildVideoLink } from '../../../assets/player/utils'
 import { HtmlRendererService } from '@app/shared/renderer/html-renderer.service'
+import * as MarkdownIt from 'markdown-it'
 
 type MarkdownParsers = {
   textMarkdownIt: MarkdownIt
@@ -100,7 +100,7 @@ export class MarkdownService {
   }
 
   private async createMarkdownIt (config: MarkdownConfig) {
-    // FIXME: import('...') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
+    // FIXME: import('...') returns a struct module, containing a "default" field
     const MarkdownItClass: typeof import ('markdown-it') = (await import('markdown-it') as any).default
 
     const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: true, html: config.html })
diff --git a/client/src/app/shared/rest/rest-table.ts b/client/src/app/shared/rest/rest-table.ts
index c180346af..d4e6cf5f2 100644
--- a/client/src/app/shared/rest/rest-table.ts
+++ b/client/src/app/shared/rest/rest-table.ts
@@ -1,6 +1,5 @@
 import { peertubeLocalStorage } from '@app/shared/misc/peertube-web-storage'
-import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { LazyLoadEvent, SortMeta } from 'primeng/api'
 import { RestPagination } from './rest-pagination'
 import { Subject } from 'rxjs'
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,13 +7,17 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
 export abstract class RestTable {
 
   abstract totalRecords: number
-  abstract rowsPerPage: number
   abstract sort: SortMeta
   abstract pagination: RestPagination
 
-  protected search: string
+  search: string
+  rowsPerPageOptions = [ 10, 20, 50, 100 ]
+  rowsPerPage = this.rowsPerPageOptions[0]
+  expandedRows = {}
+
   private searchStream: Subject<string>
-  private sortLocalStorageKey = 'rest-table-sort-' + this.constructor.name
+
+  abstract getIdentifier (): string
 
   initialize () {
     this.loadSort()
@@ -22,13 +25,13 @@ export abstract class RestTable {
   }
 
   loadSort () {
-    const result = peertubeLocalStorage.getItem(this.sortLocalStorageKey)
+    const result = peertubeLocalStorage.getItem(this.getSortLocalStorageKey())
 
     if (result) {
       try {
         this.sort = JSON.parse(result)
       } catch (err) {
-        console.error('Cannot load sort of local storage key ' + this.sortLocalStorageKey, err)
+        console.error('Cannot load sort of local storage key ' + this.getSortLocalStorageKey(), err)
       }
     }
   }
@@ -49,7 +52,7 @@ export abstract class RestTable {
   }
 
   saveSort () {
-    peertubeLocalStorage.setItem(this.sortLocalStorageKey, JSON.stringify(this.sort))
+    peertubeLocalStorage.setItem(this.getSortLocalStorageKey(), JSON.stringify(this.sort))
   }
 
   initSearch () {
@@ -66,9 +69,37 @@ export abstract class RestTable {
       })
   }
 
-  onSearch (search: string) {
-    this.searchStream.next(search)
+  onSearch (event: Event) {
+    const target = event.target as HTMLInputElement
+    this.searchStream.next(target.value)
+  }
+
+  onPage (event: { first: number, rows: number }) {
+    if (this.rowsPerPage !== event.rows) {
+      this.rowsPerPage = event.rows
+      this.pagination = {
+        start: event.first,
+        count: this.rowsPerPage
+      }
+      this.loadData()
+    }
+    this.expandedRows = {}
+  }
+
+  setTableFilter (filter: string) {
+    // FIXME: cannot use ViewChild, so create a component for the filter input
+    const filterInput = document.getElementById('table-filter') as HTMLInputElement
+    if (filterInput) filterInput.value = filter
+  }
+
+  resetSearch () {
+    this.searchStream.next('')
+    this.setTableFilter('')
   }
 
   protected abstract loadData (): void
+
+  private getSortLocalStorageKey () {
+    return 'rest-table-sort-' + this.getIdentifier()
+  }
 }
diff --git a/client/src/app/shared/rest/rest.service.ts b/client/src/app/shared/rest/rest.service.ts
index 16bb6d82c..cd6db1f3c 100644
--- a/client/src/app/shared/rest/rest.service.ts
+++ b/client/src/app/shared/rest/rest.service.ts
@@ -1,10 +1,21 @@
-import { Injectable } from '@angular/core'
+import { SortMeta } from 'primeng/api'
 import { HttpParams } from '@angular/common/http'
-import { SortMeta } from 'primeng/components/common/sortmeta'
-import { ComponentPagination, ComponentPaginationLight } from './component-pagination.model'
-
+import { Injectable } from '@angular/core'
+import { ComponentPaginationLight } from './component-pagination.model'
 import { RestPagination } from './rest-pagination'
 
+interface QueryStringFilterPrefixes {
+  [key: string]: {
+    prefix: string
+    handler?: (v: string) => string | number
+    multiple?: boolean
+  }
+}
+
+type ParseQueryStringFilterResult = {
+  [key: string]: string | number | (string | number)[]
+}
+
 @Injectable()
 export class RestService {
 
@@ -53,4 +64,48 @@ export class RestService {
 
     return { start, count }
   }
+
+  parseQueryStringFilter (q: string, prefixes: QueryStringFilterPrefixes): ParseQueryStringFilterResult {
+    if (!q) return {}
+
+    // Tokenize the strings using spaces
+    const tokens = q.split(' ').filter(token => !!token)
+
+    // Build prefix array
+    const prefixeStrings = Object.values(prefixes)
+                           .map(p => p.prefix)
+
+    // Search is the querystring minus defined filters
+    const searchTokens = tokens.filter(t => {
+      return prefixeStrings.every(prefixString => t.startsWith(prefixString) === false)
+    })
+
+    const additionalFilters: ParseQueryStringFilterResult = {}
+
+    for (const prefixKey of Object.keys(prefixes)) {
+      const prefixObj = prefixes[prefixKey]
+      const prefix = prefixObj.prefix
+
+      const matchedTokens = tokens.filter(t => t.startsWith(prefix))
+                                  .map(t => t.slice(prefix.length)) // Keep the value filter
+                                  .map(t => {
+                                    if (prefixObj.handler) return prefixObj.handler(t)
+
+                                    return t
+                                  })
+                                  .filter(t => !!t)
+
+      if (matchedTokens.length === 0) continue
+
+      additionalFilters[prefixKey] = prefixObj.multiple === true
+        ? matchedTokens
+        : matchedTokens[0]
+    }
+
+    return {
+      search: searchTokens.join(' '),
+
+      ...additionalFilters
+    }
+  }
 }
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index b2eb13f73..01735c187 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -5,9 +5,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { MarkdownTextareaComponent } from '@app/shared/forms/markdown-textarea.component'
 import { HelpComponent } from '@app/shared/misc/help.component'
+import { ListOverflowComponent } from '@app/shared/misc/list-overflow.component'
 import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
 import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
-import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
+import { SharedModule as PrimeSharedModule } from 'primeng/api'
 import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
 import { ButtonComponent } from './buttons/button.component'
 import { DeleteButtonComponent } from './buttons/delete-button.component'
@@ -46,6 +47,7 @@ import {
 import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar'
 import { InputMaskModule } from 'primeng/inputmask'
 import { ScreenService } from '@app/shared/misc/screen.service'
+import { LocalStorageService, SessionStorageService } from '@app/shared/misc/storage.service'
 import { VideoCaptionsValidatorsService } from '@app/shared/forms/form-validators/video-captions-validators.service'
 import { VideoCaptionService } from '@app/shared/video-caption'
 import { PeertubeCheckboxComponent } from '@app/shared/forms/peertube-checkbox.component'
@@ -56,7 +58,7 @@ import {
   NgbDropdownModule,
   NgbModalModule,
   NgbPopoverModule,
-  NgbTabsetModule,
+  NgbNavModule,
   NgbTooltipModule
 } from '@ng-bootstrap/ng-bootstrap'
 import { RemoteSubscribeComponent, SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/user-subscription'
@@ -88,16 +90,24 @@ import { NumberFormatterPipe } from '@app/shared/angular/number-formatter.pipe'
 import { VideoDurationPipe } from '@app/shared/angular/video-duration-formatter.pipe'
 import { ObjectLengthPipe } from '@app/shared/angular/object-length.pipe'
 import { FromNowPipe } from '@app/shared/angular/from-now.pipe'
+import { HighlightPipe } from '@app/shared/angular/highlight.pipe'
 import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive'
 import { VideoActionsDropdownComponent } from '@app/shared/video/video-actions-dropdown.component'
 import { VideoBlacklistComponent } from '@app/shared/video/modals/video-blacklist.component'
 import { VideoDownloadComponent } from '@app/shared/video/modals/video-download.component'
 import { VideoReportComponent } from '@app/shared/video/modals/video-report.component'
-import { ClipboardModule } from 'ngx-clipboard'
 import { FollowService } from '@app/shared/instance/follow.service'
 import { MultiSelectModule } from 'primeng/multiselect'
 import { FeatureBooleanComponent } from '@app/shared/instance/feature-boolean.component'
 import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-copy.component'
+import { RedundancyService } from '@app/shared/video/redundancy.service'
+import { ClipboardModule } from '@angular/cdk/clipboard'
+import { InputSwitchModule } from 'primeng/inputswitch'
+
+import { MyAccountVideoSettingsComponent } from '@app/+my-account/my-account-settings/my-account-video-settings'
+import { MyAccountInterfaceSettingsComponent } from '@app/+my-account/my-account-settings/my-account-interface'
+import { ActorAvatarInfoComponent } from '@app/+my-account/shared/actor-avatar-info.component'
+import { BatchDomainsValidatorsService } from '@app/+admin/config/shared/batch-domains-validators.service'
 
 @NgModule({
   imports: [
@@ -110,7 +120,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
     NgbDropdownModule,
     NgbModalModule,
     NgbPopoverModule,
-    NgbTabsetModule,
+    NgbNavModule,
     NgbTooltipModule,
     NgbCollapseModule,
 
@@ -119,7 +129,8 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
     PrimeSharedModule,
     InputMaskModule,
     NgPipesModule,
-    MultiSelectModule
+    MultiSelectModule,
+    InputSwitchModule
   ],
 
   declarations: [
@@ -147,6 +158,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
     NumberFormatterPipe,
     ObjectLengthPipe,
     FromNowPipe,
+    HighlightPipe,
     PeerTubeTemplateDirective,
     VideoDurationPipe,
 
@@ -155,6 +167,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
     InfiniteScrollerDirective,
     TextareaAutoResizeDirective,
     HelpComponent,
+    ListOverflowComponent,
 
     ReactiveFileComponent,
     PeertubeCheckboxComponent,
@@ -175,7 +188,11 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
     DateToggleComponent,
 
     GlobalIconComponent,
-    PreviewUploadComponent
+    PreviewUploadComponent,
+
+    MyAccountVideoSettingsComponent,
+    MyAccountInterfaceSettingsComponent,
+    ActorAvatarInfoComponent
   ],
 
   exports: [
@@ -188,7 +205,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
     NgbDropdownModule,
     NgbModalModule,
     NgbPopoverModule,
-    NgbTabsetModule,
+    NgbNavModule,
     NgbTooltipModule,
     NgbCollapseModule,
 
@@ -226,6 +243,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
     InfiniteScrollerDirective,
     TextareaAutoResizeDirective,
     HelpComponent,
+    ListOverflowComponent,
     InputReadonlyCopyComponent,
 
     ReactiveFileComponent,
@@ -250,8 +268,13 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
     NumberFormatterPipe,
     ObjectLengthPipe,
     FromNowPipe,
+    HighlightPipe,
     PeerTubeTemplateDirective,
-    VideoDurationPipe
+    VideoDurationPipe,
+
+    MyAccountVideoSettingsComponent,
+    MyAccountInterfaceSettingsComponent,
+    ActorAvatarInfoComponent
   ],
 
   providers: [
@@ -275,6 +298,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
     LoginValidatorsService,
     ResetPasswordValidatorsService,
     UserValidatorsService,
+    BatchDomainsValidatorsService,
     VideoPlaylistValidatorsService,
     VideoAbuseValidatorsService,
     VideoChannelValidatorsService,
@@ -296,10 +320,12 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
 
     I18nPrimengCalendarService,
     ScreenService,
+    LocalStorageService, SessionStorageService,
 
     UserNotificationService,
 
     FollowService,
+    RedundancyService,
 
     I18n
   ]
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.html b/client/src/app/shared/user-subscription/subscribe-button.component.html
index f08c88f3c..85b3d1fdb 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.html
@@ -55,7 +55,7 @@
       </button>
 
       <button class="dropdown-item dropdown-item-neutral" i18n>Subscribe with a Mastodon account:</button>
-      <my-remote-subscribe showHelp="true" [uri]="uri"></my-remote-subscribe>
+      <my-remote-subscribe [showHelp]="true" [uri]="uri"></my-remote-subscribe>
 
       <div class="dropdown-divider"></div>
 
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.scss b/client/src/app/shared/user-subscription/subscribe-button.component.scss
index 114a12f06..b739c5ae2 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.scss
@@ -13,9 +13,17 @@
     font-size: 15px;
   }
 
+  &:not(.big) {
+    white-space: nowrap;
+  }
+
   &.big {
     height: 35px;
 
+    & > button:first-child {
+      width: 175px;
+    }
+
     button .extra-text {
       span:first-child {
         line-height: 80%;
@@ -80,10 +88,6 @@
     }
   }
 
-  .dropdown-header {
-    padding-left: 1rem;
-  }
-
   ::ng-deep form {
     padding: 0.25rem 1rem;
   }
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index 7707d7dda..3348fe75f 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -1,10 +1,32 @@
-import { hasUserRight, User as UserServerModel, UserNotificationSetting, UserRight, UserRole, VideoChannel } from '../../../../../shared'
+import {
+  hasUserRight,
+  User as UserServerModel,
+  UserNotificationSetting,
+  UserRight,
+  UserRole
+} from '../../../../../shared/models/users'
+import { VideoChannel } from '../../../../../shared/models/videos'
 import { NSFWPolicyType } from '../../../../../shared/models/videos/nsfw-policy.type'
 import { Account } from '@app/shared/account/account.model'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
 import { UserAdminFlag } from '@shared/models/users/user-flag.model'
 
 export class User implements UserServerModel {
+  static KEYS = {
+    ID: 'id',
+    ROLE: 'role',
+    EMAIL: 'email',
+    VIDEOS_HISTORY_ENABLED: 'videos-history-enabled',
+    USERNAME: 'username',
+    NSFW_POLICY: 'nsfw_policy',
+    WEBTORRENT_ENABLED: 'peertube-videojs-' + 'webtorrent_enabled',
+    AUTO_PLAY_VIDEO: 'auto_play_video',
+    SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO: 'auto_play_next_video',
+    AUTO_PLAY_VIDEO_PLAYLIST: 'auto_play_video_playlist',
+    THEME: 'last_active_theme',
+    VIDEO_LANGUAGES: 'video_languages'
+  }
+
   id: number
   username: string
   email: string
@@ -29,6 +51,11 @@ export class User implements UserServerModel {
   videoQuotaDaily: number
   videoQuotaUsed?: number
   videoQuotaUsedDaily?: number
+  videosCount?: number
+  videoAbusesCount?: number
+  videoAbusesAcceptedCount?: number
+  videoAbusesCreatedCount?: number
+  videoCommentsCount?: number
 
   theme: string
 
@@ -42,6 +69,10 @@ export class User implements UserServerModel {
   noInstanceConfigWarningModal: boolean
   noWelcomeModal: boolean
 
+  pluginAuth: string | null
+
+  lastLoginDate: Date | null
+
   createdAt: Date
 
   constructor (hash: Partial<UserServerModel>) {
@@ -57,11 +88,19 @@ export class User implements UserServerModel {
     this.videoQuotaDaily = hash.videoQuotaDaily
     this.videoQuotaUsed = hash.videoQuotaUsed
     this.videoQuotaUsedDaily = hash.videoQuotaUsedDaily
+    this.videosCount = hash.videosCount
+    this.videoAbusesCount = hash.videoAbusesCount
+    this.videoAbusesAcceptedCount = hash.videoAbusesAcceptedCount
+    this.videoAbusesCreatedCount = hash.videoAbusesCreatedCount
+    this.videoCommentsCount = hash.videoCommentsCount
 
     this.nsfwPolicy = hash.nsfwPolicy
     this.webTorrentEnabled = hash.webTorrentEnabled
-    this.videosHistoryEnabled = hash.videosHistoryEnabled
     this.autoPlayVideo = hash.autoPlayVideo
+    this.autoPlayNextVideo = hash.autoPlayNextVideo
+    this.autoPlayNextVideoPlaylist = hash.autoPlayNextVideoPlaylist
+    this.videosHistoryEnabled = hash.videosHistoryEnabled
+    this.videoLanguages = hash.videoLanguages
 
     this.theme = hash.theme
 
@@ -77,6 +116,9 @@ export class User implements UserServerModel {
 
     this.createdAt = hash.createdAt
 
+    this.pluginAuth = hash.pluginAuth
+    this.lastLoginDate = hash.lastLoginDate
+
     if (hash.account !== undefined) {
       this.account = new Account(hash.account)
     }
diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts
index e24d91df3..abb4088b5 100644
--- a/client/src/app/shared/users/user.service.ts
+++ b/client/src/app/shared/users/user.service.ts
@@ -1,8 +1,8 @@
-import { from, Observable, of } from 'rxjs'
-import { catchError, concatMap, map, share, shareReplay, tap, toArray } from 'rxjs/operators'
+import { from, Observable } from 'rxjs'
+import { catchError, concatMap, map, shareReplay, toArray } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { ResultList, User, UserCreate, UserRole, UserUpdate, UserUpdateMe, UserVideoQuota } from '../../../../../shared'
+import { ResultList, User as UserServerModel, UserCreate, UserRole, UserUpdate, UserUpdateMe, UserVideoQuota } from '../../../../../shared'
 import { environment } from '../../../environments/environment'
 import { RestExtractor, RestPagination, RestService } from '../rest'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
@@ -10,6 +10,10 @@ import { SortMeta } from 'primeng/api'
 import { BytesPipe } from 'ngx-pipes'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { UserRegister } from '@shared/models/users/user-register.model'
+import { User } from './user.model'
+import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
+import { has } from 'lodash-es'
+import { LocalStorageService, SessionStorageService } from '../misc/storage.service'
 
 @Injectable()
 export class UserService {
@@ -17,12 +21,14 @@ export class UserService {
 
   private bytesPipe = new BytesPipe()
 
-  private userCache: { [ id: number ]: Observable<User> } = {}
+  private userCache: { [ id: number ]: Observable<UserServerModel> } = {}
 
   constructor (
     private authHttp: HttpClient,
     private restExtractor: RestExtractor,
     private restService: RestService,
+    private localStorageService: LocalStorageService,
+    private sessionStorageService: SessionStorageService,
     private i18n: I18n
   ) { }
 
@@ -64,6 +70,30 @@ export class UserService {
                )
   }
 
+  updateMyAnonymousProfile (profile: UserUpdateMe) {
+    const supportedKeys = {
+      // local storage keys
+      nsfwPolicy: (val: NSFWPolicyType) => this.localStorageService.setItem(User.KEYS.NSFW_POLICY, val),
+      webTorrentEnabled: (val: boolean) => this.localStorageService.setItem(User.KEYS.WEBTORRENT_ENABLED, String(val)),
+      autoPlayVideo: (val: boolean) => this.localStorageService.setItem(User.KEYS.AUTO_PLAY_VIDEO, String(val)),
+      autoPlayNextVideoPlaylist: (val: boolean) => this.localStorageService.setItem(User.KEYS.AUTO_PLAY_VIDEO_PLAYLIST, String(val)),
+      theme: (val: string) => this.localStorageService.setItem(User.KEYS.THEME, val),
+      videoLanguages: (val: string[]) => this.localStorageService.setItem(User.KEYS.VIDEO_LANGUAGES, JSON.stringify(val)),
+
+      // session storage keys
+      autoPlayNextVideo: (val: boolean) =>
+        this.sessionStorageService.setItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, String(val))
+    }
+
+    for (const key of Object.keys(profile)) {
+      try {
+        if (has(supportedKeys, key)) supportedKeys[key](profile[key])
+      } catch (err) {
+        console.error(`Cannot set item ${key} in localStorage. Likely due to a value impossible to stringify.`, err)
+      }
+    }
+  }
+
   deleteMe () {
     const url = UserService.BASE_USERS_URL + 'me'
 
@@ -187,7 +217,7 @@ export class UserService {
                )
   }
 
-  updateUsers (users: User[], userUpdate: UserUpdate) {
+  updateUsers (users: UserServerModel[], userUpdate: UserUpdate) {
     return from(users)
       .pipe(
         concatMap(u => this.authHttp.put(UserService.BASE_USERS_URL + u.id, userUpdate)),
@@ -204,18 +234,44 @@ export class UserService {
     return this.userCache[userId]
   }
 
-  getUser (userId: number) {
-    return this.authHttp.get<User>(UserService.BASE_USERS_URL + userId)
+  getUser (userId: number, withStats = false) {
+    const params = new HttpParams().append('withStats', withStats + '')
+    return this.authHttp.get<UserServerModel>(UserService.BASE_USERS_URL + userId, { params })
                .pipe(catchError(err => this.restExtractor.handleError(err)))
   }
 
-  getUsers (pagination: RestPagination, sort: SortMeta, search?: string): Observable<ResultList<User>> {
+  getAnonymousUser () {
+    let videoLanguages
+
+    try {
+      videoLanguages = JSON.parse(this.localStorageService.getItem(User.KEYS.VIDEO_LANGUAGES))
+    } catch (err) {
+      videoLanguages = null
+      console.error('Cannot parse desired video languages from localStorage.', err)
+    }
+
+    return new User({
+      // local storage keys
+      nsfwPolicy: this.localStorageService.getItem(User.KEYS.NSFW_POLICY) as NSFWPolicyType,
+      webTorrentEnabled: this.localStorageService.getItem(User.KEYS.WEBTORRENT_ENABLED) !== 'false',
+      theme: this.localStorageService.getItem(User.KEYS.THEME) || 'default',
+      videoLanguages,
+
+      autoPlayNextVideoPlaylist: this.localStorageService.getItem(User.KEYS.AUTO_PLAY_VIDEO_PLAYLIST) !== 'false',
+      autoPlayVideo: this.localStorageService.getItem(User.KEYS.AUTO_PLAY_VIDEO) === 'true',
+
+      // session storage keys
+      autoPlayNextVideo: this.sessionStorageService.getItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
+    })
+  }
+
+  getUsers (pagination: RestPagination, sort: SortMeta, search?: string): Observable<ResultList<UserServerModel>> {
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
 
     if (search) params = params.append('search', search)
 
-    return this.authHttp.get<ResultList<User>>(UserService.BASE_USERS_URL, { params })
+    return this.authHttp.get<ResultList<UserServerModel>>(UserService.BASE_USERS_URL, { params })
                .pipe(
                  map(res => this.restExtractor.convertResultListDateToHuman(res)),
                  map(res => this.restExtractor.applyToResultListData(res, this.formatUser.bind(this))),
@@ -223,7 +279,7 @@ export class UserService {
                )
   }
 
-  removeUser (usersArg: User | User[]) {
+  removeUser (usersArg: UserServerModel | UserServerModel[]) {
     const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
 
     return from(users)
@@ -234,7 +290,7 @@ export class UserService {
       )
   }
 
-  banUsers (usersArg: User | User[], reason?: string) {
+  banUsers (usersArg: UserServerModel | UserServerModel[], reason?: string) {
     const body = reason ? { reason } : {}
     const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
 
@@ -246,7 +302,7 @@ export class UserService {
       )
   }
 
-  unbanUsers (usersArg: User | User[]) {
+  unbanUsers (usersArg: UserServerModel | UserServerModel[]) {
     const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
 
     return from(users)
@@ -257,7 +313,7 @@ export class UserService {
       )
   }
 
-  private formatUser (user: User) {
+  private formatUser (user: UserServerModel) {
     let videoQuota
     if (user.videoQuota === -1) {
       videoQuota = this.i18n('Unlimited')
diff --git a/client/src/app/shared/video-abuse/video-abuse.service.ts b/client/src/app/shared/video-abuse/video-abuse.service.ts
index b0b59ea0c..700a30239 100644
--- a/client/src/app/shared/video-abuse/video-abuse.service.ts
+++ b/client/src/app/shared/video-abuse/video-abuse.service.ts
@@ -1,9 +1,9 @@
 import { catchError, map } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { Observable } from 'rxjs'
-import { ResultList, VideoAbuse, VideoAbuseUpdate } from '../../../../../shared'
+import { ResultList, VideoAbuse, VideoAbuseUpdate, VideoAbuseState } from '../../../../../shared'
 import { environment } from '../../../environments/environment'
 import { RestExtractor, RestPagination, RestService } from '../rest'
 
@@ -17,15 +17,48 @@ export class VideoAbuseService {
     private restExtractor: RestExtractor
   ) {}
 
-  getVideoAbuses (pagination: RestPagination, sort: SortMeta): Observable<ResultList<VideoAbuse>> {
+  getVideoAbuses (options: {
+    pagination: RestPagination,
+    sort: SortMeta,
+    search?: string
+  }): Observable<ResultList<VideoAbuse>> {
+    const { pagination, sort, search } = options
     const url = VideoAbuseService.BASE_VIDEO_ABUSE_URL + 'abuse'
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
 
+    if (search) {
+      const filters = this.restService.parseQueryStringFilter(search, {
+        id: { prefix: '#' },
+        state: {
+          prefix: 'state:',
+          handler: v => {
+            if (v === 'accepted') return VideoAbuseState.ACCEPTED
+            if (v === 'pending') return VideoAbuseState.PENDING
+            if (v === 'rejected') return VideoAbuseState.REJECTED
+
+            return undefined
+          }
+        },
+        videoIs: {
+          prefix: 'videoIs:',
+          handler: v => {
+            if (v === 'deleted') return v
+            if (v === 'blacklisted') return v
+
+            return undefined
+          }
+        },
+        searchReporter: { prefix: 'reporter:' },
+        searchReportee: { prefix: 'reportee:' }
+      })
+
+      params = this.restService.addObjectParams(params, filters)
+    }
+
     return this.authHttp.get<ResultList<VideoAbuse>>(url, { params })
                .pipe(
-                 map(res => this.restExtractor.convertResultListDateToHuman(res)),
                  catchError(res => this.restExtractor.handleError(res))
                )
   }
diff --git a/client/src/app/shared/video-blacklist/video-blacklist.service.ts b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
index 491fa698b..c0e13a651 100644
--- a/client/src/app/shared/video-blacklist/video-blacklist.service.ts
+++ b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
@@ -1,7 +1,7 @@
 import { catchError, map, concatMap, toArray } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { from as observableFrom, Observable } from 'rxjs'
 import { VideoBlacklist, VideoBlacklistType, ResultList } from '../../../../../shared'
 import { Video } from '../video/video.model'
@@ -19,13 +19,19 @@ export class VideoBlacklistService {
     private restExtractor: RestExtractor
   ) {}
 
-  listBlacklist (pagination: RestPagination, sort: SortMeta, type?: VideoBlacklistType): Observable<ResultList<VideoBlacklist>> {
+  listBlacklist (options: {
+    pagination: RestPagination,
+    sort: SortMeta,
+    search?: string
+    type?: VideoBlacklistType
+  }): Observable<ResultList<VideoBlacklist>> {
+    const { pagination, sort, search, type } = options
+
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
 
-    if (type) {
-      params = params.set('type', type.toString())
-    }
+    if (search) params = params.append('search', search)
+    if (type) params = params.append('type', type.toString())
 
     return this.authHttp.get<ResultList<VideoBlacklist>>(VideoBlacklistService.BASE_VIDEOS_URL + 'blacklist', { params })
                .pipe(
diff --git a/client/src/app/shared/video-channel/video-channel.model.ts b/client/src/app/shared/video-channel/video-channel.model.ts
index 309b614ae..617d6d44d 100644
--- a/client/src/app/shared/video-channel/video-channel.model.ts
+++ b/client/src/app/shared/video-channel/video-channel.model.ts
@@ -1,4 +1,4 @@
-import { VideoChannel as ServerVideoChannel } from '../../../../../shared/models/videos'
+import { VideoChannel as ServerVideoChannel, ViewsPerDate } from '../../../../../shared/models/videos'
 import { Actor } from '../actor/actor.model'
 import { Account } from '../../../../../shared/models/actors'
 
@@ -8,9 +8,11 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
   support: string
   isLocal: boolean
   nameWithHost: string
+  nameWithHostForced: string
   ownerAccount?: Account
   ownerBy?: string
   ownerAvatarUrl?: string
+  viewsPerDay?: ViewsPerDate[]
 
   constructor (hash: ServerVideoChannel) {
     super(hash)
@@ -20,6 +22,11 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
     this.support = hash.support
     this.isLocal = hash.isLocal
     this.nameWithHost = Actor.CREATE_BY_STRING(this.name, this.host)
+    this.nameWithHostForced = Actor.CREATE_BY_STRING(this.name, this.host, true)
+
+    if (hash.viewsPerDay) {
+      this.viewsPerDay = hash.viewsPerDay.map(v => ({ ...v, date: new Date(v.date) }))
+    }
 
     if (hash.ownerAccount) {
       this.ownerAccount = hash.ownerAccount
diff --git a/client/src/app/shared/video-channel/video-channel.service.ts b/client/src/app/shared/video-channel/video-channel.service.ts
index adb4f4819..0e036bda7 100644
--- a/client/src/app/shared/video-channel/video-channel.service.ts
+++ b/client/src/app/shared/video-channel/video-channel.service.ts
@@ -44,13 +44,18 @@ export class VideoChannelService {
                )
   }
 
-  listAccountVideoChannels (account: Account, componentPagination?: ComponentPaginationLight): Observable<ResultList<VideoChannel>> {
+  listAccountVideoChannels (
+    account: Account,
+    componentPagination?: ComponentPaginationLight,
+    withStats = false
+  ): Observable<ResultList<VideoChannel>> {
     const pagination = componentPagination
       ? this.restService.componentPaginationToRestPagination(componentPagination)
       : { start: 0, count: 20 }
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination)
+    params = params.set('withStats', withStats + '')
 
     const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-channels'
     return this.authHttp.get<ResultList<VideoChannelServer>>(url, { params })
diff --git a/client/src/app/shared/video-import/video-import.service.ts b/client/src/app/shared/video-import/video-import.service.ts
index 3e3fb7dfb..afd9e3fb5 100644
--- a/client/src/app/shared/video-import/video-import.service.ts
+++ b/client/src/app/shared/video-import/video-import.service.ts
@@ -9,7 +9,7 @@ import { VideoImportCreate, VideoUpdate } from '../../../../../shared/models/vid
 import { objectToFormData } from '@app/shared/misc/utils'
 import { ResultList } from '../../../../../shared/models/result-list.model'
 import { UserService } from '@app/shared/users/user.service'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { RestPagination } from '@app/shared/rest'
 import { ServerService } from '@app/core'
 
diff --git a/client/src/app/shared/video-ownership/video-ownership.service.ts b/client/src/app/shared/video-ownership/video-ownership.service.ts
index aa9e4839a..b95d5b792 100644
--- a/client/src/app/shared/video-ownership/video-ownership.service.ts
+++ b/client/src/app/shared/video-ownership/video-ownership.service.ts
@@ -5,7 +5,7 @@ import { environment } from '../../../environments/environment'
 import { RestExtractor, RestService } from '../rest'
 import { VideoChangeOwnershipCreate } from '../../../../../shared/models/videos'
 import { Observable } from 'rxjs/index'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { ResultList, VideoChangeOwnership } from '../../../../../shared'
 import { RestPagination } from '@app/shared/rest'
 import { VideoChangeOwnershipAccept } from '../../../../../shared/models/videos/video-change-ownership-accept.model'
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
index 6e0989227..58108584b 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
@@ -62,7 +62,7 @@
   <div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened">
     <my-global-icon iconName="add"></my-global-icon>
 
-    Create a private playlist
+    <span i18n>Create a private playlist</span>
   </div>
 
   <form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form">
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
index f1b6cd601..1724449e8 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
@@ -4,7 +4,7 @@
 .header,
 .dropdown-item,
 .input-container {
-  padding: 6px 24px 10px 24px;
+  padding: 8px 24px;
 }
 
 .header {
@@ -54,11 +54,12 @@
 }
 
 .playlist {
-  display: flex;
+  display: inline-flex;
   cursor: pointer;
 
   my-peertube-checkbox {
     margin-right: 10px;
+    align-self: center;
   }
 
   .display-name {
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
index 4864581b5..a2c0724cd 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
@@ -18,7 +18,7 @@ import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class VideoPlaylistElementMiniatureComponent implements OnInit {
-  @ViewChild('moreDropdown', { static: false }) moreDropdown: NgbDropdown
+  @ViewChild('moreDropdown') moreDropdown: NgbDropdown
 
   @Input() playlist: VideoPlaylist
   @Input() playlistElement: VideoPlaylistElement
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 3c7a4b1fc..44b629542 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -15,6 +15,11 @@
       top: 1px;
       margin-left: 5px;
       width: max-content;
+      opacity: 0;
+      transition: ease-in .2s opacity;
+    }
+    &:hover my-feed {
+      opacity: 1;
     }
   }
 
@@ -50,3 +55,15 @@
   @include adapt-margin-content-width;
 }
 
+@media screen and (max-width: $mobile-view) {
+  .videos-header {
+    flex-direction: column;
+    align-items: center;
+    height: auto;
+
+    .title-page {
+      margin-bottom: 10px;
+      margin-right: 0px;
+    }
+  }
+}
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index c2fe6f754..b146d7014 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -1,4 +1,4 @@
-import { debounceTime, first, tap } from 'rxjs/operators'
+import { debounceTime, first, tap, throttleTime } from 'rxjs/operators'
 import { OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { fromEvent, Observable, of, Subject, Subscription } from 'rxjs'
@@ -14,6 +14,9 @@ import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { isLastMonth, isLastWeek, isToday, isYesterday } from '@shared/core-utils/miscs/date'
 import { ServerConfig } from '@shared/models'
+import { GlobalIconName } from '@app/shared/images/global-icon.component'
+import { UserService, User } from '../users'
+import { LocalStorageService } from '../misc/storage.service'
 
 enum GroupDate {
   UNKNOWN = 0,
@@ -61,7 +64,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
 
   actions: {
     routerLink: string
-    iconName: string
+    iconName: GlobalIconName
     label: string
   }[] = []
 
@@ -71,9 +74,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
 
   protected abstract notifier: Notifier
   protected abstract authService: AuthService
+  protected abstract userService: UserService
   protected abstract route: ActivatedRoute
   protected abstract serverService: ServerService
   protected abstract screenService: ScreenService
+  protected abstract storageService: LocalStorageService
   protected abstract router: Router
   protected abstract i18n: I18n
   abstract titlePage: string
@@ -123,6 +128,16 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
     if (this.loadOnInit === true) {
       loadUserObservable.subscribe(() => this.loadMoreVideos())
     }
+
+    this.storageService.watch([
+      User.KEYS.NSFW_POLICY,
+      User.KEYS.VIDEO_LANGUAGES
+    ]).pipe(throttleTime(200)).subscribe(
+      () => {
+        this.loadUserVideoLanguagesIfNeeded()
+        if (this.hasDoneFirstQuery) this.reloadVideos()
+      }
+    )
   }
 
   ngOnDestroy () {
@@ -278,7 +293,12 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
   }
 
   private loadUserVideoLanguagesIfNeeded () {
-    if (!this.authService.isLoggedIn() || !this.useUserVideoLanguagePreferences) {
+    if (!this.useUserVideoLanguagePreferences) {
+      return of(true)
+    }
+
+    if (!this.authService.isLoggedIn()) {
+      this.languageOneOf = this.userService.getAnonymousUser().videoLanguages
       return of(true)
     }
 
diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts
index 9f613c5fa..f09c3d1fc 100644
--- a/client/src/app/shared/video/infinite-scroller.directive.ts
+++ b/client/src/app/shared/video/infinite-scroller.directive.ts
@@ -1,4 +1,4 @@
-import { distinctUntilChanged, filter, map, share, startWith, tap, throttleTime } from 'rxjs/operators'
+import { distinctUntilChanged, filter, map, share, startWith, throttleTime } from 'rxjs/operators'
 import { AfterContentChecked, Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
 import { fromEvent, Observable, Subscription } from 'rxjs'
 
@@ -53,7 +53,7 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterConten
     const scrollableElement = this.onItself ? this.container : window
     const scrollObservable = fromEvent(scrollableElement, 'scroll')
       .pipe(
-        startWith(null as string), // FIXME: typings
+        startWith(true),
         throttleTime(200, undefined, throttleOptions),
         map(() => this.getScrollInfo()),
         distinctUntilChanged((o1, o2) => o1.current === o2.current),
diff --git a/client/src/app/shared/video/modals/video-blacklist.component.html b/client/src/app/shared/video/modals/video-blacklist.component.html
index 1a87bdcd4..8f06a6b02 100644
--- a/client/src/app/shared/video/modals/video-blacklist.component.html
+++ b/client/src/app/shared/video/modals/video-blacklist.component.html
@@ -8,8 +8,10 @@
 
     <form novalidate [formGroup]="form" (ngSubmit)="blacklist()">
       <div class="form-group">
-        <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
-        </textarea>
+        <textarea
+          i18n-placeholder placeholder="Reason..." formControlName="reason"
+          [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
+        ></textarea>
         <div *ngIf="formErrors.reason" class="form-error">
           {{ formErrors.reason }}
         </div>
@@ -18,14 +20,19 @@
       <div class="form-group" *ngIf="video.isLocal">
         <my-peertube-checkbox
           inputName="unfederate" formControlName="unfederate"
-          i18n-labelText labelText="Unfederate the video (ask for its deletion from the remote instances)"
-        ></my-peertube-checkbox>
+          i18n-labelText labelText="Unfederate the video"
+        >
+          <ng-container ngProjectAs="description">
+            <span i18n>This will ask remote instances to delete it</span>
+          </ng-container>
+        </my-peertube-checkbox>
       </div>
 
       <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hide()">
-          Cancel
-        </span>
+        <input
+          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          (click)="hide()" (key.enter)="hide()"
+        >
 
         <input
           type="submit" i18n-value value="Submit" class="action-button-submit"
diff --git a/client/src/app/shared/video/modals/video-blacklist.component.ts b/client/src/app/shared/video/modals/video-blacklist.component.ts
index f0c70a365..6ef9c250b 100644
--- a/client/src/app/shared/video/modals/video-blacklist.component.ts
+++ b/client/src/app/shared/video/modals/video-blacklist.component.ts
@@ -1,12 +1,12 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier, RedirectService } from '@app/core'
 import { VideoBlacklistService } from '../../../shared/video-blacklist'
-import { VideoDetails } from '../../../shared/video/video-details.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { FormReactive, VideoBlacklistValidatorsService } from '@app/shared/forms'
+import { Video } from '@app/shared/video/video.model'
 
 @Component({
   selector: 'my-video-blacklist',
@@ -14,7 +14,7 @@ import { FormReactive, VideoBlacklistValidatorsService } from '@app/shared/forms
   styleUrls: [ './video-blacklist.component.scss' ]
 })
 export class VideoBlacklistComponent extends FormReactive implements OnInit {
-  @Input() video: VideoDetails = null
+  @Input() video: Video = null
 
   @ViewChild('modal', { static: true }) modal: NgbModal
 
@@ -46,7 +46,7 @@ export class VideoBlacklistComponent extends FormReactive implements OnInit {
   }
 
   show () {
-    this.openedModal = this.modalService.open(this.modal, { keyboard: false })
+    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false })
   }
 
   hide () {
diff --git a/client/src/app/shared/video/modals/video-download.component.html b/client/src/app/shared/video/modals/video-download.component.html
index 8cca985b1..c65e371ee 100644
--- a/client/src/app/shared/video/modals/video-download.component.html
+++ b/client/src/app/shared/video/modals/video-download.component.html
@@ -1,7 +1,7 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
-    <h4 class="modal-title">Download
-      <span *ngIf="!videoCaptions" i18n>video</span>
+    <h4 class="modal-title">
+      <ng-container i18n>Download</ng-container>
 
       <div *ngIf="videoCaptions" ngbDropdown class="d-inline-block">
         <span id="dropdownDownloadType" ngbDropdownToggle>
@@ -20,22 +20,67 @@
     <div class="form-group">
       <div class="input-group input-group-sm">
         <div class="input-group-prepend peertube-select-container">
-          <select *ngIf="type === 'video'" [(ngModel)]="resolutionId">
+          <select *ngIf="type === 'video'" [(ngModel)]="resolutionId" (ngModelChange)="onResolutionIdChange()">
             <option *ngFor="let file of getVideoFiles()" [value]="file.resolution.id">{{ file.resolution.label }}</option>
           </select>
+
           <select *ngIf="type === 'subtitles'" [(ngModel)]="subtitleLanguageId">
             <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
           </select>
         </div>
+
         <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
         <div class="input-group-append">
-          <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
+          <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
             <span class="glyphicon glyphicon-copy"></span>
           </button>
         </div>
       </div>
     </div>
 
+    <ng-container *ngIf="type === 'video' && videoFile?.metadata">
+      <div ngbNav #nav="ngbNav" class="nav-tabs">
+
+        <ng-container ngbNavItem>
+          <a ngbNavLink i18n>Format</a>
+          <ng-template ngbNavContent>
+            <div class="file-metadata">
+              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataFormat | keyvalue">
+                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+                <span class="metadata-attribute-value">{{ item.value.value }}</span>
+              </div>
+            </div>
+          </ng-template>
+        </ng-container>
+
+        <ng-container ngbNavItem [disabled]="videoFileMetadataVideoStream === undefined">
+          <a ngbNavLink i18n>Video stream</a>
+          <ng-template ngbNavContent>
+            <div class="file-metadata">
+              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataVideoStream | keyvalue">
+                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+                <span class="metadata-attribute-value">{{ item.value.value }}</span>
+              </div>
+            </div>
+          </ng-template>
+        </ng-container>
+
+        <ng-container ngbNavItem [disabled]="videoFileMetadataAudioStream === undefined">
+          <a ngbNavLink i18n>Audio stream</a>
+          <ng-template ngbNavContent>
+            <div class="file-metadata">
+              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataAudioStream | keyvalue">
+                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+                <span class="metadata-attribute-value">{{ item.value.value }}</span>
+              </div>
+            </div>
+          </ng-template>
+        </ng-container>
+      </div>
+
+      <div [ngbNavOutlet]="nav"></div>
+    </ng-container>
+
     <div class="download-type" *ngIf="type === 'video'">
       <div class="peertube-radio-container">
         <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct">
@@ -50,9 +95,10 @@
   </div>
 
   <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-cancel" (click)="hide()">
-      Cancel
-    </span>
+    <input
+      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+      (click)="hide()" (key.enter)="hide()"
+    >
 
     <input
       type="submit" i18n-value value="Download" class="action-button-submit"
diff --git a/client/src/app/shared/video/modals/video-download.component.scss b/client/src/app/shared/video/modals/video-download.component.scss
index 09dd91aa9..f28bc34ed 100644
--- a/client/src/app/shared/video/modals/video-download.component.scss
+++ b/client/src/app/shared/video/modals/video-download.component.scss
@@ -27,3 +27,38 @@
     margin-right: 30px;
   }
 }
+
+.file-metadata {
+  padding: 1rem;
+}
+
+.file-metadata .metadata-attribute {
+  font-size: 13px;
+  display: block;
+  margin-bottom: 12px;
+
+  .metadata-attribute-label {
+    min-width: 142px;
+    padding-right: 5px;
+    display: inline-block;
+    color: $grey-foreground-color;
+    font-weight: $font-bold;
+  }
+
+  a.metadata-attribute-value {
+    @include disable-default-a-behaviour;
+    color: var(--mainForegroundColor);
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+
+  &.metadata-attribute-tags {
+    .metadata-attribute-value:not(:nth-child(2)) {
+      &::before {
+        content: ', '
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/video/modals/video-download.component.ts b/client/src/app/shared/video/modals/video-download.component.ts
index c1ceca263..d77187821 100644
--- a/client/src/app/shared/video/modals/video-download.component.ts
+++ b/client/src/app/shared/video/modals/video-download.component.ts
@@ -3,9 +3,15 @@ import { VideoDetails } from '../../../shared/video/video-details.model'
 import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { AuthService, Notifier } from '@app/core'
-import { VideoPrivacy, VideoCaption } from '@shared/models'
+import { VideoPrivacy, VideoCaption, VideoFile } from '@shared/models'
+import { FfprobeFormat, FfprobeStream } from 'fluent-ffmpeg'
+import { mapValues, pick } from 'lodash-es'
+import { NumberFormatterPipe } from '@app/shared/angular/number-formatter.pipe'
+import { BytesPipe } from 'ngx-pipes'
+import { VideoService } from '../video.service'
 
 type DownloadType = 'video' | 'subtitles'
+type FileMetadata = { [key: string]: { label: string, value: string }}
 
 @Component({
   selector: 'my-video-download',
@@ -20,17 +26,28 @@ export class VideoDownloadComponent {
   subtitleLanguageId: string
 
   video: VideoDetails
+  videoFile: VideoFile
+  videoFileMetadataFormat: FileMetadata
+  videoFileMetadataVideoStream: FileMetadata | undefined
+  videoFileMetadataAudioStream: FileMetadata | undefined
   videoCaptions: VideoCaption[]
   activeModal: NgbActiveModal
 
   type: DownloadType = 'video'
 
+  private bytesPipe: BytesPipe
+  private numbersPipe: NumberFormatterPipe
+
   constructor (
     private notifier: Notifier,
     private modalService: NgbModal,
+    private videoService: VideoService,
     private auth: AuthService,
     private i18n: I18n
-  ) { }
+  ) {
+    this.bytesPipe = new BytesPipe()
+    this.numbersPipe = new NumberFormatterPipe()
+  }
 
   get typeText () {
     return this.type === 'video'
@@ -48,9 +65,10 @@ export class VideoDownloadComponent {
     this.video = video
     this.videoCaptions = videoCaptions && videoCaptions.length ? videoCaptions : undefined
 
-    this.activeModal = this.modalService.open(this.modal)
+    this.activeModal = this.modalService.open(this.modal, { centered: true })
 
     this.resolutionId = this.getVideoFiles()[0].resolution.id
+    this.onResolutionIdChange()
     if (this.videoCaptions) this.subtitleLanguageId = this.videoCaptions[0].language.id
   }
 
@@ -67,10 +85,27 @@ export class VideoDownloadComponent {
   getLink () {
     return this.type === 'subtitles' && this.videoCaptions
       ? this.getSubtitlesLink()
-      : this.getVideoLink()
+      : this.getVideoFileLink()
   }
 
-  getVideoLink () {
+  async onResolutionIdChange () {
+    this.videoFile = this.getVideoFile()
+    if (this.videoFile.metadata || !this.videoFile.metadataUrl) return
+
+    await this.hydrateMetadataFromMetadataUrl(this.videoFile)
+
+    this.videoFileMetadataFormat = this.videoFile
+      ? this.getMetadataFormat(this.videoFile.metadata.format)
+      : undefined
+    this.videoFileMetadataVideoStream = this.videoFile
+      ? this.getMetadataStream(this.videoFile.metadata.streams, 'video')
+      : undefined
+    this.videoFileMetadataAudioStream = this.videoFile
+      ? this.getMetadataStream(this.videoFile.metadata.streams, 'audio')
+      : undefined
+  }
+
+  getVideoFile () {
     // HTML select send us a string, so convert it to a number
     this.resolutionId = parseInt(this.resolutionId.toString(), 10)
 
@@ -79,6 +114,12 @@ export class VideoDownloadComponent {
       console.error('Could not find file with resolution %d.', this.resolutionId)
       return
     }
+    return file
+  }
+
+  getVideoFileLink () {
+    const file = this.videoFile
+    if (!file) return
 
     const suffix = this.video.privacy.id === VideoPrivacy.PRIVATE || this.video.privacy.id === VideoPrivacy.INTERNAL
       ? '?access_token=' + this.auth.getAccessToken()
@@ -104,4 +145,64 @@ export class VideoDownloadComponent {
   switchToType (type: DownloadType) {
     this.type = type
   }
+
+  getMetadataFormat (format: FfprobeFormat) {
+    const keyToTranslateFunction = {
+      'encoder': (value: string) => ({ label: this.i18n('Encoder'), value }),
+      'format_long_name': (value: string) => ({ label: this.i18n('Format name'), value }),
+      'size': (value: number) => ({ label: this.i18n('Size'), value: this.bytesPipe.transform(value, 2) }),
+      'bit_rate': (value: number) => ({
+        label: this.i18n('Bitrate'),
+        value: `${this.numbersPipe.transform(value)}bps`
+      })
+    }
+
+    // flattening format
+    const sanitizedFormat = Object.assign(format, format.tags)
+    delete sanitizedFormat.tags
+
+    return mapValues(
+      pick(sanitizedFormat, Object.keys(keyToTranslateFunction)),
+      (val, key) => keyToTranslateFunction[key](val)
+    )
+  }
+
+  getMetadataStream (streams: FfprobeStream[], type: 'video' | 'audio') {
+    const stream = streams.find(s => s.codec_type === type)
+    if (!stream) return undefined
+
+    let keyToTranslateFunction = {
+      'codec_long_name': (value: string) => ({ label: this.i18n('Codec'), value }),
+      'profile': (value: string) => ({ label: this.i18n('Profile'), value }),
+      'bit_rate': (value: number) => ({
+        label: this.i18n('Bitrate'),
+        value: `${this.numbersPipe.transform(value)}bps`
+      })
+    }
+
+    if (type === 'video') {
+      keyToTranslateFunction = Object.assign(keyToTranslateFunction, {
+        'width': (value: number) => ({ label: this.i18n('Resolution'), value: `${value}x${stream.height}` }),
+        'display_aspect_ratio': (value: string) => ({ label: this.i18n('Aspect ratio'), value }),
+        'avg_frame_rate': (value: string) => ({ label: this.i18n('Average frame rate'), value }),
+        'pix_fmt': (value: string) => ({ label: this.i18n('Pixel format'), value })
+      })
+    } else {
+      keyToTranslateFunction = Object.assign(keyToTranslateFunction, {
+        'sample_rate': (value: number) => ({ label: this.i18n('Sample rate'), value }),
+        'channel_layout': (value: number) => ({ label: this.i18n('Channel Layout'), value })
+      })
+    }
+
+    return mapValues(
+      pick(stream, Object.keys(keyToTranslateFunction)),
+      (val, key) => keyToTranslateFunction[key](val)
+    )
+  }
+
+  private hydrateMetadataFromMetadataUrl (file: VideoFile) {
+    const observable = this.videoService.getVideoFileMetadata(file.metadataUrl)
+    observable.subscribe(res => file.metadata = res)
+    return observable.toPromise()
+  }
 }
diff --git a/client/src/app/shared/video/modals/video-report.component.html b/client/src/app/shared/video/modals/video-report.component.html
index b9434da26..e336b6660 100644
--- a/client/src/app/shared/video/modals/video-report.component.html
+++ b/client/src/app/shared/video/modals/video-report.component.html
@@ -7,23 +7,25 @@
   <div class="modal-body">
 
     <div i18n class="information">
-      Your report will be sent to moderators of {{ currentHost }}.
-      <ng-container *ngIf="isRemoteVideo()"> It will be forwarded to origin instance {{ originHost }} too.</ng-container>
+      Your report will be sent to moderators of {{ currentHost }}<ng-container *ngIf="isRemoteVideo()"> and will be forwarded to the video origin ({{ originHost }}) too</ng-container>.
     </div>
 
     <form novalidate [formGroup]="form" (ngSubmit)="report()">
       <div class="form-group">
-        <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
-        </textarea>
+        <textarea 
+          i18n-placeholder placeholder="Reason..." formControlName="reason"
+          [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
+        ></textarea>
         <div *ngIf="formErrors.reason" class="form-error">
           {{ formErrors.reason }}
         </div>
       </div>
 
       <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hide()">
-          Cancel
-        </span>
+        <input
+          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          (click)="hide()" (key.enter)="hide()"
+        >
 
         <input
           type="submit" i18n-value value="Submit" class="action-button-submit"
diff --git a/client/src/app/shared/video/modals/video-report.component.ts b/client/src/app/shared/video/modals/video-report.component.ts
index 1d368ff17..988fa03d4 100644
--- a/client/src/app/shared/video/modals/video-report.component.ts
+++ b/client/src/app/shared/video/modals/video-report.component.ts
@@ -1,13 +1,13 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
 import { FormReactive } from '../../../shared/forms'
-import { VideoDetails } from '../../../shared/video/video-details.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { VideoAbuseValidatorsService } from '@app/shared/forms/form-validators/video-abuse-validators.service'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { VideoAbuseService } from '@app/shared/video-abuse'
+import { Video } from '@app/shared/video/video.model'
 
 @Component({
   selector: 'my-video-report',
@@ -15,7 +15,7 @@ import { VideoAbuseService } from '@app/shared/video-abuse'
   styleUrls: [ './video-report.component.scss' ]
 })
 export class VideoReportComponent extends FormReactive implements OnInit {
-  @Input() video: VideoDetails = null
+  @Input() video: Video = null
 
   @ViewChild('modal', { static: true }) modal: NgbModal
 
@@ -53,7 +53,7 @@ export class VideoReportComponent extends FormReactive implements OnInit {
   }
 
   show () {
-    this.openedModal = this.modalService.open(this.modal, { keyboard: false })
+    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false })
   }
 
   hide () {
diff --git a/client/src/app/shared/video/redundancy.service.ts b/client/src/app/shared/video/redundancy.service.ts
new file mode 100644
index 000000000..fb918d73b
--- /dev/null
+++ b/client/src/app/shared/video/redundancy.service.ts
@@ -0,0 +1,73 @@
+import { catchError, map, toArray } from 'rxjs/operators'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor, RestPagination, RestService } from '@app/shared/rest'
+import { SortMeta } from 'primeng/api'
+import { ResultList, Video, VideoRedundanciesTarget, VideoRedundancy } from '@shared/models'
+import { concat, Observable } from 'rxjs'
+import { environment } from '../../../environments/environment'
+
+@Injectable()
+export class RedundancyService {
+  static BASE_REDUNDANCY_URL = environment.apiUrl + '/api/v1/server/redundancy'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restService: RestService,
+    private restExtractor: RestExtractor
+  ) { }
+
+  updateRedundancy (host: string, redundancyAllowed: boolean) {
+    const url = RedundancyService.BASE_REDUNDANCY_URL + '/' + host
+
+    const body = { redundancyAllowed }
+
+    return this.authHttp.put(url, body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  listVideoRedundancies (options: {
+    pagination: RestPagination,
+    sort: SortMeta,
+    target?: VideoRedundanciesTarget
+  }): Observable<ResultList<VideoRedundancy>> {
+    const { pagination, sort, target } = options
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    if (target) params = params.append('target', target)
+
+    return this.authHttp.get<ResultList<VideoRedundancy>>(RedundancyService.BASE_REDUNDANCY_URL + '/videos', { params })
+               .pipe(
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+
+  addVideoRedundancy (video: Video) {
+    return this.authHttp.post(RedundancyService.BASE_REDUNDANCY_URL + '/videos', { videoId: video.id })
+      .pipe(
+        catchError(res => this.restExtractor.handleError(res))
+      )
+  }
+
+  removeVideoRedundancies (redundancy: VideoRedundancy) {
+    const observables = redundancy.redundancies.streamingPlaylists.map(r => r.id)
+      .concat(redundancy.redundancies.files.map(r => r.id))
+      .map(id => this.removeRedundancy(id))
+
+    return concat(...observables)
+      .pipe(toArray())
+  }
+
+  private removeRedundancy (redundancyId: number) {
+    return this.authHttp.delete(RedundancyService.BASE_REDUNDANCY_URL + '/videos/' + redundancyId)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+}
diff --git a/client/src/app/shared/video/video-actions-dropdown.component.ts b/client/src/app/shared/video/video-actions-dropdown.component.ts
index afdeab18d..4e5fc6476 100644
--- a/client/src/app/shared/video/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/video/video-actions-dropdown.component.ts
@@ -1,8 +1,7 @@
-import { AfterViewInit, Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
+import { Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { DropdownAction, DropdownButtonSize, DropdownDirection } from '@app/shared/buttons/action-dropdown.component'
-import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
-import { BlocklistService } from '@app/shared/blocklist'
+import { AuthService, ConfirmService, Notifier } from '@app/core'
 import { Video } from '@app/shared/video/video.model'
 import { VideoService } from '@app/shared/video/video.service'
 import { VideoDetails } from '@app/shared/video/video-details.model'
@@ -14,6 +13,7 @@ import { VideoBlacklistComponent } from '@app/shared/video/modals/video-blacklis
 import { VideoBlacklistService } from '@app/shared/video-blacklist'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { VideoCaption } from '@shared/models'
+import { RedundancyService } from '@app/shared/video/redundancy.service'
 
 export type VideoActionsDisplayType = {
   playlist?: boolean
@@ -22,6 +22,7 @@ export type VideoActionsDisplayType = {
   blacklist?: boolean
   delete?: boolean
   report?: boolean
+  duplicate?: boolean
 }
 
 @Component({
@@ -30,12 +31,12 @@ export type VideoActionsDisplayType = {
   styleUrls: [ './video-actions-dropdown.component.scss' ]
 })
 export class VideoActionsDropdownComponent implements OnChanges {
-  @ViewChild('playlistDropdown', { static: false }) playlistDropdown: NgbDropdown
-  @ViewChild('playlistAdd', { static: false }) playlistAdd: VideoAddToPlaylistComponent
+  @ViewChild('playlistDropdown') playlistDropdown: NgbDropdown
+  @ViewChild('playlistAdd') playlistAdd: VideoAddToPlaylistComponent
 
-  @ViewChild('videoDownloadModal', { static: false }) videoDownloadModal: VideoDownloadComponent
-  @ViewChild('videoReportModal', { static: false }) videoReportModal: VideoReportComponent
-  @ViewChild('videoBlacklistModal', { static: false }) videoBlacklistModal: VideoBlacklistComponent
+  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
+  @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
+  @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent
 
   @Input() video: Video | VideoDetails
   @Input() videoCaptions: VideoCaption[] = []
@@ -46,7 +47,8 @@ export class VideoActionsDropdownComponent implements OnChanges {
     update: true,
     blacklist: true,
     delete: true,
-    report: true
+    report: true,
+    duplicate: true
   }
   @Input() placement = 'left'
 
@@ -70,10 +72,9 @@ export class VideoActionsDropdownComponent implements OnChanges {
     private notifier: Notifier,
     private confirmService: ConfirmService,
     private videoBlacklistService: VideoBlacklistService,
-    private serverService: ServerService,
     private screenService: ScreenService,
     private videoService: VideoService,
-    private blocklistService: BlocklistService,
+    private redundancyService: RedundancyService,
     private i18n: I18n
   ) { }
 
@@ -144,6 +145,10 @@ export class VideoActionsDropdownComponent implements OnChanges {
     return this.video && this.video instanceof VideoDetails && this.video.downloadEnabled
   }
 
+  canVideoBeDuplicated () {
+    return this.video.canBeDuplicatedBy(this.user)
+  }
+
   /* Action handlers */
 
   async unblacklistVideo () {
@@ -186,6 +191,18 @@ export class VideoActionsDropdownComponent implements OnChanges {
         )
   }
 
+  duplicateVideo () {
+    this.redundancyService.addVideoRedundancy(this.video)
+      .subscribe(
+        () => {
+          const message = this.i18n('This video will be duplicated by your instance.')
+          this.notifier.success(message)
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
   onVideoBlacklisted () {
     this.videoBlacklisted.emit()
   }
@@ -234,6 +251,12 @@ export class VideoActionsDropdownComponent implements OnChanges {
           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.blacklist && this.isVideoUnblacklistable()
         },
         {
+          label: this.i18n('Mirror'),
+          handler: () => this.duplicateVideo(),
+          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.duplicate && this.canVideoBeDuplicated(),
+          iconName: 'cloud-download'
+        },
+        {
           label: this.i18n('Delete'),
           handler: () => this.removeVideo(),
           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.delete && this.isVideoRemovable(),
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 46c49c15b..8e948ce42 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -2,7 +2,10 @@
   <my-video-thumbnail
     [video]="video" [nsfw]="isVideoBlur"
     [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"
-  ></my-video-thumbnail>
+  >
+    <ng-container ngProjectAs="label-warning" *ngIf="displayOptions.privacyLabel && isUnlistedVideo()" i18n>Unlisted</ng-container>
+    <ng-container ngProjectAs="label-danger" *ngIf="displayOptions.privacyLabel && isPrivateVideo()" i18n>Private</ng-container>
+  </my-video-thumbnail>
 
   <div class="video-bottom">
     <div class="video-miniature-information">
@@ -19,11 +22,6 @@
           <ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container>
           <ng-container i18n *ngIf="displayOptions.views">{video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}</ng-container>
         </span>
-
-        <ng-container *ngIf="displayOptions.privacyLabel">
-          <span *ngIf="isUnlistedVideo()" class="badge badge-warning ml-1" i18n>Unlisted</span>
-          <span *ngIf="isPrivateVideo()" class="badge badge-danger ml-1" i18n>Private</span>
-        </ng-container>
       </span>
 
       <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]">
@@ -50,9 +48,9 @@
     </div>
 
     <div class="video-actions">
-      <!-- FIXME: remove bottom placement when overflow is fixed in bootstrap dropdown -->
+      <!-- FIXME: remove bottom placement when overflow is fixed in bootstrap dropdown: https://github.com/ng-bootstrap/ng-bootstrap/issues/3495 -->
       <my-video-actions-dropdown
-        *ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left"
+        *ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left auto"
         (videoRemoved)="onVideoRemoved()" (videoBlacklisted)="onVideoBlacklisted()" (videoUnblacklisted)="onVideoUnblacklisted()"
       ></my-video-actions-dropdown>
     </div>
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index b63fd2989..f27800a24 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -85,8 +85,12 @@ $more-margin-right: 15px;
     }
 
     @media screen and (max-width: $small-view) {
-      .video-miniature-information .video-miniature-name {
-        margin-top: 0;
+      .video-miniature-information {
+        margin: 0 10px;
+
+        .video-miniature-name {
+          margin-top: 0;
+        }
       }
 
       .video-actions {
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index 598a7a983..72b652448 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -64,7 +64,8 @@ export class VideoMiniatureComponent implements OnInit {
     update: true,
     blacklist: true,
     delete: true,
-    report: true
+    report: true,
+    duplicate: true
   }
   showActions = false
   serverConfig: ServerConfig
@@ -199,7 +200,7 @@ export class VideoMiniatureComponent implements OnInit {
   }
 
   isWatchLaterPlaylistDisplayed () {
-    return this.inWatchLaterPlaylist !== undefined
+    return this.isUserLoggedIn() && this.inWatchLaterPlaylist !== undefined
   }
 
   private setUpBy () {
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index b63085b81..fe5510c56 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -1,5 +1,5 @@
 <a
-  [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [title]="video.name"
+  [routerLink]="getVideoRouterLink()" [queryParams]="queryParams"
   class="video-thumbnail"
 >
   <img alt="" [attr.aria-label]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
@@ -18,6 +18,9 @@
     </ng-container>
   </div>
 
+  <div class="video-thumbnail-label-overlay warning"><ng-content select="label-warning"></ng-content></div>
+  <div class="video-thumbnail-label-overlay danger"><ng-content select="label-danger"></ng-content></div>
+
   <div class="video-thumbnail-duration-overlay">{{ video.durationLabel }}</div>
 
   <div class="play-overlay">
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index 573a64987..5fca916f0 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -19,13 +19,24 @@
   }
 
   .video-thumbnail-watch-later-overlay,
+  .video-thumbnail-label-overlay,
   .video-thumbnail-duration-overlay {
     @include static-thumbnail-overlay;
 
     border-radius: 3px;
     font-size: 12px;
     font-weight: $font-bold;
-    z-index: 1;
+    z-index: z(miniature);
+  }
+
+  .video-thumbnail-label-overlay {
+    position: absolute;
+    padding: 0 5px;
+    left: 5px;
+    top: 5px;
+
+    &.warning { background-color: orange; }
+    &.danger { background-color: red; }
   }
 
   .video-thumbnail-duration-overlay {
diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts
index 2420ec715..111b4c8bb 100644
--- a/client/src/app/shared/video/video-thumbnail.component.ts
+++ b/client/src/app/shared/video/video-thumbnail.component.ts
@@ -12,7 +12,7 @@ export class VideoThumbnailComponent {
   @Input() video: Video
   @Input() nsfw = false
   @Input() routerLink: any[]
-  @Input() queryParams: any[]
+  @Input() queryParams: { [ p: string ]: any }
 
   @Input() displayWatchLaterPlaylist: boolean
   @Input() inWatchLaterPlaylist: boolean
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index fb98d5382..546518cca 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -42,6 +42,9 @@ export class Video implements VideoServerModel {
   dislikes: number
   nsfw: boolean
 
+  originInstanceUrl: string
+  originInstanceHost: string
+
   waitTranscoding?: boolean
   state?: VideoConstant<VideoState>
   scheduledUpdate?: VideoScheduleUpdate
@@ -86,22 +89,31 @@ export class Video implements VideoServerModel {
     this.waitTranscoding = hash.waitTranscoding
     this.state = hash.state
     this.description = hash.description
+
     this.duration = hash.duration
     this.durationLabel = durationToString(hash.duration)
+
     this.id = hash.id
     this.uuid = hash.uuid
+
     this.isLocal = hash.isLocal
     this.name = hash.name
+
     this.thumbnailPath = hash.thumbnailPath
     this.thumbnailUrl = absoluteAPIUrl + hash.thumbnailPath
+
     this.previewPath = hash.previewPath
     this.previewUrl = absoluteAPIUrl + hash.previewPath
+
     this.embedPath = hash.embedPath
     this.embedUrl = absoluteAPIUrl + hash.embedPath
+
     this.views = hash.views
     this.likes = hash.likes
     this.dislikes = hash.dislikes
+
     this.nsfw = hash.nsfw
+
     this.account = hash.account
     this.channel = hash.channel
 
@@ -124,6 +136,9 @@ export class Video implements VideoServerModel {
     this.blacklistedReason = hash.blacklistedReason
 
     this.userHistory = hash.userHistory
+
+    this.originInstanceHost = this.account.host
+    this.originInstanceUrl = 'https://' + this.originInstanceHost
   }
 
   isVideoNSFWForUser (user: User, serverConfig: ServerConfig) {
@@ -152,4 +167,8 @@ export class Video implements VideoServerModel {
   isUpdatableBy (user: AuthUser) {
     return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.UPDATE_ANY_VIDEO))
   }
+
+  canBeDuplicatedBy (user: AuthUser) {
+    return user && this.isLocal === false && user.hasRight(UserRight.MANAGE_VIDEOS_REDUNDANCIES)
+  }
 }
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index 996202154..3aaf14990 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -27,10 +27,12 @@ import { objectToFormData } from '@app/shared/misc/utils'
 import { Account } from '@app/shared/account/account.model'
 import { AccountService } from '@app/shared/account/account.service'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
-import { ServerService } from '@app/core'
+import { ServerService, AuthService } from '@app/core'
 import { UserSubscriptionService } from '@app/shared/user-subscription/user-subscription.service'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
+import { FfprobeData } from 'fluent-ffmpeg'
 
 export interface VideosProvider {
   getVideos (parameters: {
@@ -49,6 +51,8 @@ export class VideoService implements VideosProvider {
 
   constructor (
     private authHttp: HttpClient,
+    private authService: AuthService,
+    private userService: UserService,
     private restExtractor: RestExtractor,
     private restService: RestService,
     private serverService: ServerService,
@@ -199,9 +203,10 @@ export class VideoService implements VideosProvider {
     filter?: VideoFilter,
     categoryOneOf?: number,
     languageOneOf?: string[],
-    skipCount?: boolean
+    skipCount?: boolean,
+    nsfw?: boolean
   }): Observable<ResultList<Video>> {
-    const { videoPagination, sort, filter, categoryOneOf, languageOneOf, skipCount } = parameters
+    const { videoPagination, sort, filter, categoryOneOf, languageOneOf, skipCount, nsfw } = parameters
 
     const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
 
@@ -212,6 +217,15 @@ export class VideoService implements VideosProvider {
     if (categoryOneOf) params = params.set('categoryOneOf', categoryOneOf + '')
     if (skipCount) params = params.set('skipCount', skipCount + '')
 
+    if (nsfw) {
+      params = params.set('nsfw', nsfw + '')
+    } else {
+      const nsfwPolicy = this.authService.isLoggedIn()
+        ? this.authService.getUser().nsfwPolicy
+        : this.userService.getAnonymousUser().nsfwPolicy
+      if (this.nsfwPolicyToFilter(nsfwPolicy)) params.set('nsfw', 'false')
+    }
+
     if (languageOneOf) {
       for (const l of languageOneOf) {
         params = params.append('languageOneOf[]', l)
@@ -278,6 +292,14 @@ export class VideoService implements VideosProvider {
     return this.buildBaseFeedUrls(params)
   }
 
+  getVideoFileMetadata (metadataUrl: string) {
+    return this.authHttp
+               .get<FfprobeData>(metadataUrl)
+               .pipe(
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
   removeVideo (id: number) {
     return this.authHttp
                .delete(VideoService.BASE_VIDEO_URL + id)
@@ -368,4 +390,8 @@ export class VideoService implements VideosProvider {
                  catchError(err => this.restExtractor.handleError(err))
                )
   }
+
+  private nsfwPolicyToFilter (policy: NSFWPolicyType) {
+    return policy === 'do_not_list'
+  }
 }
diff --git a/client/src/app/shared/video/videos-selection.component.ts b/client/src/app/shared/video/videos-selection.component.ts
index 064420056..17e5beb24 100644
--- a/client/src/app/shared/video/videos-selection.component.ts
+++ b/client/src/app/shared/video/videos-selection.component.ts
@@ -22,6 +22,8 @@ import { VideoSortField } from '@app/shared/video/sort-field.type'
 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ResultList } from '@shared/models'
+import { UserService } from '../users'
+import { LocalStorageService } from '../misc/storage.service'
 
 export type SelectionType = { [ id: number ]: boolean }
 
@@ -51,7 +53,9 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
     protected route: ActivatedRoute,
     protected notifier: Notifier,
     protected authService: AuthService,
+    protected userService: UserService,
     protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
     protected serverService: ServerService
   ) {
     super()
diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
index 19043eee6..6a9e31b5a 100644
--- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
@@ -9,7 +9,7 @@
     <div class="modal-body">
       <label i18n for="language">Language</label>
       <div class="peertube-select-container">
-        <select id="language" formControlName="language">
+        <select id="language" formControlName="language" class="form-control">
           <option></option>
           <option *ngFor="let language of videoCaptionLanguages" [value]="language.id">{{ language.label }}</option>
         </select>
@@ -23,6 +23,7 @@
         <my-reactive-file
           formControlName="captionfile" inputName="captionfile" i18n-inputLabel inputLabel="Select the caption file"
           [extensions]="videoCaptionExtensions" [maxFileSize]="videoCaptionMaxSize" [displayFilename]="true"
+          i18n-ngbTooltip [ngbTooltip]="'(extensions: ' + videoCaptionExtensions.join(', ') + ')'"
         ></my-reactive-file>
       </div>
 
@@ -32,9 +33,10 @@
     </div>
 
     <div class="modal-footer inputs">
-      <span i18n class="action-button action-button-cancel" (click)="hide()">
-        Cancel
-      </span>
+      <input
+        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        (click)="hide()" (key.enter)="hide()"
+      >
 
       <input
         type="submit" i18n-value value="Add this caption" class="action-button-submit"
diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.scss b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.scss
index c6da1877e..b257a16a9 100644
--- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.scss
@@ -7,6 +7,11 @@
 
 .caption-file {
   margin-top: 20px;
+  width: max-content;
+
+  ::ng-deep .root {
+    width: max-content;
+  }
 }
 
 .warning-replace-caption {
diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts
index 1a9bf5171..9856aac9e 100644
--- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts
+++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts
@@ -56,7 +56,7 @@ export class VideoCaptionAddModalComponent extends FormReactive implements OnIni
   show () {
     this.closingModal = false
 
-    this.openedModal = this.modalService.open(this.modal, { keyboard: false })
+    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false })
   }
 
   hide () {
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
index e40649d95..9a0e4f848 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -1,13 +1,15 @@
 <div class="video-edit" [formGroup]="form">
-  <ngb-tabset class="root-tabset bootstrap">
+  <div ngbNav #nav="ngbNav" class="nav-tabs">
 
-    <ngb-tab i18n-title title="Basic info">
-      <ng-template ngbTabContent>
+    <ng-container ngbNavItem>
+      <a ngbNavLink i18n>Basic info</a>
+
+      <ng-template ngbNavContent>
         <div class="row">
-          <div class="col-md-8">
+          <div class="col-video-edit">
             <div class="form-group">
               <label i18n for="name">Title</label>
-              <input type="text" id="name" formControlName="name" />
+              <input type="text" id="name" class="form-control" formControlName="name" />
               <div *ngIf="formErrors.name" class="form-error">
                 {{ formErrors.name }}
               </div>
@@ -29,7 +31,7 @@
               <tag-input
                 [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
                 i18n-placeholder placeholder="+ Tag" i18n-secondaryPlaceholder secondaryPlaceholder="Enter a new tag"
-                formControlName="tags" maxItems="5" modelAsStrings="true"
+                formControlName="tags" [maxItems]="5" [modelAsStrings]="true"
               ></tag-input>
             </div>
 
@@ -44,7 +46,7 @@
                 </ng-template>
               </my-help>
 
-              <my-markdown-textarea truncate="250" formControlName="description" markdownVideo="true"></my-markdown-textarea>
+              <my-markdown-textarea [truncate]="250" formControlName="description" [markdownVideo]="true"></my-markdown-textarea>
 
               <div *ngIf="formErrors.description" class="form-error">
                 {{ formErrors.description }}
@@ -52,11 +54,11 @@
             </div>
           </div>
 
-          <div class="col-md-4">
+          <div class="col-video-edit">
             <div class="form-group">
               <label i18n>Channel</label>
               <div class="peertube-select-container">
-                <select formControlName="channelId">
+                <select formControlName="channelId" class="form-control">
                   <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
                 </select>
               </div>
@@ -65,7 +67,7 @@
             <div class="form-group">
               <label i18n for="category">Category</label>
               <div class="peertube-select-container">
-                <select id="category" formControlName="category">
+                <select id="category" formControlName="category" class="form-control">
                   <option></option>
                   <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
                 </select>
@@ -79,7 +81,7 @@
             <div class="form-group">
               <label i18n for="licence">Licence</label>
               <div class="peertube-select-container">
-                <select id="licence" formControlName="licence">
+                <select id="licence" formControlName="licence" class="form-control">
                   <option></option>
                   <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
                 </select>
@@ -93,7 +95,7 @@
             <div class="form-group">
               <label i18n for="language">Language</label>
               <div class="peertube-select-container">
-                <select id="language" formControlName="language">
+                <select id="language" formControlName="language" class="form-control">
                   <option></option>
                   <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
                 </select>
@@ -107,7 +109,7 @@
             <div class="form-group">
               <label i18n for="privacy">Privacy</label>
               <div class="peertube-select-container">
-                <select id="privacy" formControlName="privacy">
+                <select id="privacy" formControlName="privacy" class="form-control">
                   <option></option>
                   <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
                   <option *ngIf="schedulePublicationPossible" [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option>
@@ -155,10 +157,12 @@
           </div>
         </div>
       </ng-template>
-    </ngb-tab>
+    </ng-container>
+
+    <ng-container ngbNavItem>
+      <a ngbNavLink i18n>Captions</a>
 
-    <ngb-tab i18n-title title="Captions">
-      <ng-template ngbTabContent>
+      <ng-template ngbNavContent>
         <div class="captions">
 
           <div class="captions-header">
@@ -206,10 +210,12 @@
 
         </div>
       </ng-template>
-    </ngb-tab>
+    </ng-container>
+
+    <ng-container ngbNavItem>
+      <a ngbNavLink i18n>Advanced settings</a>
 
-    <ngb-tab i18n-title title="Advanced settings">
-      <ng-template ngbTabContent>
+      <ng-template ngbNavContent>
         <div class="row advanced-settings">
           <div class="col-md-12 col-xl-8">
 
@@ -226,7 +232,7 @@
               <label i18n for="support">Support</label>
               <my-help helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support you (membership platform...)."></my-help>
               <my-markdown-textarea
-                id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
+                id="support" formControlName="support" markdownType="enhanced"
                 [classes]="{ 'input-error': formErrors['support'] }"
               ></my-markdown-textarea>
               <div *ngIf="formErrors.support" class="form-error">
@@ -262,10 +268,11 @@
           </div>
         </div>
       </ng-template>
-    </ngb-tab>
+    </ng-container>
 
-  </ngb-tabset>
+  </div>
 
+  <div [ngbNavOutlet]="nav"></div>
 </div>
 
 <my-video-caption-add-modal
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 144914731..2f9067132 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,5 +1,16 @@
-@import '_variables';
-@import '_mixins';
+// Bootstrap grid utilities require functions, variables and mixins
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+@import 'node_modules/bootstrap/scss/grid';
+
+@import 'variables';
+@import 'mixins';
+
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
 
 .peertube-select-container {
   @include peertube-select-container(auto);
@@ -19,6 +30,10 @@ my-peertube-checkbox {
   margin-bottom: 1rem;
 }
 
+.nav-tabs {
+  margin-bottom: 15px;
+}
+
 .video-edit {
   height: 100%;
   min-height: 300px;
@@ -45,6 +60,7 @@ my-peertube-checkbox {
 
   .captions-header {
     text-align: right;
+    margin-bottom: 1rem;
 
     .create-caption {
       @include create-button;
@@ -59,6 +75,7 @@ my-peertube-checkbox {
     a.caption-entry-label {
       @include disable-default-a-behaviour;
 
+      flex-grow: 1;
       color: #000;
 
       &:hover {
@@ -144,69 +161,37 @@ p-calendar {
   }
 }
 
-::ng-deep {
-  .root-tabset > .nav {
-    margin-bottom: 15px;
-  }
+@include ng2-tags;
 
-  .ng2-tag-input {
-    border: none !important;
-  }
+// columns for the video
+.col-video-edit {
+  @include make-col-ready();
 
-  .ng2-tags-container {
-    display: flex;
-    align-items: center;
-    border: 1px solid #C6C6C6;
-    border-radius: 3px;
-    padding: 5px !important;
-    height: max-content;
-  }
+  @include media-breakpoint-up(md) {
+    @include make-col(7);
 
-  tag-input-form {
-    input {
-      height: 30px !important;
-      font-size: 12px !important;
-
-      background-color: var(--mainBackgroundColor) !important;
-      color: var(--mainForegroundColor) !important;
+    & + .col-video-edit {
+      @include make-col(5);
     }
   }
 
-  tag {
-    background-color: $grey-background-color !important;
-    color: #000 !important;
-    border-radius: 3px !important;
-    font-size: 12px !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;
+  @include media-breakpoint-up(xl) {
+    @include make-col(8);
+
+    & + .col-video-edit {
+      @include make-col(4);
     }
   }
+}
 
-  delete-icon {
-    cursor: pointer !important;
-    height: auto !important;
-    vertical-align: middle !important;
-    padding-left: 6px !important;
-
-    svg {
-      position: relative;
-      top: -1px;
-      height: auto !important;
-      vertical-align: middle !important;
+:host-context(.expanded) {
+  .col-video-edit {
+    @include media-breakpoint-up(md) {
+      @include make-col(8);
 
-      path  {
-        fill: $grey-foreground-color !important;
+      & + .col-video-edit {
+        @include make-col(4);
       }
     }
-
-    &:hover {
-      transform: none !important;
-    }
   }
 }
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 39b6daa93..1357d607c 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
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'
 import { TagInputModule } from 'ngx-chips'
 import { SharedModule } from '../../../shared/'
 import { VideoEditComponent } from './video-edit.component'
-import { CalendarModule } from 'primeng/components/calendar/calendar'
+import { CalendarModule } from 'primeng/calendar'
 import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
 
 @NgModule({
diff --git a/client/src/app/videos/+video-edit/video-add-components/drag-drop.directive.ts b/client/src/app/videos/+video-edit/video-add-components/drag-drop.directive.ts
new file mode 100644
index 000000000..7b1a38c62
--- /dev/null
+++ b/client/src/app/videos/+video-edit/video-add-components/drag-drop.directive.ts
@@ -0,0 +1,30 @@
+import { Directive, Output, EventEmitter, HostBinding, HostListener } from '@angular/core'
+
+@Directive({
+  selector: '[dragDrop]'
+})
+export class DragDropDirective {
+  @Output() fileDropped = new EventEmitter<FileList>()
+
+  @HostBinding('class.dragover') dragover = false
+
+  @HostListener('dragover', ['$event']) onDragOver (e: Event) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.dragover = true
+  }
+
+  @HostListener('dragleave', ['$event']) public onDragLeave (e: Event) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.dragover = false
+  }
+
+  @HostListener('drop', ['$event']) public ondrop (e: DragEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.dragover = false
+    const files = e.dataTransfer.files
+    if (files.length > 0) this.fileDropped.emit(files)
+  }
+}
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
index c290fd4b1..c2ee3ad57 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
@@ -1,14 +1,13 @@
-<div *ngIf="!hasImportedVideo" class="upload-video-container">
+<div *ngIf="!hasImportedVideo" class="upload-video-container" dragDrop (fileDropped)="setTorrentFile($event)">
   <div class="first-step-block">
     <my-global-icon class="upload-icon" iconName="upload"></my-global-icon>
 
-    <div class="button-file">
+    <div class="button-file form-control" [ngbTooltip]="'(extensions: .torrent)'">
       <span i18n>Select the torrent to import</span>
       <input #torrentfileInput type="file" name="torrentfile" id="torrentfile" accept=".torrent" (change)="fileChange()" />
     </div>
-    <span class="button-file-extension">(.torrent)</span>
 
-    <div class="torrent-or-magnet" i18n>Or</div>
+    <div class="torrent-or-magnet" i18n-data-content data-content="OR"></div>
 
     <div class="form-group form-group-magnet-uri">
       <label i18n for="magnetUri">Paste magnet URI</label>
@@ -21,13 +20,13 @@
         </ng-template>
       </my-help>
 
-      <input type="text" id="magnetUri" [(ngModel)]="magnetUri" />
+      <input type="text" id="magnetUri" [(ngModel)]="magnetUri" class="form-control" />
     </div>
 
     <div class="form-group">
       <label i18n for="first-step-channel">Channel</label>
       <div class="peertube-select-container">
-        <select id="first-step-channel" [(ngModel)]="firstStepChannelId">
+        <select id="first-step-channel" [(ngModel)]="firstStepChannelId" class="form-control">
           <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
         </select>
       </div>
@@ -36,7 +35,7 @@
     <div class="form-group">
       <label i18n for="first-step-privacy">Privacy</label>
       <div class="peertube-select-container">
-        <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId">
+        <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId" class="form-control">
           <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
         </select>
       </div>
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
index 6d59ed834..3b46475b4 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
@@ -3,7 +3,11 @@
 
 .first-step-block {
   .torrent-or-magnet {
-    margin: 10px 0;
+    @include divider($color: var(--inputPlaceholderColor), $background: var(--submenuColor));
+    
+    &[data-content] {
+      margin: 1.5rem 0;
+    }
   }
 
   .form-group-magnet-uri {
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
index 74e1e755b..4d0b0b080 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
@@ -25,7 +25,7 @@ import { scrollToTop } from '@app/shared/misc/utils'
 export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate {
   @Output() firstStepDone = new EventEmitter<string>()
   @Output() firstStepError = new EventEmitter<void>()
-  @ViewChild('torrentfileInput', { static: false }) torrentfileInput: ElementRef<HTMLInputElement>
+  @ViewChild('torrentfileInput') torrentfileInput: ElementRef<HTMLInputElement>
 
   magnetUri = ''
 
@@ -72,6 +72,11 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
     this.importVideo(torrentfile)
   }
 
+  setTorrentFile (files: FileList) {
+    this.torrentfileInput.nativeElement.files = files
+    this.fileChange()
+  }
+
   importVideo (torrentfile?: Blob) {
     this.isImportingVideo = true
 
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
index 09d0b8272..9a26fe308 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
@@ -15,13 +15,13 @@
         </ng-template>
       </my-help>
 
-      <input type="text" id="targetUrl" [(ngModel)]="targetUrl" />
+      <input type="text" id="targetUrl" [(ngModel)]="targetUrl" class="form-control" />
     </div>
 
     <div class="form-group">
       <label i18n for="first-step-channel">Channel</label>
       <div class="peertube-select-container">
-        <select id="first-step-channel" [(ngModel)]="firstStepChannelId">
+        <select id="first-step-channel" [(ngModel)]="firstStepChannelId" class="form-control">
           <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
         </select>
       </div>
@@ -30,7 +30,7 @@
     <div class="form-group">
       <label i18n for="first-step-privacy">Privacy</label>
       <div class="peertube-select-container">
-        <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId">
+        <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId" class="form-control">
           <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
         </select>
       </div>
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
index a5578bebd..213c42333 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
@@ -11,7 +11,8 @@ import { VideoEdit } from '@app/shared/video/video-edit.model'
 import { FormValidatorService } from '@app/shared'
 import { VideoCaptionService } from '@app/shared/video-caption'
 import { VideoImportService } from '@app/shared/video-import'
-import { scrollToTop } from '@app/shared/misc/utils'
+import { scrollToTop, getAbsoluteAPIUrl } from '@app/shared/misc/utils'
+import { switchMap, map } from 'rxjs/operators'
 
 @Component({
   selector: 'my-video-import-url',
@@ -76,31 +77,54 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
 
     this.loadingBar.start()
 
-    this.videoImportService.importVideoUrl(this.targetUrl, videoUpdate).subscribe(
-      res => {
-        this.loadingBar.complete()
-        this.firstStepDone.emit(res.video.name)
-        this.isImportingVideo = false
-        this.hasImportedVideo = true
-
-        this.video = new VideoEdit(Object.assign(res.video, {
-          commentsEnabled: videoUpdate.commentsEnabled,
-          downloadEnabled: videoUpdate.downloadEnabled,
-          support: null,
-          thumbnailUrl: null,
-          previewUrl: null
-        }))
-
-        this.hydrateFormFromVideo()
-      },
+    this.videoImportService
+        .importVideoUrl(this.targetUrl, videoUpdate)
+        .pipe(
+          switchMap(res => {
+            return this.videoCaptionService
+                .listCaptions(res.video.id)
+                .pipe(
+                  map(result => ({ video: res.video, videoCaptions: result.data }))
+                )
+          })
+        )
+        .subscribe(
+          ({ video, videoCaptions }) => {
+            this.loadingBar.complete()
+            this.firstStepDone.emit(video.name)
+            this.isImportingVideo = false
+            this.hasImportedVideo = true
 
-      err => {
-        this.loadingBar.complete()
-        this.isImportingVideo = false
-        this.firstStepError.emit()
-        this.notifier.error(err.message)
-      }
-    )
+            const absoluteAPIUrl = getAbsoluteAPIUrl()
+
+            const thumbnailUrl = video.thumbnailPath
+              ? absoluteAPIUrl + video.thumbnailPath
+              : null
+
+            const previewUrl = video.previewPath
+              ? absoluteAPIUrl + video.previewPath
+              : null
+
+            this.video = new VideoEdit(Object.assign(video, {
+              commentsEnabled: videoUpdate.commentsEnabled,
+              downloadEnabled: videoUpdate.downloadEnabled,
+              support: null,
+              thumbnailUrl,
+              previewUrl
+            }))
+
+            this.videoCaptions = videoCaptions
+
+            this.hydrateFormFromVideo()
+          },
+
+          err => {
+            this.loadingBar.complete()
+            this.isImportingVideo = false
+            this.firstStepError.emit()
+            this.notifier.error(err.message)
+          }
+        )
   }
 
   updateSecondStep () {
@@ -133,5 +157,26 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
 
   private hydrateFormFromVideo () {
     this.form.patchValue(this.video.toFormPatch())
+
+    const objects = [
+      {
+        url: 'thumbnailUrl',
+        name: 'thumbnailfile'
+      },
+      {
+        url: 'previewUrl',
+        name: 'previewfile'
+      }
+    ]
+
+    for (const obj of objects) {
+      fetch(this.video[obj.url])
+        .then(response => response.blob())
+        .then(data => {
+          this.form.patchValue({
+            [ obj.name ]: data
+          })
+        })
+    }
   }
 }
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-send.scss b/client/src/app/videos/+video-edit/video-add-components/video-send.scss
index 8769dd302..ebe14c59e 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-send.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-send.scss
@@ -41,14 +41,6 @@ $width-size: 190px;
   }
 
   .button-file {
-    @include peertube-button-file(auto);
-
-    min-width: 190px;
-  }
-
-  .button-file-extension {
-    display: block;
-    font-size: 12px;
-    margin-top: 5px;
+    @include peertube-button-file(max-content);
   }
 }
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
index 0f904affb..950e55a52 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
@@ -1,17 +1,16 @@
-<div *ngIf="!isUploadingVideo" class="upload-video-container">
+<div *ngIf="!isUploadingVideo" class="upload-video-container" dragDrop (fileDropped)="setVideoFile($event)">
   <div class="first-step-block">
     <my-global-icon class="upload-icon" iconName="upload"></my-global-icon>
 
-    <div class="button-file">
+    <div class="button-file form-control" [ngbTooltip]="'(extensions: ' + videoExtensions + ')'">
       <span i18n>Select the file to upload</span>
-      <input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" />
+      <input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" autofocus />
     </div>
-    <span class="button-file-extension">({{ videoExtensions }})</span>
 
     <div class="form-group form-group-channel">
       <label i18n for="first-step-channel">Channel</label>
       <div class="peertube-select-container">
-        <select id="first-step-channel" [(ngModel)]="firstStepChannelId">
+        <select id="first-step-channel" [(ngModel)]="firstStepChannelId" class="form-control">
           <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
         </select>
       </div>
@@ -20,7 +19,7 @@
     <div class="form-group">
       <label i18n for="first-step-privacy">Privacy</label>
       <div class="peertube-select-container">
-        <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId">
+        <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId" class="form-control">
           <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
           <option i18n [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option>
         </select>
@@ -51,10 +50,12 @@
 </div>
 
 <div *ngIf="isUploadingVideo && !error" class="upload-progress-cancel">
-  <p-progressBar
-    [value]="videoUploadPercents"
-    [ngClass]="{ processing: videoUploadPercents === 100 && videoUploaded === false }"
-  ></p-progressBar>
+  <div class="progress" i18n-title title="Total video quota">
+    <div class="progress-bar" role="progressbar" [style]="{ width: videoUploadPercents + '%' }" [attr.aria-valuenow]="videoUploadPercents" aria-valuemin="0" [attr.aria-valuemax]="100">
+      <span *ngIf="videoUploadPercents === 100 && videoUploaded === false" i18n>Processing…</span>
+      <span *ngIf="videoUploadPercents !== 100 || videoUploaded">{{ videoUploadPercents }}%</span>
+    </div>
+  </div>
   <input *ngIf="videoUploaded === false" type="button" value="Cancel" (click)="cancelUpload()" />
 </div>
 
@@ -68,7 +69,7 @@
 </div>
 
 <!-- Hidden because we want to load the component -->
-<form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
+<form [hidden]="!isUploadingVideo" novalidate [formGroup]="form" class="mb-3">
   <my-video-edit
     [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions"
     [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
index b5628e276..a4f87b0b8 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
@@ -2,7 +2,6 @@
 @import 'mixins';
 
 .first-step-block {
-
   .form-group-channel {
     margin-bottom: 20px;
     margin-top: 35px;
@@ -22,37 +21,21 @@
   margin-top: 25px;
   margin-bottom: 40px;
 
-  p-progressBar {
+  .progress {
+    @include progressbar;
     flex-grow: 1;
-
-    ::ng-deep .ui-progressbar {
-      font-size: 15px !important;
-      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;
-        color: #fff !important;
-        line-height: 30px !important;
-      }
-    }
-
-    &.processing {
-      ::ng-deep .ui-progressbar-label {
-        // Same color as background to hide "100%"
-        color: rgba(11, 204, 41, 0.16) !important;
-
-        &::before {
-          content: 'Processing...';
-          color: #fff;
-        }
+    height: 30px;
+    font-size: 15px;
+    background-color: rgba(11, 204, 41, 0.16);
+
+    .progress-bar {
+      background-color: $green;
+      line-height: 30px;
+      text-align: left;
+      font-weight: $font-bold;
+
+      span {
+        margin-left: 18px;
       }
     }
   }
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
index aa87f9581..9ce3fbc6d 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
@@ -27,7 +27,7 @@ import { scrollToTop } from '@app/shared/misc/utils'
 export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate {
   @Output() firstStepDone = new EventEmitter<string>()
   @Output() firstStepError = new EventEmitter<void>()
-  @ViewChild('videofileInput', { static: false }) videofileInput: ElementRef<HTMLInputElement>
+  @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement>
 
   // So that it can be accessed in the template
   readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
@@ -70,7 +70,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
   }
 
   get videoExtensions () {
-    return this.serverConfig.video.file.extensions.join(',')
+    return this.serverConfig.video.file.extensions.join(', ')
   }
 
   ngOnInit () {
@@ -108,6 +108,11 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     return this.videofileInput.nativeElement.files[0]
   }
 
+  setVideoFile (files: FileList) {
+    this.videofileInput.nativeElement.files = files
+    this.fileChange()
+  }
+
   getAudioUploadLabel () {
     const videofile = this.getVideoFile()
     if (!videofile) return this.i18n('Upload')
@@ -122,9 +127,13 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
   cancelUpload () {
     if (this.videoUploadObservable !== null) {
       this.videoUploadObservable.unsubscribe()
+
       this.isUploadingVideo = false
       this.videoUploadPercents = 0
       this.videoUploadObservable = null
+
+      this.firstStepError.emit()
+
       this.notifier.info(this.i18n('Upload cancelled'))
     }
   }
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 a99988600..79bfc6e5c 100644
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -10,27 +10,37 @@
     <ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container>
   </div>
 
-  <ngb-tabset class="video-add-tabset root-tabset bootstrap" [ngClass]="{ 'hide-nav': secondStepType !== undefined }">
+  <div ngbNav #nav="ngbNav" class="nav-tabs video-add-nav" [ngClass]="{ 'hide-nav': secondStepType !== undefined }">
+    <ng-container ngbNavItem>
+      <a ngbNavLink>
+        <span i18n>Upload a file</span>
+      </a>
 
-    <ngb-tab>
-      <ng-template ngbTabTitle><span i18n>Upload a file</span></ng-template>
-      <ng-template ngbTabContent>
+      <ng-template ngbNavContent>
         <my-video-upload #videoUpload (firstStepDone)="onFirstStepDone('upload', $event)" (firstStepError)="onError()"></my-video-upload>
       </ng-template>
-    </ngb-tab>
+    </ng-container>
 
-    <ngb-tab *ngIf="isVideoImportHttpEnabled()">
-      <ng-template ngbTabTitle><span i18n>Import with URL</span></ng-template>
-      <ng-template ngbTabContent>
+    <ng-container ngbNavItem *ngIf="isVideoImportHttpEnabled()">
+      <a ngbNavLink>
+        <span i18n>Import with URL</span>
+      </a>
+
+      <ng-template ngbNavContent>
         <my-video-import-url #videoImportUrl (firstStepDone)="onFirstStepDone('import-url', $event)" (firstStepError)="onError()"></my-video-import-url>
       </ng-template>
-    </ngb-tab>
+    </ng-container>
+
+    <ng-container ngbNavItem *ngIf="isVideoImportTorrentEnabled()">
+      <a ngbNavLink>
+        <span i18n>Import with torrent</span>
+      </a>
 
-    <ngb-tab *ngIf="isVideoImportTorrentEnabled()">
-      <ng-template ngbTabTitle><span i18n>Import with torrent</span></ng-template>
-      <ng-template ngbTabContent>
+      <ng-template ngbNavContent>
         <my-video-import-torrent #videoImportTorrent (firstStepDone)="onFirstStepDone('import-torrent', $event)" (firstStepError)="onError()"></my-video-import-torrent>
       </ng-template>
-    </ngb-tab>
-  </ngb-tabset>
+    </ng-container>
+  </div>
+
+  <div [ngbNavOutlet]="nav"></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
index 7acab3744..1316e09e4 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -4,6 +4,7 @@
 $border-width: 3px;
 $border-type: solid;
 $border-color: #EAEAEA;
+$nav-link-height: 40px;
 
 .margin-content {
   padding-top: 50px;
@@ -13,52 +14,76 @@ $border-color: #EAEAEA;
   font-size: 15px;
 }
 
-::ng-deep .root-tabset.video-add-tabset {
-  margin-top: 50px;
+::ng-deep .video-add-nav {
+  border-bottom: $border-width $border-type $border-color;
+  margin: 50px 0 0 0 !important;
 
-  &.hide-nav > .nav {
+  &.hide-nav {
     display: none !important;
   }
 
-  & > .nav {
-    border-bottom: $border-width $border-type $border-color;
-    margin: 0 !important;
+  a.nav-link {
+    @include disable-default-a-behaviour;
 
-    & > li {
-      margin-bottom: -$border-width;
+    margin-bottom: -$border-width;
+    height: $nav-link-height !important;
+    padding: 0 30px !important;
+    font-size: 15px;
+
+    &.active {
+      border: $border-width $border-type $border-color;
+      border-bottom: none;
+      background-color: var(--submenuColor) !important;
+
+      span {
+        border-bottom: 2px solid var(--mainColor);
+        font-weight: $font-bold;
+      }
     }
+  }
+}
+
+::ng-deep .upload-video-container {
+  border: $border-width $border-type $border-color;
+  border-top: transparent;
 
-    a.nav-link {
-      @include disable-default-a-behaviour;
+  background-color: var(--submenuColor);
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  width: 100%;
+  min-height: 440px;
+  padding-bottom: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-      height: 40px !important;
-      padding: 0 30px !important;
-      font-size: 15px;
+  &.dragover {
+    border: 3px dashed var(--mainColor);
+  }
+}
 
-      &.active {
-        border: $border-width $border-type $border-color;
-        border-bottom: none;
-        background-color: var(--submenuColor) !important;
+@mixin nav-scroll {
+  ::ng-deep .video-add-nav {
+    height: #{$nav-link-height + $border-width * 2};
+    overflow-x: auto;
+    white-space: nowrap;
+    flex-wrap: unset;
 
-        span {
-          border-bottom: 2px solid var(--mainColor);
-          font-weight: $font-bold;
-        }
-      }
+    /* Hide active tab style to not have a moving tab effect */
+    a.nav-link.active {
+      border: none;
+      background-color: var(--mainBackgroundColor) !important;
     }
   }
+}
+
+/* Make .video-add-nav tabs scrollable on small devices */
+@media screen and (max-width: $small-view) {
+  @include nav-scroll();
+}
 
-  .upload-video-container {
-    border: $border-width $border-type $border-color;
-    border-top: none;
-
-    background-color: var(--submenuColor);
-    border-radius: 3px;
-    width: 100%;
-    min-height: 440px;
-    padding-bottom: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+@media screen and (max-width: #{$small-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include nav-scroll();
   }
 }
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 401d8a08f..30ab08ea0 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -12,9 +12,9 @@ import { ServerConfig } from '@shared/models'
   styleUrls: [ './video-add.component.scss' ]
 })
 export class VideoAddComponent implements OnInit, CanComponentDeactivate {
-  @ViewChild('videoUpload', { static: false }) videoUpload: VideoUploadComponent
-  @ViewChild('videoImportUrl', { static: false }) videoImportUrl: VideoImportUrlComponent
-  @ViewChild('videoImportTorrent', { static: false }) videoImportTorrent: VideoImportTorrentComponent
+  @ViewChild('videoUpload') videoUpload: VideoUploadComponent
+  @ViewChild('videoImportUrl') videoImportUrl: VideoImportUrlComponent
+  @ViewChild('videoImportTorrent') videoImportTorrent: VideoImportTorrentComponent
 
   secondStepType: 'upload' | 'import-url' | 'import-torrent'
   videoName: string
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 870f7cb97..b8f5a9a47 100644
--- a/client/src/app/videos/+video-edit/video-add.module.ts
+++ b/client/src/app/videos/+video-edit/video-add.module.ts
@@ -3,27 +3,28 @@ import { SharedModule } from '../../shared'
 import { VideoEditModule } from './shared/video-edit.module'
 import { VideoAddRoutingModule } from './video-add-routing.module'
 import { VideoAddComponent } from './video-add.component'
+import { DragDropDirective } from './video-add-components/drag-drop.directive'
 import { CanDeactivateGuard } from '../../shared/guards/can-deactivate-guard.service'
 import { VideoUploadComponent } from '@app/videos/+video-edit/video-add-components/video-upload.component'
 import { VideoImportUrlComponent } from '@app/videos/+video-edit/video-add-components/video-import-url.component'
 import { VideoImportTorrentComponent } from '@app/videos/+video-edit/video-add-components/video-import-torrent.component'
-import { ProgressBarModule } from 'primeng/progressbar'
 
 @NgModule({
   imports: [
     VideoAddRoutingModule,
     VideoEditModule,
-    SharedModule,
-    ProgressBarModule
+    SharedModule
   ],
   declarations: [
     VideoAddComponent,
     VideoUploadComponent,
     VideoImportUrlComponent,
-    VideoImportTorrentComponent
+    VideoImportTorrentComponent,
+    DragDropDirective
   ],
   exports: [
-    VideoAddComponent
+    VideoAddComponent,
+    DragDropDirective
   ],
   providers: [
     CanDeactivateGuard
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
index 3a9977df6..9b43d91da 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
@@ -17,7 +17,7 @@
   </div>
 
   <div class="comment-buttons">
-    <button *ngIf="isAddButtonDisplayed()" class="cancel-button" (click)="cancelCommentReply()" i18n>
+    <button *ngIf="isAddButtonDisplayed()" class="cancel-button" (click)="cancelCommentReply()" type="button" i18n>
       Cancel
     </button>
     <button *ngIf="isAddButtonDisplayed()" [ngClass]="{ disabled: !form.valid || addingComment }" i18n>
@@ -29,15 +29,11 @@
 <ng-template #visitorModal let-modal>
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from commenting</h4>
-    <button type="button" class="close" aria-label="Close" (click)="hideVisitorModal()"></button>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideVisitorModal()"></my-global-icon>
   </div>
   <div class="modal-body">
     <span i18n>
-      If you have an account on this instance, you can login:
-    </span>
-    <span class="btn btn-sm mx-3" role="button" (click)="gotoLogin()" i18n>login to comment</span>
-    <span i18n>
-      Otherwise, you can comment using an account on any ActivityPub-compatible instance.
+      You can comment using an account on any ActivityPub-compatible instance.
       On most platforms, you can find the video by typing its URL in the search bar and then comment it
       from within the software's interface.
     </span>
@@ -47,8 +43,14 @@
     <my-remote-subscribe [interact]="true" [uri]="getUri()"></my-remote-subscribe>
   </div>
   <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-cancel" role="button" (click)="hideVisitorModal()">
-      Cancel
-    </span>
+    <input
+      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+      (click)="hideVisitorModal()" (key.enter)="hideVisitorModal()"
+    >
+
+    <input
+      type="submit" i18n-value value="Login to comment" class="action-button-submit"
+      (click)="gotoLogin()"
+    >
   </div>
 </ng-template>
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
index c04727ba0..b3725ab94 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
@@ -30,25 +30,33 @@ form {
   }
 }
 
-.cancel-button {
-  font-weight: $font-semibold;
-  display: inline-block;
-  padding: 0 10px 0 10px;
-  white-space: nowrap;
-  background: transparent;
-}
-
 .comment-buttons {
   display: flex;
   justify-content: flex-end;
 
   button {
     @include peertube-button;
+    @include disable-outline;
+    @include disable-default-a-behaviour;
+
+    &:not(:last-child) {
+      margin-right: .5rem;
+    }
 
     &:last-child {
       @include orange-button;
     }
   }
+
+  .cancel-button {
+    @include tertiary-button;
+
+    font-weight: $font-semibold;
+    display: inline-block;
+    padding: 0 10px 0 10px;
+    white-space: nowrap;
+    background: transparent;
+  }
 }
 
 @media screen and (max-width: 600px) {
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
index 1be96ad9e..e1a8f6260 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
@@ -11,7 +11,6 @@ import { VideoCommentService } from './video-comment.service'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { VideoCommentValidatorsService } from '@app/shared/forms/form-validators/video-comment-validators.service'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { AuthService } from '@app/core/auth'
 
 @Component({
   selector: 'my-video-comment-add',
@@ -25,7 +24,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
   @Input() parentComments: VideoComment[]
   @Input() focusOnInit = false
 
-  @Output() commentCreated = new EventEmitter<VideoCommentCreate>()
+  @Output() commentCreated = new EventEmitter<VideoComment>()
   @Output() cancel = new EventEmitter()
 
   @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
@@ -38,7 +37,6 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
     private videoCommentValidatorsService: VideoCommentValidatorsService,
     private notifier: Notifier,
     private videoCommentService: VideoCommentService,
-    private authService: AuthService,
     private modalService: NgbModal,
     private router: Router
   ) {
@@ -57,7 +55,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
 
       if (this.parentComment) {
         const mentions = this.parentComments
-          .filter(c => c.account.id !== this.user.account.id) // Don't add mention of ourselves
+          .filter(c => c.account && c.account.id !== this.user.account.id) // Don't add mention of ourselves
           .map(c => '@' + c.by)
 
         const mentionsSet = new Set(mentions)
@@ -96,7 +94,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
     this.addingComment = true
 
     const commentCreate: VideoCommentCreate = this.form.value
-    let obs: Observable<any>
+    let obs: Observable<VideoComment>
 
     if (this.parentComment) {
       obs = this.addCommentReply(commentCreate)
@@ -139,6 +137,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
 
   cancelCommentReply () {
     this.cancel.emit(null)
+    this.form.value['text'] = this.textareaElement.nativeElement.value = ''
   }
 
   private addCommentReply (commentCreate: VideoCommentCreate) {
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-thread-tree.model.ts b/client/src/app/videos/+video-watch/comment/video-comment-thread-tree.model.ts
new file mode 100644
index 000000000..1566d7369
--- /dev/null
+++ b/client/src/app/videos/+video-watch/comment/video-comment-thread-tree.model.ts
@@ -0,0 +1,7 @@
+import { VideoCommentThreadTree as VideoCommentThreadTreeServerModel } from '../../../../../../shared/models/videos/video-comment.model'
+import { VideoComment } from '@app/videos/+video-watch/comment/video-comment.model'
+
+export class VideoCommentThreadTree implements VideoCommentThreadTreeServerModel {
+  comment: VideoComment
+  children: VideoCommentThreadTree[]
+}
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.ts b/client/src/app/videos/+video-watch/comment/video-comment.component.ts
index 61f9335d1..868addd58 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.ts
@@ -1,6 +1,5 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'
 import { User, UserRight } from '../../../../../../shared/models/users'
-import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
 import { AuthService } from '@app/core/auth'
 import { AccountService } from '@app/shared/account/account.service'
 import { Video } from '@app/shared/video/video.model'
@@ -10,6 +9,7 @@ import { Account } from '@app/shared/account/account.model'
 import { Notifier } from '@app/core'
 import { UserService } from '@app/shared'
 import { Actor } from '@app/shared/actor/actor.model'
+import { VideoCommentThreadTree } from '@app/videos/+video-watch/comment/video-comment-thread-tree.model'
 
 @Component({
   selector: 'my-video-comment',
@@ -98,6 +98,7 @@ export class VideoCommentComponent implements OnInit, OnChanges {
     return this.comment.account && this.isUserLoggedIn() &&
       (
         this.user.account.id === this.comment.account.id ||
+        this.user.account.id === this.video.account.id ||
         this.user.hasRight(UserRight.REMOVE_ANY_VIDEO_COMMENT)
       )
   }
@@ -125,7 +126,12 @@ export class VideoCommentComponent implements OnInit, OnChanges {
     const html = await this.markdownService.textMarkdownToHTML(this.comment.text, true)
     this.sanitizedCommentHTML = await this.markdownService.processVideoTimestamps(html)
     this.newParentComments = this.parentComments.concat([ this.comment ])
-    this.commentAccount = new Account(this.comment.account)
-    this.getUserIfNeeded(this.commentAccount)
+
+    if (this.comment.account) {
+      this.commentAccount = new Account(this.comment.account)
+      this.getUserIfNeeded(this.commentAccount)
+    } else {
+      this.comment.account = null
+    }
   }
 }
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.model.ts b/client/src/app/videos/+video-watch/comment/video-comment.model.ts
index aaeb0ea9c..171fc4acc 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.model.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.model.ts
@@ -1,5 +1,5 @@
 import { Account as AccountInterface } from '../../../../../../shared/models/actors'
-import { VideoComment as VideoCommentServerModel } from '../../../../../../shared/models/videos/video-comment.model'
+import { VideoComment as VideoCommentServerModel, VideoCommentCreate } from '../../../../../../shared/models/videos/video-comment.model'
 import { Actor } from '@app/shared/actor/actor.model'
 import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
 
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.service.ts b/client/src/app/videos/+video-watch/comment/video-comment.service.ts
index a81e5236a..0b0715390 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.service.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.service.ts
@@ -7,13 +7,14 @@ import { FeedFormat, ResultList } from '../../../../../../shared/models'
 import {
   VideoComment as VideoCommentServerModel,
   VideoCommentCreate,
-  VideoCommentThreadTree
+  VideoCommentThreadTree as VideoCommentThreadTreeServerModel
 } from '../../../../../../shared/models/videos/video-comment.model'
 import { environment } from '../../../../environments/environment'
 import { RestExtractor, RestService } from '../../../shared/rest'
 import { ComponentPaginationLight } from '../../../shared/rest/component-pagination.model'
 import { CommentSortField } from '../../../shared/video/sort-field.type'
 import { VideoComment } from './video-comment.model'
+import { VideoCommentThreadTree } from '@app/videos/+video-watch/comment/video-comment-thread-tree.model'
 
 @Injectable()
 export class VideoCommentService {
@@ -76,9 +77,9 @@ export class VideoCommentService {
     const url = `${VideoCommentService.BASE_VIDEO_URL + videoId}/comment-threads/${threadId}`
 
     return this.authHttp
-               .get(url)
+               .get<VideoCommentThreadTreeServerModel>(url)
                .pipe(
-                 map(tree => this.extractVideoCommentTree(tree as VideoCommentThreadTree)),
+                 map(tree => this.extractVideoCommentTree(tree)),
                  catchError(err => this.restExtractor.handleError(err))
                )
   }
@@ -138,12 +139,12 @@ export class VideoCommentService {
     return { data: comments, total: totalComments }
   }
 
-  private extractVideoCommentTree (tree: VideoCommentThreadTree) {
-    if (!tree) return tree
+  private extractVideoCommentTree (tree: VideoCommentThreadTreeServerModel) {
+    if (!tree) return tree as VideoCommentThreadTree
 
     tree.comment = new VideoComment(tree.comment)
     tree.children.forEach(c => this.extractVideoCommentTree(c))
 
-    return tree
+    return tree as VideoCommentThreadTree
   }
 }
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.html b/client/src/app/videos/+video-watch/comment/video-comments.component.html
index 2bf52ab86..a21042f09 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.html
@@ -13,7 +13,7 @@
 
     <div ngbDropdown class="d-inline-block ml-4">
       <button class="btn btn-sm btn-outline-secondary" id="dropdownSortComments" ngbDropdownToggle i18n>
-        Sort by
+        SORT BY
       </button>
       <div ngbDropdownMenu aria-labelledby="dropdownSortComments">
         <button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button>
@@ -38,7 +38,8 @@
       (nearOfBottom)="onNearOfBottom()"
       [dataObservable]="onDataSubject.asObservable()"
     >
-      <div #commentHighlightBlock id="highlighted-comment">
+      <div>
+        <div class="anchor" #commentHighlightBlock id="highlighted-comment"></div>
         <my-video-comment
           *ngIf="highlightedThread"
           [comment]="highlightedThread"
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.scss b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
index f95ff5aba..5ed1ac629 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
@@ -17,8 +17,20 @@
   font-size: 13px;
 }
 
-.title-block .title-page {
-  margin-right: 0;
+.title-block {
+  .title-page {
+    margin-right: 0;
+  }
+  
+  my-feed {
+    display: inline-block;
+    margin-left: 5px;
+    opacity: 0;
+    transition: ease-in .2s opacity;
+  }
+  &:hover my-feed {
+    opacity: 1;
+  }
 }
 
 #dropdownSortComments {
@@ -28,11 +40,6 @@
   transform: translateY(-7%);
 }
 
-my-feed {
-  display: inline-block;
-  margin-left: 5px;
-}
-
 @media screen and (max-width: 600px) {
   .view-replies {
     margin-left: 46px;
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.ts b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
index 974c61d6c..c6c28e3f7 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
@@ -1,8 +1,7 @@
-import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild, Output, EventEmitter } from '@angular/core'
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { ConfirmService, Notifier } from '@app/core'
 import { Subject, Subscription } from 'rxjs'
-import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
 import { AuthService } from '../../../core/auth'
 import { ComponentPagination, hasMoreItems } from '../../../shared/rest/component-pagination.model'
 import { User } from '../../../shared/users'
@@ -13,6 +12,7 @@ import { VideoCommentService } from './video-comment.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { Syndication } from '@app/shared/video/syndication.model'
 import { HooksService } from '@app/core/plugins/hooks.service'
+import { VideoCommentThreadTree } from '@app/videos/+video-watch/comment/video-comment-thread-tree.model'
 
 @Component({
   selector: 'my-video-comments',
@@ -20,7 +20,7 @@ import { HooksService } from '@app/core/plugins/hooks.service'
   styleUrls: ['./video-comments.component.scss']
 })
 export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
-  @ViewChild('commentHighlightBlock', { static: false }) commentHighlightBlock: ElementRef
+  @ViewChild('commentHighlightBlock') commentHighlightBlock: ElementRef
   @Input() video: VideoDetails
   @Input() user: User
 
@@ -96,6 +96,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
         res => {
           this.threadComments[commentId] = res
           this.threadLoading[commentId] = false
+          this.hooks.runAction('action:video-watch.video-thread-replies.loaded', 'video-watch', { data: res })
 
           if (highlightThread) {
             this.highlightedThread = new VideoComment(res.comment)
@@ -130,6 +131,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
         this.componentPagination.totalItems = res.total
 
         this.onDataSubject.next(res.data)
+        this.hooks.runAction('action:video-watch.video-threads.loaded', 'video-watch', { data: this.componentPagination })
       },
 
       err => this.notifier.error(err.message)
@@ -167,7 +169,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
     let message = 'Do you really want to delete this comment?'
 
     if (commentToDelete.isLocal) {
-      message += this.i18n(' The deletion will be sent to remote instances, so they remove the comment too.')
+      message += this.i18n(' The deletion will be sent to remote instances so they can reflect the change.')
     } else {
       message += this.i18n(' It is a remote comment, so the deletion will only be effective on your instance.')
     }
@@ -181,7 +183,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
           // Mark the comment as deleted
           this.softDeleteComment(commentToDelete)
 
-          if (this.highlightedThread.id === commentToDelete.id) this.highlightedThread = undefined
+          if (this.highlightedThread?.id === commentToDelete.id) this.highlightedThread = undefined
         },
 
         err => this.notifier.error(err.message)
@@ -193,9 +195,8 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   onNearOfBottom () {
-    this.componentPagination.currentPage++
-
     if (hasMoreItems(this.componentPagination)) {
+      this.componentPagination.currentPage++
       this.loadMoreThreads()
     }
   }
@@ -219,7 +220,6 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
       this.componentPagination.totalItems = null
 
       this.syndicationItems = this.videoCommentService.getVideoCommentsFeeds(this.video.uuid)
-
       this.loadMoreThreads()
     }
   }
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html
index 549a9f30e..5e6a2d518 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.html
@@ -27,29 +27,33 @@
     <div class="video">
       <div class="title-page title-page-single" *ngIf="hasPlaylist()" i18n>Share the video</div>
 
-      <ngb-tabset class="root-tabset bootstrap" (tabChange)="onTabChange($event)">
+      <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeId">
 
-        <ngb-tab i18n-title title="URL" id="url">
-          <ng-template ngbTabContent>
+        <ng-container ngbNavItem="url">
+          <a ngbNavLink i18n>URL</a>
 
-            <div class="tab-content">
+          <ng-template ngbNavContent>
+            <div class="nav-content">
               <my-input-readonly-copy [value]="getVideoUrl()"></my-input-readonly-copy>
             </div>
-
           </ng-template>
-        </ngb-tab>
+        </ng-container>
+
+        <ng-container ngbNavItem="qrcode">
+          <a ngbNavLink i18n>QR-Code</a>
 
-        <ngb-tab i18n-title title="QR-Code" id="qrcode">
-          <ng-template ngbTabContent>
-            <div class="tab-content">
-              <qrcode [qrdata]="getVideoUrl()" size="256" level="Q"></qrcode>
+          <ng-template ngbNavContent>
+            <div class="nav-content">
+              <qrcode [qrdata]="getVideoUrl()" [size]="256" level="Q"></qrcode>
             </div>
           </ng-template>
-        </ngb-tab>
+        </ng-container>
+
+        <ng-container ngbNavItem="embed">
+          <a ngbNavLink i18n>Embed</a>
 
-        <ngb-tab i18n-title title="Embed" id="embed">
-          <ng-template ngbTabContent>
-            <div class="tab-content">
+          <ng-template ngbNavContent>
+            <div class="nav-content">
               <my-input-readonly-copy [value]="getVideoIframeCode()"></my-input-readonly-copy>
 
               <div i18n *ngIf="notSecure()" class="alert alert-warning">
@@ -57,9 +61,11 @@
               </div>
             </div>
           </ng-template>
-        </ngb-tab>
+        </ng-container>
 
-      </ngb-tabset>
+      </div>
+
+      <div [ngbNavOutlet]="nav"></div>
 
       <div class="filters">
         <div>
@@ -92,26 +98,6 @@
           </div>
         </div>
 
-        <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
-             [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
-
-          <ng-container *ngIf="isAdvancedCustomizationCollapsed">
-            <span class="glyphicon glyphicon-menu-down"></span>
-
-            <ng-container i18n>
-              More customization
-            </ng-container>
-          </ng-container>
-
-          <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
-            <span class="glyphicon glyphicon-menu-up"></span>
-
-            <ng-container i18n>
-              Less customization
-            </ng-container>
-          </ng-container>
-        </div>
-
         <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
           <div>
             <div class="form-group stop-at">
@@ -174,12 +160,28 @@
             </div>
           </ng-container>
         </div>
+
+        <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
+             [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
+
+          <ng-container *ngIf="isAdvancedCustomizationCollapsed">
+            <span class="glyphicon glyphicon-menu-down"></span>
+
+            <ng-container i18n>
+              More customization
+            </ng-container>
+          </ng-container>
+
+          <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
+            <span class="glyphicon glyphicon-menu-up"></span>
+
+            <ng-container i18n>
+              Less customization
+            </ng-container>
+          </ng-container>
+        </div>
       </div>
     </div>
   </div>
 
-  <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span>
-  </div>
-
 </ng-template>
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.scss b/client/src/app/videos/+video-watch/modal/video-share.component.scss
index 8b5952da6..091d4dc3b 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.scss
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.scss
@@ -17,15 +17,11 @@ my-input-readonly-copy {
   @include peertube-select-container(200px);
 }
 
-.action-button-cancel {
-  margin-right: 0 !important;
-}
-
 .qr-code-group {
   text-align: center;
 }
 
-.tab-content {
+.nav-content {
   margin-top: 30px;
   display: flex;
   justify-content: center;
@@ -39,14 +35,12 @@ my-input-readonly-copy {
 
 .filters {
   margin-top: 30px;
-  padding-top: 30px;
-  border-top: 1px solid $separator-border-color;
 
   .advanced-filters-button {
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-top: 30px;
+    margin-top: 20px;
     font-size: 16px;
     font-weight: $font-semibold;
     cursor: pointer;
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.ts b/client/src/app/videos/+video-watch/modal/video-share.component.ts
index a2b38b3a0..3550556a0 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts
@@ -1,9 +1,7 @@
 import { Component, ElementRef, Input, ViewChild } from '@angular/core'
-import { Notifier } from '@app/core'
 import { VideoDetails } from '../../../shared/video/video-details.model'
 import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { NgbModal, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { VideoCaption } from '@shared/models'
 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
 
@@ -37,7 +35,7 @@ export class VideoShareComponent {
   @Input() videoCaptions: VideoCaption[] = []
   @Input() playlist: VideoPlaylist = null
 
-  activeId: 'url' | 'qrcode' | 'embed'
+  activeId: 'url' | 'qrcode' | 'embed' = 'url'
   customizations: Customizations
   isAdvancedCustomizationCollapsed = true
   includeVideoInPlaylist = false
@@ -74,7 +72,7 @@ export class VideoShareComponent {
       controls: true
     }
 
-    this.modalService.open(this.modal)
+    this.modalService.open(this.modal, { centered: true })
   }
 
   getVideoIframeCode () {
@@ -103,10 +101,6 @@ export class VideoShareComponent {
     return window.location.protocol === 'http:'
   }
 
-  onTabChange (event: NgbTabChangeEvent) {
-    this.activeId = event.nextId as any
-  }
-
   isInEmbedTab () {
     return this.activeId === 'embed'
   }
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.html b/client/src/app/videos/+video-watch/modal/video-support.component.html
index 608a4632b..935656d23 100644
--- a/client/src/app/videos/+video-watch/modal/video-support.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-support.component.html
@@ -7,6 +7,9 @@
   <div class="modal-body" [innerHTML]="videoHTMLSupport"></div>
 
   <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-cancel" (click)="hide()">Maybe later</span>
+    <input
+      type="button" role="button" i18n-value value="Maybe later" class="action-button action-button-cancel"
+      (click)="hide()" (key.enter)="hide()"
+    >
   </div>
 </ng-template>
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.ts b/client/src/app/videos/+video-watch/modal/video-support.component.ts
index b56a51fbf..0058172f2 100644
--- a/client/src/app/videos/+video-watch/modal/video-support.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-support.component.ts
@@ -21,7 +21,7 @@ export class VideoSupportComponent {
   ) { }
 
   show () {
-    this.modalService.open(this.modal)
+    this.modalService.open(this.modal, { centered: true })
 
     this.markdownService.enhancedMarkdownToHTML(this.video.support)
       .then(r => this.videoHTMLSupport = r)
diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.ts b/client/src/app/videos/+video-watch/video-watch-playlist.component.ts
index c5ed36000..827c34d41 100644
--- a/client/src/app/videos/+video-watch/video-watch-playlist.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.ts
@@ -9,6 +9,7 @@ import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.
 import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
 import { peertubeLocalStorage, peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { SessionStorageService, LocalStorageService } from '@app/shared/misc/storage.service'
 
 @Component({
   selector: 'my-video-watch-playlist',
@@ -42,16 +43,18 @@ export class VideoWatchPlaylistComponent {
     private notifier: Notifier,
     private i18n: I18n,
     private videoPlaylist: VideoPlaylistService,
+    private localStorageService: LocalStorageService,
+    private sessionStorageService: SessionStorageService,
     private router: Router
   ) {
     // defaults to true
     this.autoPlayNextVideoPlaylist = this.auth.isLoggedIn()
       ? this.auth.getUser().autoPlayNextVideoPlaylist
-      : peertubeLocalStorage.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false'
+      : this.localStorageService.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false'
     this.setAutoPlayNextVideoPlaylistSwitchText()
 
     // defaults to false
-    this.loopPlaylist = peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
+    this.loopPlaylist = this.sessionStorageService.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
     this.setLoopPlaylistSwitchText()
   }
 
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 bc3a3ffdd..0244860dd 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -84,12 +84,12 @@
                     placement="bottom auto"
                   >
                     <my-global-icon iconName="support"></my-global-icon>
-                    <span class="icon-text" i18n>Support</span>
+                    <span class="icon-text" i18n>SUPPORT</span>
                   </div>
 
                   <div (click)="showShareModal()" class="action-button" role="button">
                     <my-global-icon iconName="share"></my-global-icon>
-                    <span class="icon-text" i18n>Share</span>
+                    <span class="icon-text" i18n>SHARE</span>
                   </div>
 
                   <div
@@ -100,7 +100,7 @@
                   >
                     <div class="action-button action-button-save" ngbDropdownToggle role="button">
                       <my-global-icon iconName="playlist-add"></my-global-icon>
-                      <span class="icon-text" i18n>Save</span>
+                      <span class="icon-text" i18n>SAVE</span>
                     </div>
 
                     <div ngbDropdownMenu>
@@ -188,6 +188,11 @@
           <span class="video-attribute-value">{{ video.privacy.label }}</span>
         </div>
 
+        <div *ngIf="video.isLocal === false" class="video-attribute">
+          <span i18n class="video-attribute-label">Origin instance</span>
+          <a class="video-attribute-value" target="_blank" rel="noopener noreferrer" [href]="video.originInstanceUrl">{{ video.originInstanceHost }}</a>
+        </div>
+
         <div *ngIf="!!video.originallyPublishedAt" class="video-attribute">
           <span i18n class="video-attribute-label">Originally published</span>
           <span class="video-attribute-value">{{ video.originallyPublishedAt | date: 'dd MMMM yyyy' }}</span>
@@ -252,14 +257,16 @@
 
   <div class="row privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
     <div class="privacy-concerns-text">
-      <strong i18n>Friendly Reminder: </strong>
-      <ng-container i18n>
-        the sharing system used for this video implies that some technical information about your system (such as a public IP address) can be sent to other peers.
-      </ng-container>
-      <a i18n i18n-title title="Get more information" target="_blank" rel="noopener noreferrer" href="/about/peertube">More information</a>
+      <span class="mr-2">
+        <strong i18n>Friendly Reminder: </strong>
+        <ng-container i18n>
+          the sharing system used for this video implies that some technical information about your system (such as a public IP address) can be sent to other peers.
+        </ng-container>
+      </span>
+      <a i18n i18n-title title="Get more information" target="_blank" rel="noopener noreferrer" href="/about/peertube#privacy">More information</a>
     </div>
 
-    <div i18n class="privacy-concerns-okay" (click)="acceptedPrivacyConcern()">
+    <div i18n class="privacy-concerns-button privacy-concerns-okay" (click)="acceptedPrivacyConcern()">
       OK
     </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 c92f773e4..977312a83 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -53,7 +53,6 @@ $video-info-margin-left: 44px;
   background-color: #000;
   display: flex;
   justify-content: center;
-  margin: 0 -15px;
 
   #videojs-wrapper {
     display: flex;
@@ -443,6 +442,7 @@ my-video-comments {
 
 // If the view is not expanded, take into account the menu
 .privacy-concerns {
+  z-index: z(dropdown) + 1;
   width: calc(100% - #{$menu-width});
 }
 
@@ -462,13 +462,14 @@ my-video-comments {
 .privacy-concerns {
   position: fixed;
   bottom: 0;
+  z-index: z(privacymsg);
 
   padding: 5px 15px;
 
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   background-color: rgba(0, 0, 0, 0.9);
   color: #fff;
 
@@ -487,11 +488,11 @@ my-video-comments {
     }
   }
 
-  .privacy-concerns-okay {
-    background-color: var(--mainColor);
+  .privacy-concerns-button {
     padding: 5px 8px 5px 7px;
     margin-left: auto;
     border-radius: 3px;
+    white-space: nowrap;
     cursor: pointer;
     transition: background-color 0.3s;
     font-weight: $font-semibold;
@@ -500,6 +501,11 @@ my-video-comments {
       background-color: #000;
     }
   }
+
+  .privacy-concerns-okay {
+    background-color: var(--mainColor);
+    margin-left: 10px;
+  }
 }
 
 @media screen and (max-width: 1600px) {
@@ -545,7 +551,8 @@ my-video-comments {
 
 @media screen and (max-width: 600px) {
   .video-bottom {
-    margin: 20px 0 0 0 !important;
+    margin-top: 20px !important;
+    margin-bottom: 20px !important;
 
     .video-info {
       padding: 0;
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 e09e44809..51e484275 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -2,7 +2,7 @@ import { catchError } from 'rxjs/operators'
 import { ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { RedirectService } from '@app/core/routing/redirect.service'
-import { peertubeLocalStorage, peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage'
+import { peertubeLocalStorage } from '@app/shared/misc/peertube-web-storage'
 import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component'
 import { MetaService } from '@ngx-meta/core'
 import { AuthUser, Notifier, ServerService } from '@app/core'
@@ -10,7 +10,7 @@ import { forkJoin, Observable, Subscription } from 'rxjs'
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { ServerConfig, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared'
 import { AuthService, ConfirmService } from '../../core'
-import { RestExtractor } from '../../shared'
+import { RestExtractor, UserService } from '../../shared'
 import { VideoDetails } from '../../shared/video/video-details.model'
 import { VideoService } from '../../shared/video/video.service'
 import { VideoShareComponent } from './modal/video-share.component'
@@ -35,7 +35,6 @@ import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watc
 import { getStoredP2PEnabled, getStoredTheater } from '../../../assets/player/peertube-player-local-storage'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { PlatformLocation } from '@angular/common'
-import { RecommendedVideosComponent } from '../recommendations/recommended-videos.component'
 import { scrollToTop, isXPercentInViewport } from '@app/shared/misc/utils'
 
 @Component({
@@ -47,9 +46,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
 
   @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
-  @ViewChild('videoShareModal', { static: false }) videoShareModal: VideoShareComponent
-  @ViewChild('videoSupportModal', { static: false }) videoSupportModal: VideoSupportComponent
-  @ViewChild('subscribeButton', { static: false }) subscribeButton: SubscribeButtonComponent
+  @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
+  @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
+  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
 
   player: any
   playerElement: HTMLVideoElement
@@ -95,6 +94,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     private confirmService: ConfirmService,
     private metaService: MetaService,
     private authService: AuthService,
+    private userService: UserService,
     private serverService: ServerService,
     private restExtractor: RestExtractor,
     private notifier: Notifier,
@@ -118,6 +118,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.authService.getUser()
   }
 
+  get anonymousUser () {
+    return this.userService.getAnonymousUser()
+  }
+
   async ngOnInit () {
     this.serverConfig = this.serverService.getTmpConfig()
 
@@ -266,6 +270,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.redirectService.redirectToHomepage()
   }
 
+  declinedPrivacyConcern () {
+    peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'false')
+    this.hasAlreadyAcceptedPrivacyConcern = false
+  }
+
   acceptedPrivacyConcern () {
     peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true')
     this.hasAlreadyAcceptedPrivacyConcern = true
@@ -290,7 +299,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   isAutoPlayEnabled () {
     return (
       (this.user && this.user.autoPlayNextVideo) ||
-      peertubeSessionStorage.getItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
+      this.anonymousUser.autoPlayNextVideo
     )
   }
 
@@ -302,7 +311,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   isPlaylistAutoPlayEnabled () {
     return (
       (this.user && this.user.autoPlayNextVideoPlaylist) ||
-      peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
+      this.anonymousUser.autoPlayNextVideoPlaylist
     )
   }
 
@@ -532,7 +541,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   private autoplayNext () {
-    if (this.nextVideoUuid) {
+    if (this.playlist) {
+      this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
+    } else if (this.nextVideoUuid) {
       this.router.navigate([ '/videos/watch', this.nextVideoUuid ])
     }
   }
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 5fa50ecbb..9b445269d 100644
--- a/client/src/app/videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch.module.ts
@@ -12,7 +12,6 @@ import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
 import { RecommendationsModule } from '@app/videos/recommendations/recommendations.module'
 import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watch-playlist.component'
 import { QRCodeModule } from 'angularx-qrcode'
-import { InputSwitchModule } from 'primeng/inputswitch'
 import { TimestampRouteTransformerDirective } from '@app/shared/angular/timestamp-route-transformer.directive'
 
 @NgModule({
@@ -21,8 +20,7 @@ import { TimestampRouteTransformerDirective } from '@app/shared/angular/timestam
     SharedModule,
     NgbTooltipModule,
     QRCodeModule,
-    RecommendationsModule,
-    InputSwitchModule
+    RecommendationsModule
   ],
 
   declarations: [
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.html b/client/src/app/videos/recommendations/recommended-videos.component.html
index 476eca071..74f9ed2a5 100644
--- a/client/src/app/videos/recommendations/recommended-videos.component.html
+++ b/client/src/app/videos/recommendations/recommended-videos.component.html
@@ -7,8 +7,8 @@
       <div *ngIf="!playlist" class="title-page-autoplay"
         [ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto"
       >
-        <span i18n>Autoplay</span>
-        <p-inputSwitch [(ngModel)]="autoPlayNextVideo" (ngModelChange)="switchAutoPlayNextVideo()"></p-inputSwitch>
+        <span i18n>AUTOPLAY</span>
+        <p-inputSwitch class="small" [(ngModel)]="autoPlayNextVideo" (ngModelChange)="switchAutoPlayNextVideo()"></p-inputSwitch>
       </div>
     </div>
 
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.scss b/client/src/app/videos/recommendations/recommended-videos.component.scss
index 1ab0c47ff..cde62f87f 100644
--- a/client/src/app/videos/recommendations/recommended-videos.component.scss
+++ b/client/src/app/videos/recommendations/recommended-videos.component.scss
@@ -25,25 +25,3 @@
     font-weight: 600;
   }
 }
-
-/* p-inputSwitch styles to reduce the switch size */
-
-::ng-deep {
-  p-inputswitch {
-    height: 20px;
-  }
-
-  .ui-inputswitch {
-    width: 2.5em !important;
-    height: 1.45em !important;
-
-    .ui-inputswitch-slider::before {
-      height: 1em !important;
-      width: 1em !important;
-    }
-  }
-
-  .ui-inputswitch-checked .ui-inputswitch-slider::before {
-    transform: translateX(1em) !important;
-  }
-}
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.ts b/client/src/app/videos/recommendations/recommended-videos.component.ts
index ada6d3433..d4b4c929b 100644
--- a/client/src/app/videos/recommendations/recommended-videos.component.ts
+++ b/client/src/app/videos/recommendations/recommended-videos.component.ts
@@ -7,8 +7,8 @@ import { RecommendedVideosStore } from '@app/videos/recommendations/recommended-
 import { User } from '@app/shared'
 import { AuthService, Notifier } from '@app/core'
 import { UserService } from '@app/shared/users/user.service'
-import { peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { SessionStorageService } from '@app/shared/misc/storage.service'
 
 @Component({
   selector: 'my-recommended-videos',
@@ -16,8 +16,6 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
   styleUrls: [ './recommended-videos.component.scss' ]
 })
 export class RecommendedVideosComponent implements OnChanges {
-  static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO = 'auto_play_next_video'
-
   @Input() inputRecommendation: RecommendationInfo
   @Input() user: User
   @Input() playlist: VideoPlaylist
@@ -34,15 +32,21 @@ export class RecommendedVideosComponent implements OnChanges {
     private authService: AuthService,
     private notifier: Notifier,
     private i18n: I18n,
-    private store: RecommendedVideosStore
+    private store: RecommendedVideosStore,
+    private sessionStorageService: SessionStorageService
   ) {
     this.videos$ = this.store.recommendations$
     this.hasVideos$ = this.store.hasRecommendations$
     this.videos$.subscribe(videos => this.gotRecommendations.emit(videos))
 
-    this.autoPlayNextVideo = this.authService.isLoggedIn()
-      ? this.authService.getUser().autoPlayNextVideo
-      : peertubeSessionStorage.getItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false
+    if (this.authService.isLoggedIn()) {
+      this.autoPlayNextVideo = this.authService.getUser().autoPlayNextVideo
+    } else {
+      this.autoPlayNextVideo = this.sessionStorageService.getItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false
+      this.sessionStorageService.watch([User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO]).subscribe(
+        () => this.autoPlayNextVideo = this.sessionStorageService.getItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
+      )
+    }
 
     this.autoPlayNextVideoTooltip = this.i18n('When active, the next video is automatically played after the current one.')
   }
@@ -58,7 +62,7 @@ export class RecommendedVideosComponent implements OnChanges {
   }
 
   switchAutoPlayNextVideo () {
-    peertubeSessionStorage.setItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, this.autoPlayNextVideo.toString())
+    this.sessionStorageService.setItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, this.autoPlayNextVideo.toString())
 
     if (this.authService.isLoggedIn()) {
       const details = {
diff --git a/client/src/app/videos/video-list/video-local.component.ts b/client/src/app/videos/video-list/video-local.component.ts
index 59f65f95c..757b0e498 100644
--- a/client/src/app/videos/video-list/video-local.component.ts
+++ b/client/src/app/videos/video-list/video-local.component.ts
@@ -11,6 +11,8 @@ import { ScreenService } from '@app/shared/misc/screen.service'
 import { UserRight } from '../../../../../shared/models/users'
 import { Notifier, ServerService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
+import { UserService } from '@app/shared'
+import { LocalStorageService } from '@app/shared/misc/storage.service'
 
 @Component({
   selector: 'my-videos-local',
@@ -31,7 +33,9 @@ export class VideoLocalComponent extends AbstractVideoList implements OnInit, On
     protected route: ActivatedRoute,
     protected notifier: Notifier,
     protected authService: AuthService,
+    protected userService: UserService,
     protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
     private videoService: VideoService,
     private hooks: HooksService
   ) {
diff --git a/client/src/app/videos/video-list/video-most-liked.component.ts b/client/src/app/videos/video-list/video-most-liked.component.ts
index 6ff7a1e0e..b69fad05f 100644
--- a/client/src/app/videos/video-list/video-most-liked.component.ts
+++ b/client/src/app/videos/video-list/video-most-liked.component.ts
@@ -9,6 +9,8 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { Notifier, ServerService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
+import { UserService } from '@app/shared'
+import { LocalStorageService } from '@app/shared/misc/storage.service'
 
 @Component({
   selector: 'my-videos-most-liked',
@@ -28,7 +30,9 @@ export class VideoMostLikedComponent extends AbstractVideoList implements OnInit
     protected route: ActivatedRoute,
     protected notifier: Notifier,
     protected authService: AuthService,
+    protected userService: UserService,
     protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
     private videoService: VideoService,
     private hooks: HooksService
   ) {
diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html
index 5fe1f5c80..84999cfb2 100644
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -2,35 +2,44 @@
 
   <div class="no-results" i18n *ngIf="notResults">No results.</div>
 
-  <div class="section" *ngFor="let object of overview.categories">
-    <div class="section-title">
-      <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
-    </div>
+  <div
+    myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()"
+  >
+    <ng-container *ngFor="let overview of overviews">
 
-    <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
-    </my-video-miniature>
-  </div>
+      <div class="section" *ngFor="let object of overview.categories">
+        <div class="section-title">
+          <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
+        </div>
 
-  <div class="section" *ngFor="let object of overview.tags">
-    <div class="section-title">
-      <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
-    </div>
+        <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
+        </my-video-miniature>
+      </div>
 
-    <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
-    </my-video-miniature>
-  </div>
+      <div class="section" *ngFor="let object of overview.tags">
+        <div class="section-title">
+          <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
+        </div>
+
+        <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
+        </my-video-miniature>
+      </div>
+
+      <div class="section channel" *ngFor="let object of overview.channels">
+        <div class="section-title">
+          <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]">
+            <img [src]="buildVideoChannelAvatarUrl(object)" alt="Avatar" />
+
+            <div>{{ object.channel.displayName }}</div>
+          </a>
+        </div>
 
-  <div class="section channel" *ngFor="let object of overview.channels">
-    <div class="section-title">
-      <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]">
-        <img [src]="buildVideoChannelAvatarUrl(object)" alt="Avatar" />
+        <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
+        </my-video-miniature>
+      </div>
 
-        <div>{{ object.channel.displayName }}</div>
-      </a>
-    </div>
+    </ng-container>
 
-    <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
-    </my-video-miniature>
   </div>
 
 </div>
diff --git a/client/src/app/videos/video-list/video-overview.component.ts b/client/src/app/videos/video-list/video-overview.component.ts
index 4fee92d54..101073949 100644
--- a/client/src/app/videos/video-list/video-overview.component.ts
+++ b/client/src/app/videos/video-list/video-overview.component.ts
@@ -5,6 +5,7 @@ import { VideosOverview } from '@app/shared/overview/videos-overview.model'
 import { OverviewService } from '@app/shared/overview'
 import { Video } from '@app/shared/video/video.model'
 import { ScreenService } from '@app/shared/misc/screen.service'
+import { Subject } from 'rxjs'
 
 @Component({
   selector: 'my-video-overview',
@@ -12,13 +13,17 @@ import { ScreenService } from '@app/shared/misc/screen.service'
   styleUrls: [ './video-overview.component.scss' ]
 })
 export class VideoOverviewComponent implements OnInit {
-  overview: VideosOverview = {
-    categories: [],
-    channels: [],
-    tags: []
-  }
+  onDataSubject = new Subject<any>()
+
+  overviews: VideosOverview[] = []
   notResults = false
 
+  private loaded = false
+  private currentPage = 1
+  private maxPage = 20
+  private lastWasEmpty = false
+  private isLoading = false
+
   constructor (
     private i18n: I18n,
     private notifier: Notifier,
@@ -32,20 +37,7 @@ export class VideoOverviewComponent implements OnInit {
   }
 
   ngOnInit () {
-    this.overviewService.getVideosOverview()
-        .subscribe(
-          overview => {
-            this.overview = overview
-
-            if (
-              this.overview.categories.length === 0 &&
-              this.overview.channels.length === 0 &&
-              this.overview.tags.length === 0
-            ) this.notResults = true
-          },
-
-          err => this.notifier.error(err.message)
-        )
+    this.loadMoreResults()
   }
 
   buildVideoChannelBy (object: { videos: Video[] }) {
@@ -61,4 +53,41 @@ export class VideoOverviewComponent implements OnInit {
 
     return videos.slice(0, numberOfVideos * 2)
   }
+
+  onNearOfBottom () {
+    if (this.currentPage >= this.maxPage) return
+    if (this.lastWasEmpty) return
+    if (this.isLoading) return
+
+    this.currentPage++
+    this.loadMoreResults()
+  }
+
+  private loadMoreResults () {
+    this.isLoading = true
+
+    this.overviewService.getVideosOverview(this.currentPage)
+        .subscribe(
+          overview => {
+            this.isLoading = false
+
+            if (overview.tags.length === 0 && overview.channels.length === 0 && overview.categories.length === 0) {
+              this.lastWasEmpty = true
+              if (this.loaded === false) this.notResults = true
+
+              return
+            }
+
+            this.loaded = true
+            this.onDataSubject.next(overview)
+
+            this.overviews.push(overview)
+          },
+
+          err => {
+            this.notifier.error(err.message)
+            this.isLoading = false
+          }
+        )
+  }
 }
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
index 7568f4536..c1ddd4fd4 100644
--- a/client/src/app/videos/video-list/video-recently-added.component.ts
+++ b/client/src/app/videos/video-list/video-recently-added.component.ts
@@ -9,6 +9,8 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { Notifier, ServerService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
+import { UserService } from '@app/shared'
+import { LocalStorageService } from '@app/shared/misc/storage.service'
 
 @Component({
   selector: 'my-videos-recently-added',
@@ -29,7 +31,9 @@ export class VideoRecentlyAddedComponent extends AbstractVideoList implements On
     protected router: Router,
     protected notifier: Notifier,
     protected authService: AuthService,
+    protected userService: UserService,
     protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
     private videoService: VideoService,
     private hooks: HooksService
   ) {
diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts
index e29830b5b..fbe052277 100644
--- a/client/src/app/videos/video-list/video-trending.component.ts
+++ b/client/src/app/videos/video-list/video-trending.component.ts
@@ -9,6 +9,8 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { Notifier, ServerService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
+import { UserService } from '@app/shared'
+import { LocalStorageService } from '@app/shared/misc/storage.service'
 
 @Component({
   selector: 'my-videos-trending',
@@ -28,7 +30,9 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
     protected route: ActivatedRoute,
     protected notifier: Notifier,
     protected authService: AuthService,
+    protected userService: UserService,
     protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
     private videoService: VideoService,
     private hooks: HooksService
   ) {
diff --git a/client/src/app/videos/video-list/video-user-subscriptions.component.ts b/client/src/app/videos/video-list/video-user-subscriptions.component.ts
index cf0b15054..036fd8dcb 100644
--- a/client/src/app/videos/video-list/video-user-subscriptions.component.ts
+++ b/client/src/app/videos/video-list/video-user-subscriptions.component.ts
@@ -10,6 +10,8 @@ import { ScreenService } from '@app/shared/misc/screen.service'
 import { OwnerDisplayType } from '@app/shared/video/video-miniature.component'
 import { Notifier, ServerService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
+import { UserService } from '@app/shared'
+import { LocalStorageService } from '@app/shared/misc/storage.service'
 
 @Component({
   selector: 'my-videos-user-subscriptions',
@@ -29,7 +31,9 @@ export class VideoUserSubscriptionsComponent extends AbstractVideoList implement
     protected route: ActivatedRoute,
     protected notifier: Notifier,
     protected authService: AuthService,
+    protected userService: UserService,
     protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
     private videoService: VideoService,
     private hooks: HooksService
   ) {