103 files changed, 1481 insertions, 406 deletions
diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index b113df82f..fdd6157e5 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -21,7 +21,7 @@
    <div class="anchor" id="administrators-and-sustainability"></div>
    <a
-      *ngIf="html.administrator || html.maintenanceLifetime || html.businessModel"
+      *ngIf="aboutHTML.administrator || aboutHTML.maintenanceLifetime || aboutHTML.businessModel"
      class="anchor-link"
      routerLink="/about/instance"
      fragment="administrators-and-sustainability"
@@ -33,7 +33,7 @@
      </h2>
    </a>
-    <div class="block administrator" *ngIf="html.administrator">
+    <div class="block administrator" *ngIf="aboutHTML.administrator">
      <div class="anchor" id="administrators"></div>
      <a
        class="anchor-link"
@@ -44,10 +44,10 @@
        <h3 i18n class="section-title">Who we are</h3>
      </a>
-      <div [innerHTML]="html.administrator"></div>
+      <div [innerHTML]="aboutHTML.administrator"></div>
    </div>
-    <div class="block creation-reason" *ngIf="html.creationReason">
+    <div class="block creation-reason" *ngIf="aboutHTML.creationReason">
      <div class="anchor" id="creation-reason"></div>
      <a
        class="anchor-link"
@@ -58,10 +58,10 @@
        <h3 i18n class="section-title">Why we created this instance</h3>
      </a>
-      <div [innerHTML]="html.creationReason"></div>
+      <div [innerHTML]="aboutHTML.creationReason"></div>
    </div>
-    <div class="block maintenance-lifetime" *ngIf="html.maintenanceLifetime">
+    <div class="block maintenance-lifetime" *ngIf="aboutHTML.maintenanceLifetime">
      <div class="anchor" id="maintenance-lifetime"></div>
      <a
        class="anchor-link"
@@ -72,10 +72,10 @@
        <h3 i18n class="section-title">How long we plan to maintain this instance</h3>
      </a>
-      <div [innerHTML]="html.maintenanceLifetime"></div>
+      <div [innerHTML]="aboutHTML.maintenanceLifetime"></div>
    </div>
-    <div class="block business-model" *ngIf="html.businessModel">
+    <div class="block business-model" *ngIf="aboutHTML.businessModel">
        <div class="anchor" id="business-model"></div>
        <a
          class="anchor-link"
@@ -86,12 +86,12 @@
          <h3 i18n class="section-title">How we will pay for keeping our instance running</h3>
        </a>
-      <div [innerHTML]="html.businessModel"></div>
+      <div [innerHTML]="aboutHTML.businessModel"></div>
    </div>
    <div class="anchor" id="information"></div>
    <a
-      *ngIf="descriptionContent"
+      *ngIf="descriptionElement"
      class="anchor-link"
      routerLink="/about/instance"
      fragment="information"
@@ -113,13 +113,13 @@
        <h3 i18n class="section-title">Description</h3>
      </a>
-      <my-custom-markup-container [content]="descriptionContent"></my-custom-markup-container>
+      <my-custom-markup-container [content]="descriptionElement"></my-custom-markup-container>
    </div>
    <div myPluginSelector pluginSelectorId="about-instance-moderation">
      <div class="anchor" id="moderation"></div>
      <a
-        *ngIf="html.moderationInformation || html.codeOfConduct || html.terms"
+        *ngIf="aboutHTML.moderationInformation || aboutHTML.codeOfConduct || aboutHTML.terms"
        class="anchor-link"
        routerLink="/about/instance"
        fragment="moderation"
@@ -130,7 +130,7 @@
        </h2>
      </a>
-      <div class="block moderation-information" *ngIf="html.moderationInformation">
+      <div class="block moderation-information" *ngIf="aboutHTML.moderationInformation">
        <div class="anchor" id="moderation-information"></div>
        <a
          class="anchor-link"
@@ -141,10 +141,10 @@
          <h3 i18n class="section-title">Moderation information</h3>
        </a>
-        <div [innerHTML]="html.moderationInformation"></div>
+        <div [innerHTML]="aboutHTML.moderationInformation"></div>
      </div>
-      <div class="block code-of-conduct" *ngIf="html.codeOfConduct">
+      <div class="block code-of-conduct" *ngIf="aboutHTML.codeOfConduct">
        <div class="anchor" id="code-of-conduct"></div>
        <a
          class="anchor-link"
@@ -155,7 +155,7 @@
          <h3 i18n class="section-title">Code of conduct</h3>
        </a>
-        <div [innerHTML]="html.codeOfConduct"></div>
+        <div [innerHTML]="aboutHTML.codeOfConduct"></div>
      </div>
      <div class="block terms">
@@ -169,14 +169,14 @@
          <h3 i18n class="section-title">Terms</h3>
        </a>
-        <div [innerHTML]="html.terms"></div>
+        <div [innerHTML]="aboutHTML.terms"></div>
      </div>
    </div>
    <div myPluginSelector pluginSelectorId="about-instance-other-information">
      <div class="anchor" id="other-information"></div>
      <a
-        *ngIf="html.hardwareInformation"
+        *ngIf="aboutHTML.hardwareInformation"
        class="anchor-link"
        routerLink="/about/instance"
        fragment="other-information"
@@ -187,7 +187,7 @@
        </h2>
      </a>
-      <div class="block hardware-information" *ngIf="html.hardwareInformation">
+      <div class="block hardware-information" *ngIf="aboutHTML.hardwareInformation">
        <div class="anchor" id="hardware-information"></div>
        <a
          class="anchor-link"
@@ -198,7 +198,7 @@
          <h3 i18n class="section-title">Hardware information</h3>
        </a>
-        <div [innerHTML]="html.hardwareInformation"></div>
+        <div [innerHTML]="aboutHTML.hardwareInformation"></div>
      </div>
    </div>
  </div>
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index 0826bbc5a..e1501d7de 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -2,7 +2,7 @@ import { ViewportScroller } from '@angular/common'
 import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { Notifier, ServerService } from '@app/core'
-import { InstanceService } from '@app/shared/shared-instance'
+import { AboutHTML } from '@app/shared/shared-instance'
 import { copyToClipboard } from '@root-helpers/utils'
 import { HTMLServerConfig } from '@shared/models/server'
 import { ResolverData } from './about-instance.resolver'
@@ -17,22 +17,12 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
  @ViewChild('descriptionWrapper') descriptionWrapper: ElementRef<HTMLInputElement>
  @ViewChild('contactAdminModal', { static: true }) contactAdminModal: ContactAdminModalComponent
-  shortDescription = ''
+  aboutHTML: AboutHTML
-  descriptionContent: string
+  descriptionElement: HTMLDivElement
-  html = {
-    terms: '',
-    codeOfConduct: '',
-    moderationInformation: '',
-    administrator: '',
-    creationReason: '',
-    maintenanceLifetime: '',
-    businessModel: '',
-    hardwareInformation: ''
-  }
  languages: string[] = []
  categories: string[] = []
+  shortDescription = ''
  initialized = false
@@ -44,8 +34,7 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
    private viewportScroller: ViewportScroller,
    private route: ActivatedRoute,
    private notifier: Notifier,
-    private serverService: ServerService,
+    private serverService: ServerService
-    private instanceService: InstanceService
  ) {}
  get instanceName () {
@@ -60,8 +49,16 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
    return this.serverConfig.instance.isNSFW
  }
-  async ngOnInit () {
+  ngOnInit () {
-    const { about, languages, categories }: ResolverData = this.route.snapshot.data.instanceData
+    const { about, languages, categories, aboutHTML, descriptionElement }: ResolverData = this.route.snapshot.data.instanceData
+    this.aboutHTML = aboutHTML
+    this.descriptionElement = descriptionElement
+    this.languages = languages
+    this.categories = categories
+    this.shortDescription = about.instance.shortDescription
    this.serverConfig = this.serverService.getHTMLConfig()
@@ -73,14 +70,6 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
      this.contactAdminModal.show(prefill)
    })
-    this.languages = languages
-    this.categories = categories
-    this.shortDescription = about.instance.shortDescription
-    this.descriptionContent = about.instance.description
-    this.html = await this.instanceService.buildHtml(about)
    this.initialized = true
  }
diff --git a/client/src/app/+about/about-instance/about-instance.resolver.ts b/client/src/app/+about/about-instance/about-instance.resolver.ts
index ee0219df0..8818fc582 100644
--- a/client/src/app/+about/about-instance/about-instance.resolver.ts
+++ b/client/src/app/+about/about-instance/about-instance.resolver.ts
@@ -2,16 +2,25 @@ import { forkJoin } from 'rxjs'
 import { map, switchMap } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { Resolve } from '@angular/router'
-import { InstanceService } from '@app/shared/shared-instance'
+import { CustomMarkupService } from '@app/shared/shared-custom-markup'
+import { AboutHTML, InstanceService } from '@app/shared/shared-instance'
 import { About } from '@shared/models/server'
-export type ResolverData = { about: About, languages: string[], categories: string[] }
+export type ResolverData = {
+  about: About
+  languages: string[]
+  categories: string[]
+  aboutHTML: AboutHTML
+  descriptionElement: HTMLDivElement
+}
 @Injectable()
 export class AboutInstanceResolver implements Resolve<any> {
  constructor (
-    private instanceService: InstanceService
+    private instanceService: InstanceService,
+    private customMarkupService: CustomMarkupService
  ) {}
  resolve () {
@@ -19,9 +28,15 @@ export class AboutInstanceResolver implements Resolve<any> {
               .pipe(
                 switchMap(about => {
                   return forkJoin([
+                     Promise.resolve(about),
                     this.instanceService.buildTranslatedLanguages(about),
-                     this.instanceService.buildTranslatedCategories(about)
+                     this.instanceService.buildTranslatedCategories(about),
-                   ]).pipe(map(([ languages, categories ]) => ({ about, languages, categories }) as ResolverData))
+                     this.instanceService.buildHtml(about),
+                     this.customMarkupService.buildElement(about.instance.description)
+                   ])
+                 }),
+                 map(([ about, languages, categories, aboutHTML, { rootElement } ]) => {
+                   return { about, languages, categories, aboutHTML, descriptionElement: rootElement } as ResolverData
                 })
               )
  }
diff --git a/client/src/app/+admin/admin.component.ts b/client/src/app/+admin/admin.component.ts
index 746549555..630bfe253 100644
--- a/client/src/app/+admin/admin.component.ts
+++ b/client/src/app/+admin/admin.component.ts
@@ -96,6 +96,14 @@ export class AdminComponent implements OnInit {
      children: []
    }
+    if (this.hasRegistrationsRight()) {
+      moderationItems.children.push({
+        label: $localize`Registrations`,
+        routerLink: '/admin/moderation/registrations/list',
+        iconName: 'user'
+      })
+    }
    if (this.hasAbusesRight()) {
      moderationItems.children.push({
        label: $localize`Reports`,
@@ -229,4 +237,8 @@ export class AdminComponent implements OnInit {
  private hasVideosRight () {
    return this.auth.getUser().hasRight(UserRight.SEE_ALL_VIDEOS)
  }
+  private hasRegistrationsRight () {
+    return this.auth.getUser().hasRight(UserRight.MANAGE_REGISTRATIONS)
+  }
 }
diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index f01967ea6..891ff4ed1 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -30,7 +30,13 @@ import { FollowersListComponent, FollowModalComponent, VideoRedundanciesListComp
 import { FollowingListComponent } from './follows/following-list/following-list.component'
 import { RedundancyCheckboxComponent } from './follows/shared/redundancy-checkbox.component'
 import { VideoRedundancyInformationComponent } from './follows/video-redundancies-list/video-redundancy-information.component'
-import { AbuseListComponent, VideoBlockListComponent } from './moderation'
+import {
+  AbuseListComponent,
+  AdminRegistrationService,
+  ProcessRegistrationModalComponent,
+  RegistrationListComponent,
+  VideoBlockListComponent
+} from './moderation'
 import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } from './moderation/instance-blocklist'
 import {
  UserCreateComponent,
@@ -116,7 +122,10 @@ import { JobsComponent } from './system/jobs/jobs.component'
    EditLiveConfigurationComponent,
    EditAdvancedConfigurationComponent,
    EditInstanceInformationComponent,
-    EditHomepageComponent
+    EditHomepageComponent,
+    RegistrationListComponent,
+    ProcessRegistrationModalComponent
  ],
  exports: [
@@ -130,7 +139,8 @@ import { JobsComponent } from './system/jobs/jobs.component'
    ConfigService,
    PluginApiService,
    EditConfigurationService,
-    VideoAdminService
+    VideoAdminService,
+    AdminRegistrationService
  ]
 })
 export class AdminModule { }
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index 43f1438e0..0f3803f97 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -44,9 +44,13 @@
            <div class="peertube-select-container">
              <select id="trendingVideosAlgorithmsDefault" formControlName="default" class="form-control">
+                <option i18n value="publishedAt">Recently added videos</option>
+                <option i18n value="originallyPublishedAt">Original publication date</option>
+                <option i18n value="name">Name</option>
                <option i18n value="hot">Hot videos</option>
-                <option i18n value="most-viewed">Most viewed videos</option>
+                <option i18n value="most-viewed">Recent views</option>
                <option i18n value="most-liked">Most liked videos</option>
+                <option i18n value="views">Global views</option>
              </select>
            </div>
@@ -167,12 +171,21 @@
            </ng-container>
            <ng-container ngProjectAs="extra">
-              <my-peertube-checkbox [ngClass]="getDisabledSignupClass()"
+              <div class="form-group">
-                inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
+                <my-peertube-checkbox [ngClass]="getDisabledSignupClass()"
-                i18n-labelText labelText="Signup requires email verification"
+                  inputName="signupRequiresApproval" formControlName="requiresApproval"
-              ></my-peertube-checkbox>
+                  i18n-labelText labelText="Signup requires approval by moderators"
+                ></my-peertube-checkbox>
+              </div>
-              <div [ngClass]="getDisabledSignupClass()" class="mt-3">
+              <div class="form-group">
+                <my-peertube-checkbox [ngClass]="getDisabledSignupClass()"
+                  inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
+                  i18n-labelText labelText="Signup requires email verification"
+                ></my-peertube-checkbox>
+              </div>
+              <div [ngClass]="getDisabledSignupClass()">
                <label i18n for="signupLimit">Signup limit</label>
                <div class="number-with-unit">
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index 168f4702c..2afe80a03 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -132,6 +132,7 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
      signup: {
        enabled: null,
        limit: SIGNUP_LIMIT_VALIDATOR,
+        requiresApproval: null,
        requiresEmailVerification: null,
        minimumAge: SIGNUP_MINIMUM_AGE_VALIDATOR
      },
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
index 5339240bb..3d8414f5c 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
@@ -17,7 +17,7 @@
          <my-markdown-textarea
            name="instanceCustomHomepageContent" formControlName="content"
-            [customMarkdownRenderer]="getCustomMarkdownRenderer()"
+            [customMarkdownRenderer]="getCustomMarkdownRenderer()" [debounceTime]="500"
            [formError]="formErrors['instanceCustomHomepage.content']"
          ></my-markdown-textarea>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
index b54733327..504afa189 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
@@ -38,7 +38,7 @@
          <my-markdown-textarea
            name="instanceDescription" formControlName="description"
-            [customMarkdownRenderer]="getCustomMarkdownRenderer()"
+            [customMarkdownRenderer]="getCustomMarkdownRenderer()" [debounceTime]="500"
            [formError]="formErrors['instance.description']"
          ></my-markdown-textarea>
        </div>
diff --git a/client/src/app/+admin/moderation/index.ts b/client/src/app/+admin/moderation/index.ts
index 9dab270cc..135b4b408 100644
--- a/client/src/app/+admin/moderation/index.ts
+++ b/client/src/app/+admin/moderation/index.ts
@@ -1,4 +1,5 @@
 export * from './abuse-list'
 export * from './instance-blocklist'
 export * from './video-block-list'
+export * from './registration-list'
 export * from './moderation.routes'
diff --git a/client/src/app/+admin/moderation/moderation.routes.ts b/client/src/app/+admin/moderation/moderation.routes.ts
index 1ad301039..378d2bed7 100644
--- a/client/src/app/+admin/moderation/moderation.routes.ts
+++ b/client/src/app/+admin/moderation/moderation.routes.ts
@@ -4,6 +4,7 @@ import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } f
 import { VideoBlockListComponent } from '@app/+admin/moderation/video-block-list'
 import { UserRightGuard } from '@app/core'
 import { UserRight } from '@shared/models'
+import { RegistrationListComponent } from './registration-list'
 export const ModerationRoutes: Routes = [
  {
@@ -68,7 +69,19 @@ export const ModerationRoutes: Routes = [
        }
      },
-      // We move this component in admin overview pages
+      {
+        path: 'registrations/list',
+        component: RegistrationListComponent,
+        canActivate: [ UserRightGuard ],
+        data: {
+          userRight: UserRight.MANAGE_REGISTRATIONS,
+          meta: {
+            title: $localize`User registrations`
+          }
+        }
+      },
+      // We moved this component in admin overview pages
      {
        path: 'video-comments',
        redirectTo: 'video-comments/list',
diff --git a/client/src/app/+admin/moderation/registration-list/admin-registration.service.ts b/client/src/app/+admin/moderation/registration-list/admin-registration.service.ts
new file mode 100644
index 000000000..012f942b3
--- /dev/null
+++ b/client/src/app/+admin/moderation/registration-list/admin-registration.service.ts
@@ -0,0 +1,63 @@
+import { SortMeta } from 'primeng/api'
+import { catchError } from 'rxjs/operators'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor, RestPagination, RestService } from '@app/core'
+import { ResultList, UserRegistration } from '@shared/models'
+import { environment } from '../../../../environments/environment'
+@Injectable()
+export class AdminRegistrationService {
+  private static BASE_REGISTRATION_URL = environment.apiUrl + '/api/v1/users/registrations'
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor,
+    private restService: RestService
+  ) { }
+  listRegistrations (options: {
+    pagination: RestPagination
+    sort: SortMeta
+    search?: string
+  }) {
+    const { pagination, sort, search } = options
+    const url = AdminRegistrationService.BASE_REGISTRATION_URL
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+    if (search) {
+      params = params.append('search', search)
+    }
+    return this.authHttp.get<ResultList<UserRegistration>>(url, { params })
+      .pipe(
+        catchError(res => this.restExtractor.handleError(res))
+      )
+  }
+  acceptRegistration (registration: UserRegistration, moderationResponse: string) {
+    const url = AdminRegistrationService.BASE_REGISTRATION_URL + '/' + registration.id + '/accept'
+    const body = { moderationResponse }
+    return this.authHttp.post(url, body)
+      .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+  rejectRegistration (registration: UserRegistration, moderationResponse: string) {
+    const url = AdminRegistrationService.BASE_REGISTRATION_URL + '/' + registration.id + '/reject'
+    const body = { moderationResponse }
+    return this.authHttp.post(url, body)
+      .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+  removeRegistration (registration: UserRegistration) {
+    const url = AdminRegistrationService.BASE_REGISTRATION_URL + '/' + registration.id
+    return this.authHttp.delete(url)
+      .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+}
diff --git a/client/src/app/+admin/moderation/registration-list/index.ts b/client/src/app/+admin/moderation/registration-list/index.ts
new file mode 100644
index 000000000..060b676a4
--- /dev/null
+++ b/client/src/app/+admin/moderation/registration-list/index.ts
@@ -0,0 +1,4 @@
+export * from './admin-registration.service'
+export * from './process-registration-modal.component'
+export * from './process-registration-validators'
+export * from './registration-list.component'
diff --git a/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.html b/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.html
new file mode 100644
index 000000000..7a33bb94b
--- /dev/null
+++ b/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.html
@@ -0,0 +1,67 @@
+<ng-template #modal>
+  <div class="modal-header">
+    <h4 i18n class="modal-title">
+      <ng-container *ngIf="isAccept()">Accept {{ registration.username }} registration</ng-container>
+      <ng-container *ngIf="isReject()">Reject {{ registration.username }} registration</ng-container>
+    </h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+  <form novalidate [formGroup]="form" (ngSubmit)="processRegistration()">
+    <div class="modal-body mb-3">
+      <div i18n *ngIf="!registration.emailVerified" class="alert alert-warning">
+        Registration email has not been verified.
+      </div>
+      <div class="description">
+        <ng-container *ngIf="isAccept()">
+          <p i18n>
+            <strong>Accepting</strong>&nbsp;<em>{{ registration.username }}</em> registration will create the account and channel.
+          </p>
+          <p *ngIf="isEmailEnabled()" i18n>
+            An email will be sent to <em>{{ registration.email }}</em> explaining its account has been created with the moderation response you'll write below.
+          </p>
+          <div *ngIf="!isEmailEnabled()" class="alert alert-warning" i18n>
+            Emails are not enabled on this instance so PeerTube won't be able to send an email to <em>{{ registration.email }}</em> explaining its account has been created.
+          </div>
+        </ng-container>
+        <ng-container *ngIf="isReject()">
+          <p i18n>
+            An email will be sent to <em>{{ registration.email }}</em> explaining its registration request has been <strong>rejected</strong> with the moderation response you'll write below.
+          </p>
+          <div *ngIf="!isEmailEnabled()" class="alert alert-warning" i18n>
+            Emails are not enabled on this instance so PeerTube won't be able to send an email to <em>{{ registration.email }}</em> explaining its registration request has been rejected.
+          </div>
+        </ng-container>
+      </div>
+      <div class="form-group">
+        <label for="moderationResponse" i18n>Send a message to the user</label>
+        <textarea
+          formControlName="moderationResponse" ngbAutofocus name="moderationResponse" id="moderationResponse"
+          [ngClass]="{ 'input-error': formErrors['moderationResponse'] }" class="form-control"
+        ></textarea>
+        <div *ngIf="formErrors.moderationResponse" class="form-error">
+          {{ formErrors.moderationResponse }}
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer inputs">
+      <input
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+        (click)="hide()" (key.enter)="hide()"
+      >
+      <input type="submit" [value]="getSubmitValue()" class="peertube-button orange-button" [disabled]="!form.valid">
+    </div>
+  </form>
+</ng-template>
diff --git a/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.scss b/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.scss
new file mode 100644
index 000000000..3e03bed89
--- /dev/null
+++ b/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.scss
@@ -0,0 +1,3 @@
+@use '_variables' as *;
+@use '_mixins' as *;
diff --git a/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.ts b/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.ts
new file mode 100644
index 000000000..fbe8deb41
--- /dev/null
+++ b/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.ts
@@ -0,0 +1,107 @@
+import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
+import { Notifier, ServerService } from '@app/core'
+import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { UserRegistration } from '@shared/models'
+import { AdminRegistrationService } from './admin-registration.service'
+import { REGISTRATION_MODERATION_RESPONSE_VALIDATOR } from './process-registration-validators'
+@Component({
+  selector: 'my-process-registration-modal',
+  templateUrl: './process-registration-modal.component.html',
+  styleUrls: [ './process-registration-modal.component.scss' ]
+})
+export class ProcessRegistrationModalComponent extends FormReactive implements OnInit {
+  @ViewChild('modal', { static: true }) modal: NgbModal
+  @Output() registrationProcessed = new EventEmitter()
+  registration: UserRegistration
+  private openedModal: NgbModalRef
+  private processMode: 'accept' | 'reject'
+  constructor (
+    protected formReactiveService: FormReactiveService,
+    private server: ServerService,
+    private modalService: NgbModal,
+    private notifier: Notifier,
+    private registrationService: AdminRegistrationService
+  ) {
+    super()
+  }
+  ngOnInit () {
+    this.buildForm({
+      moderationResponse: REGISTRATION_MODERATION_RESPONSE_VALIDATOR
+    })
+  }
+  isAccept () {
+    return this.processMode === 'accept'
+  }
+  isReject () {
+    return this.processMode === 'reject'
+  }
+  openModal (registration: UserRegistration, mode: 'accept' | 'reject') {
+    this.processMode = mode
+    this.registration = registration
+    this.openedModal = this.modalService.open(this.modal, { centered: true })
+  }
+  hide () {
+    this.form.reset()
+    this.openedModal.close()
+  }
+  getSubmitValue () {
+    if (this.isAccept()) {
+      return $localize`Accept registration`
+    }
+    return $localize`Reject registration`
+  }
+  processRegistration () {
+    if (this.isAccept()) return this.acceptRegistration()
+    return this.rejectRegistration()
+  }
+  isEmailEnabled () {
+    return this.server.getHTMLConfig().email.enabled
+  }
+  private acceptRegistration () {
+    this.registrationService.acceptRegistration(this.registration, this.form.value.moderationResponse)
+      .subscribe({
+        next: () => {
+          this.notifier.success($localize`${this.registration.username} account created`)
+          this.registrationProcessed.emit()
+          this.hide()
+        },
+        error: err => this.notifier.error(err.message)
+      })
+  }
+  private rejectRegistration () {
+    this.registrationService.rejectRegistration(this.registration, this.form.value.moderationResponse)
+      .subscribe({
+        next: () => {
+          this.notifier.success($localize`${this.registration.username} registration rejected`)
+          this.registrationProcessed.emit()
+          this.hide()
+        },
+        error: err => this.notifier.error(err.message)
+      })
+  }
+}
diff --git a/client/src/app/+admin/moderation/registration-list/process-registration-validators.ts b/client/src/app/+admin/moderation/registration-list/process-registration-validators.ts
new file mode 100644
index 000000000..e01a07d9d
--- /dev/null
+++ b/client/src/app/+admin/moderation/registration-list/process-registration-validators.ts
@@ -0,0 +1,11 @@
+import { Validators } from '@angular/forms'
+import { BuildFormValidator } from '@app/shared/form-validators'
+export const REGISTRATION_MODERATION_RESPONSE_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
+  MESSAGES: {
+    required: $localize`Moderation response is required.`,
+    minlength: $localize`Moderation response must be at least 2 characters long.`,
+    maxlength: $localize`Moderation response cannot be more than 3000 characters long.`
+  }
+}
diff --git a/client/src/app/+admin/moderation/registration-list/registration-list.component.html b/client/src/app/+admin/moderation/registration-list/registration-list.component.html
new file mode 100644
index 000000000..4f9d06acc
--- /dev/null
+++ b/client/src/app/+admin/moderation/registration-list/registration-list.component.html
@@ -0,0 +1,120 @@
+<h1>
+  <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>Registration requests</ng-container>
+</h1>
+<p-table
+  [value]="registrations" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"
+  [rowsPerPageOptions]="rowsPerPageOptions" [sortField]="sort.field" [sortOrder]="sort.order" dataKey="id"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} registrations"
+  [expandedRowKeys]="expandedRows"
+>
+  <ng-template pTemplate="caption">
+    <div class="caption">
+      <div class="ms-auto">
+        <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
+      </div>
+    </div>
+  </ng-template>
+  <ng-template pTemplate="header">
+    <tr> <!-- header -->
+      <th style="width: 40px;"></th>
+      <th style="width: 150px;"></th>
+      <th i18n>Account</th>
+      <th i18n>Email</th>
+      <th i18n>Channel</th>
+      <th i18n>Registration reason</th>
+      <th i18n pSortableColumn="state" style="width: 80px;">State <p-sortIcon field="state"></p-sortIcon></th>
+      <th i18n>Moderation response</th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">Requested on <p-sortIcon field="createdAt"></p-sortIcon></th>
+    </tr>
+  </ng-template>
+  <ng-template pTemplate="body" let-expanded="expanded" let-registration>
+    <tr>
+      <td class="expand-cell" [pRowToggler]="registration">
+        <my-table-expander-icon [expanded]="expanded"></my-table-expander-icon>
+      </td>
+      <td class="action-cell">
+        <my-action-dropdown
+          [ngClass]="{ 'show': expanded }" placement="bottom-right top-right left auto" container="body"
+          i18n-label label="Actions" [actions]="registrationActions" [entry]="registration"
+        ></my-action-dropdown>
+      </td>
+      <td>
+        <div class="chip two-lines">
+          <div>
+            <span>{{ registration.username }}</span>
+            <span class="muted">{{ registration.accountDisplayName }}</span>
+          </div>
+        </div>
+      </td>
+      <td>
+        <my-user-email-info [entry]="registration" [requiresEmailVerification]="requiresEmailVerification"></my-user-email-info>
+      </td>
+      <td>
+        <div class="chip two-lines">
+          <div>
+            <span>{{ registration.channelHandle }}</span>
+            <span class="muted">{{ registration.channelDisplayName }}</span>
+          </div>
+        </div>
+      </td>
+      <td container="body" placement="left auto" [ngbTooltip]="registration.registrationReason">
+        {{ registration.registrationReason }}
+      </td>
+      <td class="c-hand abuse-states" [pRowToggler]="registration">
+        <my-global-icon *ngIf="isRegistrationAccepted(registration)" [title]="registration.state.label" iconName="tick"></my-global-icon>
+        <my-global-icon *ngIf="isRegistrationRejected(registration)" [title]="registration.state.label" iconName="cross"></my-global-icon>
+      </td>
+      <td container="body" placement="left auto" [ngbTooltip]="registration.moderationResponse">
+        {{ registration.moderationResponse }}
+      </td>
+      <td class="c-hand" [pRowToggler]="registration">{{ registration.createdAt | date: 'short'  }}</td>
+    </tr>
+  </ng-template>
+  <ng-template pTemplate="rowexpansion" let-registration>
+    <tr>
+      <td colspan="9">
+        <div class="moderation-expanded">
+          <div class="left">
+            <div class="d-flex">
+              <span class="moderation-expanded-label" i18n>Registration reason:</span>
+              <span class="moderation-expanded-text" [innerHTML]="registration.registrationReasonHTML"></span>
+            </div>
+            <div *ngIf="registration.moderationResponse">
+              <span class="moderation-expanded-label" i18n>Moderation response:</span>
+              <span class="moderation-expanded-text" [innerHTML]="registration.moderationResponseHTML"></span>
+            </div>
+          </div>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="9">
+        <div class="no-results">
+          <ng-container *ngIf="search" i18n>No registrations found matching current filters.</ng-container>
+          <ng-container *ngIf="!search" i18n>No registrations found.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
+<my-process-registration-modal #processRegistrationModal (registrationProcessed)="onRegistrationProcessed()"></my-process-registration-modal>
diff --git a/client/src/app/+admin/moderation/registration-list/registration-list.component.scss b/client/src/app/+admin/moderation/registration-list/registration-list.component.scss
new file mode 100644
index 000000000..9cae08e85
--- /dev/null
+++ b/client/src/app/+admin/moderation/registration-list/registration-list.component.scss
@@ -0,0 +1,7 @@
+@use '_mixins' as *;
+@use '_variables' as *;
+my-global-icon {
+  width: 24px;
+  height: 24px;
+}
diff --git a/client/src/app/+admin/moderation/registration-list/registration-list.component.ts b/client/src/app/+admin/moderation/registration-list/registration-list.component.ts
new file mode 100644
index 000000000..37514edf5
--- /dev/null
+++ b/client/src/app/+admin/moderation/registration-list/registration-list.component.ts
@@ -0,0 +1,125 @@
+import { SortMeta } from 'primeng/api'
+import { Component, OnInit, ViewChild } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { MarkdownService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
+import { AdvancedInputFilter } from '@app/shared/shared-forms'
+import { DropdownAction } from '@app/shared/shared-main'
+import { UserRegistration, UserRegistrationState } from '@shared/models'
+import { AdminRegistrationService } from './admin-registration.service'
+import { ProcessRegistrationModalComponent } from './process-registration-modal.component'
+@Component({
+  selector: 'my-registration-list',
+  templateUrl: './registration-list.component.html',
+  styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './registration-list.component.scss' ]
+})
+export class RegistrationListComponent extends RestTable implements OnInit {
+  @ViewChild('processRegistrationModal', { static: true }) processRegistrationModal: ProcessRegistrationModalComponent
+  registrations: (UserRegistration & { registrationReasonHTML?: string, moderationResponseHTML?: string })[] = []
+  totalRecords = 0
+  sort: SortMeta = { field: 'createdAt', order: -1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+  registrationActions: DropdownAction<UserRegistration>[][] = []
+  inputFilters: AdvancedInputFilter[] = []
+  requiresEmailVerification: boolean
+  constructor (
+    protected route: ActivatedRoute,
+    protected router: Router,
+    private server: ServerService,
+    private notifier: Notifier,
+    private markdownRenderer: MarkdownService,
+    private adminRegistrationService: AdminRegistrationService
+  ) {
+    super()
+    this.registrationActions = [
+      [
+        {
+          label: $localize`Accept this registration`,
+          handler: registration => this.openRegistrationRequestProcessModal(registration, 'accept'),
+          isDisplayed: registration => registration.state.id === UserRegistrationState.PENDING
+        },
+        {
+          label: $localize`Reject this registration`,
+          handler: registration => this.openRegistrationRequestProcessModal(registration, 'reject'),
+          isDisplayed: registration => registration.state.id === UserRegistrationState.PENDING
+        },
+        {
+          label: $localize`Remove this registration request`,
+          handler: registration => this.removeRegistration(registration),
+          isDisplayed: registration => registration.state.id !== UserRegistrationState.PENDING
+        }
+      ]
+    ]
+  }
+  ngOnInit () {
+    this.initialize()
+    this.server.getConfig()
+      .subscribe(config => {
+        this.requiresEmailVerification = config.signup.requiresEmailVerification
+      })
+  }
+  getIdentifier () {
+    return 'RegistrationListComponent'
+  }
+  isRegistrationAccepted (registration: UserRegistration) {
+    return registration.state.id === UserRegistrationState.ACCEPTED
+  }
+  isRegistrationRejected (registration: UserRegistration) {
+    return registration.state.id === UserRegistrationState.REJECTED
+  }
+  onRegistrationProcessed () {
+    this.reloadData()
+  }
+  protected reloadData () {
+    this.adminRegistrationService.listRegistrations({
+      pagination: this.pagination,
+      sort: this.sort,
+      search: this.search
+    }).subscribe({
+      next: async resultList => {
+        this.totalRecords = resultList.total
+        this.registrations = resultList.data
+        for (const registration of this.registrations) {
+          registration.registrationReasonHTML = await this.toHtml(registration.registrationReason)
+          registration.moderationResponseHTML = await this.toHtml(registration.moderationResponse)
+        }
+      },
+      error: err => this.notifier.error(err.message)
+    })
+  }
+  private openRegistrationRequestProcessModal (registration: UserRegistration, mode: 'accept' | 'reject') {
+    this.processRegistrationModal.openModal(registration, mode)
+  }
+  private removeRegistration (registration: UserRegistration) {
+    this.adminRegistrationService.removeRegistration(registration)
+      .subscribe({
+        next: () => {
+          this.notifier.success($localize`Registration request deleted.`)
+          this.reloadData()
+        },
+        error: err => this.notifier.error(err.message)
+      })
+  }
+  private toHtml (text: string) {
+    return this.markdownRenderer.textMarkdownToHTML({ markdown: text })
+  }
+}
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.html b/client/src/app/+admin/overview/users/user-list/user-list.component.html
index a96ce561c..5e5ac368c 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.html
@@ -95,7 +95,7 @@
          <div class="chip two-lines">
            <my-actor-avatar [actor]="user?.account" actorType="account" size="32"></my-actor-avatar>
            <div>
-              <span class="user-table-primary-text">{{ user.account.displayName }}</span>
+              <span>{{ user.account.displayName }}</span>
              <span class="muted">{{ user.username }}</span>
            </div>
          </div>
@@ -110,23 +110,10 @@
        <span *ngIf="!user.blocked" class="pt-badge" [ngClass]="getRoleClass(user.role.id)">{{ user.role.label }}</span>
      </td>
-      <td *ngIf="isSelected('email')" [title]="user.email">
+      <td *ngIf="isSelected('email')">
-        <ng-container *ngIf="!requiresEmailVerification || user.blocked; else emailWithVerificationStatus">
+        <my-user-email-info [entry]="user" [requiresEmailVerification]="requiresEmailVerification"></my-user-email-info>
-          <a class="table-email" [href]="'mailto:' + user.email">{{ user.email }}</a>
-        </ng-container>
      </td>
-      <ng-template #emailWithVerificationStatus>
-        <td *ngIf="user.emailVerified === false; else emailVerifiedNotFalse" i18n-title title="User's email must be verified to login">
-          <em>? {{ user.email }}</em>
-        </td>
-        <ng-template #emailVerifiedNotFalse>
-          <td i18n-title title="User's email is verified / User can login without email verification">
-            &#x2713; {{ user.email }}
-          </td>
-        </ng-template>
-      </ng-template>
      <td *ngIf="isSelected('quota')">
        <div class="progress" i18n-title title="Total video quota">
          <div class="progress-bar" role="progressbar" [style]="{ width: getUserVideoQuotaPercentage(user) + '%' }"
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.scss b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
index 23e0d29ee..2a3b955d2 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
@@ -10,12 +10,6 @@ tr.banned > td {
  background-color: lighten($color: $red, $amount: 40) !important;
 }
-.table-email {
-  @include disable-default-a-behaviour;
-  color: pvar(--mainForegroundColor);
-}
 .banned-info {
  font-style: italic;
 }
@@ -37,10 +31,6 @@ my-global-icon {
  width: 18px;
 }
-.chip {
-  @include chip;
-}
 .progress {
  @include progressbar($small: true);
diff --git a/client/src/app/+admin/shared/shared-admin.module.ts b/client/src/app/+admin/shared/shared-admin.module.ts
index bef7d54ef..a5c300d12 100644
--- a/client/src/app/+admin/shared/shared-admin.module.ts
+++ b/client/src/app/+admin/shared/shared-admin.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core'
 import { SharedMainModule } from '../../shared/shared-main/shared-main.module'
+import { UserEmailInfoComponent } from './user-email-info.component'
 import { UserRealQuotaInfoComponent } from './user-real-quota-info.component'
 @NgModule({
@@ -8,11 +9,13 @@ import { UserRealQuotaInfoComponent } from './user-real-quota-info.component'
  ],
  declarations: [
-    UserRealQuotaInfoComponent
+    UserRealQuotaInfoComponent,
+    UserEmailInfoComponent
  ],
  exports: [
-    UserRealQuotaInfoComponent
+    UserRealQuotaInfoComponent,
+    UserEmailInfoComponent
  ],
  providers: []
diff --git a/client/src/app/+admin/shared/user-email-info.component.html b/client/src/app/+admin/shared/user-email-info.component.html
new file mode 100644
index 000000000..244240619
--- /dev/null
+++ b/client/src/app/+admin/shared/user-email-info.component.html
@@ -0,0 +1,13 @@
+<ng-container>
+  <a [href]="'mailto:' + entry.email" [title]="getTitle()">
+    <ng-container *ngIf="!requiresEmailVerification">
+      {{ entry.email }}
+    </ng-container>
+    <ng-container *ngIf="requiresEmailVerification">
+      <em *ngIf="!entry.emailVerified">? {{ entry.email }}</em>
+      <ng-container *ngIf="entry.emailVerified === true">&#x2713; {{ entry.email }}</ng-container>
+    </ng-container>
+  </a>
+</ng-container>
diff --git a/client/src/app/+admin/shared/user-email-info.component.scss b/client/src/app/+admin/shared/user-email-info.component.scss
new file mode 100644
index 000000000..d34947edd
--- /dev/null
+++ b/client/src/app/+admin/shared/user-email-info.component.scss
@@ -0,0 +1,10 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+a {
+  color: pvar(--mainForegroundColor);
+  &:hover {
+    text-decoration: underline;
+  }
+}
diff --git a/client/src/app/+admin/shared/user-email-info.component.ts b/client/src/app/+admin/shared/user-email-info.component.ts
new file mode 100644
index 000000000..e33948b60
--- /dev/null
+++ b/client/src/app/+admin/shared/user-email-info.component.ts
@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core'
+import { User, UserRegistration } from '@shared/models/users'
+@Component({
+  selector: 'my-user-email-info',
+  templateUrl: './user-email-info.component.html',
+  styleUrls: [ './user-email-info.component.scss' ]
+})
+export class UserEmailInfoComponent {
+  @Input() entry: User | UserRegistration
+  @Input() requiresEmailVerification: boolean
+  getTitle () {
+    if (this.entry.emailVerified) {
+      return $localize`User email has been verified`
+    }
+    return $localize`User email hasn't been verified`
+  }
+}
diff --git a/client/src/app/+admin/system/jobs/job.service.ts b/client/src/app/+admin/system/jobs/job.service.ts
index ef8ddd3b4..031e2bad8 100644
--- a/client/src/app/+admin/system/jobs/job.service.ts
+++ b/client/src/app/+admin/system/jobs/job.service.ts
@@ -19,7 +19,7 @@ export class JobService {
    private restExtractor: RestExtractor
  ) {}
-  getJobs (options: {
+  listJobs (options: {
    jobState?: JobStateClient
    jobType: JobTypeClient
    pagination: RestPagination
diff --git a/client/src/app/+admin/system/jobs/jobs.component.ts b/client/src/app/+admin/system/jobs/jobs.component.ts
index b8f3c3a68..12dc88a70 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.ts
+++ b/client/src/app/+admin/system/jobs/jobs.component.ts
@@ -125,7 +125,7 @@ export class JobsComponent extends RestTable implements OnInit {
    if (this.jobState === 'all') jobState = null
    this.jobsService
-      .getJobs({
+      .listJobs({
        jobState,
        jobType: this.jobType,
        pagination: this.pagination,
diff --git a/client/src/app/+login/login.component.ts b/client/src/app/+login/login.component.ts
index c1705807f..c03af38f2 100644
--- a/client/src/app/+login/login.component.ts
+++ b/client/src/app/+login/login.component.ts
@@ -1,3 +1,4 @@
+import { environment } from 'src/environments/environment'
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, Notifier, RedirectService, SessionStorageService, UserService } from '@app/core'
@@ -7,8 +8,8 @@ import { USER_OTP_TOKEN_VALIDATOR } from '@app/shared/form-validators/user-valid
 import { FormReactive, FormReactiveService, InputTextComponent } from '@app/shared/shared-forms'
 import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance'
 import { NgbAccordion, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
-import { PluginsManager } from '@root-helpers/plugins-manager'
+import { getExternalAuthHref } from '@shared/core-utils'
-import { RegisteredExternalAuthConfig, ServerConfig } from '@shared/models'
+import { RegisteredExternalAuthConfig, ServerConfig, ServerErrorCode } from '@shared/models'
 @Component({
  selector: 'my-login',
@@ -119,7 +120,7 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
  }
  getAuthHref (auth: RegisteredExternalAuthConfig) {
-    return PluginsManager.getExternalAuthHref(auth)
+    return getExternalAuthHref(environment.apiUrl, auth)
  }
  login () {
@@ -196,6 +197,8 @@ The link will expire within 1 hour.`
  }
  private handleError (err: any) {
+    console.log(err)
    if (this.authService.isOTPMissingError(err)) {
      this.otpStep = true
@@ -207,8 +210,26 @@ The link will expire within 1 hour.`
      return
    }
-    if (err.message.indexOf('credentials are invalid') !== -1) this.error = $localize`Incorrect username or password.`
+    if (err.message.includes('credentials are invalid')) {
-    else if (err.message.indexOf('blocked') !== -1) this.error = $localize`Your account is blocked.`
+      this.error = $localize`Incorrect username or password.`
-    else this.error = err.message
+      return
+    }
+    if (err.message.includes('blocked')) {
+      this.error = $localize`Your account is blocked.`
+      return
+    }
+    if (err.body?.code === ServerErrorCode.ACCOUNT_WAITING_FOR_APPROVAL) {
+      this.error = $localize`This account is awaiting approval by moderators.`
+      return
+    }
+    if (err.body?.code === ServerErrorCode.ACCOUNT_APPROVAL_REJECTED) {
+      this.error = $localize`Registration approval has been rejected for this account.`
+      return
+    }
+    this.error = err.message
  }
 }
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
index a8450ff1b..98bed226d 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.scss
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
@@ -2,10 +2,6 @@
 @use '_miniature' as *;
 @use '_mixins' as *;
-.chip {
-  @include chip;
-}
 .video-table-video {
  display: inline-flex;
diff --git a/client/src/app/+signup/+register/register.component.html b/client/src/app/+signup/+register/register.component.html
index bafb96a49..86763e801 100644
--- a/client/src/app/+signup/+register/register.component.html
+++ b/client/src/app/+signup/+register/register.component.html
@@ -5,29 +5,34 @@
  </div>
  <ng-container *ngIf="!signupDisabled">
-    <h1 i18n class="title-page-v2">
+    <h1 class="title-page-v2">
      <strong class="underline-orange">{{ instanceName }}</strong>
      >
-      Create an account
+      <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
    </h1>
    <div class="register-content">
      <my-custom-stepper linear>
        <cdk-step i18n-label label="About" [editable]="!signupSuccess">
-          <my-signup-step-title mascotImageName="about" i18n>
+          <my-signup-step-title mascotImageName="about">
-            <strong>Create an account</strong>
+            <strong>
-            <div>on {{ instanceName }}</div>
+              <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
+            </strong>
+            <div i18n>on {{ instanceName }}</div>
          </my-signup-step-title>
-          <my-register-step-about [videoUploadDisabled]="videoUploadDisabled"></my-register-step-about>
+          <my-register-step-about [requiresApproval]="requiresApproval" [videoUploadDisabled]="videoUploadDisabled"></my-register-step-about>
          <div class="step-buttons">
            <a i18n class="skip-step underline-orange" routerLink="/login">
              <strong>I already have an account</strong>, I log in
            </a>
-            <button i18n cdkStepperNext>Create an account</button>
+            <button cdkStepperNext>
+              <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
+            </button>
          </div>
        </cdk-step>
@@ -44,8 +49,8 @@
          ></my-instance-about-accordion>
          <my-register-step-terms
-            [hasCodeOfConduct]="!!aboutHtml.codeOfConduct"
+            [hasCodeOfConduct]="!!aboutHtml.codeOfConduct" [minimumAge]="minimumAge" [instanceName]="instanceName"
-            [minimumAge]="minimumAge"
+            [requiresApproval]="requiresApproval"
            (formBuilt)="onTermsFormBuilt($event)" (termsClick)="onTermsClick()" (codeOfConductClick)="onCodeOfConductClick()"
          ></my-register-step-terms>
@@ -94,14 +99,15 @@
              <div class="skip-step-description" i18n>You will be able to create a channel later</div>
            </div>
-            <button cdkStepperNext [disabled]="!formStepChannel || !formStepChannel.valid || hasSameChannelAndAccountNames()" (click)="signup()" i18n>
+            <button cdkStepperNext [disabled]="!formStepChannel || !formStepChannel.valid || hasSameChannelAndAccountNames()" (click)="signup()">
-              Create my account
+              <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
            </button>
          </div>
        </cdk-step>
        <cdk-step #lastStep i18n-label label="Done!" [editable]="false">
-          <div *ngIf="!signupSuccess && !signupError" class="done-loader">
+          <!-- Account creation can be a little bit long so display a loader  -->
+          <div *ngIf="!requiresApproval && !signupSuccess && !signupError" class="done-loader">
            <my-loader [loading]="true"></my-loader>
            <div i18n>PeerTube is creating your account...</div>
@@ -109,7 +115,10 @@
          <div *ngIf="signupError" class="alert alert-danger">{{ signupError }}</div>
-          <my-signup-success *ngIf="signupSuccess" [requiresEmailVerification]="requiresEmailVerification"></my-signup-success>
+          <my-signup-success-before-email
+            *ngIf="signupSuccess"
+            [requiresEmailVerification]="requiresEmailVerification" [requiresApproval]="requiresApproval" [instanceName]="instanceName"
+          ></my-signup-success-before-email>
          <div *ngIf="signupError" class="steps-button">
            <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
diff --git a/client/src/app/+signup/+register/register.component.ts b/client/src/app/+signup/+register/register.component.ts
index 958770ebf..9259d902c 100644
--- a/client/src/app/+signup/+register/register.component.ts
+++ b/client/src/app/+signup/+register/register.component.ts
@@ -5,10 +5,10 @@ import { ActivatedRoute } from '@angular/router'
 import { AuthService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance'
-import { UserSignupService } from '@app/shared/shared-users'
 import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap'
 import { UserRegister } from '@shared/models'
 import { ServerConfig } from '@shared/models/server'
+import { SignupService } from '../shared/signup.service'
 @Component({
  selector: 'my-register',
@@ -53,7 +53,7 @@ export class RegisterComponent implements OnInit {
  constructor (
    private route: ActivatedRoute,
    private authService: AuthService,
-    private userSignupService: UserSignupService,
+    private signupService: SignupService,
    private hooks: HooksService
  ) { }
@@ -61,6 +61,10 @@ export class RegisterComponent implements OnInit {
    return this.serverConfig.signup.requiresEmailVerification
  }
+  get requiresApproval () {
+    return this.serverConfig.signup.requiresApproval
+  }
  get minimumAge () {
    return this.serverConfig.signup.minimumAge
  }
@@ -132,42 +136,49 @@ export class RegisterComponent implements OnInit {
  skipChannelCreation () {
    this.formStepChannel.reset()
    this.lastStep.select()
    this.signup()
  }
  async signup () {
    this.signupError = undefined
-    const body: UserRegister = await this.hooks.wrapObject(
+    const termsForm = this.formStepTerms.value
+    const userForm = this.formStepUser.value
+    const channelForm = this.formStepChannel?.value
+    const channel = this.formStepChannel?.value?.name
+      ? { name: channelForm?.name, displayName: channelForm?.displayName }
+      : undefined
+    const body = await this.hooks.wrapObject(
      {
-        ...this.formStepUser.value,
+        username: userForm.username,
+        password: userForm.password,
+        email: userForm.email,
+        displayName: userForm.displayName,
+        registrationReason: termsForm.registrationReason,
-        channel: this.formStepChannel?.value?.name
+        channel
-          ? this.formStepChannel.value
-          : undefined
      },
      'signup',
      'filter:api.signup.registration.create.params'
    )
-    this.userSignupService.signup(body).subscribe({
+    const obs = this.requiresApproval
+      ? this.signupService.requestSignup(body)
+      : this.signupService.directSignup(body)
+    obs.subscribe({
      next: () => {
-        if (this.requiresEmailVerification) {
+        if (this.requiresEmailVerification || this.requiresApproval) {
          this.signupSuccess = true
          return
        }
        // Auto login
-        this.authService.login({ username: body.username, password: body.password })
+        this.autoLogin(body)
-          .subscribe({
-            next: () => {
-              this.signupSuccess = true
-            },
-            error: err => {
-              this.signupError = err.message
-            }
-          })
      },
      error: err => {
@@ -175,4 +186,17 @@ export class RegisterComponent implements OnInit {
      }
    })
  }
+  private autoLogin (body: UserRegister) {
+    this.authService.login({ username: body.username, password: body.password })
+      .subscribe({
+        next: () => {
+          this.signupSuccess = true
+        },
+        error: err => {
+          this.signupError = err.message
+        }
+      })
+  }
 }
diff --git a/client/src/app/+signup/+register/shared/index.ts b/client/src/app/+signup/+register/shared/index.ts
new file mode 100644
index 000000000..affb54bf4
--- /dev/null
+++ b/client/src/app/+signup/+register/shared/index.ts
@@ -0,0 +1 @@
+export * from './register-validators'
diff --git a/client/src/app/+signup/+register/shared/register-validators.ts b/client/src/app/+signup/+register/shared/register-validators.ts
new file mode 100644
index 000000000..f14803b68
--- /dev/null
+++ b/client/src/app/+signup/+register/shared/register-validators.ts
@@ -0,0 +1,18 @@
+import { Validators } from '@angular/forms'
+import { BuildFormValidator } from '@app/shared/form-validators'
+export const REGISTER_TERMS_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.requiredTrue ],
+  MESSAGES: {
+    required: $localize`You must agree with the instance terms in order to register on it.`
+  }
+}
+export const REGISTER_REASON_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
+  MESSAGES: {
+    required: $localize`Registration reason is required.`,
+    minlength: $localize`Registration reason must be at least 2 characters long.`,
+    maxlength: $localize`Registration reason cannot be more than 3000 characters long.`
+  }
+}
diff --git a/client/src/app/+signup/+register/steps/register-step-about.component.html b/client/src/app/+signup/+register/steps/register-step-about.component.html
index 769fe3127..580e8a92c 100644
--- a/client/src/app/+signup/+register/steps/register-step-about.component.html
+++ b/client/src/app/+signup/+register/steps/register-step-about.component.html
@@ -13,6 +13,10 @@
    <li i18n>Have access to your <strong>watch history</strong></li>
    <li *ngIf="!videoUploadDisabled" i18n>Create your channel to <strong>publish videos</strong></li>
  </ul>
+  <p *ngIf="requiresApproval" i18n>
+    Moderators of {{ instanceName }} will have to approve your registration request once you have finished to fill the form.
+  </p>
 </div>
 <div>
diff --git a/client/src/app/+signup/+register/steps/register-step-about.component.ts b/client/src/app/+signup/+register/steps/register-step-about.component.ts
index 9a0941016..b176ffa59 100644
--- a/client/src/app/+signup/+register/steps/register-step-about.component.ts
+++ b/client/src/app/+signup/+register/steps/register-step-about.component.ts
@@ -7,6 +7,7 @@ import { ServerService } from '@app/core'
  styleUrls: [ './register-step-about.component.scss' ]
 })
 export class RegisterStepAboutComponent {
+  @Input() requiresApproval: boolean
  @Input() videoUploadDisabled: boolean
  constructor (private serverService: ServerService) {
diff --git a/client/src/app/+signup/+register/steps/register-step-channel.component.ts b/client/src/app/+signup/+register/steps/register-step-channel.component.ts
index df92c5145..478ca0177 100644
--- a/client/src/app/+signup/+register/steps/register-step-channel.component.ts
+++ b/client/src/app/+signup/+register/steps/register-step-channel.component.ts
@@ -2,9 +2,9 @@ import { concat, of } from 'rxjs'
 import { pairwise } from 'rxjs/operators'
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { FormGroup } from '@angular/forms'
+import { SignupService } from '@app/+signup/shared/signup.service'
 import { VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR, VIDEO_CHANNEL_NAME_VALIDATOR } from '@app/shared/form-validators/video-channel-validators'
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
-import { UserSignupService } from '@app/shared/shared-users'
 @Component({
  selector: 'my-register-step-channel',
@@ -20,7 +20,7 @@ export class RegisterStepChannelComponent extends FormReactive implements OnInit
  constructor (
    protected formReactiveService: FormReactiveService,
-    private userSignupService: UserSignupService
+    private signupService: SignupService
  ) {
    super()
  }
@@ -51,7 +51,7 @@ export class RegisterStepChannelComponent extends FormReactive implements OnInit
  private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) {
    const name = this.form.value['name'] || ''
-    const newName = this.userSignupService.getNewUsername(oldDisplayName, newDisplayName, name)
+    const newName = this.signupService.getNewUsername(oldDisplayName, newDisplayName, name)
    this.form.patchValue({ name: newName })
  }
 }
diff --git a/client/src/app/+signup/+register/steps/register-step-terms.component.html b/client/src/app/+signup/+register/steps/register-step-terms.component.html
index cbfb32518..1d753a3f2 100644
--- a/client/src/app/+signup/+register/steps/register-step-terms.component.html
+++ b/client/src/app/+signup/+register/steps/register-step-terms.component.html
@@ -1,4 +1,16 @@
 <form role="form" [formGroup]="form">
+  <div *ngIf="requiresApproval" class="form-group">
+    <label i18n for="registrationReason">Why do you want to join {{ instanceName }}?</label>
+    <textarea
+      id="registrationReason" formControlName="registrationReason" class="form-control" rows="4"
+      [ngClass]="{ 'input-error': formErrors['registrationReason'] }"
+    ></textarea>
+    <div *ngIf="formErrors.registrationReason" class="form-error">{{ formErrors.registrationReason }}</div>
+  </div>
  <div class="form-group">
    <my-peertube-checkbox inputName="terms" formControlName="terms">
      <ng-template ptTemplate="label">
@@ -6,7 +18,7 @@
          I am at least {{ minimumAge }} years old and agree
          to the <a class="link-orange" (click)="onTermsClick($event)" href='#'>Terms</a>
          <ng-container *ngIf="hasCodeOfConduct"> and to the <a class="link-orange" (click)="onCodeOfConductClick($event)" href='#'>Code of Conduct</a></ng-container>
-          of this instance
+          of {{ instanceName }}
        </ng-container>
      </ng-template>
    </my-peertube-checkbox>
diff --git a/client/src/app/+signup/+register/steps/register-step-terms.component.ts b/client/src/app/+signup/+register/steps/register-step-terms.component.ts
index 2df963b30..1b1fb49ee 100644
--- a/client/src/app/+signup/+register/steps/register-step-terms.component.ts
+++ b/client/src/app/+signup/+register/steps/register-step-terms.component.ts
@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { FormGroup } from '@angular/forms'
-import { USER_TERMS_VALIDATOR } from '@app/shared/form-validators/user-validators'
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
+import { REGISTER_REASON_VALIDATOR, REGISTER_TERMS_VALIDATOR } from '../shared'
 @Component({
  selector: 'my-register-step-terms',
@@ -10,7 +10,9 @@ import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 })
 export class RegisterStepTermsComponent extends FormReactive implements OnInit {
  @Input() hasCodeOfConduct = false
+  @Input() requiresApproval: boolean
  @Input() minimumAge = 16
+  @Input() instanceName: string
  @Output() formBuilt = new EventEmitter<FormGroup>()
  @Output() termsClick = new EventEmitter<void>()
@@ -28,7 +30,11 @@ export class RegisterStepTermsComponent extends FormReactive implements OnInit {
  ngOnInit () {
    this.buildForm({
-      terms: USER_TERMS_VALIDATOR
+      terms: REGISTER_TERMS_VALIDATOR,
+      registrationReason: this.requiresApproval
+        ? REGISTER_REASON_VALIDATOR
+        : null
    })
    setTimeout(() => this.formBuilt.emit(this.form))
diff --git a/client/src/app/+signup/+register/steps/register-step-user.component.ts b/client/src/app/+signup/+register/steps/register-step-user.component.ts
index 822f8f5c5..0a5d2e437 100644
--- a/client/src/app/+signup/+register/steps/register-step-user.component.ts
+++ b/client/src/app/+signup/+register/steps/register-step-user.component.ts
@@ -2,6 +2,7 @@ import { concat, of } from 'rxjs'
 import { pairwise } from 'rxjs/operators'
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { FormGroup } from '@angular/forms'
+import { SignupService } from '@app/+signup/shared/signup.service'
 import {
  USER_DISPLAY_NAME_REQUIRED_VALIDATOR,
  USER_EMAIL_VALIDATOR,
@@ -9,7 +10,6 @@ import {
  USER_USERNAME_VALIDATOR
 } from '@app/shared/form-validators/user-validators'
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
-import { UserSignupService } from '@app/shared/shared-users'
 @Component({
  selector: 'my-register-step-user',
@@ -24,7 +24,7 @@ export class RegisterStepUserComponent extends FormReactive implements OnInit {
  constructor (
    protected formReactiveService: FormReactiveService,
-    private userSignupService: UserSignupService
+    private signupService: SignupService
  ) {
    super()
  }
@@ -57,7 +57,7 @@ export class RegisterStepUserComponent extends FormReactive implements OnInit {
  private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) {
    const username = this.form.value['username'] || ''
-    const newUsername = this.userSignupService.getNewUsername(oldDisplayName, newDisplayName, username)
+    const newUsername = this.signupService.getNewUsername(oldDisplayName, newDisplayName, username)
    this.form.patchValue({ username: newUsername })
  }
 }
diff --git a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts
index 06905f678..75b599e0e 100644
--- a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts
+++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core'
+import { SignupService } from '@app/+signup/shared/signup.service'
 import { Notifier, RedirectService, ServerService } from '@app/core'
 import { USER_EMAIL_VALIDATOR } from '@app/shared/form-validators/user-validators'
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
-import { UserSignupService } from '@app/shared/shared-users'
 @Component({
  selector: 'my-verify-account-ask-send-email',
@@ -15,7 +15,7 @@ export class VerifyAccountAskSendEmailComponent extends FormReactive implements
  constructor (
    protected formReactiveService: FormReactiveService,
-    private userSignupService: UserSignupService,
+    private signupService: SignupService,
    private serverService: ServerService,
    private notifier: Notifier,
    private redirectService: RedirectService
@@ -34,7 +34,7 @@ export class VerifyAccountAskSendEmailComponent extends FormReactive implements
  askSendVerifyEmail () {
    const email = this.form.value['verify-email-email']
-    this.userSignupService.askSendVerifyEmail(email)
+    this.signupService.askSendVerifyEmail(email)
      .subscribe({
        next: () => {
          this.notifier.success($localize`An email with verification link will be sent to ${email}.`)
diff --git a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html
index 122f3c28c..8c8b1098e 100644
--- a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html
+++ b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html
@@ -1,14 +1,19 @@
-<div class="margin-content">
+<div *ngIf="loaded" class="margin-content">
-  <h1 i18n class="title-page">Verify account email confirmation</h1>
+  <h1 i18n class="title-page">Verify email</h1>
-  <my-signup-success i18n *ngIf="!isPendingEmail && success" [requiresEmailVerification]="false">
+  <my-signup-success-after-email
-  </my-signup-success>
+    *ngIf="displaySignupSuccess()"
+    [requiresApproval]="isRegistrationRequest() && requiresApproval"
+  >
+  </my-signup-success-after-email>
-  <div i18n class="alert alert-success" *ngIf="isPendingEmail && success">Email updated.</div>
+  <div i18n class="alert alert-success" *ngIf="!isRegistrationRequest() && isPendingEmail && success">Email updated.</div>
  <div class="alert alert-danger" *ngIf="failed">
    <span i18n>An error occurred.</span>
-    <a i18n class="ms-1 link-orange" routerLink="/verify-account/ask-send-email" [queryParams]="{ isPendingEmail: isPendingEmail }">Request new verification email</a>
+    <a i18n class="ms-1 link-orange" routerLink="/verify-account/ask-send-email">
+      Request a new verification email
+    </a>
  </div>
 </div>
diff --git a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts
index 88efce4a1..faf663391 100644
--- a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts
+++ b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { AuthService, Notifier } from '@app/core'
+import { SignupService } from '@app/+signup/shared/signup.service'
-import { UserSignupService } from '@app/shared/shared-users'
+import { AuthService, Notifier, ServerService } from '@app/core'
 @Component({
  selector: 'my-verify-account-email',
@@ -13,32 +13,82 @@ export class VerifyAccountEmailComponent implements OnInit {
  failed = false
  isPendingEmail = false
+  requiresApproval: boolean
+  loaded = false
  private userId: number
+  private registrationId: number
  private verificationString: string
  constructor (
-    private userSignupService: UserSignupService,
+    private signupService: SignupService,
+    private server: ServerService,
    private authService: AuthService,
    private notifier: Notifier,
    private route: ActivatedRoute
  ) {
  }
+  get instanceName () {
+    return this.server.getHTMLConfig().instance.name
+  }
  ngOnInit () {
    const queryParams = this.route.snapshot.queryParams
+    this.server.getConfig().subscribe(config => {
+      this.requiresApproval = config.signup.requiresApproval
+      this.loaded = true
+    })
    this.userId = queryParams['userId']
+    this.registrationId = queryParams['registrationId']
    this.verificationString = queryParams['verificationString']
    this.isPendingEmail = queryParams['isPendingEmail'] === 'true'
-    if (!this.userId || !this.verificationString) {
+    if (!this.verificationString) {
-      this.notifier.error($localize`Unable to find user id or verification string.`)
+      this.notifier.error($localize`Unable to find verification string in URL query.`)
-    } else {
+      return
-      this.verifyEmail()
+    }
+    if (!this.userId && !this.registrationId) {
+      this.notifier.error($localize`Unable to find user id or registration id in URL query.`)
+      return
    }
+    this.verifyEmail()
+  }
+  isRegistrationRequest () {
+    return !!this.registrationId
+  }
+  displaySignupSuccess () {
+    if (!this.success) return false
+    if (!this.isRegistrationRequest() && this.isPendingEmail) return false
+    return true
  }
  verifyEmail () {
-    this.userSignupService.verifyEmail(this.userId, this.verificationString, this.isPendingEmail)
+    if (this.isRegistrationRequest()) {
+      return this.verifyRegistrationEmail()
+    }
+    return this.verifyUserEmail()
+  }
+  private verifyUserEmail () {
+    const options = {
+      userId: this.userId,
+      verificationString: this.verificationString,
+      isPendingEmail: this.isPendingEmail
+    }
+    this.signupService.verifyUserEmail(options)
      .subscribe({
        next: () => {
          if (this.authService.isLoggedIn()) {
@@ -55,4 +105,24 @@ export class VerifyAccountEmailComponent implements OnInit {
        }
      })
  }
+  private verifyRegistrationEmail () {
+    const options = {
+      registrationId: this.registrationId,
+      verificationString: this.verificationString
+    }
+    this.signupService.verifyRegistrationEmail(options)
+      .subscribe({
+        next: () => {
+          this.success = true
+        },
+        error: err => {
+          this.failed = true
+          this.notifier.error(err.message)
+        }
+      })
+  }
 }
diff --git a/client/src/app/+signup/shared/shared-signup.module.ts b/client/src/app/+signup/shared/shared-signup.module.ts
index 0aa08f3e2..0600f0af8 100644
--- a/client/src/app/+signup/shared/shared-signup.module.ts
+++ b/client/src/app/+signup/shared/shared-signup.module.ts
@@ -5,7 +5,9 @@ import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedUsersModule } from '@app/shared/shared-users'
 import { SignupMascotComponent } from './signup-mascot.component'
 import { SignupStepTitleComponent } from './signup-step-title.component'
-import { SignupSuccessComponent } from './signup-success.component'
+import { SignupSuccessBeforeEmailComponent } from './signup-success-before-email.component'
+import { SignupSuccessAfterEmailComponent } from './signup-success-after-email.component'
+import { SignupService } from './signup.service'
 @NgModule({
  imports: [
@@ -16,7 +18,8 @@ import { SignupSuccessComponent } from './signup-success.component'
  ],
  declarations: [
-    SignupSuccessComponent,
+    SignupSuccessBeforeEmailComponent,
+    SignupSuccessAfterEmailComponent,
    SignupStepTitleComponent,
    SignupMascotComponent
  ],
@@ -26,12 +29,14 @@ import { SignupSuccessComponent } from './signup-success.component'
    SharedFormModule,
    SharedGlobalIconModule,
-    SignupSuccessComponent,
+    SignupSuccessBeforeEmailComponent,
+    SignupSuccessAfterEmailComponent,
    SignupStepTitleComponent,
    SignupMascotComponent
  ],
  providers: [
+    SignupService
  ]
 })
 export class SharedSignupModule { }
diff --git a/client/src/app/+signup/shared/signup-success-after-email.component.html b/client/src/app/+signup/shared/signup-success-after-email.component.html
new file mode 100644
index 000000000..1c3536ada
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-success-after-email.component.html
@@ -0,0 +1,21 @@
+<my-signup-step-title mascotImageName="success">
+  <strong i18n>Email verified!</strong>
+</my-signup-step-title>
+<div class="alert pt-alert-primary">
+  <ng-container *ngIf="requiresApproval">
+    <p i18n>Your email has been verified and your account request has been sent!</p>
+    <p i18n>
+      A moderator will check your registration request soon and you'll receive an email when it will be accepted or rejected.
+    </p>
+  </ng-container>
+  <ng-container *ngIf="!requiresApproval">
+    <p i18n>Your email has been verified and your account has been created!</p>
+    <p i18n>
+      If you need help to use PeerTube, you can have a look at the <a class="link-orange" href="https://docs.joinpeertube.org/use-setup-account" target="_blank" rel="noopener noreferrer">documentation</a>.
+    </p>
+  </ng-container>
+</div>
diff --git a/client/src/app/+signup/shared/signup-success-after-email.component.ts b/client/src/app/+signup/shared/signup-success-after-email.component.ts
new file mode 100644
index 000000000..3d72fdae9
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-success-after-email.component.ts
@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core'
+@Component({
+  selector: 'my-signup-success-after-email',
+  templateUrl: './signup-success-after-email.component.html',
+  styleUrls: [ './signup-success.component.scss' ]
+})
+export class SignupSuccessAfterEmailComponent {
+  @Input() requiresApproval: boolean
+}
diff --git a/client/src/app/+signup/shared/signup-success-before-email.component.html b/client/src/app/+signup/shared/signup-success-before-email.component.html
new file mode 100644
index 000000000..b9668ee82
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-success-before-email.component.html
@@ -0,0 +1,35 @@
+<my-signup-step-title mascotImageName="success">
+  <ng-container *ngIf="requiresApproval">
+    <strong i18n>Account request sent</strong>
+  </ng-container>
+  <ng-container *ngIf="!requiresApproval" i18n>
+    <strong>Welcome</strong>
+    <div>on {{ instanceName }}</div>
+  </ng-container>
+</my-signup-step-title>
+<div class="alert pt-alert-primary">
+  <p *ngIf="requiresApproval" i18n>Your account request has been sent!</p>
+  <p *ngIf="!requiresApproval" i18n>Your account has been created!</p>
+  <ng-container *ngIf="requiresEmailVerification">
+    <p i18n *ngIf="requiresApproval">
+      <strong>Check your emails</strong> to validate your account and complete your registration request.
+    </p>
+    <p i18n *ngIf="!requiresApproval">
+      <strong>Check your emails</strong> to validate your account and complete your registration.
+    </p>
+  </ng-container>
+  <ng-container *ngIf="!requiresEmailVerification">
+    <p i18n *ngIf="requiresApproval">
+      A moderator will check your registration request soon and you'll receive an email when it will be accepted or rejected.
+    </p>
+    <p *ngIf="!requiresApproval" i18n>
+      If you need help to use PeerTube, you can have a look at the <a class="link-orange" href="https://docs.joinpeertube.org/use-setup-account" target="_blank" rel="noopener noreferrer">documentation</a>.
+    </p>
+  </ng-container>
+</div>
diff --git a/client/src/app/+signup/shared/signup-success-before-email.component.ts b/client/src/app/+signup/shared/signup-success-before-email.component.ts
new file mode 100644
index 000000000..d72462340
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-success-before-email.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core'
+@Component({
+  selector: 'my-signup-success-before-email',
+  templateUrl: './signup-success-before-email.component.html',
+  styleUrls: [ './signup-success.component.scss' ]
+})
+export class SignupSuccessBeforeEmailComponent {
+  @Input() requiresApproval: boolean
+  @Input() requiresEmailVerification: boolean
+  @Input() instanceName: string
+}
diff --git a/client/src/app/+signup/shared/signup-success.component.html b/client/src/app/+signup/shared/signup-success.component.html
deleted file mode 100644
index c14889c72..000000000
--- a/client/src/app/+signup/shared/signup-success.component.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<my-signup-step-title mascotImageName="success" i18n>
-  <strong>Welcome</strong>
-  <div>on {{ instanceName }}</div>
-</my-signup-step-title>
-<div class="alert pt-alert-primary">
-  <p i18n>Your account has been created!</p>
-  <p i18n *ngIf="requiresEmailVerification">
-    <strong>Check your emails</strong> to validate your account and complete your inscription.
-  </p>
-  <ng-container *ngIf="!requiresEmailVerification">
-    <p i18n>
-      If you need help to use PeerTube, you can have a look at the <a class="link-orange" href="https://docs.joinpeertube.org/use-setup-account" target="_blank" rel="noopener noreferrer">documentation</a>.
-    </p>
-    <p i18n>
-      To help moderators and other users to know <strong>who you are</strong>, don't forget to <a class="link-orange" routerLink="/my-account/settings">set up your account profile</a> by adding an <strong>avatar</strong> and a <strong>description</strong>.
-    </p>
-  </ng-container>
-</div>
diff --git a/client/src/app/+signup/shared/signup-success.component.ts b/client/src/app/+signup/shared/signup-success.component.ts
deleted file mode 100644
index a03f3819d..000000000
--- a/client/src/app/+signup/shared/signup-success.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Component, Input } from '@angular/core'
-import { ServerService } from '@app/core'
-@Component({
-  selector: 'my-signup-success',
-  templateUrl: './signup-success.component.html',
-  styleUrls: [ './signup-success.component.scss' ]
-})
-export class SignupSuccessComponent {
-  @Input() requiresEmailVerification: boolean
-  constructor (private serverService: ServerService) {
-  }
-  get instanceName () {
-    return this.serverService.getHTMLConfig().instance.name
-  }
-}
diff --git a/client/src/app/shared/shared-users/user-signup.service.ts b/client/src/app/+signup/shared/signup.service.ts
index 46fe34af1..f647298be 100644
--- a/client/src/app/shared/shared-users/user-signup.service.ts
+++ b/client/src/app/+signup/shared/signup.service.ts
@@ -2,17 +2,18 @@ import { catchError, tap } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { RestExtractor, UserService } from '@app/core'
-import { UserRegister } from '@shared/models'
+import { UserRegister, UserRegistrationRequest } from '@shared/models'
 @Injectable()
-export class UserSignupService {
+export class SignupService {
  constructor (
    private authHttp: HttpClient,
    private restExtractor: RestExtractor,
    private userService: UserService
  ) { }
-  signup (userCreate: UserRegister) {
+  directSignup (userCreate: UserRegister) {
    return this.authHttp.post(UserService.BASE_USERS_URL + 'register', userCreate)
               .pipe(
                 tap(() => this.userService.setSignupInThisSession(true)),
@@ -20,8 +21,21 @@ export class UserSignupService {
               )
  }
-  verifyEmail (userId: number, verificationString: string, isPendingEmail: boolean) {
+  requestSignup (userCreate: UserRegistrationRequest) {
-    const url = `${UserService.BASE_USERS_URL}/${userId}/verify-email`
+    return this.authHttp.post(UserService.BASE_USERS_URL + 'registrations/request', userCreate)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+  // ---------------------------------------------------------------------------
+  verifyUserEmail (options: {
+    userId: number
+    verificationString: string
+    isPendingEmail: boolean
+  }) {
+    const { userId, verificationString, isPendingEmail } = options
+    const url = `${UserService.BASE_USERS_URL}${userId}/verify-email`
    const body = {
      verificationString,
      isPendingEmail
@@ -31,13 +45,28 @@ export class UserSignupService {
               .pipe(catchError(res => this.restExtractor.handleError(res)))
  }
+  verifyRegistrationEmail (options: {
+    registrationId: number
+    verificationString: string
+  }) {
+    const { registrationId, verificationString } = options
+    const url = `${UserService.BASE_USERS_URL}registrations/${registrationId}/verify-email`
+    const body = { verificationString }
+    return this.authHttp.post(url, body)
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
  askSendVerifyEmail (email: string) {
-    const url = UserService.BASE_USERS_URL + '/ask-send-verify-email'
+    const url = UserService.BASE_USERS_URL + 'ask-send-verify-email'
    return this.authHttp.post(url, { email })
               .pipe(catchError(err => this.restExtractor.handleError(err)))
  }
+  // ---------------------------------------------------------------------------
  getNewUsername (oldDisplayName: string, newDisplayName: string, currentUsername: string) {
    // Don't update display name, the user seems to have changed it
    if (this.displayNameToUsername(oldDisplayName) !== currentUsername) return currentUsername
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 94853423b..84548de97 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -133,8 +133,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    this.loadRouteParams()
    this.loadRouteQuery()
-    this.initHotkeys()
    this.theaterEnabled = getStoredTheater()
    this.hooks.runAction('action:video-watch.init', 'video-watch')
@@ -295,6 +293,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
          subtitle: queryParams.subtitle,
          playerMode: queryParams.mode,
+          playbackRate: queryParams.playbackRate,
          peertubeLink: false
        }
@@ -406,6 +405,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
      if (res === false) return this.location.back()
    }
+    this.buildHotkeysHelp(video)
    this.buildPlayer({ urlOptions, loggedInOrAnonymousUser, forceAutoplay })
      .catch(err => logger.error('Cannot build the player', err))
@@ -657,6 +658,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
        muted: urlOptions.muted,
        loop: urlOptions.loop,
        subtitle: urlOptions.subtitle,
+        playbackRate: urlOptions.playbackRate,
        peertubeLink: urlOptions.peertubeLink,
@@ -785,33 +787,43 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    this.video.viewers = newViewers
  }
-  private initHotkeys () {
+  private buildHotkeysHelp (video: Video) {
+    if (this.hotkeys.length !== 0) {
+      this.hotkeysService.remove(this.hotkeys)
+    }
    this.hotkeys = [
      // These hotkeys are managed by the player
      new Hotkey('f', e => e, undefined, $localize`Enter/exit fullscreen`),
      new Hotkey('space', e => e, undefined, $localize`Play/Pause the video`),
      new Hotkey('m', e => e, undefined, $localize`Mute/unmute the video`),
-      new Hotkey('0-9', e => e, undefined, $localize`Skip to a percentage of the video: 0 is 0% and 9 is 90%`),
      new Hotkey('up', e => e, undefined, $localize`Increase the volume`),
      new Hotkey('down', e => e, undefined, $localize`Decrease the volume`),
-      new Hotkey('right', e => e, undefined, $localize`Seek the video forward`),
-      new Hotkey('left', e => e, undefined, $localize`Seek the video backward`),
-      new Hotkey('>', e => e, undefined, $localize`Increase playback rate`),
-      new Hotkey('<', e => e, undefined, $localize`Decrease playback rate`),
-      new Hotkey(',', e => e, undefined, $localize`Navigate in the video to the previous frame`),
-      new Hotkey('.', e => e, undefined, $localize`Navigate in the video to the next frame`),
      new Hotkey('t', e => {
        this.theaterEnabled = !this.theaterEnabled
        return false
      }, undefined, $localize`Toggle theater mode`)
    ]
+    if (!video.isLive) {
+      this.hotkeys = this.hotkeys.concat([
+        // These hotkeys are also managed by the player but only for VOD
+        new Hotkey('0-9', e => e, undefined, $localize`Skip to a percentage of the video: 0 is 0% and 9 is 90%`),
+        new Hotkey('right', e => e, undefined, $localize`Seek the video forward`),
+        new Hotkey('left', e => e, undefined, $localize`Seek the video backward`),
+        new Hotkey('>', e => e, undefined, $localize`Increase playback rate`),
+        new Hotkey('<', e => e, undefined, $localize`Decrease playback rate`),
+        new Hotkey(',', e => e, undefined, $localize`Navigate in the video to the previous frame`),
+        new Hotkey('.', e => e, undefined, $localize`Navigate in the video to the next frame`)
+      ])
+    }
    if (this.isUserLoggedIn()) {
      this.hotkeys = this.hotkeys.concat([
        new Hotkey('shift+s', () => {
diff --git a/client/src/app/+videos/video-list/videos-list-common-page.component.ts b/client/src/app/+videos/video-list/videos-list-common-page.component.ts
index c8fa8ef30..bafe30fd7 100644
--- a/client/src/app/+videos/video-list/videos-list-common-page.component.ts
+++ b/client/src/app/+videos/video-list/videos-list-common-page.component.ts
@@ -177,6 +177,9 @@ export class VideosListCommonPageComponent implements OnInit, OnDestroy, Disable
      case 'best':
        return '-hot'
+      case 'name':
+        return 'name'
      default:
        return '-' + algorithm as VideoSortField
    }
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index 4de28e51e..ed7eabb76 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -5,10 +5,11 @@ import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular
 import { Injectable } from '@angular/core'
 import { Router } from '@angular/router'
 import { Notifier } from '@app/core/notification/notifier.service'
-import { logger, OAuthUserTokens, objectToUrlEncoded, peertubeLocalStorage } from '@root-helpers/index'
+import { logger, OAuthUserTokens, objectToUrlEncoded, peertubeLocalStorage, PluginsManager } from '@root-helpers/index'
 import { HttpStatusCode, MyUser as UserServerModel, OAuthClientLocal, User, UserLogin, UserRefreshToken } from '@shared/models'
 import { environment } from '../../../environments/environment'
 import { RestExtractor } from '../rest/rest-extractor.service'
+import { ServerService } from '../server'
 import { AuthStatus } from './auth-status.model'
 import { AuthUser } from './auth-user.model'
@@ -44,6 +45,7 @@ export class AuthService {
  private refreshingTokenObservable: Observable<any>
  constructor (
+    private serverService: ServerService,
    private http: HttpClient,
    private notifier: Notifier,
    private hotkeysService: HotkeysService,
@@ -213,25 +215,28 @@ Ensure you have correctly configured PeerTube (config/ directory), in particular
    const headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
    this.refreshingTokenObservable = this.http.post<UserRefreshToken>(AuthService.BASE_TOKEN_URL, body, { headers })
-                                         .pipe(
+      .pipe(
-                                           map(res => this.handleRefreshToken(res)),
+        map(res => this.handleRefreshToken(res)),
-                                           tap(() => {
+        tap(() => {
-                                             this.refreshingTokenObservable = null
+          this.refreshingTokenObservable = null
-                                           }),
+        }),
-                                           catchError(err => {
+        catchError(err => {
-                                             this.refreshingTokenObservable = null
+          this.refreshingTokenObservable = null
-                                             logger.error(err)
+          logger.error(err)
-                                             logger.info('Cannot refresh token -> logout...')
+          logger.info('Cannot refresh token -> logout...')
-                                             this.logout()
+          this.logout()
-                                             this.router.navigate([ '/login' ])
+          const externalLoginUrl = PluginsManager.getDefaultLoginHref(environment.apiUrl, this.serverService.getHTMLConfig())
-                                             return observableThrowError(() => ({
+          if (externalLoginUrl) window.location.href = externalLoginUrl
-                                               error: $localize`You need to reconnect.`
+          else this.router.navigate([ '/login' ])
-                                             }))
-                                           }),
+          return observableThrowError(() => ({
-                                           share()
+            error: $localize`You need to reconnect.`
-                                         )
+          }))
+        }),
+        share()
+      )
    return this.refreshingTokenObservable
  }
diff --git a/client/src/app/core/renderer/markdown.service.ts b/client/src/app/core/renderer/markdown.service.ts
index a5fd72862..dd23a1b01 100644
--- a/client/src/app/core/renderer/markdown.service.ts
+++ b/client/src/app/core/renderer/markdown.service.ts
@@ -64,8 +64,8 @@ export class MarkdownService {
  textMarkdownToHTML (options: {
    markdown: string
-    withHtml?: boolean
+    withHtml?: boolean // default false
-    withEmoji?: boolean
+    withEmoji?: boolean // default false
  }) {
    const { markdown, withHtml = false, withEmoji = false } = options
@@ -76,8 +76,8 @@ export class MarkdownService {
  enhancedMarkdownToHTML (options: {
    markdown: string
-    withHtml?: boolean
+    withHtml?: boolean // default false
-    withEmoji?: boolean
+    withEmoji?: boolean // default false
  }) {
    const { markdown, withHtml = false, withEmoji = false } = options
@@ -99,6 +99,8 @@ export class MarkdownService {
    return this.render({ name: 'customPageMarkdownIt', markdown, withEmoji: true, additionalAllowedTags })
  }
+  // ---------------------------------------------------------------------------
  processVideoTimestamps (videoShortUUID: string, html: string) {
    return html.replace(/((\d{1,2}):)?(\d{1,2}):(\d{1,2})/g, function (str, _, h, m, s) {
      const t = (3600 * +(h || 0)) + (60 * +(m || 0)) + (+(s || 0))
diff --git a/client/src/app/core/rest/rest-extractor.service.ts b/client/src/app/core/rest/rest-extractor.service.ts
index de3f2bfff..daed7f178 100644
--- a/client/src/app/core/rest/rest-extractor.service.ts
+++ b/client/src/app/core/rest/rest-extractor.service.ts
@@ -87,7 +87,11 @@ export class RestExtractor {
    if (err.status !== undefined) {
      const errorMessage = this.buildServerErrorMessage(err)
-      logger.error(`Backend returned code ${err.status}, errorMessage is: ${errorMessage}`)
+      const message = `Backend returned code ${err.status}, errorMessage is: ${errorMessage}`
+      if (err.status === HttpStatusCode.NOT_FOUND_404) logger.clientError(message)
+      else logger.error(message)
      return errorMessage
    }
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index c5d08ab75..15b1a3c4a 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -103,7 +103,9 @@
        <a i18n *ngIf="!getExternalLoginHref()" routerLink="/login" class="peertube-button-link orange-button">Login</a>
        <a i18n *ngIf="getExternalLoginHref()" [href]="getExternalLoginHref()" class="peertube-button-link orange-button">Login</a>
-        <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link create-account-button">Create an account</a>
+        <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link create-account-button">
+          <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
+        </a>
      </div>
      <ng-container *ngFor="let menuSection of menuSections" >
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 63f01df92..fc6d74cff 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -1,6 +1,7 @@
 import { HotkeysService } from 'angular2-hotkeys'
 import * as debug from 'debug'
 import { switchMap } from 'rxjs/operators'
+import { environment } from 'src/environments/environment'
 import { ViewportScroller } from '@angular/common'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
@@ -91,6 +92,10 @@ export class MenuComponent implements OnInit {
    return this.languageChooserModal.getCurrentLanguage()
  }
+  get requiresApproval () {
+    return this.serverConfig.signup.requiresApproval
+  }
  ngOnInit () {
    this.htmlServerConfig = this.serverService.getHTMLConfig()
    this.currentInterfaceLanguage = this.languageChooserModal.getCurrentLanguage()
@@ -131,12 +136,7 @@ export class MenuComponent implements OnInit {
  }
  getExternalLoginHref () {
-    if (!this.serverConfig || this.serverConfig.client.menu.login.redirectOnSingleExternalAuth !== true) return undefined
+    return PluginsManager.getDefaultLoginHref(environment.apiUrl, this.serverConfig)
-    const externalAuths = this.serverConfig.plugin.registeredExternalAuths
-    if (externalAuths.length !== 1) return undefined
-    return PluginsManager.getExternalAuthHref(externalAuths[0])
  }
  isRegistrationAllowed () {
diff --git a/client/src/app/shared/form-validators/user-validators.ts b/client/src/app/shared/form-validators/user-validators.ts
index b93de75ea..ed6e0582e 100644
--- a/client/src/app/shared/form-validators/user-validators.ts
+++ b/client/src/app/shared/form-validators/user-validators.ts
@@ -136,13 +136,6 @@ export const USER_DESCRIPTION_VALIDATOR: BuildFormValidator = {
  }
 }
-export const USER_TERMS_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [ Validators.requiredTrue ],
-  MESSAGES: {
-    required: $localize`You must agree with the instance terms in order to register on it.`
-  }
-}
 export const USER_BAN_REASON_VALIDATOR: BuildFormValidator = {
  VALIDATORS: [
    Validators.minLength(3),
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 089be501d..2d3e26a25 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
@@ -8,7 +8,7 @@
      <span class="moderation-expanded-text">
        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
-          class="chip"
+          class="chip me-1"
        >
          <my-actor-avatar size="18" [actor]="abuse.reporterAccount" actorType="account"></my-actor-avatar>
          <div>
@@ -29,7 +29,7 @@
      <span class="moderation-expanded-label" i18n>Reportee</span>
      <span class="moderation-expanded-text">
        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
-          class="chip"
+          class="chip me-1"
        >
          <my-actor-avatar size="18" [actor]="abuse.flaggedAccount" actorType="account"></my-actor-avatar>
          <div>
@@ -63,7 +63,7 @@
    <div *ngIf="predefinedReasons" class="mt-2 d-flex">
      <span>
        <a *ngFor="let reason of predefinedReasons"  [routerLink]="[ '.' ]"
-          [queryParams]="{ 'search': 'tag:' + reason.id  }" class="chip rectangular bg-secondary text-light"
+          [queryParams]="{ 'search': 'tag:' + reason.id  }" class="pt-badge badge-secondary"
        >
          <div>{{ reason.label }}</div>
        </a>
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts
index 4e802b14d..b2ee2d8f2 100644
--- a/client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts
+++ b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts
@@ -6,9 +6,9 @@ import { CustomMarkupService } from './custom-markup.service'
  templateUrl: './custom-markup-container.component.html'
 })
 export class CustomMarkupContainerComponent implements OnChanges {
-  @ViewChild('contentWrapper') contentWrapper: ElementRef<HTMLInputElement>
+  @ViewChild('contentWrapper', { static: true }) contentWrapper: ElementRef<HTMLInputElement>
-  @Input() content: string
+  @Input() content: string | HTMLDivElement
  displayed = false
@@ -17,17 +17,23 @@ export class CustomMarkupContainerComponent implements OnChanges {
  ) { }
  async ngOnChanges () {
-    await this.buildElement()
+    await this.rebuild()
  }
-  private async buildElement () {
+  private async rebuild () {
-    if (!this.content) return
+    if (this.content instanceof HTMLDivElement) {
+      return this.loadElement(this.content)
+    }
    const { rootElement, componentsLoaded } = await this.customMarkupService.buildElement(this.content)
-    this.contentWrapper.nativeElement.appendChild(rootElement)
    await componentsLoaded
+    return this.loadElement(rootElement)
+  }
+  private loadElement (el: HTMLDivElement) {
+    this.contentWrapper.nativeElement.appendChild(el)
    this.displayed = true
  }
 }
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts
index 1af060548..264dd9577 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { VideoChannel } from '../../shared-main'
 import { CustomMarkupComponent } from './shared'
@@ -9,7 +9,8 @@ import { CustomMarkupComponent } from './shared'
 @Component({
  selector: 'my-button-markup',
  templateUrl: 'button-markup.component.html',
-  styleUrls: [ 'button-markup.component.scss' ]
+  styleUrls: [ 'button-markup.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ButtonMarkupComponent implements CustomMarkupComponent {
  @Input() theme: 'primary' | 'secondary'
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts
index ba12b7139..1e7860750 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts
@@ -1,6 +1,6 @@
 import { from } from 'rxjs'
 import { finalize, map, switchMap, tap } from 'rxjs/operators'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { MarkdownService, Notifier, UserService } from '@app/core'
 import { FindInBulkService } from '@app/shared/shared-search'
 import { VideoSortField } from '@shared/models'
@@ -14,7 +14,8 @@ import { CustomMarkupComponent } from './shared'
 @Component({
  selector: 'my-channel-miniature-markup',
  templateUrl: 'channel-miniature-markup.component.html',
-  styleUrls: [ 'channel-miniature-markup.component.scss' ]
+  styleUrls: [ 'channel-miniature-markup.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ChannelMiniatureMarkupComponent implements CustomMarkupComponent, OnInit {
  @Input() name: string
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.ts
index 07fa6fd2d..ab52e7e37 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.ts
@@ -1,5 +1,5 @@
 import { finalize } from 'rxjs/operators'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { Notifier } from '@app/core'
 import { FindInBulkService } from '@app/shared/shared-search'
 import { MiniatureDisplayOptions } from '../../shared-video-miniature'
@@ -13,7 +13,8 @@ import { CustomMarkupComponent } from './shared'
 @Component({
  selector: 'my-playlist-miniature-markup',
  templateUrl: 'playlist-miniature-markup.component.html',
-  styleUrls: [ 'playlist-miniature-markup.component.scss' ]
+  styleUrls: [ 'playlist-miniature-markup.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PlaylistMiniatureMarkupComponent implements CustomMarkupComponent, OnInit {
  @Input() uuid: string
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts
index cbbacf77c..c37666359 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts
@@ -1,5 +1,5 @@
 import { finalize } from 'rxjs/operators'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { AuthService, Notifier } from '@app/core'
 import { FindInBulkService } from '@app/shared/shared-search'
 import { Video } from '../../shared-main'
@@ -13,7 +13,8 @@ import { CustomMarkupComponent } from './shared'
 @Component({
  selector: 'my-video-miniature-markup',
  templateUrl: 'video-miniature-markup.component.html',
-  styleUrls: [ 'video-miniature-markup.component.scss' ]
+  styleUrls: [ 'video-miniature-markup.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class VideoMiniatureMarkupComponent implements CustomMarkupComponent, OnInit {
  @Input() uuid: string
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 7d3498d4c..70e88ea51 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
@@ -1,5 +1,5 @@
 import { finalize } from 'rxjs/operators'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { AuthService, Notifier } from '@app/core'
 import { VideoSortField } from '@shared/models'
 import { Video, VideoService } from '../../shared-main'
@@ -13,7 +13,8 @@ import { CustomMarkupComponent } from './shared'
 @Component({
  selector: 'my-videos-list-markup',
  templateUrl: 'videos-list-markup.component.html',
-  styleUrls: [ 'videos-list-markup.component.scss' ]
+  styleUrls: [ 'videos-list-markup.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class VideosListMarkupComponent implements CustomMarkupComponent, OnInit {
  @Input() sort: string
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.ts b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
index e3371f22c..c6527e169 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
@@ -31,6 +31,8 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
  @Input() markdownType: 'text' | 'enhanced' = 'text'
  @Input() customMarkdownRenderer?: (text: string) => Promise<string | HTMLElement>
+  @Input() debounceTime = 150
  @Input() markdownVideo: Video
  @Input() name = 'description'
@@ -59,7 +61,7 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
  ngOnInit () {
    this.contentChanged
        .pipe(
-          debounceTime(150),
+          debounceTime(this.debounceTime),
          distinctUntilChanged()
        )
        .subscribe(() => this.updatePreviews())
diff --git a/client/src/app/shared/shared-instance/instance.service.ts b/client/src/app/shared/shared-instance/instance.service.ts
index 89f47db24..f5b2e05db 100644
--- a/client/src/app/shared/shared-instance/instance.service.ts
+++ b/client/src/app/shared/shared-instance/instance.service.ts
@@ -7,6 +7,11 @@ import { peertubeTranslate } from '@shared/core-utils/i18n'
 import { About } from '@shared/models'
 import { environment } from '../../../environments/environment'
+export type AboutHTML = Pick<About['instance'],
+'terms' | 'codeOfConduct' | 'moderationInformation' | 'administrator' | 'creationReason' |
+'maintenanceLifetime' | 'businessModel' | 'hardwareInformation'
+>
 @Injectable()
 export class InstanceService {
  private static BASE_CONFIG_URL = environment.apiUrl + '/api/v1/config'
@@ -39,7 +44,7 @@ export class InstanceService {
  }
  async buildHtml (about: About) {
-    const html = {
+    const html: AboutHTML = {
      terms: '',
      codeOfConduct: '',
      moderationInformation: '',
diff --git a/client/src/app/shared/shared-main/account/index.ts b/client/src/app/shared/shared-main/account/index.ts
index b80ddb9f5..dd41a5f05 100644
--- a/client/src/app/shared/shared-main/account/index.ts
+++ b/client/src/app/shared/shared-main/account/index.ts
@@ -1,3 +1,4 @@
 export * from './account.model'
 export * from './account.service'
 export * from './actor.model'
+export * from './signup-label.component'
diff --git a/client/src/app/shared/shared-main/account/signup-label.component.html b/client/src/app/shared/shared-main/account/signup-label.component.html
new file mode 100644
index 000000000..35d6c5360
--- /dev/null
+++ b/client/src/app/shared/shared-main/account/signup-label.component.html
@@ -0,0 +1,2 @@
+<ng-container i18n *ngIf="requiresApproval">Request an account</ng-container>
+<ng-container i18n *ngIf="!requiresApproval">Create an account</ng-container>
diff --git a/client/src/app/shared/shared-main/account/signup-label.component.ts b/client/src/app/shared/shared-main/account/signup-label.component.ts
new file mode 100644
index 000000000..caacb9c6f
--- /dev/null
+++ b/client/src/app/shared/shared-main/account/signup-label.component.ts
@@ -0,0 +1,9 @@
+import { Component, Input } from '@angular/core'
+@Component({
+  selector: 'my-signup-label',
+  templateUrl: './signup-label.component.html'
+})
+export class SignupLabelComponent {
+  @Input() requiresApproval: boolean
+}
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 c1523bc50..eb1642d97 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -16,7 +16,7 @@ import {
 import { LoadingBarModule } from '@ngx-loading-bar/core'
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
 import { SharedGlobalIconModule } from '../shared-icons'
-import { AccountService } from './account'
+import { AccountService, SignupLabelComponent } from './account'
 import {
  AutofocusDirective,
  BytesPipe,
@@ -113,6 +113,8 @@ import { VideoChannelService } from './video-channel'
    UserQuotaComponent,
    UserNotificationsComponent,
+    SignupLabelComponent,
    EmbedComponent,
    PluginPlaceholderComponent,
@@ -171,6 +173,8 @@ import { VideoChannelService } from './video-channel'
    UserQuotaComponent,
    UserNotificationsComponent,
+    SignupLabelComponent,
    EmbedComponent,
    PluginPlaceholderComponent,
diff --git a/client/src/app/shared/shared-main/users/user-notification.model.ts b/client/src/app/shared/shared-main/users/user-notification.model.ts
index bf8870a79..96e7b4dd0 100644
--- a/client/src/app/shared/shared-main/users/user-notification.model.ts
+++ b/client/src/app/shared/shared-main/users/user-notification.model.ts
@@ -83,6 +83,11 @@ export class UserNotification implements UserNotificationServer {
    latestVersion: string
  }
+  registration?: {
+    id: number
+    username: string
+  }
  createdAt: string
  updatedAt: string
@@ -97,6 +102,8 @@ export class UserNotification implements UserNotificationServer {
  accountUrl?: string
+  registrationsUrl?: string
  videoImportIdentifier?: string
  videoImportUrl?: string
@@ -135,6 +142,7 @@ export class UserNotification implements UserNotificationServer {
      this.plugin = hash.plugin
      this.peertube = hash.peertube
+      this.registration = hash.registration
      this.createdAt = hash.createdAt
      this.updatedAt = hash.updatedAt
@@ -208,6 +216,10 @@ export class UserNotification implements UserNotificationServer {
          this.accountUrl = this.buildAccountUrl(this.account)
          break
+        case UserNotificationType.NEW_USER_REGISTRATION_REQUEST:
+          this.registrationsUrl = '/admin/moderation/registrations/list'
+          break
        case UserNotificationType.NEW_FOLLOW:
          this.accountUrl = this.buildAccountUrl(this.actorFollow.follower)
          break
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.html b/client/src/app/shared/shared-main/users/user-notifications.component.html
index e7cdb0183..a51e08292 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.html
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.html
@@ -215,6 +215,14 @@
        </div>
      </ng-container>
+      <ng-container *ngSwitchCase="20"> <!-- UserNotificationType.NEW_USER_REGISTRATION_REQUEST -->
+        <my-global-icon iconName="user-add" aria-hidden="true"></my-global-icon>
+        <div class="message" i18n>
+          User <a (click)="markAsRead(notification)" [routerLink]="notification.registrationsUrl">{{ notification.registration.username }}</a> wants to register on your instance
+        </div>
+      </ng-container>
      <ng-container *ngSwitchDefault>
        <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.scss b/client/src/app/shared/shared-moderation/account-blocklist.component.scss
index 8b1239d34..00aaf3b9c 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.scss
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.scss
@@ -1,10 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-.chip {
-  @include chip;
-}
 .unblock-button {
  @include peertube-button;
  @include grey-button;
diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss
index eaf5a8250..7c1e308cf 100644
--- a/client/src/app/shared/shared-moderation/moderation.scss
+++ b/client/src/app/shared/shared-moderation/moderation.scss
@@ -40,10 +40,6 @@
  }
 }
-.chip {
-  @include chip;
-}
 my-action-dropdown.show {
  ::ng-deep .dropdown-root {
    display: block !important;
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.scss b/client/src/app/shared/shared-moderation/server-blocklist.component.scss
index e29668a23..1a6b0435f 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.scss
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.scss
@@ -24,7 +24,3 @@ a {
 .block-button {
  @include create-button;
 }
-.chip {
-  @include chip;
-}
diff --git a/client/src/app/shared/shared-users/index.ts b/client/src/app/shared/shared-users/index.ts
index 20e60486d..95d90e49e 100644
--- a/client/src/app/shared/shared-users/index.ts
+++ b/client/src/app/shared/shared-users/index.ts
@@ -1,5 +1,4 @@
 export * from './user-admin.service'
-export * from './user-signup.service'
 export * from './two-factor.service'
 export * from './shared-users.module'
diff --git a/client/src/app/shared/shared-users/shared-users.module.ts b/client/src/app/shared/shared-users/shared-users.module.ts
index 5a1675dc9..efffc6026 100644
--- a/client/src/app/shared/shared-users/shared-users.module.ts
+++ b/client/src/app/shared/shared-users/shared-users.module.ts
@@ -1,9 +1,7 @@
 import { NgModule } from '@angular/core'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { TwoFactorService } from './two-factor.service'
 import { UserAdminService } from './user-admin.service'
-import { UserSignupService } from './user-signup.service'
 @NgModule({
  imports: [
@@ -15,7 +13,6 @@ import { UserSignupService } from './user-signup.service'
  exports: [],
  providers: [
-    UserSignupService,
    UserAdminService,
    TwoFactorService
  ]
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index 6fdf24b2d..227c12130 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -53,8 +53,8 @@
            <ng-container *ngIf="displayOptions.state">{{ getStateLabel(video) }}</ng-container>
          </div>
-          <div *ngIf="containedInPlaylists" class="video-contained-in-playlists">
+          <div *ngIf="containedInPlaylists" class="fs-6">
-            <a *ngFor="let playlist of containedInPlaylists" class="chip rectangular bg-secondary text-light" [routerLink]="['/w/p/', playlist.playlistShortUUID]">
+            <a *ngFor="let playlist of containedInPlaylists" class="pt-badge badge-secondary" [routerLink]="['/w/p/', playlist.playlistShortUUID]">
              {{ playlist.playlistDisplayName }}
            </a>
          </div>
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 ba2adfc5a..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,10 +4,6 @@
 $more-button-width: 40px;
-.chip {
-  @include chip;
-}
 .video-miniature {
  font-size: 14px;
 }
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 85c63c173..706227e66 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
@@ -314,6 +314,6 @@ export class VideoMiniatureComponent implements OnInit {
          this.cd.markForCheck()
        })
-    this.videoPlaylistService.runPlaylistCheck(this.video.id)
+    this.videoPlaylistService.runVideoExistsInPlaylistCheck(this.video.id)
  }
 }
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.ts b/client/src/app/shared/shared-video-miniature/videos-list.component.ts
index d5cdd958e..7b832263e 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.ts
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.ts
@@ -1,6 +1,6 @@
 import * as debug from 'debug'
 import { fromEvent, Observable, Subject, Subscription } from 'rxjs'
-import { debounceTime, switchMap } from 'rxjs/operators'
+import { concatMap, debounceTime, map, switchMap } from 'rxjs/operators'
 import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import {
@@ -111,6 +111,8 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
  private lastQueryLength: number
+  private videoRequests = new Subject<{ reset: boolean, obs: Observable<ResultList<Video>> }>()
  constructor (
    private notifier: Notifier,
    private authService: AuthService,
@@ -124,6 +126,8 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
  }
  ngOnInit () {
+    this.subscribeToVideoRequests()
    const hiddenFilters = this.hideScopeFilter
      ? [ 'scope' ]
      : []
@@ -228,30 +232,12 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
  }
  loadMoreVideos (reset = false) {
-    if (reset) this.hasDoneFirstQuery = false
+    if (reset) {
+      this.hasDoneFirstQuery = false
-    this.getVideosObservableFunction(this.pagination, this.filters)
+      this.videos = []
-      .subscribe({
+    }
-        next: ({ data }) => {
-          this.hasDoneFirstQuery = true
-          this.lastQueryLength = data.length
-          if (reset) this.videos = []
-          this.videos = this.videos.concat(data)
-          if (this.groupByDate) this.buildGroupedDateLabels()
-          this.onDataSubject.next(data)
-          this.videosLoaded.emit(this.videos)
-        },
-        error: err => {
-          const message = $localize`Cannot load more videos. Try again later.`
-          logger.error(message, err)
+    this.videoRequests.next({ reset, obs: this.getVideosObservableFunction(this.pagination, this.filters) })
-          this.notifier.error(message)
-        }
-      })
  }
  reloadVideos () {
@@ -423,4 +409,30 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
      this.onFiltersChanged(true)
    })
  }
+  private subscribeToVideoRequests () {
+    this.videoRequests
+      .pipe(concatMap(({ reset, obs }) => obs.pipe(map(({ data }) => ({ data, reset })))))
+      .subscribe({
+        next: ({ data, reset }) => {
+          this.hasDoneFirstQuery = true
+          this.lastQueryLength = data.length
+          if (reset) this.videos = []
+          this.videos = this.videos.concat(data)
+          if (this.groupByDate) this.buildGroupedDateLabels()
+          this.onDataSubject.next(data)
+          this.videosLoaded.emit(this.videos)
+        },
+        error: err => {
+          const message = $localize`Cannot load more videos. Try again later.`
+          logger.error(message, err)
+          this.notifier.error(message)
+        }
+      })
+  }
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
index 2fc39fc75..f802416a4 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
@@ -81,7 +81,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
        .subscribe(result => {
          this.playlistsData = result.data
-          this.videoPlaylistService.runPlaylistCheck(this.video.id)
+          this.videoPlaylistService.runVideoExistsInPlaylistCheck(this.video.id)
        })
    this.videoPlaylistSearchChanged
@@ -129,7 +129,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
        .subscribe(playlistsResult => {
          this.playlistsData = playlistsResult.data
-          this.videoPlaylistService.runPlaylistCheck(this.video.id)
+          this.videoPlaylistService.runVideoExistsInPlaylistCheck(this.video.id)
        })
  }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
index 330a51f91..bc9fb0d74 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
@@ -206,7 +206,15 @@ export class VideoPlaylistService {
                     stopTimestamp: body.stopTimestamp
                   })
-                   this.runPlaylistCheck(body.videoId)
+                   this.runVideoExistsInPlaylistCheck(body.videoId)
+                   if (this.myAccountPlaylistCache) {
+                     const playlist = this.myAccountPlaylistCache.data.find(p => p.id === playlistId)
+                     if (!playlist) return
+                     const otherPlaylists = this.myAccountPlaylistCache.data.filter(p => p !== playlist)
+                     this.myAccountPlaylistCache.data = [ playlist, ...otherPlaylists ]
+                   }
                 }),
                 catchError(err => this.restExtractor.handleError(err))
               )
@@ -225,7 +233,7 @@ export class VideoPlaylistService {
                     elem.stopTimestamp = body.stopTimestamp
                   }
-                   this.runPlaylistCheck(videoId)
+                   this.runVideoExistsInPlaylistCheck(videoId)
                 }),
                 catchError(err => this.restExtractor.handleError(err))
               )
@@ -242,7 +250,7 @@ export class VideoPlaylistService {
                       .filter(e => e.playlistElementId !== playlistElementId)
                   }
-                   this.runPlaylistCheck(videoId)
+                   this.runVideoExistsInPlaylistCheck(videoId)
                 }),
                 catchError(err => this.restExtractor.handleError(err))
               )
@@ -296,7 +304,7 @@ export class VideoPlaylistService {
    return obs
  }
-  runPlaylistCheck (videoId: number) {
+  runVideoExistsInPlaylistCheck (videoId: number) {
    debugLogger('Running playlist check.')
    if (this.videoExistsCache[videoId]) {
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 56310c4e9..2781850b9 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -11,6 +11,7 @@ import './shared/control-bar/p2p-info-button'
 import './shared/control-bar/peertube-link-button'
 import './shared/control-bar/peertube-load-progress-bar'
 import './shared/control-bar/theater-button'
+import './shared/control-bar/peertube-live-display'
 import './shared/settings/resolution-menu-button'
 import './shared/settings/resolution-menu-item'
 import './shared/settings/settings-dialog'
@@ -96,6 +97,10 @@ export class PeertubePlayerManager {
      videojs(options.common.playerElement, videojsOptions, function (this: videojs.Player) {
        const player = this
+        if (!isNaN(+options.common.playbackRate)) {
+          player.playbackRate(+options.common.playbackRate)
+        }
        let alreadyFallback = false
        const handleError = () => {
@@ -118,7 +123,7 @@ export class PeertubePlayerManager {
        self.addContextMenu(videojsOptionsBuilder, player, options.common)
        if (isMobile()) player.peertubeMobile()
-        if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin()
+        if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin({ isLive: options.common.isLive })
        if (options.common.controlBar === false) player.controlBar.addClass('control-bar-hidden')
        player.bezels()
diff --git a/client/src/assets/player/shared/control-bar/index.ts b/client/src/assets/player/shared/control-bar/index.ts
index db5b8938d..e71e90713 100644
--- a/client/src/assets/player/shared/control-bar/index.ts
+++ b/client/src/assets/player/shared/control-bar/index.ts
@@ -1,5 +1,6 @@
 export * from './next-previous-video-button'
 export * from './p2p-info-button'
 export * from './peertube-link-button'
+export * from './peertube-live-display'
 export * from './peertube-load-progress-bar'
 export * from './theater-button'
diff --git a/client/src/assets/player/shared/control-bar/peertube-live-display.ts b/client/src/assets/player/shared/control-bar/peertube-live-display.ts
new file mode 100644
index 000000000..649eb0b00
--- /dev/null
+++ b/client/src/assets/player/shared/control-bar/peertube-live-display.ts
@@ -0,0 +1,93 @@
+import videojs from 'video.js'
+import { PeerTubeLinkButtonOptions } from '../../types'
+const ClickableComponent = videojs.getComponent('ClickableComponent')
+class PeerTubeLiveDisplay extends ClickableComponent {
+  private interval: any
+  private contentEl_: any
+  constructor (player: videojs.Player, options?: PeerTubeLinkButtonOptions) {
+    super(player, options as any)
+    this.interval = this.setInterval(() => this.updateClass(), 1000)
+    this.show()
+    this.updateSync(true)
+  }
+  dispose () {
+    if (this.interval) {
+      this.clearInterval(this.interval)
+      this.interval = undefined
+    }
+    this.contentEl_ = null
+    super.dispose()
+  }
+  createEl () {
+    const el = super.createEl('div', {
+      className: 'vjs-live-control vjs-control'
+    })
+    this.contentEl_ = videojs.dom.createEl('div', {
+      className: 'vjs-live-display'
+    }, {
+      'aria-live': 'off'
+    })
+    this.contentEl_.appendChild(videojs.dom.createEl('span', {
+      className: 'vjs-control-text',
+      textContent: `${this.localize('Stream Type')}\u00a0`
+    }))
+    this.contentEl_.appendChild(document.createTextNode(this.localize('LIVE')))
+    el.appendChild(this.contentEl_)
+    return el
+  }
+  handleClick () {
+    const hlsjs = this.getHLSJS()
+    if (!hlsjs) return
+    this.player().currentTime(hlsjs.liveSyncPosition)
+    this.player().play()
+    this.updateSync(true)
+  }
+  private updateClass () {
+    const hlsjs = this.getHLSJS()
+    if (!hlsjs) return
+    // Not loaded yet
+    if (this.player().currentTime() === 0) return
+    const isSync = Math.abs(this.player().currentTime() - hlsjs.liveSyncPosition) < 10
+    this.updateSync(isSync)
+  }
+  private updateSync (isSync: boolean) {
+    if (isSync) {
+      this.addClass('synced-with-live-edge')
+      this.removeAttribute('title')
+      this.disable()
+    } else {
+      this.removeClass('synced-with-live-edge')
+      this.setAttribute('title', this.localize('Go back to the live'))
+      this.enable()
+    }
+  }
+  private getHLSJS () {
+    const p2pMediaLoader = this.player()?.p2pMediaLoader
+    if (!p2pMediaLoader) return undefined
+    return p2pMediaLoader().getHLSJS()
+  }
+}
+videojs.registerComponent('PeerTubeLiveDisplay', PeerTubeLiveDisplay)
diff --git a/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts b/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts
index ec1e1038b..f5b4b3919 100644
--- a/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts
+++ b/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts
@@ -4,6 +4,10 @@ type KeyHandler = { accept: (event: KeyboardEvent) => boolean, cb: (e: KeyboardE
 const Plugin = videojs.getPlugin('plugin')
+export type HotkeysOptions = {
+  isLive: boolean
+}
 class PeerTubeHotkeysPlugin extends Plugin {
  private static readonly VOLUME_STEP = 0.1
  private static readonly SEEK_STEP = 5
@@ -12,9 +16,13 @@ class PeerTubeHotkeysPlugin extends Plugin {
  private readonly handlers: KeyHandler[]
-  constructor (player: videojs.Player, options: videojs.PlayerOptions) {
+  private readonly isLive: boolean
+  constructor (player: videojs.Player, options: videojs.PlayerOptions & HotkeysOptions) {
    super(player, options)
+    this.isLive = options.isLive
    this.handlers = this.buildHandlers()
    this.handleKeyFunction = (event: KeyboardEvent) => this.onKeyDown(event)
@@ -68,28 +76,6 @@ class PeerTubeHotkeysPlugin extends Plugin {
        }
      },
-      // Rewind
-      {
-        accept: e => this.isNaked(e, 'ArrowLeft') || this.isNaked(e, 'MediaRewind'),
-        cb: e => {
-          e.preventDefault()
-          const target = Math.max(0, this.player.currentTime() - PeerTubeHotkeysPlugin.SEEK_STEP)
-          this.player.currentTime(target)
-        }
-      },
-      // Forward
-      {
-        accept: e => this.isNaked(e, 'ArrowRight') || this.isNaked(e, 'MediaForward'),
-        cb: e => {
-          e.preventDefault()
-          const target = Math.min(this.player.duration(), this.player.currentTime() + PeerTubeHotkeysPlugin.SEEK_STEP)
-          this.player.currentTime(target)
-        }
-      },
      // Fullscreen
      {
        // f key or Ctrl + Enter
@@ -116,6 +102,8 @@ class PeerTubeHotkeysPlugin extends Plugin {
      {
        accept: e => e.key === '>',
        cb: () => {
+          if (this.isLive) return
          const target = Math.min(this.player.playbackRate() + 0.1, 5)
          this.player.playbackRate(parseFloat(target.toFixed(2)))
@@ -126,6 +114,8 @@ class PeerTubeHotkeysPlugin extends Plugin {
      {
        accept: e => e.key === '<',
        cb: () => {
+          if (this.isLive) return
          const target = Math.max(this.player.playbackRate() - 0.1, 0.10)
          this.player.playbackRate(parseFloat(target.toFixed(2)))
@@ -136,6 +126,8 @@ class PeerTubeHotkeysPlugin extends Plugin {
      {
        accept: e => e.key === ',',
        cb: () => {
+          if (this.isLive) return
          this.player.pause()
          // Calculate movement distance (assuming 30 fps)
@@ -148,6 +140,8 @@ class PeerTubeHotkeysPlugin extends Plugin {
      {
        accept: e => e.key === '.',
        cb: () => {
+          if (this.isLive) return
          this.player.pause()
          // Calculate movement distance (assuming 30 fps)
@@ -157,11 +151,47 @@ class PeerTubeHotkeysPlugin extends Plugin {
      }
    ]
+    if (this.isLive) return handlers
+    return handlers.concat(this.buildVODHandlers())
+  }
+  private buildVODHandlers () {
+    const handlers: KeyHandler[] = [
+      // Rewind
+      {
+        accept: e => this.isNaked(e, 'ArrowLeft') || this.isNaked(e, 'MediaRewind'),
+        cb: e => {
+          if (this.isLive) return
+          e.preventDefault()
+          const target = Math.max(0, this.player.currentTime() - PeerTubeHotkeysPlugin.SEEK_STEP)
+          this.player.currentTime(target)
+        }
+      },
+      // Forward
+      {
+        accept: e => this.isNaked(e, 'ArrowRight') || this.isNaked(e, 'MediaForward'),
+        cb: e => {
+          if (this.isLive) return
+          e.preventDefault()
+          const target = Math.min(this.player.duration(), this.player.currentTime() + PeerTubeHotkeysPlugin.SEEK_STEP)
+          this.player.currentTime(target)
+        }
+      }
+    ]
    // 0-9 key handlers
    for (let i = 0; i < 10; i++) {
      handlers.push({
        accept: e => this.isNakedOrShift(e, i + ''),
        cb: e => {
+          if (this.isLive) return
          e.preventDefault()
          this.player.currentTime(this.player.duration() * i * 0.1)
diff --git a/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts b/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts
index 27f366732..26f923e92 100644
--- a/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts
+++ b/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts
@@ -30,10 +30,7 @@ export class ControlBarOptionsBuilder {
    }
    Object.assign(children, {
-      currentTimeDisplay: {},
+      ...this.getTimeControls(),
-      timeDivider: {},
-      durationDisplay: {},
-      liveDisplay: {},
      flexibleWidthSpacer: {},
@@ -74,7 +71,9 @@ export class ControlBarOptionsBuilder {
  private getSettingsButton () {
    const settingEntries: string[] = []
-    settingEntries.push('playbackRateMenuButton')
+    if (!this.options.isLive) {
+      settingEntries.push('playbackRateMenuButton')
+    }
    if (this.options.captions === true) settingEntries.push('captionsButton')
@@ -90,7 +89,23 @@ export class ControlBarOptionsBuilder {
    }
  }
+  private getTimeControls () {
+    if (this.options.isLive) {
+      return {
+        peerTubeLiveDisplay: {}
+      }
+    }
+    return {
+      currentTimeDisplay: {},
+      timeDivider: {},
+      durationDisplay: {}
+    }
+  }
  private getProgressControl () {
+    if (this.options.isLive) return {}
    const loadProgressBar = this.mode === 'webtorrent'
      ? 'peerTubeLoadProgressBar'
      : 'loadProgressBar'
diff --git a/client/src/assets/player/shared/p2p-media-loader/hls-plugin.ts b/client/src/assets/player/shared/p2p-media-loader/hls-plugin.ts
index a14beb347..7f7d90ab9 100644
--- a/client/src/assets/player/shared/p2p-media-loader/hls-plugin.ts
+++ b/client/src/assets/player/shared/p2p-media-loader/hls-plugin.ts
@@ -281,8 +281,8 @@ class Html5Hlsjs {
    if (this.errorCounts[data.type]) this.errorCounts[data.type] += 1
    else this.errorCounts[data.type] = 1
-    if (data.fatal) logger.warn(error.message)
+    if (data.fatal) logger.error(error.message, { currentTime: this.player.currentTime(), data })
-    else logger.error(error.message, { data })
+    else logger.warn(error.message)
    if (data.type === Hlsjs.ErrorTypes.NETWORK_ERROR) {
      error.code = 2
diff --git a/client/src/assets/player/shared/stats/stats-card.ts b/client/src/assets/player/shared/stats/stats-card.ts
index f23ae48be..471a5e46c 100644
--- a/client/src/assets/player/shared/stats/stats-card.ts
+++ b/client/src/assets/player/shared/stats/stats-card.ts
@@ -182,7 +182,7 @@ class StatsCard extends Component {
    let colorSpace = 'unknown'
    let codecs = 'unknown'
-    if (metadata?.streams[0]) {
+    if (metadata?.streams?.[0]) {
      const stream = metadata.streams[0]
      colorSpace = stream['color_space'] !== 'unknown'
@@ -193,7 +193,7 @@ class StatsCard extends Component {
    }
    const resolution = videoFile?.resolution.label + videoFile?.fps
-    const buffer = this.timeRangesToString(this.player().buffered())
+    const buffer = this.timeRangesToString(this.player_.buffered())
    const progress = this.player_.webtorrent().getTorrent()?.progress
    return {
diff --git a/client/src/assets/player/types/manager-options.ts b/client/src/assets/player/types/manager-options.ts
index 3057a5adb..3fbcec29c 100644
--- a/client/src/assets/player/types/manager-options.ts
+++ b/client/src/assets/player/types/manager-options.ts
@@ -29,6 +29,8 @@ export interface CustomizationOptions {
  resume?: string
  peertubeLink: boolean
+  playbackRate?: number | string
 }
 export interface CommonOptions extends CustomizationOptions {
diff --git a/client/src/assets/player/types/peertube-videojs-typings.ts b/client/src/assets/player/types/peertube-videojs-typings.ts
index c60154f3b..5674f78cb 100644
--- a/client/src/assets/player/types/peertube-videojs-typings.ts
+++ b/client/src/assets/player/types/peertube-videojs-typings.ts
@@ -3,6 +3,7 @@ import videojs from 'video.js'
 import { Engine } from '@peertube/p2p-media-loader-hlsjs'
 import { VideoFile, VideoPlaylist, VideoPlaylistElement } from '@shared/models'
 import { PeerTubeDockPluginOptions } from '../shared/dock/peertube-dock-plugin'
+import { HotkeysOptions } from '../shared/hotkeys/peertube-hotkeys-plugin'
 import { Html5Hlsjs } from '../shared/p2p-media-loader/hls-plugin'
 import { P2pMediaLoaderPlugin } from '../shared/p2p-media-loader/p2p-media-loader-plugin'
 import { RedundancyUrlManager } from '../shared/p2p-media-loader/redundancy-url-manager'
@@ -44,7 +45,7 @@ declare module 'video.js' {
    bezels (): void
    peertubeMobile (): void
-    peerTubeHotkeysPlugin (): void
+    peerTubeHotkeysPlugin (options?: HotkeysOptions): void
    stats (options?: StatsCardOptions): StatsForNerdsPlugin
diff --git a/client/src/root-helpers/logger.ts b/client/src/root-helpers/logger.ts
index d1fdf73aa..618be62cd 100644
--- a/client/src/root-helpers/logger.ts
+++ b/client/src/root-helpers/logger.ts
@@ -27,6 +27,10 @@ class Logger {
  warn (message: LoggerMessage, meta?: LoggerMeta) {
    this.runHooks('warn', message, meta)
+    this.clientWarn(message, meta)
+  }
+  clientWarn (message: LoggerMessage, meta?: LoggerMeta) {
    if (meta) console.warn(message, meta)
    else console.warn(message)
  }
@@ -34,6 +38,10 @@ class Logger {
  error (message: LoggerMessage, meta?: LoggerMeta) {
    this.runHooks('error', message, meta)
+    this.clientError(message, meta)
+  }
+  clientError (message: LoggerMessage, meta?: LoggerMeta) {
    if (meta) console.error(message, meta)
    else console.error(message)
  }
diff --git a/client/src/root-helpers/plugins-manager.ts b/client/src/root-helpers/plugins-manager.ts
index 6c64e2b01..e5b06a94c 100644
--- a/client/src/root-helpers/plugins-manager.ts
+++ b/client/src/root-helpers/plugins-manager.ts
@@ -3,7 +3,7 @@ import * as debug from 'debug'
 import { firstValueFrom, ReplaySubject } from 'rxjs'
 import { first, shareReplay } from 'rxjs/operators'
 import { RegisterClientHelpers } from 'src/types/register-client-option.model'
-import { getHookType, internalRunHook } from '@shared/core-utils/plugins/hooks'
+import { getExternalAuthHref, getHookType, internalRunHook } from '@shared/core-utils/plugins/hooks'
 import {
  ClientHookName,
  clientHookObject,
@@ -16,7 +16,6 @@ import {
  RegisterClientRouteOptions,
  RegisterClientSettingsScriptOptions,
  RegisterClientVideoFieldOptions,
-  RegisteredExternalAuthConfig,
  ServerConfigPlugin
 } from '@shared/models'
 import { environment } from '../environments/environment'
@@ -94,9 +93,13 @@ class PluginsManager {
    return isTheme ? '/themes' : '/plugins'
  }
-  static getExternalAuthHref (auth: RegisteredExternalAuthConfig) {
+  static getDefaultLoginHref (apiUrl: string, serverConfig: HTMLServerConfig) {
-    return environment.apiUrl + `/plugins/${auth.name}/${auth.version}/auth/${auth.authName}`
+    if (!serverConfig || serverConfig.client.menu.login.redirectOnSingleExternalAuth !== true) return undefined
+    const externalAuths = serverConfig.plugin.registeredExternalAuths
+    if (externalAuths.length !== 1) return undefined
+    return getExternalAuthHref(apiUrl, externalAuths[0])
  }
  loadPluginsList (config: HTMLServerConfig) {
diff --git a/client/src/sass/class-helpers.scss b/client/src/sass/class-helpers.scss
index bc965331a..feb3a6de2 100644
--- a/client/src/sass/class-helpers.scss
+++ b/client/src/sass/class-helpers.scss
@@ -284,3 +284,9 @@ label + .form-group-description {
    border: 2px solid pvar(--mainColorLightest);
  }
 }
+// ---------------------------------------------------------------------------
+.chip {
+  @include chip;
+}
diff --git a/client/src/sass/include/_badges.scss b/client/src/sass/include/_badges.scss
index 4bc70d4a9..7efd2fb81 100644
--- a/client/src/sass/include/_badges.scss
+++ b/client/src/sass/include/_badges.scss
@@ -9,6 +9,10 @@
  font-weight: $font-semibold;
  line-height: 1.1;
+  &.badge-fs-normal {
+    font-size: 100%;
+  }
  &.badge-primary {
    color: pvar(--mainBackgroundColor);
    background-color: pvar(--mainColor);
diff --git a/client/src/sass/include/_fonts.scss b/client/src/sass/include/_fonts.scss
index e5a40af34..514261d01 100644
--- a/client/src/sass/include/_fonts.scss
+++ b/client/src/sass/include/_fonts.scss
@@ -15,7 +15,3 @@
  font-display: swap;
  src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.ttf.woff2') format('woff2');
 }
-@mixin muted {
-  color: pvar(--greyForegroundColor) !important;
-}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index b5ccb6598..8816437d9 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -36,6 +36,10 @@
  max-height: $font-size * $number-of-lines;
 }
+@mixin muted {
+  color: pvar(--greyForegroundColor) !important;
+}
 @mixin fade-text ($fade-after, $background-color) {
  position: relative;
  overflow: hidden;
@@ -791,51 +795,39 @@
 }
 @mixin chip {
-  --chip-radius: 5rem;
+  --avatar-size: 1.2rem;
-  --chip-padding: .2rem .4rem;
-  $avatar-height: 1.2rem;
-  align-items: center;
-  border-radius: var(--chip-radius);
  display: inline-flex;
-  font-size: 90%;
  color: pvar(--mainForegroundColor);
-  height: $avatar-height;
+  height: var(--avatar-size);
-  line-height: 1rem;
-  margin: .1rem;
  max-width: 320px;
  overflow: hidden;
-  padding: var(--chip-padding);
  text-decoration: none;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
-  &.rectangular {
-    --chip-radius: .2rem;
-    --chip-padding: .2rem .3rem;
-  }
  my-actor-avatar {
-    @include margin-left(-.4rem);
    @include margin-right(.2rem);
+    border-radius: 5rem;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
  }
  &.two-lines {
-    $avatar-height: 2rem;
+    --avatar-size: 2rem;
-    height: $avatar-height;
+    font-size: 14px;
+    line-height: 1rem;
    my-actor-avatar {
      display: inline-block;
    }
-    div {
+    > div {
-      margin: 0 .1rem;
      display: flex;
      flex-direction: column;
-      height: $avatar-height;
      justify-content: center;
    }
  }
diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss
index 0082378e4..96b3adf66 100644
--- a/client/src/sass/player/control-bar.scss
+++ b/client/src/sass/player/control-bar.scss
@@ -153,8 +153,25 @@
  }
  .vjs-live-control {
-    line-height: $control-bar-height;
+    padding: 5px 7px;
-    min-width: 4em;
+    border-radius: 3px;
+    height: fit-content;
+    margin: auto 10px;
+    font-weight: bold;
+    max-width: fit-content;
+    opacity: 1 !important;
+    line-height: normal;
+    position: relative;
+    top: -1px;
+    &.synced-with-live-edge {
+      background: #d7281c;
+    }
+    &:not(.synced-with-live-edge) {
+      cursor: pointer;
+      background: #80807f;
+    }
  }
  .vjs-peertube {
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 88f6efb6a..ee66a9db3 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -294,6 +294,7 @@ body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
 body .p-datepicker table {
  font-size: 14px;
  margin: 0.857em 0 0 0;
+  table-layout: fixed;
 }
 body .p-datepicker table th {
  padding: 0.5em;
diff --git a/client/src/standalone/videos/shared/player-manager-options.ts b/client/src/standalone/videos/shared/player-manager-options.ts
index b0bdb2dd9..f09c86d14 100644
--- a/client/src/standalone/videos/shared/player-manager-options.ts
+++ b/client/src/standalone/videos/shared/player-manager-options.ts
@@ -38,6 +38,7 @@ export class PlayerManagerOptions {
  private enableApi = false
  private startTime: number | string = 0
  private stopTime: number | string
+  private playbackRate: number | string
  private title: boolean
  private warningTitle: boolean
@@ -130,6 +131,7 @@ export class PlayerManagerOptions {
      this.subtitle = getParamString(params, 'subtitle')
      this.startTime = getParamString(params, 'start')
      this.stopTime = getParamString(params, 'stop')
+      this.playbackRate = getParamString(params, 'playbackRate')
      this.bigPlayBackgroundColor = getParamString(params, 'bigPlayBackgroundColor')
      this.foregroundColor = getParamString(params, 'foregroundColor')
@@ -210,6 +212,8 @@ export class PlayerManagerOptions {
          ? playlistTracker.getCurrentElement().stopTimestamp
          : this.stopTime,
+        playbackRate: this.playbackRate,
        videoCaptions,
        inactivityTimeout: 2500,
        videoViewUrl: this.videoFetcher.getVideoViewsUrl(video.uuid),