154 files changed, 2963 insertions, 1850 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/+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..03d083bb6 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -1,57 +1,89 @@
-<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" />
+      <img class="account-avatar" [src]="account.avatarUrl" alt="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>{{ 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 class="created-at" i18n>Account created on {{ account.createdAt | date }}</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..a836e84ce 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,106 @@ 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);
+  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;
+}
+.created-at {
+  margin-top: 15px;
+  color: pvar(--greyForegroundColor);
+  padding-bottom: 60px;
+}
+.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..3354b4189 100644
--- a/client/src/app/+accounts/accounts.module.ts
+++ b/client/src/app/+accounts/accounts.module.ts
@@ -5,10 +5,9 @@ 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'
@@ -28,7 +27,6 @@ import { AccountsComponent } from './accounts.component'
    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..bac65c88e 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'
@@ -49,6 +50,7 @@ import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersCom
    SharedGlobalIconModule,
    SharedAbuseListModule,
    SharedVideoCommentModule,
+    SharedActorImageModule,
    TableModule,
    SelectButtonModule,
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/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index 1b5fe45c6..8edf03a89 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>
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/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/+login/login.component.html b/client/src/app/+login/login.component.html
index 3171e5b0f..0167066a0 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>
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..3df48d0aa 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,7 +22,6 @@ 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'
 @NgModule({
@@ -37,7 +38,8 @@ import { MyAccountComponent } from './my-account.component'
    SharedUserInterfaceSettingsModule,
    SharedGlobalIconModule,
    SharedAbuseListModule,
-    SharedShareModal
+    SharedShareModal,
+    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-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/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/+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..1312a1b3c 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -1,50 +1,129 @@
-<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="avatar-row">
+          <a [routerLink]="getAccountUrl()" title="View account" i18n-title>
+            <img class="account-avatar" [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
+          </a>
+          <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 [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Go the owner account page" class="actor-owner">
+        <a class="view-account complete" [routerLink]="getAccountUrl()" i18n>
-            <span class="d-inline-flex"><span i18n class="d-none d-sm-block mr-1">Created by</span>{{ videoChannel.ownerBy }}</span>
+          View owner account
-            <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
+        </a>
-          </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>{{ 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>
+            <div class="actor-counters">
+              <span i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</span>
+              <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>
-      </ng-template>
-      <list-overflow [items]="links" [itemTemplate]="linkTemplate"></list-overflow>
+      <div class="created-at" i18n>Channel created on {{ videoChannel.createdAt | date }}</div>
    </div>
+    <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>
+    <div class="owner-card">
+      <div class="section-label" i18n>OWNER ACCOUNT</div>
+      <ng-template *ngTemplateOutlet="ownerTemplate"></ng-template>
+    </div>
+  </div>
+  <div class="bottom-owner">
+    <div class="section-label" i18n>OWNER ACCOUNT</div>
+    <ng-template *ngTemplateOutlet="ownerTemplate"></ng-template>
  </div>
-  <div class="margin-content">
+  <div class="links">
-    <router-outlet></router-outlet>
+    <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..b19b4c81b 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -1,89 +1,308 @@
-// 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;
+  background-color: pvar(--channelBackgroundColor);
+  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;
+}
+.show-more {
+  @include show-more-description;
+  display: none;
+}
+.channel-buttons {
+  display: flex;
+  flex-wrap: wrap;
-  .actor-names {
+  > *:not(:last-child) {
-    grid-area: name;
+    margin-right: 15px;
  }
+}
+.channel-buttons.right {
+  margin-left: 45px;
+}
+// Only used by mobile
+.channel-buttons.bottom {
+  display: none;
+}
+.created-at {
+  margin-top: 15px;
+  color: pvar(--greyForegroundColor);
+  padding-bottom: 60px;
+}
+.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);
-  .actor-name {
+  .avatar-row {
-    flex-grow: 1;
+    display: flex;
+    margin-bottom: 15px;
-    .copy-button {
+    img {
-      border: none;
+      @include avatar(48px);
-      padding: 5px;
-      margin-top: -2px;
    }
+    .actor-info {
+      margin-left: 15px;
+    }
+    h4 {
+      font-size: 18px;
+      margin: 0;
+      a {
+        color: pvar(--mainForegroundColor);
+      }
+    }
+    .actor-handle {
+      font-size: var(--myGreyOwnerFontSize);
+      color: pvar(--greyForegroundColor);
+    }
+  }
+  .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;
+}
+.view-account.complete {
+  display: none;
 }
-.right-buttons {
+.copy-button {
-  display: flex;
+  border: none;
-  height: max-content;
+}
-  margin-left: auto;
-  margin-top: 10px;
+@media screen and (max-width: 1400px) {
+  // Takes all the row width
+  .channel-avatar-row {
+    grid-column: 1 / 3;
+  }
+  .owner-card {
+    grid-row: 2;
+    margin-left: 60px;
+  }
+}
+@media screen and (max-width: 1100px) {
+  .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));
+  }
+  .show-more {
+    display: inline-block;
+  }
+  .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;
+  }
-  grid-row: buttons-start / span buttons-end;
+  .owner-block {
-  grid-column: buttons-start;
+    display: grid;
+    width: 100%;
+    padding: 0;
-  @include media-breakpoint-down(lg) {
+    .avatar-row {
-    flex-flow: column-reverse;
+      grid-column: 1;
+      margin-right: 30px;
+    }
+    .owner-description {
+      grid-column: 2;
+      max-height: 70px;
+      @include fade-text(30px, pvar(--mainBackgroundColor));
+    }
-    a {
+    .view-account {
-      margin-top: 0.25rem;
+      grid-column: 2;
-      margin-right: 0 !important;
    }
  }
-  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..408f86225 100644
--- a/client/src/app/+video-channels/video-channels.module.ts
+++ b/client/src/app/+video-channels/video-channels.module.ts
@@ -2,10 +2,10 @@ 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'
@@ -20,13 +20,13 @@ import { VideoChannelsComponent } from './video-channels.component'
    SharedVideoPlaylistModule,
    SharedVideoMiniatureModule,
    SharedUserSubscriptionModule,
-    SharedGlobalIconModule
+    SharedGlobalIconModule,
+    SharedSupportModal
  ],
  declarations: [
    VideoChannelsComponent,
    VideoChannelVideosComponent,
-    VideoChannelAboutComponent,
    VideoChannelPlaylistsComponent
  ],
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-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.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.ts b/client/src/app/+videos/+video-watch/modal/video-support.component.ts
deleted file mode 100644
index bd5290a72..000000000
--- a/client/src/app/+videos/+video-watch/modal/video-support.component.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-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'
-@Component({
-  selector: 'my-video-support',
-  templateUrl: './video-support.component.html',
-  styleUrls: [ './video-support.component.scss' ]
-})
-export class VideoSupportComponent {
-  @Input() video: VideoDetails = null
-  @ViewChild('modal', { static: true }) modal: NgbModal
-  videoHTMLSupport = ''
-  constructor (
-    private markdownService: MarkdownService,
-    private modalService: NgbModal
-  ) { }
-  show () {
-    const modalRef = this.modalService.open(this.modal, { centered: true })
-    this.markdownService.enhancedMarkdownToHTML(this.video.support)
-      .then(r => this.videoHTMLSupport = r)
-    return modalRef
-  }
-}
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..5058f05dd 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,8 +1,9 @@
 <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" />
    </a>
@@ -14,7 +15,7 @@
    </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>
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..99103c2c3 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -142,7 +142,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>
@@ -289,6 +289,7 @@
    </div>
    <my-recommended-videos
+      [displayAsRow]="displayOtherVideosAsRow()"
      [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }"
      [playlist]="playlist"
      (gotRecommendations)="onRecommendations($event)"
@@ -313,6 +314,6 @@
 </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>
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..2e566e3fb 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 {
@@ -413,37 +407,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 +506,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 +519,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 +544,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..de5fb4ed0 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)
  }
@@ -316,10 +310,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    }
  }
-  onModalOpened () {
-    this.pausePlayer()
-  }
  onVideoRemoved () {
    this.redirectService.redirectToHomepage()
  }
@@ -396,6 +386,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
@@ -768,9 +763,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 +812,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
          ? this.videoService.getVideoViewUrl(video.uuid)
          : null,
        embedUrl: video.embedUrl,
+        embedTitle: video.name,
        isLive: video.isLive,
@@ -827,7 +825,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
        serverUrl: environment.apiUrl,
-        videoCaptions: playerCaptions
+        videoCaptions: playerCaptions,
+        videoUUID: video.uuid
      },
      webtorrent: {
@@ -867,24 +867,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..3e9f3822e 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,9 +14,9 @@ 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 { RecommendationsModule } from './recommendations/recommendations.module'
 import { TimestampRouteTransformerDirective } from './timestamp-route-transformer.directive'
+import { VideoAvatarChannelComponent } from './video-avatar-channel.component'
 import { VideoWatchPlaylistComponent } from './video-watch-playlist.component'
 import { VideoWatchRoutingModule } from './video-watch-routing.module'
 import { VideoWatchComponent } from './video-watch.component'
@@ -34,18 +35,20 @@ import { VideoWatchComponent } from './video-watch.component'
    SharedGlobalIconModule,
    SharedVideoCommentModule,
    SharedShareModal,
-    SharedVideoModule
+    SharedVideoModule,
+    SharedSupportModal
  ],
  declarations: [
    VideoWatchComponent,
    VideoWatchPlaylistComponent,
-    VideoSupportComponent,
    VideoCommentsComponent,
    VideoCommentAddComponent,
    VideoCommentComponent,
+    VideoAvatarChannelComponent,
    TimestampRouteTransformerDirective,
    TimestampRouteTransformerDirective
  ],
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..42293e412 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -43,6 +43,10 @@ $assets-path: '../assets';
        background-color: pvar(--mainForegroundColor);
        mask-image: url('#{$assets-path}/images/misc/menu.svg');
        margin: 0 18px 0 20px;
+        
+        @media screen and (max-width: $mobile-view) {
+          margin: 0 10px;
+        }
      }
    }
@@ -71,16 +75,11 @@ $assets-path: '../assets';
    }
    @media screen and (max-width: $mobile-view) {
-      width: 70px;
      .peertube-title {
        display: none;
      }
    }
-    @media screen and (max-width: 350px) {
-      flex: auto;
-    }
  }
  .header-right {
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..54dba5e17 100644
--- a/client/src/app/core/plugins/plugin.service.ts
+++ b/client/src/app/core/plugins/plugin.service.ts
@@ -235,6 +235,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..8aaaa238d 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,
@@ -131,7 +131,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..a60aa38d6 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -86,7 +86,7 @@ li.suggestion {
    flex: 1;
    input {
-      width: unset;
+      width: 70px;
    }
  }
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 2ea66e57d..aa247d268 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -3,6 +3,7 @@
 $menu-link-icon-size: 22px;
 $menu-link-icon-margin-right: 18px;
+$footer-links-base-opacity: .8;
 @mixin menu-link {
  display: flex;
@@ -91,168 +92,168 @@ menu {
    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;
+  $main-radius: 25px;
-      border-radius: $main-radius;
-      transition: all .1s ease-in-out;
-      cursor: pointer;
-      *, & {
+  flex: 1;
-        line-height: 1;
+  margin-left: 13px;
-      }
+  border-radius: $main-radius;
+  transition: all .1s ease-in-out;
+  cursor: pointer;
-      &.show {
+  *, & {
-        background-color: rgba(255, 255, 255, 0.20);
+    line-height: 1;
-        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
+  }
-      }
-      @mixin display-hints($is-mobile: false) {
+  &.show {
-        background-color: rgba(255, 255, 255, 0.15);
+    background-color: rgba(255, 255, 255, 0.20);
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
-        @if $is-mobile {
+  }
-          .dropdown-toggle-indicator {
-            display: inherit !important;
+  @mixin display-hints($is-mobile: false) {
-          }
+    background-color: rgba(255, 255, 255, 0.15);
-          .dropdown-toggle:first-child {
-            padding-right: 30px !important;
-          }
-        }
-      }
-      &:hover {
+    @if $is-mobile {
-        @include display-hints;
+      .dropdown-toggle-indicator {
+        display: inherit !important;
+      }
+      .dropdown-toggle:first-child {
+        padding-right: 30px !important;
      }
+    }
+  }
-      /* smartphones and touchscreens */
+  &:hover {
-      @media (hover: none) and (pointer: coarse) {
+    @include display-hints;
-        @include display-hints($is-mobile: true);
+  }
-        /* fill space when on mobile */
+  /* smartphones and touchscreens */
-        max-width: calc(100% - 80px);
+  @media (hover: none) and (pointer: coarse) {
-        .dropdown-toggle {
+    @include display-hints($is-mobile: true);
-          max-width: 100%;
-        }
-        .logged-in-info {
-          max-width: calc(100% - 45px) !important;
-        }
-      }
+    /* fill space when on mobile */
+    max-width: calc(100% - 80px);
+    .dropdown-toggle {
+      max-width: 100%;
+    }
+    .logged-in-info {
+      max-width: calc(100% - 45px) !important;
+    }
-      .dropdown-toggle-indicator {
+  }
-        position: relative;
-        width: 0;
-        display: none;
-        span {
-          position: absolute;
-          right: -35px;
-          top: -8px;
-          color: grey;
-          width: $main-radius;
-        }
-      }
-      .dropdown-toggle {
+  .dropdown-toggle-indicator {
-        &::after {
+    position: relative;
-          border: none;
+    width: 0;
-        }
+    display: none;
-      }
-      .dropdown-toggle:first-child {
+    span {
-        display: flex;
+      position: absolute;
-        align-items: center;
+      right: -35px;
-        padding: 5px 7px;
+      top: -8px;
-        border-radius: $main-radius;
+      color: grey;
-      }
+      width: $main-radius;
+    }
+  }
-      img {
+  .dropdown-toggle {
-        @include avatar(34px);
+    &::after {
+      border: none;
+    }
+  }
-        margin-right: 10px;
+  .dropdown-toggle:first-child {
-      }
+    display: flex;
+    align-items: center;
+    padding: 5px 7px;
+    border-radius: $main-radius;
+  }
+  img {
+    @include avatar(34px);
-      .logged-in-info {
+    margin-right: 10px;
-        max-width: 105px;
+  }
+}
-        flex-grow: 1;
+.logged-in-info {
+  max-width: 105px;
-        .logged-in-display-name,
+  flex-grow: 1;
-        .logged-in-username {
-          @include ellipsis;
-        }
-        .logged-in-display-name {
+  .logged-in-display-name,
-          font-size: 16px;
+  .logged-in-username {
-          font-weight: $font-semibold;
+    @include ellipsis;
-          color: pvar(--menuForegroundColor);
+  }
-          @include disable-default-a-behaviour;
+  .logged-in-display-name {
-        }
+    font-size: 16px;
+    font-weight: $font-semibold;
+    color: pvar(--menuForegroundColor);
-        .logged-in-username {
+    @include disable-default-a-behaviour;
-          font-size: 13px;
+  }
-          color: #C6C6C6;
-          margin-top: 3px;
-        }
-      }
-    }
-    my-notification {
+  .logged-in-username {
-      margin-left: auto;
+    font-size: 13px;
-      margin-right: 15px;
+    color: #C6C6C6;
-    }
+    margin-top: 3px;
  }
+}
-  .logged-in-menu {
+.logged-in-menu {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    align-items: flex-start;
+  align-items: flex-start;
-    border-top: 1px solid var(--greyForegroundColor);
+  border-top: 1px solid var(--greyForegroundColor);
-    line-height: $line-height-normal;
+  line-height: $line-height-normal;
-    a {
+  a {
-      @include menu-link;
+    @include menu-link;
-      @include disable-default-a-behaviour;
+    @include disable-default-a-behaviour;
-      $icon-size: 13px;
+    $icon-size: 13px;
-      $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
+    $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
-      font-size: 14px;
+    font-size: 14px;
-      width: 100%;
+    width: 100%;
-      min-height: 35px;
+    min-height: 35px;
-      my-global-icon {
+    my-global-icon {
-        width: $icon-size;
+      width: $icon-size;
-        height: $icon-size;
+      height: $icon-size;
-        // Keep aligned with other icons
+      // Keep aligned with other icons
-        margin-left: $additional-margin;
+      margin-left: $additional-margin;
-        &[iconName="channel"] {
+      &[iconName="channel"] {
-          margin-top: -2px;
+        margin-top: -2px;
-        }
      }
+    }
-      &.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;
-        }
      }
    }
  }
@@ -333,50 +334,48 @@ menu {
    flex-direction: column;
    padding: 0 $menu-lateral-padding;
  }
+}
-  $footer-links-base-opacity: .8;
+.footer-links {
+  &, > div {
-  .footer-links {
+    display: flex;
-    &, > div {
+    flex-wrap: wrap;
-      display: flex;
+  }
-      flex-wrap: wrap;
-    }
-    a, span[role=button] {
+  a, span[role=button] {
-      display: inline-block;
+    display: inline-block;
-      text-decoration: none;
+    text-decoration: none;
-      color: pvar(--menuForegroundColor);
+    color: pvar(--menuForegroundColor);
-      opacity: $footer-links-base-opacity;
+    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;
-      font-size: 90%;
+      height: 1.4rem;
-      font-weight: 500;
-      line-height: 1.4rem;
+      my-global-icon {
-      margin-right: 8px;
+        @include apply-svg-color(pvar(--menuForegroundColor));
-      &.inline-global-icon {
+        display: flex;
-        display: inline-flex;
+        width: auto;
-        align-items: center;
+        height: 90%;
-        white-space: nowrap;
+        margin-right: .2rem;
-        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 {
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/instance-config-warning-modal.component.html b/client/src/app/modal/instance-config-warning-modal.component.html
index 5a8adf726..498adfeff 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>
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..eeb9f128b 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,7 +117,8 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
        warningTitle: false,
        startTime: abuse.video.startAt,
        stopTime: abuse.video.endAt
-      })
+      }),
+      abuse.video.name
    )
  }
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/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..17fddff09 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, ActorImage } from '@shared/models'
 import { Actor } from './actor.model'
 export class Account extends Actor implements ServerAccount {
@@ -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..1ee0c297e 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 { Actor as ActorServer, ActorImage } from '@shared/models'
 import { getAbsoluteAPIUrl } from '@app/helpers'
 export abstract class Actor implements ActorServer {
  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<ActorServer>) {
    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/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/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 9d550996d..16d230f46 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,7 @@ 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 { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users'
 import { RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
 import { VideoCaptionService } from './video-caption'
@@ -64,13 +65,11 @@ import { VideoChannelService } from './video-channel'
  ],
  declarations: [
-    VideoAvatarChannelComponent,
-    ActorAvatarInfoComponent,
    FromNowPipe,
    NumberFormatterPipe,
    BytesPipe,
    DurationFormatterPipe,
+    AutofocusDirective,
    InfiniteScrollerDirective,
    PeerTubeTemplateDirective,
@@ -118,13 +117,11 @@ import { VideoChannelService } from './video-channel'
    PrimeSharedModule,
-    VideoAvatarChannelComponent,
-    ActorAvatarInfoComponent,
    FromNowPipe,
    BytesPipe,
    NumberFormatterPipe,
    DurationFormatterPipe,
+    AutofocusDirective,
    InfiniteScrollerDirective,
    PeerTubeTemplateDirective,
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..1c2c4a575 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,
@@ -72,7 +72,7 @@ export class Video implements VideoServerModel {
    displayName: string
    url: string
    host: string
-    avatar?: Avatar
+    avatar?: ActorImage
  }
  channel: {
@@ -81,7 +81,7 @@ export class Video implements VideoServerModel {
    displayName: string
    url: string
    host: string
-    avatar?: Avatar
+    avatar?: ActorImage
  }
  userHistory?: {
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.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.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-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..4a967987f 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,10 +1,10 @@
 <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
diff --git a/client/src/app/+videos/+video-watch/modal/video-support.component.scss b/client/src/app/shared/shared-support-modal/support-modal.component.scss
index 184e09027..184e09027 100644
--- a/client/src/app/+videos/+video-watch/modal/video-support.component.scss
+++ b/client/src/app/shared/shared-support-modal/support-modal.component.scss
diff --git a/client/src/app/shared/shared-support-modal/support-modal.component.ts b/client/src/app/shared/shared-support-modal/support-modal.component.ts
new file mode 100644
index 000000000..ae603c7a8
--- /dev/null
+++ b/client/src/app/shared/shared-support-modal/support-modal.component.ts
@@ -0,0 +1,40 @@
+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-support-modal',
+  templateUrl: './support-modal.component.html',
+  styleUrls: [ './support-modal.component.scss' ]
+})
+export class SupportModalComponent {
+  @Input() video: VideoDetails = null
+  @Input() videoChannel: VideoChannel = null
+  @ViewChild('modal', { static: true }) modal: NgbModal
+  htmlSupport = ''
+  displayName = ''
+  constructor (
+    private markdownService: MarkdownService,
+    private modalService: NgbModal
+  ) { }
+  show () {
+    const modalRef = this.modalService.open(this.modal, { centered: true })
+    const support = this.video?.support || this.videoChannel.support
+    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-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
index 07f79cd6d..ee5df28be 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
@@ -43,7 +43,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 +52,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..6570b63d0 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
@@ -69,7 +69,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/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index 4608e93e7..8a9218343 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
@@ -17,85 +17,116 @@
  </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="nav-content">
-              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataFormat | 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>
-        <ng-container ngbNavItem [disabled]="videoFileMetadataVideoStream === undefined">
+      <div [ngbNavOutlet]="resolutionNav"></div>
-          <a ngbNavLink i18n>Video stream</a>
+  
-          <ng-template ngbNavContent>
+      <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
-            <div class="file-metadata">
+        <ng-container *ngIf="videoFile?.metadata">
-              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataVideoStream | keyvalue">
+          <div ngbNav #nav="ngbNav" class="nav-tabs nav-metadata">
-                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+            <ng-container ngbNavItem>
-                <span class="metadata-attribute-value">{{ item.value.value }}</span>
+              <a ngbNavLink i18n>Format</a>
-              </div>
+              <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 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">
-        </ng-container>
+              <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent">
+              <label i18n for="download-torrent">Torrent (.torrent file)</label>
-        <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>
+          </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">
-    <div class="download-type" *ngIf="type === 'video'">
+          <span class="glyphicon glyphicon-menu-down"></span>
-      <div class="peertube-radio-container">
+  
-        <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct">
+          <ng-container i18n>
-        <label i18n for="download-direct">Direct download</label>
+            Advanced
-      </div>
+          </ng-container>
+        </ng-container>
-      <div class="peertube-radio-container">
+  
-        <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent">
+        <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
-        <label i18n for="download-torrent">Torrent (.torrent file)</label>
+          <span class="glyphicon glyphicon-menu-up"></span>
+  
+          <ng-container i18n>
+            Simple
+          </ng-container>
+        </ng-container>
      </div>
-    </div>
+    </ng-container>
  </div>
  <div class="modal-footer inputs">
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..199c3dac8 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,21 @@
  }
 }
+.action-button-cancel {
+  @include peertube-button-link;
+}
+.action-button-submit {
+  @include peertube-button-link;
+  @include orange-button;
+}
 #dropdownDownloadType {
  cursor: pointer;
 }
 .download-type {
-  margin-top: 30px;
+  margin-top: 20px;
  .peertube-radio-container {
    @include peertube-radio-container;
@@ -30,6 +61,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..bac8bcc2d 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,9 +9,9 @@
  <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">
-          <img [src]="getAvatarUrl()" alt="" />
+          <img [src]="getAvatarUrl()" alt="" [ngClass]="{ channel: displayOwnerVideoChannel() }" />
        </a>
        <div class="w-100 d-flex flex-column">
@@ -33,7 +33,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..621951919 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,205 @@
 @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 {
+.avatar {
-      width: $video-miniature-width - $more-button-width - $more-margin-right;
+  margin: 10px 10px 0 0;
-      line-height: normal;
-      .avatar {
+  img:not(.channel) {
-        margin: 10px 10px 0 0;
+    @include avatar(40px);
+  }
-        img {
+  img.channel {
-          @include avatar(40px);
+    @include channel-avatar(40px);
-        }
+  }
-      }
+}
-      .video-miniature-name {
+.video-miniature-created-at-views {
-        @include miniature-name;
+  font-size: 13px;
-        width: calc(100% - #{$more-button-width});
+}
-      }
-      .video-miniature-meta {
+.video-miniature-account,
-        width: calc(100% + #{$more-button-width});
+.video-miniature-channel {
-        overflow: hidden;
+  @include disable-default-a-behaviour;
-      }
+  @include ellipsis;
-      .video-miniature-created-at-views {
+  display: block;
-        display: block;
+  font-size: 13px;
-        font-size: 13px;
+  color: pvar(--greyForegroundColor);
-      }
-      .video-miniature-account,
+  &:hover {
-      .video-miniature-channel {
+    color: $grey-foreground-hover-color;
-        @include disable-default-a-behaviour;
+  }
-        @include ellipsis;
+}
-        display: block;
+.video-info-privacy,
-        font-size: 13px;
+.video-info-blocked .blocked-label,
-        color: pvar(--greyForegroundColor);
+.video-info-nsfw {
+  font-weight: $font-semibold;
+}
-        &:hover {
+.video-info-blocked {
-          color: $grey-foreground-hover-color;
+  color: red;
-        }
-      }
-      .video-info-privacy,
+  .blocked-reason::before {
-      .video-info-blocked .blocked-label,
+    content: ' - ';
-      .video-info-nsfw {
+  }
-        font-weight: $font-semibold;
+}
-      }
-      .video-info-blocked {
+.video-info-nsfw {
-        color: red;
+  color: red;
+}
-        .blocked-reason::before {
+.video-actions {
-          content: ' - ';
+  width: $more-button-width;
-        }
+  height: 30px;
-      }
-      .video-info-nsfw {
+  ::ng-deep .dropdown-root:not(.show) {
-        color: red;
+    opacity: 0;
-      }
+  }
-    }
-    .video-actions {
+  ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
-      margin-top: 3px;
+    opacity: 1;
-      width: $more-button-width;
+  }
-      height: 30px;
-      ::ng-deep .dropdown-root:not(.show) {
+  ::ng-deep .more-icon {
-        opacity: 0;
+    opacity: .6;
-      }
-      ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
+    &:hover {
-        opacity: 1;
+      opacity: 1;
-      }
+    }
+  }
+}
-      ::ng-deep .more-icon {
+.video-miniature {
-        opacity: .6;
+  &:hover ::ng-deep .video-thumbnail-actions-overlay,
+  &:hover .video-actions ::ng-deep .dropdown-root {
+    opacity: 1 !important;
+  }
+}
-        &:hover {
+// Grid mode
-          opacity: 1;
+// 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%;
-    @media screen and (max-width: $small-view) {
+  my-video-thumbnail {
-      .video-miniature-information {
+    @include block-ratio($selector: '::ng-deep .video-thumbnail');
-        margin: 0 10px;
+  }
-      }
-      .video-actions {
+  .video-bottom {
-        margin: 0;
+    display: flex;
-        top: -3px;
+    width: 100%;
+  }
-        ::ng-deep .dropdown-root {
+  .video-miniature-name {
-          opacity: 1 !important;
+    margin-top: 10px;
-        }
+    margin-bottom: 5px;
-      }
-    }
  }
-  &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay,
+  .video-miniature-created-at-views {
-  &:hover .video-bottom .video-actions ::ng-deep .dropdown-root {
+    display: block;
-    opacity: 1;
  }
-  &.fit-width {
+  .video-actions {
+    margin-top: 3px;
+  }
+  @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: flex;
+  flex-direction: row;
-  &.display-as-row {
+  .video-bottom {
-    flex-direction: row;
-    padding-bottom: 0;
-    height: auto;
    display: flex;
-    flex-grow: 1;
+  }
-    my-video-thumbnail {
+  // We don't display avatar in row mode
-      margin-right: 10px;
+  .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;
+  }
-      }
-    }
+  .video-miniature-created-at-views,
+  .video-miniature-account,
+  .video-miniature-channel {
+    font-size: $video-miniature-row-info-font-size;
+  }
-    @media screen and (max-width: $small-view) {
+  .video-actions {
-      flex-direction: column;
+    margin-top: -3px;
-      height: auto;
+  }
+}
-      my-video-thumbnail {
+@include on-small-main-col {
-        margin-right: 0;
+  .video-miniature.display-as-row {
-      }
+    --rowThumbnailWidth: #{$video-thumbnail-medium-width};
+    --rowThumbnailHeight: #{$video-thumbnail-medium-height};
+  }
+}
-      .video-miniature-information {
+@include on-mobile-main-col {
-        min-width: initial;
+  .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..48da92d6b 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,7 +181,7 @@ export class VideoMiniatureComponent implements OnInit {
  }
  getAvatarUrl () {
-    if (this.ownerDisplayTypeChosen === 'account') {
+    if (this.displayOwnerAccount()) {
      return this.video.accountAvatarUrl
    }
@@ -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 ]