233 files changed, 3691 insertions, 2658 deletions
diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
index 2cf890acf..e9139b503 100644
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -1,7 +1,7 @@
 <div class="row">
  <h1 class="sr-only" i18n>Follows</h1>
  <div class="col-xl-6 col-md-12">
-    <h2 i18n class="subtitle">Followers instances ({{ followersPagination.totalItems }})</h2>
+    <h2 i18n class="subtitle">Follower instances ({{ followersPagination.totalItems }})</h2>
    <div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">This instance does not have instances followers.</div>
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 d8794d602..1f372090e 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -83,7 +83,7 @@
          fragment="business-model"
          #anchorLink
          (click)="onClickCopyLink(anchorLink)">
-          <h3 i18n class="section-title">How we will pay for this instance</h3>
+          <h3 i18n class="section-title">How we will pay for keeping our instance running</h3>
        </a>
      <div [innerHTML]="html.businessModel"></div>
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 81e59d46a..343e5d649 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
@@ -45,14 +45,11 @@
      <div class="form-group inputs">
        <input
-          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
          (click)="hide()" (key.enter)="hide()"
        >
-        <input
+        <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid" />
-          type="submit" i18n-value value="Submit" class="action-button-submit"
-          [disabled]="!form.valid"
-        >
      </div>
    </form>
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.scss b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
index 260d77888..6c1c89225 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.scss
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
@@ -3,7 +3,6 @@
 input[type=text] {
  @include peertube-input-text(340px);
-  display: block;
 }
 textarea {
diff --git a/client/src/app/+accounts/account-about/account-about.component.html b/client/src/app/+accounts/account-about/account-about.component.html
deleted file mode 100644
index e9e0e4079..000000000
--- a/client/src/app/+accounts/account-about/account-about.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<h1 class="sr-only" i18n>About</h1>
-<div class="margin-content">
-  <div *ngIf="account" class="row no-gutters">
-    <div class="block col-md-6 col-sm-12 pr-2">
-      <h2 i18n class="small-title">DESCRIPTION</h2>
-      <div class="content" [innerHtml]="getAccountDescription()"></div>
-    </div>
-  
-    <div class="block col-md-6 col-sm-12">
-      <h2 i18n class="small-title">STATS</h2>
-  
-      <div i18n class="content">Joined {{ account.createdAt | date }}</div>
-    </div>
-  </div>
-</div>
diff --git a/client/src/app/+accounts/account-about/account-about.component.scss b/client/src/app/+accounts/account-about/account-about.component.scss
deleted file mode 100644
index 5bcd4b561..000000000
--- a/client/src/app/+accounts/account-about/account-about.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@import '_variables';
-@import '_mixins';
-.block {
-  margin-bottom: 40px;
-  .small-title {
-    @include in-content-small-title;
-    margin-bottom: 20px;
-  }
-}
diff --git a/client/src/app/+accounts/account-about/account-about.component.ts b/client/src/app/+accounts/account-about/account-about.component.ts
deleted file mode 100644
index 6cf846d72..000000000
--- a/client/src/app/+accounts/account-about/account-about.component.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Subscription } from 'rxjs'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { MarkdownService } from '@app/core'
-import { Account, AccountService } from '@app/shared/shared-main'
-@Component({
-  selector: 'my-account-about',
-  templateUrl: './account-about.component.html',
-  styleUrls: [ './account-about.component.scss' ]
-})
-export class AccountAboutComponent implements OnInit, OnDestroy {
-  account: Account
-  descriptionHTML = ''
-  private accountSub: Subscription
-  constructor (
-    private accountService: AccountService,
-    private markdownService: MarkdownService
-  ) { }
-  ngOnInit () {
-    // Parent get the account for us
-    this.accountSub = this.accountService.accountLoaded
-      .subscribe(async account => {
-        this.account = account
-        this.descriptionHTML = await this.markdownService.textMarkdownToHTML(this.account.description, true)
-      })
-  }
-  ngOnDestroy () {
-    if (this.accountSub) this.accountSub.unsubscribe()
-  }
-  getAccountDescription () {
-    if (this.descriptionHTML) return this.descriptionHTML
-    return $localize`No description`
-  }
-}
diff --git a/client/src/app/+accounts/account-search/account-search.component.ts b/client/src/app/+accounts/account-search/account-search.component.ts
index dda4bf0c7..f54ab846a 100644
--- a/client/src/app/+accounts/account-search/account-search.component.ts
+++ b/client/src/app/+accounts/account-search/account-search.component.ts
@@ -64,9 +64,14 @@ export class AccountSearchComponent extends AbstractVideoList implements OnInit,
  }
  updateSearch (value: string) {
-    if (value === '') this.router.navigate(['../videos'], { relativeTo: this.route })
    this.search = value
+    if (!this.search) {
+      this.router.navigate([ '../videos' ], { relativeTo: this.route })
+      return
+    }
+    this.videos = []
    this.reloadVideos()
  }
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 5dbb341d2..19a4b3c9c 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
@@ -1,33 +1,50 @@
 <h1 class="sr-only" i18n>Video channels</h1>
 <div class="margin-content">
  <div class="no-results" i18n *ngIf="channelPagination.totalItems === 0">This account does not have channels.</div>
  <div class="channels" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onChannelDataSubject.asObservable()">
-    <div class="section channel" *ngFor="let videoChannel of videoChannels">
+    <div class="channel" *ngFor="let videoChannel of videoChannels">
-      <div class="section-title">
-        <a [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
+      <div class="channel-avatar-row">
+        <a class="avatar-link" [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
          <img [src]="videoChannel.avatarUrl" alt="Avatar" />
+        </a>
-          <h2 class="section-title">{{ videoChannel.displayName }}</h2>
+        <h2>
+          <a [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
+            {{ videoChannel.displayName }}
+          </a>
+        </h2>
+        <div class="actor-counters">
          <div class="followers" i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
-        </a>
-        <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
+          <span class="videos-count" *ngIf="getTotalVideosOf(videoChannel) !== undefined" i18n>
+            {getTotalVideosOf(videoChannel), plural, =1 {1 videos} other {{{ getTotalVideosOf(videoChannel) }} videos}}
+          </span>
+        </div>
+        <div class="description-html" [innerHTML]="getChannelDescription(videoChannel)"></div>
      </div>
-      <div *ngIf="getVideosOf(videoChannel)" class="videos">
+      <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
-        <div class="no-results my-5" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel doesn't have any videos.</div>
+      <a i18n class="button-show-channel peertube-button-link orange-button-inverted" [routerLink]="getVideoChannelLink(videoChannel)">Show this channel</a>
+      <div class="videos">
+        <div class="no-results" i18n *ngIf="getTotalVideosOf(videoChannel) === 0">This channel doesn't have any videos.</div>
        <my-video-miniature
          *ngFor="let video of getVideosOf(videoChannel)"
-          [video]="video" [user]="userMiniature" [displayVideoActions]="true"
+          [video]="video" [user]="userMiniature" [displayVideoActions]="true" [displayOptions]="miniatureDisplayOptions"
        ></my-video-miniature>
-      </div>
-      <a *ngIf="getVideosOf(videoChannel).length !== 0" class="show-more" i18n [routerLink]="getVideoChannelLink(videoChannel)">
+        <div *ngIf="getTotalVideosOf(videoChannel)" class="miniature-show-channel">
-        SHOW THIS CHANNEL
+          <a i18n [routerLink]="getVideoChannelLink(videoChannel)">SHOW THIS CHANNEL ></a>
-      </a>
+        </div>
+      </div>
    </div>
  </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 4957e91d7..7e88802f3 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
@@ -3,37 +3,175 @@
 @import '_miniature';
 .margin-content {
-  @include fluid-videos-miniature-layout;
+  @include grid-videos-miniature-margins;
 }
-.section {
+.channel {
-  @include miniature-rows;
+  max-width: $max-channels-width;
+  background-color: pvar(--channelBackgroundColor);
+  padding: 30px;
-  padding-top: 0 !important;
+  margin: 30px 0;
-  .section-title {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  column-gap: 15px;
+}
+.channel-avatar-row {
+  grid-column: 1;
+  grid-row: 1;
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  grid-template-rows: auto 1fr;
+  .avatar-link {
+    grid-column: 1;
+    grid-row: 1 / 3;
+    margin-right: 30px;
+  }
+  img {
+    @include channel-avatar(75px);
+  }
+  a {
+    color: pvar(--mainForegroundColor);
+  }
+  h2 {
+    grid-row: 1;
+    grid-column: 2;
+    font-size: 20px;
+    line-height: 1;
+    font-weight: $font-bold;
+    margin: 0;
+  }
+  .actor-counters {
+    grid-row: 1;
+    grid-column: 3;
+    color: pvar(--greyForegroundColor);
+    font-size: 16px;
+    display: flex;
    align-items: center;
+    margin-left: 15px;
  }
-  .videos {
+  .actor-counters > *:not(:last-child)::after {
-    overflow: hidden;
+    content: '•';
+    margin: 0 10px;
+    color: pvar(--mainColor);
+  }
-    .no-results {
+  .description-html {
-      height: 50px;
+    grid-column: 2 / 4;
-    }
+    grid-row: 2;
+    max-height: 80px;
+    font-size: 16px;
+    @include fade-text(30px, pvar(--channelBackgroundColor));
+  }
+}
+my-subscribe-button {
+  grid-row: 1;
+  grid-column: 2;
+}
+.videos {
+  display: flex;
+  grid-column: 1 / 3;
+  grid-row: 2;
+  margin-top: 30px;
+  position: relative;
+  overflow: hidden;
+  my-video-miniature {
+    margin-right: 15px;
+    min-width: $video-thumbnail-medium-width;
+    max-width: $video-thumbnail-medium-width;
+  }
+  .no-results {
+    height: auto;
  }
+}
-  my-video-miniature ::ng-deep my-video-actions-dropdown > my-action-dropdown {
+.miniature-show-channel {
-    // Fix our overflow
+  height: 100%;
-    position: absolute;
+  position: absolute;
+  right: 0;
+  background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px);
+  padding: ($video-thumbnail-medium-height / 2 - 10px) 15px 0 60px;
+  z-index: z(miniature) + 1;
+  a {
+    color: pvar(--mainColor);
+    font-size: 16px;
+    font-weight: $font-semibold;
  }
 }
+.button-show-channel {
+  display: none;
+}
 @media screen and (max-width: $mobile-view) {
-  .section {
+  .channel {
-    .section-title {
+    padding: 15px;
-      flex-direction: column;
+  }
-      align-items: normal;
+  .channel-avatar-row {
+    grid-template-columns: auto auto auto 1fr;
+    .avatar-link {
+      grid-row: 1 / 4;
+    }
+    h2 {
+      font-size: 16px;
    }
+    .actor-counters {
+      margin: 0;
+      font-size: 13px;
+      grid-row: 2;
+      grid-column: 2 / 4;
+    }
+    .description-html {
+      grid-row: 3;
+      font-size: 14px;
+    }
+  }
+  .show-channel a {
+    @include peertube-button-link;
+    @include orange-button-inverted;
+  }
+  .videos {
+    display: none;
+  }
+  my-subscribe-button,
+  .button-show-channel {
+    grid-column: 1 / 4;
+    grid-row: 3;
+    margin-top: 15px;
+  }
+  my-subscribe-button {
+    justify-self: start;
+  }
+  .button-show-channel {
+    display: block;
+    justify-self: end;
  }
 }
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
index f2beb6689..0628c7a96 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
@@ -1,9 +1,10 @@
 import { from, Subject, Subscription } from 'rxjs'
 import { concatMap, map, switchMap, tap } from 'rxjs/operators'
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ComponentPagination, hasMoreItems, ScreenService, User, UserService } from '@app/core'
+import { ComponentPagination, hasMoreItems, MarkdownService, ScreenService, User, UserService } from '@app/core'
 import { Account, AccountService, Video, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
 import { NSFWPolicyType, VideoSortField } from '@shared/models'
+import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature'
 @Component({
  selector: 'my-account-video-channels',
@@ -13,7 +14,10 @@ import { NSFWPolicyType, VideoSortField } from '@shared/models'
 export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
  account: Account
  videoChannels: VideoChannel[] = []
-  videos: { [id: number]: Video[] } = {}
+  videos: { [id: number]: { total: number, videos: Video[] } } = {}
+  channelsDescriptionHTML: { [ id: number ]: string } = {}
  channelPagination: ComponentPagination = {
    currentPage: 1,
@@ -23,7 +27,7 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
  videosPagination: ComponentPagination = {
    currentPage: 1,
-    itemsPerPage: 12,
+    itemsPerPage: 5,
    totalItems: null
  }
  videosSort: VideoSortField = '-publishedAt'
@@ -32,6 +36,16 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
  userMiniature: User
  nsfwPolicy: NSFWPolicyType
+  miniatureDisplayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: false,
+    avatar: false,
+    privacyLabel: false,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
  private accountSub: Subscription
@@ -39,7 +53,7 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
    private accountService: AccountService,
    private videoChannelService: VideoChannelService,
    private videoService: VideoService,
-    private screenService: ScreenService,
+    private markdown: MarkdownService,
    private userService: UserService
  ) { }
@@ -78,23 +92,36 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
          }
          return this.videoService.getVideoChannelVideos(options)
-            .pipe(map(data => ({ videoChannel, videos: data.data })))
+            .pipe(map(data => ({ videoChannel, videos: data.data, total: data.total })))
        })
      )
-      .subscribe(({ videoChannel, videos }) => {
+      .subscribe(async ({ videoChannel, videos, total }) => {
+        this.channelsDescriptionHTML[videoChannel.id] = await this.markdown.textMarkdownToHTML(videoChannel.description)
        this.videoChannels.push(videoChannel)
-        this.videos[videoChannel.id] = videos
+        this.videos[videoChannel.id] = { videos, total }
        this.onChannelDataSubject.next([ videoChannel ])
      })
  }
  getVideosOf (videoChannel: VideoChannel) {
-    const numberOfVideos = this.screenService.getNumberOfAvailableMiniatures()
+    const obj = this.videos[ videoChannel.id ]
+    if (!obj) return []
+    return obj.videos
+  }
+  getTotalVideosOf (videoChannel: VideoChannel) {
+    const obj = this.videos[ videoChannel.id ]
+    if (!obj) return undefined
+    return obj.total
+  }
-    // 2 rows
+  getChannelDescription (videoChannel: VideoChannel) {
-    return this.videos[ videoChannel.id ].slice(0, numberOfVideos * 2)
+    return this.channelsDescriptionHTML[videoChannel.id]
  }
  onNearOfBottom () {
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 484d60e25..75af45e90 100644
--- a/client/src/app/+accounts/account-videos/account-videos.component.ts
+++ b/client/src/app/+accounts/account-videos/account-videos.component.ts
@@ -16,6 +16,7 @@ import { VideoFilter } from '@shared/models'
  ]
 })
 export class AccountVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
+  // No value because we don't want a page title
  titlePage: string
  loadOnInit = false
  loadUserVideoPreferences = true
@@ -77,11 +78,6 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit,
    return this.videoService
               .getAccountVideos(options)
-               .pipe(
-                 tap(({ total }) => {
-                   this.titlePage = $localize`Published ${total} videos`
-                 })
-               )
  }
  toggleModerationDisplay () {
@@ -93,4 +89,8 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit,
  generateSyndicationList () {
    this.syndicationItems = this.videoService.getAccountFeedUrls(this.account.id)
  }
+  displayAsRow () {
+    return this.screenService.isInMobileView()
+  }
 }
diff --git a/client/src/app/+accounts/accounts-routing.module.ts b/client/src/app/+accounts/accounts-routing.module.ts
index 15937a67b..3bf0f7185 100644
--- a/client/src/app/+accounts/accounts-routing.module.ts
+++ b/client/src/app/+accounts/accounts-routing.module.ts
@@ -1,11 +1,10 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { MetaGuard } from '@ngx-meta/core'
-import { AccountsComponent } from './accounts.component'
-import { AccountVideosComponent } from './account-videos/account-videos.component'
-import { AccountAboutComponent } from './account-about/account-about.component'
-import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component'
 import { AccountSearchComponent } from './account-search/account-search.component'
+import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component'
+import { AccountVideosComponent } from './account-videos/account-videos.component'
+import { AccountsComponent } from './accounts.component'
 const accountsRoutes: Routes = [
  {
@@ -32,15 +31,6 @@ const accountsRoutes: Routes = [
        }
      },
      {
-        path: 'about',
-        component: AccountAboutComponent,
-        data: {
-          meta: {
-            title: $localize`About account`
-          }
-        }
-      },
-      {
        path: 'videos',
        component: AccountVideosComponent,
        data: {
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 5bd7b0824..ea7a317eb 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -1,57 +1,87 @@
-<div *ngIf="account" class="row">
+<div *ngIf="account" class="root">
-  <div class="sub-menu">
+  <div class="account-info">
-    <div class="actor">
+    <div class="account-avatar-row">
-      <img [src]="account.avatarUrl" alt="Avatar" />
+      <my-account-avatar [account]="account" size="120"></my-account-avatar>
-      <div class="actor-info">
+      <div>
-        <div class="actor-names">
+        <div class="section-label" i18n>PEERTUBE ACCOUNT</div>
-          <div class="actor-display-name">{{ account.displayName }}</div>
-          <div class="actor-name">
+        <div class="actor-info">
-            <span>{{ account.nameWithHost }}</span>
+          <div>
-            <button [cdkCopyToClipboard]="account.nameWithHostForced" (click)="activateCopiedMessage()"
+            <div class="actor-display-name">
-                    class="btn btn-outline-secondary btn-sm copy-button"
+              <h1 i18n-title [title]="'Created on ' + (account.createdAt | date)">{{ account.displayName }}</h1>
-            >
-              <span class="glyphicon glyphicon-copy"></span>
+              <my-user-moderation-dropdown
-            </button>
+                [prependActions]="prependModerationActions"
+                buttonSize="small" [account]="account" [user]="accountUser" placement="bottom-left auto"
+                (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
+              ></my-user-moderation-dropdown>
+              <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>
+              <span *ngIf="account.mutedServerByUser" class="badge badge-danger" i18n>Instance muted</span>
+              <span *ngIf="account.mutedByInstance" class="badge badge-danger" i18n>Muted by your instance</span>
+              <span *ngIf="account.mutedServerByInstance" class="badge badge-danger" i18n>Instance muted by your instance</span>
+            </div>
+            <div class="actor-handle">
+              <span>@{{ account.nameWithHost }}</span>
+              <button [cdkCopyToClipboard]="account.nameWithHostForced" (click)="activateCopiedMessage()"
+                      class="btn btn-outline-secondary btn-sm copy-button" title="Copy account handle" i18n-title
+              >
+                <span class="glyphicon glyphicon-duplicate"></span>
+              </button>
+            </div>
+            <div class="actor-counters">
+              <span i18n>{naiveAggregatedSubscribers(), plural, =1 {1 subscriber} other {{{ naiveAggregatedSubscribers() }} subscribers}}</span>
+              <span class="videos-count" *ngIf="accountVideosCount !== undefined" i18n>
+                {accountVideosCount, plural, =1 {1 videos} other {{{ accountVideosCount }} videos}}
+              </span>
+            </div>
          </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>
-          <span *ngIf="account.mutedServerByUser" class="badge badge-danger" i18n>Instance muted</span>
-          <span *ngIf="account.mutedByInstance" class="badge badge-danger" i18n>Muted by your instance</span>
-          <span *ngIf="account.mutedServerByInstance" class="badge badge-danger" i18n>Instance muted by your instance</span>
-          <my-user-moderation-dropdown
-            [prependActions]="prependModerationActions"
-            buttonSize="small" [account]="account" [user]="accountUser" placement="bottom-left auto"
-            (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
-          ></my-user-moderation-dropdown>
-        </div>
-        <div class="actor-followers" [title]="accountFollowerTitle">
-          {{ subscribersDisplayFor(naiveAggregatedSubscribers) }}
        </div>
      </div>
+    </div>
-      <div class="right-buttons">
+    <div class="description" [ngClass]="{ expanded: accountDescriptionExpanded }">
-        <a *ngIf="isAccountManageable && !isInSmallView" routerLink="/my-account" class="btn btn-outline-tertiary mr-2" i18n>Manage account</a>
+      <div class="description-html" [innerHTML]="accountDescriptionHTML"></div>
-        <my-subscribe-button *ngIf="videoChannels" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
-      </div>
    </div>
-    <div class="links w-100">
+    <div *ngIf="hasShowMoreDescription()" class="show-more" role="button"
-      <ng-template #linkTemplate let-item="item">
+      (click)="accountDescriptionExpanded = !accountDescriptionExpanded"
-        <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
+      title="Show the complete description" i18n-title i18n
-      </ng-template>
+    >
+      Show more...
+    </div>
-      <list-overflow [items]="links" [itemTemplate]="linkTemplate"></list-overflow>
+    <div class="buttons">
+      <a *ngIf="isManageable()" routerLink="/my-account" class="peertube-button-link orange-button" i18n>
+        Manage account
+      </a>
-      <simple-search-input (searchChanged)="searchChanged($event)" name="search-videos" i18n-placeholder placeholder="Search videos"></simple-search-input>
+      <my-subscribe-button *ngIf="hasVideoChannels() && !isManageable()" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
    </div>
  </div>
-  <div class="margin-content">
+  <div class="links">
-    <router-outlet (activate)="onOutletLoaded($event)"></router-outlet>
+    <ng-template #linkTemplate let-item="item">
+      <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
+    </ng-template>
+    <list-overflow [hidden]="hideMenu" [items]="links" [itemTemplate]="linkTemplate"></list-overflow>
+    <simple-search-input
+      [alwaysShow]="!isInSmallView()" (searchChanged)="searchChanged($event)"
+      (inputDisplayChanged)="onSearchInputDisplayChanged($event)" name="search-videos"
+      i18n-iconTitle icon-title="Search account videos"
+      i18n-placeholder placeholder="Search account videos"
+    ></simple-search-input>
  </div>
+  <router-outlet (activate)="onOutletLoaded($event)"></router-outlet>
 </div>
 <ng-container *ngIf="prependModerationActions">
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 40c6b6493..56927dea6 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -1,48 +1,29 @@
-// 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';
+@import '_actor';
-.sub-menu {
+@import '_miniature';
-  @include sub-menu-with-actor;
+.root {
-  .actor {
+  --myGlobalTopPadding: 60px;
-    width: 100%;
+  --myImgMargin: 30px;
-  }
+  --myFontSize: 16px;
+  --myGreyFontSize: 16px;
 }
-.margin-content {
+.section-label {
-  // margin-content is required, but child views have their own margins
+  @include section-label-responsive;
-  // that match views outside the scope of accounts, so we only align
-  // them with the margins of .sub-menu when required.
-  margin: 0;
 }
-.right-buttons {
+.links {
-  display: flex;
+  @include grid-videos-miniature-margins;
-  height: max-content;
-  margin-left: auto;
-  margin-top: 10px;
-  @include media-breakpoint-down(lg) {
-    flex-flow: column-reverse;
-    a {
+  display: flex;
-      margin-top: 0.25rem;
+  justify-content: space-between;
-      margin-right: 0 !important;
+  align-items: center;
-    }
+  max-width: $max-channels-width;
-  }
-  a {
-    @include peertube-button-outline;
-  }
-  my-subscribe-button {
+  simple-search-input {
-    min-height: 30px;
+    margin-left: auto;
  }
 }
@@ -60,39 +41,101 @@ my-user-moderation-dropdown,
 .copy-button {
  border: none;
-  padding: 5px;
+}
-  margin-top: -2px;
+.account-info {
+  @include grid-videos-miniature-margins(false, 15px);
+  display: grid;
+  grid-template-columns: 1fr min-content;
+  grid-template-rows: auto auto;
+  background-color: pvar(--submenuBackgroundColor);
+  margin-bottom: 45px;
+  padding-top: var(--myGlobalTopPadding);
+  padding-bottom: var(--myGlobalTopPadding);
+  font-size: var(--myFontSize);
+}
+.account-avatar-row {
+  @include avatar-row-responsive(var(--myImgMargin), var(--myGreyFontSize));
+}
+.description {
+  grid-column: 1 / 3;
+  max-width: 1000px;
+  word-break: break-word;
+}
+.show-more {
+  @include show-more-description;
+  display: none;
+  text-align: center;
+}
+.buttons {
+  grid-column: 2;
+  grid-row: 1;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-content: flex-start;
+  > *:not(:last-child) {
+    margin-bottom: 15px;
+  }
+  > a {
+    white-space: nowrap;
+  }
+}
+@media screen and (max-width: $small-view) {
+  .root {
+    --myGlobalTopPadding: 45px;
+    --myChannelImgMargin: 15px;
+  }
+  .account-info {
+    display: block;
+    padding-bottom: 60px;
+  }
+  .description:not(.expanded) {
+    max-height: 70px;
+    @include fade-text(30px, pvar(--submenuBackgroundColor));
+  }
+  .show-more {
+    display: block;
+  }
+  .buttons {
+    justify-content: center;
+  }
 }
 @media screen and (max-width: $mobile-view) {
-  .sub-menu {
+  .root {
-    .actor {
+    --myGlobalTopPadding: 15px;
-      flex-direction: column;
+    --myFontSize: 14px;
-      align-items: center;
+    --myGreyFontSize: 13px;
+  }
-      img,
-      .actor-info .actor-names .actor-display-name {
+  .account-info {
-        margin-right: 0;
+    display: block;
-      }
+    padding-bottom: 30px;
+  }
-      .actor-info  {
-        .actor-names {
+  .links {
-          flex-direction: column;
+    margin: auto !important;
-          align-items: center;
+    width: min-content;
-        }
+  }
-        my-user-moderation-dropdown {
+  .show-more {
-          margin-left: 0;
+    margin-bottom: 30px;
-        }
-        .actor-followers {
-          text-align: center;
-        }
-      }
-      .right-buttons {
-        margin-left: 0;
-      }
-    }
  }
 }
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index e6a5a5d5e..fbd7380a9 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -2,11 +2,19 @@ import { Subscription } from 'rxjs'
 import { catchError, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators'
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { AuthService, Notifier, RedirectService, RestExtractor, ScreenService, UserService } from '@app/core'
+import { AuthService, MarkdownService, Notifier, RedirectService, RestExtractor, ScreenService, UserService } from '@app/core'
-import { Account, AccountService, DropdownAction, ListOverflowItem, VideoChannel, VideoChannelService } from '@app/shared/shared-main'
+import {
+  Account,
+  AccountService,
+  DropdownAction,
+  ListOverflowItem,
+  VideoChannel,
+  VideoChannelService,
+  VideoService
+} from '@app/shared/shared-main'
 import { AccountReportComponent } from '@app/shared/shared-moderation'
-import { User, UserRight } from '@shared/models'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
+import { User, UserRight } from '@shared/models'
 import { AccountSearchComponent } from './account-search/account-search.component'
 @Component({
@@ -15,16 +23,23 @@ import { AccountSearchComponent } from './account-search/account-search.componen
 })
 export class AccountsComponent implements OnInit, OnDestroy {
  @ViewChild('accountReportModal') accountReportModal: AccountReportComponent
  accountSearch: AccountSearchComponent
  account: Account
  accountUser: User
  videoChannels: VideoChannel[] = []
  links: ListOverflowItem[] = []
+  hideMenu = false
-  isAccountManageable = false
  accountFollowerTitle = ''
+  accountVideosCount: number
+  accountDescriptionHTML = ''
+  accountDescriptionExpanded = false
  prependModerationActions: DropdownAction<any>[]
  private routeSub: Subscription
@@ -38,6 +53,8 @@ export class AccountsComponent implements OnInit, OnDestroy {
    private restExtractor: RestExtractor,
    private redirectService: RedirectService,
    private authService: AuthService,
+    private videoService: VideoService,
+    private markdown: MarkdownService,
    private screenService: ScreenService
  ) {
  }
@@ -62,9 +79,8 @@ export class AccountsComponent implements OnInit, OnDestroy {
                        )
    this.links = [
-      { label: $localize`VIDEO CHANNELS`, routerLink: 'video-channels' },
+      { label: $localize`CHANNELS`, routerLink: 'video-channels' },
-      { label: $localize`VIDEOS`, routerLink: 'videos' },
+      { label: $localize`VIDEOS`, routerLink: 'videos' }
-      { label: $localize`ABOUT`, routerLink: 'about' }
    ]
  }
@@ -72,19 +88,29 @@ export class AccountsComponent implements OnInit, OnDestroy {
    if (this.routeSub) this.routeSub.unsubscribe()
  }
-  get naiveAggregatedSubscribers () {
+  naiveAggregatedSubscribers () {
    return this.videoChannels.reduce(
      (acc, val) => acc + val.followersCount,
      this.account.followersCount // accumulator starts with the base number of subscribers the account has
    )
  }
-  get isInSmallView () {
+  isUserLoggedIn () {
+    return this.authService.isLoggedIn()
+  }
+  isInSmallView () {
    return this.screenService.isInSmallView()
  }
+  isManageable () {
+    if (!this.isUserLoggedIn()) return false
+    return this.account?.userId === this.authService.getUser().id
+  }
  onUserChanged () {
-    this.getUserIfNeeded(this.account)
+    this.loadUserIfNeeded(this.account)
  }
  onUserDeleted () {
@@ -113,40 +139,38 @@ export class AccountsComponent implements OnInit, OnDestroy {
    if (this.accountSearch) this.accountSearch.updateSearch(search)
  }
-  private onAccount (account: Account) {
+  onSearchInputDisplayChanged (displayed: boolean) {
+    this.hideMenu = this.isInSmallView() && displayed
+  }
+  hasVideoChannels () {
+    return this.videoChannels.length !== 0
+  }
+  hasShowMoreDescription () {
+    return !this.accountDescriptionExpanded && this.accountDescriptionHTML.length > 100
+  }
+  private async onAccount (account: Account) {
+    this.accountFollowerTitle = $localize`${account.followersCount} direct account followers`
    this.prependModerationActions = undefined
-    this.account = account
+    this.accountDescriptionHTML = await this.markdown.textMarkdownToHTML(account.description)
-    if (this.authService.isLoggedIn()) {
+    // After the markdown renderer to avoid layout changes
-      this.authService.userInformationLoaded.subscribe(
+    this.account = account
-        () => {
-          this.isAccountManageable = this.account.userId && this.account.userId === this.authService.getUser().id
-          const followers = this.subscribersDisplayFor(account.followersCount)
-          this.accountFollowerTitle = $localize`${followers} direct account followers`
-          // It's not our account, we can report it
-          if (!this.isAccountManageable) {
-            this.prependModerationActions = [
-              {
-                label: $localize`Report this account`,
-                handler: () => this.showReportModal()
-              }
-            ]
-          }
-        }
-      )
-    }
-    this.getUserIfNeeded(account)
+    this.updateModerationActions()
+    this.loadUserIfNeeded(account)
+    this.loadAccountVideosCount()
  }
  private showReportModal () {
    this.accountReportModal.show()
  }
-  private getUserIfNeeded (account: Account) {
+  private loadUserIfNeeded (account: Account) {
    if (!account.userId || !this.authService.isLoggedIn()) return
    const user = this.authService.getUser()
@@ -158,4 +182,33 @@ export class AccountsComponent implements OnInit, OnDestroy {
      )
    }
  }
+  private updateModerationActions () {
+    if (!this.authService.isLoggedIn()) return
+    this.authService.userInformationLoaded.subscribe(
+      () => {
+        if (this.isManageable()) return
+        // It's not our account, we can report it
+        this.prependModerationActions = [
+          {
+            label: $localize`Report this account`,
+            handler: () => this.showReportModal()
+          }
+        ]
+      }
+    )
+  }
+  private loadAccountVideosCount () {
+    this.videoService.getAccountVideos({
+      account: this.account,
+      videoPagination: {
+        currentPage: 1,
+        itemsPerPage: 0
+      },
+      sort: '-publishedAt'
+    }).subscribe(res => this.accountVideosCount = res.total)
+  }
 }
diff --git a/client/src/app/+accounts/accounts.module.ts b/client/src/app/+accounts/accounts.module.ts
index 6da65cbc1..22cdd0642 100644
--- a/client/src/app/+accounts/accounts.module.ts
+++ b/client/src/app/+accounts/accounts.module.ts
@@ -5,12 +5,12 @@ import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedModerationModule } from '@app/shared/shared-moderation'
 import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription'
 import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
-import { AccountAboutComponent } from './account-about/account-about.component'
+import { AccountSearchComponent } from './account-search/account-search.component'
 import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component'
 import { AccountVideosComponent } from './account-videos/account-videos.component'
-import { AccountSearchComponent } from './account-search/account-search.component'
 import { AccountsRoutingModule } from './accounts-routing.module'
 import { AccountsComponent } from './accounts.component'
+import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
 @NgModule({
  imports: [
@@ -21,14 +21,14 @@ import { AccountsComponent } from './accounts.component'
    SharedUserSubscriptionModule,
    SharedModerationModule,
    SharedVideoMiniatureModule,
-    SharedGlobalIconModule
+    SharedGlobalIconModule,
+    SharedAccountAvatarModule
  ],
  declarations: [
    AccountsComponent,
    AccountVideosComponent,
    AccountVideoChannelsComponent,
-    AccountAboutComponent,
    AccountSearchComponent
  ],
diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index fd648a425..8d1c3eadb 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -3,6 +3,7 @@ import { SelectButtonModule } from 'primeng/selectbutton'
 import { TableModule } from 'primeng/table'
 import { NgModule } from '@angular/core'
 import { SharedAbuseListModule } from '@app/shared/shared-abuse-list'
+import { SharedActorImageModule } from '@app/shared/shared-actor-image'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
@@ -38,6 +39,7 @@ import { JobService, LogsComponent, LogsService, SystemComponent } from './syste
 import { DebugComponent, DebugService } from './system/debug'
 import { JobsComponent } from './system/jobs/jobs.component'
 import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersComponent, UserUpdateComponent } from './users'
+import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
 @NgModule({
  imports: [
@@ -49,6 +51,8 @@ import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersCom
    SharedGlobalIconModule,
    SharedAbuseListModule,
    SharedVideoCommentModule,
+    SharedAccountAvatarModule,
+    SharedActorImageModule,
    TableModule,
    SelectButtonModule,
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 622d464e4..633de9677 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
@@ -24,7 +24,7 @@
  <ng-template pTemplate="header">
    <tr>
-      <th style="width: 150px;">Actions</th>
+      <th style="width: 150px;" i18n>Actions</th>
      <th i18n>Follower handle</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>
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 cf87ec05f..f4e6a60fe 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
@@ -31,7 +31,7 @@
  <ng-template pTemplate="header">
    <tr>
-      <th style="width: 150px;">Action</th>
+      <th style="width: 150px;" i18n>Action</th>
      <th i18n>Host</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>
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
index a654e51a6..f3bcca497 100644
--- 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
@@ -24,7 +24,7 @@
  <ng-template pTemplate="header">
    <tr>
      <th style="width: 40px;"></th>
-      <th style="width: 150px;">Action</th>
+      <th style="width: 150px;" i18n>Action</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>
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 128f4962d..f5cf93adb 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
@@ -34,12 +34,7 @@
      <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
+            <my-account-avatar [account]="accountBlock.blockedAccount"></my-account-avatar>
-              class="avatar"
-              [src]="accountBlock.blockedAccount.avatar?.path"
-              (error)="switchToDefaultAvatar($event)"
-              alt="Avatar"
-            >
            <div>
              {{ accountBlock.blockedAccount.displayName }}
              <span class="text-muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
index 82c371f4d..d6aca10e7 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
@@ -164,7 +164,8 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
        baseUrl: `${environment.originServerUrl}/videos/embed/${entry.video.uuid}`,
        title: false,
        warningTitle: false
-      })
+      }),
+      entry.video.name
    )
  }
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
index fa4a8edfd..d360c3c51 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
@@ -5,7 +5,7 @@
  <my-feed [syndicationItems]="syndicationItems"></my-feed>
 </h1>
-<em>This view also shows comments from muted accounts.</em>
+<em i18n>This view also shows comments from muted accounts.</em>
 <p-table
  [value]="comments" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
@@ -86,12 +86,8 @@
      <td>
        <a [href]="videoComment.account.localUrl" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
          <div class="chip two-lines">
-            <img
+            <my-account-avatar [account]="videoComment.account"></my-account-avatar>
-              class="avatar"
+          <div>
-              [src]="videoComment.accountAvatarUrl"
-              alt=""
-            >
-            <div>
              {{ videoComment.account.displayName }}
              <span>{{ videoComment.by }}</span>
            </div>
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
index d208944fe..c9262da09 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
@@ -1,17 +1,9 @@
 @import 'mixins';
-h1 {
+my-feed {
-  my-feed {
+  margin-left: 5px;
-    margin-left: 5px;
+  display: inline-block;
-    display: inline-block;
+  width: 15px;
-    ::ng-deep {
-      my-global-icon {
-        width: 15px !important;
-        top: 0 !important;
-      }
-    }
-  }
 }
 my-global-icon {
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 82a965313..9cbec03a1 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
@@ -23,7 +23,7 @@
        </a>
        <div class="buttons">
-          <my-edit-button *ngIf="pluginType !== PluginType.THEME" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
+          <my-edit-button *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
          <my-button class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
                     [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)"
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 c78b19585..1a95980ae 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
@@ -31,8 +31,6 @@ export class PluginListInstalledComponent implements OnInit {
  plugins: PeerTubePlugin[] = []
  updating: { [name: string]: boolean } = {}
-  PluginType = PluginType
  onDataSubject = new Subject<any[]>()
  constructor (
@@ -104,6 +102,10 @@ export class PluginListInstalledComponent implements OnInit {
    return !!this.updating[this.getUpdatingKey(plugin)]
  }
+  isTheme (plugin: PeerTubePlugin) {
+    return plugin.type === PluginType.THEME
+  }
  async uninstall (plugin: PeerTubePlugin) {
    const res = await this.confirmService.confirm(
      $localize`Do you really want to uninstall ${plugin.name}?`,
@@ -128,6 +130,16 @@ export class PluginListInstalledComponent implements OnInit {
    const updatingKey = this.getUpdatingKey(plugin)
    if (this.updating[updatingKey]) return
+    if (this.isMajorUpgrade(plugin)) {
+      const res = await this.confirmService.confirm(
+        $localize`This is a major plugin upgrade. Please go on the plugin homepage to check potential release notes.`,
+        $localize`Upgrade`,
+        $localize`Proceed upgrade`
+      )
+      if (res === false) return
+    }
    this.updating[updatingKey] = true
    this.pluginApiService.update(plugin.name, plugin.type)
@@ -156,4 +168,13 @@ export class PluginListInstalledComponent implements OnInit {
  private getUpdatingKey (plugin: PeerTubePlugin) {
    return plugin.name + plugin.type
  }
+  private isMajorUpgrade (plugin: PeerTubePlugin) {
+    if (!plugin.latestVersion) return false
+    const latestMajor = plugin.latestVersion.split('.')[0]
+    const currentMajor = plugin.version.split('.')[0]
+    return latestMajor > currentMajor
+  }
 }
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 1b5fe45c6..727633399 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)" i18n-placeholder placeholder="Search..."/>
+  <input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..." autofocus />
 </div>
 <div class="alert alert-info" i18n *ngIf="pluginInstalled">
@@ -20,8 +20,8 @@
    <my-global-icon iconName="search"></my-global-icon>
    <ng-container i18n>
-      {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for "{{ search }}"
+      {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for {{ search }}"
-      </ng-container>
+    </ng-container>
  </ng-container>
 </div>
@@ -48,6 +48,8 @@
        <span *ngIf="plugin.installed" class="badge badge-success">Installed</span>
        <div class="buttons">
+          <my-edit-button *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
          <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>
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 4c571dee4..d2c179aba 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
@@ -3,7 +3,7 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
-import { ComponentPagination, ConfirmService, hasMoreItems, Notifier } from '@app/core'
+import { ComponentPagination, ConfirmService, hasMoreItems, Notifier, PluginService } from '@app/core'
 import { PeerTubePluginIndex } from '@shared/models/plugins/peertube-plugin-index.model'
 import { PluginType } from '@shared/models/plugins/plugin.type'
@@ -39,6 +39,7 @@ export class PluginSearchComponent implements OnInit {
  private searchSubject = new Subject<string>()
  constructor (
+    private pluginService: PluginService,
    private pluginApiService: PluginApiService,
    private notifier: Notifier,
    private confirmService: ConfirmService,
@@ -119,6 +120,14 @@ export class PluginSearchComponent implements OnInit {
    return this.pluginApiService.getPluginOrThemeHref(this.pluginType, name)
  }
+  getShowRouterLink (plugin: PeerTubePluginIndex) {
+    return [ '/admin', 'plugins', 'show', this.pluginService.nameToNpmName(plugin.name, this.pluginType) ]
+  }
+  isThemeSearch () {
+    return this.pluginType === PluginType.THEME
+  }
  async install (plugin: PeerTubePluginIndex) {
    if (this.installing[plugin.npmName]) return
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 cb2894568..ad65293d4 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
@@ -7,7 +7,7 @@
  <form *ngIf="hasRegisteredSettings()" role="form" (ngSubmit)="formValidated()" [formGroup]="form">
    <div class="form-group" *ngFor="let setting of registeredSettings">
-      <my-dynamic-form-field [form]="form" [setting]="setting" [formErrors]="formErrors"></my-dynamic-form-field>
+      <my-dynamic-form-field [hidden]="isSettingHidden(setting)" [form]="form" [setting]="setting" [formErrors]="formErrors"></my-dynamic-form-field>
    </div>
    <input type="submit" i18n value="Update plugin settings" [disabled]="!form.valid">
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
index 4e60ca290..ca9ad9922 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
@@ -2,7 +2,7 @@ import { Subscription } from 'rxjs'
 import { map, switchMap } from 'rxjs/operators'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { Notifier } from '@app/core'
+import { Notifier, PluginService } from '@app/core'
 import { BuildFormArgument } from '@app/shared/form-validators'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { PeerTubePlugin, RegisterServerSettingOptions } from '@shared/models'
@@ -19,10 +19,12 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
  pluginTypeLabel: string
  private sub: Subscription
+  private npmName: string
  constructor (
    protected formValidatorService: FormValidatorService,
-    private pluginService: PluginApiService,
+    private pluginService: PluginService,
+    private pluginAPIService: PluginApiService,
    private notifier: Notifier,
    private route: ActivatedRoute
  ) {
@@ -32,9 +34,9 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
  ngOnInit () {
    this.sub = this.route.params.subscribe(
      routeParams => {
-        const npmName = routeParams['npmName']
+        this.npmName = routeParams['npmName']
-        this.loadPlugin(npmName)
+        this.loadPlugin(this.npmName)
      }
    )
  }
@@ -46,7 +48,7 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
  formValidated () {
    const settings = this.form.value
-    this.pluginService.updatePluginSettings(this.plugin.name, this.plugin.type, settings)
+    this.pluginAPIService.updatePluginSettings(this.plugin.name, this.plugin.type, settings)
        .subscribe(
          () => {
            this.notifier.success($localize`Settings updated.`)
@@ -60,18 +62,27 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
    return Array.isArray(this.registeredSettings) && this.registeredSettings.length !== 0
  }
+  isSettingHidden (setting: RegisterServerSettingOptions) {
+    const script = this.pluginService.getRegisteredSettingsScript(this.npmName)
+    if (!script?.isSettingHidden) return false
+    return script.isSettingHidden({ setting, formValues: this.form.value })
+  }
  private loadPlugin (npmName: string) {
-    this.pluginService.getPlugin(npmName)
+    this.pluginAPIService.getPlugin(npmName)
        .pipe(switchMap(plugin => {
-          return this.pluginService.getPluginRegisteredSettings(plugin.name, plugin.type)
+          return this.pluginAPIService.getPluginRegisteredSettings(plugin.name, plugin.type)
            .pipe(map(data => ({ plugin, registeredSettings: data.registeredSettings })))
        }))
        .subscribe(
-          ({ plugin, registeredSettings }) => {
+          async ({ plugin, registeredSettings }) => {
            this.plugin = plugin
-            this.registeredSettings = registeredSettings
-            this.pluginTypeLabel = this.pluginService.getPluginTypeLabel(this.plugin.type)
+            this.registeredSettings = await this.translateSettings(registeredSettings)
+            this.pluginTypeLabel = this.pluginAPIService.getPluginTypeLabel(this.plugin.type)
            this.buildSettingsForm()
          },
@@ -104,4 +115,27 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
    return registered.default
  }
+  private async translateSettings (settings: RegisterServerSettingOptions[]) {
+    for (const setting of settings) {
+      for (const key of [ 'label', 'html', 'descriptionHTML' ]) {
+        if (setting[key]) setting[key] = await this.pluginService.translateBy(this.npmName, setting[key])
+      }
+      if (Array.isArray(setting.options)) {
+        const newOptions = []
+        for (const o of setting.options) {
+          newOptions.push({
+            value: o.value,
+            label: await this.pluginService.translateBy(this.npmName, o.label)
+          })
+        }
+        setting.options = newOptions
+      }
+    }
+    return settings
+  }
 }
diff --git a/client/src/app/+admin/plugins/shared/plugin-api.service.ts b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
index fad30576b..d91fccc09 100644
--- a/client/src/app/+admin/plugins/shared/plugin-api.service.ts
+++ b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
@@ -94,7 +94,6 @@ export class PluginApiService {
    return this.authHttp.get<RegisteredServerSettings>(path)
               .pipe(
-                 switchMap(res => this.translateSettingsLabel(npmName, res)),
                 catchError(res => this.restExtractor.handleError(res))
               )
  }
@@ -141,19 +140,4 @@ export class PluginApiService {
    return `https://www.npmjs.com/package/peertube-${typeString}-${name}`
  }
-  private translateSettingsLabel (npmName: string, res: RegisteredServerSettings): Observable<RegisteredServerSettings> {
-    return this.pluginService.translationsObservable
-      .pipe(
-        map(allTranslations => allTranslations[npmName]),
-        map(translations => {
-          const registeredSettings = res.registeredSettings
-                                        .map(r => {
-                                          return Object.assign({}, r, { label: peertubeTranslate(r.label, translations) })
-                                        })
-          return { registeredSettings }
-        })
-      )
-  }
 }
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 83030b7e0..f59a01b74 100644
--- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
@@ -3,7 +3,7 @@
 .plugin {
  margin: 15px 0;
-  background-color: pvar(--submenuColor);
+  background-color: pvar(--submenuBackgroundColor);
 }
 .first-row {
diff --git a/client/src/app/+admin/system/debug/debug.component.html b/client/src/app/+admin/system/debug/debug.component.html
index 75f3df601..2dc509383 100644
--- a/client/src/app/+admin/system/debug/debug.component.html
+++ b/client/src/app/+admin/system/debug/debug.component.html
@@ -1,19 +1,19 @@
 <div class="root">
-  <h4>IP</h4>
+  <h4 i18n>IP address</h4>
-  <p>PeerTube thinks your web browser public IP is <strong>{{ debug?.ip }}</strong>.</p>
+  <p i18n>PeerTube thinks your web browser public IP is <strong>{{ debug?.ip }}</strong>.</p>
-  <p>If this is not your correct public IP, please consider fixing it because:</p>
+  <p i18n>If this is not your correct public IP, please consider fixing it because:</p>
  <ul>
-    <li>Views may not be counted correctly (reduced compared to what they should be)</li>
+    <li i18n>Views may not be counted correctly (reduced compared to what they should be)</li>
-    <li>Anti brute force system could be overzealous</li>
+    <li i18n>Anti brute force system could be overzealous</li>
-    <li>P2P system could not work correctly</li>
+    <li i18n>P2P system could not work correctly</li>
  </ul>
-  <p>To fix it:<p>
+  <p i18n>To fix it:<p>
  <ul>
-    <li>Check the <code>trust_proxy</code> configuration key</li>
+    <li i18n>Check the <code>trust_proxy</code> configuration key</li>
-    <li>If you run PeerTube using Docker, check you run the <code>reverse-proxy</code> with <code>network_mode: "host"</code>
+    <li i18n>If you run PeerTube using Docker, check you run the <code>reverse-proxy</code> with <code>network_mode: "host"</code>
      (see <a href="https://github.com/Chocobozzz/PeerTube/issues/1643#issuecomment-464789666">issue 1643</a>)</li>
  </ul>
 </div>
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 243c6556a..5e92c0f36 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
@@ -72,7 +72,7 @@
    <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>
+      <my-actor-avatar-edit [actor]="user.account" [editable]="false" [displaySubscribers]="false" [displayUsername]="false"></my-actor-avatar-edit>
    </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 aa87b8d6d..8b0ac8783 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
@@ -72,11 +72,3 @@ input[type=submit], button {
  @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-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 4a09fb392..e114f3425 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
@@ -106,13 +106,8 @@
      <td *ngIf="isSelected('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
+            <my-account-avatar [account]="user?.account"></my-account-avatar>
-              class="avatar"
+           <div>
-              [src]="user?.account?.avatar?.path"
-              (error)="switchToDefaultAvatar($event)"
-              alt="Avatar"
-            >
-            <div>
              <span class="user-table-primary-text">{{ user.account.displayName }}</span>
              <span class="text-muted">{{ user.username }}</span>
            </div>
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 7875b74ad..339e18206 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
@@ -163,10 +163,6 @@ export class UserListComponent extends RestTable implements OnInit {
    this.loadData()
  }
-  switchToDefaultAvatar ($event: Event) {
-    ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
-  }
  async unbanUsers (users: User[]) {
    const res = await this.confirmService.confirm($localize`Do you really want to unban ${users.length} users?`, $localize`Unban`)
    if (res === false) return
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index 3171e5b0f..5f5b0f565 100644
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -21,7 +21,7 @@
              <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
+                formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" autofocus
              >
            </div>
@@ -41,7 +41,7 @@
            </div>
          </div>
-          <input type="submit" i18n-value value="Login" [disabled]="!form.valid">
+          <input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid">
          <div class="additionnal-links">
            <a i18n class="forgot-password-button" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a>
@@ -114,12 +114,12 @@
  <div class="modal-footer inputs">
    <input
-      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+      type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
      (click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
    >
    <input
-      type="submit" i18n-value="Password reset button" value="Reset" class="action-button-submit"
+      type="submit" i18n-value="Password reset button" value="Reset" class="peertube-button orange-button"
      (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
    >
  </div>
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index 3cc302aec..eddaff542 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -8,16 +8,9 @@ label {
  display: block;
 }
-input:not([type=submit]) {
+input[type=text],
+input[type=email] {
  @include peertube-input-text(340px);
-  display: inline-block;
-  margin-right: 5px;
-}
-input[type=submit] {
-  @include peertube-button;
-  @include orange-button;
 }
 .modal-body {
@@ -28,13 +21,6 @@ input[type=submit] {
  }
 }
-.modal-footer.inputs {
-  .action-button.action-button-cancel {
-    width: auto !important;
-    display: inline-block;
-  }
-}
 @media screen and (max-width: #{map-get($container-max-widths, sm)}) {
  .modal-body {
    #forgot-password-email {
@@ -42,10 +28,8 @@ input[type=submit] {
    }
  }
-  .modal-footer.inputs {
+  .modal-footer .grey-button {
-    .action-button.action-button-cancel {
+    display: none;
-      display: none;
-    }
  }
 }
diff --git a/client/src/app/+login/login.component.ts b/client/src/app/+login/login.component.ts
index af747b7fa..d8ad49081 100644
--- a/client/src/app/+login/login.component.ts
+++ b/client/src/app/+login/login.component.ts
@@ -3,9 +3,9 @@ import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angula
 import { ActivatedRoute } from '@angular/router'
 import { AuthService, Notifier, RedirectService, UserService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
-import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance'
 import { LOGIN_PASSWORD_VALIDATOR, LOGIN_USERNAME_VALIDATOR } from '@app/shared/form-validators/login-validators'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance'
 import { NgbAccordion, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 import { RegisteredExternalAuthConfig, ServerConfig } from '@shared/models'
@@ -16,7 +16,6 @@ import { RegisteredExternalAuthConfig, ServerConfig } from '@shared/models'
 })
 export class LoginComponent extends FormReactive implements OnInit, AfterViewInit {
-  @ViewChild('usernameInput', { static: false }) usernameInput: ElementRef
  @ViewChild('forgotPasswordModal', { static: true }) forgotPasswordModal: ElementRef
  accordion: NgbAccordion
@@ -91,10 +90,6 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
  }
  ngAfterViewInit () {
-    if (this.usernameInput) {
-      this.usernameInput.nativeElement.focus()
-    }
    this.hooks.runAction('action:login.init', 'login')
  }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
index ad7497f45..c7e173038 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
@@ -42,7 +42,9 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
      newInstanceFollower: $localize`Your instance has a new follower`,
      autoInstanceFollowing: $localize`Your instance automatically followed another instance`,
      abuseNewMessage: $localize`An abuse report received a new message`,
-      abuseStateChange: $localize`One of your abuse reports has been accepted or rejected by moderators`
+      abuseStateChange: $localize`One of your abuse reports has been accepted or rejected by moderators`,
+      newPeerTubeVersion: $localize`A new PeerTube version is available`,
+      newPluginVersion: $localize`One of your plugin/theme has a new available version`
    }
    this.notificationSettingKeys = Object.keys(this.labelNotifications) as (keyof UserNotificationSetting)[]
@@ -51,7 +53,9 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
      videoAutoBlacklistAsModerator: UserRight.MANAGE_VIDEO_BLACKLIST,
      newUserRegistration: UserRight.MANAGE_USERS,
      newInstanceFollower: UserRight.MANAGE_SERVER_FOLLOW,
-      autoInstanceFollowing: UserRight.MANAGE_CONFIGURATION
+      autoInstanceFollowing: UserRight.MANAGE_CONFIGURATION,
+      newPeerTubeVersion: UserRight.MANAGE_DEBUG,
+      newPluginVersion: UserRight.MANAGE_DEBUG
    }
  }
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 b0d2ec58d..48d06280b 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
@@ -3,7 +3,7 @@
  <div class="form-group col-12 col-lg-4 col-xl-3"></div>
  <div class="form-group col-12 col-lg-8 col-xl-9">
-    <my-actor-avatar-info [actor]="user.account" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"></my-actor-avatar-info>
+    <my-actor-avatar-edit [actor]="user.account" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"></my-actor-avatar-edit>
  </div>
 </div>
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index 076864563..050cd4b34 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -3,6 +3,7 @@ import { TableModule } from 'primeng/table'
 import { DragDropModule } from '@angular/cdk/drag-drop'
 import { NgModule } from '@angular/core'
 import { SharedAbuseListModule } from '@app/shared/shared-abuse-list'
+import { SharedActorImageModule } from '@app/shared/shared-actor-image'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
@@ -10,6 +11,7 @@ import { SharedModerationModule } from '@app/shared/shared-moderation'
 import { SharedShareModal } from '@app/shared/shared-share-modal'
 import { SharedUserInterfaceSettingsModule } from '@app/shared/shared-user-settings'
 import { MyAccountAbusesListComponent } from './my-account-abuses/my-account-abuses-list.component'
+import { MyAccountApplicationsComponent } from './my-account-applications/my-account-applications.component'
 import { MyAccountBlocklistComponent } from './my-account-blocklist/my-account-blocklist.component'
 import { MyAccountServerBlocklistComponent } from './my-account-blocklist/my-account-server-blocklist.component'
 import { MyAccountNotificationsComponent } from './my-account-notifications/my-account-notifications.component'
@@ -20,8 +22,8 @@ import { MyAccountDangerZoneComponent } from './my-account-settings/my-account-d
 import { MyAccountNotificationPreferencesComponent } from './my-account-settings/my-account-notification-preferences'
 import { MyAccountProfileComponent } from './my-account-settings/my-account-profile/my-account-profile.component'
 import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component'
-import { MyAccountApplicationsComponent } from './my-account-applications/my-account-applications.component'
 import { MyAccountComponent } from './my-account.component'
+import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
 @NgModule({
  imports: [
@@ -37,7 +39,9 @@ import { MyAccountComponent } from './my-account.component'
    SharedUserInterfaceSettingsModule,
    SharedGlobalIconModule,
    SharedAbuseListModule,
-    SharedShareModal
+    SharedShareModal,
+    SharedAccountAvatarModule,
+    SharedActorImageModule
  ],
  declarations: [
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts
index a625493de..b3265210f 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts
@@ -8,10 +8,12 @@ import {
  VIDEO_CHANNEL_SUPPORT_VALIDATOR
 } from '@app/shared/form-validators/video-channel-validators'
 import { FormValidatorService } from '@app/shared/shared-forms'
-import { VideoChannelService } from '@app/shared/shared-main'
+import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { VideoChannelCreate } from '@shared/models'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 import { MyVideoChannelEdit } from './my-video-channel-edit'
+import { switchMap } from 'rxjs/operators'
+import { of } from 'rxjs'
 @Component({
  templateUrl: './my-video-channel-edit.component.html',
@@ -19,6 +21,10 @@ import { MyVideoChannelEdit } from './my-video-channel-edit'
 })
 export class MyVideoChannelCreateComponent extends MyVideoChannelEdit implements OnInit {
  error: string
+  videoChannel = new VideoChannel({})
+  private avatar: FormData
+  private banner: FormData
  constructor (
    protected formValidatorService: FormValidatorService,
@@ -50,23 +56,43 @@ export class MyVideoChannelCreateComponent extends MyVideoChannelEdit implements
      support: body.support || null
    }
-    this.videoChannelService.createVideoChannel(videoChannelCreate).subscribe(
+    this.videoChannelService.createVideoChannel(videoChannelCreate)
-      () => {
+      .pipe(
-        this.authService.refreshUserInformation()
+        switchMap(() => this.uploadAvatar()),
+        switchMap(() => this.uploadBanner())
+      ).subscribe(
+        () => {
+          this.authService.refreshUserInformation()
+          this.notifier.success($localize`Video channel ${videoChannelCreate.displayName} created.`)
+          this.router.navigate(['/my-library', 'video-channels'])
+        },
-        this.notifier.success($localize`Video channel ${videoChannelCreate.displayName} created.`)
+        err => {
-        this.router.navigate([ '/my-library', 'video-channels' ])
+          if (err.status === HttpStatusCode.CONFLICT_409) {
-      },
+            this.error = $localize`This name already exists on this instance.`
+            return
+          }
-      err => {
+          this.error = err.message
-        if (err.status === HttpStatusCode.CONFLICT_409) {
-          this.error = $localize`This name already exists on this instance.`
-          return
        }
+      )
+  }
+  onAvatarChange (formData: FormData) {
+    this.avatar = formData
+  }
+  onAvatarDelete () {
+    this.avatar = null
+  }
+  onBannerChange (formData: FormData) {
+    this.banner = formData
+  }
-        this.error = err.message
+  onBannerDelete () {
-      }
+    this.banner = null
-    )
  }
  isCreation () {
@@ -76,4 +102,20 @@ export class MyVideoChannelCreateComponent extends MyVideoChannelEdit implements
  getFormButtonTitle () {
    return $localize`Create`
  }
+  getUsername () {
+    return this.form.value.name
+  }
+  private uploadAvatar () {
+    if (!this.avatar) return of(undefined)
+    return this.videoChannelService.changeVideoChannelImage(this.getUsername(), this.avatar, 'avatar')
+  }
+  private uploadBanner () {
+    if (!this.banner) return of(undefined)
+    return this.videoChannelService.changeVideoChannelImage(this.getUsername(), this.banner, 'banner')
+  }
 }
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html
index 735f9e3ba..2910dffad 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html
@@ -10,7 +10,7 @@
    <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-library/video-channels/update', videoChannelToUpdate?.nameWithHost ]">{{ videoChannelToUpdate?.displayName }}</a>
+        <a *ngIf="videoChannel" [routerLink]="[ '/my-library/video-channels/update', videoChannel?.nameWithHost ]">{{ videoChannel?.displayName }}</a>
      </li>
    </ng-container>
  </ol>
@@ -23,10 +23,22 @@
  <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 *ngIf="!isCreation() && videoChannel" class="video-channel-title" i18n>CHANNEL</div>
    </div>
    <div class="form-group col-12 col-lg-8 col-xl-9">
+      <h6 i18n>Banner image of your channel</h6>
+      <my-actor-banner-edit
+        *ngIf="videoChannel" [previewImage]="isCreation()"
+        [actor]="videoChannel" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
+      ></my-actor-banner-edit>
+      <my-actor-avatar-edit
+        *ngIf="videoChannel" [previewImage]="isCreation()"
+        [actor]="videoChannel" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
+        [displayUsername]="!isCreation()" [displaySubscribers]="!isCreation()"
+      ></my-actor-avatar-edit>
      <div class="form-group" *ngIf="isCreation()">
        <label i18n for="name">Name</label>
@@ -44,11 +56,6 @@
        </div>
      </div>
-      <my-actor-avatar-info
-        *ngIf="!isCreation() && videoChannelToUpdate"
-        [actor]="videoChannelToUpdate" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
-      ></my-actor-avatar-info>
      <div class="form-group">
        <label i18n for="display-name">Display name</label>
        <input
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
index 8f8af655c..22de103d1 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
@@ -10,11 +10,16 @@ label {
  @include settings-big-title;
 }
-my-actor-avatar-info {
+my-actor-avatar-edit,
+my-actor-banner-edit {
  display: block;
  margin-bottom: 20px;
 }
+my-actor-banner-edit {
+  max-width: 500px;
+}
 .input-group {
  @include peertube-input-group(fit-content);
 }
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts
index 3e20a27ee..33bb90f14 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts
@@ -2,8 +2,7 @@ import { FormReactive } from '@app/shared/shared-forms'
 import { VideoChannel } from '@app/shared/shared-main'
 export abstract class MyVideoChannelEdit extends FormReactive {
-  // We need it even in the create component because it's used in the edit template
+  videoChannel: VideoChannel
-  videoChannelToUpdate: VideoChannel
  abstract isCreation (): boolean
  abstract getFormButtonTitle (): string
@@ -12,10 +11,6 @@ export abstract class MyVideoChannelEdit extends FormReactive {
    return window.location.host
  }
-  // We need this method so angular does not complain in child template that doesn't need this
-  onAvatarChange (formData: FormData) { /* empty */ }
-  onAvatarDelete () { /* empty */ }
  // Should be implemented by the child
  isBulkUpdateVideosDisplayed () {
    return false
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts
index 6cd1ff503..a29af176c 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts
@@ -1,7 +1,9 @@
 import { Subscription } from 'rxjs'
+import { HttpErrorResponse } from '@angular/common/http'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
+import { uploadErrorHandler } from '@app/helpers'
 import {
  VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
  VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
@@ -11,8 +13,6 @@ import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { ServerConfig, VideoChannelUpdate } from '@shared/models'
 import { MyVideoChannelEdit } from './my-video-channel-edit'
-import { HttpErrorResponse } from '@angular/common/http'
-import { uploadErrorHandler } from '@app/helpers'
 @Component({
  selector: 'my-video-channel-update',
@@ -21,7 +21,7 @@ import { uploadErrorHandler } from '@app/helpers'
 })
 export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements OnInit, OnDestroy {
  error: string
-  videoChannelToUpdate: VideoChannel
+  videoChannel: VideoChannel
  private paramsSub: Subscription
  private oldSupportField: string
@@ -56,7 +56,7 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
      this.videoChannelService.getVideoChannel(videoChannelId).subscribe(
        videoChannelToUpdate => {
-          this.videoChannelToUpdate = videoChannelToUpdate
+          this.videoChannel = videoChannelToUpdate
          this.oldSupportField = videoChannelToUpdate.support
@@ -87,7 +87,7 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
      bulkVideosSupportUpdate: body.bulkVideosSupportUpdate || false
    }
-    this.videoChannelService.updateVideoChannel(this.videoChannelToUpdate.name, videoChannelUpdate).subscribe(
+    this.videoChannelService.updateVideoChannel(this.videoChannel.name, videoChannelUpdate).subscribe(
      () => {
        this.authService.refreshUserInformation()
@@ -101,12 +101,12 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
  }
  onAvatarChange (formData: FormData) {
-    this.videoChannelService.changeVideoChannelAvatar(this.videoChannelToUpdate.name, formData)
+    this.videoChannelService.changeVideoChannelImage(this.videoChannel.name, formData, 'avatar')
        .subscribe(
          data => {
            this.notifier.success($localize`Avatar changed.`)
-            this.videoChannelToUpdate.updateAvatar(data.avatar)
+            this.videoChannel.updateAvatar(data.avatar)
          },
          (err: HttpErrorResponse) => uploadErrorHandler({
@@ -118,12 +118,42 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
  }
  onAvatarDelete () {
-    this.videoChannelService.deleteVideoChannelAvatar(this.videoChannelToUpdate.name)
+    this.videoChannelService.deleteVideoChannelImage(this.videoChannel.name, 'avatar')
                            .subscribe(
                              data => {
                                this.notifier.success($localize`Avatar deleted.`)
-                                this.videoChannelToUpdate.resetAvatar()
+                                this.videoChannel.resetAvatar()
+                              },
+                              err => this.notifier.error(err.message)
+                            )
+  }
+  onBannerChange (formData: FormData) {
+    this.videoChannelService.changeVideoChannelImage(this.videoChannel.name, formData, 'banner')
+        .subscribe(
+          data => {
+            this.notifier.success($localize`Banner changed.`)
+            this.videoChannel.updateBanner(data.banner)
+          },
+          (err: HttpErrorResponse) => uploadErrorHandler({
+            err,
+            name: $localize`banner`,
+            notifier: this.notifier
+          })
+        )
+  }
+  onBannerDelete () {
+    this.videoChannelService.deleteVideoChannelImage(this.videoChannel.name, 'banner')
+                            .subscribe(
+                              data => {
+                                this.notifier.success($localize`Banner deleted.`)
+                                this.videoChannel.resetBanner()
                              },
                              err => this.notifier.error(err.message)
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
index f2f42459f..8804fa95c 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
@@ -17,10 +17,11 @@ input[type=text] {
 .video-channel {
  @include row-blocks;
  padding-bottom: 0;
  img {
-    @include avatar(80px);
+    @include channel-avatar(80px);
    margin-right: 10px;
  }
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts
index 92b56db49..53557ca02 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts
@@ -1,5 +1,6 @@
 import { ChartModule } from 'primeng/chart'
 import { NgModule } from '@angular/core'
+import { SharedActorImageModule } from '@app/shared/shared-actor-image'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
@@ -16,7 +17,8 @@ import { MyVideoChannelsComponent } from './my-video-channels.component'
    SharedMainModule,
    SharedFormModule,
-    SharedGlobalIconModule
+    SharedGlobalIconModule,
+    SharedActorImageModule
  ],
  declarations: [
diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
index c180161e7..9dec64645 100644
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -4,7 +4,7 @@
 </h1>
 <div class="top-buttons">
-  <div>
+  <div class="search-wrapper">
    <div class="input-group has-feedback has-clear">
      <input
        type="text" name="history-search" id="history-search" i18n-placeholder placeholder="Search your history"
@@ -15,7 +15,7 @@
    </div>
  </div>
-  <div class="history-switch ml-auto mr-3">
+  <div class="history-switch">
    <my-input-switch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></my-input-switch>
    <label i18n>Track watch history</label>
  </div>
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
index 928a8a3da..af4a34b4b 100644
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -11,16 +11,24 @@
 .top-buttons {
  margin-bottom: 30px;
-  display: flex;
+  display: grid;
+  grid-template-columns: 250px 1fr auto auto;
  align-items: center;
-  flex-wrap: wrap;
-  #history-search {
+  .search-wrapper {
-    @include peertube-input-text(250px);
+    grid-column: 1;
+    input {
+      @include peertube-input-text(250px);
+    }
  }
  .history-switch {
+    grid-column: 3;
    display: flex;
+    margin-left: auto;
+    margin-right: 15px;
    label {
      margin: 0 0 0 5px;
@@ -31,6 +39,8 @@
  }
  .delete-history {
+    grid-column: 4;
    @include peertube-button;
    @include grey-button;
    @include button-with-icon;
@@ -40,26 +50,27 @@
 }
 .video {
-  @include row-blocks;
+  @include row-blocks($column-responsive: false);
-  .my-video-miniature {
-    flex-grow: 1;
-  }
 }
-@media screen and (max-width: $mobile-view) {
+@media screen and (max-width: $small-view) {
  .top-buttons {
-    .history-switch label, .delete-history {
+    grid-template-columns: auto 1fr auto;
-      @include ellipsis;
+    row-gap: 20px;
-    }
-    .history-switch label {
+    .history-switch {
-      width: 60%;
+      grid-row: 1;
+      grid-column: 1;
+      margin: 0;
    }
    .delete-history {
-      margin-left: auto;
+      grid-row: 1;
-      max-width: 32%;
+      grid-column: 3;
+    }
+    .search-wrapper {
+      grid-column: 1 / 4;
    }
  }
 }
diff --git a/client/src/app/+my-library/my-library.module.ts b/client/src/app/+my-library/my-library.module.ts
index 5518cfd98..a1d706f0b 100644
--- a/client/src/app/+my-library/my-library.module.ts
+++ b/client/src/app/+my-library/my-library.module.ts
@@ -26,6 +26,7 @@ import { MyVideoPlaylistUpdateComponent } from './my-video-playlists/my-video-pl
 import { MyVideoPlaylistsComponent } from './my-video-playlists/my-video-playlists.component'
 import { VideoChangeOwnershipComponent } from './my-videos/modals/video-change-ownership.component'
 import { MyVideosComponent } from './my-videos/my-videos.component'
+import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
 @NgModule({
  imports: [
@@ -45,7 +46,8 @@ import { MyVideosComponent } from './my-videos/my-videos.component'
    SharedGlobalIconModule,
    SharedAbuseListModule,
    SharedShareModal,
-    SharedVideoLiveModule
+    SharedVideoLiveModule,
+    SharedAccountAvatarModule
  ],
  declarations: [
diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
index 27aab13b6..088765b20 100644
--- a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
@@ -22,13 +22,13 @@
  <div class="modal-footer inputs">
    <div class="inputs">
      <input
-        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
        (click)="dismiss()" (key.enter)="dismiss()"
      >
      <input
-          type="submit" i18n-value value="Accept" class="action-button-submit"
+        type="submit" i18n-value value="Accept" class="peertube-button orange-button"
-          (click)="close()"
+        (click)="close()"
      >
    </div>
  </div>
diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss
index c7357f62d..bf3770e56 100644
--- a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss
+++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss
@@ -1,14 +1,6 @@
 @import '_variables';
 @import '_mixins';
-select {
-  display: block;
-}
 .peertube-select-container {
  @include peertube-select-container(350px);
 }
-.form-group {
-  margin: 20px 0;
-}
-\ No newline at end of file
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.html b/client/src/app/+my-library/my-ownership/my-ownership.component.html
index 6bf562986..d0eff0521 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.html
@@ -37,12 +37,7 @@
      <td>
        <a [href]="videoChangeOwnership.initiatorAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
          <div class="chip two-lines">
-            <img
+            <my-account-avatar [account]="videoChangeOwnership.initiatorAccount"></my-account-avatar>
-              class="avatar"
-              [src]="videoChangeOwnership.initiatorAccount.avatar?.path"
-              (error)="switchToDefaultAvatar($event)"
-              alt="Avatar"
-            >
            <div>
              {{ videoChangeOwnership.initiatorAccount.displayName }}
              <span class="text-muted">{{ videoChangeOwnership.initiatorAccount.nameWithHost }}</span>
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.ts b/client/src/app/+my-library/my-ownership/my-ownership.component.ts
index 78c3d9192..a938023b4 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.ts
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.ts
@@ -43,10 +43,6 @@ export class MyOwnershipComponent extends RestTable implements OnInit {
    }
  }
-  switchToDefaultAvatar ($event: Event) {
-    ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
-  }
  openAcceptModal (videoChangeOwnership: VideoChangeOwnership) {
    this.myAccountAcceptOwnershipComponent.show(videoChangeOwnership)
  }
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
index 510b400c0..ff448ad87 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
@@ -6,7 +6,7 @@
  </span>
 </h1>
-<div class="video-subscriptions-header d-flex justify-content-between">
+<div class="video-subscriptions-header">
  <div class="has-feedback has-clear">
    <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch"
      (ngModelChange)="onSubscriptionsSearchChanged()" />
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
index 5ead45dd8..3c1a4d2ad 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
@@ -9,40 +9,40 @@ input[type=text] {
  @include row-blocks;
  img {
-    @include avatar(80px);
+    @include channel-avatar(80px);
    margin-right: 10px;
  }
+}
-  .video-channel-info {
+.video-channel-info {
-    flex-grow: 1;
+  flex-grow: 1;
-    a.video-channel-names {
+  a.video-channel-names {
-      @include disable-default-a-behaviour;
+    @include disable-default-a-behaviour;
-      width: fit-content;
+    width: fit-content;
-      display: flex;
+    display: flex;
-      align-items: baseline;
+    align-items: baseline;
-      color: pvar(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
-      .video-channel-display-name {
+    .video-channel-display-name {
-        font-weight: $font-semibold;
+      font-weight: $font-semibold;
-        font-size: 18px;
+      font-size: 18px;
-      }
+    }
-      .video-channel-name {
+    .video-channel-name {
-        font-size: 14px;
+      font-size: 14px;
-        color: $grey-actor-name;
+      color: $grey-actor-name;
-        margin-left: 5px;
+      margin-left: 5px;
-      }
    }
  }
+}
-  .actor-owner {
+.actor-owner {
-    @include actor-owner;
+  @include actor-owner;
-    margin-top: 0;
+  margin-top: 0;
-  }
 }
 .video-subscriptions-header {
@@ -50,32 +50,22 @@ input[type=text] {
 }
 @media screen and (max-width: $small-view) {
-  .video-channel {
+  .video-subscriptions-header input[type=text] {
-    .video-channel-info {
+    width: 100% !important;
-      padding-bottom: 10px;
-      text-align: center;
-      .video-channel-names {
-        flex-direction: column;
-        align-items: center !important;
-        margin: auto;
-      }
-    }
-    img {
-      margin-right: 0;
-    }
  }
-}
-@media screen and (max-width: $mobile-view) {
+  .video-channel-info {
-  .video-subscriptions-header {
+    padding-bottom: 10px;
-    flex-direction: column;
+    text-align: center;
-    input[type=text] {
+    .video-channel-names {
-      width: 100% !important;
+      flex-direction: column;
+      align-items: center !important;
+      margin: auto;
    }
  }
-}
+  img {
+    margin-right: 0;
+  }
+}
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
index a97b2b4fb..e7e3c17b3 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
@@ -1,6 +1,6 @@
-<div class="row">
+<div class="root">
-  <div class="playlist-info col-xs-12 col-md-5 col-xl-3">
+  <div class="playlist-info">
    <my-video-playlist-miniature
      *ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true"
      [displayDescription]="true" [displayPrivacy]="true"
@@ -20,7 +20,7 @@
  </div>
-  <div class="playlist-elements col-xs-12 col-md-7 col-xl-9">
+  <div class="playlist-elements">
    <div class="no-results" *ngIf="pagination.totalItems === 0">
      <div i18n>No videos in this playlist.</div>
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
index de7e1993f..0c68dedf6 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
@@ -2,21 +2,25 @@
 @import '_mixins';
 @import '_miniature';
+.root {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
 .playlist-info {
-  background-color: pvar(--submenuColor);
+  grid-column: 1;
-  margin-left: -$not-expanded-horizontal-margins;
+  background-color: pvar(--submenuBackgroundColor);
+  margin-left: calc(#{pvar(--horizontalMarginContent)} * -1);
  margin-top: -$sub-menu-margin-bottom;
-  padding: 10px;
+  padding: 15px;
  display: flex;
  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
  /* fix ellipsis dots background color */
  ::ng-deep .miniature-name::after {
-    background-color: pvar(--submenuColor) !important;
+    background-color: pvar(--submenuBackgroundColor) !important;
  }
 }
@@ -59,15 +63,35 @@
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
-@media screen and (max-width: $small-view) {
+.playlist-elements {
+  grid-column: 2;
+}
+my-video-playlist-miniature {
+  width: $video-thumbnail-width;
+}
+@include on-small-main-col {
+  my-video-playlist-miniature {
+    width: $video-thumbnail-medium-width;
+  }
+}
+@include on-mobile-main-col {
+  .root {
+    display: block;
+  }
  .playlist-info {
-    width: 100vw;
+    width: calc(100% + (2 * var(--horizontalMarginContent)));
    padding-top: 20px;
-    margin-left: calc(#{var(--expanded-horizontal-margin-content)} * -1);
+    margin-bottom: 10px;
  }
-  .playlist-elements {
+  my-video-playlist-miniature,
-    padding: 0 !important;
+  .playlist-buttons {
+    margin-left: auto;
+    margin-right: auto;
  }
  ::ng-deep my-video-playlist-element-miniature {
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
index afcf6a084..b88ea3db7 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
@@ -1,8 +1,6 @@
 <h1>
-  <span>
+  <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
-    <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
-    <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
-  </span>
 </h1>
 <div class="video-playlists-header d-flex justify-content-between">
@@ -21,10 +19,10 @@
 <div class="video-playlists" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
  <div *ngFor="let playlist of videoPlaylists" class="video-playlist">
-    <div class="miniature-wrapper">
+    <my-video-playlist-miniature
-      <my-video-playlist-miniature [playlist]="playlist" [toManage]="true" [displayChannel]="true" [displayDescription]="true" [displayPrivacy]="true"
+      [playlist]="playlist" [toManage]="true" [displayChannel]="true"
-      ></my-video-playlist-miniature>
+      [displayDescription]="true" [displayPrivacy]="true" [displayAsRow]="true"
-    </div>
+    ></my-video-playlist-miniature>
    <div *ngIf="isRegularPlaylist(playlist)" class="video-playlist-buttons">
      <my-delete-button label (click)="deleteVideoPlaylist(playlist)"></my-delete-button>
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
index 2b7c88246..94187efd4 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
@@ -1,6 +1,10 @@
 @import '_variables';
 @import '_mixins';
+h1 {
+  display: flex;
+}
 .create-button {
  @include create-button;
 }
@@ -9,64 +13,45 @@ input[type=text] {
  @include peertube-input-text(300px);
 }
-::ng-deep .action-button {
-  &.action-button-delete {
-    margin-right: 10px;
-  }
-}
 .video-playlist {
-  @include row-blocks;
+  @include row-blocks($column-responsive: false);
+}
-  .miniature-wrapper {
-    flex-grow: 1;
-    ::ng-deep .miniature {
-      display: flex;
-      .miniature-info {
-        margin-left: 10px;
-        width: auto;
-      }
-    }
-  }
-  .video-playlist-buttons {
+.video-playlist-buttons {
-    min-width: 190px;
+  display: flex;
-    height: max-content;
+  margin-left: 10px;
-  }
+  align-self: flex-end;
 }
 .video-playlists-header {
  margin-bottom: 30px;
 }
-@media screen and (max-width: $small-view) {
+my-video-playlist-miniature {
+  display: block;
+  flex-grow: 1;
+}
+my-delete-button {
+  margin-right: 10px;
+}
+@include on-small-main-col {
  .video-playlists-header {
    text-align: center;
  }
  .video-playlist {
+    flex-wrap: wrap;
-    .video-playlist-buttons {
-      margin-top: 10px;
-    }
  }
-  my-video-playlist-miniature ::ng-deep .miniature {
+  .video-playlist-buttons {
-    flex-direction: column;
+    margin-top: 10px;
+    margin-left: auto;
-    .miniature-info {
-      margin-left: 0 !important;
-    }
-    .miniature-name {
-      max-width: $video-thumbnail-width;
-    }
  }
 }
-@media screen and (max-width: $mobile-view) {
+@include on-mobile-main-col {
  .video-playlists-header {
    flex-direction: column;
@@ -75,4 +60,8 @@ input[type=text] {
      margin-bottom: 12px;
    }
  }
+  .action-button {
+    margin-left: 0;
+  }
 }
diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
index c7c5a0b69..955fd4884 100644
--- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
@@ -19,14 +19,13 @@
  <div class="modal-footer">
    <div class="form-group inputs">
      <input
-        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
        (click)="dismiss()" (key.enter)="dismiss()"
      >
      <input
-        type="submit" i18n-value value="Submit" class="action-button-submit"
+        type="submit" i18n-value value="Submit" class="peertube-button orange-button"
-        [disabled]="!form.valid"
+        [disabled]="!form.valid" (click)="close()"
-        (click)="close()"
      />
    </div>
  </div>
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html
index 5fa4c02ec..e9f436378 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.html
+++ b/client/src/app/+my-library/my-videos/my-videos.component.html
@@ -25,6 +25,17 @@
    <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 class="peertube-select-container peertube-select-button">
+    <select [(ngModel)]="sort" (ngModelChange)="onChangeSortColumn()" class="form-control">
+      <option value="undefined" disabled>Sort by</option>
+      <option value="-publishedAt" i18n>Last published first</option>
+      <option value="-createdAt" i18n>Last created first</option>
+      <option value="-views" i18n>Most viewed first</option>
+      <option value="-likes" i18n>Most liked first</option>
+      <option value="-duration" i18n>Longest first</option>
+    </select>
+  </div>
 </div>
 <my-videos-selection
@@ -34,7 +45,6 @@
  [miniatureDisplayOptions]="miniatureDisplayOptions"
  [titlePage]="titlePage"
  [getVideosObservableFunction]="getVideosObservableFunction"
-  [ownerDisplayType]="ownerDisplayType"
  [user]="user"
  #videosSelection
 >
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss
index 59fc5fe80..aaf21126b 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.scss
+++ b/client/src/app/+my-library/my-videos/my-videos.component.scss
@@ -5,6 +5,11 @@ input[type=text] {
  @include peertube-input-text(300px);
 }
+.peertube-select-container {
+  @include peertube-select-container(auto);
+  margin-left: 0.5rem;
+}
 h1 {
  display: flex;
  justify-content: space-between;
@@ -32,36 +37,9 @@ h1 {
  }
 }
-::ng-deep {
-  .video {
-    flex-wrap: wrap;
-  }
-  .action-button span {
-    white-space: nowrap;
-  }
-  .video-miniature {
-    &.display-as-row {
-      // width: min-content !important;
-      width: 100% !important;
-      .video-bottom .video-miniature-information {
-        width: max-content !important;
-        min-width: unset !important;
-      }
-    }
-    .video-bottom {
-      max-width: 350px;
-    }
-  }
-}
 .action-button {
  display: flex;
-  margin-left: 55px;
+  margin-left: 10px;
-  margin-top: 10px;
  align-self: flex-end;
 }
@@ -69,7 +47,7 @@ my-edit-button {
  margin-right: 10px;
 }
-@media screen and (max-width: $small-view) {
+@include on-small-main-col {
  h1 {
    flex-direction: column;
@@ -80,59 +58,25 @@ my-edit-button {
  }
  .action-button {
-    flex-direction: column;
+    margin-top: 10px;
-    align-self: center;
+    margin-left: auto;
-    align-items: center;
-    margin-left: 0px;
-  }
-  my-edit-button {
-    margin: 15px 0 5px 0;
-    width: 100%;
-    text-align: center;
-    ::ng-deep {
-      .action-button {
-        /* same width than a.video-thumbnail */
-        width: $video-thumbnail-width;
-      }
-    }
-  }
-  ::ng-deep {
-    .video-miniature {
-      align-items: center;
-      .video-bottom,
-      .video-bottom .video-miniature-information {
-        /* same width than a.video-thumbnail */
-        max-width: $video-thumbnail-width !important;
-      }
-    }
  }
 }
-// Adapt my-video-miniature on small screens with menu
+@include on-mobile-main-col {
-@media screen and (min-width: $small-view) and (max-width: #{breakpoint(lg) + ($not-expanded-horizontal-margins / 3) * 2}) {
-  :host-context(.main-col:not(.expanded)) {
-    ::ng-deep {
-      .video-miniature {
-        flex-direction: column;
-        .video-miniature-name {
-          max-width: $video-thumbnail-width;
-        }
-      }
-    }
-  }
-}
-@media screen and (max-width: $mobile-view) {
  .videos-header {
    flex-direction: column;
    input[type=text] {
-      width: 100% !important;
+      width: 100%;
+      margin-bottom: 12px;
+    }
+    .peertube-select-container {
+      margin-left: 0;
    }
  }
+  .action-button {
+    margin-left: 0;
+  }
 }
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts
index 6a2a62608..356e158d6 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.ts
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@@ -2,12 +2,12 @@ import { concat, Observable, Subject } from 'rxjs'
 import { debounceTime, tap, toArray } from 'rxjs/operators'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User, UserService } from '@app/core'
+import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User } from '@app/core'
 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 import { immutableAssign } from '@app/helpers'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { LiveStreamInformationComponent } from '@app/shared/shared-video-live'
-import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
+import { MiniatureDisplayOptions, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
 import { VideoSortField } from '@shared/models'
 import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component'
@@ -36,7 +36,6 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
    state: true,
    blacklistInfo: true
  }
-  ownerDisplayType: OwnerDisplayType = 'videoChannel'
  videoActions: DropdownAction<{ video: Video }>[] = []
@@ -44,6 +43,7 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
  videosSearch: string
  videosSearchChanged = new Subject<string>()
  getVideosObservableFunction = this.getVideosObservable.bind(this)
+  sort: VideoSortField = '-publishedAt'
  user: User
@@ -81,6 +81,10 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
    this.videosSearchChanged.next()
  }
+  onChangeSortColumn () {
+    this.videosSelection.reloadVideos()
+  }
  disableForReuse () {
    this.videosSelection.disableForReuse()
  }
@@ -89,10 +93,10 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
    this.videosSelection.enabledForReuse()
  }
-  getVideosObservable (page: number, sort: VideoSortField) {
+  getVideosObservable (page: number) {
    const newPagination = immutableAssign(this.pagination, { currentPage: page })
-    return this.videoService.getMyVideos(newPagination, sort, this.videosSearch)
+    return this.videoService.getMyVideos(newPagination, this.sort, this.videosSearch)
      .pipe(
        tap(res => this.pagination.totalItems = res.total)
      )
diff --git a/client/src/app/+page-not-found/page-not-found.component.html b/client/src/app/+page-not-found/page-not-found.component.html
index efd3cc9f9..1e25e4495 100644
--- a/client/src/app/+page-not-found/page-not-found.component.html
+++ b/client/src/app/+page-not-found/page-not-found.component.html
@@ -3,8 +3,9 @@
    <strong>{{ status }}.</strong>
    <span class="ml-1 text-muted" i18n>That's an error.</span>
-    <div class="text mt-4" i18n>
+    <div class="text mt-4">
-      We couldn't find any {{ getRessourceName() }} tied to the URL {{ pathname }} you were looking for.
+      <ng-container *ngIf="type === 'video'" i18n>We couldn't find any video tied to the URL {{ pathname }} you were looking for.</ng-container>
+      <ng-container *ngIf="type !== 'video'" i18n>We couldn't find any resource tied to the URL {{ pathname }} you were looking for.</ng-container>
    </div>
    <div class="text-muted mt-4">
@@ -12,7 +13,10 @@
      <ul>
        <li i18n>You may have used an outdated or broken link</li>
-        <li i18n>The {{ getRessourceName() }} may have been moved or deleted</li>
+        <li>
+          <ng-container *ngIf="type === 'video'" i18n>The video may have been moved or deleted</ng-container>
+          <ng-container *ngIf="type !== 'video'" i18n>The resource may have been moved or deleted</ng-container>
+        </li>
        <li i18n>You may have typed the address or URL incorrectly</li>
      </ul>
    </div>
@@ -22,8 +26,9 @@
    <strong>{{ status }}.</strong>
    <span class="ml-1 text-muted" i18n>You are not authorized here.</span>
-    <div class="text mt-4" i18n>
+    <div class="text mt-4">
-      You might need to check your account is allowed by the {{ getRessourceName() }} or instance owner.
+      <ng-container *ngIf="type === 'video'" i18n>You might need to check your account is allowed by the video or instance owner.</ng-container>
+      <ng-container *ngIf="type !== 'video'" i18n>You might need to check your account is allowed by the resource or instance owner.</ng-container>
    </div>
  </div>
diff --git a/client/src/app/+page-not-found/page-not-found.component.ts b/client/src/app/+page-not-found/page-not-found.component.ts
index 9302201ea..94b4c8d27 100644
--- a/client/src/app/+page-not-found/page-not-found.component.ts
+++ b/client/src/app/+page-not-found/page-not-found.component.ts
@@ -32,15 +32,6 @@ export class PageNotFoundComponent implements OnInit {
    return window.location.pathname
  }
-  getRessourceName () {
-    switch (this.type) {
-      case 'video':
-        return $localize`video`
-      default:
-        return $localize`ressource`
-    }
-  }
  getMascotName () {
    switch (this.status) {
      case HttpStatusCode.I_AM_A_TEAPOT_418:
diff --git a/client/src/app/+search/search.component.html b/client/src/app/+search/search.component.html
index 84be4fb14..65d4b6ecd 100644
--- a/client/src/app/+search/search.component.html
+++ b/client/src/app/+search/search.component.html
@@ -2,14 +2,12 @@
  <div class="results-header">
    <div class="first-line">
      <div class="results-counter" *ngIf="pagination.totalItems">
-        <span i18n>{{ pagination.totalItems | myNumberFormatter }} {pagination.totalItems, plural, =1 {result} other {results}} </span>
+        <span class="mr-1" i18n>{{ pagination.totalItems | myNumberFormatter }} {pagination.totalItems, plural, =1 {result} other {results}}</span>
-        <span i18n *ngIf="advancedSearch.searchTarget === 'local'">on this instance</span>
+        <span class="mr-1" i18n *ngIf="advancedSearch.searchTarget === 'local'">on this instance</span>
-        <span i18n *ngIf="advancedSearch.searchTarget === 'search-index'">on the vidiverse</span>
+        <span class="mr-1" i18n *ngIf="advancedSearch.searchTarget === 'search-index'">on the vidiverse</span>
-        <span *ngIf="currentSearch" i18n>
+        <span *ngIf="currentSearch" i18n>for <span class="search-value">{{ currentSearch }}</span></span>
-          for <span class="search-value">{{ currentSearch }}</span>
-        </span>
      </div>
      <div
@@ -35,11 +33,11 @@
  <ng-container *ngFor="let result of results">
    <div *ngIf="isVideoChannel(result)" class="entry video-channel">
-      <a *ngIf="!isExternalChannelUrl()" [routerLink]="getChannelUrl(result)">
+      <a class="link-avatar" *ngIf="!isExternalChannelUrl()" [routerLink]="getChannelUrl(result)">
        <img [src]="result.avatarUrl" alt="Avatar" />
      </a>
-      <a *ngIf="isExternalChannelUrl()" [href]="getChannelUrl(result)" target="_blank">
+      <a class="link-avatar" *ngIf="isExternalChannelUrl()" [href]="getChannelUrl(result)" target="_blank">
        <img [src]="result.avatarUrl" alt="Avatar" />
      </a>
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
index 64927fa4b..91c8272d7 100644
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@@ -1,159 +1,122 @@
 @import '_variables';
 @import '_mixins';
+@mixin build-channel-img-size ($video-img-width) {
+  $image-size: min(130px, $video-img-width);
+  $margin-size: ($video-img-width - $image-size) / 2; // So we have the same width than the video miniature
+  @include channel-avatar($image-size);
+  margin: 0 $margin-size 0 $margin-size;
+}
 .search-result {
  padding: 40px;
+}
-  .results-header {
+.results-header {
-    font-size: 16px;
+  font-size: 16px;
-    padding-bottom: 20px;
+  padding-bottom: 20px;
-    margin-bottom: 30px;
+  margin-bottom: 30px;
-    border-bottom: 1px solid #DADADA;
+  border-bottom: 1px solid #DADADA;
-    .first-line {
+  .first-line {
-      display: flex;
+    display: flex;
-      flex-direction: row;
+    flex-direction: row;
-      .results-counter {
+    .results-counter {
-        flex-grow: 1;
+      flex-grow: 1;
-        .search-value {
+      .search-value {
-          font-weight: $font-semibold;
+        font-weight: $font-semibold;
-        }
      }
+    }
-      .results-filter-button {
+    .results-filter-button {
-        cursor: pointer;
+      cursor: pointer;
-        .icon.icon-filter {
+      .icon.icon-filter {
-          @include icon(20px);
+        @include icon(20px);
-          position: relative;
+        position: relative;
-          top: -1px;
+        top: -1px;
-          margin-right: 5px;
+        margin-right: 5px;
-          background-image: url('../../assets/images/feather/filter.svg');
+        background-image: url('../../assets/images/feather/filter.svg');
-        }
      }
    }
  }
+}
-  .entry {
+.entry {
-    display: flex;
+  display: flex;
-    min-height: 130px;
+  margin-bottom: 40px;
-    padding-bottom: 20px;
+  max-width: 800px;
-    margin-bottom: 20px;
+}
-    &.video-channel {
+.video-channel {
-      img {
+  img {
-        $image-size: 130px;
+    @include build-channel-img-size($video-thumbnail-width);
-        $margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature
+  }
+}
-        @include avatar($image-size);
+.video-channel-info {
+  flex-grow: 1;
+  margin: 0 10px;
+  width: fit-content;
+}
-        margin: 0 ($margin-size + 10) 0 $margin-size;
+.video-channel-names {
-      }
+  @include disable-default-a-behaviour;
-      .video-channel-info {
+  display: flex;
-        flex-grow: 1;
+  align-items: baseline;
-        width: fit-content;
+  color: pvar(--mainForegroundColor);
+  width: fit-content;
-        .video-channel-names {
-          @include disable-default-a-behaviour;
-          display: flex;
-          align-items: baseline;
-          color: pvar(--mainForegroundColor);
-          width: fit-content;
-          .video-channel-display-name {
-            font-weight: $font-semibold;
-            font-size: 18px;
-          }
-          .video-channel-name {
-            font-size: 14px;
-            color: $grey-actor-name;
-            margin-left: 5px;
-          }
-        }
-      }
-    }
-  }
 }
-@media screen and (min-width: $small-view) and (max-width: breakpoint(xl)) {
+.video-channel-display-name {
-  .video-channel-info .video-channel-names {
+  font-weight: $font-semibold;
-    flex-direction: column !important;
+  font-size: $video-miniature-row-name-font-size;
+}
-    .video-channel-name {
+.video-channel-name {
-      @include ellipsis; // Ellipsis and max-width on channel-name to not break screen
+  font-size: $video-miniature-row-info-font-size;
+  color: pvar(--greyForegroundColor);
+  margin-left: 5px;
+}
-      max-width: 250px;
+// Use the same breakpoints than in video-miniature
-      margin-left: 0 !important;
+@include on-small-main-col {
-    }
+  .video-channel {
-  }
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
-  :host-context(.main-col:not(.expanded)) {
+    .link-avatar {
-    // Override the min-width: 500px to not break screen
+      grid-column: 1;
-    ::ng-deep .video-miniature-information {
+      grid-row: 1 / -1;
-      min-width: 300px !important;
    }
-  }
-}
-@media screen and (min-width: $small-view) and (max-width: breakpoint(lg)) {
+    img {
-  :host-context(.main-col:not(.expanded)) {
+      @include build-channel-img-size($video-thumbnail-medium-width);
-    .video-channel-info .video-channel-names {
-      .video-channel-name {
-        max-width: 160px;
-      }
    }
+  }
-    // Override the min-width: 500px to not break screen
+  .video-channel-info {
-    ::ng-deep .video-miniature-information {
+    grid-column: 2;
-      min-width: $video-thumbnail-width !important;
+    grid-row: 1;
-    }
  }
-  :host-context(.expanded) {
+  my-subscribe-button {
-    // Override the min-width: 500px to not break screen
+    grid-column: 2;
-    ::ng-deep .video-miniature-information {
+    grid-row: 2;
-      min-width: 300px !important;
+    align-self: end;
-    }
  }
 }
-@media screen and (max-width: $small-view) {
+@include on-mobile-main-col {
-  .search-result {
+  .video-channel img {
-    .entry.video-channel,
+    @include build-channel-img-size($video-thumbnail-small-width);
-    .entry.video {
-      flex-direction: column;
-      height: auto;
-      justify-content: center;
-      align-items: center;
-      text-align: center;
-      img {
-        margin: 0;
-      }
-      img {
-        margin: 0;
-      }
-      .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;
-      }
-    }
  }
 }
@@ -164,28 +127,13 @@
    .results-header {
      font-size: 15px !important;
    }
+  }
-    .entry {
+  .video-channel-display-name {
-      &.video {
+    font-size: $video-miniature-row-mobile-name-font-size;
-        .video-info-name,
+  }
-        .video-info-account {
-          margin: auto;
+  .video-channel-name {
-        }
+    font-size: $video-miniature-row-mobile-info-font-size;
-        my-video-thumbnail {
-          margin-right: 0 !important;
-          ::ng-deep .video-thumbnail {
-            width: 100%;
-            height: auto;
-            img {
-              width: 100%;
-              height: auto;
-            }
-          }
-        }
-      }
-    }
  }
 }
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
deleted file mode 100644
index 8dff8ba91..000000000
--- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<div class="margin-content">
-  <div *ngIf="videoChannel" class="row no-gutters">
-    <div class="description col-md-6 col-sm-12 pr-2">
-      <div class="block">
-        <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 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="content">Created {{ videoChannel.createdAt | date }}</div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.scss b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.scss
deleted file mode 100644
index 5bcd4b561..000000000
--- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@import '_variables';
-@import '_mixins';
-.block {
-  margin-bottom: 40px;
-  .small-title {
-    @include in-content-small-title;
-    margin-bottom: 20px;
-  }
-}
diff --git a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts
deleted file mode 100644
index 537c7d08e..000000000
--- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Subscription } from 'rxjs'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { MarkdownService } from '@app/core'
-import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
-@Component({
-  selector: 'my-video-channel-about',
-  templateUrl: './video-channel-about.component.html',
-  styleUrls: [ './video-channel-about.component.scss' ]
-})
-export class VideoChannelAboutComponent implements OnInit, OnDestroy {
-  videoChannel: VideoChannel
-  descriptionHTML = ''
-  supportHTML = ''
-  private videoChannelSub: Subscription
-  constructor (
-    private videoChannelService: VideoChannelService,
-    private markdownService: MarkdownService
-  ) { }
-  ngOnInit () {
-    // Parent get the video channel for us
-    this.videoChannelSub = this.videoChannelService.videoChannelLoaded
-      .subscribe(async videoChannel => {
-        this.videoChannel = videoChannel
-        this.descriptionHTML = await this.markdownService.textMarkdownToHTML(this.videoChannel.description)
-        this.supportHTML = await this.markdownService.enhancedMarkdownToHTML(this.videoChannel.support)
-      })
-  }
-  ngOnDestroy () {
-    if (this.videoChannelSub) this.videoChannelSub.unsubscribe()
-  }
-  getVideoChannelDescription () {
-    if (this.descriptionHTML) return this.descriptionHTML
-    return $localize`No description`
-  }
-}
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
index 03770ceec..b69d1682a 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
@@ -1,13 +1,13 @@
 <div class="margin-content">
-  <div i18n class="title-page title-page-single">
+  <div i18n class="title-page title-page-single" *ngIf="pagination.totalItems">
-    Created {{ pagination.totalItems }} playlists
+    Created {pagination.totalItems, plural, =1 {1 playlist} other {{{ pagination.totalItems }} playlists}}
  </div>
  <div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>
-  <div class="video-playlist" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()">
+  <div class="playlists" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()">
-    <div *ngFor="let playlist of videoPlaylists" class="playlist-miniature-container">
+    <div *ngFor="let playlist of videoPlaylists" class="playlist-wrapper">
-      <my-video-playlist-miniature [playlist]="playlist" [toManage]="false"></my-video-playlist-miniature>
+      <my-video-playlist-miniature [playlist]="playlist" [toManage]="false" [displayAsRow]="displayAsRow()"></my-video-playlist-miniature>
    </div>
  </div>
 </div>
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
index cb2931858..acd2e409e 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
@@ -1,14 +1,32 @@
-.title-page {
+@import '_variables';
-  margin-top: 0;
+@import '_mixins';
-}
+@import '_miniature';
-.video-playlist {
+.playlists {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
-  .playlist-miniature-container {
+  .playlist-wrapper {
    margin-right: 15px;
    margin-bottom: 30px;
  }
 }
+.margin-content {
+  @include grid-videos-miniature-layout;
+}
+@media screen and (max-width: $mobile-view) {
+  .title-page {
+    display: block;
+    text-align: center;
+  }
+  .playlists {
+    justify-content: left;
+    margin-left: pvar(--horizontalMarginContent) !important;
+    margin-right: pvar(--horizontalMarginContent) !important;
+  }
+}
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
index 8b507c626..14465bb8d 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
@@ -1,6 +1,6 @@
 import { Subject, Subscription } from 'rxjs'
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ComponentPagination, hasMoreItems } from '@app/core'
+import { ComponentPagination, hasMoreItems, ScreenService } from '@app/core'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
@@ -25,7 +25,8 @@ export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
  constructor (
    private videoPlaylistService: VideoPlaylistService,
-    private videoChannelService: VideoChannelService
+    private videoChannelService: VideoChannelService,
+    private screenService: ScreenService
  ) {}
  ngOnInit () {
@@ -48,6 +49,10 @@ export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
    this.loadVideoPlaylists()
  }
+  displayAsRow () {
+    return this.screenService.isInMobileView()
+  }
  private loadVideoPlaylists () {
    this.videoPlaylistService.listChannelPlaylists(this.videoChannel, this.pagination)
        .subscribe(res => {
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 803651505..d83fc1324 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
@@ -5,7 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
 import { immutableAssign } from '@app/helpers'
 import { VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
-import { AbstractVideoList } from '@app/shared/shared-video-miniature'
+import { AbstractVideoList, MiniatureDisplayOptions } from '@app/shared/shared-video-miniature'
 import { VideoFilter } from '@shared/models'
 @Component({
@@ -16,12 +16,24 @@ import { VideoFilter } from '@shared/models'
  ]
 })
 export class VideoChannelVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
+  // No value because we don't want a page title
  titlePage: string
  loadOnInit = false
  loadUserVideoPreferences = true
  filter: VideoFilter = null
+  displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: false,
+    avatar: false,
+    privacyLabel: true,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
  private videoChannel: VideoChannel
  private videoChannelSub: Subscription
@@ -83,13 +95,6 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
    return this.videoService
               .getVideoChannelVideos(options)
-               .pipe(
-                 tap(({ total }) => {
-                   this.titlePage = total === 1
-                    ? $localize`Published 1 video`
-                    : $localize`Published ${total} videos`
-                 })
-               )
  }
  generateSyndicationList () {
@@ -101,4 +106,8 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
    this.reloadVideos()
  }
+  displayAsRow () {
+    return this.screenService.isInMobileView()
+  }
 }
diff --git a/client/src/app/+video-channels/video-channels-routing.module.ts b/client/src/app/+video-channels/video-channels-routing.module.ts
index f8c32f14e..fcaad8934 100644
--- a/client/src/app/+video-channels/video-channels-routing.module.ts
+++ b/client/src/app/+video-channels/video-channels-routing.module.ts
@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { MetaGuard } from '@ngx-meta/core'
-import { VideoChannelAboutComponent } from './video-channel-about/video-channel-about.component'
 import { VideoChannelPlaylistsComponent } from './video-channel-playlists/video-channel-playlists.component'
 import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component'
 import { VideoChannelsComponent } from './video-channels.component'
@@ -38,15 +37,6 @@ const videoChannelsRoutes: Routes = [
            title: $localize`Video channel playlists`
          }
        }
-      },
-      {
-        path: 'about',
-        component: VideoChannelAboutComponent,
-        data: {
-          meta: {
-            title: $localize`About video channel`
-          }
-        }
      }
    ]
  }
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 4b0d12b6e..9308d5bb6 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -1,50 +1,123 @@
-<div *ngIf="videoChannel" class="row">
+<div class="root" *ngIf="videoChannel">
-  <div class="sub-menu">
+  <div class="banner" *ngIf="videoChannel.bannerUrl">
+    <img [src]="videoChannel.bannerUrl" alt="Channel banner">
-    <div class="actor">
+  </div>
-      <img [src]="videoChannel.avatarUrl" alt="Avatar" />
+  <div class="channel-info">
-      <div class="actor-info">
-        <div class="actor-names">
+    <ng-template #buttonsTemplate>
-          <div class="actor-display-name">{{ videoChannel.displayName }}</div>
+        <a *ngIf="isManageable()" [routerLink]="[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class="peertube-button-link orange-button" i18n>
-          <div class="actor-name">
+          Manage channel
-            <span>{{ videoChannel.nameWithHost }}</span>
+        </a>
-            <button [cdkCopyToClipboard]="videoChannel.nameWithHostForced" (click)="activateCopiedMessage()"
-                    class="btn btn-outline-secondary btn-sm copy-button"
+        <my-subscribe-button *ngIf="!isManageable()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
-            >
-              <span class="glyphicon glyphicon-copy"></span>
+        <button *ngIf="videoChannel.support" (click)="showSupportModal()" class="support-button peertube-button orange-button-inverted">
-            </button>
+          <my-global-icon iconName="support" aria-hidden="true"></my-global-icon>
+          <span class="icon-text" i18n>Support</span>
+        </button>
+    </ng-template>
+    <ng-template #ownerTemplate>
+      <div class="owner-block">
+        <div class="section-label" i18n>OWNER ACCOUNT</div>
+        <div class="avatar-row">
+          <my-account-avatar [account]="videoChannel.ownerAccount" [internalHref]="getAccountUrl()" size="120"></my-account-avatar>
+          <div class="actor-info">
+            <h4>
+              <a [routerLink]="getAccountUrl()" title="View account" i18n-title>{{ videoChannel.ownerAccount.displayName }}</a>
+            </h4>
+            <div class="actor-handle">@{{ videoChannel.ownerBy }}</div>
          </div>
        </div>
-        <div class="right-buttons">
+        <div class="owner-description">
-          <a *ngIf="isChannelManageable && !isInSmallView" [routerLink]="[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class="btn btn-outline-tertiary mr-2" i18n>
+          <div class="description-html" [innerHTML]="ownerDescriptionHTML"></div>
-            Manage channel
-          </a>
-          <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
        </div>
-        <div class="actor-lower">
+        <a class="view-account short" [routerLink]="getAccountUrl()" i18n>
-          <div class="actor-followers" i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
+          View account
+        </a>
+        <a class="view-account complete" [routerLink]="getAccountUrl()" i18n>
+          View owner account
+        </a>
+      </div>
+    </ng-template>
+    <div class="channel-avatar-row">
+      <img class="channel-avatar" [src]="videoChannel.avatarUrl" alt="Avatar" />
+      <div>
+        <div class="section-label" i18n>VIDEO CHANNEL</div>
+        <div class="actor-info">
+          <div>
+            <div class="actor-display-name">
+              <h1 i18n-title [title]="'Channel created on ' + (videoChannel.createdAt | date)">{{ videoChannel.displayName }}</h1>
+            </div>
+            <div class="actor-handle">
+              <span>@{{ videoChannel.nameWithHost }}</span>
+              <button [cdkCopyToClipboard]="videoChannel.nameWithHostForced" (click)="activateCopiedMessage()"
+                      class="btn btn-outline-secondary btn-sm copy-button" title="Copy channel handle" i18n-title
+              >
+                <span class="glyphicon glyphicon-duplicate"></span>
+              </button>
+            </div>
-          <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Go the owner account page" class="actor-owner">
+            <div class="actor-counters">
-            <span class="d-inline-flex"><span i18n class="d-none d-sm-block mr-1">Created by</span>{{ videoChannel.ownerBy }}</span>
+              <span i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</span>
-            <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
-          </a>
+              <span class="videos-count" *ngIf="channelVideosCount !== undefined" i18n>
+                {channelVideosCount, plural, =1 {1 videos} other {{{ channelVideosCount }} videos}}
+              </span>
+            </div>
+          </div>
+          <div class="channel-buttons right">
+            <ng-template *ngTemplateOutlet="buttonsTemplate"></ng-template>
+          </div>
        </div>
      </div>
    </div>
-    <div class="links w-100">
+    <div class="channel-description" [ngClass]="{ expanded: channelDescriptionExpanded }">
-      <ng-template #linkTemplate let-item="item">
+      <div class="description-html" [innerHTML]="channelDescriptionHTML"></div>
-        <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
+    </div>
-      </ng-template>
+    <div *ngIf="hasShowMoreDescription()" class="show-more" role="button"
+      (click)="channelDescriptionExpanded = !channelDescriptionExpanded"
+      title="Show the complete description" i18n-title i18n
+    >
+      Show more...
+    </div>
+    <div class="channel-buttons bottom">
+      <ng-template *ngTemplateOutlet="buttonsTemplate"></ng-template>
+    </div>
-      <list-overflow [items]="links" [itemTemplate]="linkTemplate"></list-overflow>
+    <div class="owner-card">
+      <ng-template *ngTemplateOutlet="ownerTemplate"></ng-template>
    </div>
  </div>
-  <div class="margin-content">
+  <div class="bottom-owner">
-    <router-outlet></router-outlet>
+    <ng-template *ngTemplateOutlet="ownerTemplate"></ng-template>
  </div>
+  <div class="links">
+    <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>
+  <router-outlet></router-outlet>
 </div>
+<my-support-modal #supportModal [videoChannel]="videoChannel"></my-support-modal>
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 22f21dcc6..e946707ef 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -1,89 +1,303 @@
-// 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';
+@import '_actor';
+@import '_miniature';
-.sub-menu {
+.root {
-  @include sub-menu-with-actor;
+  --myGlobalTopPadding: 60px;
+  --myChannelImgMargin: 30px;
+  --myFontSize: 16px;
+  --myGreyChannelFontSize: 16px;
+  --myGreyOwnerFontSize: 14px;
+}
-  .actor, .actor-info {
+.banner {
-    width: 100%;
+  @include block-ratio('img', $banner-inverted-ratio);
-  }
+}
-  .actor-info {
+.section-label {
-    display: grid !important;
+  @include section-label-responsive;
-    grid-template-columns: 1fr auto;
+}
-    grid-template-rows: 1fr auto / 1fr auto;
-    grid-template-areas: "name buttons" "lower buttons";
-    @include media-breakpoint-down(lg) {
+.links {
-      grid-template-areas: "name name" "lower buttons";
+  @include grid-videos-miniature-margins;
-    }
+}
+.actor-info {
+  min-width: 1px;
+  width: 100%;
+  > h4,
+  > .actor-handle {
+    @include ellipsis;
  }
+}
+.channel-info {
+  @include grid-videos-miniature-margins(false, 15px);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
-  .actor-names {
+  background-color: pvar(--channelBackgroundColor);
-    grid-area: name;
+  margin-bottom: 45px;
+  padding-top: var(--myGlobalTopPadding);
+  font-size: var(--myFontSize);
+}
+.channel-avatar-row {
+  @include avatar-row-responsive(var(--myChannelImgMargin), var(--myGreyChannelFontSize));
+}
+.support-button {
+  @include button-with-icon(21px, 0, -1px);
+}
+.channel-description {
+  grid-column: 1;
+  word-break: break-word;
+  padding-bottom: var(--myGlobalTopPadding);
+}
+.show-more {
+  @include show-more-description;
+  display: none;
+}
+.channel-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  > *:not(:last-child) {
+    margin-right: 15px;
  }
+}
+.channel-buttons.right {
+  margin-left: 45px;
+}
+// Only used by mobile
+.channel-buttons.bottom {
+  display: none;
+}
+.owner-card {
+  margin-left: 105px;
+  grid-column: 2;
+  // Takes all the column
+  grid-row: 1 / 3;
+  place-self: end;
+}
+// Only used on mobile
+.bottom-owner {
+  display: none;
+}
+.owner-block {
+  background-color: pvar(--mainBackgroundColor);
+  padding: 30px;
+  width: 300px;
+  font-size: var(--myFontSize);
+  .avatar-row {
+    display: flex;
+    margin-bottom: 15px;
-  .actor-name {
+    img {
-    flex-grow: 1;
+      @include avatar(48px);
+    }
+    .actor-info {
+      margin-left: 15px;
+    }
+    h4 {
+      font-size: 18px;
+      margin: 0;
+      a {
+        color: pvar(--mainForegroundColor);
+      }
+    }
-    .copy-button {
+    .actor-handle {
-      border: none;
+      font-size: var(--myGreyOwnerFontSize);
-      padding: 5px;
+      color: pvar(--greyForegroundColor);
-      margin-top: -2px;
    }
  }
+  .owner-description {
+    max-height: 140px;
+    word-break: break-word;
+    @include fade-text(120px, pvar(--mainBackgroundColor));
+  }
 }
-.margin-content {
+.view-account.short {
-  // margin-content is required, but child views have their own margins
+  @include peertube-button-link;
-  // that match views outside the scope of accounts, so we only align
+  @include orange-button-inverted;
-  // them with the margins of .sub-menu when required.
-  margin: 0;
+  margin-top: 30px;
 }
-.right-buttons {
+.view-account.complete {
-  display: flex;
+  display: none;
-  height: max-content;
+}
-  margin-left: auto;
-  margin-top: 10px;
+.copy-button {
+  border: none;
+}
-  grid-row: buttons-start / span buttons-end;
+@media screen and (max-width: 1400px) {
-  grid-column: buttons-start;
+  // Takes all the row width
+  .channel-avatar-row {
+    grid-column: 1 / 3;
+  }
+  .owner-card {
+    grid-row: 2;
+    margin-left: 60px;
+  }
+}
-  @include media-breakpoint-down(lg) {
+@media screen and (max-width: 1100px) {
-    flex-flow: column-reverse;
+  .root {
+    --myGlobalTopPadding: 45px;
+    --myChannelImgMargin: 15px;
+  }
+  .channel-info {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
+  }
+  .channel-description:not(.expanded) {
+    max-height: 70px;
+    @include fade-text(30px, pvar(--channelBackgroundColor));
+  }
-    a {
+  .show-more {
-      margin-top: 0.25rem;
+    display: inline-block;
-      margin-right: 0 !important;
+  }
+  .channel-buttons.bottom {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 30px;
+  }
+  .channel-buttons.right {
+    display: none;
+  }
+  .owner-card {
+    display: none;
+  }
+  .bottom-owner {
+    display: block;
+    width: 100%;
+    border-bottom: 2px solid $separator-border-color;
+    padding: var(--myGlobalTopPadding) 45px;
+    margin-bottom: 60px;
+  }
+  .owner-block {
+    display: grid;
+    width: 100%;
+    padding: 0;
+    .avatar-row {
+      grid-column: 1;
+      margin-right: 30px;
+    }
+    .owner-description {
+      grid-column: 2;
+      max-height: 70px;
+      @include fade-text(30px, pvar(--mainBackgroundColor));
+    }
+    .view-account {
+      grid-column: 2;
    }
  }
-  a {
+  .view-account.complete {
-    @include peertube-button-outline;
+    display: block;
-    line-height: 1.8;
+    text-align: right;
+    margin-top: 10px;
+    color: pvar(--mainColor);
  }
-  my-subscribe-button {
+  .view-account.short {
-    height: min-content;
+    display: none;
  }
 }
 @media screen and (max-width: $mobile-view) {
-  .sub-menu {
+  .root {
-    .actor {
+    --myGlobalTopPadding: 15px;
-      flex-direction: column;
+    --myFontSize: 14px;
+    --myGreyChannelFontSize: 13px;
+    --myGreyOwnerFontSize: 13px;
+  }
+  .links {
+    margin: auto !important;
+    width: min-content;
+  }
+  .show-more {
+    margin-bottom: 30px;
+  }
+  .bottom-owner {
+    padding: 15px;
+    margin-bottom: 30px;
-      .actor-info .actor-names {
+    .section-label {
+      display: none;
+    }
+  }
+  .owner-block {
+    display: block;
+    .avatar-row {
+      display: flex;
+      flex-direction: row-reverse;
+      margin: 0;
+      h4 {
+        font-size: 16px;
+      }
+      .actor-info {
+        display: flex;
        flex-direction: column;
-        align-items: normal;
+        align-items: flex-end;
+        justify-content: flex-end;
+        margin-top: -5px;
+      }
+      img {
+        @include channel-avatar(64px);
+        margin: -30px 0 0 15px;
      }
    }
+    .owner-description {
+      display: none;
+    }
  }
 }
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
index bb601e227..41fdb5e79 100644
--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@@ -3,8 +3,9 @@ import { Subscription } from 'rxjs'
 import { catchError, distinctUntilChanged, map, switchMap } from 'rxjs/operators'
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { AuthService, Notifier, RestExtractor, ScreenService } from '@app/core'
+import { AuthService, MarkdownService, Notifier, RestExtractor, ScreenService } from '@app/core'
-import { ListOverflowItem, VideoChannel, VideoChannelService } from '@app/shared/shared-main'
+import { ListOverflowItem, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
+import { SupportModalComponent } from '@app/shared/shared-support-modal'
 import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
@@ -14,12 +15,18 @@ import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 })
 export class VideoChannelsComponent implements OnInit, OnDestroy {
  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
+  @ViewChild('supportModal') supportModal: SupportModalComponent
  videoChannel: VideoChannel
  hotkeys: Hotkey[]
  links: ListOverflowItem[] = []
  isChannelManageable = false
+  channelVideosCount: number
+  ownerDescriptionHTML = ''
+  channelDescriptionHTML = ''
+  channelDescriptionExpanded = false
  private routeSub: Subscription
  constructor (
@@ -27,9 +34,11 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
    private notifier: Notifier,
    private authService: AuthService,
    private videoChannelService: VideoChannelService,
+    private videoService: VideoService,
    private restExtractor: RestExtractor,
    private hotkeysService: HotkeysService,
-    private screenService: ScreenService
+    private screenService: ScreenService,
+    private markdown: MarkdownService
  ) { }
  ngOnInit () {
@@ -43,16 +52,14 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
                            HttpStatusCode.NOT_FOUND_404
                          ]))
                        )
-                        .subscribe(videoChannel => {
+                        .subscribe(async videoChannel => {
+                          this.channelDescriptionHTML = await this.markdown.textMarkdownToHTML(videoChannel.description)
+                          this.ownerDescriptionHTML = await this.markdown.textMarkdownToHTML(videoChannel.ownerAccount.description)
+                          // After the markdown renderer to avoid layout changes
                          this.videoChannel = videoChannel
-                          if (this.authService.isLoggedIn()) {
+                          this.loadChannelVideosCount()
-                            this.authService.userInformationLoaded
-                              .subscribe(() => {
-                                const channelUserId = this.videoChannel.ownerAccount.userId
-                                this.isChannelManageable = channelUserId && channelUserId === this.authService.getUser().id
-                              })
-                          }
                        })
    this.hotkeys = [
@@ -67,8 +74,7 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
    this.links = [
      { label: $localize`VIDEOS`, routerLink: 'videos' },
-      { label: $localize`VIDEO PLAYLISTS`, routerLink: 'video-playlists' },
+      { label: $localize`PLAYLISTS`, routerLink: 'video-playlists' }
-      { label: $localize`ABOUT`, routerLink: 'about' }
    ]
  }
@@ -79,7 +85,7 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
    if (this.isUserLoggedIn()) this.hotkeysService.remove(this.hotkeys)
  }
-  get isInSmallView () {
+  isInSmallView () {
    return this.screenService.isInSmallView()
  }
@@ -87,12 +93,36 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
    return this.authService.isLoggedIn()
  }
-  get isManageable () {
+  isManageable () {
    if (!this.isUserLoggedIn()) return false
-    return this.videoChannel.ownerAccount.userId === this.authService.getUser().id
+    return this.videoChannel?.ownerAccount.userId === this.authService.getUser().id
  }
  activateCopiedMessage () {
    this.notifier.success($localize`Username copied`)
  }
+  hasShowMoreDescription () {
+    return !this.channelDescriptionExpanded && this.channelDescriptionHTML.length > 100
+  }
+  showSupportModal () {
+    this.supportModal.show()
+  }
+  getAccountUrl () {
+    return [ '/accounts', this.videoChannel.ownerBy ]
+  }
+  private loadChannelVideosCount () {
+    this.videoService.getVideoChannelVideos({
+      videoChannel: this.videoChannel,
+      videoPagination: {
+        currentPage: 1,
+        itemsPerPage: 0
+      },
+      sort: '-publishedAt'
+    }).subscribe(res => this.channelVideosCount = res.total)
+  }
 }
diff --git a/client/src/app/+video-channels/video-channels.module.ts b/client/src/app/+video-channels/video-channels.module.ts
index 05236ff85..2e387f401 100644
--- a/client/src/app/+video-channels/video-channels.module.ts
+++ b/client/src/app/+video-channels/video-channels.module.ts
@@ -2,14 +2,15 @@ import { NgModule } from '@angular/core'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
+import { SharedSupportModal } from '@app/shared/shared-support-modal'
 import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription'
 import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
 import { SharedVideoPlaylistModule } from '@app/shared/shared-video-playlist'
-import { VideoChannelAboutComponent } from './video-channel-about/video-channel-about.component'
 import { VideoChannelPlaylistsComponent } from './video-channel-playlists/video-channel-playlists.component'
 import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component'
 import { VideoChannelsRoutingModule } from './video-channels-routing.module'
 import { VideoChannelsComponent } from './video-channels.component'
+import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
 @NgModule({
  imports: [
@@ -20,13 +21,14 @@ import { VideoChannelsComponent } from './video-channels.component'
    SharedVideoPlaylistModule,
    SharedVideoMiniatureModule,
    SharedUserSubscriptionModule,
-    SharedGlobalIconModule
+    SharedGlobalIconModule,
+    SharedSupportModal,
+    SharedAccountAvatarModule
  ],
  declarations: [
    VideoChannelsComponent,
    VideoChannelVideosComponent,
-    VideoChannelAboutComponent,
    VideoChannelPlaylistsComponent
  ],
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 6a07dafa7..092952204 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
@@ -34,12 +34,12 @@
    <div class="modal-footer inputs">
      <input
-        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
        (click)="hide()" (key.enter)="hide()"
      >
      <input
-        type="submit" i18n-value value="Add this caption" class="action-button-submit"
+        type="submit" i18n-value value="Add this caption" class="peertube-button orange-button"
        [disabled]="!form.valid" (click)="addCaption()"
      >
    </div>
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
index 8780ca567..8e035b6bb 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
@@ -1,8 +1,8 @@
 import { forkJoin } from 'rxjs'
-import { Component, EventEmitter, OnInit, Output } from '@angular/core'
+import { AfterViewChecked, AfterViewInit, Component, EventEmitter, OnInit, Output } from '@angular/core'
 import { Router } from '@angular/router'
-import { AuthService, CanComponentDeactivate, Notifier, ServerService } from '@app/core'
+import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService } from '@app/core'
 import { scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
@@ -19,7 +19,7 @@ import { VideoSend } from './video-send'
    './video-send.scss'
  ]
 })
-export class VideoGoLiveComponent extends VideoSend implements OnInit, CanComponentDeactivate {
+export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterViewInit, CanComponentDeactivate {
  @Output() firstStepDone = new EventEmitter<string>()
  @Output() firstStepError = new EventEmitter<void>()
@@ -41,7 +41,8 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, CanCompon
    protected videoService: VideoService,
    protected videoCaptionService: VideoCaptionService,
    private liveVideoService: LiveVideoService,
-    private router: Router
+    private router: Router,
+    private hooks: HooksService
    ) {
    super()
  }
@@ -50,6 +51,10 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, CanCompon
    super.ngOnInit()
  }
+  ngAfterViewInit () {
+    this.hooks.runAction('action:go-live.init', 'video-edit')
+  }
  canDeactivate () {
    return { canDeactivate: true }
  }
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 1fef74994..dd87641fc 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,8 +3,8 @@
 .first-step-block {
  .torrent-or-magnet {
-    @include divider($color: pvar(--inputPlaceholderColor), $background: pvar(--submenuColor));
+    @include divider($color: pvar(--inputPlaceholderColor), $background: pvar(--submenuBackgroundColor));
-    
    &[data-content] {
      margin: 1.5rem 0;
    }
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 01087e525..3aae24732 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
@@ -1,6 +1,6 @@
-import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
+import { AfterViewInit, Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
-import { AuthService, CanComponentDeactivate, Notifier, ServerService } from '@app/core'
+import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService } from '@app/core'
 import { scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
@@ -18,7 +18,7 @@ import { VideoSend } from './video-send'
    './video-send.scss'
  ]
 })
-export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate {
+export class VideoImportTorrentComponent extends VideoSend implements OnInit, AfterViewInit, CanComponentDeactivate {
  @Output() firstStepDone = new EventEmitter<string>()
  @Output() firstStepError = new EventEmitter<void>()
  @ViewChild('torrentfileInput') torrentfileInput: ElementRef<HTMLInputElement>
@@ -43,7 +43,8 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
    protected videoService: VideoService,
    protected videoCaptionService: VideoCaptionService,
    private router: Router,
-    private videoImportService: VideoImportService
+    private videoImportService: VideoImportService,
+    private hooks: HooksService
    ) {
    super()
  }
@@ -52,6 +53,10 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
    super.ngOnInit()
  }
+  ngAfterViewInit () {
+    this.hooks.runAction('action:video-torrent-import.init', 'video-edit')
+  }
  canDeactivate () {
    return { canDeactivate: true }
  }
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 c447c179d..7a9fe369f 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
@@ -1,7 +1,7 @@
 import { map, switchMap } from 'rxjs/operators'
-import { Component, EventEmitter, OnInit, Output } from '@angular/core'
+import { AfterViewInit, Component, EventEmitter, OnInit, Output } from '@angular/core'
 import { Router } from '@angular/router'
-import { AuthService, CanComponentDeactivate, Notifier, ServerService } from '@app/core'
+import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService } from '@app/core'
 import { getAbsoluteAPIUrl, scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
@@ -18,7 +18,7 @@ import { VideoSend } from './video-send'
    './video-send.scss'
  ]
 })
-export class VideoImportUrlComponent extends VideoSend implements OnInit, CanComponentDeactivate {
+export class VideoImportUrlComponent extends VideoSend implements OnInit, AfterViewInit, CanComponentDeactivate {
  @Output() firstStepDone = new EventEmitter<string>()
  @Output() firstStepError = new EventEmitter<void>()
@@ -42,8 +42,9 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
    protected videoService: VideoService,
    protected videoCaptionService: VideoCaptionService,
    private router: Router,
-    private videoImportService: VideoImportService
+    private videoImportService: VideoImportService,
-    ) {
+    private hooks: HooksService
+  ) {
    super()
  }
@@ -51,6 +52,10 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
    super.ngOnInit()
  }
+  ngAfterViewInit () {
+    this.hooks.runAction('action:video-url-import.init', 'video-edit')
+  }
  canDeactivate () {
    return { canDeactivate: true }
  }
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 ca21b61cd..effb37077 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
@@ -1,15 +1,15 @@
 import { Subscription } from 'rxjs'
 import { HttpErrorResponse, HttpEventType, HttpResponse } from '@angular/common/http'
-import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
+import { AfterViewInit, Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
-import { AuthService, CanComponentDeactivate, Notifier, ServerService, UserService } from '@app/core'
+import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService, UserService } from '@app/core'
 import { scrollToTop, uploadErrorHandler } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { BytesPipe, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
+import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 import { VideoPrivacy } from '@shared/models'
 import { VideoSend } from './video-send'
-import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 @Component({
  selector: 'my-video-upload',
@@ -20,7 +20,7 @@ import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
    './video-send.scss'
  ]
 })
-export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate {
+export class VideoUploadComponent extends VideoSend implements OnInit, AfterViewInit, OnDestroy, CanComponentDeactivate {
  @Output() firstStepDone = new EventEmitter<string>()
  @Output() firstStepError = new EventEmitter<void>()
  @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement>
@@ -60,7 +60,8 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
    protected videoService: VideoService,
    protected videoCaptionService: VideoCaptionService,
    private userService: UserService,
-    private router: Router
+    private router: Router,
+    private hooks: HooksService
    ) {
    super()
  }
@@ -79,6 +80,10 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
        })
  }
+  ngAfterViewInit () {
+    this.hooks.runAction('action:video-upload.init', 'video-edit')
+  }
  ngOnDestroy () {
    if (this.videoUploadObservable) this.videoUploadObservable.unsubscribe()
  }
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 5db9e823d..1ebee946b 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -67,7 +67,7 @@ $nav-link-height: 40px;
    &.active {
      border-color: $border-color;
      border-bottom-color: transparent;
-      background-color: pvar(--submenuColor) !important;
+      background-color: pvar(--submenuBackgroundColor) !important;
      span {
        border-bottom-color: pvar(--mainColor);
@@ -84,7 +84,7 @@ $nav-link-height: 40px;
  border: $border-width $border-type $border-color;
  border-top: transparent;
-  background-color: pvar(--submenuColor);
+  background-color: pvar(--submenuBackgroundColor);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  width: 100%;
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 fdefed09a..7bd9b7c90 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
@@ -1,6 +1,6 @@
 <form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
  <div class="avatar-and-textarea">
-    <img [src]="getAvatarUrl()" alt="Avatar" />
+    <my-account-avatar [account]="user?.account" size="25"></my-account-avatar>
    <div class="form-group">
      <textarea i18n-placeholder placeholder="Add comment..." myAutoResize
@@ -8,8 +8,8 @@
                (click)="openVisitorModal($event)"
                formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }"
                (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea>
      </textarea>
      <my-help class="markdown-guide" helpType="custom" iconName="markdown" tooltipPlacement="left auto" autoClose="true" i18n-title title="Markdown compatible">
        <ng-template ptTemplate="customHtml">
          <span i18n>Markdown compatible that supports:</span>
@@ -41,10 +41,11 @@
  </div>
  <div class="comment-buttons">
-    <button *ngIf="isAddButtonDisplayed()" class="cancel-button" (click)="cancelCommentReply()" type="button" i18n>
+    <button *ngIf="isAddButtonDisplayed()" class="peertube-button tertiary-button cancel-button" (click)="cancelCommentReply()" type="button" i18n>
      Cancel
    </button>
-    <button *ngIf="isAddButtonDisplayed()" [ngClass]="{ disabled: !form.valid || addingComment }">
+    <button *ngIf="isAddButtonDisplayed()" class="peertube-button orange-button" [ngClass]="{ disabled: !form.valid || addingComment }">
      {{ addingCommentButtonValue }}
    </button>
  </div>
@@ -55,6 +56,7 @@
    <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from commenting</h4>
    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
  </div>
  <div class="modal-body">
    <span i18n>
      You can comment using an account on any ActivityPub-compatible instance (PeerTube/Mastodon/Pleroma account for example).
@@ -62,14 +64,15 @@
    <my-remote-subscribe [interact]="true" [uri]="getUri()"></my-remote-subscribe>
  </div>
  <div class="modal-footer inputs">
    <input
-      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+      type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
      (click)="hideModals()" (key.enter)="hideModals()"
    >
    <input
-      type="submit" i18n-value value="Login to comment" class="action-button-submit"
+      type="submit" i18n-value value="Login to comment" class="peertube-button orange-button"
      (click)="gotoLogin()"
    >
  </div>
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 d938e2e28..1aa9255c2 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
@@ -1,6 +1,10 @@
 @import '_variables';
 @import '_mixins';
+$markdown-icon-height: 18px;
+$markdown-icon-width: 30px;
+$peertube-textarea-height: 60px;
 form {
  margin-bottom: 30px;
 }
@@ -9,9 +13,7 @@ form {
  display: flex;
  margin-bottom: 10px;
-  img {
+  my-account-avatar {
-    @include avatar(25px);
    vertical-align: top;
    margin-right: 10px;
  }
@@ -20,83 +22,55 @@ form {
    flex-grow: 1;
    margin: 0;
    position: relative;
+  }
-    $peertube-textarea-height: 60px;
+  textarea {
-    $markdown-icon-height: 18px;
+    @include peertube-textarea(100%, $peertube-textarea-height);
-    $markdown-icon-width: 30px;
+    @include button-focus(pvar(--mainColorLightest));
-    .markdown-guide {
-      position: absolute;
-      top: 5px;
-      right: 9px;
-      ::ng-deep .help-tooltip-button {
-        my-global-icon {
-          height: $markdown-icon-height;
-          width: $markdown-icon-width;
-          svg {
-            color: #C6C6C6;
-            fill: #C6C6C6;
-            border-radius: 3px;
-          }
-        }
-        &:focus, &:active, &:hover {
-          my-global-icon svg {
-            background-color: #C6C6C6;
-            color: pvar(--mainBackgroundColor);
-            fill: pvar(--mainBackgroundColor);
-          }
-        }
-      }
-    }
-    textarea {
-      @include peertube-textarea(100%, $peertube-textarea-height);
-      @include button-focus(pvar(--mainColorLightest));
-      min-height: calc(#{$peertube-textarea-height} - 15px * 2);
+    min-height: calc(#{$peertube-textarea-height} - 15px * 2);
-      padding-right: $markdown-icon-width + 15px !important;
+    padding-right: $markdown-icon-width + 15px !important;
-      @media screen and (max-width: 600px) {
+    @media screen and (max-width: 600px) {
-        padding-right: $markdown-icon-width + 19px  !important;
+      padding-right: $markdown-icon-width + 19px  !important;
-      }
+    }
-      &:focus::placeholder {
+    &:focus::placeholder {
-        opacity: 0;
+      opacity: 0;
-      }
    }
  }
 }
-.comment-buttons {
+.markdown-guide {
-  display: flex;
+  position: absolute;
-  justify-content: flex-end;
+  top: 5px;
+  right: 9px;
-  button {
+  ::ng-deep .help-tooltip-button {
-    @include peertube-button;
+    my-global-icon {
-    @include disable-outline;
+      height: $markdown-icon-height;
-    @include disable-default-a-behaviour;
+      width: $markdown-icon-width;
-    &:not(:last-child) {
+      svg {
-      margin-right: .5rem;
+        color: #C6C6C6;
+        fill: #C6C6C6;
+        border-radius: 3px;
+      }
    }
-    &:last-child {
+    &:focus, &:active, &:hover {
-      @include orange-button;
+      my-global-icon svg {
+        background-color: #C6C6C6;
+        color: pvar(--mainBackgroundColor);
+        fill: pvar(--mainBackgroundColor);
+      }
    }
  }
+}
-  .cancel-button {
+.comment-buttons {
-    @include tertiary-button;
+  display: flex;
+  justify-content: flex-end;
-    font-weight: $font-semibold;
-    display: inline-block;
-    padding: 0 10px 0 10px;
-    white-space: nowrap;
-    background: transparent;
-  }
 }
 .emoji-flex {
@@ -119,7 +93,8 @@ form {
 }
 @media screen and (max-width: 600px) {
-  textarea, .comment-buttons button {
+  textarea,
+  .comment-buttons button {
    font-size: 14px !important;
  }
@@ -129,12 +104,7 @@ form {
 }
 .modal-body {
-  .btn {
+  > span {
-    @include peertube-button;
-    @include orange-button;
-  }
-  span {
    float: left;
    margin-bottom: 20px;
  }
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 f1f0dfeba..0e1362ad3 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
@@ -4,7 +4,7 @@ import { Router } from '@angular/router'
 import { Notifier, User } from '@app/core'
 import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
-import { Video, Account } from '@app/shared/shared-main'
+import { Video } from '@app/shared/shared-main'
 import { VideoComment, VideoCommentService } from '@app/shared/shared-video-comment'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { VideoCommentCreate } from '@shared/models'
@@ -143,11 +143,6 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
    return window.location.href
  }
-  getAvatarUrl () {
-    if (this.user) return this.user.accountAvatarUrl
-    return Account.GET_DEFAULT_AVATAR_URL()
-  }
  gotoLogin () {
    this.hideModals()
    this.router.navigate([ '/login' ])
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/comment/video-comment.component.html
index ba41b6f48..4592c9c69 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.html
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.html
@@ -1,14 +1,6 @@
 <div *ngIf="isCommentDisplayed()" class="root-comment">
  <div class="left">
-    <a *ngIf="!comment.isDeleted" [href]="comment.account.url" target="_blank" rel="noopener noreferrer">
+    <my-account-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account"></my-account-avatar>
-      <img
-        class="comment-avatar"
-        [src]="comment.accountAvatarUrl"
-        (error)="switchToDefaultAvatar($event)"
-        alt="Avatar"
-      />
-    </a>
    <div class="vertical-border"></div>
  </div>
@@ -46,7 +38,7 @@
          <div *ngIf="isUserLoggedIn()" tabindex=0 (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div>
          <my-user-moderation-dropdown
-            [prependActions]="prependModerationActions" tabindex=0
+            [prependActions]="prependModerationActions" tabindex=0 [buttonStyled]="false"
            buttonSize="small" [account]="commentAccount" [user]="commentUser" i18n-label label="Options" placement="bottom-left auto"
          ></my-user-moderation-dropdown>
        </div>
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
index f6ff376b9..cf33a5b0e 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
@@ -22,144 +22,140 @@
  .right {
    width: 100%;
  }
+}
-  .comment-avatar {
+.comment {
-    @include avatar(36px);
+  flex-grow: 1;
-  }
+  // Fix word-wrap with flex
+  min-width: 1px;
-  .comment {
+}
-    flex-grow: 1;
-    // Fix word-wrap with flex
-    min-width: 1px;
-    .highlighted-comment {
-      display: inline-block;
-      background-color: #F5F5F5;
-      color: #3d3d3d;
-      padding: 0 5px;
-      font-size: 13px;
-      margin-bottom: 5px;
-      font-weight: $font-semibold;
-      border-radius: 3px;
-    }
-    .comment-account-date {
+.highlighted-comment {
-      display: flex;
+  display: inline-block;
-      margin-bottom: 4px;
+  background-color: #F5F5F5;
+  color: #3d3d3d;
-      .video-author {
+  padding: 0 5px;
-        height: 20px;
+  font-size: 13px;
-        background-color: #888888;
+  margin-bottom: 5px;
-        border-radius: 12px;
+  font-weight: $font-semibold;
-        margin-bottom: 2px;
+  border-radius: 3px;
-        max-width: 100%;
+}
-        box-sizing: border-box;
-        flex-direction: row;
-        align-items: center;
-        display: inline-flex;
-        padding-right: 6px;
-        padding-left: 6px;
-        color: white !important;
-      }
-      .comment-account {
+.comment-account-date {
-        word-break: break-all;
+  display: flex;
-        font-weight: 600;
+  margin-bottom: 4px;
-        font-size: 90%;
+}
-        a {
+.video-author {
-          @include disable-default-a-behaviour;
+  height: 20px;
+  background-color: #888888;
+  border-radius: 12px;
+  margin-bottom: 2px;
+  max-width: 100%;
+  box-sizing: border-box;
+  flex-direction: row;
+  align-items: center;
+  display: inline-flex;
+  padding-right: 6px;
+  padding-left: 6px;
+  color: white !important;
+}
-          color: pvar(--mainForegroundColor);
+.comment-account {
+  word-break: break-all;
+  font-weight: 600;
+  font-size: 90%;
-          &:hover {
+  a {
-            text-decoration: underline;
+    @include disable-default-a-behaviour;
-          }
-        }
-        .comment-account-fid {
+    color: pvar(--mainForegroundColor);
-          opacity: .6;
-        }
-      }
-      .comment-date {
+    &:hover {
-        font-size: 90%;
+      text-decoration: underline;
-        color: pvar(--greyForegroundColor);
-        margin-left: 5px;
-        text-decoration: none;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
    }
+  }
-    .comment-html {
+  .comment-account-fid {
-      @include peertube-word-wrap;
+    opacity: .6;
+  }
+}
-      // Mentions
+.comment-date {
-      ::ng-deep a {
+  font-size: 90%;
+  color: pvar(--greyForegroundColor);
+  margin-left: 5px;
+  text-decoration: none;
-        &:not(.linkified-url) {
+  &:hover {
-          @include disable-default-a-behaviour;
+    text-decoration: underline;
+  }
+}
-          color: pvar(--mainForegroundColor);
+.comment-html {
+  @include peertube-word-wrap;
-          font-weight: $font-semibold;
+  // Mentions
-        }
+  ::ng-deep a {
-      }
+    &:not(.linkified-url) {
+      @include disable-default-a-behaviour;
-      // Paragraphs
+      color: pvar(--mainForegroundColor);
-      ::ng-deep p {
-        margin-bottom: .3rem;
-      }
-      &.comment-html-deleted {
+      font-weight: $font-semibold;
-        color: pvar(--greyForegroundColor);
-        margin-bottom: 1rem;
-      }
    }
-    .comment-actions {
+  }
-      margin-bottom: 10px;
-      display: flex;
+  // Paragraphs
+  ::ng-deep p {
+    margin-bottom: .3rem;
+  }
-      ::ng-deep .dropdown-toggle,
+  &.comment-html-deleted {
-      .comment-action-reply {
+    color: pvar(--greyForegroundColor);
-        color: pvar(--greyForegroundColor);
+    margin-bottom: 1rem;
-        cursor: pointer;
+  }
-        margin-right: 10px;
+}
-        &:hover, &:active, &:focus, &:focus-visible {
+.comment-actions {
-          color: pvar(--mainForegroundColor);
+  margin-bottom: 10px;
-        }
+  display: flex;
-      }
-      ::ng-deep .action-button {
+  ::ng-deep .dropdown-toggle,
-        background-color: transparent;
+  .comment-action-reply {
-        padding: 0;
+    color: pvar(--greyForegroundColor);
-        font-weight: unset;
+    cursor: pointer;
-      }
+    margin-right: 10px;
-    }
-    my-video-comment-add {
+    &:hover, &:active, &:focus, &:focus-visible {
-      ::ng-deep form {
+      color: pvar(--mainForegroundColor);
-        margin-top: 1rem;
-        margin-bottom: 0;
-      }
    }
  }
-  .children {
+  ::ng-deep .action-button {
-    // Reduce avatars size for replies
+    background-color: transparent;
-    .comment-avatar {
+    padding: 0;
-      @include avatar(25px);
+    font-weight: unset;
-    }
+  }
+}
-    .left {
+my-video-comment-add {
-      margin-right: 6px;
+  ::ng-deep form {
-    }
+    margin-top: 1rem;
+    margin-bottom: 0;
+  }
+}
+.children {
+  // Reduce avatars size for replies
+  .comment-avatar {
+    @include avatar(25px);
+  }
+  .left {
+    margin-right: 6px;
  }
 }
@@ -170,27 +166,23 @@
 }
 @media screen and (max-width: 600px) {
-  .root-comment {
+  .children {
-    .children {
+    margin-left: -20px;
-      margin-left: -20px;
-      .left {
+    .left {
-        align-items: flex-start;
+      align-items: flex-start;
-        .vertical-border {
+      .vertical-border {
-          margin-left: 2px;
+        margin-left: 2px;
-        }
      }
    }
+  }
-    .comment {
+  .comment-account-date {
-      .comment-account-date {
+    flex-direction: column;
-        flex-direction: column;
-        .comment-date {
+    .comment-date {
-          margin-left: 0;
+      margin-left: 0;
-        }
-      }
    }
  }
 }
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 5c5d72b22..dd3db0c65 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
@@ -131,10 +131,6 @@ export class VideoCommentComponent implements OnInit, OnChanges {
    )
  }
-  switchToDefaultAvatar ($event: Event) {
-    ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
-  }
  isCommentDisplayed () {
    // Not deleted
    return !this.comment.isDeleted ||
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 4a6426d30..9e6fde2e0 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
@@ -1,12 +1,7 @@
 <div>
  <div class="title-block">
    <h2 class="title-page title-page-single">
-      <ng-container *ngIf="totalNotDeletedComments > 0; then hasComments; else noComments"></ng-container>
+      {totalNotDeletedComments, plural, =0 {Comments} =1 {1 Comment} other {{{totalNotDeletedComments}} Comments}}
-      <ng-template #hasComments>
-        <ng-container i18n *ngIf="totalNotDeletedComments === 1; else manyComments">1 Comment</ng-container>
-        <ng-template i18n #manyComments>{{ totalNotDeletedComments }} Comments</ng-template>
-      </ng-template>
-      <ng-template i18n #noComments>Comments</ng-template>
    </h2>
    <my-feed [syndicationItems]="syndicationItems"></my-feed>
@@ -79,15 +74,17 @@
            <span class="glyphicon glyphicon-menu-down"></span>
            <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container>
            <ng-template #hasAuthorComments>
              <ng-container *ngIf="comment.totalReplies !== comment.totalRepliesFromVideoAuthor; else onlyAuthorComments" i18n>
-                View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }} and others
+                View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}} from {{ video?.account?.displayName || 'the author' }} and others
              </ng-container>
              <ng-template i18n #onlyAuthorComments>
-                View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }}
+                View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}} from {{ video?.account?.displayName || 'the author' }}
              </ng-template>
            </ng-template>
-            <ng-template i18n #noAuthorComments>View {{ comment.totalReplies }} replies</ng-template>
+            <ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template>
            <my-small-loader class="comment-thread-loading ml-1" [loading]="threadLoading[comment.id]"></my-small-loader>
          </div>
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 df42fae73..e6778e1a9 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
@@ -27,7 +27,11 @@
    margin-left: 5px;
    opacity: 0;
    transition: ease-in .2s opacity;
+    width: 12px;
+    position: relative;
+    top: -3px;
  }
  &:hover my-feed {
    opacity: 1;
  }
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 d36dd9e34..210236b61 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
@@ -5,7 +5,6 @@ import { AuthService, ComponentPagination, ConfirmService, hasMoreItems, Notifie
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { Syndication, VideoDetails } from '@app/shared/shared-main'
 import { VideoComment, VideoCommentService, VideoCommentThreadTree } from '@app/shared/shared-video-comment'
-import { ThisReceiver } from '@angular/compiler'
 @Component({
  selector: 'my-video-comments',
diff --git a/client/src/app/+videos/+video-watch/modal/video-support.component.scss b/client/src/app/+videos/+video-watch/modal/video-support.component.scss
deleted file mode 100644
index 184e09027..000000000
--- a/client/src/app/+videos/+video-watch/modal/video-support.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.action-button-cancel {
-  margin-right: 0 !important;
-}
diff --git a/client/src/app/+videos/+video-watch/player-styles.component.scss b/client/src/app/+videos/+video-watch/player-styles.component.scss
new file mode 100644
index 000000000..7f1442a59
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/player-styles.component.scss
@@ -0,0 +1,4 @@
+@import 'node_modules/video.js/dist/video-js';
+$assets-path: '../../assets/';
+@import '../../../sass/player/index';
diff --git a/client/src/app/+videos/+video-watch/player-styles.component.ts b/client/src/app/+videos/+video-watch/player-styles.component.ts
new file mode 100644
index 000000000..9b1672a8c
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/player-styles.component.ts
@@ -0,0 +1,15 @@
+import { Component, ViewEncapsulation } from '@angular/core'
+/*
+* Allows to lazy load global player styles in the watch component
+*/
+@Component({
+  selector: 'my-player-styles',
+  template: '',
+  styleUrls: [ './player-styles.component.scss' ],
+  // tslint:disable:use-component-view-encapsulation
+  encapsulation: ViewEncapsulation.None
+})
+export class PlayerStylesComponent {
+}
diff --git a/client/src/app/+videos/+video-watch/recommendations/recent-videos-recommendation.service.ts b/client/src/app/+videos/+video-watch/recommendations/recent-videos-recommendation.service.ts
index 29fa268f4..2a851f13a 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recent-videos-recommendation.service.ts
+++ b/client/src/app/+videos/+video-watch/recommendations/recent-videos-recommendation.service.ts
@@ -61,7 +61,7 @@ export class RecentVideosRecommendationService implements RecommendationService
            componentPagination: pagination,
            advancedSearch: new AdvancedSearch({
              tagsOneOf: recommendation.tags.join(','),
-              sort: '-createdAt',
+              sort: '-publishedAt',
              searchTarget: 'local',
              nsfw: user.nsfwPolicy
                ? this.videos.nsfwPolicyToParam(user.nsfwPolicy)
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
index 3c7c679b8..e0e9f92e7 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
@@ -1,4 +1,4 @@
-<div class="other-videos">
+<div class="other-videos" [ngClass]="{ 'display-as-row': displayAsRow }">
  <ng-container *ngIf="hasVideos$ | async">
    <div class="title-page-container">
      <h2 i18n class="title-page title-page-single">
@@ -14,7 +14,7 @@
    <ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count">
      <my-video-miniature
-        [displayOptions]="displayOptions" [video]="video" [user]="userMiniature"
+        [displayOptions]="displayOptions" [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow"
        (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()">
      </my-video-miniature>
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
index b278c9654..c9fae6f27 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
 .title-page-container {
  display: flex;
  justify-content: space-between;
@@ -11,6 +14,10 @@
  }
 }
+.title-page {
+  margin-top: 0;
+}
 .title-page-autoplay {
  display: flex;
  width: max-content;
@@ -29,3 +36,29 @@
 hr {
  margin-top: 0;
 }
+my-video-miniature {
+  display: block;
+}
+.other-videos:not(.display-as-row) my-video-miniature {
+  min-width: $video-thumbnail-medium-width;
+  max-width: $video-thumbnail-medium-width;
+}
+.display-as-row {
+  my-video-miniature {
+    margin-bottom: 20px;
+  }
+  hr {
+    display: none;
+  }
+  @media screen and (max-width: $mobile-view) {
+    my-video-miniature {
+      margin-bottom: 10px;
+    }
+  }
+}
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts
index a1c8e0661..89b9c01b6 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts
@@ -16,6 +16,8 @@ import { RecommendedVideosStore } from './recommended-videos.store'
 export class RecommendedVideosComponent implements OnInit, OnChanges {
  @Input() inputRecommendation: RecommendationInfo
  @Input() playlist: VideoPlaylist
+  @Input() displayAsRow: boolean
  @Output() gotRecommendations = new EventEmitter<Video[]>()
  autoPlayNextVideo: boolean
diff --git a/client/src/app/shared/shared-main/account/video-avatar-channel.component.html b/client/src/app/+videos/+video-watch/video-avatar-channel.component.html
index 310cc926f..a02373f2d 100644
--- a/client/src/app/shared/shared-main/account/video-avatar-channel.component.html
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.html
@@ -1,26 +1,21 @@
 <div class="wrapper" [ngClass]="'avatar-' + size">
  <ng-container *ngIf="!isChannelAvatarNull() && !genericChannel">
    <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
-      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" />
+      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
    </a>
-    <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
-      <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
+    <my-account-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-account-avatar>
-    </a>
+</ng-container>
-  </ng-container>
  <ng-container *ngIf="!isChannelAvatarNull() && genericChannel">
-    <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
+    <my-account-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-account-avatar>
-      <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
-    </a>
    <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
-      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" />
+      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
    </a>
  </ng-container>
  <ng-container *ngIf="isChannelAvatarNull()">
-    <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
+    <my-account-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-account-avatar>
-      <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
-    </a>
  </ng-container>
 </div>
diff --git a/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
index 37709fce6..4998e85fa 100644
--- a/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
@@ -25,8 +25,12 @@
    position: absolute;
    top:50%;
    left:50%;
-    border-radius: 50%;
+    transform: translate(-50%,-50%);
-    transform: translate(-50%,-50%)
+    border-radius: 5px;
+    &:not(.channel-avatar) {
+      border-radius: 50%;
+    }
  }
  a:nth-of-type(2) img {
diff --git a/client/src/app/shared/shared-main/account/video-avatar-channel.component.ts b/client/src/app/+videos/+video-watch/video-avatar-channel.component.ts
index 440e2b522..0b6e796df 100644
--- a/client/src/app/shared/shared-main/account/video-avatar-channel.component.ts
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core'
-import { Video } from '../video/video.model'
+import { Video } from '@app/shared/shared-main/video'
 @Component({
  selector: 'my-video-avatar-channel',
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 b17f898ce..eadb2148a 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -16,6 +16,8 @@
      [playlist]="playlist" class="playlist"
      (videoFound)="onPlaylistVideoFound($event)"
    ></my-video-watch-playlist>
+    <my-plugin-placeholder pluginId="player-next"></my-plugin-placeholder>
  </div>
  <div class="row">
@@ -142,7 +144,7 @@
                  <ng-container *ngIf="isUserLoggedIn()">
                    <my-video-actions-dropdown
                      placement="bottom auto" buttonDirection="horizontal" [buttonStyled]="true" [video]="video" [videoCaptions]="videoCaptions"
-                      [displayOptions]="videoActionsOptions" (videoRemoved)="onVideoRemoved()" (modalOpened)="onModalOpened()"
+                      [displayOptions]="videoActionsOptions" (videoRemoved)="onVideoRemoved()"
                    ></my-video-actions-dropdown>
                  </ng-container>
                </div>
@@ -230,8 +232,8 @@
        </div>
        <div *ngIf="video.isLocal === false" class="video-attribute">
-          <span i18n class="video-attribute-label">Origin instance</span>
+          <span i18n class="video-attribute-label">Origin</span>
-          <a class="video-attribute-value" target="_blank" rel="noopener noreferrer" [href]="video.originInstanceUrl">{{ video.originInstanceHost }}</a>
+          <a class="video-attribute-value" target="_blank" rel="noopener noreferrer" [href]="getVideoUrl()">{{ video.originInstanceHost }}</a>
        </div>
        <div *ngIf="!!video.originallyPublishedAt" class="video-attribute">
@@ -289,6 +291,7 @@
    </div>
    <my-recommended-videos
+      [displayAsRow]="displayOtherVideosAsRow()"
      [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }"
      [playlist]="playlist"
      (gotRecommendations)="onRecommendations($event)"
@@ -313,6 +316,8 @@
 </div>
 <ng-container *ngIf="video !== null">
-  <my-video-support #videoSupportModal [video]="video"></my-video-support>
+  <my-support-modal #supportModal [video]="video"></my-support-modal>
  <my-video-share #videoShareModal [video]="video" [videoCaptions]="videoCaptions" [playlist]="playlist"></my-video-share>
 </ng-container>
+<my-player-styles></my-player-styles>
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 555126cbc..e8ad10a11 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -3,7 +3,7 @@
 @import '_bootstrap-variables';
 @import '_miniature';
-$player-factor: 1.7; // 16/9
+$player-factor: 16/9;
 $video-info-margin-left: 44px;
 @function getPlayerHeight($width){
@@ -179,12 +179,6 @@ $video-info-margin-left: 44px;
          &:hover {
            opacity: 0.8;
          }
-          img {
-            @include avatar(18px);
-            margin: -2px 5px 0 0;
-          }
        }
        .video-info-channel-left {
@@ -212,11 +206,6 @@ $video-info-margin-left: 44px;
        }
      }
-      my-feed {
-        margin-left: 5px;
-        margin-top: 1px;
-      }
      .video-actions-rates {
        margin: 0 0 10px 0;
        align-items: start;
@@ -413,37 +402,12 @@ $video-info-margin-left: 44px;
      }
    }
  }
+}
-  ::ng-deep .other-videos {
+my-recommended-videos {
-    padding-left: 15px;
+  display: block;
-    min-width: $video-miniature-width;
+  padding-left: 15px;
+  min-width: 250px;
-    @media screen and (min-width: 1800px - (3* $video-miniature-width)) {
-      width: min-content;
-    }
-    .title-page {
-      margin: 0 !important;
-    }
-    .video-miniature {
-      display: flex;
-      width: max-content;
-      height: 100%;
-      padding-bottom: 20px;
-      flex-wrap: wrap;
-    }
-    .video-bottom {
-      @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
-        margin-left: 1rem;
-      }
-      @media screen and (max-width: 500px) {
-        margin-left: 0;
-        margin-top: .5rem;
-      }
-    }
-  }
 }
 my-video-comments {
@@ -537,6 +501,7 @@ my-video-comments {
  }
 }
+// Use the same breakpoint than in the typescript component to display the other video miniatures as row
 @media screen and (max-width: 1100px) {
  #video-wrapper {
    flex-direction: column;
@@ -549,15 +514,10 @@ my-video-comments {
  .video-bottom {
    flex-direction: column;
+  }
-    ::ng-deep .other-videos {
+  my-recommended-videos {
-      padding-left: 0 !important;
+    padding-left: 0;
-      ::ng-deep .video-miniature  {
-        flex-direction: row;
-        width: auto;
-      }
-    }
  }
 }
@@ -579,10 +539,6 @@ my-video-comments {
    }
  }
-  ::ng-deep .other-videos .video-miniature  {
-    flex-direction: column;
-  }
  .privacy-concerns {
    width: 100%;
  }
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 7a98cab3b..366e9bb57 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -21,6 +21,7 @@ import { RedirectService } from '@app/core/routing/redirect.service'
 import { isXPercentInViewport, scrollToTop } from '@app/helpers'
 import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main'
 import { VideoShareComponent } from '@app/shared/shared-share-modal'
+import { SupportModalComponent } from '@app/shared/shared-support-modal'
 import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
 import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
@@ -28,7 +29,12 @@ import { MetaService } from '@ngx-meta/core'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 import { ServerConfig, ServerErrorCode, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '@shared/models'
-import { getStoredP2PEnabled, getStoredTheater } from '../../../assets/player/peertube-player-local-storage'
+import {
+  cleanupVideoWatch,
+  getStoredP2PEnabled,
+  getStoredTheater,
+  getStoredVideoWatchHistory
+} from '../../../assets/player/peertube-player-local-storage'
 import {
  CustomizationOptions,
  P2PMediaLoaderOptions,
@@ -39,7 +45,6 @@ import {
 } from '../../../assets/player/peertube-player-manager'
 import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils'
 import { environment } from '../../../environments/environment'
-import { VideoSupportComponent } from './modal/video-support.component'
 import { VideoWatchPlaylistComponent } from './video-watch-playlist.component'
 type URLOptions = CustomizationOptions & { playerMode: PlayerMode }
@@ -54,7 +59,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
  @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
-  @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
+  @ViewChild('supportModal') supportModal: SupportModalComponent
  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
@@ -195,6 +200,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    this.theaterEnabled = getStoredTheater()
    this.hooks.runAction('action:video-watch.init', 'video-watch')
+    setTimeout(cleanupVideoWatch, 1500) // Run in timeout to ensure we're not blocking the UI
  }
  ngOnDestroy () {
@@ -277,23 +284,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  }
  showSupportModal () {
-    // Check video was playing before opening support modal
+    this.supportModal.show()
-    const isVideoPlaying = this.isPlaying()
-    this.pausePlayer()
-    const modalRef = this.videoSupportModal.show()
-    modalRef.result.then(() => {
-      if (isVideoPlaying) {
-        this.resumePlayer()
-      }
-    })
  }
  showShareModal () {
-    this.pausePlayer()
    this.videoShareModal.show(this.currentTime, this.videoWatchPlaylist.currentPlaylistPosition)
  }
@@ -301,6 +295,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    return this.authService.isLoggedIn()
  }
+  getVideoUrl () {
+    if (!this.video.url) {
+      return this.video.originInstanceUrl + VideoDetails.buildClientUrl(this.video.uuid)
+    }
+    return this.video.url
+  }
  getVideoTags () {
    if (!this.video || Array.isArray(this.video.tags) === false) return []
@@ -316,10 +317,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    }
  }
-  onModalOpened () {
-    this.pausePlayer()
-  }
  onVideoRemoved () {
    this.redirectService.redirectToHomepage()
  }
@@ -396,6 +393,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    this.loadVideo(videoId)
  }
+  displayOtherVideosAsRow () {
+    // Use the same value as in the SASS file
+    return this.screenService.getWindowInnerWidth() <= 1100
+  }
  private loadVideo (videoId: string) {
    // Video did not change
    if (this.video && this.video.uuid === videoId) return
@@ -570,7 +572,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    this.setOpenGraphTags()
    this.checkUserRating()
-    this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', { videojs })
+    const hookOptions = {
+      videojs,
+      video: this.video,
+      playlist: this.playlist
+    }
+    this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', hookOptions)
  }
  private async buildPlayer (urlOptions: URLOptions) {
@@ -768,9 +775,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    const getStartTime = () => {
      const byUrl = urlOptions.startTime !== undefined
      const byHistory = video.userHistory && (!this.playlist || urlOptions.resume !== undefined)
+      const byLocalStorage = getStoredVideoWatchHistory(video.uuid)
      if (byUrl) return timeToInt(urlOptions.startTime)
      if (byHistory) return video.userHistory.currentTime
+      if (byLocalStorage) return byLocalStorage.duration
      return 0
    }
@@ -815,6 +824,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
          ? this.videoService.getVideoViewUrl(video.uuid)
          : null,
        embedUrl: video.embedUrl,
+        embedTitle: video.name,
        isLive: video.isLive,
@@ -827,7 +837,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
        serverUrl: environment.apiUrl,
-        videoCaptions: playerCaptions
+        videoCaptions: playerCaptions,
+        videoUUID: video.uuid
      },
      webtorrent: {
@@ -867,24 +879,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    return { playerMode: mode, playerOptions: options }
  }
-  private pausePlayer () {
-    if (!this.player) return
-    this.player.pause()
-  }
-  private resumePlayer () {
-    if (!this.player) return
-    this.player.play()
-  }
-  private isPlaying () {
-    if (!this.player) return
-    return !this.player.paused()
-  }
  private async subscribeToLiveEventsIfNeeded (oldVideo: VideoDetails, newVideo: VideoDetails) {
    if (!this.liveVideosSub) {
      this.liveVideosSub = this.buildLiveEventsSubscription()
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 fbda9b9c4..cf6afd852 100644
--- a/client/src/app/+videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.module.ts
@@ -4,6 +4,7 @@ import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedModerationModule } from '@app/shared/shared-moderation'
 import { SharedShareModal } from '@app/shared/shared-share-modal'
+import { SharedSupportModal } from '@app/shared/shared-support-modal'
 import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription'
 import { SharedVideoModule } from '@app/shared/shared-video'
 import { SharedVideoCommentModule } from '@app/shared/shared-video-comment'
@@ -13,12 +14,14 @@ import { VideoCommentService } from '../../shared/shared-video-comment/video-com
 import { VideoCommentAddComponent } from './comment/video-comment-add.component'
 import { VideoCommentComponent } from './comment/video-comment.component'
 import { VideoCommentsComponent } from './comment/video-comments.component'
-import { VideoSupportComponent } from './modal/video-support.component'
+import { PlayerStylesComponent } from './player-styles.component'
 import { RecommendationsModule } from './recommendations/recommendations.module'
 import { TimestampRouteTransformerDirective } from './timestamp-route-transformer.directive'
 import { VideoWatchPlaylistComponent } from './video-watch-playlist.component'
 import { VideoWatchRoutingModule } from './video-watch-routing.module'
 import { VideoWatchComponent } from './video-watch.component'
+import { SharedAccountAvatarModule } from '../../shared/shared-account-avatar/shared-account-avatar.module'
+import { VideoAvatarChannelComponent } from './video-avatar-channel.component'
 @NgModule({
  imports: [
@@ -34,20 +37,25 @@ import { VideoWatchComponent } from './video-watch.component'
    SharedGlobalIconModule,
    SharedVideoCommentModule,
    SharedShareModal,
-    SharedVideoModule
+    SharedVideoModule,
+    SharedSupportModal,
+    SharedAccountAvatarModule
  ],
  declarations: [
    VideoWatchComponent,
    VideoWatchPlaylistComponent,
-    VideoSupportComponent,
    VideoCommentsComponent,
    VideoCommentAddComponent,
    VideoCommentComponent,
+    VideoAvatarChannelComponent,
+    VideoAvatarChannelComponent,
    TimestampRouteTransformerDirective,
-    TimestampRouteTransformerDirective
+    PlayerStylesComponent
  ],
  exports: [
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.html b/client/src/app/+videos/video-list/overview/video-overview.component.html
index ca986c634..639a96c43 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.html
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.html
@@ -14,7 +14,7 @@
        </h1>
        <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
-          <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true">
+          <my-video-miniature [video]="video" [user]="userMiniature" [displayVideoActions]="true">
          </my-video-miniature>
        </div>
      </div>
@@ -25,7 +25,7 @@
        </h2>
        <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
-          <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true">
+          <my-video-miniature [video]="video" [user]="userMiniature" [displayVideoActions]="true">
          </my-video-miniature>
        </div>
      </div>
@@ -40,7 +40,7 @@
        </div>
        <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
-          <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true">
+          <my-video-miniature [video]="video" [user]="userMiniature" [displayVideoActions]="true">
          </my-video-miniature>
        </div>
      </div>
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss
index c1d10188a..ec73c628c 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.scss
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss
@@ -8,9 +8,84 @@
 }
 .margin-content {
-  @include fluid-videos-miniature-layout;
+  @include grid-videos-miniature-layout;
 }
 .section {
-  @include miniature-rows;
+  &:first-child {
+    padding-top: 30px;
+    .section-title {
+      border-top: none !important;
+    }
+  }
+  .section-title {
+    font-size: 24px;
+    font-weight: $font-semibold;
+    padding-top: 15px;
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    &:not(h2) {
+      border-top: 1px solid $separator-border-color;
+    }
+    a {
+      &:hover, &:focus:not(.focus-visible), &:active {
+        text-decoration: none;
+        outline: none;
+      }
+      color: pvar(--mainForegroundColor);
+    }
+  }
+  &.channel {
+    .section-title {
+      a {
+        display: flex;
+        width: fit-content;
+        align-items: center;
+        img {
+          @include channel-avatar(28px);
+          margin-right: 8px;
+        }
+      }
+      .followers {
+        color: pvar(--greyForegroundColor);
+        font-weight: normal;
+        font-size: 14px;
+        margin-left: 10px;
+        position: relative;
+        top: 2px;
+      }
+    }
+  }
+  .show-more {
+    position: relative;
+    top: -5px;
+    display: inline-block;
+    font-size: 16px;
+    text-transform: uppercase;
+    color: pvar(--greyForegroundColor);
+    margin-bottom: 10px;
+    font-weight: $font-semibold;
+    text-decoration: none;
+  }
+  @media screen and (max-width: $mobile-view) {
+    max-height: initial;
+    overflow: initial;
+    .section-title {
+      font-size: 17px;
+      margin-left: 10px;
+    }
+  }
 }
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 e352a2b2c..6aabb93a5 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
@@ -7,7 +7,7 @@ import { HooksService } from '@app/core/plugins/hooks.service'
 import { immutableAssign } from '@app/helpers'
 import { VideoService } from '@app/shared/shared-main'
 import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
-import { AbstractVideoList, OwnerDisplayType } from '@app/shared/shared-video-miniature'
+import { AbstractVideoList } from '@app/shared/shared-video-miniature'
 import { FeedFormat, VideoSortField } from '@shared/models'
 import { environment } from '../../../environments/environment'
 import { copyToClipboard } from '../../../root-helpers/utils'
@@ -20,7 +20,6 @@ import { copyToClipboard } from '../../../root-helpers/utils'
 export class VideoUserSubscriptionsComponent extends AbstractVideoList implements OnInit, OnDestroy {
  titlePage: string
  sort = '-publishedAt' as VideoSortField
-  ownerDisplayType: OwnerDisplayType = 'auto'
  groupByDate = true
  constructor (
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index e8447719a..e7d05369b 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -3,8 +3,6 @@
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
-$assets-path: '../assets';
 .peertube-container {
  padding-bottom: 20px;
 }
@@ -28,68 +26,64 @@ $assets-path: '../assets';
  z-index: z(header);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  display: flex;
+}
-  .top-left-block {
+.top-left-block {
-    z-index: 1;
+  z-index: 1;
-    height: $header-height;
+  height: $header-height;
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    min-width: 0;
+  min-width: 0;
-    .icon {
+  .icon {
-      @include icon(24px);
+    @include icon(24px);
+  }
-      &.icon-menu {
-        background-color: pvar(--mainForegroundColor);
-        mask-image: url('#{$assets-path}/images/misc/menu.svg');
-        margin: 0 18px 0 20px;
-      }
-    }
-    .peertube-title {
+  .icon-menu {
-      @include disable-default-a-behaviour;
+    background-color: pvar(--mainForegroundColor);
+    mask-image: url('../assets/images/misc/menu.svg');
+    margin: 0 18px 0 20px;
-      font-size: 20px;
+    @media screen and (max-width: $mobile-view) {
-      font-weight: $font-bold;
+      margin: 0 10px;
-      color: inherit !important;
+    }
-      display: flex;
+  }
-      align-items: center;
+}
-      overflow: hidden;
-      .instance-name {
+.header-right {
-        @include ellipsis;
+  height: $header-height;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  white-space: nowrap;
+  flex: 1;
+}
-        width: 100%;
+.peertube-title {
-      }
+  @include disable-default-a-behaviour;
-      .icon.icon-logo {
+  font-size: 20px;
-        display: inline-block;
+  font-weight: $font-bold;
-        width: 23px;
+  color: inherit !important;
-        height: 24px;
+  display: flex;
-        margin-right: .5rem;
+  align-items: center;
-      }
+  overflow: hidden;
-    }
-    @media screen and (max-width: $mobile-view) {
+  .instance-name {
-      width: 70px;
+    @include ellipsis;
-      .peertube-title {
+    width: 100%;
-        display: none;
+  }
-      }
-    }
-    @media screen and (max-width: 350px) {
+  .icon.icon-logo {
-      flex: auto;
+    display: inline-block;
-    }
+    width: 23px;
+    height: 24px;
+    margin-right: .5rem;
  }
-  .header-right {
+  @media screen and (max-width: $mobile-view) {
-    height: $header-height;
+    display: none;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    white-space: nowrap;
-    flex: 1;
  }
 }
@@ -106,18 +100,9 @@ $assets-path: '../assets';
    justify-self: center;
    align-self: center;
    cursor: pointer;
    width: 20px;
  }
-  @each $color, $value in $theme-colors {
-    &.alert-#{$color} {
-      my-global-icon {
-        @include apply-svg-color(theme-color-level($color, $alert-color-level));
-      }
-    }
-  }
  ::ng-deep {
    p {
      font-size: 16px;
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index f790a6848..41c59cc86 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -24,6 +24,7 @@ import { SharedGlobalIconModule } from './shared/shared-icons'
 import { SharedInstanceModule } from './shared/shared-instance'
 import { SharedMainModule } from './shared/shared-main'
 import { SharedUserInterfaceSettingsModule } from './shared/shared-user-settings'
+import { SharedAccountAvatarModule } from './shared/shared-account-avatar/shared-account-avatar.module'
 registerLocaleData(localeOc, 'oc')
@@ -59,6 +60,7 @@ registerLocaleData(localeOc, 'oc')
    SharedUserInterfaceSettingsModule,
    SharedGlobalIconModule,
    SharedInstanceModule,
+    SharedAccountAvatarModule,
    MetaModule.forRoot({
      provide: MetaLoader,
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index 2392a234c..3152a7003 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -5,8 +5,7 @@ import { CommonModule } from '@angular/common'
 import { NgModule, Optional, SkipSelf } from '@angular/core'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { PeerTubeSocket } from '@app/core/notification/peertube-socket.service'
-import { HooksService } from '@app/core/plugins/hooks.service'
+import { HooksService, PluginService } from '@app/core/plugins'
-import { PluginService } from '@app/core/plugins/plugin.service'
 import { AuthService } from './auth'
 import { ConfirmService } from './confirm'
 import { CheatSheetComponent } from './hotkeys'
@@ -15,7 +14,7 @@ import { throwIfAlreadyLoaded } from './module-import-guard'
 import { Notifier } from './notification'
 import { HtmlRendererService, LinkifierService, MarkdownService } from './renderer'
 import { RestExtractor, RestService } from './rest'
-import { LoginGuard, RedirectService, UserRightGuard, UnloggedGuard } from './routing'
+import { LoginGuard, RedirectService, UnloggedGuard, UserRightGuard } from './routing'
 import { CanDeactivateGuard } from './routing/can-deactivate-guard.service'
 import { ServerConfigResolver } from './routing/server-config-resolver.service'
 import { ScopedTokensService } from './scoped-tokens'
diff --git a/client/src/app/core/notification/peertube-socket.service.ts b/client/src/app/core/notification/peertube-socket.service.ts
index bc3f7b893..eab1c63f2 100644
--- a/client/src/app/core/notification/peertube-socket.service.ts
+++ b/client/src/app/core/notification/peertube-socket.service.ts
@@ -58,12 +58,11 @@ export class PeerTubeSocket {
      this.notificationSocket = this.io(environment.apiUrl + '/user-notifications', {
        query: { accessToken: this.auth.getAccessToken() }
      })
-      this.notificationSocket.on('new-notification', (n: UserNotificationServer) => {
-        this.ngZone.run(() => this.dispatchNotificationEvent('new', n))
-      })
    })
+    this.notificationSocket.on('new-notification', (n: UserNotificationServer) => {
+      this.ngZone.run(() => this.dispatchNotificationEvent('new', n))
+    })
  }
  private async initLiveVideosSocket () {
diff --git a/client/src/app/core/plugins/hooks.service.ts b/client/src/app/core/plugins/hooks.service.ts
index ec47aa48c..ddde198d2 100644
--- a/client/src/app/core/plugins/hooks.service.ts
+++ b/client/src/app/core/plugins/hooks.service.ts
@@ -3,13 +3,29 @@ import { mergeMap, switchMap } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { PluginService } from '@app/core/plugins/plugin.service'
 import { ClientActionHookName, ClientFilterHookName, PluginClientScope } from '@shared/models'
+import { AuthService, AuthStatus } from '../auth'
 type RawFunction<U, T> = (params: U) => T
 type ObservableFunction<U, T> = RawFunction<U, Observable<T>>
 @Injectable()
 export class HooksService {
-  constructor (private pluginService: PluginService) { }
+  constructor (
+    private authService: AuthService,
+    private pluginService: PluginService
+  ) {
+    // Run auth hooks
+    this.authService.userInformationLoaded
+      .subscribe(() => this.runAction('action:auth-user.information-loaded', 'common', { user: this.authService.getUser() }))
+    this.authService.loginChangedSource.subscribe(obj => {
+      if (obj === AuthStatus.LoggedIn) {
+        this.runAction('action:auth-user.logged-in', 'common')
+      } else if (obj === AuthStatus.LoggedOut) {
+        this.runAction('action:auth-user.logged-out', 'common')
+      }
+    })
+  }
  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 b755fda2c..1243bac67 100644
--- a/client/src/app/core/plugins/plugin.service.ts
+++ b/client/src/app/core/plugins/plugin.service.ts
@@ -19,6 +19,7 @@ import {
  PluginTranslation,
  PluginType,
  PublicServerSetting,
+  RegisterClientSettingsScript,
  ServerConfigPlugin
 } from '@shared/models'
 import { environment } from '../../../environments/environment'
@@ -46,7 +47,10 @@ export class PluginService implements ClientHook {
  customModal: CustomModalComponent
  private plugins: ServerConfigPlugin[] = []
+  private helpers: { [ npmName: string ]: RegisterClientHelpers } = {}
  private scopes: { [ scopeName: string ]: PluginInfo[] } = {}
  private loadedScripts: { [ script: string ]: boolean } = {}
  private loadedScopes: PluginClientScope[] = []
  private loadingScopes: { [id in PluginClientScope]?: boolean } = {}
@@ -55,6 +59,7 @@ export class PluginService implements ClientHook {
  private formFields: FormFields = {
    video: []
  }
+  private settingsScripts: { [ npmName: string ]: RegisterClientSettingsScript } = {}
  constructor (
    private authService: AuthService,
@@ -197,13 +202,33 @@ export class PluginService implements ClientHook {
    return this.formFields.video.filter(f => f.videoFormOptions.type === type)
  }
+  getRegisteredSettingsScript (npmName: string) {
+    return this.settingsScripts[npmName]
+  }
+  translateBy (npmName: string, toTranslate: string) {
+    const helpers = this.helpers[npmName]
+    if (!helpers) {
+      console.error('Unknown helpers to translate %s from %s.', toTranslate, npmName)
+      return toTranslate
+    }
+    return helpers.translate(toTranslate)
+  }
  private loadPlugin (pluginInfo: PluginInfo) {
    return this.zone.runOutsideAngular(() => {
+      const npmName = this.nameToNpmName(pluginInfo.plugin.name, pluginInfo.pluginType)
+      const helpers = this.buildPeerTubeHelpers(pluginInfo)
+      this.helpers[npmName] = helpers
      return loadPlugin({
        hooks: this.hooks,
        formFields: this.formFields,
+        onSettingsScripts: options => this.settingsScripts[npmName] = options,
        pluginInfo,
-        peertubeHelpersFactory: pluginInfo => this.buildPeerTubeHelpers(pluginInfo)
+        peertubeHelpersFactory: () => helpers
      })
    })
  }
@@ -235,6 +260,12 @@ export class PluginService implements ClientHook {
                   .toPromise()
      },
+      getServerConfig: () => {
+        return this.server.getConfig()
+          .pipe(catchError(res => this.restExtractor.handleError(res)))
+          .toPromise()
+      },
      isLoggedIn: () => {
        return this.authService.isLoggedIn()
      },
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 11288fc54..906191ae1 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -98,6 +98,12 @@ export class ServerService {
        extensions: []
      }
    },
+    banner: {
+      file: {
+        size: { max: 0 },
+        extensions: []
+      }
+    },
    video: {
      image: {
        size: { max: 0 },
diff --git a/client/src/app/core/users/user.model.ts b/client/src/app/core/users/user.model.ts
index 15a4f7f82..7d03e1c40 100644
--- a/client/src/app/core/users/user.model.ts
+++ b/client/src/app/core/users/user.model.ts
@@ -1,7 +1,7 @@
 import { Account } from '@app/shared/shared-main/account/account.model'
 import { hasUserRight } from '@shared/core-utils/users'
 import {
-  Avatar,
+  ActorImage,
  NSFWPolicyType,
  User as UserServerModel,
  UserAdminFlag,
@@ -111,12 +111,6 @@ export class User implements UserServerModel {
    }
  }
-  get accountAvatarUrl () {
-    if (!this.account) return ''
-    return this.account.avatarUrl
-  }
  hasRight (right: UserRight) {
    return hasUserRight(this.role, right)
  }
@@ -131,7 +125,7 @@ export class User implements UserServerModel {
    }
  }
-  updateAccountAvatar (newAccountAvatar?: Avatar) {
+  updateAccountAvatar (newAccountAvatar?: ActorImage) {
    if (newAccountAvatar) this.account.updateAvatar(newAccountAvatar)
    else this.account.resetAvatar()
  }
diff --git a/client/src/app/core/users/user.service.ts b/client/src/app/core/users/user.service.ts
index 33cc1f668..3de83152c 100644
--- a/client/src/app/core/users/user.service.ts
+++ b/client/src/app/core/users/user.service.ts
@@ -7,8 +7,7 @@ import { AuthService } from '@app/core/auth'
 import { getBytes } from '@root-helpers/bytes'
 import { UserLocalStorageKeys } from '@root-helpers/users'
 import {
-  Avatar,
+  ActorImage,
-  NSFWPolicyType,
  ResultList,
  User as UserServerModel,
  UserCreate,
@@ -136,7 +135,7 @@ export class UserService {
  changeAvatar (avatarForm: FormData) {
    const url = UserService.BASE_USERS_URL + 'me/avatar/pick'
-    return this.authHttp.post<{ avatar: Avatar }>(url, avatarForm)
+    return this.authHttp.post<{ avatar: ActorImage }>(url, avatarForm)
               .pipe(catchError(err => this.restExtractor.handleError(err)))
  }
diff --git a/client/src/app/core/wrappers/screen.service.ts b/client/src/app/core/wrappers/screen.service.ts
index a085e5bdc..c133b5fe9 100644
--- a/client/src/app/core/wrappers/screen.service.ts
+++ b/client/src/app/core/wrappers/screen.service.ts
@@ -38,11 +38,10 @@ export class ScreenService {
    let numberOfVideos = 1
-    if (screenWidth > 1850) numberOfVideos = 7
+    if (screenWidth > 1850) numberOfVideos = 5
-    else if (screenWidth > 1600) numberOfVideos = 6
+    else if (screenWidth > 1600) numberOfVideos = 4
-    else if (screenWidth > 1370) numberOfVideos = 5
+    else if (screenWidth > 1370) numberOfVideos = 3
-    else if (screenWidth > 1100) numberOfVideos = 4
+    else if (screenWidth > 1100) numberOfVideos = 2
-    else if (screenWidth > 850) numberOfVideos = 3
    return numberOfVideos
  }
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html
index 03e86b8e6..f84086b4a 100644
--- a/client/src/app/header/search-typeahead.component.html
+++ b/client/src/app/header/search-typeahead.component.html
@@ -34,7 +34,8 @@
    <!-- search instructions, when search input is empty -->
    <div *ngIf="areInstructionsDisplayed()" id="typeahead-instructions" class="overflow-hidden">
-      <div class="d-flex justify-content-between">
+      <span class="text-muted" i18n>Your query will be matched against video names or descriptions, channel names.</span>
+      <div class="d-flex justify-content-between mt-3">
        <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.">
@@ -55,7 +56,6 @@
          <em>UUID</em> <span class="text-muted" i18n>will list the matching video</span>
        </li>
      </ul>
-      <span class="text-muted" i18n>Any other input will return matching video or channel names.</span>
    </div>
  </div>
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index f8d68e986..c754a99d1 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -5,6 +5,7 @@
 #search-video {
  @include peertube-input-text($search-input-width);
  padding-left: 10px;
  padding-right: 40px; // For the search icon
  font-size: 14px;
@@ -14,7 +15,7 @@
  }
 }
-.icon.icon-search {
+.icon-search {
  @include icon(25px);
  height: 18px;
@@ -86,7 +87,7 @@ li.suggestion {
    flex: 1;
    input {
-      width: unset;
+      width: 70px;
    }
  }
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 9aa397edd..df5c7971d 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -5,7 +5,7 @@
        <div>
          <div class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left" [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside">
            <div ngbDropdownToggle>
-              <img [src]="user.accountAvatarUrl" alt="Avatar" />
+              <my-account-avatar [account]="user.account" size="34"></my-account-avatar>
              <div class="logged-in-info">
                <div class="logged-in-display-name">{{ user.account?.displayName }}</div>
@@ -40,9 +40,10 @@
              <a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings"
                fragment="video-sensitive-content-policy" #settingsSensitiveContentPolicy
-                (click)="onActiveLinkScrollToAnchor(settingsSensitiveContentPolicy)">
+                (click)="onActiveLinkScrollToAnchor(settingsSensitiveContentPolicy)"
-                <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy === 'display' }" iconName="sensitive" aria-hidden="true"></my-global-icon>
+              >
-                <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy !== 'display' }" iconName="unsensitive" aria-hidden="true"></my-global-icon>
+                <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy === 'display'" iconName="sensitive" aria-hidden="true"></my-global-icon>
+                <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy !== 'display'" iconName="unsensitive" aria-hidden="true"></my-global-icon>
                <span i18n>Sensitive:</span>
                <span class="ml-auto text-muted">{{ nsfwPolicy }}</span>
              </a>
@@ -72,17 +73,17 @@
        </div>
        <div class="logged-in-menu">
-          <a routerLink="/my-account" routerLinkActive="active" #settingsLink (click)="onActiveLinkScrollToAnchor(settingsLink)">
+          <a class="menu-link" routerLink="/my-account" routerLinkActive="active" #settingsLink (click)="onActiveLinkScrollToAnchor(settingsLink)">
            <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
            <ng-container i18n>My account</ng-container>
          </a>
-          <a routerLink="/my-library" routerLinkActive="active" #libraryLink (click)="onActiveLinkScrollToAnchor(libraryLink)">
+          <a class="menu-link" routerLink="/my-library" routerLinkActive="active" #libraryLink (click)="onActiveLinkScrollToAnchor(libraryLink)">
            <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
            <ng-container i18n>My library</ng-container>
          </a>
-          <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
+          <a class="menu-link" *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
            <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
            <ng-container i18n>Administration</ng-container>
          </a>
@@ -90,29 +91,29 @@
      </div>
      <div *ngIf="!isLoggedIn" class="login-buttons-block">
-        <a i18n routerLink="/login" class="login-button">Login</a>
+        <a i18n routerLink="/login" class="peertube-button-link orange-button">Login</a>
-        <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a>
+        <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link">Create an account</a>
      </div>
      <div *ngIf="isLoggedIn" class="in-my-library">
        <div i18n class="block-title">IN MY LIBRARY</div>
-        <a *ngIf="user.canSeeVideosLink" routerLink="/my-library/videos" routerLinkActive="active">
+        <a *ngIf="user.canSeeVideosLink" class="menu-link" routerLink="/my-library/videos" routerLinkActive="active">
          <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
          <ng-container i18n>Videos</ng-container>
        </a>
-        <a routerLink="/my-library/video-playlists" routerLinkActive="active">
+        <a class="menu-link" routerLink="/my-library/video-playlists" routerLinkActive="active">
          <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
          <ng-container i18n>Playlists</ng-container>
        </a>
-        <a routerLink="/videos/subscriptions" routerLinkActive="active">
+        <a class="menu-link" routerLink="/videos/subscriptions" routerLinkActive="active">
          <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
          <ng-container i18n>Subscriptions</ng-container>
        </a>
-        <a routerLink="/my-library/history/videos" routerLinkActive="active">
+        <a class="menu-link" routerLink="/my-library/history/videos" routerLinkActive="active">
          <my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
          <ng-container i18n>History</ng-container>
        </a>
@@ -122,22 +123,22 @@
      <div class="on-instance">
        <div i18n class="block-title">ON {{instanceName}}</div>
-        <a routerLink="/videos/overview" routerLinkActive="active">
+        <a class="menu-link" routerLink="/videos/overview" routerLinkActive="active">
          <my-global-icon iconName="globe" aria-hidden="true"></my-global-icon>
          <ng-container i18n>Discover</ng-container>
        </a>
-        <a routerLink="/videos/trending" routerLinkActive="active">
+        <a class="menu-link" routerLink="/videos/trending" routerLinkActive="active">
          <my-global-icon iconName="trending" aria-hidden="true"></my-global-icon>
          <ng-container i18n>Trending</ng-container>
        </a>
-        <a routerLink="/videos/recently-added" routerLinkActive="active">
+        <a class="menu-link" routerLink="/videos/recently-added" routerLinkActive="active">
          <my-global-icon iconName="recently-added" aria-hidden="true"></my-global-icon>
          <ng-container i18n>Recently added</ng-container>
        </a>
-        <a routerLink="/videos/local" routerLinkActive="active">
+        <a class="menu-link" routerLink="/videos/local" routerLinkActive="active">
          <my-global-icon iconName="home" aria-hidden="true"></my-global-icon>
          <ng-container i18n>Local videos</ng-container>
        </a>
@@ -146,18 +147,18 @@
    <div class="footer">
      <div class="footer-block">
-        <a *ngIf="!isLoggedIn" (click)="openQuickSettings()">
+        <a *ngIf="!isLoggedIn" class="menu-link" (click)="openQuickSettings()">
          <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
          <ng-container i18n>My settings</ng-container>
        </a>
-        <a routerLink="/about" routerLinkActive="active">
+        <a class="menu-link" routerLink="/about" routerLinkActive="active">
          <my-global-icon iconName="help" aria-hidden="true"></my-global-icon>
          <ng-container i18n>About</ng-container>
        </a>
      </div>
-      <div class="bottom-links">
+      <div class="footer-bottom">
        <div class="footer-links">
          <div *ngIf="isLoggedIn === false">
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 2ea66e57d..00d1a1f69 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -3,8 +3,11 @@
 $menu-link-icon-size: 22px;
 $menu-link-icon-margin-right: 18px;
+$footer-links-base-opacity: .8;
+.menu-link {
+  @include disable-default-a-behaviour;
-@mixin menu-link {
  display: flex;
  align-items: center;
  padding-left: $menu-lateral-padding;
@@ -90,169 +93,158 @@ menu {
    display: flex;
    align-items: center;
    justify-content: left;
+  }
+}
-    .logged-in-more {
+my-notification {
-      $main-radius: 25px;
+  margin-left: auto;
+  margin-right: 15px;
+}
-      flex: 1;
+.logged-in-more {
-      margin-left: 13px;
+  @mixin display-hints($is-mobile: false) {
-      border-radius: $main-radius;
+    background-color: rgba(255, 255, 255, 0.15);
-      transition: all .1s ease-in-out;
-      cursor: pointer;
-      *, & {
+    @if $is-mobile {
-        line-height: 1;
+      .dropdown-toggle-indicator {
+        display: inherit !important;
      }
+      .dropdown-toggle:first-child {
-      &.show {
+        padding-right: 30px !important;
-        background-color: rgba(255, 255, 255, 0.20);
-        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
      }
+    }
+  }
-      @mixin display-hints($is-mobile: false) {
+  $main-radius: 25px;
-        background-color: rgba(255, 255, 255, 0.15);
-        @if $is-mobile {
-          .dropdown-toggle-indicator {
-            display: inherit !important;
-          }
-          .dropdown-toggle:first-child {
-            padding-right: 30px !important;
-          }
-        }
-      }
-      &:hover {
+  flex: 1;
-        @include display-hints;
+  margin-left: 13px;
-      }
+  border-radius: $main-radius;
+  transition: all .1s ease-in-out;
+  cursor: pointer;
+  line-height: 1;
-      /* smartphones and touchscreens */
+  &.show {
-      @media (hover: none) and (pointer: coarse) {
+    background-color: rgba(255, 255, 255, 0.20);
-        @include display-hints($is-mobile: true);
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
+  }
-        /* fill space when on mobile */
+  &:hover {
-        max-width: calc(100% - 80px);
+    @include display-hints;
-        .dropdown-toggle {
+  }
-          max-width: 100%;
-        }
-        .logged-in-info {
-          max-width: calc(100% - 45px) !important;
-        }
-      }
+  /* smartphones and touchscreens */
+  @media (hover: none) and (pointer: coarse) {
+    @include display-hints($is-mobile: true);
-      .dropdown-toggle-indicator {
+    /* fill space when on mobile */
-        position: relative;
+    max-width: calc(100% - 80px);
-        width: 0;
-        display: none;
-        span {
-          position: absolute;
-          right: -35px;
-          top: -8px;
-          color: grey;
-          width: $main-radius;
-        }
-      }
-      .dropdown-toggle {
+    .dropdown-toggle {
-        &::after {
+      max-width: 100%;
-          border: none;
+    }
-        }
-      }
-      .dropdown-toggle:first-child {
+    .logged-in-info {
-        display: flex;
+      max-width: calc(100% - 45px) !important;
-        align-items: center;
+    }
-        padding: 5px 7px;
+  }
-        border-radius: $main-radius;
-      }
-      img {
+  .dropdown-toggle-indicator {
-        @include avatar(34px);
+    position: relative;
+    width: 0;
+    display: none;
-        margin-right: 10px;
+    span {
-      }
+      position: absolute;
+      right: -35px;
+      top: -8px;
+      color: grey;
+      width: $main-radius;
+    }
+  }
-      .logged-in-info {
+  .dropdown-toggle {
-        max-width: 105px;
+    &::after {
+      border: none;
+    }
+  }
-        flex-grow: 1;
+  .dropdown-toggle:first-child {
+    display: flex;
+    align-items: center;
+    padding: 5px 7px;
+    border-radius: $main-radius;
+  }
+}
-        .logged-in-display-name,
+my-account-avatar {
-        .logged-in-username {
+  margin-right: 10px;
-          @include ellipsis;
+}
-        }
-        .logged-in-display-name {
+.logged-in-info {
-          font-size: 16px;
+  max-width: 105px;
-          font-weight: $font-semibold;
-          color: pvar(--menuForegroundColor);
-          @include disable-default-a-behaviour;
+  flex-grow: 1;
-        }
+}
-        .logged-in-username {
+.logged-in-display-name,
-          font-size: 13px;
+.logged-in-username {
-          color: #C6C6C6;
+  @include ellipsis;
-          margin-top: 3px;
+}
-        }
-      }
-    }
-    my-notification {
+.logged-in-display-name {
-      margin-left: auto;
+  font-size: 16px;
-      margin-right: 15px;
+  font-weight: $font-semibold;
-    }
+  color: pvar(--menuForegroundColor);
-  }
-  .logged-in-menu {
+  @include disable-default-a-behaviour;
-    display: flex;
+}
-    flex-direction: column;
-    align-items: flex-start;
-    border-top: 1px solid var(--greyForegroundColor);
-    line-height: $line-height-normal;
-    a {
+.logged-in-username {
-      @include menu-link;
+  font-size: 13px;
-      @include disable-default-a-behaviour;
+  color: #C6C6C6;
+  margin-top: 3px;
+}
-      $icon-size: 13px;
+.logged-in-menu {
-      $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border-top: 1px solid var(--greyForegroundColor);
+  line-height: $line-height-normal;
-      font-size: 14px;
+  a {
-      width: 100%;
+    $icon-size: 13px;
-      min-height: 35px;
+    $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
-      my-global-icon {
+    font-size: 14px;
-        width: $icon-size;
+    width: 100%;
-        height: $icon-size;
+    min-height: 35px;
-        // Keep aligned with other icons
+    my-global-icon {
-        margin-left: $additional-margin;
+      width: $icon-size;
+      height: $icon-size;
-        &[iconName="channel"] {
+      // Keep aligned with other icons
-          margin-top: -2px;
+      margin-left: $additional-margin;
-        }
+    }
-      }
-      &.active,
+    &.active,
-      &:hover,
+    &:hover,
-      &:focus-visible {
+    &:focus-visible {
-        my-global-icon {
+      my-global-icon {
-          @include apply-svg-color(var(--menuForegroundColor));
+        @include apply-svg-color(var(--menuForegroundColor));
-        }
      }
+    }
-      &.active {
+    &.active {
-        $border-left-width: 4px;
+      $border-left-width: 4px;
-        font-weight: $font-semibold;
+      font-weight: $font-semibold;
-        border-left: $border-left-width solid var(--mainColor);
+      border-left: $border-left-width solid var(--mainColor);
-        my-global-icon {
+      my-global-icon {
-          margin-left: $additional-margin - $border-left-width;
+        margin-left: $additional-margin - $border-left-width;
-        }
      }
    }
  }
@@ -261,27 +253,22 @@ menu {
 .login-buttons-block {
  margin: 30px 25px 35px 25px;
-  .login-button {
+  > a {
-    @include peertube-button-link;
-    @include orange-button;
    display: block;
    width: 100%;
-    margin-bottom: 10px;
-  }
-  .create-account-button {
+    :not(:last-child) {
-    @include peertube-button-link;
+      margin-bottom: 10px;
+    }
-    display: block;
+  }
-    width: 100%;
+}
-    color: #fff;
+.create-account-button {
-    background-color: rgba(255, 255, 255, 0.25);
+  color: #fff;
+  background-color: rgba(255, 255, 255, 0.25);
-    &:hover {
+  &:hover {
-      background-color: rgba(255, 255, 255, 0.28);
+    background-color: rgba(255, 255, 255, 0.28);
-    }
  }
 }
@@ -291,92 +278,57 @@ menu {
  margin-bottom: 15px;
  .block-title {
+    @include ellipsis;
    text-transform: uppercase;
    font-weight: $font-bold; // Bold
    font-size: 13px;
    margin-bottom: 25px;
    margin-left: 26px;
-    @include ellipsis;
    margin-right: 30px;
  }
  a {
-    @include menu-link;
-    @include disable-default-a-behaviour;
    min-height: 40px;
-    my-global-icon {
-      &[iconName="playlists"] {
-        height: 24px;
-        width: 24px;
-        margin-right: 16px;
-      }
-      &[iconName="videos"] {
-        position: relative;
-        right: -1px;
-      }
-    }
  }
 }
 .footer {
  width: $menu-width;
  padding-bottom: 15px;
+}
+.footer-bottom {
+  display: flex;
+  flex-direction: column;
+  padding: 0 $menu-lateral-padding;
+}
-  .bottom-links {
+.footer-links {
+  &, > div {
    display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
-    padding: 0 $menu-lateral-padding;
  }
-  $footer-links-base-opacity: .8;
+  a,
+  span[role=button] {
-  .footer-links {
+    display: inline-block;
-    &, > div {
+    text-decoration: none;
-      display: flex;
+    color: pvar(--menuForegroundColor);
-      flex-wrap: wrap;
+    opacity: $footer-links-base-opacity;
-    }
+    white-space: nowrap;
+    font-size: 90%;
-    a, span[role=button] {
+    font-weight: 500;
-      display: inline-block;
+    line-height: 1.4rem;
-      text-decoration: none;
+    margin-right: 8px;
-      color: pvar(--menuForegroundColor);
-      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(pvar(--menuForegroundColor));
-          display: flex;
-          width: auto;
-          height: 90%;
-          margin-right: .2rem;
-        }
-      }
-    }
  }
+}
-  .footer-copyleft small a {
+.footer-copyleft small a {
-    @include disable-default-a-behaviour;
+  @include disable-default-a-behaviour;
-    color: pvar(--menuForegroundColor);
+  color: pvar(--menuForegroundColor);
-    opacity: $footer-links-base-opacity - .2;
+  opacity: $footer-links-base-opacity - .2;
-  }
 }
 .dropdown {
@@ -398,32 +350,13 @@ menu {
    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 {
+    .hover-display-toggle {
-      display: inherit;
-    }
-    my-global-icon.hover-display-toggle {
      display: none;
    }
-    &.settings-sensitive {
+    .hover-display-toggle[hidden] {
-      my-global-icon ::ng-deep svg {
+      display: inherit !important;
-        margin-top: 2px !important;
-      }
    }
  }
 }
@@ -443,7 +376,8 @@ menu {
    }
  }
-  .top-menu, .footer {
+  .top-menu,
+  .footer {
    width: 100% !important;
  }
@@ -451,9 +385,35 @@ menu {
    width: calc(100vw - 30px);
  }
-  .dropdown-item:hover, .dropdown-item:active {
+  .dropdown-item:hover,
+  .dropdown-item:active {
    &.settings-sensitive my-global-icon ::ng-deep svg {
      margin-top: 0px !important;
    }
  }
 }
+my-global-icon {
+  &[iconName="playlists"] {
+    height: 24px;
+    width: 24px;
+    margin-right: 16px;
+  }
+  &[iconName="videos"] {
+    position: relative;
+    right: -1px;
+  }
+  &[iconName="channel"] {
+    margin-top: -2px;
+  }
+  &[iconName="sign-out"] {
+    position: relative;
+    right: -2px;
+    height: 20px;
+    width: 20px;
+  }
+}
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index ed20d9c01..9b6b7cda5 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -10,6 +10,7 @@ import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
 import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
 import { ServerConfig, UserRight, VideoConstant } from '@shared/models'
 import { NgbDropdown, NgbDropdownConfig } from '@ng-bootstrap/ng-bootstrap'
+import { PeertubeModalService } from '@app/shared/shared-main/peertube-modal/peertube-modal.service'
 const logger = debug('peertube:menu:MenuComponent')
@@ -54,6 +55,7 @@ export class MenuComponent implements OnInit {
    private hotkeysService: HotkeysService,
    private screenService: ScreenService,
    private menuService: MenuService,
+    private modalService: PeertubeModalService,
    private dropdownConfig: NgbDropdownConfig,
    private router: Router
  ) {
@@ -130,6 +132,9 @@ export class MenuComponent implements OnInit {
        this.authService.userInformationLoaded
          .subscribe(() => this.buildUserLanguages())
      })
+    this.modalService.openQuickSettingsSubject
+      .subscribe(() => this.openQuickSettings())
  }
  isRegistrationAllowed () {
diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss
index 40feb9e66..c65787779 100644
--- a/client/src/app/menu/notification.component.scss
+++ b/client/src/app/menu/notification.component.scss
@@ -1,6 +1,9 @@
 @import '_variables';
 @import '_mixins';
+.content {
+  scrollbar-color: auto;
+}
 .notification-inbox-popover {
  padding: 10px;
diff --git a/client/src/app/modal/confirm.component.html b/client/src/app/modal/confirm.component.html
index dbc8c23e3..f07501726 100644
--- a/client/src/app/modal/confirm.component.html
+++ b/client/src/app/modal/confirm.component.html
@@ -17,13 +17,13 @@
  <div class="modal-footer inputs">
    <input
-      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+      type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
      (click)="dismiss()" (key.enter)="dismiss()"
    >
    <input
      ngbAutofocus
-      type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()"
+      type="submit" [value]="confirmButtonText" class="peertube-button orange-button" [disabled]="isConfirmationDisabled()"
      (click)="close()" (key.enter)="confirm()"
    >
  </div>
diff --git a/client/src/app/modal/confirm.component.scss b/client/src/app/modal/confirm.component.scss
index ed226bc09..69978f212 100644
--- a/client/src/app/modal/confirm.component.scss
+++ b/client/src/app/modal/confirm.component.scss
@@ -17,5 +17,3 @@ input[type=text] {
 .form-group {
  margin: 20px 0;
 }
diff --git a/client/src/app/modal/custom-modal.component.html b/client/src/app/modal/custom-modal.component.html
index 06ecc2743..cdfbfbb6a 100644
--- a/client/src/app/modal/custom-modal.component.html
+++ b/client/src/app/modal/custom-modal.component.html
@@ -3,17 +3,17 @@
    <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"
+      *ngIf="hasCancel()" type="button" role="button" value="{{cancel.value}}" class="peertube-button grey-button"
      (click)="onCancelClick()" (key.enter)="onCancelClick()"
    >
    <input
-      *ngIf="hasConfirm()" type="button" role="button" value="{{confirm.value}}" class="action-button action-button-confirm"
+      *ngIf="hasConfirm()" type="button" role="button" value="{{confirm.value}}" class="peertube-button orange-button"
      (click)="onConfirmClick()" (key.enter)="onConfirmClick()"
    >
  </div>
diff --git a/client/src/app/modal/custom-modal.component.scss b/client/src/app/modal/custom-modal.component.scss
index a7fa30cf5..d6ef772b2 100644
--- a/client/src/app/modal/custom-modal.component.scss
+++ b/client/src/app/modal/custom-modal.component.scss
@@ -8,13 +8,3 @@
 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/instance-config-warning-modal.component.html b/client/src/app/modal/instance-config-warning-modal.component.html
index 5a8adf726..f085aa9de 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.html
+++ b/client/src/app/modal/instance-config-warning-modal.component.html
@@ -15,7 +15,7 @@
      <li i18n *ngIf="!about.instance.administrator">Who you are</li>
      <li i18n *ngIf="!about.instance.maintenanceLifetime">How long you plan to maintain your instance</li>
-      <li i18n *ngIf="!about.instance.businessModel">How you plan to pay your instance</li>
+      <li i18n *ngIf="!about.instance.businessModel">How you plan to pay for keeping your instance running</li>
      <li i18n *ngIf="!about.instance.moderationInformation">How you will moderate your instance</li>
      <li i18n *ngIf="!about.instance.terms">Instance terms</li>
@@ -35,10 +35,11 @@
    </my-peertube-checkbox>
    <input
-      type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel"
+      type="button" role="button" i18n-value value="Close" class="peertube-button grey-button"
      (click)="hide()" (key.enter)="hide()"
    >
-    <a i18n class="action-button action-button-configure" ngbAutofocus
+    <a i18n class="peertube-button-link orange-button" ngbAutofocus
       href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">
       Configure
    </a>
diff --git a/client/src/app/modal/instance-config-warning-modal.component.scss b/client/src/app/modal/instance-config-warning-modal.component.scss
index cc97d64e4..8d734c628 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.scss
+++ b/client/src/app/modal/instance-config-warning-modal.component.scss
@@ -1,10 +1,6 @@
 @import '_mixins';
 @import '_variables';
-.action-button-cancel {
-  margin-right: 0 !important;
-}
 .modal-body {
  font-size: 15px;
 }
@@ -18,11 +14,3 @@ li {
  margin: 0 auto 50px;
  width: 25%;
 }
-.action-button-configure {
-  display: inline-block;
-  @include peertube-button;
-  @include orange-button;
-  @include disable-default-a-behaviour;
-}
diff --git a/client/src/app/modal/quick-settings-modal.component.scss b/client/src/app/modal/quick-settings-modal.component.scss
deleted file mode 100644
index b0e256744..000000000
--- a/client/src/app/modal/quick-settings-modal.component.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@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;
-  }
-}
-.quick-settings-title {
-  @include in-content-small-title;
-}
diff --git a/client/src/app/modal/quick-settings-modal.component.ts b/client/src/app/modal/quick-settings-modal.component.ts
index 95726ab63..99859a1a5 100644
--- a/client/src/app/modal/quick-settings-modal.component.ts
+++ b/client/src/app/modal/quick-settings-modal.component.ts
@@ -8,8 +8,7 @@ import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 @Component({
  selector: 'my-quick-settings',
-  templateUrl: './quick-settings-modal.component.html',
+  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
diff --git a/client/src/app/modal/welcome-modal.component.html b/client/src/app/modal/welcome-modal.component.html
index 19bf3a1ea..f5d2b8799 100644
--- a/client/src/app/modal/welcome-modal.component.html
+++ b/client/src/app/modal/welcome-modal.component.html
@@ -71,12 +71,12 @@
  <div class="modal-footer inputs">
    <input
-      type="button" role="button" i18n-value value="Remind me later" class="action-button action-button-understood"
+      type="button" role="button" i18n-value value="Remind me later" class="peertube-button grey-button"
      (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"
+       class="peertube-button-link orange-button" href="/admin/config/edit-custom" target="_blank"
       rel="noopener noreferrer" ngbAutofocus>
      Configure my instance
    </a>
diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss
index a93dbcef9..28d5dc49c 100644
--- a/client/src/app/modal/welcome-modal.component.scss
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -47,43 +47,30 @@ li {
 .columns {
  display: flex;
+}
-  .link-block {
+.link-block {
-    @include disable-default-a-behaviour;
+  @include disable-default-a-behaviour;
-    color: pvar(--mainForegroundColor);
-    padding: 10px;
-    transition: background-color 0.2s ease-in;
-    flex-basis: 33%;
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-    .link-title {
+  color: pvar(--mainForegroundColor);
-      font-size: 16px;
+  padding: 10px;
-      font-weight: $font-semibold;
+  transition: background-color 0.2s ease-in;
-      display: flex;
+  flex-basis: 33%;
-      justify-content: center;
-      margin-bottom: 5px;
-    }
-    .link-title,
+  &:hover {
-    div {
+    background-color: rgba(0, 0, 0, 0.05);
-      text-align: center;
-    }
  }
-}
-.configure-instance-button {
+  .link-title {
-  @include peertube-button;
+    font-size: 16px;
-  @include orange-button;
+    font-weight: $font-semibold;
-  @include disable-default-a-behaviour;
+    display: flex;
+    justify-content: center;
-  display: inline-block;
+    margin-bottom: 5px;
-}
+  }
-.action-button-understood {
+  .link-title,
-  @include peertube-button;
+  div {
-  @include grey-button;
+    text-align: center;
+  }
 }
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
index fb8366f4c..658d42537 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@@ -10,12 +10,7 @@
        <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
          class="chip"
        >
-          <img
+          <my-account-avatar [account]="abuse.reporterAccount"></my-account-avatar>
-            class="avatar"
-            [src]="abuse.reporterAccount.avatar?.path"
-            (error)="switchToDefaultAvatar($event)"
-            alt="Avatar"
-          >
          <div>
            <span class="text-muted">{{ abuse.reporterAccount.nameWithHost }}</span>
          </div>
@@ -35,12 +30,7 @@
        <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
          class="chip"
        >
-          <img
+          <my-account-avatar [account]="abuse.flaggedAccount"></my-account-avatar>
-            class="avatar"
-            [src]="abuse.flaggedAccount?.avatar?.path"
-            (error)="switchToDefaultAvatar($event)"
-            alt="Avatar"
-          >
          <div>
            <span class="text-muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
          </div>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.ts b/client/src/app/shared/shared-abuse-list/abuse-details.component.ts
index 31cf3389d..e8ce7e678 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.ts
@@ -45,8 +45,4 @@ export class AbuseDetailsComponent {
      label: this.predefinedReasonsTranslations[r]
    }))
  }
-  switchToDefaultAvatar ($event: Event) {
-    ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
-  }
 }
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index 8428032bf..29b51f09c 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -65,12 +65,7 @@
      <td *ngIf="isAdminView()">
        <a *ngIf="abuse.reporterAccount" [href]="abuse.reporterAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
          <div class="chip two-lines">
-            <img
+            <my-account-avatar [account]="abuse.reporterAccount"></my-account-avatar>
-              class="avatar"
-              [src]="abuse.reporterAccount.avatar?.path"
-              (error)="switchToDefaultAvatar($event)"
-              alt="Avatar"
-            >
            <div>
              {{ abuse.reporterAccount.displayName }}
              <span>{{ abuse.reporterAccount.nameWithHost }}</span>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
index e34836a18..8b5771237 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
@@ -117,14 +117,11 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
        warningTitle: false,
        startTime: abuse.video.startAt,
        stopTime: abuse.video.endAt
-      })
+      }),
+      abuse.video.name
    )
  }
-  switchToDefaultAvatar ($event: Event) {
-    ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
-  }
  async removeAbuse (abuse: AdminAbuse) {
    const res = await this.confirmService.confirm($localize`Do you really want to delete this abuse report?`, $localize`Delete`)
    if (res === false) return
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
index 17e9ce4cf..ab6967f28 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
@@ -41,7 +41,7 @@
      </div>
      <div class="form-group inputs">
-        <input type="submit" i18n-value value="Add a message" class="action-button-submit" [disabled]="!form.valid || sendingMessage">
+        <input type="submit" i18n-value value="Add a message" class="peertube-button orange-button" [disabled]="!form.valid || sendingMessage">
      </div>
    </form>
diff --git a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
index 8082e93f4..cc7bb6c92 100644
--- a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
+++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
@@ -23,14 +23,11 @@
      <div class="form-group inputs">
        <input
-          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
          (click)="hide()" (key.enter)="hide()"
        >
-        <input
+        <input type="submit" i18n-value value="Update this comment" class="peertube-button orange-button" [disabled]="!form.valid" />
-          type="submit" i18n-value value="Update this comment" class="action-button-submit"
-          [disabled]="!form.valid"
-        >
      </div>
    </form>
  </div>
diff --git a/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts b/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts
index 663cd902b..19b6d456d 100644
--- a/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts
+++ b/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts
@@ -10,6 +10,7 @@ import { AbuseDetailsComponent } from './abuse-details.component'
 import { AbuseListTableComponent } from './abuse-list-table.component'
 import { AbuseMessageModalComponent } from './abuse-message-modal.component'
 import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
+import { SharedAccountAvatarModule } from '../shared-account-avatar/shared-account-avatar.module'
 @NgModule({
  imports: [
@@ -19,7 +20,8 @@ import { ModerationCommentModalComponent } from './moderation-comment-modal.comp
    SharedFormModule,
    SharedModerationModule,
    SharedGlobalIconModule,
-    SharedVideoCommentModule
+    SharedVideoCommentModule,
+    SharedAccountAvatarModule
  ],
  declarations: [
diff --git a/client/src/app/shared/shared-account-avatar/account-avatar.component.html b/client/src/app/shared/shared-account-avatar/account-avatar.component.html
new file mode 100644
index 000000000..ca4ceb12f
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.html
@@ -0,0 +1,15 @@
+<ng-template #img>
+  <img [class]="class" [src]="avatarUrl" i18n-alt alt="Account avatar" />
+</ng-template>
+<a *ngIf="account && href" [href]="href" target="_blank" rel="noopener noreferrer" [title]="title">
+  <ng-template *ngTemplateOutlet="img"></ng-template>
+</a>
+<a *ngIf="account && internalHref" [routerLink]="internalHref" [title]="title">
+  <ng-template *ngTemplateOutlet="img"></ng-template>
+</a>
+<ng-container *ngIf="!account || (!href && !internalHref)">
+  <ng-template *ngTemplateOutlet="img"></ng-template>
+</ng-container>
diff --git a/client/src/app/shared/shared-account-avatar/account-avatar.component.scss b/client/src/app/shared/shared-account-avatar/account-avatar.component.scss
new file mode 100644
index 000000000..bb941d712
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.scss
@@ -0,0 +1,22 @@
+@import '_variables';
+@import '_mixins';
+.avatar-25 {
+  @include avatar(25px);
+}
+.avatar-34 {
+  @include avatar(34px);
+}
+.avatar-36 {
+  @include avatar(36px);
+}
+.avatar-40 {
+  @include avatar(40px);
+}
+.avatar-120 {
+  @include avatar(120px);
+}
+\ No newline at end of file
diff --git a/client/src/app/shared/shared-account-avatar/account-avatar.component.ts b/client/src/app/shared/shared-account-avatar/account-avatar.component.ts
new file mode 100644
index 000000000..02a0a18bf
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.ts
@@ -0,0 +1,39 @@
+import { Component, Input } from '@angular/core'
+import { Account } from '../shared-main/account/account.model'
+@Component({
+  selector: 'my-account-avatar',
+  styleUrls: [ './account-avatar.component.scss' ],
+  templateUrl: './account-avatar.component.html'
+})
+export class AccountAvatarComponent {
+  @Input() account: {
+    name: string
+    avatar?: { url?: string, path: string }
+    url: string
+  }
+  @Input() size: '25' | '34' | '36' | '40' | '120' = '36'
+  // Use an external link
+  @Input() href: string
+  // Use routerLink
+  @Input() internalHref: string | string[]
+  @Input() set title (value) {
+    this._title = value
+  }
+  private _title: string
+  get title () {
+    return this._title || $localize`${this.account.name} (account page)`
+  }
+  get class () {
+    return `avatar avatar-${this.size}`
+  }
+  get avatarUrl () {
+    return Account.GET_ACTOR_AVATAR_URL(this.account)
+  }
+}
diff --git a/client/src/app/shared/shared-account-avatar/index.ts b/client/src/app/shared/shared-account-avatar/index.ts
new file mode 100644
index 000000000..40c742ba5
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/index.ts
@@ -0,0 +1,2 @@
+export * from './account-avatar.component'
+export * from './shared-account-avatar.module'
+\ No newline at end of file
diff --git a/client/src/app/shared/shared-account-avatar/shared-account-avatar.module.ts b/client/src/app/shared/shared-account-avatar/shared-account-avatar.module.ts
new file mode 100644
index 000000000..17b27589f
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/shared-account-avatar.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core'
+import { SharedGlobalIconModule } from '../shared-icons'
+import { SharedMainModule } from '../shared-main/shared-main.module'
+import { AccountAvatarComponent } from './account-avatar.component'
+@NgModule({
+  imports: [
+    SharedMainModule,
+    SharedGlobalIconModule
+  ],
+  declarations: [
+    AccountAvatarComponent
+  ],
+  exports: [
+    AccountAvatarComponent
+  ],
+  providers: [ ]
+})
+export class SharedAccountAvatarModule { }
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html
new file mode 100644
index 000000000..0829263f4
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html
@@ -0,0 +1,41 @@
+<div class="actor" *ngIf="actor">
+  <div class="d-flex">
+    <img [ngClass]="{ channel: isChannel() }" [src]="preview || actor.avatarUrl" alt="Avatar" />
+    <div class="actor-img-edit-container">
+      <div *ngIf="editable && !hasAvatar()" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
+        <my-global-icon iconName="upload"></my-global-icon>
+        <label class="sr-only" for="avatarfile" i18n>Upload a new avatar</label>
+        <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
+      </div>
+      <div
+        *ngIf="editable && hasAvatar()" class="actor-img-edit-button"
+        #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-image-info" autoClose="outside" placement="right"
+      >
+        <my-global-icon iconName="edit"></my-global-icon>
+        <label class="sr-only" for="avatarMenu" i18n>Change your avatar</label>
+      </div>
+    </div>
+  </div>
+  <div class="actor-info">
+    <div class="actor-info-display-name">{{ actor.displayName }}</div>
+    <div *ngIf="displayUsername" class="actor-info-username">{{ actor.name }}</div>
+    <div *ngIf="displaySubscribers" i18n class="actor-info-followers">{{ actor.followersCount }} subscribers</div>
+  </div>
+</div>
+<ng-template #avatarEditContent>
+  <div class="dropdown-item c-hand" [ngbTooltip]="avatarFormat" placement="right" container="body">
+    <my-global-icon iconName="upload"></my-global-icon>
+    <span for="avatarfile" i18n>Upload a new avatar</span>
+    <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
+  </div>
+  <div class="dropdown-item c-hand" (click)="deleteAvatar()" (key.enter)="deleteAvatar()">
+    <my-global-icon iconName="delete"></my-global-icon>
+    <span i18n>Remove avatar</span>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.scss
new file mode 100644
index 000000000..8b0172315
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.scss
@@ -0,0 +1,54 @@
+@import '_variables';
+@import '_mixins';
+.actor {
+  display: flex;
+  img {
+    margin-right: 15px;
+    &:not(.channel) {
+      @include avatar(100px);
+    }
+    &.channel {
+      @include channel-avatar(100px);
+    }
+  }
+  .actor-info {
+    display: inline-flex;
+    flex-direction: column;
+    .actor-info-display-name {
+      font-size: 20px;
+      font-weight: $font-bold;
+      @media screen and (max-width: $small-view) {
+        font-size: 16px;
+      }
+    }
+    .actor-info-username {
+      position: relative;
+      font-size: 14px;
+      color: pvar(--greyForegroundColor);
+    }
+    .actor-info-followers {
+      font-size: 15px;
+      padding-bottom: .5rem;
+    }
+  }
+}
+.actor-img-edit-container {
+  position: relative;
+  width: 0;
+}
+.actor-img-edit-button {
+  top: 55px;
+  right: 45px;
+  border-radius: 50%;
+}
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts
index b459c591f..d0d269489 100644
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts
@@ -1,21 +1,27 @@
-import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
 import { Notifier, ServerService } from '@app/core'
+import { Account, VideoChannel } from '@app/shared/shared-main'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 import { getBytes } from '@root-helpers/bytes'
-import { Account } from '../account/account.model'
-import { VideoChannel } from '../video-channel/video-channel.model'
-import { Actor } from './actor.model'
 @Component({
-  selector: 'my-actor-avatar-info',
+  selector: 'my-actor-avatar-edit',
-  templateUrl: './actor-avatar-info.component.html',
+  templateUrl: './actor-avatar-edit.component.html',
-  styleUrls: [ './actor-avatar-info.component.scss' ]
+  styleUrls: [
+    './actor-image-edit.scss',
+    './actor-avatar-edit.component.scss'
+  ]
 })
-export class ActorAvatarInfoComponent implements OnInit, OnChanges {
+export class ActorAvatarEditComponent implements OnInit {
  @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
  @ViewChild('avatarPopover') avatarPopover: NgbPopover
  @Input() actor: VideoChannel | Account
+  @Input() editable = true
+  @Input() displaySubscribers = true
+  @Input() displayUsername = true
+  @Input() previewImage = false
  @Output() avatarChange = new EventEmitter<FormData>()
  @Output() avatarDelete = new EventEmitter<void>()
@@ -24,9 +30,10 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
  maxAvatarSize = 0
  avatarExtensions = ''
-  private avatarUrl: string
+  preview: SafeResourceUrl
  constructor (
+    private sanitizer: DomSanitizer,
    private serverService: ServerService,
    private notifier: Notifier
  ) { }
@@ -42,12 +49,6 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
        })
  }
-  ngOnChanges (changes: SimpleChanges) {
-    if (changes['actor']) {
-      this.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.actor)
-    }
-  }
  onAvatarChange (input: HTMLInputElement) {
    this.avatarfileInput = new ElementRef(input)
@@ -61,13 +62,22 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
    formData.append('avatarfile', avatarfile)
    this.avatarPopover?.close()
    this.avatarChange.emit(formData)
+    if (this.previewImage) {
+      this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(avatarfile))
+    }
  }
  deleteAvatar () {
+    this.preview = undefined
    this.avatarDelete.emit()
  }
  hasAvatar () {
-    return !!this.avatarUrl
+    return !!this.preview || !!this.actor.avatar
+  }
+  isChannel () {
+    return !!(this.actor as VideoChannel).ownerAccount
  }
 }
diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html
new file mode 100644
index 000000000..266fc26c5
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html
@@ -0,0 +1,34 @@
+<div class="actor" *ngIf="actor">
+  <div class="actor-img-edit-container">
+    <div class="banner-placeholder">
+      <img *ngIf="hasBanner()" [src]="preview || actor.bannerUrl" alt="Banner" />
+    </div>
+    <div *ngIf="!hasBanner()" class="actor-img-edit-button" [ngbTooltip]="bannerFormat" placement="right" container="body">
+      <my-global-icon iconName="upload"></my-global-icon>
+      <label for="bannerfile" i18n>Upload a new banner</label>
+      <input #bannerfileInput type="file" name="bannerfile" id="bannerfile" [accept]="bannerExtensions" (change)="onBannerChange(bannerfileInput)"/>
+    </div>
+    <div
+      *ngIf="hasBanner()" class="actor-img-edit-button"
+      #bannerPopover="ngbPopover" [ngbPopover]="bannerEditContent" popoverClass="popover-image-info" autoClose="outside" placement="right"
+    >
+      <my-global-icon iconName="edit"></my-global-icon>
+      <label for="bannerMenu" i18n>Change your banner</label>
+    </div>
+  </div>
+</div>
+<ng-template #bannerEditContent>
+  <div class="dropdown-item c-hand" [ngbTooltip]="bannerFormat" placement="right" container="body">
+    <my-global-icon iconName="upload"></my-global-icon>
+    <span for="bannerfile" i18n>Upload a new banner</span>
+    <input #bannerfileInput type="file" name="bannerfile" id="bannerfile" [accept]="bannerExtensions" (change)="onBannerChange(bannerfileInput)"/>
+  </div>
+  <div class="dropdown-item c-hand" (click)="deleteBanner()" (key.enter)="deleteBanner()">
+    <my-global-icon iconName="delete"></my-global-icon>
+    <span i18n>Remove banner</span>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.scss b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.scss
new file mode 100644
index 000000000..23606f871
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.scss
@@ -0,0 +1,27 @@
+@import '_variables';
+@import '_mixins';
+.banner-placeholder {
+  @include block-ratio('> div, > img', $banner-inverted-ratio);
+}
+.banner-placeholder {
+  background-color: pvar(--greyBackgroundColor);
+}
+.actor-img-edit-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.actor-img-edit-button {
+  position: absolute;
+  width: auto;
+  label {
+    font-weight: $font-semibold;
+    margin-bottom: 0;
+  }
+}
diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
new file mode 100644
index 000000000..8c12d3c4c
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
@@ -0,0 +1,76 @@
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
+import { Notifier, ServerService } from '@app/core'
+import { VideoChannel } from '@app/shared/shared-main'
+import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
+import { getBytes } from '@root-helpers/bytes'
+@Component({
+  selector: 'my-actor-banner-edit',
+  templateUrl: './actor-banner-edit.component.html',
+  styleUrls: [
+    './actor-image-edit.scss',
+    './actor-banner-edit.component.scss'
+  ]
+})
+export class ActorBannerEditComponent implements OnInit {
+  @ViewChild('bannerfileInput') bannerfileInput: ElementRef<HTMLInputElement>
+  @ViewChild('bannerPopover') bannerPopover: NgbPopover
+  @Input() actor: VideoChannel
+  @Input() previewImage = false
+  @Output() bannerChange = new EventEmitter<FormData>()
+  @Output() bannerDelete = new EventEmitter<void>()
+  bannerFormat = ''
+  maxBannerSize = 0
+  bannerExtensions = ''
+  preview: SafeResourceUrl
+  constructor (
+    private sanitizer: DomSanitizer,
+    private serverService: ServerService,
+    private notifier: Notifier
+  ) { }
+  ngOnInit (): void {
+    this.serverService.getConfig()
+        .subscribe(config => {
+          this.maxBannerSize = config.banner.file.size.max
+          this.bannerExtensions = config.banner.file.extensions.join(', ')
+          // tslint:disable:max-line-length
+          this.bannerFormat = $localize`ratio 6/1, recommended size: 1600x266, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
+        })
+  }
+  onBannerChange (input: HTMLInputElement) {
+    this.bannerfileInput = new ElementRef(input)
+    const bannerfile = this.bannerfileInput.nativeElement.files[ 0 ]
+    if (bannerfile.size > this.maxBannerSize) {
+      this.notifier.error('Error', $localize`This image is too large.`)
+      return
+    }
+    const formData = new FormData()
+    formData.append('bannerfile', bannerfile)
+    this.bannerPopover?.close()
+    this.bannerChange.emit(formData)
+    if (this.previewImage) {
+      this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(bannerfile))
+    }
+  }
+  deleteBanner () {
+    this.preview = undefined
+    this.bannerDelete.emit()
+  }
+  hasBanner () {
+    return !!this.preview || !!this.actor.bannerUrl
+  }
+}
diff --git a/client/src/app/shared/shared-actor-image/actor-image-edit.scss b/client/src/app/shared/shared-actor-image/actor-image-edit.scss
new file mode 100644
index 000000000..918955a89
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/actor-image-edit.scss
@@ -0,0 +1,35 @@
+@import '_variables';
+@import '_mixins';
+.actor ::ng-deep .popover-image-info .popover-body {
+  padding: 0;
+  .dropdown-item {
+    padding: 6px 10px;
+    border-radius: 4px;
+    &:first-child {
+      @include peertube-file;
+      display: block;
+    }
+  }
+}
+.actor-img-edit-button {
+  @include peertube-button-file(21px);
+  @include button-with-icon(19px);
+  @include orange-button;
+  margin-top: 10px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  input {
+    width: 30px;
+    height: 30px;
+  }
+  my-global-icon {
+    right: 7px;
+  }
+}
diff --git a/client/src/app/shared/shared-actor-image/index.ts b/client/src/app/shared/shared-actor-image/index.ts
new file mode 100644
index 000000000..18a9038eb
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/index.ts
@@ -0,0 +1 @@
+export * from './shared-actor-image.module'
diff --git a/client/src/app/shared/shared-actor-image/shared-actor-image.module.ts b/client/src/app/shared/shared-actor-image/shared-actor-image.module.ts
new file mode 100644
index 000000000..6044f9925
--- /dev/null
+++ b/client/src/app/shared/shared-actor-image/shared-actor-image.module.ts
@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { SharedGlobalIconModule } from '../shared-icons'
+import { SharedMainModule } from '../shared-main'
+import { ActorAvatarEditComponent } from './actor-avatar-edit.component'
+import { ActorBannerEditComponent } from './actor-banner-edit.component'
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedMainModule,
+    SharedGlobalIconModule
+  ],
+  declarations: [
+    ActorAvatarEditComponent,
+    ActorBannerEditComponent
+  ],
+  exports: [
+    ActorAvatarEditComponent,
+    ActorBannerEditComponent
+  ],
+  providers: [ ]
+})
+export class SharedActorImageModule { }
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.html b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
index c358cb119..c228069b5 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.html
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
@@ -1,10 +1,23 @@
 <div [formGroup]="form">
-  <label *ngIf="setting.type !== 'input-checkbox'" [attr.for]="setting.name" [innerHTML]="setting.label"></label>
+  <label *ngIf="setting.label && setting.type !== 'input-checkbox'" [attr.for]="setting.name" [innerHTML]="setting.label"></label>
+  <my-peertube-checkbox
+    *ngIf="setting.type === 'input-checkbox'"
+    [inputName]="setting.name"
+    [formControlName]="setting.name"
+    [labelInnerHTML]="setting.label"
+  ></my-peertube-checkbox>
  <div *ngIf="setting.descriptionHTML" class="label-small-info" [innerHTML]="setting.descriptionHTML"></div>
  <input *ngIf="setting.type === 'input'" type="text" [id]="setting.name" [formControlName]="setting.name" />
+  <div *ngIf="setting.type === 'select'" class="peertube-select-container">
+    <select  [id]="setting.name" [formControlName]="setting.name" class="form-control">
+      <option *ngFor="let option of setting.options" [value]="option.value">{{ option.label }}</option>
+    </select>
+  </div>
  <my-input-toggle-hidden *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [inputId]="setting.name"></my-input-toggle-hidden>
  <textarea *ngIf="setting.type === 'input-textarea'" type="text" [id]="setting.name" [formControlName]="setting.name"></textarea>
@@ -25,12 +38,7 @@
    [classes]="{ 'input-error': formErrors['settings.name'] }"
  ></my-markdown-textarea>
-  <my-peertube-checkbox
+  <div *ngIf="setting.type === 'html'" [innerHTML]="setting.html"></div>
-    *ngIf="setting.type === 'input-checkbox'"
-    [inputName]="setting.name"
-    [formControlName]="setting.name"
-    [labelInnerHTML]="setting.label"
-  ></my-peertube-checkbox>
  <div *ngIf="formErrors[setting.name]" class="form-error">
    {{ formErrors[setting.name] }}
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.scss b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
index 89193ed85..45ba28951 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
@@ -22,3 +22,7 @@ textarea {
  margin-bottom: 10px;
  font-size: 13px;
 }
+my-peertube-checkbox + .label-small-info {
+  margin-top: 5px;
+}
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
index e7441e4c1..9f252f299 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
@@ -12,9 +12,10 @@
    <button
      *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button"
-      class="btn btn-outline-secondary" i18n-title title="Copy"
+      class="btn btn-outline-secondary text-uppercase" i18n-title title="Copy"
    >
-      <span class="glyphicon glyphicon-copy"></span>
+      <span class="glyphicon glyphicon-duplicate"></span>
+      Copy
    </button>
  </div>
 </div>
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index fcddfea03..8203c7d1c 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -131,7 +131,7 @@ $input-border-radius: 3px;
    border-right: none;
    :last-child {
-      margin-right: $not-expanded-horizontal-margins;
+      margin-right: pvar(--horizontalMarginContent);
    }
  }
diff --git a/client/src/app/shared/shared-forms/select/select-options.component.ts b/client/src/app/shared/shared-forms/select/select-options.component.ts
index 2890670e5..8482b9dea 100644
--- a/client/src/app/shared/shared-forms/select/select-options.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-options.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Input } from '@angular/core'
+import { Component, forwardRef, HostListener, Input } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { SelectOptionsItem } from '../../../../types/select-options-item.model'
@@ -26,6 +26,13 @@ export class SelectOptionsComponent implements ControlValueAccessor {
  propagateChange = (_: any) => { /* empty */ }
+  // Allow plugins to update our value
+  @HostListener('change', [ '$event.target' ])
+  handleChange (event: any) {
+    this.writeValue(event.value)
+    this.onModelChange()
+  }
  writeValue (id: number | string) {
    this.selectedId = id
  }
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
index 275600d60..2f6b420e3 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
@@ -31,7 +31,7 @@ ngb-accordion ::ng-deep {
      padding: 0;
      & + .collapse.show {
-        background-color: var(--submenuColor);
+        background-color: var(--submenuBackgroundColor);
      }
    }
  }
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.html b/client/src/app/shared/shared-instance/instance-features-table.component.html
index ce2557147..d505b6739 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.html
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.html
@@ -11,7 +11,7 @@
    <tr>
      <th i18n class="label" scope="row">
        <div>Default NSFW/sensitive videos policy</div>
-        <div class="more-info">can be redefined by the users</div>
+        <div class="c-hand more-info" (click)="openQuickSettingsHighlight()">can be redefined by the users</div>
      </th>
      <td class="value">{{ buildNSFWLabel() }}</td>
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.ts b/client/src/app/shared/shared-instance/instance-features-table.component.ts
index 0166157f9..c3b3dfdfd 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.ts
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { ServerService } from '@app/core'
 import { ServerConfig } from '@shared/models'
+import { PeertubeModalService } from '../shared-main/peertube-modal/peertube-modal.service'
 @Component({
  selector: 'my-instance-features-table',
@@ -11,7 +12,10 @@ export class InstanceFeaturesTableComponent implements OnInit {
  quotaHelpIndication = ''
  serverConfig: ServerConfig
-  constructor (private serverService: ServerService) { }
+  constructor (
+    private serverService: ServerService,
+    private modalService: PeertubeModalService
+  ) { }
  get initialUserVideoQuota () {
    return this.serverConfig.user.videoQuota
@@ -56,6 +60,10 @@ export class InstanceFeaturesTableComponent implements OnInit {
    return this.serverService.getServerVersionAndCommit()
  }
+  openQuickSettingsHighlight () {
+    this.modalService.openQuickSettingsSubject.next()
+  }
  private getApproximateTime (seconds: number) {
    const hours = Math.floor(seconds / 3600)
    let pluralSuffix = ''
diff --git a/client/src/app/shared/shared-main/account/account.model.ts b/client/src/app/shared/shared-main/account/account.model.ts
index b71a893d1..65e6798d4 100644
--- a/client/src/app/shared/shared-main/account/account.model.ts
+++ b/client/src/app/shared/shared-main/account/account.model.ts
@@ -1,4 +1,4 @@
-import { Account as ServerAccount, Avatar } from '@shared/models'
+import { Account as ServerAccount, Actor as ServerActor, ActorImage } from '@shared/models'
 import { Actor } from './actor.model'
 export class Account extends Actor implements ServerAccount {
@@ -13,7 +13,7 @@ export class Account extends Actor implements ServerAccount {
  userId?: number
-  static GET_ACTOR_AVATAR_URL (actor: object) {
+  static GET_ACTOR_AVATAR_URL (actor: { avatar?: { url?: string, path: string } }) {
    return Actor.GET_ACTOR_AVATAR_URL(actor) || this.GET_DEFAULT_AVATAR_URL()
  }
@@ -38,7 +38,7 @@ export class Account extends Actor implements ServerAccount {
    this.mutedServerByInstance = false
  }
-  updateAvatar (newAvatar: Avatar) {
+  updateAvatar (newAvatar: ActorImage) {
    this.avatar = newAvatar
    this.updateComputedAttributes()
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.html b/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
deleted file mode 100644
index 30584fd00..000000000
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<ng-container *ngIf="actor">
-  <div class="actor">
-    <div class="d-flex">
-      <img [src]="actor.avatarUrl" alt="Avatar" />
-      <div class="actor-img-edit-container">
-        <div *ngIf="!hasAvatar()" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
-          <my-global-icon iconName="upload"></my-global-icon>
-          <label class="sr-only" for="avatarfile" i18n>Upload a new avatar</label>
-          <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
-        </div>
-        <div *ngIf="hasAvatar()" class="actor-img-edit-button" #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-avatar-info" autoClose="outside" placement="right">
-          <my-global-icon iconName="edit"></my-global-icon>
-          <label class="sr-only" for="avatarMenu" i18n>Change your avatar</label>
-        </div>
-      </div>
-    </div>
-    <div class="actor-info">
-      <div class="actor-info-names">
-        <div class="actor-info-display-name">{{ actor.displayName }}</div>
-        <div class="actor-info-username">{{ actor.name }}</div>
-      </div>
-      <div i18n class="actor-info-followers">{{ actor.followersCount }} subscribers</div>
-    </div>
-  </div>
-</ng-container>
-<ng-template #avatarEditContent>
-  <div class="dropdown-item c-hand" [ngbTooltip]="avatarFormat" placement="right" container="body">
-    <my-global-icon iconName="upload"></my-global-icon>
-    <span for="avatarfile" i18n>Upload a new avatar</span>
-    <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
-  </div>
-  <div class="dropdown-item c-hand" (click)="deleteAvatar()" (key.enter)="deleteAvatar()">
-    <my-global-icon iconName="delete"></my-global-icon>
-    <span i18n>Remove avatar</span>
-  </div>
-</ng-template>
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss b/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
deleted file mode 100644
index 57c298508..000000000
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-@import '_variables';
-@import '_mixins';
-.actor {
-  display: flex;
-  img {
-    @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);
-      @include orange-button;
-    
-      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;
-      .actor-info-display-name {
-        font-size: 20px;
-        font-weight: $font-bold;
-        @media screen and (max-width: $small-view) {
-          font-size: 16px;
-        }
-      }
-      .actor-info-username {
-        margin-left: 7px;
-        position: relative;
-        top: 2px;
-        font-size: 14px;
-        color: $grey-actor-name;
-      }
-    }
-    .actor-info-followers {
-      font-size: 15px;
-      padding-bottom: .5rem;
-    }
-  }
-}
-.actor-img-edit-container ::ng-deep .popover-avatar-info .popover-body {
-  padding: 0;
-  .dropdown-item {
-    padding: 6px 10px;
-    border-radius: 4px;
-    &:first-child {
-      @include peertube-file;
-      display: block;
-    }
-  }
-}
diff --git a/client/src/app/shared/shared-main/account/actor.model.ts b/client/src/app/shared/shared-main/account/actor.model.ts
index 8222c9769..4b036341f 100644
--- a/client/src/app/shared/shared-main/account/actor.model.ts
+++ b/client/src/app/shared/shared-main/account/actor.model.ts
@@ -1,17 +1,20 @@
-import { Actor as ActorServer, Avatar } from '@shared/models'
 import { getAbsoluteAPIUrl } from '@app/helpers'
+import { Actor as ServerActor, ActorImage } from '@shared/models'
-export abstract class Actor implements ActorServer {
+export abstract class Actor implements ServerActor {
  id: number
-  url: string
  name: string
  host: string
+  url: string
  followingCount: number
  followersCount: number
  createdAt: Date | string
  updatedAt: Date | string
-  avatar: Avatar
+  avatar: ActorImage
  avatarUrl: string
  isLocal: boolean
@@ -24,6 +27,8 @@ export abstract class Actor implements ActorServer {
      return absoluteAPIUrl + actor.avatar.path
    }
+    return ''
  }
  static CREATE_BY_STRING (accountName: string, host: string, forceHostname = false) {
@@ -42,11 +47,11 @@ export abstract class Actor implements ActorServer {
    return host.trim() === thisHost
  }
-  protected constructor (hash: ActorServer) {
+  protected constructor (hash: Partial<ServerActor>) {
    this.id = hash.id
-    this.url = hash.url
+    this.url = hash.url ?? ''
-    this.name = hash.name
+    this.name = hash.name ?? ''
-    this.host = hash.host
+    this.host = hash.host ?? ''
    this.followingCount = hash.followingCount
    this.followersCount = hash.followersCount
diff --git a/client/src/app/shared/shared-main/account/index.ts b/client/src/app/shared/shared-main/account/index.ts
index 61c800e56..b80ddb9f5 100644
--- a/client/src/app/shared/shared-main/account/index.ts
+++ b/client/src/app/shared/shared-main/account/index.ts
@@ -1,5 +1,3 @@
 export * from './account.model'
 export * from './account.service'
-export * from './actor-avatar-info.component'
 export * from './actor.model'
-export * from './video-avatar-channel.component'
diff --git a/client/src/app/shared/shared-main/angular/autofocus.directive.ts b/client/src/app/shared/shared-main/angular/autofocus.directive.ts
new file mode 100644
index 000000000..5f087d79d
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/autofocus.directive.ts
@@ -0,0 +1,12 @@
+import { AfterViewInit, Directive, ElementRef } from '@angular/core'
+@Directive({
+  selector: '[autofocus]'
+})
+export class AutofocusDirective implements AfterViewInit {
+  constructor (private host: ElementRef) { }
+  ngAfterViewInit () {
+    this.host.nativeElement.focus()
+  }
+}
diff --git a/client/src/app/shared/shared-main/angular/index.ts b/client/src/app/shared/shared-main/angular/index.ts
index 29f8b3650..8ea47bb33 100644
--- a/client/src/app/shared/shared-main/angular/index.ts
+++ b/client/src/app/shared/shared-main/angular/index.ts
@@ -1,3 +1,4 @@
+export * from './autofocus.directive'
 export * from './bytes.pipe'
 export * from './duration-formatter.pipe'
 export * from './from-now.pipe'
diff --git a/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts b/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts
index 3ddaffbdf..4fe3b964d 100644
--- a/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts
+++ b/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts
@@ -27,7 +27,9 @@ export class AuthInterceptor implements HttpInterceptor {
                 catchError((err: HttpErrorResponse) => {
                   if (err.status === HttpStatusCode.UNAUTHORIZED_401 && err.error && err.error.code === 'invalid_token') {
                     return this.handleTokenExpired(req, next)
-                   } else if (err.status === HttpStatusCode.UNAUTHORIZED_401) {
+                   }
+                   if (err.status === HttpStatusCode.UNAUTHORIZED_401) {
                     return this.handleNotAuthenticated(err)
                   }
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.scss b/client/src/app/shared/shared-main/feeds/feed.component.scss
index 333d59440..b655ee708 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.scss
+++ b/client/src/app/shared/shared-main/feeds/feed.component.scss
@@ -2,19 +2,17 @@
 @import '_mixins';
 .feed {
-  width: min-content;
+  width: 100%;
  a {
    color: black;
    display: block;
  }
+}
-  my-global-icon {
+my-global-icon {
-    cursor: pointer;
+  cursor: pointer;
-    width: 12px;
+  width: 100%;
-    position: relative;
-    top: -2px;
-    @include apply-svg-color(pvar(--mainForegroundColor))
+  @include apply-svg-color(pvar(--mainForegroundColor))
-  }
 }
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.html b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
index fb0d97122..c20c02e23 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.html
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
@@ -1,14 +1,15 @@
-<span>
+<div class="root">
-  <my-global-icon iconName="search" aria-label="Search" role="button" (click)="showInput()"></my-global-icon>
  <input
    #ref
    type="text"
    [(ngModel)]="value"
-    (focusout)="focusLost()"
    (keyup.enter)="searchChange()"
-    [hidden]="!shown"
+    [hidden]="!inputShown"
    [name]="name"
    [placeholder]="placeholder"
  >
-</span>
+  <my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon>
+  <my-global-icon *ngIf="!alwaysShow && inputShown" i18n-title title="Close search" iconName="cross" (click)="hideInput()"></my-global-icon>
+</div>
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
index 591b04fb2..5ae48f81b 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
@@ -1,29 +1,29 @@
 @import '_variables';
 @import '_mixins';
-span {
+.root {
-  opacity: .6;
+  display: flex;
-  
-  &:focus-within {
-    opacity: 1;
-  }
 }
 my-global-icon {
-  height: 18px;
+  height: 28px;
-  position: relative;
+  width: 28px;
-  top: -2px;
+  margin-left: 10px;
-}
+  cursor: pointer;
-input {
+  &:hover {
-  @include peertube-input-text(150px);
+    color: pvar(--mainHoverColor);
+  }
-  height: 22px; // maximum height for the account/video-channels links
+  &[iconName=search] {
-  padding-left: 10px;
+    color: pvar(--mainForegroundColor);
-  background-color: transparent;
+  }
-  border: none;
-  &::placeholder {
+  &[iconName=cross] {
-    font-size: 15px;
+    color: pvar(--mainForegroundColor);
  }
 }
+input {
+  @include peertube-input-text(200px);
+}
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.ts b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
index 86ae9ab42..224d71134 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
@@ -1,7 +1,7 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
 import { Subject } from 'rxjs'
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
 @Component({
  selector: 'simple-search-input',
@@ -13,11 +13,14 @@ export class SimpleSearchInputComponent implements OnInit {
  @Input() name = 'search'
  @Input() placeholder = $localize`Search`
+  @Input() iconTitle = $localize`Search`
+  @Input() alwaysShow = true
  @Output() searchChanged = new EventEmitter<string>()
+  @Output() inputDisplayChanged = new EventEmitter<boolean>()
  value = ''
-  shown: boolean
+  inputShown: boolean
  private searchSubject = new Subject<string>()
@@ -35,20 +38,51 @@ export class SimpleSearchInputComponent implements OnInit {
        .subscribe(value => this.searchChanged.emit(value))
    this.searchSubject.next(this.value)
+    if (this.isInputShown()) this.showInput(false)
  }
-  showInput () {
+  isInputShown () {
-    this.shown = true
+    if (this.alwaysShow) return true
-    setTimeout(() => this.input.nativeElement.focus())
+    return this.inputShown
+  }
+  onIconClick () {
+    if (!this.isInputShown()) {
+      this.showInput()
+      return
+    }
+    this.searchChange()
+  }
+  showInput (focus = true) {
+    this.inputShown = true
+    this.inputDisplayChanged.emit(this.inputShown)
+    if (focus) {
+      setTimeout(() => this.input.nativeElement.focus())
+    }
+  }
+  hideInput () {
+    this.inputShown = false
+    if (this.isInputShown() === false) {
+      this.inputDisplayChanged.emit(this.inputShown)
+    }
  }
  focusLost () {
-    if (this.value !== '') return
+    if (this.value) return
-    this.shown = false
+    this.hideInput()
  }
  searchChange () {
-    this.router.navigate(['./search'], { relativeTo: this.route })
+    this.router.navigate([ './search' ], { relativeTo: this.route })
    this.searchSubject.next(this.value)
  }
 }
diff --git a/client/src/app/shared/shared-main/peertube-modal/index.ts b/client/src/app/shared/shared-main/peertube-modal/index.ts
new file mode 100644
index 000000000..d631522e4
--- /dev/null
+++ b/client/src/app/shared/shared-main/peertube-modal/index.ts
@@ -0,0 +1 @@
+export * from './peertube-modal.service'
diff --git a/client/src/app/shared/shared-main/peertube-modal/peertube-modal.service.ts b/client/src/app/shared/shared-main/peertube-modal/peertube-modal.service.ts
new file mode 100644
index 000000000..79da08a5c
--- /dev/null
+++ b/client/src/app/shared/shared-main/peertube-modal/peertube-modal.service.ts
@@ -0,0 +1,7 @@
+import { Injectable } from '@angular/core'
+import { Subject } from 'rxjs'
+@Injectable({ providedIn: 'root' })
+export class PeertubeModalService {
+  openQuickSettingsSubject = new Subject<void>()
+}
diff --git a/client/src/app/shared/shared-main/plugins/index.ts b/client/src/app/shared/shared-main/plugins/index.ts
new file mode 100644
index 000000000..f36dab624
--- /dev/null
+++ b/client/src/app/shared/shared-main/plugins/index.ts
@@ -0,0 +1 @@
+export * from './plugin-placeholder.component'
diff --git a/client/src/app/shared/shared-main/plugins/plugin-placeholder.component.ts b/client/src/app/shared/shared-main/plugins/plugin-placeholder.component.ts
new file mode 100644
index 000000000..93ba9fb9b
--- /dev/null
+++ b/client/src/app/shared/shared-main/plugins/plugin-placeholder.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core'
+import { PluginElementPlaceholder } from '@shared/models'
+@Component({
+  selector: 'my-plugin-placeholder',
+  template: '<div [id]="getId()"></div>'
+})
+export class PluginPlaceholderComponent {
+  @Input() pluginId: PluginElementPlaceholder
+  getId () {
+    return 'plugin-placeholder-' + this.pluginId
+  }
+}
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 9d550996d..772198cb2 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -6,19 +6,20 @@ import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import {
+  NgbButtonsModule,
  NgbCollapseModule,
  NgbDropdownModule,
  NgbModalModule,
  NgbNavModule,
  NgbPopoverModule,
-  NgbTooltipModule,
+  NgbTooltipModule
-  NgbButtonsModule
 } from '@ng-bootstrap/ng-bootstrap'
 import { LoadingBarModule } from '@ngx-loading-bar/core'
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
 import { SharedGlobalIconModule } from '../shared-icons'
-import { AccountService, ActorAvatarInfoComponent, VideoAvatarChannelComponent } from './account'
+import { AccountService } from './account'
 import {
+  AutofocusDirective,
  BytesPipe,
  DurationFormatterPipe,
  FromNowPipe,
@@ -31,7 +32,8 @@ import { ActionDropdownComponent, ButtonComponent, DeleteButtonComponent, EditBu
 import { DateToggleComponent } from './date'
 import { FeedComponent } from './feeds'
 import { LoaderComponent, SmallLoaderComponent } from './loaders'
-import { HelpComponent, ListOverflowComponent, TopMenuDropdownComponent, SimpleSearchInputComponent } from './misc'
+import { HelpComponent, ListOverflowComponent, SimpleSearchInputComponent, TopMenuDropdownComponent } from './misc'
+import { PluginPlaceholderComponent } from './plugins'
 import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users'
 import { RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
 import { VideoCaptionService } from './video-caption'
@@ -64,13 +66,11 @@ import { VideoChannelService } from './video-channel'
  ],
  declarations: [
-    VideoAvatarChannelComponent,
-    ActorAvatarInfoComponent,
    FromNowPipe,
    NumberFormatterPipe,
    BytesPipe,
    DurationFormatterPipe,
+    AutofocusDirective,
    InfiniteScrollerDirective,
    PeerTubeTemplateDirective,
@@ -93,7 +93,9 @@ import { VideoChannelService } from './video-channel'
    SimpleSearchInputComponent,
    UserQuotaComponent,
-    UserNotificationsComponent
+    UserNotificationsComponent,
+    PluginPlaceholderComponent
  ],
  exports: [
@@ -118,13 +120,11 @@ import { VideoChannelService } from './video-channel'
    PrimeSharedModule,
-    VideoAvatarChannelComponent,
-    ActorAvatarInfoComponent,
    FromNowPipe,
    BytesPipe,
    NumberFormatterPipe,
    DurationFormatterPipe,
+    AutofocusDirective,
    InfiniteScrollerDirective,
    PeerTubeTemplateDirective,
@@ -147,7 +147,9 @@ import { VideoChannelService } from './video-channel'
    SimpleSearchInputComponent,
    UserQuotaComponent,
-    UserNotificationsComponent
+    UserNotificationsComponent,
+    PluginPlaceholderComponent
  ],
  providers: [
diff --git a/client/src/app/shared/shared-main/users/user-notification.model.ts b/client/src/app/shared/shared-main/users/user-notification.model.ts
index 1211995fd..88a4811da 100644
--- a/client/src/app/shared/shared-main/users/user-notification.model.ts
+++ b/client/src/app/shared/shared-main/users/user-notification.model.ts
@@ -6,6 +6,7 @@ import {
  AbuseState,
  ActorInfo,
  FollowState,
+  PluginType,
  UserNotification as UserNotificationServer,
  UserNotificationType,
  UserRight,
@@ -74,20 +75,40 @@ export class UserNotification implements UserNotificationServer {
    }
  }
+  plugin?: {
+    name: string
+    type: PluginType
+    latestVersion: string
+  }
+  peertube?: {
+    latestVersion: string
+  }
  createdAt: string
  updatedAt: string
  // Additional fields
  videoUrl?: string
  commentUrl?: any[]
  abuseUrl?: string
  abuseQueryParams?: { [id: string]: string } = {}
  videoAutoBlacklistUrl?: string
  accountUrl?: string
  videoImportIdentifier?: string
  videoImportUrl?: string
  instanceFollowUrl?: string
+  peertubeVersionLink?: string
+  pluginUrl?: string
+  pluginQueryParams?: { [id: string]: string } = {}
  constructor (hash: UserNotificationServer, user: AuthUser) {
    this.id = hash.id
    this.type = hash.type
@@ -114,6 +135,9 @@ export class UserNotification implements UserNotificationServer {
      this.actorFollow = hash.actorFollow
      if (this.actorFollow) this.setAccountAvatarUrl(this.actorFollow.follower)
+      this.plugin = hash.plugin
+      this.peertube = hash.peertube
      this.createdAt = hash.createdAt
      this.updatedAt = hash.updatedAt
@@ -197,6 +221,15 @@ export class UserNotification implements UserNotificationServer {
        case UserNotificationType.AUTO_INSTANCE_FOLLOWING:
          this.instanceFollowUrl = '/admin/follows/following-list'
          break
+        case UserNotificationType.NEW_PEERTUBE_VERSION:
+          this.peertubeVersionLink = 'https://joinpeertube.org/news'
+          break
+        case UserNotificationType.NEW_PLUGIN_VERSION:
+          this.pluginUrl = `/admin/plugins/list-installed`
+          this.pluginQueryParams.pluginType = this.plugin.type + ''
+          break
      }
    } catch (err) {
      this.type = null
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.html b/client/src/app/shared/shared-main/users/user-notifications.component.html
index 265af8d55..325f0eaae 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.html
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.html
@@ -4,7 +4,7 @@
  <div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }" (click)="markAsRead(notification)">
    <ng-container [ngSwitch]="notification.type">
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION">
+      <ng-container *ngSwitchCase="1"> <!-- UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION -->
        <ng-container *ngIf="notification.video; then hasVideo; else noVideo"></ng-container>
        <ng-template #hasVideo>
@@ -26,7 +26,7 @@
        </ng-template>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO">
+      <ng-container *ngSwitchCase="5"> <!-- UserNotificationType.UNBLACKLIST_ON_MY_VIDEO -->
        <my-global-icon iconName="undo" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -34,7 +34,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.BLACKLIST_ON_MY_VIDEO">
+      <ng-container *ngSwitchCase="4"> <!-- UserNotificationType.BLACKLIST_ON_MY_VIDEO -->
        <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -42,7 +42,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_ABUSE_FOR_MODERATORS">
+      <ng-container *ngSwitchCase="3"> <!-- UserNotificationType.NEW_ABUSE_FOR_MODERATORS -->
        <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
        <div class="message" *ngIf="notification.videoUrl" i18n>
@@ -63,7 +63,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.ABUSE_STATE_CHANGE">
+      <ng-container *ngSwitchCase="15"> <!-- UserNotificationType.ABUSE_STATE_CHANGE -->
        <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -73,7 +73,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.ABUSE_NEW_MESSAGE">
+      <ng-container *ngSwitchCase="16"> <!-- UserNotificationType.ABUSE_NEW_MESSAGE -->
        <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -81,7 +81,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS">
+      <ng-container *ngSwitchCase="12"> <!-- UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS -->
        <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -89,7 +89,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_COMMENT_ON_MY_VIDEO">
+      <ng-container *ngSwitchCase="2">
        <ng-container *ngIf="notification.comment">
          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
            <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
@@ -109,7 +109,7 @@
        </ng-container>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.MY_VIDEO_PUBLISHED">
+      <ng-container *ngSwitchCase="6"> <!-- UserNotificationType.MY_VIDEO_PUBLISHED -->
        <my-global-icon iconName="film" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -117,7 +117,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_SUCCESS">
+      <ng-container *ngSwitchCase="7"> <!-- UserNotificationType.MY_VIDEO_IMPORT_SUCCESS -->
        <my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -125,7 +125,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_ERROR">
+      <ng-container *ngSwitchCase="8"> <!-- UserNotificationType.MY_VIDEO_IMPORT_ERROR -->
        <my-global-icon iconName="cloud-error" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -133,7 +133,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_USER_REGISTRATION">
+      <ng-container *ngSwitchCase="9"> <!-- UserNotificationType.NEW_USER_REGISTRATION -->
        <my-global-icon iconName="user-add" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -141,7 +141,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_FOLLOW">
+      <ng-container *ngSwitchCase="10"> <!-- UserNotificationType.NEW_FOLLOW -->
        <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
          <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.actorFollow.follower.avatarUrl" />
        </a>
@@ -154,7 +154,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.COMMENT_MENTION">
+      <ng-container *ngSwitchCase="11">
        <ng-container *ngIf="notification.comment">
          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
            <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
@@ -174,7 +174,7 @@
        </ng-container>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_INSTANCE_FOLLOWER">
+      <ng-container *ngSwitchCase="13"> <!-- UserNotificationType.NEW_INSTANCE_FOLLOWER -->
        <my-global-icon iconName="users" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -183,7 +183,7 @@
        </div>
      </ng-container>
-      <ng-container *ngSwitchCase="UserNotificationType.AUTO_INSTANCE_FOLLOWING">
+      <ng-container *ngSwitchCase="14"> <!-- UserNotificationType.AUTO_INSTANCE_FOLLOWING -->
        <my-global-icon iconName="users" aria-hidden="true"></my-global-icon>
        <div class="message" i18n>
@@ -191,6 +191,22 @@
        </div>
      </ng-container>
+      <ng-container *ngSwitchCase="17"> <!-- UserNotificationType.NEW_PLUGIN_VERSION -->
+        <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
+        <div class="message" i18n>
+          <a (click)="markAsRead(notification)" [routerLink]="notification.pluginUrl" [queryParams]="notification.pluginQueryParams">A new version of the plugin/theme {{ notification.plugin.name }}</a> is available: {{ notification.plugin.latestVersion }}
+        </div>
+      </ng-container>
+      <ng-container *ngSwitchCase="18"> <!-- UserNotificationType.NEW_PEERTUBE_VERSION -->
+        <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
+        <div class="message" i18n>
+            <a (click)="markAsRead(notification)" [href]="notification.peertubeVersionLink" target="_blank" rel="noopener noreferer">A new version of PeerTube</a> is available: {{ notification.peertube.latestVersion }}
+        </div>
+      </ng-container>
      <ng-container *ngSwitchDefault>
        <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.ts b/client/src/app/shared/shared-main/users/user-notifications.component.ts
index 387c49d94..d7c722355 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.ts
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.ts
@@ -21,9 +21,6 @@ export class UserNotificationsComponent implements OnInit {
  notifications: UserNotification[] = []
  sortField = 'createdAt'
-  // So we can access it in the template
-  UserNotificationType = UserNotificationType
  componentPagination: ComponentPagination
  onDataSubject = new Subject<any[]>()
@@ -48,7 +45,7 @@ export class UserNotificationsComponent implements OnInit {
  }
  loadNotifications (reset?: boolean) {
-    this.userNotificationService.listMyNotifications({
+    const options = {
      pagination: this.componentPagination,
      ignoreLoadingBar: this.ignoreLoadingBar,
      sort: {
@@ -56,7 +53,9 @@ export class UserNotificationsComponent implements OnInit {
        // if we order by creation date, we want DESC. all other fields are ASC (like unread).
        order: this.sortField === 'createdAt' ? -1 : 1
      }
-    })
+    }
+    this.userNotificationService.listMyNotifications(options)
        .subscribe(
          result => {
            this.notifications = reset ? result.data : this.notifications.concat(result.data)
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
index c6a63fe6c..1ba3fcc0e 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
@@ -1,15 +1,22 @@
-import { VideoChannel as ServerVideoChannel, ViewsPerDate, Account, Avatar } from '@shared/models'
+import { getAbsoluteAPIUrl } from '@app/helpers'
+import { Account as ServerAccount, ActorImage, VideoChannel as ServerVideoChannel, ViewsPerDate } from '@shared/models'
+import { Account } from '../account/account.model'
 import { Actor } from '../account/actor.model'
 export class VideoChannel extends Actor implements ServerVideoChannel {
  displayName: string
  description: string
  support: string
  isLocal: boolean
  nameWithHost: string
  nameWithHostForced: string
-  ownerAccount?: Account
+  banner: ActorImage
+  bannerUrl: string
+  ownerAccount?: ServerAccount
  ownerBy?: string
  ownerAvatarUrl?: string
@@ -21,19 +28,33 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
    return Actor.GET_ACTOR_AVATAR_URL(actor) || this.GET_DEFAULT_AVATAR_URL()
  }
+  static GET_ACTOR_BANNER_URL (channel: ServerVideoChannel) {
+    if (channel?.banner?.url) return channel.banner.url
+    if (channel && channel.banner) {
+      const absoluteAPIUrl = getAbsoluteAPIUrl()
+      return absoluteAPIUrl + channel.banner.path
+    }
+    return ''
+  }
  static GET_DEFAULT_AVATAR_URL () {
    return `${window.location.origin}/client/assets/images/default-avatar-videochannel.png`
  }
-  constructor (hash: ServerVideoChannel) {
+  constructor (hash: Partial<ServerVideoChannel>) {
    super(hash)
-    this.updateComputedAttributes()
    this.displayName = hash.displayName
    this.description = hash.description
    this.support = hash.support
+    this.banner = hash.banner
    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)
@@ -46,22 +67,34 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
    if (hash.ownerAccount) {
      this.ownerAccount = hash.ownerAccount
      this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host)
-      this.ownerAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.ownerAccount)
+      this.ownerAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.ownerAccount)
    }
+    this.updateComputedAttributes()
  }
-  updateAvatar (newAvatar: Avatar) {
+  updateAvatar (newAvatar: ActorImage) {
    this.avatar = newAvatar
    this.updateComputedAttributes()
  }
  resetAvatar () {
-    this.avatar = null
+    this.updateAvatar(null)
-    this.avatarUrl = VideoChannel.GET_DEFAULT_AVATAR_URL()
+  }
+  updateBanner (newBanner: ActorImage) {
+    this.banner = newBanner
+    this.updateComputedAttributes()
+  }
+  resetBanner () {
+    this.updateBanner(null)
  }
-  private updateComputedAttributes () {
+  updateComputedAttributes () {
    this.avatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this)
+    this.bannerUrl = VideoChannel.GET_ACTOR_BANNER_URL(this)
  }
 }
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
index eff3fad4d..e65261763 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
@@ -3,7 +3,7 @@ import { catchError, map, tap } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { ComponentPaginationLight, RestExtractor, RestService } from '@app/core'
-import { Avatar, ResultList, VideoChannel as VideoChannelServer, VideoChannelCreate, VideoChannelUpdate } from '@shared/models'
+import { ActorImage, ResultList, VideoChannel as VideoChannelServer, VideoChannelCreate, VideoChannelUpdate } from '@shared/models'
 import { environment } from '../../../../environments/environment'
 import { Account } from '../account'
 import { AccountService } from '../account/account.service'
@@ -82,15 +82,15 @@ export class VideoChannelService {
               )
  }
-  changeVideoChannelAvatar (videoChannelName: string, avatarForm: FormData) {
+  changeVideoChannelImage (videoChannelName: string, avatarForm: FormData, type: 'avatar' | 'banner') {
-    const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName + '/avatar/pick'
+    const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName + '/' + type + '/pick'
-    return this.authHttp.post<{ avatar: Avatar }>(url, avatarForm)
+    return this.authHttp.post<{ avatar?: ActorImage, banner?: ActorImage }>(url, avatarForm)
               .pipe(catchError(err => this.restExtractor.handleError(err)))
  }
-  deleteVideoChannelAvatar (videoChannelName: string) {
+  deleteVideoChannelImage (videoChannelName: string, type: 'avatar' | 'banner') {
-    const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName + '/avatar'
+    const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName + '/' + type
    return this.authHttp.delete(url)
               .pipe(
diff --git a/client/src/app/shared/shared-main/video/video.model.ts b/client/src/app/shared/shared-main/video/video.model.ts
index adb6e884f..14c507295 100644
--- a/client/src/app/shared/shared-main/video/video.model.ts
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -6,7 +6,7 @@ import { Actor } from '@app/shared/shared-main/account/actor.model'
 import { VideoChannel } from '@app/shared/shared-main/video-channel/video-channel.model'
 import { peertubeTranslate } from '@shared/core-utils/i18n'
 import {
-  Avatar,
+  ActorImage,
  ServerConfig,
  UserRight,
  Video as VideoServerModel,
@@ -20,7 +20,6 @@ export class Video implements VideoServerModel {
  byVideoChannel: string
  byAccount: string
-  accountAvatarUrl: string
  videoChannelAvatarUrl: string
  createdAt: Date
@@ -72,7 +71,7 @@ export class Video implements VideoServerModel {
    displayName: string
    url: string
    host: string
-    avatar?: Avatar
+    avatar?: ActorImage
  }
  channel: {
@@ -81,7 +80,7 @@ export class Video implements VideoServerModel {
    displayName: string
    url: string
    host: string
-    avatar?: Avatar
+    avatar?: ActorImage
  }
  userHistory?: {
@@ -144,7 +143,6 @@ export class Video implements VideoServerModel {
    this.byAccount = Actor.CREATE_BY_STRING(hash.account.name, hash.account.host)
    this.byVideoChannel = Actor.CREATE_BY_STRING(hash.channel.name, hash.channel.host)
-    this.accountAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.account)
    this.videoChannelAvatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.channel)
    this.category.label = peertubeTranslate(this.category.label, translations)
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html
index 7eca6411e..3f2f55559 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -24,7 +24,7 @@
  <ng-template pTemplate="header">
    <tr>
-      <th style="width: 150px;">Action</th> <!-- column for action buttons -->
+      <th style="width: 150px;" i18n>Action</th> <!-- column for action buttons -->
      <th style="width: calc(100% - 300px);" i18n>Account</th>
      <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
    </tr>
@@ -38,12 +38,7 @@
      <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
+            <my-account-avatar [account]="accountBlock.blockedAccount"></my-account-avatar>
-              class="avatar"
-              [src]="accountBlock.blockedAccount.avatar?.path"
-              (error)="switchToDefaultAvatar($event)"
-              alt="Avatar"
-            >
            <div>
              {{ accountBlock.blockedAccount.displayName }}
              <span class="text-muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.ts b/client/src/app/shared/shared-moderation/account-blocklist.component.ts
index 3de9587b8..1bce65bf0 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.ts
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.ts
@@ -30,10 +30,6 @@ export class GenericAccountBlocklistComponent extends RestTable implements OnIni
    this.initialize()
  }
-  switchToDefaultAvatar ($event: Event) {
-    ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
-  }
  unblockAccount (accountBlock: AccountBlock) {
    const blockedAccount = accountBlock.blockedAccount
    const operation = this.mode === BlocklistComponentType.Account
diff --git a/client/src/app/shared/shared-moderation/batch-domains-modal.component.html b/client/src/app/shared/shared-moderation/batch-domains-modal.component.html
index 1b85c8f48..6a3c65721 100644
--- a/client/src/app/shared/shared-moderation/batch-domains-modal.component.html
+++ b/client/src/app/shared/shared-moderation/batch-domains-modal.component.html
@@ -28,14 +28,11 @@
      <div class="form-group inputs">
        <input
-          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
          (click)="hide()" (key.enter)="hide()"
        >
-        <input
+        <input type="submit" [value]="action" class="peertube-button orange-button" [disabled]="!form.valid" />
-          type="submit" [value]="action" class="action-button-submit"
-          [disabled]="!form.valid"
-        >
      </div>
    </form>
  </div>
diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss
index 4a4e05535..cdcc12fe0 100644
--- a/client/src/app/shared/shared-moderation/moderation.scss
+++ b/client/src/app/shared/shared-moderation/moderation.scss
@@ -32,7 +32,7 @@
    color: pvar(--inputPlaceholderColor);
  }
-  @include large-screen-ratio($selector: 'div, ::ng-deep iframe') {
+  @include block-ratio($selector: 'div, ::ng-deep iframe') {
    width: 100% !important;
    height: 100% !important;
    left: 0;
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.html b/client/src/app/shared/shared-moderation/report-modals/report.component.html
index bda62312f..6c99180ef 100644
--- a/client/src/app/shared/shared-moderation/report-modals/report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.html
@@ -51,10 +51,11 @@
    <div class="form-group inputs">
      <input
-        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
        (click)="hide()" (key.enter)="hide()"
      >
-      <input type="submit" i18n-value value="Submit" class="action-button-submit" [disabled]="!form.valid">
+      <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid">
    </div>
    </form>
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.scss b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
index b2606cbd8..0567330f5 100644
--- a/client/src/app/shared/shared-moderation/report-modals/report.component.scss
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
@@ -21,7 +21,7 @@ textarea {
 }
 .screenratio {
-  @include large-screen-ratio($selector: 'div, ::ng-deep iframe') {
+  @include block-ratio($selector: 'div, ::ng-deep iframe') {
    left: 0;
  };
 }
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
index 4947088d1..1aae64bff 100644
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
@@ -89,10 +89,11 @@
    <div class="form-group inputs">
      <input
-        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
        (click)="hide()" (key.enter)="hide()"
      >
-      <input type="submit" i18n-value value="Submit" class="action-button-submit" [disabled]="!form.valid">
+      <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid">
    </div>
    </form>
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
index 5b06c0bc7..4ca6f52ad 100644
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
@@ -61,7 +61,8 @@ export class VideoReportComponent extends FormReactive implements OnInit {
          baseUrl: this.video.embedUrl,
          title: false,
          warningTitle: false
-        })
+        }),
+        this.video.name
      )
    )
  }
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html
index a6e974b36..537186f05 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -31,7 +31,7 @@
  <ng-template pTemplate="header">
    <tr>
-      <th style="width: 150px;">Action</th> <!-- column for action buttons -->
+      <th style="width: 150px;" i18n>Action</th> <!-- column for action buttons -->
      <th style="width: calc(100% - 300px);" i18n>Instance</th>
      <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
    </tr>
diff --git a/client/src/app/shared/shared-moderation/shared-moderation.module.ts b/client/src/app/shared/shared-moderation/shared-moderation.module.ts
index b1b98f8d0..c7e201792 100644
--- a/client/src/app/shared/shared-moderation/shared-moderation.module.ts
+++ b/client/src/app/shared/shared-moderation/shared-moderation.module.ts
@@ -13,13 +13,15 @@ import { UserBanModalComponent } from './user-ban-modal.component'
 import { UserModerationDropdownComponent } from './user-moderation-dropdown.component'
 import { VideoBlockComponent } from './video-block.component'
 import { VideoBlockService } from './video-block.service'
+import { SharedAccountAvatarModule } from '../shared-account-avatar/shared-account-avatar.module'
 @NgModule({
  imports: [
    SharedMainModule,
    SharedFormModule,
    SharedGlobalIconModule,
-    SharedVideoCommentModule
+    SharedVideoCommentModule,
+    SharedAccountAvatarModule
  ],
  declarations: [
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.html b/client/src/app/shared/shared-moderation/user-ban-modal.component.html
index 365eb1938..7129b00ca 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.html
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.html
@@ -23,14 +23,11 @@
      <div class="form-group inputs">
        <input
-          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
          (click)="hide()" (key.enter)="hide()"
        >
-        <input
+        <input type="submit" i18n-value value="Ban this user" class="peertube-button orange-button" [disabled]="!form.valid" />
-          type="submit" i18n-value value="Ban this user" class="action-button-submit"
-          [disabled]="!form.valid"
-        >
      </div>
    </form>
  </div>
diff --git a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.html b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.html
index 4d562387a..f1680e385 100644
--- a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.html
+++ b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.html
@@ -4,6 +4,6 @@
  <my-action-dropdown
    [actions]="userActions" [entry]="{ user: user, account: account }"
    [buttonSize]="buttonSize" [placement]="placement" [label]="label"
-    [container]="container"
+    [container]="container" [buttonStyled]="buttonStyled"
  ></my-action-dropdown>
 </ng-container>
diff --git a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
index f59910d1c..f510a82f9 100644
--- a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
@@ -18,6 +18,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
  @Input() prependActions: DropdownAction<{ user: User, account: Account }>[]
  @Input() buttonSize: 'normal' | 'small' = 'normal'
+  @Input() buttonStyled = true
  @Input() placement = 'right-top right-bottom auto'
  @Input() label: string
  @Input() container: 'body' | undefined = undefined
diff --git a/client/src/app/shared/shared-moderation/video-block.component.html b/client/src/app/shared/shared-moderation/video-block.component.html
index e982c4d77..5e9e8493c 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.html
+++ b/client/src/app/shared/shared-moderation/video-block.component.html
@@ -35,14 +35,11 @@
      <div class="form-group inputs">
        <input
-          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
          (click)="hide()" (key.enter)="hide()"
        >
-        <input
+        <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid" />
-          type="submit" i18n-value value="Submit" class="action-button-submit"
-          [disabled]="!form.valid"
-        >
      </div>
    </form>
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.ts b/client/src/app/shared/shared-share-modal/video-share.component.ts
index b06ff3751..e8760bfcc 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.ts
+++ b/client/src/app/shared/shared-share-modal/video-share.component.ts
@@ -86,14 +86,14 @@ export class VideoShareComponent {
    const options = this.getVideoOptions(this.video.embedUrl)
    const embedUrl = buildVideoLink(options)
-    return buildVideoOrPlaylistEmbed(embedUrl)
+    return buildVideoOrPlaylistEmbed(embedUrl, this.video.name)
  }
  getPlaylistIframeCode () {
    const options = this.getPlaylistOptions(this.playlist.embedUrl)
    const embedUrl = buildPlaylistLink(options)
-    return buildVideoOrPlaylistEmbed(embedUrl)
+    return buildVideoOrPlaylistEmbed(embedUrl, this.playlist.displayName)
  }
  getVideoUrl () {
diff --git a/client/src/app/shared/shared-support-modal/index.ts b/client/src/app/shared/shared-support-modal/index.ts
new file mode 100644
index 000000000..f41bb4bc2
--- /dev/null
+++ b/client/src/app/shared/shared-support-modal/index.ts
@@ -0,0 +1,3 @@
+export * from './support-modal.component'
+export * from './shared-support-modal.module'
diff --git a/client/src/app/shared/shared-support-modal/shared-support-modal.module.ts b/client/src/app/shared/shared-support-modal/shared-support-modal.module.ts
new file mode 100644
index 000000000..1101d5535
--- /dev/null
+++ b/client/src/app/shared/shared-support-modal/shared-support-modal.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core'
+import { SharedFormModule } from '../shared-forms'
+import { SharedGlobalIconModule } from '../shared-icons'
+import { SharedMainModule } from '../shared-main/shared-main.module'
+import { SupportModalComponent } from './support-modal.component'
+@NgModule({
+  imports: [
+    SharedMainModule,
+    SharedFormModule,
+    SharedGlobalIconModule
+  ],
+  declarations: [
+    SupportModalComponent
+  ],
+  exports: [
+    SupportModalComponent
+  ],
+  providers: [ ]
+})
+export class SharedSupportModal { }
diff --git a/client/src/app/+videos/+video-watch/modal/video-support.component.html b/client/src/app/shared/shared-support-modal/support-modal.component.html
index 935656d23..289adcb6a 100644
--- a/client/src/app/+videos/+video-watch/modal/video-support.component.html
+++ b/client/src/app/shared/shared-support-modal/support-modal.component.html
@@ -1,14 +1,14 @@
 <ng-template #modal let-hide="close">
  <div class="modal-header">
-    <h4 i18n class="modal-title">Support {{ video.account.displayName }}</h4>
+    <h4 i18n class="modal-title">Support {{ displayName }}</h4>
    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
  </div>
-  <div class="modal-body" [innerHTML]="videoHTMLSupport"></div>
+  <div class="modal-body" [innerHTML]="htmlSupport"></div>
  <div class="modal-footer inputs">
    <input
-      type="button" role="button" i18n-value value="Maybe later" class="action-button action-button-cancel"
+      type="button" role="button" i18n-value value="Maybe later" class="peertube-button grey-button"
      (click)="hide()" (key.enter)="hide()"
    >
  </div>
diff --git a/client/src/app/+videos/+video-watch/modal/video-support.component.ts b/client/src/app/shared/shared-support-modal/support-modal.component.ts
index bd5290a72..a0b9fada6 100644
--- a/client/src/app/+videos/+video-watch/modal/video-support.component.ts
+++ b/client/src/app/shared/shared-support-modal/support-modal.component.ts
@@ -2,18 +2,20 @@ import { Component, Input, ViewChild } from '@angular/core'
 import { MarkdownService } from '@app/core'
 import { VideoDetails } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { VideoChannel } from '@shared/models'
 @Component({
-  selector: 'my-video-support',
+  selector: 'my-support-modal',
-  templateUrl: './video-support.component.html',
+  templateUrl: './support-modal.component.html'
-  styleUrls: [ './video-support.component.scss' ]
 })
-export class VideoSupportComponent {
+export class SupportModalComponent {
  @Input() video: VideoDetails = null
+  @Input() videoChannel: VideoChannel = null
  @ViewChild('modal', { static: true }) modal: NgbModal
-  videoHTMLSupport = ''
+  htmlSupport = ''
+  displayName = ''
  constructor (
    private markdownService: MarkdownService,
@@ -23,8 +25,14 @@ export class VideoSupportComponent {
  show () {
    const modalRef = this.modalService.open(this.modal, { centered: true })
-    this.markdownService.enhancedMarkdownToHTML(this.video.support)
+    const support = this.video?.support || this.videoChannel.support
-      .then(r => this.videoHTMLSupport = r)
+    this.markdownService.enhancedMarkdownToHTML(support)
+      .then(r => this.htmlSupport = r)
+    this.displayName = this.video
+      ? this.video.channel.displayName
+      : this.videoChannel.displayName
    return modalRef
  }
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
index 2b723a15a..ea59ab346 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
@@ -4,82 +4,82 @@
 .video-thumbnail {
  @include miniature-thumbnail;
+}
-  .progress-bar {
+.progress-bar {
-    height: 3px;
+  height: 3px;
-    width: 100%;
+  width: 100%;
-    position: absolute;
+  position: absolute;
-    bottom: 0;
+  bottom: 0;
-    background-color: rgba(0, 0, 0, 0.20);
+  background-color: rgba(0, 0, 0, 0.20);
-    div {
+  div {
-      height: 100%;
+    height: 100%;
-      background-color: pvar(--mainColor);
+    background-color: pvar(--mainColor);
-    }
  }
+}
-  .video-thumbnail-watch-later-overlay,
+.video-thumbnail-watch-later-overlay,
-  .video-thumbnail-label-overlay,
+.video-thumbnail-label-overlay,
-  .video-thumbnail-duration-overlay,
+.video-thumbnail-duration-overlay,
-  .video-thumbnail-live-overlay {
+.video-thumbnail-live-overlay {
-    @include static-thumbnail-overlay;
+  @include static-thumbnail-overlay;
-    border-radius: 3px;
+  border-radius: 3px;
-    font-size: 12px;
+  font-size: 12px;
-    font-weight: $font-semibold;
+  font-weight: $font-semibold;
-    line-height: 1.1;
+  line-height: 1.1;
-    z-index: z(miniature);
+  z-index: z(miniature);
-  }
+}
-  .video-thumbnail-label-overlay {
+.video-thumbnail-label-overlay {
-    position: absolute;
+  position: absolute;
-    padding: 0 5px;
+  padding: 0 5px;
-    left: 5px;
+  left: 5px;
-    top: 5px;
+  top: 5px;
-    font-weight: $font-bold;
+  font-weight: $font-bold;
-    &.warning { background-color: orange; }
+  &.warning { background-color: orange; }
-    &.danger { background-color: red; }
+  &.danger { background-color: red; }
-  }
+}
-  .video-thumbnail-duration-overlay,
+.video-thumbnail-duration-overlay,
-  .video-thumbnail-live-overlay {
+.video-thumbnail-live-overlay {
-    position: absolute;
+  position: absolute;
-    padding: 0 3px;
+  padding: 0 3px;
-    right: 5px;
+  right: 5px;
-    bottom: 5px;
+  bottom: 5px;
-  }
+}
-  .video-thumbnail-live-overlay {
+.video-thumbnail-live-overlay {
-    font-weight: $font-semibold;
+  font-weight: $font-semibold;
-    color: #fff;
+  color: #fff;
-    &:not(.live-ended) {
+  &:not(.live-ended) {
-      background-color: rgba(224, 8, 8, 0.7);
+    background-color: rgba(224, 8, 8, 0.7);
-    }
  }
+}
-  .video-thumbnail-actions-overlay {
+.video-thumbnail-actions-overlay {
-    position: absolute;
+  position: absolute;
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    right: 5px;
+  right: 5px;
-    top: 5px;
+  top: 5px;
-    opacity: 0;
+  opacity: 0;
-    div:not(:first-child) {
+  div:not(:first-child) {
-      margin-top: 2px;
+    margin-top: 2px;
-    }
+  }
+}
-    .video-thumbnail-watch-later-overlay {
+.video-thumbnail-watch-later-overlay {
-      padding: 3px;
+  padding: 3px;
-      my-global-icon {
+  my-global-icon {
-        width: 22px;
+    width: 22px;
-        height: 22px;
+    height: 22px;
-        @include apply-svg-color(#fff);
+    @include apply-svg-color(#fff);
-      }
-    }
  }
 }
diff --git a/client/src/app/shared/shared-video-comment/video-comment.model.ts b/client/src/app/shared/shared-video-comment/video-comment.model.ts
index bf718ae08..9a4e3954e 100644
--- a/client/src/app/shared/shared-video-comment/video-comment.model.ts
+++ b/client/src/app/shared/shared-video-comment/video-comment.model.ts
@@ -17,7 +17,6 @@ export class VideoComment implements VideoCommentServerModel {
  totalRepliesFromVideoAuthor: number
  totalReplies: number
  by: string
-  accountAvatarUrl: string
  isLocal: boolean
@@ -38,7 +37,6 @@ export class VideoComment implements VideoCommentServerModel {
    if (this.account) {
      this.by = Actor.CREATE_BY_STRING(this.account.name, this.account.host)
-      this.accountAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.account)
      const absoluteAPIUrl = getAbsoluteAPIUrl()
      const thisHost = new URL(absoluteAPIUrl).host
@@ -70,7 +68,6 @@ export class VideoCommentAdmin implements VideoCommentAdminServerModel {
  }
  by: string
-  accountAvatarUrl: string
  constructor (hash: VideoCommentAdminServerModel, textHtml: string) {
    this.id = hash.id
@@ -97,7 +94,6 @@ export class VideoCommentAdmin implements VideoCommentAdminServerModel {
    if (this.account) {
      this.by = Actor.CREATE_BY_STRING(this.account.name, this.account.host)
-      this.accountAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.account)
      this.account.localUrl = '/accounts/' + this.by
    }
diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.html b/client/src/app/shared/shared-video-live/live-stream-information.component.html
index 57920239d..d6ee67ba9 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.html
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.html
@@ -30,10 +30,7 @@
  <div class="modal-footer">
    <div class="form-group inputs">
-      <input
+      <input type="button" role="button" i18n-value value="Close" class="peertube-button grey-button" (click)="dismiss()" />
-        type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel"
-        (click)="dismiss()"
-      >
      <my-edit-button
        i18n-label label="Update live settings"
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
index 07f79cd6d..9ffeac5e8 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.html
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
@@ -4,6 +4,7 @@
    <div class="action-block">
      <my-feed *ngIf="syndicationItems" [syndicationItems]="syndicationItems"></my-feed>
      <ng-container *ngFor="let action of actions">
        <a *ngIf="action.routerLink" class="ml-2" [routerLink]="action.routerLink" routerLinkActive="active">
          <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
@@ -43,7 +44,7 @@
  <div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">No results.</div>
  <div
    myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()"
-    class="videos"
+    class="videos" [ngClass]="{ 'display-as-row': displayAsRow() }"
  >
    <ng-container *ngFor="let video of videos; trackBy: videoById;">
      <h2 class="date-title" *ngIf="getCurrentGroupedDateLabel(video)">
@@ -52,8 +53,7 @@
      <div class="video-wrapper">
        <my-video-miniature
-          [fitWidth]="true"
+          [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow()"
-          [video]="video" [user]="userMiniature" [ownerDisplayType]="ownerDisplayType"
          [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
          (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
        >
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
index 0a8aa8fa4..467ca1d2c 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -15,18 +15,9 @@ $iconSize: 16px;
  justify-content: space-between;
  align-items: center;
-  .action-block {
+  my-feed {
-    ::ng-deep my-feed {
+    display: inline-block;
-      my-global-icon {
+    width: calc(#{$iconSize} - 2px);
-        width: calc(#{$iconSize} - 2px);
-      }
-    }
-    a button {
-      @include peertube-button;
-      @include grey-button;
-      @include button-with-icon($iconSize, 3px, -1px);
-    }
  }
  .moderation-block {
@@ -34,21 +25,12 @@ $iconSize: 16px;
    my-global-icon {
      position: relative;
      width: $iconSize;
-      top: -2px;
    }
    margin-left: .4rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
-    .dropdown-item {
-      padding: 0;
-      ::ng-deep my-peertube-checkbox label {
-        padding: 3px 15px;
-      }
-    }
  }
 }
@@ -69,7 +51,16 @@ $iconSize: 16px;
 }
 .margin-content {
-  @include fluid-videos-miniature-layout;
+  @include grid-videos-miniature-layout;
+}
+.display-as-row.videos {
+  margin-left: pvar(--horizontalMarginContent);
+  margin-right: pvar(--horizontalMarginContent);
+  .video-wrapper {
+    margin-bottom: 15px;
+  }
 }
 @media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
index c13cb3748..f83380513 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
@@ -28,8 +28,8 @@ import { isLastMonth, isLastWeek, isThisMonth, isToday, isYesterday } from '@sha
 import { ServerConfig, UserRight, VideoFilter, VideoSortField } from '@shared/models'
 import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
 import { Syndication, Video } from '../shared-main'
-import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component'
 import { GenericHeaderComponent, VideoListHeaderComponent } from './video-list-header.component'
+import { MiniatureDisplayOptions } from './video-miniature.component'
 enum GroupDate {
  UNKNOWN = 0,
@@ -65,7 +65,6 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte
  loadOnInit = true
  loadUserVideoPreferences = false
-  ownerDisplayType: OwnerDisplayType = 'account'
  displayModerationBlock = false
  titleTooltip: string
  displayVideoActions = true
@@ -320,6 +319,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte
    viewContainerRef.createComponent(componentFactory, 0, injector)
  }
+  // Can be redefined by child
+  displayAsRow () {
+    return false
+  }
  // On videos hook for children that want to do something
  protected onMoreVideos () { /* empty */ }
diff --git a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
index 7a7868853..32cfdfd68 100644
--- a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
+++ b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
@@ -13,6 +13,7 @@ import { VideoDownloadComponent } from './video-download.component'
 import { VideoMiniatureComponent } from './video-miniature.component'
 import { VideosSelectionComponent } from './videos-selection.component'
 import { VideoListHeaderComponent } from './video-list-header.component'
+import { SharedAccountAvatarModule } from '../shared-account-avatar/shared-account-avatar.module'
 @NgModule({
  imports: [
@@ -23,7 +24,8 @@ import { VideoListHeaderComponent } from './video-list-header.component'
    SharedThumbnailModule,
    SharedGlobalIconModule,
    SharedVideoLiveModule,
-    SharedVideoModule
+    SharedVideoModule,
+    SharedAccountAvatarModule
  ],
  declarations: [
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index 4608e93e7..4ac74c106 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -4,10 +4,10 @@
      <ng-container i18n>Download</ng-container>
      <div *ngIf="videoCaptions" ngbDropdown class="d-inline-block ml-1">
-        <span id="dropdownDownloadType" ngbDropdownToggle>
+        <span id="dropdown-download-type" ngbDropdownToggle>
          {{ type }}
        </span>
-        <div ngbDropdownMenu aria-labelledby="dropdownDownloadType">
+        <div ngbDropdownMenu aria-labelledby="dropdown-download-type">
          <button *ngIf="type === 'video'" (click)="switchToType('subtitles')" ngbDropdownItem i18n>subtitles</button>
          <button *ngIf="type === 'subtitles'" (click)="switchToType('video')" ngbDropdownItem i18n>video</button>
        </div>
@@ -17,96 +17,124 @@
  </div>
  <div class="modal-body">
-    <div class="form-group">
+    <div class="alert alert-warning" *ngIf="isConfidentialVideo()" i18n>
-      <div class="alert alert-warning" *ngIf="isConfidentialVideo()" i18n>
+      The following link contains a private token and should not be shared with anyone.
-        The following link contains a private token and should not be shared with anyone.
+    </div>
-      </div>
+    <ng-container *ngIf="type === 'subtitles'">
      <div class="input-group input-group-sm">
-        <div class="input-group-prepend peertube-select-container">
-          <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" *ngIf="!isConfidentialVideo()">
          <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
-            <span class="glyphicon glyphicon-copy"></span>
+            <span class="glyphicon glyphicon-duplicate"></span>
          </button>
        </div>
      </div>
-    </div>
+    </ng-container>
-    <ng-container *ngIf="type === 'video' && videoFile?.metadata">
+    <ng-container *ngIf="type === 'video'">
-      <div ngbNav #nav="ngbNav" class="nav-tabs">
+      <div ngbNav #resolutionNav="ngbNav" class="nav-tabs" [activeId]="resolutionId" (activeIdChange)="onResolutionIdChange($event)">
-        <ng-container ngbNavItem>
+        <ng-container *ngFor="let file of getVideoFiles()" [ngbNavItem]="file.resolution.id">
-          <a ngbNavLink i18n>Format</a>
+          <a ngbNavLink i18n>{{ file.resolution.label }}</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="nav-content">
-              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataVideoStream | keyvalue">
+              <div class="input-group input-group-sm">
-                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+                <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
-                <span class="metadata-attribute-value">{{ item.value.value }}</span>
+                <div class="input-group-append" *ngIf="!isConfidentialVideo()">
+                  <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
+                    <span class="glyphicon glyphicon-duplicate"></span>
+                  </button>
+                </div>
              </div>
            </div>
          </ng-template>
        </ng-container>
+      </div>
+      <div [ngbNavOutlet]="resolutionNav"></div>
-        <ng-container ngbNavItem [disabled]="videoFileMetadataAudioStream === undefined">
+      <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
-          <a ngbNavLink i18n>Audio stream</a>
+        <ng-container *ngIf="videoFile?.metadata">
-          <ng-template ngbNavContent>
+          <div ngbNav #nav="ngbNav" class="nav-tabs nav-metadata">
-            <div class="file-metadata">
+            <ng-container ngbNavItem>
-              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataAudioStream | keyvalue">
+              <a ngbNavLink i18n>Format</a>
-                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+              <ng-template ngbNavContent>
-                <span class="metadata-attribute-value">{{ item.value.value }}</span>
+                <div class="file-metadata">
-              </div>
+                  <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 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>
+            </ng-container>
+          </div>
+          <div [ngbNavOutlet]="nav"></div>
+          <div class="download-type">
+            <div class="peertube-radio-container">
+              <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct">
+              <label i18n for="download-direct">Direct download</label>
            </div>
-          </ng-template>
+            <div class="peertube-radio-container">
+              <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent">
+              <label i18n for="download-torrent">Torrent (.torrent file)</label>
+            </div>
+          </div>
        </ng-container>
      </div>
-      <div [ngbNavOutlet]="nav"></div>
+      <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
-    </ng-container>
+      [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
+        <ng-container *ngIf="isAdvancedCustomizationCollapsed">
+          <span class="glyphicon glyphicon-menu-down"></span>
-    <div class="download-type" *ngIf="type === 'video'">
+          <ng-container i18n>
-      <div class="peertube-radio-container">
+            Advanced
-        <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct">
+          </ng-container>
-        <label i18n for="download-direct">Direct download</label>
+        </ng-container>
-      </div>
+        <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
+          <span class="glyphicon glyphicon-menu-up"></span>
-      <div class="peertube-radio-container">
+          <ng-container i18n>
-        <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent">
+            Simple
-        <label i18n for="download-torrent">Torrent (.torrent file)</label>
+          </ng-container>
+        </ng-container>
      </div>
-    </div>
+    </ng-container>
  </div>
  <div class="modal-footer inputs">
    <input
-      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+      type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
      (click)="hide()" (key.enter)="hide()"
    >
-    <input
+    <input type="submit" i18n-value value="Download" class="peertube-button orange-button" (click)="download()" />
-      type="submit" i18n-value value="Download" class="action-button-submit"
-      (click)="download()"
-    >
  </div>
 </ng-template>
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss
index d407e9531..7f6e03c87 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss
@@ -1,6 +1,28 @@
 @import 'variables';
 @import 'mixins';
+.nav-content {
+  margin-top: 30px;
+}
+.advanced-filters-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  .nav-tabs {
+    margin-top: 10x;
+  }
+  .glyphicon {
+    margin-right: 5px;
+  }
+}
 .peertube-select-container {
  @include peertube-select-container(85px);
@@ -15,12 +37,12 @@
  }
 }
-#dropdownDownloadType {
+#dropdown-download-type {
  cursor: pointer;
 }
 .download-type {
-  margin-top: 30px;
+  margin-top: 20px;
  .peertube-radio-container {
    @include peertube-radio-container;
@@ -30,6 +52,10 @@
  }
 }
+.nav-metadata {
+  margin-top: 20px;
+}
 .file-metadata {
  padding: 1rem;
 }
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.ts b/client/src/app/shared/shared-video-miniature/video-download.component.ts
index 90f4daf7c..1e3745d94 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.ts
@@ -1,7 +1,9 @@
 import { mapValues, pick } from 'lodash-es'
+import { pipe } from 'rxjs'
+import { tap } from 'rxjs/operators'
 import { Component, ElementRef, Inject, LOCALE_ID, ViewChild } from '@angular/core'
-import { AuthService, Notifier } from '@app/core'
+import { AuthService, HooksService, Notifier } from '@app/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 import { VideoCaption, VideoFile, VideoPrivacy } from '@shared/models'
 import { BytesPipe, NumberFormatterPipe, VideoDetails, VideoService } from '../shared-main'
@@ -16,7 +18,7 @@ type FileMetadata = { [key: string]: { label: string, value: string }}
 export class VideoDownloadComponent {
  @ViewChild('modal', { static: true }) modal: ElementRef
-  downloadType: 'direct' | 'torrent' = 'torrent'
+  downloadType: 'direct' | 'torrent' = 'direct'
  resolutionId: number | string = -1
  subtitleLanguageId: string
@@ -26,7 +28,9 @@ export class VideoDownloadComponent {
  videoFileMetadataVideoStream: FileMetadata | undefined
  videoFileMetadataAudioStream: FileMetadata | undefined
  videoCaptions: VideoCaption[]
-  activeModal: NgbActiveModal
+  activeModal: NgbModalRef
+  isAdvancedCustomizationCollapsed = true
  type: DownloadType = 'video'
@@ -38,7 +42,8 @@ export class VideoDownloadComponent {
    private notifier: Notifier,
    private modalService: NgbModal,
    private videoService: VideoService,
-    private auth: AuthService
+    private auth: AuthService,
+    private hooks: HooksService
  ) {
    this.bytesPipe = new BytesPipe()
    this.numbersPipe = new NumberFormatterPipe(this.localeId)
@@ -62,9 +67,13 @@ export class VideoDownloadComponent {
    this.activeModal = this.modalService.open(this.modal, { centered: true })
-    this.resolutionId = this.getVideoFiles()[0].resolution.id
+    this.onResolutionIdChange(this.getVideoFiles()[0].resolution.id)
-    this.onResolutionIdChange()
    if (this.videoCaptions) this.subtitleLanguageId = this.videoCaptions[0].language.id
+    this.activeModal.shown.subscribe(() => {
+      this.hooks.runAction('action:modal.video-download.shown', 'common')
+    })
  }
  onClose () {
@@ -83,11 +92,15 @@ export class VideoDownloadComponent {
      : this.getVideoFileLink()
  }
-  async onResolutionIdChange () {
+  async onResolutionIdChange (resolutionId: number) {
+    this.resolutionId = resolutionId
    this.videoFile = this.getVideoFile()
-    if (this.videoFile.metadata || !this.videoFile.metadataUrl) return
-    await this.hydrateMetadataFromMetadataUrl(this.videoFile)
+    if (!this.videoFile.metadata) {
+      if (!this.videoFile.metadataUrl) return
+      await this.hydrateMetadataFromMetadataUrl(this.videoFile)
+    }
    this.videoFileMetadataFormat = this.videoFile
      ? this.getMetadataFormat(this.videoFile.metadata.format)
@@ -101,9 +114,6 @@ export class VideoDownloadComponent {
  }
  getVideoFile () {
-    // HTML select send us a string, so convert it to a number
-    this.resolutionId = parseInt(this.resolutionId.toString(), 10)
    const file = this.getVideoFiles().find(f => f.resolution.id === this.resolutionId)
    if (!file) {
      console.error('Could not find file with resolution %d.', this.resolutionId)
@@ -201,7 +211,7 @@ export class VideoDownloadComponent {
  private hydrateMetadataFromMetadataUrl (file: VideoFile) {
    const observable = this.videoService.getVideoFileMetadata(file.metadataUrl)
-    observable.subscribe(res => file.metadata = res)
+      .pipe(tap(res => file.metadata = res))
    return observable.toPromise()
  }
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index 7a6df7b64..bc19127aa 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -1,4 +1,4 @@
-<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow, 'fit-width': fitWidth }" (mouseenter)="loadActions()">
+<div class="video-miniature" [ngClass]="getClasses()" (mouseenter)="loadActions()">
  <my-video-thumbnail
    [video]="video" [nsfw]="isVideoBlur" [videoRouterLink]="videoRouterLink" [videoHref]="videoHref" [videoTarget]="videoTarget"
    [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"
@@ -9,11 +9,16 @@
  <div class="video-bottom">
    <div class="video-miniature-information">
-      <div class="d-inline-flex video-miniature-meta">
+      <div class="d-flex video-miniature-meta">
-        <a *ngIf="displayOptions.avatar" class="avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
+        <a *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" class="channel-avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
          <img [src]="getAvatarUrl()" alt="" />
        </a>
+        <my-account-avatar
+          *ngIf="displayOptions.avatar && displayOwnerAccount()" [title]="channelLinkTitle"
+          [account]="video.account" size="40" [internalHref]="'/video-channels/' + video.byVideoChannel"
+        ></my-account-avatar>
        <div class="w-100 d-flex flex-column">
          <a *ngIf="!videoHref" tabindex="-1" class="video-miniature-name"
            [routerLink]="videoRouterLink" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
@@ -33,7 +38,7 @@
            </span>
          </span>
-          <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]">
+          <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
            {{ video.byAccount }}
          </a>
          <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index 38cac5b6e..f6f2925f0 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -3,198 +3,202 @@
 @import '_miniature';
 $more-button-width: 40px;
-$more-margin-right: 15px;
-.video-miniature {
+.video-miniature-name {
-  display: inline-flex;
+  @include miniature-name;
-  flex-direction: column;
+}
-  padding-bottom: $video-miniature-margin-bottom;
-  vertical-align: top;
-  .video-bottom {
+.video-miniature-information {
-    display: flex;
+  width: calc(100% - #{$more-button-width});
+}
-    .video-miniature-information {
+my-account-avatar,
-      width: $video-miniature-width - $more-button-width - $more-margin-right;
+.channel-avatar {
-      line-height: normal;
+  margin: 10px 10px 0 0;
+}
-      .avatar {
+.channel-avatar img{
-        margin: 10px 10px 0 0;
+  @include channel-avatar(40px);
+}
-        img {
+.video-miniature-created-at-views {
-          @include avatar(40px);
+  font-size: 13px;
-        }
+}
-      }
-      .video-miniature-name {
+.video-miniature-account,
-        @include miniature-name;
+.video-miniature-channel {
-        width: calc(100% - #{$more-button-width});
+  @include disable-default-a-behaviour;
-      }
+  @include ellipsis;
-      .video-miniature-meta {
+  display: block;
-        width: calc(100% + #{$more-button-width});
+  font-size: 13px;
-        overflow: hidden;
+  color: pvar(--greyForegroundColor);
-      }
-      .video-miniature-created-at-views {
+  &:hover {
-        display: block;
+    color: $grey-foreground-hover-color;
-        font-size: 13px;
+  }
-      }
+}
-      .video-miniature-account,
+.video-info-privacy,
-      .video-miniature-channel {
+.video-info-blocked .blocked-label,
-        @include disable-default-a-behaviour;
+.video-info-nsfw {
-        @include ellipsis;
+  font-weight: $font-semibold;
+}
-        display: block;
+.video-info-blocked {
-        font-size: 13px;
+  color: red;
-        color: pvar(--greyForegroundColor);
-        &:hover {
+  .blocked-reason::before {
-          color: $grey-foreground-hover-color;
+    content: ' - ';
-        }
+  }
-      }
+}
-      .video-info-privacy,
+.video-info-nsfw {
-      .video-info-blocked .blocked-label,
+  color: red;
-      .video-info-nsfw {
+}
-        font-weight: $font-semibold;
-      }
-      .video-info-blocked {
+.video-actions {
-        color: red;
+  width: $more-button-width;
+  height: 30px;
-        .blocked-reason::before {
+  ::ng-deep .dropdown-root:not(.show) {
-          content: ' - ';
+    opacity: 0;
-        }
+  }
-      }
-      .video-info-nsfw {
+  ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
-        color: red;
+    opacity: 1;
-      }
+  }
-    }
-    .video-actions {
+  ::ng-deep .more-icon {
-      margin-top: 3px;
+    opacity: .6;
-      width: $more-button-width;
-      height: 30px;
-      ::ng-deep .dropdown-root:not(.show) {
+    &:hover {
-        opacity: 0;
+      opacity: 1;
-      }
+    }
+  }
+}
-      ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
+.video-miniature:hover {
-        opacity: 1;
+  ::ng-deep .video-thumbnail-actions-overlay,
-      }
+  .video-actions ::ng-deep .dropdown-root {
+    opacity: 1 !important;
+  }
+}
-      ::ng-deep .more-icon {
+// Grid mode
-        opacity: .6;
+// Takes all the width on mobile
+.video-miniature:not(.display-as-row) {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: $video-miniature-margin-bottom;
+  width: 100%;
-        &:hover {
+  my-video-thumbnail {
-          opacity: 1;
+    @include block-ratio($selector: '::ng-deep .video-thumbnail');
-        }
+  }
-      }
-    }
-    @media screen and (max-width: $small-view) {
+  .video-bottom {
-      .video-miniature-information {
+    display: flex;
-        margin: 0 10px;
+    width: 100%;
-      }
+  }
-      .video-actions {
+  .video-miniature-name {
-        margin: 0;
+    margin-top: 10px;
-        top: -3px;
+    margin-bottom: 5px;
+  }
-        ::ng-deep .dropdown-root {
+  .video-miniature-created-at-views {
-          opacity: 1 !important;
+    display: block;
-        }
-      }
-    }
  }
-  &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay,
+  .video-actions {
-  &:hover .video-bottom .video-actions ::ng-deep .dropdown-root {
+    margin-top: 3px;
-    opacity: 1;
  }
-  &.fit-width {
+  @media screen and (max-width: $small-view) {
    width: 100%;
+    margin-bottom: 25px;
+    .video-miniature-information {
+      margin: 0 10px;
+      width: 100%;
+      text-align: left;
+    }
-    .video-bottom {
+    .video-actions {
-      width: 100% !important;
+      margin: 0;
+      top: -3px;
-      .video-miniature-information {
+      ::ng-deep .dropdown-root {
-        width: calc(100% - #{$more-button-width}) !important;
+        opacity: 1 !important;
      }
    }
-    my-video-thumbnail {
+    ::ng-deep .video-thumbnail {
-      @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
+      border-radius: 0;
    }
  }
+}
+.video-miniature.display-as-row {
+  --rowThumbnailWidth: #{$video-thumbnail-width};
+  --rowThumbnailHeight: #{$video-thumbnail-height};
-  &.display-as-row {
+  display: flex;
-    flex-direction: row;
+  flex-direction: row;
-    padding-bottom: 0;
-    height: auto;
+  .video-bottom {
    display: flex;
-    flex-grow: 1;
+  }
-    my-video-thumbnail {
+  // We don't display avatar in row mode
-      margin-right: 10px;
+  .channel-avatar {
-    }
+    display: none;
+  }
-    .video-bottom {
+  my-video-thumbnail {
-      .video-miniature-information {
+    min-width: var(--rowThumbnailWidth);
-        @media screen and (min-width: $small-view) {
+    max-width: var(--rowThumbnailWidth);
-          width: auto;
+    height: var(--rowThumbnailHeight);
-          min-width: 500px;
+    margin-right: 10px;
-        }
+  }
-        .video-miniature-name {
-          @include ellipsis-multiline(1.3em, 2);
-          margin-top: 2px;
-          margin-bottom: 5px;
-        }
-        .video-miniature-created-at-views,
-        .video-miniature-account,
-        .video-miniature-channel {
-          font-size: 95%;
-          width: fit-content;
-        }
-        .video-miniature-created-at-views + .video-miniature-channel {
-          margin-top: 5px;
-        }
-        .video-info-privacy {
-          margin-top: 5px;
-        }
-        .video-info-blocked {
-          margin-top: 3px;
-        }
-      }
-      .video-actions {
+  .video-miniature-name {
-        margin: 0;
+    @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
-        top: -3px;
+  }
-      }
-    }
-    @media screen and (max-width: $small-view) {
+  .video-miniature-created-at-views,
-      flex-direction: column;
+  .video-miniature-account,
-      height: auto;
+  .video-miniature-channel {
+    font-size: $video-miniature-row-info-font-size;
+  }
-      my-video-thumbnail {
+  .video-actions {
-        margin-right: 0;
+    margin-top: -3px;
-      }
+  }
+}
-      .video-miniature-information {
+@include on-small-main-col {
-        min-width: initial;
+  .video-miniature.display-as-row {
-      }
+    --rowThumbnailWidth: #{$video-thumbnail-medium-width};
+    --rowThumbnailHeight: #{$video-thumbnail-medium-height};
+  }
+}
+@include on-mobile-main-col {
+  .video-miniature.display-as-row {
+    --rowThumbnailWidth: #{$video-thumbnail-small-width};
+    --rowThumbnailHeight: #{$video-thumbnail-small-height};
+    .video-miniature-name {
+      font-size: $video-miniature-row-info-font-size;
+    }
+    .video-miniature-created-at-views,
+    .video-miniature-account,
+    .video-miniature-channel {
+      font-size: $video-miniature-row-mobile-info-font-size;
    }
  }
 }
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index cc5665ab1..8d66aaee2 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -16,7 +16,6 @@ import { Video } from '../shared-main'
 import { VideoPlaylistService } from '../shared-video-playlist'
 import { VideoActionsDisplayType } from './video-actions-dropdown.component'
-export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
 export type MiniatureDisplayOptions = {
  date?: boolean
  views?: boolean
@@ -40,7 +39,6 @@ export class VideoMiniatureComponent implements OnInit {
  @Input() user: User
  @Input() video: Video
-  @Input() ownerDisplayType: OwnerDisplayType = 'account'
  @Input() displayOptions: MiniatureDisplayOptions = {
    date: true,
    views: true,
@@ -51,9 +49,9 @@ export class VideoMiniatureComponent implements OnInit {
    state: false,
    blacklistInfo: false
  }
-  @Input() displayAsRow = false
  @Input() displayVideoActions = true
-  @Input() fitWidth = false
+  @Input() displayAsRow = false
  @Input() videoLinkType: VideoLinkType = 'internal'
@@ -89,7 +87,7 @@ export class VideoMiniatureComponent implements OnInit {
  videoHref: string
  videoTarget: string
-  private ownerDisplayTypeChosen: 'account' | 'videoChannel'
+  private ownerDisplayType: 'account' | 'videoChannel'
  constructor (
    private screenService: ScreenService,
@@ -140,11 +138,11 @@ export class VideoMiniatureComponent implements OnInit {
  }
  displayOwnerAccount () {
-    return this.ownerDisplayTypeChosen === 'account'
+    return this.ownerDisplayType === 'account'
  }
  displayOwnerVideoChannel () {
-    return this.ownerDisplayTypeChosen === 'videoChannel'
+    return this.ownerDisplayType === 'videoChannel'
  }
  isUnlistedVideo () {
@@ -183,8 +181,8 @@ export class VideoMiniatureComponent implements OnInit {
  }
  getAvatarUrl () {
-    if (this.ownerDisplayTypeChosen === 'account') {
+    if (this.displayOwnerAccount()) {
-      return this.video.accountAvatarUrl
+      return this.video.account.avatar?.url
    }
    return this.video.videoChannelAvatarUrl
@@ -244,21 +242,26 @@ export class VideoMiniatureComponent implements OnInit {
    return this.displayVideoActions && this.isUserLoggedIn() && this.inWatchLaterPlaylist !== undefined
  }
-  private setUpBy () {
+  getClasses () {
-    if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') {
+    return {
-      this.ownerDisplayTypeChosen = this.ownerDisplayType
+      'display-as-row': this.displayAsRow
-      return
    }
+  }
+  private setUpBy () {
+    const accountName = this.video.account.name
-    // If the video channel name an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
+    // If the video channel name is an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
+    // Or has not been customized (default created channel display name)
    // -> Use the account name
    if (
-      this.video.channel.name === `${this.video.account.name}_channel` ||
+      this.video.channel.displayName === `Default ${accountName} channel` ||
+      this.video.channel.displayName === `Main ${accountName} channel` ||
      this.video.channel.name.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/)
    ) {
-      this.ownerDisplayTypeChosen = 'account'
+      this.ownerDisplayType = 'account'
    } else {
-      this.ownerDisplayTypeChosen = 'videoChannel'
+      this.ownerDisplayType = 'videoChannel'
    }
  }
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.html b/client/src/app/shared/shared-video-miniature/videos-selection.component.html
index 8caeaf092..dec9e99f3 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.html
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.html
@@ -9,8 +9,7 @@
    <my-video-miniature
      [video]="video" [displayAsRow]="true" [displayOptions]="miniatureDisplayOptions"
-      [displayVideoActions]="false" [ownerDisplayType]="ownerDisplayType"
+      [displayVideoActions]="false" [user]="user"
-      [user]="user"
    ></my-video-miniature>
    <!-- Display only once -->
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
index c33e11889..a2939d521 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
@@ -5,24 +5,24 @@
  display: flex;
  justify-content: flex-end;
  flex-grow: 1;
+}
-  .action-selection-mode-child {
+.action-selection-mode-child {
-    position: fixed;
+  position: fixed;
-    .action-button {
-      display: block;
-      margin-left: 55px;
-    }
-    .action-button-cancel-selection {
+  .action-button {
-      @include peertube-button;
+    display: block;
-      @include grey-button;
+    margin-left: 55px;
-    }
  }
 }
+.action-button-cancel-selection {
+  @include peertube-button;
+  @include grey-button;
+}
 .video {
-  @include row-blocks;
+  @include row-blocks($column-responsive: false);
  &:first-child {
    margin-top: 47px;
@@ -40,18 +40,16 @@
  }
 }
-@media screen and (max-width: $small-view) {
-  .video {
-    flex-direction: column;
-    height: auto;
-    .checkbox-container {
+@include on-small-main-col {
-      display: none;
+  .video {
-    }
+    flex-wrap: wrap;
+  }
+}
-    my-button {
+@include on-mobile-main-col {
-      margin-top: 10px;
+  .checkbox-container {
-    }
+    display: none;
  }
  .action-selection-mode {
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
index ca1cf2264..f8c3800d7 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
@@ -17,7 +17,7 @@ import { AuthService, ComponentPagination, LocalStorageService, Notifier, Screen
 import { ResultList, VideoSortField } from '@shared/models'
 import { PeerTubeTemplateDirective, Video } from '../shared-main'
 import { AbstractVideoList } from './abstract-video-list'
-import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component'
+import { MiniatureDisplayOptions } from './video-miniature.component'
 export type SelectionType = { [ id: number ]: boolean }
@@ -31,7 +31,6 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
  @Input() pagination: ComponentPagination
  @Input() titlePage: string
  @Input() miniatureDisplayOptions: MiniatureDisplayOptions
-  @Input() ownerDisplayType: OwnerDisplayType
  @Input() getVideosObservableFunction: (page: number, sort?: VideoSortField) => Observable<ResultList<Video>>
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
index 86f6664cb..f50f95003 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
@@ -1,4 +1,4 @@
-<div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage }">
+<div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage, 'display-as-row': displayAsRow }">
  <a
    [routerLink]="getPlaylistUrl()" [attr.title]="playlist.description"
    class="miniature-thumbnail"
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
index 1b16dbb01..c5be5f292 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
@@ -4,6 +4,7 @@
 .miniature {
  display: inline-block;
+  width: 100%;
  &.no-videos:not(.to-manage){
    a {
@@ -17,62 +18,92 @@
      display: none;
    }
  }
+}
-  .miniature-thumbnail {
+.miniature-thumbnail {
-    @include miniature-thumbnail;
+  @include miniature-thumbnail;
-    .miniature-playlist-info-overlay {
+  .miniature-playlist-info-overlay {
-      @include static-thumbnail-overlay;
+    @include static-thumbnail-overlay;
-      position: absolute;
+    position: absolute;
-      right: 0;
+    right: 0;
-      bottom: 0;
+    bottom: 0;
-      height: $video-thumbnail-height;
+    height: 100%;
-      padding: 0 10px;
+    padding: 0 10px;
-      display: flex;
+    display: flex;
-      align-items: center;
+    align-items: center;
-      font-size: 14px;
+    font-size: 14px;
-      font-weight: $font-semibold;
+    font-weight: $font-semibold;
-    }
  }
+}
-  .miniature-info {
+.miniature-info {
-    width: 200px;
-    margin-top: 2px;
-    line-height: normal;
-    .miniature-name {
-      @include miniature-name;
-      @include ellipsis-multiline(1.3em, 2);
+  .miniature-name {
+    @include miniature-name;
+    @include ellipsis-multiline(1.3em, 2);
-      margin: 0;
+    margin: 0;
-    }
+  }
-    .by {
+  .by {
-      @include disable-default-a-behaviour;
+    @include disable-default-a-behaviour;
-      display: block;
+    display: block;
-      color: pvar(--greyForegroundColor);
+    color: pvar(--greyForegroundColor);
-    }
+  }
-    .privacy-date {
+  .privacy-date {
-      margin-top: 5px;
+    margin-top: 5px;
-      .video-info-privacy {
+    .video-info-privacy {
-        font-size: 14px;
+      font-size: 14px;
-        font-weight: $font-semibold;
+      font-weight: $font-semibold;
-        &::after {
+      &::after {
-          content: '-';
+        content: '-';
-          margin: 0 3px;
+        margin: 0 3px;
-        }
      }
    }
+  }
-    .video-info-description {
+  .video-info-description {
-      margin-top: 10px;
+    margin-top: 10px;
-      color: pvar(--greyForegroundColor);
+    color: pvar(--greyForegroundColor);
-    }
+  }
+}
+.miniature:not(.display-as-row) {
+  .miniature-thumbnail {
+    margin-top: 10px;
+    margin-bottom: 5px;
+  }
+}
+.miniature.display-as-row {
+  --rowThumbnailWidth: #{$video-thumbnail-width};
+  --rowThumbnailHeight: #{$video-thumbnail-height};
+  display: flex;
+  .miniature-thumbnail {
+    width: var(--rowThumbnailWidth);
+    height: var(--rowThumbnailHeight);
+    margin-right: 10px;
+  }
+}
+@include on-small-main-col {
+  .miniature.display-as-row {
+    --rowThumbnailWidth: #{$video-thumbnail-medium-width};
+    --rowThumbnailHeight: #{$video-thumbnail-medium-height};
+  }
+}
+@include on-mobile-main-col {
+  .miniature.display-as-row {
+    --rowThumbnailWidth: #{$video-thumbnail-small-width};
+    --rowThumbnailHeight: #{$video-thumbnail-small-height};
  }
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
index 251aa868a..6b0b1056f 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
@@ -12,6 +12,7 @@ export class VideoPlaylistMiniatureComponent {
  @Input() displayChannel = false
  @Input() displayDescription = false
  @Input() displayPrivacy = false
+  @Input() displayAsRow = false
  getPlaylistUrl () {
    if (this.toManage) return [ '/my-library/video-playlists', this.playlist.uuid ]