113 files changed, 573 insertions, 662 deletions
diff --git a/client/src/app/shared/form-validators/user-validators.ts b/client/src/app/shared/form-validators/user-validators.ts
index 6d0dea64e..3262853d8 100644
--- a/client/src/app/shared/form-validators/user-validators.ts
+++ b/client/src/app/shared/form-validators/user-validators.ts
@@ -61,7 +61,7 @@ export const USER_EXISTING_PASSWORD_VALIDATOR: BuildFormValidator = {
  }
 }
-export const USER_PASSWORD_VALIDATOR: BuildFormValidator = {
+export const USER_PASSWORD_VALIDATOR = {
  VALIDATORS: [
    Validators.required,
    Validators.minLength(6),
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
index 986de15ed..b04d46e32 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@@ -17,9 +17,10 @@
        </a>
        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
-          class="ml-auto muted abuse-details-links" i18n
+          class="ms-auto muted abuse-details-links" i18n
        >
-          {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
+          {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}
+          <my-global-icon iconName="flag"></my-global-icon>
        </a>
      </span>
    </div>
@@ -37,9 +38,10 @@
        </a>
        <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
-          class="ml-auto muted abuse-details-links" i18n
+          class="ms-auto muted abuse-details-links" i18n
        >
-          {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
+          {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}
+          <my-global-icon iconName="flag"></my-global-icon>
        </a>
      </span>
    </div>
@@ -53,7 +55,7 @@
    <div class="mt-3 d-flex">
      <span class="moderation-expanded-label">
        <ng-container i18n>Report</ng-container>
-        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse.id  }" class="ml-1 muted">#{{ abuse.id }}</a>
+        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse.id  }" class="ms-1 muted">#{{ abuse.id }}</a>
      </span>
      <span class="moderation-expanded-text" [innerHTML]="abuse.reasonHtml"></span>
    </div>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
index 37bf4cc56..bd43ed459 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
@@ -15,3 +15,7 @@
 .abuse-details-links {
  @include disable-default-a-behaviour;
 }
+my-global-icon[iconName=flag] {
+  width: 15px;
+}
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index f0a27c6e2..f79054d03 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -8,7 +8,7 @@
 >
  <ng-template pTemplate="caption">
    <div class="caption">
-      <div class="ml-auto">
+      <div class="ms-auto">
        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
      </div>
    </div>
@@ -70,7 +70,7 @@
            </span>
            <span name>
-              <span *ngIf="abuse.video.blacklisted" i18n-title title="The video was blocked" class="glyphicon glyphicon-ban-circle"></span>
+              <my-global-icon *ngIf="abuse.video.blacklisted" iconName="no" i18n-title title="The video was blocked"></my-global-icon>
            </span>
          </my-video-cell>
        </td>
@@ -80,7 +80,7 @@
            <div class="table-video-text">
              <div>
                {{ abuse.video.name }}
-                <span class="glyphicon glyphicon-trash"></span>
+                <my-global-icon iconName="delete"></my-global-icon>
              </div>
              <div i18n>by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }} </div>
            </div>
@@ -116,8 +116,8 @@
      <td class="c-hand" [pRowToggler]="abuse">{{ abuse.createdAt | date: 'short'  }}</td>
      <td class="c-hand abuse-states" [pRowToggler]="abuse">
-        <span *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-ok"></span>
+        <my-global-icon *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" iconName="tick"></my-global-icon>
-        <span *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-remove"></span>
+        <my-global-icon *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" iconName="cross"></my-global-icon>
      </td>
      <td class="c-hand abuse-messages" (click)="openAbuseMessagesModal(abuse)">
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
index 2d8acae58..4852f2e8b 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
@@ -7,10 +7,6 @@
  color: var(--greyForegroundColor);
 }
-.abuse-states .glyphicon-comment {
-  @include margin-left(0.5rem);
-}
 .abuse-messages {
  my-global-icon {
    @include margin-left(3px);
@@ -20,3 +16,10 @@
    top: -2px;
  }
 }
+.table-video-text my-global-icon,
+my-video-cell my-global-icon {
+  width: 15px;
+  position: relative;
+  top: -2px;
+}
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
index d77e44a9d..3b43a4a4d 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
@@ -25,7 +25,6 @@ textarea {
 .no-messages {
  display: flex;
-  font-size: 15px;
  justify-content: center;
 }
@@ -45,10 +44,6 @@ textarea {
    color: var(--mainForegroundColor);
    background-color: var(--greyBackgroundColor);
-    .content {
-      font-size: 15px;
-    }
    .date {
      font-size: 13px;
      color: var(--greyForegroundColor);
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
index e9c5fadcf..b63bf1f92 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
@@ -6,7 +6,7 @@
      <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>
+        <label class="visually-hidden" for="avatarfile" i18n>Upload a new avatar</label>
        <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
      </div>
@@ -15,7 +15,7 @@
        #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>
+        <label class="visually-hidden" for="avatarMenu" i18n>Change your avatar</label>
      </div>
    </div>
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
index 923f0029b..fd8cd7ffc 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
@@ -3,37 +3,36 @@
 .actor {
  display: flex;
+}
-  my-actor-avatar {
+my-actor-avatar {
-    @include margin-right(15px);
+  @include margin-right(15px);
-  }
+}
-  .actor-info {
+.actor-info {
-    display: inline-flex;
+  display: inline-flex;
-    flex-direction: column;
+  flex-direction: column;
+}
-    .actor-info-display-name {
+.actor-info-display-name {
-      @include peertube-word-wrap;
+  @include peertube-word-wrap;
-      font-size: 20px;
+  font-size: 20px;
-      font-weight: $font-bold;
+  font-weight: $font-bold;
-      @media screen and (max-width: $small-view) {
+  @media screen and (max-width: $small-view) {
-        font-size: 16px;
+    font-size: 16px;
-      }
+  }
-    }
+}
-    .actor-info-username {
+.actor-info-username {
-      position: relative;
+  position: relative;
-      font-size: 14px;
+  font-size: 14px;
-      color: pvar(--greyForegroundColor);
+  color: pvar(--greyForegroundColor);
-    }
+}
-    .actor-info-followers {
+.actor-info-followers {
-      font-size: 15px;
+  padding-bottom: .5rem;
-      padding-bottom: .5rem;
-    }
-  }
 }
 .actor-img-edit-container {
@@ -46,3 +45,7 @@
  right: 45px;
  border-radius: 50%;
 }
+.dropdown-item {
+  @include dropdown-with-icon-item;
+}
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.html b/client/src/app/shared/shared-actor-image/actor-avatar.component.html
index c285b6cc3..ba025da4d 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.html
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.html
@@ -1,7 +1,7 @@
 <ng-template #img>
-  <img *ngIf="previewImage || avatarUrl || !initial" [class]="getClass('avatar')" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" />
+  <img *ngIf="previewImage || avatarUrl || !initial" [class]="classes" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" />
-  <div *ngIf="!avatarUrl && initial" [ngClass]="getClass('initial')">
+  <div *ngIf="!avatarUrl && initial" [ngClass]="classes">
    <span>{{ initial }}</span>
  </div>
 </ng-template>
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
index 600984aa2..fa4f1e51f 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, OnChanges } from '@angular/core'
 import { VideoChannel } from '../shared-main'
 import { Account } from '../shared-main/account/account.model'
@@ -15,7 +15,7 @@ export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | '
  styleUrls: [ './actor-avatar.component.scss' ],
  templateUrl: './actor-avatar.component.html'
 })
-export class ActorAvatarComponent {
+export class ActorAvatarComponent implements OnChanges {
  private _title: string
  @Input() account: ActorInput
@@ -42,6 +42,8 @@ export class ActorAvatarComponent {
    return ''
  }
+  classes: string[] = []
  get alt () {
    if (this.account) return $localize`Account avatar`
    if (this.channel) return $localize`Channel avatar`
@@ -68,20 +70,18 @@ export class ActorAvatarComponent {
    return name.slice(0, 1)
  }
-  getClass (type: 'avatar' | 'initial') {
+  ngOnChanges () {
-    const base = [ 'avatar' ]
+    this.classes = [ 'avatar' ]
-    if (this.size) base.push(`avatar-${this.size}`)
+    if (this.size) this.classes.push(`avatar-${this.size}`)
-    if (this.channel) base.push('channel')
+    if (this.channel) this.classes.push('channel')
-    else base.push('account')
+    else this.classes.push('account')
-    if (type === 'initial' && this.initial) {
+    if (!this.avatarUrl && this.initial) {
-      base.push('initial')
+      this.classes.push('initial')
-      base.push(this.getColorTheme())
+      this.classes.push(this.getColorTheme())
    }
-    return base
  }
  hasActor () {
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts
index 0e4d5fb12..7d3498d4c 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts
@@ -7,7 +7,7 @@ import { MiniatureDisplayOptions } from '../../shared-video-miniature'
 import { CustomMarkupComponent } from './shared'
 /*
- * Markup component list videos depending on criterias
+ * Markup component list videos depending on criteria
 */
 @Component({
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.html b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
index 7031cb53b..e4f318385 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.html
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
@@ -1,6 +1,7 @@
-<div class="input-group has-feedback has-clear">
+<div class="input-group has-clear" ngbDropdown placement="bottom-left auto" container="body">
-  <div *ngIf="hasFilters()" class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
-    <div class="input-group-text" ngbDropdownToggle>
+  <ng-container *ngIf="hasFilters()">
+    <div class="input-group-text c-hand" ngbDropdownToggle>
      <span class="caret" aria-haspopup="menu" role="button"></span>
    </div>
@@ -15,14 +16,14 @@
        </button>
      </ng-container>
    </div>
-  </div>
+  </ng-container>
  <input
    type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+    class="last-in-group"
    [(ngModel)]="searchValue"
    (keyup)="onInputSearch($event)"
  >
-  <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="onResetTableFilter()"></a>
+  <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter()"></my-global-icon>
-  <span class="sr-only" i18n>Clear filters</span>
 </div>
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
index ee1b3b508..ed85385fd 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
@@ -23,7 +23,6 @@ my-global-icon {
  width: 18px;
  height: 18px;
  &.no-visible {
    @include margin-right($size + $margin);
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.html b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
index 2ef61ecfc..2ec436ac6 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.html
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
@@ -18,7 +18,7 @@
    </select>
  </div>
-  <my-input-toggle-hidden *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [inputId]="setting.name"></my-input-toggle-hidden>
+  <my-input-text *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [inputId]="setting.name"></my-input-text>
  <textarea *ngIf="setting.type === 'input-textarea'" type="text" [id]="setting.name" [formControlName]="setting.name"></textarea>
diff --git a/client/src/app/shared/shared-forms/index.ts b/client/src/app/shared/shared-forms/index.ts
index 727416a40..495785e7b 100644
--- a/client/src/app/shared/shared-forms/index.ts
+++ b/client/src/app/shared/shared-forms/index.ts
@@ -3,7 +3,7 @@ export * from './form-reactive'
 export * from './form-validator.service'
 export * from './form-validator.service'
 export * from './input-switch.component'
-export * from './input-toggle-hidden.component'
+export * from './input-text.component'
 export * from './markdown-textarea.component'
 export * from './peertube-checkbox.component'
 export * from './preview-upload.component'
diff --git a/client/src/app/shared/shared-forms/input-switch.component.html b/client/src/app/shared/shared-forms/input-switch.component.html
index ce1dee470..9a466055a 100644
--- a/client/src/app/shared/shared-forms/input-switch.component.html
+++ b/client/src/app/shared/shared-forms/input-switch.component.html
@@ -1,4 +1,4 @@
 <div (click)="update()">
  <input type="checkbox" [checked]="checked"/>
-  <label class="ml-auto">Toggle</label>
+  <label class="ms-auto">Toggle</label>
 </div>
diff --git a/client/src/app/shared/shared-forms/input-text.component.html b/client/src/app/shared/shared-forms/input-text.component.html
new file mode 100644
index 000000000..f890c4f02
--- /dev/null
+++ b/client/src/app/shared/shared-forms/input-text.component.html
@@ -0,0 +1,20 @@
+<div class="input-group">
+  <input
+    [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex"
+    [(ngModel)]="value" (ngModelChange)="update()" [readonly]="readonly"
+    #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
+  />
+  <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle">
+    <my-global-icon *ngIf="show" iconName="eye-open"></my-global-icon>
+    <my-global-icon *ngIf="!show" iconName="eye-close"></my-global-icon>
+  </button>
+  <button
+    *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button"
+    class="btn btn-outline-secondary text-uppercase" i18n-title title="Copy"
+  >
+    <my-global-icon iconName="copy"></my-global-icon>
+    <span class="copy-text">Copy</span>
+  </button>
+</div>
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss b/client/src/app/shared/shared-forms/input-text.component.scss
index ef4236ebc..ae8bf5fec 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
+++ b/client/src/app/shared/shared-forms/input-text.component.scss
@@ -5,11 +5,14 @@ input {
  @include peertube-input-text(auto);
  @include padding-left(15px !important);
  @include padding-right(15px !important);
+}
-  // set again properties of peertube-input-text that are overriden by .input-group
+.btn {
-  font-size: 15px !important;
+  @include button-with-icon(18px);
 }
-.eye-button {
+.copy-text {
-  line-height: 1 !important;
+  font-size: 14px;
+  margin-left: 5px;
+  vertical-align: top;
 }
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.ts b/client/src/app/shared/shared-forms/input-text.component.ts
index e03353fe1..ed4637c17 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.ts
+++ b/client/src/app/shared/shared-forms/input-text.component.ts
@@ -3,18 +3,18 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { Notifier } from '@app/core'
 @Component({
-  selector: 'my-input-toggle-hidden',
+  selector: 'my-input-text',
-  templateUrl: './input-toggle-hidden.component.html',
+  templateUrl: './input-text.component.html',
-  styleUrls: [ './input-toggle-hidden.component.scss' ],
+  styleUrls: [ './input-text.component.scss' ],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => InputToggleHiddenComponent),
+      useExisting: forwardRef(() => InputTextComponent),
      multi: true
    }
  ]
 })
-export class InputToggleHiddenComponent implements ControlValueAccessor {
+export class InputTextComponent implements ControlValueAccessor {
  @Input() inputId = Math.random().toString(11).slice(2, 8) // id cannot be left empty or undefined
  @Input() value = ''
  @Input() autocomplete = 'off'
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
deleted file mode 100644
index dfe646d2f..000000000
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="input-group input-group-sm">
-  <input
-    [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex"
-    [(ngModel)]="value" (ngModelChange)="update()" [readonly]="readonly"
-    #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
-  />
-  <div *ngIf="withToggle || withCopy" class="input-group-append">
-    <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary eye-button" [title]="toggleTitle">
-      <span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span>
-    </button>
-    <button
-      *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button"
-      class="btn btn-outline-secondary text-uppercase" i18n-title title="Copy"
-    >
-      <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 5939bb999..116630d8a 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -49,7 +49,7 @@ $input-border-radius: 3px;
          svg {
            stroke: var(--mainForegroundColor);
-            opacity: 0.6;
+            opacity: 0.7;
          }
          &:hover,
@@ -102,7 +102,6 @@ $input-border-radius: 3px;
  min-height: 75px;
  padding: $base-padding;
  overflow-y: auto;
-  font-size: 15px;
  word-wrap: break-word;
 }
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.html b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
index c679e1403..cd06e75ba 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
@@ -1,6 +1,6 @@
 <div class="root flex-column">
  <div class="d-flex">
-    <label class="form-group-checkbox">
+    <label>
      <input
        type="checkbox"
        [(ngModel)]="checked"
@@ -33,10 +33,10 @@
    <div *ngIf="recommended" class="recommended" i18n>Recommended</div>
  </div>
-  <div class="ml-4 d-flex flex-column">
+  <div class="ms-4 d-flex flex-column">
-    <small class="wrapper mt-2 muted">
+    <div class="wrapper form-group-description">
      <ng-content select="description"></ng-content>
-    </small>
+    </div>
    <span class="wrapper mt-3">
      <ng-content select="extra"></ng-content>
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
index 4e384e7e0..ac9127677 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
@@ -4,14 +4,9 @@
 .root {
  display: flex;
-  .form-group-checkbox {
+  label {
    display: flex;
-    align-items: center;
+    font-size: $form-input-font-size;
-    .label-text {
-      font-weight: $font-regular;
-      margin: 0;
-    }
    input {
      @include peertube-checkbox(1px);
@@ -23,12 +18,11 @@
  }
  my-help {
-    position: relative;
+    line-height: 17px;
-    top: 2px;
  }
-  small {
+  .form-group-description {
-    font-size: 90%;
+    margin-top: 2px;
  }
  .wrapper:empty {
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.ts b/client/src/app/shared/shared-forms/reactive-file.component.ts
index 50b7d4c3e..48055a51c 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.ts
+++ b/client/src/app/shared/shared-forms/reactive-file.component.ts
@@ -57,7 +57,7 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
      const extension = '.' + file.name.split('.').pop()
      if (this.extensions.includes(extension.toLowerCase()) === false) {
-        const message = $localize`PeerTube cannot handle this kind of file. Accepted extensions are ${this.allowedExtensionsMessage}}.`
+        const message = $localize`PeerTube cannot handle this kind of file. Accepted extensions are ${this.allowedExtensionsMessage}.`
        this.notifier.error(message)
        return
diff --git a/client/src/app/shared/shared-forms/select/select-channel.component.html b/client/src/app/shared/shared-forms/select/select-channel.component.html
index f83f17a16..b49fd36fa 100644
--- a/client/src/app/shared/shared-forms/select/select-channel.component.html
+++ b/client/src/app/shared/shared-forms/select/select-channel.component.html
@@ -7,7 +7,7 @@
  [searchable]="searchable"
 >
  <ng-option *ngFor="let channel of channels" [value]="channel.id">
-    <img alt="" class="avatar mr-1" [src]="channel.avatarPath" />
+    <img alt="" class="avatar me-1" [src]="channel.avatarPath" />
    {{ channel.label }}
  </ng-option>
 </ng-select>
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox-all.component.ts b/client/src/app/shared/shared-forms/select/select-checkbox-all.component.ts
index ebf7b77a6..2c3226f68 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox-all.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-checkbox-all.component.ts
@@ -1,6 +1,7 @@
 import { Component, forwardRef, Input } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { Notifier } from '@app/core'
+import { prepareIcu } from '@app/helpers'
 import { SelectOptionsItem } from '../../../../types/select-options-item.model'
 import { ItemSelectCheckboxValue } from './select-checkbox.component'
@@ -78,7 +79,12 @@ export class SelectCheckboxAllComponent implements ControlValueAccessor {
    if (!outputItems) return true
    if (outputItems.length >= this.maxItems) {
-      this.notifier.error($localize`You can't select more than ${this.maxItems} items`)
+      this.notifier.error(
+        prepareIcu($localize`You can't select more than {maxItems, plural, =1 {1 item} other {{maxItems} items}}`)(
+          { maxItems: this.maxItems },
+          $localize`You can't select more than ${this.maxItems} items`
+        )
+      )
      return false
    }
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.html b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
index 03db2875b..2799ccdcc 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
@@ -22,7 +22,7 @@
 >
  <ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
-    <div class="form-group-checkbox">
+    <div class="checkbox-wrapper">
      <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
      <span role="checkbox" [attr.aria-checked]="item$.selected"></span>
      <span>{{ item.group }}</span>
@@ -30,7 +30,7 @@
  </ng-template>
  <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
-    <div class="form-group-checkbox">
+    <div class="checkbox-wrapper">
      <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
      <span role="checkbox" [attr.aria-checked]="item$.selected"></span>
      <span>{{ item.label }}</span>
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.scss b/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
index d47c4f9da..892f22dff 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
@@ -7,7 +7,7 @@ ng-select ::ng-deep {
    align-items: center;
  }
-  .form-group-checkbox {
+  .checkbox-wrapper {
    display: flex;
    align-items: center;
diff --git a/client/src/app/shared/shared-forms/shared-form.module.ts b/client/src/app/shared/shared-forms/shared-form.module.ts
index 60c2f66ae..81f076db6 100644
--- a/client/src/app/shared/shared-forms/shared-form.module.ts
+++ b/client/src/app/shared/shared-forms/shared-form.module.ts
@@ -9,7 +9,7 @@ import { AdvancedInputFilterComponent } from './advanced-input-filter.component'
 import { DynamicFormFieldComponent } from './dynamic-form-field.component'
 import { FormValidatorService } from './form-validator.service'
 import { InputSwitchComponent } from './input-switch.component'
-import { InputToggleHiddenComponent } from './input-toggle-hidden.component'
+import { InputTextComponent } from './input-text.component'
 import { MarkdownTextareaComponent } from './markdown-textarea.component'
 import { PeertubeCheckboxComponent } from './peertube-checkbox.component'
 import { PreviewUploadComponent } from './preview-upload.component'
@@ -40,7 +40,7 @@ import { TimestampInputComponent } from './timestamp-input.component'
  ],
  declarations: [
-    InputToggleHiddenComponent,
+    InputTextComponent,
    MarkdownTextareaComponent,
    PeertubeCheckboxComponent,
    PreviewUploadComponent,
@@ -71,7 +71,7 @@ import { TimestampInputComponent } from './timestamp-input.component'
    InputMaskModule,
    NgSelectModule,
-    InputToggleHiddenComponent,
+    InputTextComponent,
    MarkdownTextareaComponent,
    PeertubeCheckboxComponent,
    PreviewUploadComponent,
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.scss b/client/src/app/shared/shared-forms/timestamp-input.component.scss
index 27d6fa173..e69a06947 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -4,7 +4,6 @@
 p-inputmask {
  ::ng-deep input {
    width: 80px;
-    font-size: 15px;
    &:focus-within,
    &:focus {
diff --git a/client/src/app/shared/shared-icons/global-icon.component.scss b/client/src/app/shared/shared-icons/global-icon.component.scss
index 6795d6628..10180829f 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.scss
+++ b/client/src/app/shared/shared-icons/global-icon.component.scss
@@ -3,4 +3,9 @@
    width: inherit;
    height: inherit;
  }
+  .feather-flag {
+    margin-left: -1px;
+  }
 }
diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index ba23edde0..55eb45a75 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -21,6 +21,7 @@ const icons = {
  local: require('!!raw-loader?!../../../assets/images/misc/local.svg').default,
  // feather icons
+  copy: require('!!raw-loader?!../../../assets/images/feather/copy.svg').default,
  flag: require('!!raw-loader?!../../../assets/images/feather/flag.svg').default,
  playlists: require('!!raw-loader?!../../../assets/images/feather/list.svg').default,
  syndication: require('!!raw-loader?!../../../assets/images/feather/syndication.svg').default,
@@ -28,7 +29,6 @@ const icons = {
  alert: require('!!raw-loader?!../../../assets/images/feather/alert.svg').default,
  globe: require('!!raw-loader?!../../../assets/images/feather/globe.svg').default,
  home: require('!!raw-loader?!../../../assets/images/feather/home.svg').default,
-  'recently-added': require('!!raw-loader?!../../../assets/images/feather/recently-added.svg').default,
  trending: require('!!raw-loader?!../../../assets/images/feather/trending.svg').default,
  search: require('!!raw-loader?!../../../assets/images/feather/search.svg').default,
  upload: require('!!raw-loader?!../../../assets/images/feather/upload.svg').default,
@@ -62,8 +62,9 @@ const icons = {
  'exit-fullscreen': require('!!raw-loader?!../../../assets/images/feather/minimize.svg').default,
  film: require('!!raw-loader?!../../../assets/images/feather/film.svg').default,
  edit: require('!!raw-loader?!../../../assets/images/feather/edit-2.svg').default,
-  sensitive: require('!!raw-loader?!../../../assets/images/feather/eye.svg').default,
+  'external-link': require('!!raw-loader?!../../../assets/images/feather/external-link.svg').default,
-  unsensitive: require('!!raw-loader?!../../../assets/images/feather/eye-off.svg').default,
+  'eye-open': require('!!raw-loader?!../../../assets/images/feather/eye.svg').default,
+  'eye-close': require('!!raw-loader?!../../../assets/images/feather/eye-off.svg').default,
  refresh: require('!!raw-loader?!../../../assets/images/feather/refresh-cw.svg').default,
  command: require('!!raw-loader?!../../../assets/images/feather/command.svg').default,
  go: require('!!raw-loader?!../../../assets/images/feather/arrow-up-right.svg').default,
@@ -89,6 +90,7 @@ export type GlobalIconName = keyof typeof icons
 })
 export class GlobalIconComponent implements OnInit {
  @Input() iconName: GlobalIconName
+  @Input() width: string
  constructor (
    private el: ElementRef,
@@ -104,6 +106,10 @@ export class GlobalIconComponent implements OnInit {
      'filter:internal.common.svg-icons.get-content.params',
      'filter:internal.common.svg-icons.get-content.result'
    )
+    if (this.width) {
+      nativeElement.style.width = this.width
+    }
  }
  private getSVGContent (options: { name: string }) {
diff --git a/client/src/app/shared/shared-instance/feature-boolean.component.html b/client/src/app/shared/shared-instance/feature-boolean.component.html
index ccb8a30cc..6de5d2075 100644
--- a/client/src/app/shared/shared-instance/feature-boolean.component.html
+++ b/client/src/app/shared/shared-instance/feature-boolean.component.html
@@ -1,3 +1,2 @@
-<span *ngIf="value === true" class="glyphicon glyphicon-ok" i18n-aria-label aria-label="yes"></span>
+<my-global-icon *ngIf="value === true" iconName="tick" i18n-aria-label aria-label="yes"></my-global-icon>
-<span *ngIf="value === false" class="glyphicon glyphicon-remove" i18n-aria-label aria-label="no"></span>
+<my-global-icon *ngIf="value === false" iconName="cross" i18n-aria-label aria-label="no"></my-global-icon>
diff --git a/client/src/app/shared/shared-instance/feature-boolean.component.scss b/client/src/app/shared/shared-instance/feature-boolean.component.scss
index 8683ecc55..29b8c3e02 100644
--- a/client/src/app/shared/shared-instance/feature-boolean.component.scss
+++ b/client/src/app/shared/shared-instance/feature-boolean.component.scss
@@ -1,10 +1,10 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-.glyphicon-ok {
+my-global-icon[iconName=tick] {
  color: $green;
 }
-.glyphicon-remove {
+my-global-icon[iconName=cross] {
  color: $red;
 }
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.html b/client/src/app/shared/shared-instance/instance-about-accordion.component.html
index 73e511d1c..466d73ca4 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.html
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.html
@@ -1,6 +1,6 @@
-<h2 class="instance-name">{{ about?.instance.name }}</h2>
+<h2 *ngIf="displayInstanceName" class="instance-name">{{ about?.instance.name }}</h2>
-<div class="instance-short-description">{{ about?.instance.shortDescription }}</div>
+<div *ngIf="displayInstanceShortDescription" class="instance-short-description">{{ about?.instance.shortDescription }}</div>
 <ngb-accordion #accordion="ngbAccordion" [closeOthers]="true">
  <ngb-panel *ngIf="panels.features" id="instance-features" i18n-title title="Features found on this instance">
@@ -32,7 +32,7 @@
      </ng-template>
    </ngb-panel>
-    <ngb-panel *ngIf="termsPanel" id="terms" i18n-title title="Terms">
+    <ngb-panel *ngIf="termsPanel" id="terms" [title]="getTermsTitle()">
      <ng-template ngbPanelContent>
        <div class="block" [innerHTML]="aboutHtml.terms"></div>
      </ng-template>
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 be6099a97..c8e288462 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
@@ -8,34 +8,9 @@
 .instance-short-description {
  @include ellipsis-multiline(1rem, 3);
-  margin-top: 20px;
+  margin: 25px 0;
-  margin-bottom: 20px;
 }
 .block {
-  font-size: 15px;
  margin-bottom: 15px;
 }
-ngb-accordion ::ng-deep {
-  .card {
-    border-color: var(--mainBackgroundColor);
-    .card-header {
-      background-color: unset;
-      padding: 0;
-      + .collapse.show {
-        background-color: var(--submenuBackgroundColor);
-      }
-    }
-  }
-  .btn {
-    @include peertube-button;
-    @include grey-button;
-    border-radius: unset;
-    width: 100%;
-  }
-}
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
index b9f57e2a4..e13703c03 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
@@ -15,6 +15,9 @@ export class InstanceAboutAccordionComponent implements OnInit {
  @Output() init: EventEmitter<InstanceAboutAccordionComponent> = new EventEmitter<InstanceAboutAccordionComponent>()
+  @Input() displayInstanceName = true
+  @Input() displayInstanceShortDescription = true
  @Input() pluginScope: PluginClientScope
  @Input() pluginHook: ClientFilterHookName
@@ -66,6 +69,10 @@ export class InstanceAboutAccordionComponent implements OnInit {
    return !!(this.aboutHtml?.administrator || this.about?.instance.maintenanceLifetime || this.about?.instance.businessModel)
  }
+  getTermsTitle () {
+    return $localize`Terms of ${this.about.instance.name}`
+  }
  get moderationPanel () {
    return this.panels.moderation && !!this.aboutHtml.moderationInformation
  }
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 1fdef95ff..761243bfe 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
@@ -1,6 +1,6 @@
 <div *ngIf="serverConfig" class="feature-table">
-  <table class="table" *ngIf="serverConfig">
+  <table *ngIf="serverConfig">
    <caption i18n>Features found on this instance</caption>
    <tr>
      <th i18n class="label" scope="row">PeerTube version</th>
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.scss b/client/src/app/shared/shared-instance/instance-features-table.component.scss
index 56ca105f4..bfae0c112 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.scss
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.scss
@@ -4,6 +4,7 @@
 table {
  font-size: 14px;
  color: pvar(--mainForegroundColor);
+  width: 100%;
  .label,
  .sub-label {
@@ -24,13 +25,14 @@ table {
    }
  }
+  th,
  td {
-    vertical-align: middle;
+    padding: 0.75rem;
+    border-top: 1px solid #dee2e6;
  }
  caption {
    caption-side: top;
-    font-size: 15px;
    font-weight: $font-semibold;
    color: pvar(--mainForegroundColor);
  }
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 6335de450..e405c5790 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,5 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { ServerService } from '@app/core'
+import { prepareIcu } from '@app/helpers'
 import { ServerConfig } from '@shared/models'
 import { PeertubeModalService } from '../shared-main/peertube-modal/peertube-modal.service'
@@ -65,15 +66,20 @@ export class InstanceFeaturesTableComponent implements OnInit {
  private getApproximateTime (seconds: number) {
    const hours = Math.floor(seconds / 3600)
-    let pluralSuffix = ''
-    if (hours > 1) pluralSuffix = 's'
-    if (hours > 0) return `~ ${hours} hour${pluralSuffix}`
-    const minutes = Math.floor(seconds % 3600 / 60)
+    if (hours !== 0) {
+      return prepareIcu($localize`~ {hours, plural, =1 {1 hour} other {{hours} hours}}`)(
+        { hours },
+        $localize`~ ${hours} hours`
+      )
+    }
-    if (minutes === 1) return $localize`~ 1 minute`
+    const minutes = Math.floor(seconds % 3600 / 60)
-    return $localize`~ ${minutes} minutes`
+    return prepareIcu($localize`~ {minutes, plural, =1 {1 minute} other {{minutes} minutes}}`)(
+      { minutes },
+      $localize`~ ${minutes} minutes`
+    )
  }
  private buildQuotaHelpIndication () {
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.html b/client/src/app/shared/shared-instance/instance-statistics.component.html
index 2ca61fd94..68b209990 100644
--- a/client/src/app/shared/shared-instance/instance-statistics.component.html
+++ b/client/src/app/shared/shared-instance/instance-statistics.component.html
@@ -10,7 +10,7 @@
          <p class="stat-value">{{ serverStats.totalUsers | number }}</p>
          <p class="stat-label" i18n>users</p>
        </div>
-        <i class="glyphicon glyphicon-user icon-bottom"></i>
+        <my-global-icon iconName="user"></my-global-icon>
      </div>
    </div>
@@ -20,7 +20,7 @@
          <p class="stat-value">{{ serverStats.totalLocalVideos | number }}</p>
          <p class="stat-label" i18n>videos</p>
        </div>
-        <i class="glyphicon glyphicon-facetime-video"></i>
+        <my-global-icon iconName="film"></my-global-icon>
      </div>
    </div>
@@ -30,7 +30,7 @@
          <p class="stat-value">{{ serverStats.totalLocalVideoViews | number }}</p>
          <p class="stat-label" i18n>views</p>
        </div>
-        <i class="glyphicon glyphicon-eye-open"></i>
+        <my-global-icon iconName="eye-open"></my-global-icon>
      </div>
    </div>
@@ -40,7 +40,7 @@
          <p class="stat-value">{{ serverStats.totalLocalVideoComments | number }}</p>
          <p class="stat-label" i18n>comments</p>
        </div>
-        <i class="glyphicon glyphicon-comment"></i>
+        <my-global-icon iconName="message-circle"></my-global-icon>
      </div>
    </div>
@@ -50,7 +50,7 @@
          <p class="stat-value">{{ serverStats.totalLocalVideoFilesSize | bytes:1 }}</p>
          <p class="stat-label" i18n>hosted video</p>
        </div>
-        <i class="glyphicon glyphicon-hdd"></i>
+        <my-global-icon iconName="home"></my-global-icon>
      </div>
    </div>
  </div>
@@ -64,7 +64,7 @@
          <p class="stat-value">{{ serverStats.totalVideos | number }}</p>
          <p class="stat-label" i18n>videos</p>
        </div>
-        <i class="glyphicon glyphicon-facetime-video"></i>
+        <my-global-icon iconName="film"></my-global-icon>
      </div>
    </div>
@@ -74,7 +74,7 @@
          <p class="stat-value">{{ serverStats.totalVideoComments | number }}</p>
          <p class="stat-label" i18n>comments</p>
        </div>
-        <i class="glyphicon glyphicon-comment"></i>
+        <my-global-icon iconName="message-circle"></my-global-icon>
      </div>
    </div>
@@ -84,7 +84,7 @@
          <p class="stat-value">{{ serverStats.totalInstanceFollowers | number }}</p>
          <p class="stat-label" i18n>followers</p>
        </div>
-        <i class="glyphicon glyphicon-retweet"></i>
+        <my-global-icon iconName="share"></my-global-icon>
      </div>
    </div>
@@ -94,7 +94,7 @@
          <p class="stat-value">{{ serverStats.totalInstanceFollowing | number }}</p>
          <p class="stat-label" i18n>following</p>
        </div>
-        <i class="glyphicon glyphicon-retweet"></i>
+        <my-global-icon iconName="globe"></my-global-icon>
      </div>
    </div>
  </div>
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.scss b/client/src/app/shared/shared-instance/instance-statistics.component.scss
index 5286ab03a..e1d489d28 100644
--- a/client/src/app/shared/shared-instance/instance-statistics.component.scss
+++ b/client/src/app/shared/shared-instance/instance-statistics.component.scss
@@ -1,3 +1,5 @@
+@use '_variables' as *;
+@use '_mixins' as *;
 h3 {
  font-size: 1.25rem;
@@ -19,22 +21,19 @@ h3 {
    margin: 0;
  }
-  .glyphicon {
-    opacity: 0.12;
-    position: absolute;
-    left: 16px;
-    top: -24px;
-    &.icon-bottom {
-      top: 4px;
-    }
-    &::before {
-      font-size: 8em;
-    }
-  }
  .card-body {
    z-index: 2;
  }
 }
+my-global-icon {
+  opacity: 0.12;
+  position: absolute;
+  left: 16px;
+  top: -24px;
+  width: 110px;
+  &.icon-bottom {
+    top: 4px;
+  }
+}
diff --git a/client/src/app/shared/shared-instance/shared-instance.module.ts b/client/src/app/shared/shared-instance/shared-instance.module.ts
index 13c681ab8..dfce88e11 100644
--- a/client/src/app/shared/shared-instance/shared-instance.module.ts
+++ b/client/src/app/shared/shared-instance/shared-instance.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core'
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
+import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { FeatureBooleanComponent } from './feature-boolean.component'
 import { InstanceAboutAccordionComponent } from './instance-about-accordion.component'
@@ -12,6 +13,7 @@ import { InstanceService } from './instance.service'
 @NgModule({
  imports: [
    SharedMainModule,
+    SharedGlobalIconModule,
    NgbAccordionModule
  ],
diff --git a/client/src/app/shared/shared-main/angular/autofocus.directive.ts b/client/src/app/shared/shared-main/angular/autofocus.directive.ts
index 2da492ea1..051635f45 100644
--- a/client/src/app/shared/shared-main/angular/autofocus.directive.ts
+++ b/client/src/app/shared/shared-main/angular/autofocus.directive.ts
@@ -7,6 +7,8 @@ export class AutofocusDirective implements AfterViewInit {
  constructor (private host: ElementRef) { }
  ngAfterViewInit () {
-    this.host.nativeElement.focus()
+    const el = this.host.nativeElement as HTMLElement
+    el.focus({ preventScroll: true })
  }
 }
diff --git a/client/src/app/shared/shared-main/angular/from-now.pipe.ts b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
index d62c1f88e..dc6a25e83 100644
--- a/client/src/app/shared/shared-main/angular/from-now.pipe.ts
+++ b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
@@ -1,37 +1,51 @@
 import { Pipe, PipeTransform } from '@angular/core'
+import { prepareIcu } from '@app/helpers'
 // Thanks: https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site
 @Pipe({ name: 'myFromNow' })
 export class FromNowPipe implements PipeTransform {
+  private yearICU = prepareIcu($localize`{interval, plural, =1 {1 year ago} other {{interval} years ago}}`)
+  private monthICU = prepareIcu($localize`{interval, plural, =1 {1 month ago} other {{interval} months ago}}`)
+  private weekICU = prepareIcu($localize`{interval, plural, =1 {1 week ago} other {{interval} weeks ago}}`)
+  private dayICU = prepareIcu($localize`{interval, plural, =1 {1 day ago} other {{interval} days ago}}`)
+  private hourICU = prepareIcu($localize`{interval, plural, =1 {1 hour ago} other {{interval} hours ago}}`)
  transform (arg: number | Date | string) {
    const argDate = new Date(arg)
    const seconds = Math.floor((Date.now() - argDate.getTime()) / 1000)
    let interval = Math.floor(seconds / 31536000)
-    if (interval > 1) return $localize`${interval} years ago`
+    if (interval >= 1) {
-    if (interval === 1) return $localize`1 year ago`
+      return this.yearICU({ interval }, $localize`${interval} year(s) ago`)
+    }
    interval = Math.floor(seconds / 2419200)
    // 12 months = 360 days, but a year ~ 365 days
    // Display "1 year ago" rather than "12 months ago"
    if (interval >= 12) return $localize`1 year ago`
-    if (interval > 1) return $localize`${interval} months ago`
-    if (interval === 1) return $localize`1 month ago`
+    if (interval >= 1) {
+      return this.monthICU({ interval }, $localize`${interval} month(s) ago`)
+    }
    interval = Math.floor(seconds / 604800)
    // 4 weeks ~ 28 days, but our month is 30 days
    // Display "1 month ago" rather than "4 weeks ago"
    if (interval >= 4) return $localize`1 month ago`
-    if (interval > 1) return $localize`${interval} weeks ago`
-    if (interval === 1) return $localize`1 week ago`
+    if (interval >= 1) {
+      return this.weekICU({ interval }, $localize`${interval} week(s) ago`)
+    }
    interval = Math.floor(seconds / 86400)
-    if (interval > 1) return $localize`${interval} days ago`
+    if (interval >= 1) {
-    if (interval === 1) return $localize`1 day ago`
+      return this.dayICU({ interval }, $localize`${interval} day(s) ago`)
+    }
    interval = Math.floor(seconds / 3600)
-    if (interval > 1) return $localize`${interval} hours ago`
+    if (interval >= 1) {
-    if (interval === 1) return $localize`1 hour ago`
+      return this.hourICU({ interval }, $localize`${interval} hour(s) ago`)
+    }
    interval = Math.floor(seconds / 60)
    if (interval >= 1) return $localize`${interval} min ago`
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
index 10dae68f0..017355bd0 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
@@ -39,7 +39,7 @@
          </span>
          <h6
-            *ngIf="!action.linkBuilder && action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            *ngIf="!action.linkBuilder && action.isHeader && areActionsDisplayed(actions, entry)" [ngClass]="{ 'with-icon': !!action.iconName }"
            class="dropdown-header" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
          >
            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
index 67ac6e1aa..749773f8a 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
@@ -48,7 +48,7 @@ export class ActionDropdownComponent<T> {
    return actions.some(a => {
      if (Array.isArray(a)) return this.areActionsDisplayed(a, entry)
-      return a.isDisplayed === undefined || a.isDisplayed(entry)
+      return a.isHeader !== true && (a.isDisplayed === undefined || a.isDisplayed(entry))
    })
  }
 }
diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index d1a4215e6..3e3728623 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -1,8 +1,16 @@
-<span class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0">
+<div *ngIf="!routerLink" class="action-button" [ngClass]="classes" [ngbTooltip]="title" tabindex="0">
-  <my-small-loader [loading]="loading"></my-small-loader>
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+</div>
+<a *ngIf="routerLink" class="action-button" [ngClass]="classes" [ngbTooltip]="title" [routerLink]="routerLink">
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+</a>
+<ng-template #content>
+  <my-loader size="sm" [loading]="loading"></my-loader>
  <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon>
  <span *ngIf="label" class="button-label">{{ label }}</span>
  <ng-content></ng-content>
-</span>
+</ng-template>
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index c53b8f2e5..7f0cdf1ed 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -9,17 +9,14 @@
  .button-label {
    display: none;
  }
-}
-:host {
+  my-global-icon {
-  outline: none;
+    margin: 0 !important;
-  display: inline-block;
+  }
 }
-my-small-loader ::ng-deep .root {
+:host {
  display: inline-block;
-  margin: 0 3px 0 0;
-  width: 20px;
 }
 a[class$=-button],
@@ -30,35 +27,34 @@ span[class$=-button] {
 }
 .action-button {
-  @include peertube-button-link;
-  @include button-with-icon(21px);
  width: 100%; // useful for ellipsis, allow to define a max-width on host component
-  &.icon-only {
+  &.has-icon {
-    my-global-icon {
+    @include button-with-icon(21px);
-      margin: 0;
+  }
-    }
+  &.icon-only my-global-icon {
+    margin: 0 !important;
  }
 }
-.orange-button {
+.orange-button,
+.grey-button {
  @include peertube-button;
-  @include orange-button;
 }
-.orange-button-link {
+.orange-button-link,
+.grey-button-link {
  @include peertube-button-link;
-  @include orange-button;
 }
-.grey-button {
+.orange-button,
-  @include peertube-button;
+.orange-button-link {
-  @include grey-button;
+  @include orange-button;
 }
+.grey-button,
 .grey-button-link {
-  @include peertube-button-link;
  @include grey-button;
 }
diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts
index 52936a4d4..10d67831f 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, OnChanges } from '@angular/core'
 import { GlobalIconName } from '@app/shared/shared-icons'
 @Component({
@@ -7,20 +7,24 @@ import { GlobalIconName } from '@app/shared/shared-icons'
  templateUrl: './button.component.html'
 })
-export class ButtonComponent {
+export class ButtonComponent implements OnChanges {
  @Input() label = ''
  @Input() className = 'grey-button'
  @Input() icon: GlobalIconName = undefined
+  @Input() routerLink: string[] | string
  @Input() title: string = undefined
  @Input() loading = false
  @Input() disabled = false
  @Input() responsiveLabel = false
-  getClasses () {
+  classes: { [id: string]: boolean } = {}
-    return {
+  ngOnChanges () {
+    this.classes = {
      [this.className]: true,
      disabled: this.disabled,
      'icon-only': !this.label,
+      'has-icon': !!this.icon,
      'responsive-label': this.responsiveLabel
    }
  }
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.html b/client/src/app/shared/shared-main/buttons/delete-button.component.html
deleted file mode 100644
index d7a6702a7..000000000
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<span
-  class="action-button action-button-delete grey-button"
-  [ngClass]="{ 'responsive-label': responsiveLabel }" [ngbTooltip]="title" role="button" tabindex="0"
->
-  <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
-  <span class="button-label" *ngIf="label">{{ label }}</span>
-</span>
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.ts b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
index 90735852c..1cab10803 100644
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
@@ -2,17 +2,16 @@ import { Component, Input, OnInit } from '@angular/core'
 @Component({
  selector: 'my-delete-button',
-  styleUrls: [ './button.component.scss' ],
+  template: `
-  templateUrl: './delete-button.component.html'
+  <my-button icon="delete" className="grey-button" [label]="label" [title]="title" [responsiveLabel]="responsiveLabel"></my-button>
+  `
 })
 export class DeleteButtonComponent implements OnInit {
  @Input() label: string
  @Input() title: string
  @Input() responsiveLabel = false
  ngOnInit () {
-    // <my-delete-button /> No label
    if (this.label === undefined && !this.title) {
      this.title = $localize`Delete`
    }
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.html b/client/src/app/shared/shared-main/buttons/edit-button.component.html
deleted file mode 100644
index 8beeee6c4..000000000
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<a
-  class="action-button action-button-edit grey-button"
-  [ngClass]="{ 'responsive-label': responsiveLabel }" [routerLink]="routerLink" [ngbTooltip]="title"
->
-  <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon>
-  <span class="button-label" *ngIf="label">{{ label }}</span>
-</a>
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.ts b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
index 24c8625ff..28aacbbff 100644
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
@@ -2,8 +2,13 @@ import { Component, Input, OnInit } from '@angular/core'
 @Component({
  selector: 'my-edit-button',
-  styleUrls: [ './button.component.scss' ],
+  template: `
-  templateUrl: './edit-button.component.html'
+    <my-button
+      icon="edit" className="grey-button-link"
+      [label]="label" [title]="title" [responsiveLabel]="responsiveLabel"
+      [routerLink]="routerLink"
+    ></my-button>
+  `
 })
 export class EditButtonComponent implements OnInit {
  @Input() label: string
@@ -20,10 +25,6 @@ export class EditButtonComponent implements OnInit {
    // <my-edit-button label /> Use default label
    if (this.label === '') {
      this.label = $localize`Update`
-      if (!this.title) {
-        this.title = this.label
-      }
    }
  }
 }
diff --git a/client/src/app/shared/shared-main/loaders/index.ts b/client/src/app/shared/shared-main/loaders/index.ts
index a061914d5..60483727c 100644
--- a/client/src/app/shared/shared-main/loaders/index.ts
+++ b/client/src/app/shared/shared-main/loaders/index.ts
@@ -1,2 +1 @@
 export * from './loader.component'
-export * from './small-loader.component'
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.html b/client/src/app/shared/shared-main/loaders/loader.component.html
deleted file mode 100644
index ca8ed063e..000000000
--- a/client/src/app/shared/shared-main/loaders/loader.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div *ngIf="loading">
-  <div class="loader">
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-  </div>
-</div>
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.scss b/client/src/app/shared/shared-main/loaders/loader.component.scss
deleted file mode 100644
index b88b0db6a..000000000
--- a/client/src/app/shared/shared-main/loaders/loader.component.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-// Thanks to https://loading.io/css/ (CC0 License)
-.loader {
-  display: inline-block;
-  position: relative;
-  width: 50px;
-  height: 50px;
-}
-.loader div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 44px;
-  height: 44px;
-  margin: 6px;
-  border: 4px solid;
-  border-radius: 50%;
-  animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #999999 transparent transparent;
-}
-.loader div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-.loader div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-.loader div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-@keyframes loader {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.ts b/client/src/app/shared/shared-main/loaders/loader.component.ts
index e3b1eea3a..bd038f8b5 100644
--- a/client/src/app/shared/shared-main/loaders/loader.component.ts
+++ b/client/src/app/shared/shared-main/loaders/loader.component.ts
@@ -2,9 +2,27 @@ import { Component, Input } from '@angular/core'
 @Component({
  selector: 'my-loader',
-  styleUrls: [ './loader.component.scss' ],
+  template: `<div *ngIf="loading" class="spinner-border" [ngStyle]="getStyle()" role="status"></div>`
-  templateUrl: './loader.component.html'
 })
 export class LoaderComponent {
  @Input() loading: boolean
+  @Input() size: 'sm' | 'xl'
+  private readonly sizes = {
+    sm: {
+      width: '1rem',
+      height: '1rem',
+      'border-width': '0.15rem'
+    },
+    xl: {
+      width: '3rem',
+      height: '3rem'
+    }
+  }
+  getStyle () {
+    if (!this.size) return undefined
+    return this.sizes[this.size]
+  }
 }
diff --git a/client/src/app/shared/shared-main/loaders/small-loader.component.html b/client/src/app/shared/shared-main/loaders/small-loader.component.html
deleted file mode 100644
index 7886f8918..000000000
--- a/client/src/app/shared/shared-main/loaders/small-loader.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="root" *ngIf="loading">
-  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
-</div>
diff --git a/client/src/app/shared/shared-main/loaders/small-loader.component.ts b/client/src/app/shared/shared-main/loaders/small-loader.component.ts
deleted file mode 100644
index 191877f14..000000000
--- a/client/src/app/shared/shared-main/loaders/small-loader.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component, Input } from '@angular/core'
-@Component({
-  selector: 'my-small-loader',
-  styleUrls: [ ],
-  templateUrl: './small-loader.component.html'
-})
-export class SmallLoaderComponent {
-  @Input() loading: boolean
-}
diff --git a/client/src/app/shared/shared-main/misc/channels-setup-message.component.html b/client/src/app/shared/shared-main/misc/channels-setup-message.component.html
index 3fe888a35..539df06bd 100644
--- a/client/src/app/shared/shared-main/misc/channels-setup-message.component.html
+++ b/client/src/app/shared/shared-main/misc/channels-setup-message.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="hasChannelNotConfigured()" class="channels-setup-message alert alert-info">
+<div *ngIf="hasChannelNotConfigured()" class="channels-setup-message alert pt-alert-primary">
  <my-global-icon iconName="tip"></my-global-icon>
  <div>
diff --git a/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
index 7dcba2ca5..2aa176e1b 100644
--- a/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
+++ b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
@@ -5,28 +5,24 @@
  display: flex;
  align-items: center;
  justify-content: center;
+}
-  my-global-icon {
+my-global-icon {
-    width: 32px;
+  @include apply-svg-color(pvar(--mainColor));
-    align-self: flex-start;
-    ::ng-deep {
+  width: 32px;
-      svg {
+  align-self: flex-start;
-        fill: #0c5460;
-      }
-    }
-    + div {
+  + div {
-      margin-left: 10px;
+    margin-left: 10px;
-      text-align: center;
+    text-align: center;
+  }
+}
-      a.channels-settings-link {
+.channels-settings-link {
-        @include peertube-button-link;
+  @include peertube-button-link;
-        @include grey-button;
+  @include grey-button;
-        height: fit-content;
+  height: fit-content;
-        margin-top: 10px;
+  margin-top: 10px;
-      }
-    }
-  }
 }
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.html b/client/src/app/shared/shared-main/misc/list-overflow.component.html
index b2e0982f1..6f29eaefa 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.html
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.html
@@ -1,18 +1,22 @@
-<div #itemsParent class="d-flex align-items-center text-nowrap w-100 list-overflow-parent">
+<div #itemsParent class="list-overflow-parent">
  <span [id]="getId(id)" #itemsRendered *ngFor="let item of items; index as id">
    <ng-container *ngTemplateOutlet="itemTemplate; context: {item: item}"></ng-container>
  </span>
  <ng-container *ngIf="isMenuDisplayed()">
    <button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()">
-      <span class="glyphicon glyphicon-chevron-down"></span>
+      <span class="chevron-down"></span>
    </button>
-    <div *ngIf="!isInMobileView" class="list-overflow-menu" ngbDropdown container="body" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)">
+    <div
+      *ngIf="!isInMobileView" class="list-overflow-menu"
+      ngbDropdown container="body" #dropdown="ngbDropdown"
+      (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)"
+    >
      <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ 'route-active': active }"
        ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
      >
-        <span class="glyphicon glyphicon-chevron-down"></span>
+        <span class="chevron-down"></span>
      </button>
      <div ngbDropdownMenu>
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.scss b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
index 19c055fd3..b06418568 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.scss
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
@@ -7,6 +7,9 @@
 .list-overflow-parent {
  overflow: hidden;
+  display: flex;
+  // For the menu icon
+  max-width: calc(100vw - 30px);
 }
 .list-overflow-menu {
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.ts b/client/src/app/shared/shared-main/misc/list-overflow.component.ts
index fbc481093..541991f74 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.ts
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.ts
@@ -15,6 +15,9 @@ import {
 } from '@angular/core'
 import { ScreenService } from '@app/core'
 import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import * as debug from 'debug'
+const logger = debug('peertube:main:ListOverflowItem')
 export interface ListOverflowItem {
  label: string
@@ -37,7 +40,6 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
  showItemsUntilIndexExcluded: number
  active = false
-  isInTouchScreen = false
  isInMobileView = false
  private openedOnHover = false
@@ -58,13 +60,14 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
  @HostListener('window:resize')
  onWindowResize () {
-    this.isInTouchScreen = !!this.screenService.isInTouchScreen()
    this.isInMobileView = !!this.screenService.isInMobileView()
    const parentWidth = this.parent.nativeElement.getBoundingClientRect().width
    let showItemsUntilIndexExcluded: number
    let accWidth = 0
+    logger('Parent width is %d', parentWidth)
    for (const [ index, el ] of this.itemsRendered.toArray().entries()) {
      accWidth += el.nativeElement.getBoundingClientRect().width
      if (showItemsUntilIndexExcluded === undefined) {
@@ -76,6 +79,8 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
      e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
    }
+    logger('Accumulated children width is %d so exclude index is %d', accWidth, showItemsUntilIndexExcluded)
    this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
    this.cdr.markForCheck()
  }
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 1e2f6c6a9..386d26116 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,17 +1,10 @@
 <div class="root">
-  <div class="input-group has-feedback has-clear">
+  <div class="input-group has-clear">
-    <input
+    <input #ref type="text" class="last-in-group"
-      #ref
+      [(ngModel)]="value" (keyup.enter)="sendSearch()" [hidden]="!inputShown" [name]="name" [placeholder]="placeholder"
-      type="text"
-      [(ngModel)]="value"
-      (keyup.enter)="sendSearch()"
-      [hidden]="!inputShown"
-      [name]="name"
-      [placeholder]="placeholder"
    >
-    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="onResetFilter()"></a>
+    <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></my-global-icon>
-    <span class="sr-only" i18n>Clear filters</span>
  </div>
  <my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon>
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 d5fcff760..ee0f7a8d2 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
@@ -5,7 +5,7 @@
  display: flex;
 }
-my-global-icon {
+.root > my-global-icon {
  @include margin-left(10px);
  height: 28px;
@@ -25,3 +25,7 @@ input {
    box-shadow: 0 0 5px 0 #a5a5a5;
  }
 }
+.input-group > my-global-icon {
+  width: 20px;
+}
diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
index d884e75b2..d96fdbdc6 100644
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
@@ -1,7 +1,13 @@
 <div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed, 'no-scroll': isModalOpened }">
  <ng-container *ngFor="let menuEntry of menuEntries; index as id">
-    <a *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings" #routerLink (click)="onActiveLinkScrollToTop(routerLink)">{{ menuEntry.label }}</a>
+    <a
+      *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" class="sub-menu-entry"
+      [routerLink]="menuEntry.routerLink" routerLinkActive="active" #routerLink
+      (click)="onActiveLinkScrollToTop(routerLink)"
+    >
+      {{ menuEntry.label }}
+    </a>
    <div *ngIf="!menuEntry.routerLink && isDisplayed(menuEntry)" ngbDropdown class="parent-entry"
      #dropdown="ngbDropdown" autoClose="true" container="body">
@@ -10,7 +16,7 @@
        tabindex=0
        [ngClass]="{ active: !!suffixLabels[menuEntry.label] }"
        (click)="openModal(id)" (keydown.enter)="openModal(id)"
-        role="button" class="title-page title-page-settings">
+        role="button" class="sub-menu-entry">
        <ng-container i18n>{{ menuEntry.label }}</ng-container>
      </span>
@@ -19,7 +25,7 @@
        tabindex=0
        [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
        (click)="dropdownAnchorClicked(dropdown)" (keydown.enter)="dropdownAnchorClicked(dropdown)"
-        role="button" class="title-page title-page-settings"
+        role="button" class="sub-menu-entry"
      >
        <ng-container i18n>{{ menuEntry.label }}</ng-container>
      </span>
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 5629640bc..89f43239f 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -34,7 +34,7 @@ import { ActionDropdownComponent, ButtonComponent, DeleteButtonComponent, EditBu
 import { CustomPageService } from './custom-page'
 import { DateToggleComponent } from './date'
 import { FeedComponent } from './feeds'
-import { LoaderComponent, SmallLoaderComponent } from './loaders'
+import { LoaderComponent } from './loaders'
 import {
  ChannelsSetupMessageComponent,
  HelpComponent,
@@ -97,7 +97,6 @@ import { VideoChannelService } from './video-channel'
    FeedComponent,
    LoaderComponent,
-    SmallLoaderComponent,
    ChannelsSetupMessageComponent,
    HelpComponent,
@@ -157,7 +156,6 @@ import { VideoChannelService } from './video-channel'
    FeedComponent,
    LoaderComponent,
-    SmallLoaderComponent,
    ChannelsSetupMessageComponent,
    HelpComponent,
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.html b/client/src/app/shared/shared-main/users/user-quota.component.html
index dd1fc20d0..0e0d38c2a 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.html
+++ b/client/src/app/shared/shared-main/users/user-quota.component.html
@@ -12,7 +12,7 @@
  <div *ngIf="hasDailyQuota()" class="mt-3">
    <label class="user-quota-title" tabindex="0" i18n>Daily video quota</label>
    <div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuotaDaily()">
-      <div class="progress-bar secondary" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }"
+      <div class="progress-bar" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }"
        [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuotaDaily"></div>
      <span>{{ userVideoQuotaUsedDaily | bytes: 1 }}</span>
      <span>{{ userVideoQuotaDaily }}</span>
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss
index 70571bde6..f3e86ce78 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.scss
+++ b/client/src/app/shared/shared-main/users/user-quota.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
 .user-quota {
  label {
    @include margin-right(5px);
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 32376bf62..62bd94349 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
@@ -27,6 +27,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
  videosCount?: number
  viewsPerDay?: ViewsPerDate[]
+  totalViews?: number
  static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size: number) {
    return Actor.GET_ACTOR_AVATAR_URL(actor, size)
@@ -74,6 +75,10 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
      this.viewsPerDay = hash.viewsPerDay.map(v => ({ ...v, date: new Date(v.date) }))
    }
+    if (hash.totalViews !== null && hash.totalViews !== undefined) {
+      this.totalViews = hash.totalViews
+    }
    if (hash.ownerAccount) {
      this.ownerAccount = hash.ownerAccount
      this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host)
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 022bb95ad..2e4ab87d7 100644
--- a/client/src/app/shared/shared-main/video/video.model.ts
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -1,6 +1,6 @@
 import { AuthUser } from '@app/core'
 import { User } from '@app/core/users/user.model'
-import { durationToString, getAbsoluteAPIUrl, getAbsoluteEmbedUrl } from '@app/helpers'
+import { durationToString, prepareIcu, getAbsoluteAPIUrl, getAbsoluteEmbedUrl } from '@app/helpers'
 import { Actor } from '@app/shared/shared-main/account/actor.model'
 import { buildVideoWatchPath } from '@shared/core-utils'
 import { peertubeTranslate } from '@shared/core-utils/i18n'
@@ -19,6 +19,9 @@ import {
 } from '@shared/models'
 export class Video implements VideoServerModel {
+  private static readonly viewsICU = prepareIcu($localize`{views, plural, =0 {No view} =1 {1 view} other {{views} views}}`)
+  private static readonly viewersICU = prepareIcu($localize`{viewers, plural, =0 {No viewers} =1 {1 viewer} other {{viewers} viewers}}`)
  byVideoChannel: string
  byAccount: string
@@ -269,12 +272,10 @@ export class Video implements VideoServerModel {
  }
  getExactNumberOfViews () {
-    if (this.views < 1000) return ''
    if (this.isLive) {
-      return $localize`${this.views} viewers`
+      return Video.viewersICU({ viewers: this.viewers }, $localize`${this.viewers} viewer(s)`)
    }
-    return $localize`${this.views} views`
+    return Video.viewsICU({ views: this.views }, $localize`{${this.views} view(s)}`)
  }
 }
diff --git a/client/src/app/shared/shared-moderation/account-block-badges.component.html b/client/src/app/shared/shared-moderation/account-block-badges.component.html
index feac707c2..fd3709676 100644
--- a/client/src/app/shared/shared-moderation/account-block-badges.component.html
+++ b/client/src/app/shared/shared-moderation/account-block-badges.component.html
@@ -1,4 +1,4 @@
-<span *ngIf="account.mutedByUser" class="badge badge-danger" i18n>Muted</span>
+<span *ngIf="account.mutedByUser" class="pt-badge badge-danger" i18n>Muted</span>
-<span *ngIf="account.mutedServerByUser" class="badge badge-danger" i18n>Instance muted</span>
+<span *ngIf="account.mutedServerByUser" class="pt-badge badge-danger" i18n>Instance muted</span>
-<span *ngIf="account.mutedByInstance" class="badge badge-danger" i18n>Muted by your instance</span>
+<span *ngIf="account.mutedByInstance" class="pt-badge badge-danger" i18n>Muted by your instance</span>
-<span *ngIf="account.mutedServerByInstance" class="badge badge-danger" i18n>Instance muted by your instance</span>
+<span *ngIf="account.mutedServerByInstance" class="pt-badge badge-danger" i18n>Instance muted by your instance</span>
diff --git a/client/src/app/shared/shared-moderation/account-block-badges.component.scss b/client/src/app/shared/shared-moderation/account-block-badges.component.scss
index ccc3666aa..301d8305e 100644
--- a/client/src/app/shared/shared-moderation/account-block-badges.component.scss
+++ b/client/src/app/shared/shared-moderation/account-block-badges.component.scss
@@ -1,9 +1,8 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-.badge {
+.pt-badge {
  @include margin-right(10px);
-  height: fit-content;
  font-size: 12px;
 }
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html
index a4f81d824..131110318 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -11,7 +11,7 @@
 >
  <ng-template pTemplate="caption">
    <div class="caption">
-      <div class="ml-auto">
+      <div class="ms-auto">
        <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
      </div>
    </div>
@@ -48,7 +48,7 @@
  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="6">
+      <td colspan="3">
        <div class="no-results">
          <ng-container *ngIf="search" i18n>No account found matching current filters.</ng-container>
          <ng-container *ngIf="!search" i18n>No account found.</ng-container>
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.html b/client/src/app/shared/shared-moderation/report-modals/report.component.html
index 6c99180ef..8e0b0993c 100644
--- a/client/src/app/shared/shared-moderation/report-modals/report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.html
@@ -8,11 +8,11 @@
    <form novalidate [formGroup]="form" (ngSubmit)="report()">
    <div class="row">
-      <div class="col-5 form-group">
+      <div class="col-5">
          <label i18n for="reportPredefinedReasons">What is the issue?</label>
-          <div class="ml-2 mt-2 d-flex flex-column">
+          <div class="ms-2 mt-2 d-flex flex-column">
            <ng-container formGroupName="predefinedReasons">
              <div class="form-group" *ngFor="let reason of predefinedReasons">
@@ -29,7 +29,6 @@
            </ng-container>
          </div>
      </div>
      <div class="col-7">
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
index afac108fc..51ca0b9d6 100644
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
@@ -8,38 +8,32 @@
    <form novalidate [formGroup]="form" (ngSubmit)="report()">
    <div class="row">
-      <div class="col-5 form-group">
+      <div class="col-12 col-md-5">
+        <label i18n for="reportPredefinedReasons">What is the issue?</label>
-          <label i18n for="reportPredefinedReasons">What is the issue?</label>
+        <div class="ms-2 mt-2 d-flex flex-column">
+          <ng-container formGroupName="predefinedReasons">
-          <div class="ml-2 mt-2 d-flex flex-column">
+            <div class="form-group" *ngFor="let reason of predefinedReasons">
-            <ng-container formGroupName="predefinedReasons">
+              <my-peertube-checkbox [inputName]="reason.id" [formControlName]="reason.id" [labelText]="reason.label">
+                <ng-template *ngIf="reason.help" ptTemplate="help">
+                  <div [innerHTML]="reason.help"></div>
+                </ng-template>
-              <div class="form-group" *ngFor="let reason of predefinedReasons">
+                <ng-container *ngIf="reason.description" ngProjectAs="description">
-                <my-peertube-checkbox [inputName]="reason.id" [formControlName]="reason.id" [labelText]="reason.label">
+                  <div [innerHTML]="reason.description"></div>
-                  <ng-template *ngIf="reason.help" ptTemplate="help">
+                </ng-container>
-                    <div [innerHTML]="reason.help"></div>
+              </my-peertube-checkbox>
-                  </ng-template>
+            </div>
-                  <ng-container *ngIf="reason.description" ngProjectAs="description">
-                    <div [innerHTML]="reason.description"></div>
-                  </ng-container>
-                </my-peertube-checkbox>
-              </div>
-            </ng-container>
-          </div>
+          </ng-container>
+        </div>
      </div>
-      <div class="col-7">
+      <div class="col-12 col-md-7">
-        <div class="row justify-content-center">
+        <my-embed [video]="video"></my-embed>
-          <div class="col-12 col-lg-9 mb-2">
-            <my-embed [video]="video"></my-embed>
-          </div>
-        </div>
-        <div class="mb-1 start-at" formGroupName="timestamp">
+        <div class="mb-1 mt-3 start-at" formGroupName="timestamp">
          <my-peertube-checkbox
            formControlName="hasStart"
            i18n-labelText labelText="Start at"
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html
index 1a320e9a4..bc47bf26f 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -19,7 +19,7 @@
        </a>
      </div>
-      <div class="ml-auto">
+      <div class="ms-auto">
        <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
      </div>
    </div>
@@ -41,7 +41,7 @@
      <td>
        <a [href]="'https://' + serverBlock.blockedServer.host" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
          {{ serverBlock.blockedServer.host }}
-          <span class="glyphicon glyphicon-new-window"></span>
+          <my-global-icon iconName="external-link"></my-global-icon>
        </a>
      </td>
      <td>{{ serverBlock.createdAt | date: 'short' }}</td>
@@ -50,7 +50,7 @@
  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="6">
+      <td colspan="3">
        <div class="no-results">
          <ng-container *ngIf="search" i18n>No server found matching current filters.</ng-container>
          <ng-container *ngIf="!search" i18n>No server found.</ng-container>
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
index 2c46c3d03..376fb1693 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
@@ -2,7 +2,6 @@
 @use '_mixins' as *;
 .description {
-  font-size: 15px;
  margin-bottom: 15px;
 }
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.ts b/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
index 9edfac388..617408f2a 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
@@ -1,6 +1,7 @@
 import { forkJoin } from 'rxjs'
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
+import { prepareIcu } from '@app/helpers'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
@@ -63,9 +64,16 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
    forkJoin(observables)
      .subscribe({
        next: () => {
-          const message = Array.isArray(this.usersToBan)
+          let message: string
-            ? $localize`${this.usersToBan.length} users banned.`
-            : $localize`User ${this.usersToBan.username} banned.`
+          if (Array.isArray(this.usersToBan)) {
+            message = prepareIcu($localize`{count, plural, =1 {1 user banned.} other {{count} users banned.}}`)(
+              { count: this.usersToBan.length },
+              $localize`${this.usersToBan.length} users banned.`
+            )
+          } else {
+            message = $localize`User ${this.usersToBan.username} banned.`
+          }
          this.notifier.success(message)
@@ -79,7 +87,12 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
  }
  getModalTitle () {
-    if (Array.isArray(this.usersToBan)) return $localize`Ban ${this.usersToBan.length} users`
+    if (Array.isArray(this.usersToBan)) {
+      return prepareIcu($localize`Ban {count, plural, =1 {1 user} other {{count} users}}`)(
+        { count: this.usersToBan.length },
+        $localize`Ban ${this.usersToBan.length} users`
+      )
+    }
    return $localize`Ban "${this.usersToBan.username}"`
  }
diff --git a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
index 787318c2c..c69a45c25 100644
--- a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
@@ -100,7 +100,8 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
      return
    }
-    const message = $localize`If you remove user ${user.username}, you won't be able to create another with the same username!`
+    // eslint-disable-next-line max-len
+    const message = $localize`If you remove this user, you won't be able to create another user or channel with <strong>${user.username}</strong> username!`
    const res = await this.confirmService.confirm(message, $localize`Delete ${user.username}`)
    if (res === false) return
diff --git a/client/src/app/shared/shared-moderation/video-block.component.scss b/client/src/app/shared/shared-moderation/video-block.component.scss
index 3061bbf15..7726eca11 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.scss
+++ b/client/src/app/shared/shared-moderation/video-block.component.scss
@@ -6,6 +6,5 @@ textarea {
 }
 .live-info {
-  font-size: 15px;
  margin: 40px 0 20px;
 }
diff --git a/client/src/app/shared/shared-moderation/video-block.component.ts b/client/src/app/shared/shared-moderation/video-block.component.ts
index 400913f02..f8b22a3f6 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.ts
+++ b/client/src/app/shared/shared-moderation/video-block.component.ts
@@ -1,5 +1,6 @@
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
+import { prepareIcu } from '@app/helpers'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { Video } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
@@ -80,9 +81,10 @@ export class VideoBlockComponent extends FormReactive implements OnInit {
    this.videoBlocklistService.blockVideo(options)
        .subscribe({
          next: () => {
-            const message = this.isMultiple
+            const message = prepareIcu($localize`{count, plural, =1 {Blocked {videoName}.} other {Blocked {count} videos.}}`)(
-              ? $localize`Blocked ${this.videos.length} videos.`
+              { count: this.videos.length, videoName: this.getSingleVideo().name },
-              : $localize`Blocked ${this.getSingleVideo().name}`
+              $localize`Blocked ${this.videos.length} videos.`
+            )
            this.notifier.success(message)
            this.hide()
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index 67ca56516..b163d3581 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -8,7 +8,7 @@
  <div class="modal-body">
    <div class="playlist" *ngIf="playlist">
-      <div class="title-page title-page-single" i18n *ngIf="video">Share the playlist</div>
+      <h5 i18n *ngIf="video">Share the playlist</h5>
      <div *ngIf="isPrivatePlaylist()" class="alert-private alert alert-warning">
        <div i18n>This playlist is private so you won't be able to share it with external users</div>
@@ -25,8 +25,7 @@
          <ng-template ngbNavContent>
            <div class="nav-content">
+              <my-input-text [value]="getPlaylistUrl()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
-              <my-input-toggle-hidden [value]="getPlaylistUrl()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
            </div>
          </ng-template>
        </ng-container>
@@ -46,10 +45,10 @@
          <ng-template ngbNavContent>
            <div class="nav-content">
-              <my-input-toggle-hidden
+              <my-input-text
                [value]="customizations.onlyEmbedUrl ? getPlaylistEmbedUrl() : getPlaylistIframeCode()" (change)="updateEmbedCode()"
                [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
-              ></my-input-toggle-hidden>
+              ></my-input-text>
              <div i18n *ngIf="notSecure()" class="alert alert-warning">
                The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
@@ -86,7 +85,7 @@
    <div class="video" *ngIf="video">
-      <div class="title-page title-page-single" *ngIf="playlist" i18n>Share the video</div>
+      <h5 *ngIf="playlist" i18n>Share the video</h5>
      <div *ngIf="isPrivateVideo()" class="alert-private alert alert-warning">
        <div i18n>This video is private so you won't be able to share it with external users</div>
@@ -103,7 +102,7 @@
          <ng-template ngbNavContent>
            <div class="nav-content">
-              <my-input-toggle-hidden [value]="getVideoUrl()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+              <my-input-text [value]="getVideoUrl()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
            </div>
          </ng-template>
        </ng-container>
@@ -123,10 +122,10 @@
          <ng-template ngbNavContent>
            <div class="nav-content">
-              <my-input-toggle-hidden
+              <my-input-text
                [value]="customizations.onlyEmbedUrl ? getVideoEmbedUrl() : getVideoIframeCode()" (ngModelChange)="updateEmbedCode()"
                [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
-              ></my-input-toggle-hidden>
+              ></my-input-text>
              <div i18n *ngIf="notSecure()" class="alert alert-warning">
                The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
@@ -171,9 +170,8 @@
            </div>
          </div>
-          <div class="form-group">
+          <div class="form-group" *ngIf="isInVideoEmbedTab()">
            <my-peertube-checkbox
-              *ngIf="isInVideoEmbedTab()"
              inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
              i18n-labelText labelText="Only display embed URL"
            ></my-peertube-checkbox>
@@ -268,7 +266,7 @@
             [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
          <ng-container *ngIf="isAdvancedCustomizationCollapsed">
-            <span class="glyphicon glyphicon-menu-down"></span>
+            <span class="chevron-down"></span>
            <ng-container i18n>
              More customization
@@ -276,7 +274,7 @@
          </ng-container>
          <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
-            <span class="glyphicon glyphicon-menu-up"></span>
+            <span class="chevron-up"></span>
            <ng-container i18n>
              Less customization
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss
index 44ebb13f4..6e80f8c76 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.scss
+++ b/client/src/app/shared/shared-share-modal/video-share.component.scss
@@ -1,14 +1,10 @@
 @use '_mixins' as *;
 @use '_variables' as *;
-my-input-toggle-hidden {
+my-input-text {
  width: 100%;
 }
-.title-page.title-page-single {
-  margin-top: 0;
-}
 .playlist {
  margin-bottom: 50px;
 }
@@ -34,6 +30,10 @@ my-input-toggle-hidden {
  margin-top: 20px;
 }
+.alert-private {
+  margin-top: 0;
+}
 .filters {
  margin-top: 30px;
@@ -46,20 +46,8 @@ my-input-toggle-hidden {
    justify-content: center;
    align-items: center;
    margin-top: 20px;
-    font-size: 16px;
    font-weight: $font-semibold;
    cursor: pointer;
-    .glyphicon {
-      @include margin-right(5px);
-    }
-  }
-  .form-group {
-    margin-bottom: 0;
-    height: 34px;
-    display: flex;
-    align-items: center;
  }
  .video-caption-block {
@@ -88,3 +76,7 @@ my-input-toggle-hidden {
  align-items: center;
  justify-content: space-between;
 }
+h5 {
+  font-size: 1.15rem;
+}
diff --git a/client/src/app/shared/shared-tables/table-expander-icon.component.ts b/client/src/app/shared/shared-tables/table-expander-icon.component.ts
index 3756b475a..66bbfe6fb 100644
--- a/client/src/app/shared/shared-tables/table-expander-icon.component.ts
+++ b/client/src/app/shared/shared-tables/table-expander-icon.component.ts
@@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core'
  selector: 'my-table-expander-icon',
  template: `
 <span class="expander">
-    <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
+    <i [ngClass]="expanded ? 'chevron-down' : 'chevron-right'"></i>
 </span>`
 })
 export class TableExpanderIconComponent {
diff --git a/client/src/app/shared/shared-tables/video-cell.component.scss b/client/src/app/shared/shared-tables/video-cell.component.scss
index 7efb61502..5d26b02ef 100644
--- a/client/src/app/shared/shared-tables/video-cell.component.scss
+++ b/client/src/app/shared/shared-tables/video-cell.component.scss
@@ -59,13 +59,6 @@
    color: pvar(--mainForegroundColor);
    line-height: 1rem;
-    div .glyphicon {
-      @include margin-left(0.1rem);
-      font-size: 80%;
-      color: #808080;
-    }
    div + div {
      color: var(--greyForegroundColor);
      font-size: 11px;
diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.html b/client/src/app/shared/shared-user-settings/user-interface-settings.component.html
index b739e881b..1a24641a2 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.html
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.html
@@ -5,10 +5,10 @@
    <div class="peertube-select-container">
      <select formControlName="theme" id="theme" class="form-control">
-        <option i18n value="instance-default">Instance default theme ({{ getDefaultThemeLabel() }})</option>
+        <option i18n value="instance-default">{{ instanceName }} default theme ({{ getDefaultInstanceThemeLabel() }})</option>
-        <option i18n value="default">{{ defaultThemeLabel }}</option>
+        <option i18n value="default">{{ getDefaultThemeLabel() }}</option>
-        <option *ngFor="let theme of availableThemes" [value]="theme">{{ capitalizeFirstLetter(theme) }}</option>
+        <option *ngFor="let theme of getAvailableThemes()" [value]="theme">{{ theme }}</option>
      </select>
    </div>
  </div>
diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
index 2fc245ace..da8202594 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
 input[type=submit] {
  @include peertube-button;
  @include orange-button;
diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts b/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
index 932db498a..24ad54b1d 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
@@ -1,8 +1,7 @@
 import { Subject, Subscription } from 'rxjs'
 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { AuthService, Notifier, ServerService, UserService } from '@app/core'
+import { AuthService, Notifier, ServerService, ThemeService, UserService } from '@app/core'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
-import { capitalizeFirstLetter } from '@root-helpers/string'
 import { HTMLServerConfig, User, UserUpdateMe } from '@shared/models'
 @Component({
@@ -18,8 +17,6 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
  formValuesWatcher: Subscription
-  defaultThemeLabel = $localize`Light/Orange`
  private serverConfig: HTMLServerConfig
  constructor (
@@ -27,14 +24,14 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
    private authService: AuthService,
    private notifier: Notifier,
    private userService: UserService,
+    private themeService: ThemeService,
    private serverService: ServerService
  ) {
    super()
  }
-  get availableThemes () {
+  get instanceName () {
-    return this.serverConfig.theme.registered
+    return this.serverConfig.instance.name
-               .map(t => t.name)
  }
  ngOnInit () {
@@ -61,17 +58,23 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
  }
  getDefaultThemeLabel () {
+    return this.themeService.getDefaultThemeLabel()
+  }
+  getAvailableThemes () {
+    return this.themeService.getAvailableThemeLabels()
+  }
+  getDefaultInstanceThemeLabel () {
    const theme = this.serverConfig.theme.default
-    if (theme === 'default') return this.defaultThemeLabel
+    if (theme === 'default') {
+      return this.getDefaultThemeLabel()
+    }
    return theme
  }
-  capitalizeFirstLetter (str: string) {
-    return capitalizeFirstLetter(str)
-  }
  updateInterfaceSettings () {
    const theme = this.form.value['theme']
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.html b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
index 446ade445..85b27a4ff 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.html
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
@@ -1,5 +1,5 @@
 <form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
-  <div class="form-group form-group-select">
+  <div class="form-group">
    <div class="anchor" id="video-sensitive-content-policy"></div> <!-- video-sensitive-content-policy anchor -->
    <label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label>
    <my-help>
@@ -20,7 +20,7 @@
    </div>
  </div>
-  <div class="form-group form-group-select">
+  <div class="form-group">
    <div class="anchor" id="video-languages-subtitles"></div> <!-- video-languages-subtitles anchor -->
    <label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label>
    <my-help>
@@ -30,7 +30,7 @@
    </my-help>
    <div>
-      <my-select-languages formControlName="videoLanguages"></my-select-languages>
+      <my-select-languages [maxLanguages]="20" formControlName="videoLanguages"></my-select-languages>
    </div>
  </div>
@@ -42,7 +42,7 @@
      i18n-labelText labelText="Help share videos being played"
    >
      <ng-container ngProjectAs="description">
-        <span i18n>The <a routerLink="/about/peertube" fragment="privacy" target="_blank">sharing system</a> implies that some technical information about your system (such as a public IP address) can be sent to other peers, but greatly helps to reduce server load.</span>
+        <span i18n>The <a class="link-orange" routerLink="/about/peertube" fragment="privacy" target="_blank">sharing system</a> implies that some technical information about your system (such as a public IP address) can be sent to other peers, but greatly helps to reduce server load.</span>
      </ng-container>
    </my-peertube-checkbox>
  </div>
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
index c4f6020d4..163c899d3 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
 input[type=submit] {
  @include peertube-button;
  @include orange-button;
@@ -15,8 +10,6 @@ input[type=submit] {
 .peertube-select-container {
  @include peertube-select-container(340px);
-  margin-bottom: 30px;
 }
 my-select-languages {
@@ -24,7 +17,3 @@ my-select-languages {
  display: block;
 }
-.form-group-select {
-  margin-bottom: 30px;
-}
diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html
index a00c3d1c7..656d1beb3 100644
--- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html
+++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html
@@ -1,5 +1,5 @@
 <form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
-  <div class="form-group mb-2">
+  <div class="form-group">
    <input type="email"
      formControlName="text"
      class="form-control"
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
index a6d851315..0e09c2697 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
@@ -1,5 +1,5 @@
 <div
-  class="btn-group-subscribe btn-group"
+  class="btn-group-subscribe btn-group" role="group"
  [ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }"
 >
@@ -20,17 +20,11 @@
  </ng-template>
  <ng-template #userLoggedIn>
-    <button
+    <button *ngIf="!isAllChannelsSubscribed" type="button" class="btn" (click)="subscribe()">
-      *ngIf="!isAllChannelsSubscribed" type="button"
-      class="btn btn-sm" (click)="subscribe()"
-    >
      <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template>
    </button>
-    <button
+    <button *ngIf="isAllChannelsSubscribed" type="button" class="btn" role="button" (click)="unsubscribe()">
-      *ngIf="isAllChannelsSubscribed" type="button"
-      class="btn btn-sm" role="button"
-      (click)="unsubscribe()">
      <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container>
    </button>
  </ng-template>
@@ -43,7 +37,7 @@
    class="btn-group" ngbDropdown autoClose="outside" placement="bottom-right bottom-left bottom auto"
    role="group" aria-label="Multiple ways to subscribe to the current channel" i18n-aria-label
  >
-    <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label>
+    <button class="btn dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label>
      <ng-container
        *ngIf="!isUserLoggedIn(); then userLoggedOut">
      </ng-container>
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
index da8eaf646..889596b62 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
@@ -3,14 +3,10 @@
 .btn-group-subscribe {
  @include peertube-button;
-  @include disable-default-a-behaviour;
-  float: right;
+  button.dropdown-toggle {
-  padding: 0;
+    font-size: $button-font-size;
+    line-height: 1.2;
-  > .btn,
-  > .dropdown > .dropdown-toggle {
-    font-size: 15px;
  }
  &:not(.big) {
@@ -38,7 +34,7 @@
  // Unlogged
  > .dropdown > .dropdown-toggle span {
-    @include padding-right(3px);
+    @include padding-right(5px);
  }
  // Logged
@@ -65,9 +61,11 @@
      @include padding-left(5px);
    }
  }
  &.unsubscribe-button {
    .btn {
      @include grey-button;
      font-weight: 600;
    }
  }
diff --git a/client/src/app/shared/shared-video-live/live-documentation-link.component.html b/client/src/app/shared/shared-video-live/live-documentation-link.component.html
index acf8a71eb..27248645f 100644
--- a/client/src/app/shared/shared-video-live/live-documentation-link.component.html
+++ b/client/src/app/shared/shared-video-live/live-documentation-link.component.html
@@ -1,4 +1,4 @@
-<div i18n>
+<p i18n>
-  See <a href="https://docs.joinpeertube.org/use-create-upload-video?id=publish-a-live-in-peertube-gt-v3" target="_blank" rel="noopener noreferrer">the documentation</a>
+  See <a class="link-orange" href="https://docs.joinpeertube.org/use-create-upload-video?id=publish-a-live-in-peertube-gt-v3" target="_blank" rel="noopener noreferrer">the documentation</a>
  to learn how to use the PeerTube live streaming feature.
-</div>
+</p>
diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.html b/client/src/app/shared/shared-video-live/live-stream-information.component.html
index 01e305938..99c7dbd4c 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.html
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.html
@@ -7,27 +7,27 @@
  <div class="modal-body" *ngIf="live">
    <div>
-      <div class="badge badge-info" *ngIf="live.permanentLive" i18n>Permanent/Recurring live</div>
+      <div class="pt-badge badge-blue" *ngIf="live.permanentLive" i18n>Permanent/Recurring live</div>
-      <div class="badge badge-info" *ngIf="live.saveReplay" i18n>Replay will be saved</div>
+      <div class="pt-badge badge-blue" *ngIf="live.saveReplay" i18n>Replay will be saved</div>
    </div>
-    <div class="alert alert-info">
+    <div class="alert pt-alert-primary">
      <my-live-documentation-link></my-live-documentation-link>
    </div>
    <div *ngIf="live.rtmpUrl" class="form-group">
      <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label>
-      <my-input-toggle-hidden inputId="liveVideoRTMPUrl" [value]="live.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-text inputId="liveVideoRTMPUrl" [value]="live.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
    </div>
    <div *ngIf="live.rtmpsUrl" class="form-group">
      <label for="liveVideoRTMPSUrl" i18n>Live RTMPS Url</label>
-      <my-input-toggle-hidden inputId="liveVideoRTMPSUrl" [value]="live.rtmpsUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-text inputId="liveVideoRTMPSUrl" [value]="live.rtmpsUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
    </div>
    <div class="form-group">
      <label for="liveVideoStreamKey" i18n>Live stream key</label>
-      <my-input-toggle-hidden inputId="liveVideoStreamKey" [value]="live.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-text inputId="liveVideoStreamKey" [value]="live.streamKey" [withCopy]="true" [readonly]="true"></my-input-text>
      <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div>
    </div>
@@ -36,8 +36,8 @@
      <label i18n>Latest live sessions</label>
      <div class="journal-session" *ngFor="let session of latestLiveSessions">
-        <span i18n class="badge badge-success" *ngIf="!getErrorLabel(session)">Success</span>
+        <span i18n class="pt-badge badge-success" *ngIf="!getErrorLabel(session)">Success</span>
-        <span class="badge badge-danger" *ngIf="getErrorLabel(session)">{{ getErrorLabel(session) }}</span>
+        <span class="pt-badge badge-danger" *ngIf="getErrorLabel(session)">{{ getErrorLabel(session) }}</span>
        <span i18n>Started on {{ session.startDate | date:'medium' }}</span>
        <span i18n *ngIf="session.endDate">Ended on {{ session.endDate | date:'medium' }}</span>
diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.scss b/client/src/app/shared/shared-video-live/live-stream-information.component.scss
index 9c8ad12bd..a0cb30897 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.scss
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.scss
@@ -9,19 +9,20 @@ p-autocomplete {
  margin: 20px 0;
 }
-.alert-info {
+.pt-alert-primary {
  margin: 1rem 0;
 }
-.badge {
+.pt-badge {
+  @include margin-right(5px);
  font-size: 13px;
-  margin-right: 5px;
 }
 .journal-session {
  margin-bottom: 5px;
-  span:not(.badge, :last-child)::after {
+  span:not(.pt-badge, :last-child)::after {
    margin: 3px;
    content: '•';
  }
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 b50544057..1c7458b4b 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
@@ -28,15 +28,10 @@
          <ng-template ngbNavContent>
            <div class="nav-content">
-              <div class="input-group input-group-sm">
+              <my-input-text
-                <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
+                *ngIf="!isConfidentialVideo()"
+                [show]="true" [readonly]="true" [withCopy]="true" [withToggle]="false" [value]="getLink()"
-                <div class="input-group-append" *ngIf="!isConfidentialVideo()">
+              ></my-input-text>
-                  <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>
@@ -53,14 +48,10 @@
          <ng-template ngbNavContent>
            <div class="nav-content">
-              <div class="input-group input-group-sm">
+              <my-input-text
-                <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
+                *ngIf="!isConfidentialVideo()"
-                <div class="input-group-append" *ngIf="!isConfidentialVideo()">
+                [show]="true" [readonly]="true" [withCopy]="true" [withToggle]="false" [value]="getLink()"
-                  <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
+              ></my-input-text>
-                    <span class="glyphicon glyphicon-duplicate"></span>
-                  </button>
-                </div>
-              </div>
            </div>
          </ng-template>
        </ng-container>
@@ -129,7 +120,7 @@
        [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"
      >
        <ng-container *ngIf="isAdvancedCustomizationCollapsed">
-          <span class="glyphicon glyphicon-menu-down"></span>
+          <span class="chevron-down"></span>
          <ng-container i18n>
            Advanced
@@ -137,7 +128,7 @@
        </ng-container>
        <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
-          <span class="glyphicon glyphicon-menu-up"></span>
+          <span class="chevron-up"></span>
          <ng-container i18n>
            Simple
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 bd42f4813..407bdadf2 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
@@ -10,17 +10,12 @@
  justify-content: center;
  align-items: center;
  margin-top: 20px;
-  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  .nav-tabs {
    margin-top: 10x;
  }
-  .glyphicon {
-    @include margin-right(5px);
-  }
 }
 .peertube-select-container.title-select {
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 5328f5170..bbda39c2d 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
@@ -193,10 +193,6 @@ export class VideoDownloadComponent {
    return this.video.privacy.id === VideoPrivacy.PRIVATE || this.video.privacy.id === VideoPrivacy.INTERNAL
  }
-  activateCopiedMessage () {
-    this.notifier.success($localize`Copied`)
-  }
  switchToType (type: DownloadType) {
    this.type = type
  }
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
index a07b8b5ee..fe7a59bdb 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
@@ -44,6 +44,7 @@
      [searchable]="false"
    >
      <ng-option i18n value="-publishedAt">Sort by <strong>"Recently Added"</strong></ng-option>
+      <ng-option i18n value="-originallyPublishedAt">Sort by <strong>"Original Publication Date"</strong></ng-option>
      <ng-option i18n *ngIf="isTrendingSortEnabled('most-viewed')" value="-trending">Sort by <strong>"Recent Views"</strong></ng-option>
      <ng-option i18n *ngIf="isTrendingSortEnabled('hot')" value="-hot">Sort by <strong>"Hot"</strong></ng-option>
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
index 8cb1ff5b8..a4e51982c 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
@@ -3,7 +3,6 @@
 .root {
  margin-bottom: 45px;
-  font-size: 15px;
 }
 .first-row {
@@ -49,7 +48,6 @@
  border-radius: 24px;
  padding: 4px 15px;
-  font-size: 16px;
  margin-bottom: 15px;
  cursor: pointer;
 }
@@ -101,7 +99,7 @@
 }
 .sort {
-  min-width: 200px;
+  min-width: 250px;
  max-width: 300px;
  height: min-content;
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 80b418c87..a397efdca 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
@@ -4,6 +4,10 @@
 $more-button-width: 40px;
+.video-miniature {
+  font-size: 14px;
+}
 .video-miniature-name {
  @include miniature-name;
 }
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 42c472579..534a78b3f 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
@@ -175,7 +175,7 @@ export class VideoMiniatureComponent implements OnInit {
    if (video.scheduledUpdate) {
      const updateAt = new Date(video.scheduledUpdate.updateAt.toString()).toLocaleString(this.localeId)
-      return $localize`Publication scheduled on ` + updateAt
+      return $localize`Publication scheduled on ${updateAt}`
    }
    if (video.state.id === VideoState.TRANSCODING_FAILED) {
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.html b/client/src/app/shared/shared-video-miniature/videos-list.component.html
index 2b554517f..c220f61f1 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.html
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.html
@@ -12,15 +12,15 @@
    <div class="action-block">
      <ng-container *ngFor="let action of headerActions">
-        <a *ngIf="action.routerLink" class="ml-2" [routerLink]="action.routerLink" routerLinkActive="active">
+        <a *ngIf="action.routerLink" class="ms-2" [routerLink]="action.routerLink" routerLinkActive="active">
          <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
        </a>
-        <a *ngIf="!action.routerLink && !action.href && action.click" class="ml-2" (click)="action.click($event)" (key.enter)="action.click($event)">
+        <a *ngIf="!action.routerLink && !action.href && action.click" class="ms-2" (click)="action.click($event)" (key.enter)="action.click($event)">
          <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
        </a>
-        <a *ngIf="!action.routerLink && action.href && action.click" class="ml-2" (click)="action.click($event)" (key.enter)="action.click($event)" [href]="action.href">
+        <a *ngIf="!action.routerLink && action.href && action.click" class="ms-2" (click)="action.click($event)" (key.enter)="action.click($event)" [href]="action.href">
          <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
        </a>
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.scss b/client/src/app/shared/shared-video-miniature/videos-list.component.scss
index 209201a5c..fb9dcafb8 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.scss
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.scss
@@ -54,9 +54,9 @@ $margin-top: 30px;
 }
 .date-title {
-  font-size: 16px;
  font-weight: $font-semibold;
  margin-bottom: 20px;
+  font-size: 1rem;
  // Make the element span a full grid row within .videos grid
  grid-column: 1 / -1;
@@ -99,11 +99,5 @@ $margin-top: 30px;
    align-items: center;
    height: auto;
    margin-bottom: 10px;
-    .title-page {
-      @include margin-right(0);
-      margin-bottom: 10px;
-    }
  }
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
index bd5d37196..6d787796a 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
@@ -30,12 +30,10 @@
      </div>
      <div class="optional-rows" *ngIf="playlist.optionalRowDisplayed">
-        <div class="labels">
+        <div class="header-label" i18n>Start at</div>
-          <div i18n>Start at</div>
+        <div class="header-label" i18n>Stop at</div>
-          <div i18n>Stop at</div>
-        </div>
-        <div *ngFor="let element of buildOptionalRowElements(playlist)">
+        <ng-container *ngFor="let element of buildOptionalRowElements(playlist)">
          <my-peertube-checkbox
            [inputName]="getOptionalInputName(playlist, element)"
            [ngModel]="element.enabled" [onPushWorkaround]="true"
@@ -55,7 +53,7 @@
            (inputBlur)="onElementTimestampUpdate(playlist, element)"
            #stopAt
          ></my-timestamp-input>
-        </div>
+        </ng-container>
      </div>
    </div>
  </div>
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
index 7db469d7c..de2f1032b 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
@@ -1,10 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-$optional-rows-checkbox-width: 34px;
-$timestamp-width: 50px;
-$timestamp-margin-right: 10px;
 .header,
 .dropdown-item,
 .input-container {
@@ -52,12 +48,12 @@ $timestamp-margin-right: 10px;
  }
 }
-.primary-row,
+.primary-row {
-.optional-rows > div {
  display: flex;
  my-peertube-checkbox {
    @include margin-right(10px);
    align-self: center;
  }
@@ -84,41 +80,30 @@ $timestamp-margin-right: 10px;
      height: 19px;
    }
  }
-  my-timestamp-input {
-    @include margin-right($timestamp-margin-right);
-    ::ng-deep .ui-inputtext {
-      padding: 0;
-      width: $timestamp-width;
-    }
-  }
 }
 .optional-rows {
-  > div {
+  display: grid;
-    padding: 8px 5px 5px 10px;
+  grid-template-columns: 35px 80px 80px;
-  }
+  row-gap: 3px;
+  column-gap: 10px;
+  align-items: center;
  my-peertube-checkbox {
-    @include margin-right(0 !important);
+    @include margin-left(auto);
-    display: block;
-    width: $optional-rows-checkbox-width;
  }
-  .labels {
+  .header-label {
-    @include margin-left($optional-rows-checkbox-width);
    font-size: 13px;
    color: pvar(--greyForegroundColor);
-    padding-top: 5px;
+    padding-left: 2px;
-    padding-bottom: 0;
-    div {
+    &:nth-child(1) {
-      @include margin-right($timestamp-margin-right);
+      grid-column: 2;
+    }
-      width: $timestamp-width;
+    &:nth-child(2) {
+      grid-column: 3;
    }
  }
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
index 2400a4c25..f58d5f7f6 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
@@ -21,7 +21,7 @@
            [attr.title]="playlistElement.video.name"
          >{{ playlistElement.video.name }}</a>
-          <span *ngIf="isVideoPrivate()" class="badge badge-yellow">Private</span>
+          <span *ngIf="isVideoPrivate()" class="pt-badge badge-yellow">Private</span>
        </div>
        <span class="video-miniature-created-at-views">
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index fbf67e892..e6b01d33d 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -75,41 +75,6 @@ my-video-thumbnail,
        left: -2px;
      }
    }
-    .video-info {
-      display: flex;
-      flex-direction: column;
-      align-self: flex-start;
-      min-width: 0;
-      .video-info-header {
-        display: flex;
-        align-items: baseline;
-        a {
-          width: auto;
-          padding-right: 5px;
-        }
-        .badge {
-          @include peertube-badge;
-          margin-right: 5px;
-        }
-      }
-      .video-info-account,
-      .video-info-timestamp {
-        color: pvar(--greyForegroundColor);
-      }
-    }
-  }
-  .video-info-name {
-    @include ellipsis;
-    font-size: 18px;
-    font-weight: $font-semibold;
-    display: inline-block;
  }
  .more,
@@ -140,6 +105,45 @@ my-video-thumbnail,
  }
 }
+.video-info-name {
+  @include ellipsis;
+  font-size: 18px;
+  font-weight: $font-semibold;
+  display: inline-block;
+}
+.video-info {
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+  min-width: 0;
+  .video-info-header {
+    display: flex;
+    align-items: baseline;
+    a {
+      width: auto;
+      padding-right: 5px;
+    }
+    .pt-badge {
+      @include margin-right(5px);
+    }
+  }
+  .video-info-account,
+  .video-info-timestamp {
+    color: pvar(--greyForegroundColor);
+  }
+}
+.video-info-account,
+.video-miniature-created-at-views {
+  font-size: 14px;
+}
 .dropdown-menu {
  .dropdown-item {
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 3956d9282..d43afad28 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
@@ -53,7 +53,7 @@
  .privacy-date {
    margin-top: 5px;
-    font-size: 13px;
+    font-size: 14px;
    .privacy {
      font-weight: $font-semibold;