34 files changed, 434 insertions, 391 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
index 0ab80e5a9..a17b13fdf 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
@@ -1,15 +1,15 @@
 <ng-container [formGroup]="form">
 
-  <div class="form-row mt-5"> <!-- cache grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-5"> <!-- cache grid -->
+
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">CACHE</div>
       <div i18n class="inner-form-description">
         Some files are not federated, and fetched when necessary. Define their caching policies.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-
+    <div class="col-12 col-lg-8 col-xl-9">
       <ng-container formGroupName="cache">
         <div class="form-group" formGroupName="previews">
           <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
@@ -57,8 +57,8 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- cache grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- cache grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div class="anchor" id="customizations"></div> <!-- customizations anchor -->
       <div i18n class="inner-form-title">CUSTOMIZATIONS</div>
       <div i18n class="inner-form-description">
@@ -66,8 +66,7 @@
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-
+    <div class="col-12 col-lg-8 col-xl-9">
       <ng-container formGroupName="instance">
         <ng-container formGroupName="customizations">
           <div class="form-group">
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 bae9d9775..68126281f 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
@@ -1,13 +1,13 @@
 <ng-container [formGroup]="form">
-  <div class="form-row mt-5"> <!-- appearance grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-5"> <!-- appearance grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">APPEARANCE</div>
       <div i18n class="inner-form-description">
-        Use <a routerLink="/admin/plugins">plugins & themes</a> for more involved changes, or <a routerLink="/admin/config/edit-custom" fragment="advanced-configuration">add slight customizations</a>.
+        Use <a class="link-orange" routerLink="/admin/plugins">plugins & themes</a> for more involved changes, or add slight <a class="link-orange" routerLink="/admin/config/edit-custom" fragment="advanced-configuration">customizations</a>.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="theme">
         <div class="form-group">
@@ -15,7 +15,7 @@
 
           <div class="peertube-select-container">
             <select formControlName="default" id="themeDefault" class="form-control">
-              <option i18n value="default">default</option>
+              <option i18n value="default">{{ getDefaultThemeLabel() }}</option>
 
               <option *ngFor="let theme of getAvailableThemes()" [value]="theme">{{ theme }}</option>
             </select>
@@ -88,15 +88,15 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- broadcast grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- broadcast grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">BROADCAST MESSAGE</div>
-      <div i18n class="inner-for-description">
+      <div i18n class="inner-form-description">
         Display a message on your instance
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="broadcastMessage">
 
@@ -144,15 +144,15 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- new users grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- new users grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">NEW USERS</div>
-      <div i18n class="inner-for-description">
-        Manage <a routerLink="/admin/users">users</a> to set their quota individually.
+      <div i18n class="inner-form-description">
+        Manage <a class="link-orange" routerLink="/admin/users">users</a> to set their quota individually.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="signup">
         <div class="form-group">
@@ -163,7 +163,7 @@
             <ng-container ngProjectAs="description">
               <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
 
-              <div class="alert alert-info alert-signup" *ngIf="signupAlertMessage">{{ signupAlertMessage }}</div>
+              <div class="alert pt-alert-primary alert-signup" *ngIf="signupAlertMessage">{{ signupAlertMessage }}</div>
             </ng-container>
 
             <ng-container ngProjectAs="extra">
@@ -185,7 +185,7 @@
 
                 <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
 
-                <small i18n *ngIf="hasUnlimitedSignup()" class="muted">Signup won't be limited to a fixed number of users.</small>
+                <small i18n *ngIf="hasUnlimitedSignup()" class="muted small">Signup won't be limited to a fixed number of users.</small>
               </div>
 
               <div [ngClass]="getDisabledSignupClass()" class="mt-3">
@@ -239,20 +239,20 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- videos grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- videos grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">VIDEOS</div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="import">
 
         <ng-container formGroupName="videos">
 
-          <div class="form-group mt-4">
+          <div class="form-group">
             <label i18n for="importConcurrency">Import jobs concurrency</label>
-            <span i18n class="muted ml-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
+            <span i18n class="small muted ms-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
 
             <div class="number-with-unit">
               <input type="number" name="importConcurrency" formControlName="concurrency" />
@@ -268,7 +268,7 @@
               i18n-labelText labelText="Allow import with HTTP URL (e.g. YouTube)"
             >
             <ng-container ngProjectAs="description">
-              <span i18n>⚠️ If enabled, we recommend to use <a href="https://docs.joinpeertube.org/maintain-configuration?id=security">a HTTP proxy</a> to prevent private URL access from your PeerTube server</span>
+              <span i18n>⚠️ If enabled, we recommend to use <a class="link-orange" href="https://docs.joinpeertube.org/maintain-configuration?id=security">a HTTP proxy</a> to prevent private URL access from your PeerTube server</span>
             </ng-container>
           </my-peertube-checkbox>
           </div>
@@ -309,12 +309,12 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- video channels grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- video channels grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">VIDEO CHANNELS</div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
       <div class="form-group" formGroupName="videoChannels">
         <label i18n for="videoChannelsMaxPerUser">Max video channels per user</label>
 
@@ -331,12 +331,12 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- search grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- search grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">SEARCH</div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="search">
         <ng-container formGroupName="remoteUri">
@@ -372,11 +372,11 @@
               i18n-labelText labelText="Enable global search"
             >
               <ng-container ngProjectAs="description">
-                <p i18n>⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.</p>
+                <div i18n>⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.</div>
 
-                <span i18n>
-                  You should only use moderated search indexes in production, or <a href="https://framagit.org/framasoft/peertube/search-index">host your own</a>.
-                </span>
+                <div i18n>
+                  You should only use moderated search indexes in production, or <a class="link-orange" href="https://framagit.org/framasoft/peertube/search-index">host your own</a>.
+                </div>
               </ng-container>
 
               <ng-container ngProjectAs="extra">
@@ -420,15 +420,15 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- federation grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- federation grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">FEDERATION</div>
       <div i18n class="inner-form-description">
-        Manage <a routerLink="/admin/follows">relations</a> with other instances.
+        Manage <a class="link-orange" routerLink="/admin/follows">relations</a> with other instances.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="followers">
         <ng-container formGroupName="instance">
@@ -472,10 +472,10 @@
                 i18n-labelText labelText="Automatically follow instances of a public index"
               >
                 <ng-container ngProjectAs="description">
-                  <p i18n>⚠️ This functionality requires a lot of attention and extra moderation.</p>
+                  <div i18n>⚠️ This functionality requires a lot of attention and extra moderation.</div>
 
                   <span i18n>
-                    See <a href="https://docs.joinpeertube.org/admin-following-instances?id=automatically-follow-other-instances" rel="noopener noreferrer" target="_blank">the documentation</a> for more information about the expected URL
+                    See <a class="link-orange" href="https://docs.joinpeertube.org/admin-following-instances?id=automatically-follow-other-instances" rel="noopener noreferrer" target="_blank">the documentation</a> for more information about the expected URL
                   </span>
                 </ng-container>
 
@@ -499,12 +499,12 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- administrators grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- administrators grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">ADMINISTRATORS</div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <div class="form-group" formGroupName="admin">
         <label i18n for="adminEmail">Admin email</label>
@@ -527,8 +527,8 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- Twitter grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- Twitter grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">TWITTER</div>
       <div i18n class="inner-form-description">
         Provide the Twitter account representing your instance to improve link previews.
@@ -536,7 +536,7 @@
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="services">
         <ng-container formGroupName="twitter">
@@ -563,7 +563,7 @@
                   If your instance is explicitly allowed by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
                   If the instance is not, we use an image link card that will redirect to your PeerTube instance.<br /><br />
                   Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/w/blabla) on
-                  <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a>
+                  <a class="link-orange" target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a>
                   to see if you instance is allowed.
                 </ng-container>
               </ng-template>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
index 81457bd36..f8f257671 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
@@ -2,7 +2,7 @@ import { pairwise } from 'rxjs/operators'
 import { SelectOptionsItem } from 'src/types/select-options-item.model'
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'
 import { FormGroup } from '@angular/forms'
-import { MenuService } from '@app/core'
+import { MenuService, ThemeService } from '@app/core'
 import { HTMLServerConfig } from '@shared/models'
 import { ConfigService } from '../shared/config.service'
 
@@ -22,7 +22,8 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
 
   constructor (
     private configService: ConfigService,
-    private menuService: MenuService
+    private menuService: MenuService,
+    private themeService: ThemeService
   ) { }
 
   ngOnInit () {
@@ -49,8 +50,7 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
   }
 
   getAvailableThemes () {
-    return this.serverConfig.theme.registered
-      .map(t => t.name)
+    return this.themeService.getAvailableThemeLabels()
   }
 
   doesTrendingVideosAlgorithmsEnabledInclude (algorithm: string) {
@@ -94,6 +94,10 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
       }))
   }
 
+  getDefaultThemeLabel () {
+    return this.themeService.getDefaultThemeLabel()
+  }
+
   private checkSignupField () {
     const signupControl = this.form.get('signup.enabled')
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts b/client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts
index 9b55cb43c..96f5b830e 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts
@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core'
 import { FormGroup } from '@angular/forms'
+import { prepareIcu } from '@app/helpers'
 
 export type ResolutionOption = {
   id: string
@@ -86,9 +87,10 @@ export class EditConfigurationService {
     return {
       value,
       atMost: noneOnAuto, // auto switches everything to a least estimation since ffmpeg will take as many threads as possible
-      unit: value > 1
-        ? $localize`threads`
-        : $localize`thread`
+      unit: prepareIcu($localize`{value, plural, =1 {thread} other {threads}}`)(
+        { value },
+        $localize`threads`
+      )
     }
   }
 }
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 8fef39b79..cc8e699f3 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -1,4 +1,4 @@
-<h1 class="sr-only" i18n>Configuration</h1>
+<h1 class="visually-hidden" i18n>Configuration</h1>
 
 <div class="alert alert-warning" *ngIf="!isUpdateAllowed()" i18n>
   Updating instance configuration from the web interface is disabled by the system administrator.
@@ -64,7 +64,7 @@
 
   <div [ngbNavOutlet]="nav"></div>
 
-  <div class="form-row mt-4"> <!-- submit placement block -->
+  <div class="row mt-4"> <!-- submit placement block -->
     <div class="col-md-7 col-xl-5"></div>
     <div class="col-md-5 col-xl-5">
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index 0458d257f..f3bce8ee0 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -3,11 +3,6 @@
 
 $form-base-input-width: 340px;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
 form {
   padding-bottom: 1.5rem;
 }
@@ -30,7 +25,7 @@ input[type=number] {
 
   input[type=number] + span {
     position: absolute;
-    top: 5px;
+    top: 0.2em;
     right: 2.5rem;
   }
 
@@ -74,6 +69,10 @@ input[type=submit] {
   @include settings-big-title;
 }
 
+.inner-form-description {
+  font-size: 15px;
+}
+
 textarea {
   @include peertube-textarea(500px, 150px);
 
@@ -88,6 +87,7 @@ textarea {
 .label-small-info {
   font-style: italic;
   margin-bottom: 10px;
+  font-size: 14px;
 }
 
 .disabled-checkbox-extra {
@@ -102,11 +102,6 @@ input[disabled] {
   opacity: 0.5;
 }
 
-
-.form-group-right {
-  padding-top: 2px;
-}
-
 ngb-tabset:not(.previews) ::ng-deep {
   .nav-link {
     font-size: 105%;
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 2286a5a1a..701c3c0c1 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
@@ -2,12 +2,12 @@
 
   <ng-container formGroupName="instanceCustomHomepage">
 
-    <div class="form-row mt-5"> <!-- homepage grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-5"> <!-- homepage grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">INSTANCE HOMEPAGE</div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+      <div class="col-12 col-lg-8 col-xl-9">
 
         <div class="form-group">
           <label i18n for="instanceCustomHomepageContent">Homepage</label>
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 d806616bd..5931cb459 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
@@ -2,13 +2,12 @@
 
   <ng-container formGroupName="instance">
 
-    <div class="form-row mt-5"> <!-- instance grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-5"> <!-- instance grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">INSTANCE</div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-
+      <div class="col-12 col-lg-8 col-xl-9">
         <div class="form-group">
           <label i18n for="instanceName">Name</label>
 
@@ -77,16 +76,15 @@
       </div>
     </div>
 
-    <div class="form-row mt-4"> <!-- moderation & nsfw grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-4"> <!-- moderation & nsfw grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">MODERATION & NSFW</div>
-        <div i18n class="inner-for-description">
-          Manage <a routerLink="/admin/users">users</a> to build a moderation team.
+        <div i18row="inner-form-description">
+          Manage <a class="link-orange" routerLink="/admin/users">users</a> to build a moderation team.
         </div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-
+      <div class="col-12 col-lg-8 col-xl-9">
         <div class="form-group">
           <my-peertube-checkbox inputName="instanceIsNSFW" formControlName="isNSFW">
             <ng-template ptTemplate="label">
@@ -162,12 +160,12 @@
       </div>
     </div>
 
-    <div class="form-row mt-4"> <!-- you and your instance grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-4"> <!-- you and your instance grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">YOU AND YOUR INSTANCE</div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+      <div class="col-12 col-lg-8 col-xl-9">
 
         <div class="form-group">
           <label i18n for="instanceAdministrator">Who is behind the instance?</label><my-help helpType="markdownText"></my-help>
@@ -220,12 +218,12 @@
       </div>
     </div>
 
-    <div class="form-row mt-4"> <!-- other information grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-4"> <!-- other information grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">OTHER INFORMATION</div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+      <div class="col-12 col-lg-8 col-xl-9">
 
         <div class="form-group">
           <label i18n for="instanceHardwareInformation">What server/hardware does the instance run on?</label>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
index 71d5d91f0..ae79e54fc 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
@@ -1,14 +1,14 @@
 <ng-container [formGroup]="form">
 
-  <div class="form-row mt-5">
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-5">
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">LIVE</div>
       <div i18n class="inner-form-description">
         Enable users of your instance to stream live.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="live">
 
@@ -46,9 +46,9 @@
               </div>
 
               <div class="form-group" [ngClass]="getDisabledLiveClass()">
-                <label i18n for="liveMaxInstanceLives">
-                  Max simultaneous lives created on your instance <span class="muted">(-1 for "unlimited")</span>
-                </label>
+                <label i18n for="liveMaxInstanceLives">Max simultaneous lives created on your instance</label>
+
+                <span class="ms-2 small muted">(-1 for "unlimited")</span>
 
                 <div class="number-with-unit">
                   <input type="number" name="liveMaxInstanceLives" formControlName="maxInstanceLives" />
@@ -59,9 +59,8 @@
               </div>
 
               <div class="form-group" [ngClass]="getDisabledLiveClass()">
-                <label i18n for="liveMaxUserLives">
-                  Max simultaneous lives created per user <span class="muted">(-1 for "unlimited")</span>
-                </label>
+                <label i18n for="liveMaxUserLives">Max simultaneous lives created per user</label>
+                <span class="ms-2 small muted">(-1 for "unlimited")</span>
 
                 <div class="number-with-unit">
                   <input type="number" name="liveMaxUserLives" formControlName="maxUserLives" />
@@ -89,15 +88,15 @@
     </div>
   </div>
 
-  <div class="form-row"> <!-- transcoding live streams grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row"> <!-- transcoding live streams grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">TRANSCODING</div>
       <div i18n class="inner-form-description">
         Same as VOD transcoding, transcoding live streams so that they are in a streamable form that any device can play. Requires a beefy CPU, and then some.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="live">
         <ng-container formGroupName="transcoding">
@@ -115,7 +114,7 @@
           <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
             <label i18n for="liveTranscodingThreads">Live resolutions to generate</label>
 
-            <div class="ml-2 mt-2 d-flex flex-column">
+            <div class="ms-2 mt-2 d-flex flex-column">
               <ng-container formGroupName="resolutions">
 
                 <div class="form-group" *ngFor="let resolution of liveResolutions">
@@ -136,7 +135,7 @@
           <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
             <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
 
-            <span class="muted ml-1">
+            <span class="small muted ms-1">
               <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
                 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding
               </ng-container>
@@ -157,7 +156,7 @@
 
           <div class="form-group mt-4" [ngClass]="getDisabledLiveTranscodingClass()">
             <label i18n for="liveTranscodingProfile">Live transcoding profile</label>
-            <span class="muted ml-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
+            <span class="small muted ms-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
 
             <my-select-options
               id="liveTranscodingProfile"
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
index 5c0bea4a5..66e421b16 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
@@ -1,28 +1,23 @@
 <ng-container [formGroup]="form">
 
-  <div class="form-row mt-4"> <!-- transcoding grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3"></div>
-    <div class="form-group form-group-right col-12 col-lg-8">
+  <div class="row mt-4"> <!-- transcoding grid -->
+    <div class="col-12 col-lg-4 col-xl-3"></div>
+    <div class="col-12 col-lg-8">
 
-      <div class="callout callout-info">
+      <div class="callout callout-orange">
         <span i18n>
           Estimating a server's capacity to transcode and stream videos isn't easy and we can't tune PeerTube automatically.
         </span>
+
         <span i18n>
-          However, you may want to read our guidelines before tweaking the following values.
+          However, you may want to read <a class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/admin-configuration?id=transcoding">our guidelines</a> before tweaking the following values.
         </span>
-
-        <div class="callout-container">
-          <a class="callout-link" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/admin-configuration?id=transcoding" i18n>
-            Read guidelines
-          </a>
-        </div>
       </div>
     </div>
   </div>
 
-  <div class="form-row mt-2"> <!-- transcoding grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- transcoding grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">TRANSCODING</div>
       <div i18n class="inner-form-description">
         Process uploaded videos so that they are in a streamable form that any device can play. Though costly in
@@ -30,11 +25,11 @@
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="transcoding">
 
-        <div class="form-group mb-0 col-12 col-xl-11">
+        <div class="col-12 col-xl-11">
           <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled" [recommended]="true">
             <ng-template ptTemplate="label">
               <ng-container i18n>Transcoding enabled</ng-container>
@@ -115,7 +110,11 @@
                 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
                   <label i18n>Resolutions to generate per enabled format</label>
 
-                  <div class="ml-2 mt-2 d-flex flex-column">
+                  <div class="ms-2 d-flex flex-column">
+                    <span class="mb-3 small muted" i18n>
+                      The original file resolution will be the default target if no option is selected.
+                    </span>
+
                     <ng-container formGroupName="resolutions">
                       <div class="form-group" *ngFor="let resolution of resolutions">
                         <my-peertube-checkbox
@@ -127,10 +126,6 @@
                           </ng-template>
                         </my-peertube-checkbox>
                       </div>
-
-                      <span class="mb-2 muted" i18n>
-                        The original file resolution will be the default target if no option is selected.
-                      </span>
                     </ng-container>
                   </div>
                 </div>
@@ -142,7 +137,8 @@
 
         <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
           <label i18n for="transcodingThreads">Transcoding threads</label>
-          <span class="muted ml-1">
+
+          <span class="small muted ms-1">
             <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
               will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding
             </ng-container>
@@ -162,9 +158,9 @@
           <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
         </div>
 
-        <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
+        <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
           <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
-          <span class="muted ml-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
+          <span class="small muted ms-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
 
           <div class="number-with-unit">
             <input type="number" name="transcodingConcurrency" formControlName="concurrency" />
@@ -174,9 +170,9 @@
           <div *ngIf="formErrors.transcoding.concurrency" class="form-error">{{ formErrors.transcoding.concurrency }}</div>
         </div>
 
-        <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
+        <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
           <label i18n for="transcodingProfile">Transcoding profile</label>
-          <span class="muted ml-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
+          <span class="small muted ms-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
 
           <my-select-options
             id="transcodingProfile"
@@ -193,15 +189,15 @@
     </div>
   </div>
 
-  <div class="form-row mt-2"> <!-- video studio grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-2"> <!-- video studio grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">VIDEO STUDIO</div>
       <div i18n class="inner-form-description">
         Allows your users to edit their video (cut, add intro/outro, add a watermark etc)
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="videoStudio">
         <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index 1df7bb164..5367bf517 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -12,7 +12,7 @@
 >
   <ng-template pTemplate="caption">
     <div class="caption">
-      <div class="ml-auto">
+      <div class="ms-auto">
         <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
@@ -41,15 +41,15 @@
       <td>
         <a [href]="follow.follower.url" i18n-title title="Open actor page in a new tab" target="_blank" rel="noopener noreferrer">
           {{ follow.follower.name + '@' + follow.follower.host }}
-          <span class="glyphicon glyphicon-new-window"></span>
+          <my-global-icon iconName="external-link"></my-global-icon>
         </a>
       </td>
 
       <td *ngIf="follow.state === 'accepted'">
-        <span class="badge badge-green" i18n>Accepted</span>
+        <span class="pt-badge badge-green" i18n>Accepted</span>
       </td>
       <td *ngIf="follow.state === 'pending'">
-        <span class="badge badge-yellow" i18n>Pending</span>
+        <span class="pt-badge badge-yellow" i18n>Pending</span>
       </td>
 
       <td>{{ follow.score }}</td>
@@ -59,7 +59,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td colspan="5">
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No follower found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>Your instance doesn't have any follower.</ng-container>
diff --git a/client/src/app/+admin/follows/following-list/follow-modal.component.ts b/client/src/app/+admin/follows/following-list/follow-modal.component.ts
index c40b36e10..07cc75d77 100644
--- a/client/src/app/+admin/follows/following-list/follow-modal.component.ts
+++ b/client/src/app/+admin/follows/following-list/follow-modal.component.ts
@@ -1,5 +1,6 @@
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
+import { prepareIcu } from '@app/helpers'
 import { splitAndGetNotEmpty, UNIQUE_HOSTS_OR_HANDLE_VALIDATOR } from '@app/shared/form-validators/host-validators'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { InstanceFollowService } from '@app/shared/shared-instance'
@@ -60,7 +61,13 @@ export class FollowModalComponent extends FormReactive implements OnInit {
     this.followService.follow(hostsOrHandles)
       .subscribe({
         next: () => {
-          this.notifier.success($localize`Follow request(s) sent!`)
+          this.notifier.success(
+            prepareIcu($localize`{count, plural, =1 {Follow request sent!} other {Follow requests sent!}}`)(
+              { count: hostsOrHandles.length },
+              $localize`Follow request(s) sent!`
+            )
+          )
+
           this.newFollow.emit()
         },
 
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index 767e92d18..106e1805e 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -19,7 +19,7 @@
         </a>
       </div>
 
-      <div class="ml-auto">
+      <div class="ms-auto">
         <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
@@ -43,15 +43,15 @@
       <td>
         <a [href]="follow.following.url" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
           {{ follow.following.name + '@' + follow.following.host }}
-          <span class="glyphicon glyphicon-new-window"></span>
+          <my-global-icon iconName="external-link"></my-global-icon>
         </a>
       </td>
 
       <td *ngIf="follow.state === 'accepted'">
-        <span class="badge badge-green" i18n>Accepted</span>
+        <span class="pt-badge badge-green" i18n>Accepted</span>
       </td>
       <td *ngIf="follow.state === 'pending'">
-        <span class="badge badge-yellow" i18n>Pending</span>
+        <span class="pt-badge badge-yellow" i18n>Pending</span>
       </td>
 
       <td>{{ follow.createdAt | date: 'short' }}</td>
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
index f13a0c378..12b07da11 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
@@ -46,7 +46,7 @@
       <td>
         <a [href]="redundancy.url" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
           {{ redundancy.name }}
-          <span class="glyphicon glyphicon-new-window"></span>
+          <my-global-icon iconName="external-link"></my-global-icon>
         </a>
       </td>
 
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
index 3634951c9..b302014b6 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
@@ -13,7 +13,7 @@
 >
   <ng-template pTemplate="caption">
     <div class="caption">
-      <div class="ml-auto">
+      <div class="ms-auto">
         <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
@@ -53,11 +53,11 @@
       </td>
 
       <td>
-        <span *ngIf="videoBlock.video.nsfw" class="badge badge-red" i18n>NSFW</span>
+        <span *ngIf="videoBlock.video.nsfw" class="pt-badge badge-red" i18n>NSFW</span>
       </td>
 
       <td>
-        <span *ngIf="videoBlock.unfederated" class="badge badge-blue" i18n>Unfederated</span>
+        <span *ngIf="videoBlock.unfederated" class="pt-badge badge-blue" i18n>Unfederated</span>
       </td>
 
       <td>
diff --git a/client/src/app/+admin/overview/comments/video-comment-list.component.html b/client/src/app/+admin/overview/comments/video-comment-list.component.html
index 27a5d82ff..6fdefbfe2 100644
--- a/client/src/app/+admin/overview/comments/video-comment-list.component.html
+++ b/client/src/app/+admin/overview/comments/video-comment-list.component.html
@@ -25,7 +25,7 @@
         </my-action-dropdown>
       </div>
 
-      <div class="ml-auto right-form">
+      <div class="ms-auto right-form">
         <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
 
         <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button>
diff --git a/client/src/app/+admin/overview/comments/video-comment-list.component.ts b/client/src/app/+admin/overview/comments/video-comment-list.component.ts
index f3f43a900..f01a1629b 100644
--- a/client/src/app/+admin/overview/comments/video-comment-list.component.ts
+++ b/client/src/app/+admin/overview/comments/video-comment-list.component.ts
@@ -7,6 +7,7 @@ import { DropdownAction } from '@app/shared/shared-main'
 import { BulkService } from '@app/shared/shared-moderation'
 import { VideoCommentAdmin, VideoCommentService } from '@app/shared/shared-video-comment'
 import { FeedFormat, UserRight } from '@shared/models'
+import { prepareIcu } from '@app/helpers'
 
 @Component({
   selector: 'my-video-comment-list',
@@ -145,7 +146,13 @@ export class VideoCommentListComponent extends RestTable implements OnInit {
     this.videoCommentService.deleteVideoComments(commentArgs)
       .subscribe({
         next: () => {
-          this.notifier.success($localize`${commentArgs.length} comments deleted.`)
+          this.notifier.success(
+            prepareIcu($localize`{count, plural, =1 {1 comment deleted.} other {{count} comments deleted.}}`)(
+              { count: commentArgs.length },
+              $localize`${commentArgs.length} comment(s) deleted.`
+            )
+          )
+
           this.reloadData()
         },
 
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
index 772ebf272..bfa414164 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
@@ -57,7 +57,7 @@
   </div>
 </ng-template>
 
-<div class="form-row" *ngIf="!isInBigView()"> <!-- hidden on large screens, as it is then displayed on the right side of the form -->
+<div class="row d-xxl-none"> <!-- hidden on large screens, as it is then displayed on the right side of the form -->
   <div class="col-12 col-xl-3"></div>
 
   <div class="col-12 col-xl-9">
@@ -67,8 +67,8 @@
 
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-<div class="form-row mt-4"> <!-- user grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-4"> <!-- user grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <div class="anchor" id="user"></div> <!-- user anchor -->
     <div *ngIf="isCreation()" class="account-title" i18n>NEW USER</div>
     <div *ngIf="!isCreation() && user" class="account-title">
@@ -76,150 +76,150 @@
     </div>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }">
-
-    <form role="form" (ngSubmit)="formValidated()" [formGroup]="form" [ngClass]="{ 'col-5': isInBigView() }">
-      <div class="form-group" *ngIf="isCreation()">
-        <label i18n for="username">Username</label>
-        <input
-          type="text" id="username" i18n-placeholder placeholder="john" class="form-control"
-          formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
-        >
-        <div *ngIf="formErrors.username" class="form-error">
-          {{ formErrors.username }}
+  <div class="col-12 col-lg-8 col-xl-9">
+    <div class="row">
+      <form class="col" role="form" (ngSubmit)="formValidated()" [formGroup]="form">
+        <div class="form-group" *ngIf="isCreation()">
+          <label i18n for="username">Username</label>
+          <input
+            type="text" id="username" i18n-placeholder placeholder="john" class="form-control"
+            formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
+          >
+          <div *ngIf="formErrors.username" class="form-error">
+            {{ formErrors.username }}
+          </div>
         </div>
-      </div>
 
-      <div class="form-group" *ngIf="isCreation()">
-        <label i18n for="channelName">Channel name</label>
-        <input
-          type="text" id="channelName" i18n-placeholder placeholder="john_channel" class="form-control"
-          formControlName="channelName" [ngClass]="{ 'input-error': formErrors['channelName'] }"
-        >
-        <div *ngIf="formErrors.channelName" class="form-error">
-          {{ formErrors.channelName }}
+        <div class="form-group" *ngIf="isCreation()">
+          <label i18n for="channelName">Channel name</label>
+          <input
+            type="text" id="channelName" i18n-placeholder placeholder="john_channel" class="form-control"
+            formControlName="channelName" [ngClass]="{ 'input-error': formErrors['channelName'] }"
+          >
+          <div *ngIf="formErrors.channelName" class="form-error">
+            {{ formErrors.channelName }}
+          </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <label i18n for="email">Email</label>
-        <input
-          type="text" id="email" i18n-placeholder placeholder="mail@example.com" class="form-control"
-          formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
-          autocomplete="off" [readonly]="user && user.pluginAuth !== null"
-        >
-        <div *ngIf="formErrors.email" class="form-error">
-          {{ formErrors.email }}
+        <div class="form-group">
+          <label i18n for="email">Email</label>
+          <input
+            type="text" id="email" i18n-placeholder placeholder="mail@example.com" class="form-control"
+            formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
+            autocomplete="off" [readonly]="user && user.pluginAuth !== null"
+          >
+          <div *ngIf="formErrors.email" class="form-error">
+            {{ formErrors.email }}
+          </div>
         </div>
-      </div>
 
-      <div class="form-group" *ngIf="isCreation()">
-        <label i18n for="password">Password</label>
-        <my-help *ngIf="isPasswordOptional()">
-          <ng-template ptTemplate="customHtml">
-            <ng-container i18n>
-              If you leave the password empty, an email will be sent to the user.
-            </ng-container>
-          </ng-template>
-        </my-help>
-
-        <my-input-toggle-hidden
-          formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
-        ></my-input-toggle-hidden>
-
-        <div *ngIf="formErrors.password" class="form-error">
-          {{ formErrors.password }}
+        <div class="form-group" *ngIf="isCreation()">
+          <label i18n for="password">Password</label>
+          <my-help *ngIf="isPasswordOptional()">
+            <ng-template ptTemplate="customHtml">
+              <ng-container i18n>
+                If you leave the password empty, an email will be sent to the user.
+              </ng-container>
+            </ng-template>
+          </my-help>
+
+          <my-input-text
+            formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
+          ></my-input-text>
+
+          <div *ngIf="formErrors.password" class="form-error">
+            {{ formErrors.password }}
+          </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <label i18n for="role">Role</label>
-        <div class="peertube-select-container">
-            <select id="role" formControlName="role" class="form-control">
-              <option *ngFor="let role of roles" [value]="role.value">
-               {{ role.label }}
-              </option>
-            </select>
+        <div class="form-group">
+          <label i18n for="role">Role</label>
+          <div class="peertube-select-container">
+              <select id="role" formControlName="role" class="form-control">
+                <option *ngFor="let role of roles" [value]="role.value">
+                {{ role.label }}
+                </option>
+              </select>
+          </div>
+
+          <div *ngIf="formErrors.role" class="form-error">
+            {{ formErrors.role }}
+          </div>
         </div>
 
-        <div *ngIf="formErrors.role" class="form-error">
-          {{ formErrors.role }}
+        <div class="form-group">
+          <label i18n for="videoQuota">Video quota</label>
+
+          <my-select-custom-value
+            id="videoQuota"
+            [items]="videoQuotaOptions"
+            formControlName="videoQuota"
+            i18n-inputSuffix inputSuffix="bytes" inputType="number"
+            [clearable]="false"
+          ></my-select-custom-value>
+
+          <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
+            Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br />
+            At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
+          </div>
+
+          <div *ngIf="formErrors.videoQuota" class="form-error">
+            {{ formErrors.videoQuota }}
+          </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <label i18n for="videoQuota">Video quota</label>
-
-        <my-select-custom-value
-          id="videoQuota"
-          [items]="videoQuotaOptions"
-          formControlName="videoQuota"
-          i18n-inputSuffix inputSuffix="bytes" inputType="number"
-          [clearable]="false"
-        ></my-select-custom-value>
-
-        <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
-          Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br />
-          At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
-        </div>
+        <div class="form-group">
+          <label i18n for="videoQuotaDaily">Daily video quota</label>
 
-        <div *ngIf="formErrors.videoQuota" class="form-error">
-          {{ formErrors.videoQuota }}
-        </div>
-      </div>
+          <my-select-custom-value
+            id="videoQuotaDaily"
+            [items]="videoQuotaDailyOptions"
+            formControlName="videoQuotaDaily"
+            i18n-inputSuffix inputSuffix="bytes" inputType="number"
+            [clearable]="false"
+          ></my-select-custom-value>
 
-      <div class="form-group">
-        <label i18n for="videoQuotaDaily">Daily video quota</label>
-
-        <my-select-custom-value
-          id="videoQuotaDaily"
-          [items]="videoQuotaDailyOptions"
-          formControlName="videoQuotaDaily"
-          i18n-inputSuffix inputSuffix="bytes" inputType="number"
-          [clearable]="false"
-        ></my-select-custom-value>
-
-        <div *ngIf="formErrors.videoQuotaDaily" class="form-error">
-          {{ formErrors.videoQuotaDaily }}
+          <div *ngIf="formErrors.videoQuotaDaily" class="form-error">
+            {{ formErrors.videoQuotaDaily }}
+          </div>
         </div>
-      </div>
 
-      <div class="form-group" *ngIf="!isCreation() && getAuthPlugins().length !== 0">
-        <label i18n for="pluginAuth">Auth plugin</label>
+        <div class="form-group" *ngIf="!isCreation() && getAuthPlugins().length !== 0">
+          <label i18n for="pluginAuth">Auth plugin</label>
 
-        <div class="peertube-select-container">
-          <select id="pluginAuth" formControlName="pluginAuth" class="form-control">
-            <option [value]="null" i18n>None (local authentication)</option>
-            <option *ngFor="let authPlugin of getAuthPlugins()" [value]="authPlugin">{{ authPlugin }}</option>
-          </select>
+          <div class="peertube-select-container">
+            <select id="pluginAuth" formControlName="pluginAuth" class="form-control">
+              <option [value]="null" i18n>None (local authentication)</option>
+              <option *ngFor="let authPlugin of getAuthPlugins()" [value]="authPlugin">{{ authPlugin }}</option>
+            </select>
+          </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <my-peertube-checkbox
-          inputName="byPassAutoBlock" formControlName="byPassAutoBlock"
-          i18n-labelText labelText="Doesn't need review before a video goes public"
-        ></my-peertube-checkbox>
-      </div>
+        <div class="form-group">
+          <my-peertube-checkbox
+            inputName="byPassAutoBlock" formControlName="byPassAutoBlock"
+            i18n-labelText labelText="Doesn't need review before a video goes public"
+          ></my-peertube-checkbox>
+        </div>
 
-      <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
-    </form>
+        <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+      </form>
 
-    <div *ngIf="isInBigView()" class="col-7">
-      <ng-template *ngTemplateOutlet="dashboard"></ng-template>
+      <div class="d-none d-xxl-block col-7">
+        <ng-template *ngTemplateOutlet="dashboard"></ng-template>
+      </div>
     </div>
-
   </div>
 </div>
 
 
-<div *ngIf="!isCreation() && user && user.pluginAuth === null" class="form-row mt-4"> <!-- danger zone grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div *ngIf="!isCreation() && user && user.pluginAuth === null" class="row mt-4"> <!-- danger zone grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <div class="anchor" id="danger"></div> <!-- danger zone anchor -->
     <div i18n class="account-title account-title-danger">DANGER ZONE</div>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }">
+  <div class="col-12 col-lg-8 col-xl-9">
 
     <div class="danger-zone">
       <div class="form-group reset-password-email">
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
index d7932154b..254286ae3 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
@@ -4,11 +4,6 @@
 
 $form-base-input-width: 340px;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
 .account-title {
   @include settings-big-title;
 
@@ -22,7 +17,7 @@ input:not([type=submit]) {
   display: block;
 }
 
-my-input-toggle-hidden {
+my-input-text {
   @include responsive-width($form-base-input-width);
 
   display: block;
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.ts b/client/src/app/+admin/overview/users/user-edit/user-edit.ts
index 069b62a53..395d07423 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.ts
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.ts
@@ -46,10 +46,6 @@ export abstract class UserEdit extends FormReactive implements OnInit {
       .concat(this.serverConfig.plugin.registeredExternalAuths.map(p => p.npmName))
   }
 
-  isInBigView () {
-    return this.screenService.getWindowInnerWidth() > 1600
-  }
-
   buildRoles () {
     const authUser = this.auth.getUser()
 
diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.html b/client/src/app/+admin/overview/users/user-edit/user-password.component.html
index 1238d1839..35f36e465 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-password.component.html
+++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.html
@@ -1,20 +1,16 @@
 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
-  <div class="form-group">
+  <div class="input-group">
+    <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control"
+      formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+    >
+    <button class="btn btn-sm btn-outline-secondary" (click)="togglePasswordVisibility()" type="button">
+      <ng-container *ngIf="!showPassword" i18n>Show</ng-container>
+      <ng-container *ngIf="!!showPassword" i18n>Hide</ng-container>
+    </button>
+  </div>
 
-    <div class="input-group">
-      <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control"
-        formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
-      >
-      <div class="input-group-append">
-        <button class="btn btn-sm btn-outline-secondary" (click)="togglePasswordVisibility()" type="button">
-          <ng-container *ngIf="!showPassword" i18n>Show</ng-container>
-          <ng-container *ngIf="!!showPassword" i18n>Hide</ng-container>
-        </button>
-      </div>
-    </div>
-    <div *ngIf="formErrors.password" class="form-error">
-      {{ formErrors.password }}
-    </div>
+  <div *ngIf="formErrors.password" class="form-error">
+    {{ formErrors.password }}
   </div>
 
   <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.scss b/client/src/app/+admin/overview/users/user-edit/user-password.component.scss
index acb680682..54f782086 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-password.component.scss
+++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.scss
@@ -1,13 +1,9 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-input:not([type=submit]):not([type=checkbox]) {
+input[type=text],
+input[type=password] {
   @include peertube-input-text(340px);
-
-  display: block;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right: 0;
 }
 
 input[type=submit] {
@@ -17,7 +13,3 @@ input[type=submit] {
 
   margin-top: 10px;
 }
-
-.input-group-append {
-  height: 30px;
-}
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 30d10e3cf..4da46dc7b 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
@@ -5,7 +5,7 @@
 
 <p-table
   [value]="users" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
-  [sortField]="sort.field" [sortOrder]="sort.order"  dataKey="id" [resizableColumns]="true" [(selection)]="selectedUsers"
+  [sortField]="sort.field" [sortOrder]="sort.order" dataKey="id" [resizableColumns]="true" [(selection)]="selectedUsers"
   [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false" [selectionPageOnly]="true"
   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} users"
@@ -26,7 +26,7 @@
         </a>
       </div>
 
-      <div class="ml-auto">
+      <div class="ms-auto">
         <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
 
@@ -90,7 +90,7 @@
         </my-user-moderation-dropdown>
       </td>
 
-      <td *ngIf="isSelected('username')">
+      <td *ngIf="isSelected('username')" class="cell-username">
         <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/a/' + user.username ]">
           <div class="chip two-lines">
             <my-actor-avatar [account]="user?.account" size="32"></my-actor-avatar>
@@ -101,13 +101,13 @@
           </div>
         </a>
 
-        <div *ngIf="user.accountMutedStatus.mutedByInstance" class="badges-username badge badge-red" i18n>Muted</div>
-        <div *ngIf="user.blocked" class="badges-username badge badge-red" i18n>Banned</div>
+        <div *ngIf="user.accountMutedStatus.mutedByInstance" class="pt-badge badge-red" i18n>Muted</div>
+        <div *ngIf="user.blocked" class="pt-badge badge-red" i18n>Banned</div>
       </td>
 
       <td *ngIf="isSelected('role')">
-        <span *ngIf="user.blocked" class="badge badge-banned" i18n-title title="The user was banned">{{ user.roleLabel }}</span>
-        <span *ngIf="!user.blocked" class="badge" [ngClass]="getRoleClass(user.role)">{{ user.roleLabel }}</span>
+        <span *ngIf="user.blocked" class="pt-badge badge-banned" i18n-title title="The user was banned">{{ user.roleLabel }}</span>
+        <span *ngIf="!user.blocked" class="pt-badge" [ngClass]="getRoleClass(user.role)">{{ user.roleLabel }}</span>
       </td>
 
       <td *ngIf="isSelected('email')" [title]="user.email">
@@ -139,7 +139,7 @@
 
       <td *ngIf="isSelected('quotaDaily')">
         <div class="progress" i18n-title title="Total daily video quota">
-          <div class="progress-bar secondary" role="progressbar" [style]="{ width: getUserVideoQuotaDailyPercentage(user) + '%' }"
+          <div class="progress-bar" role="progressbar" [style]="{ width: getUserVideoQuotaDailyPercentage(user) + '%' }"
                [attr.aria-valuenow]="user.rawVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.rawVideoQuotaDaily">
           </div>
           <span>{{ user.videoQuotaUsedDaily }}</span>
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 8160703f0..3c775cac5 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
@@ -1,5 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
+@use '~bootstrap/scss/functions' as *;
 
 .add-button {
   @include create-button;
@@ -23,15 +24,8 @@ tr.banned > td {
   font-weight: $font-semibold;
 }
 
-.badges-username {
-  margin-left: 15px;
-}
-
-.user-table-primary-text .glyphicon {
-  @include margin-left(0.1rem);
-
-  font-size: 80%;
-  color: #808080;
+.cell-username .pt-badge {
+  @include margin-left(15px);
 }
 
 p-tableCheckbox {
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.ts b/client/src/app/+admin/overview/users/user-list/user-list.component.ts
index d22e1355e..91f42546b 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.ts
@@ -1,8 +1,8 @@
 import { SortMeta } from 'primeng/api'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, ConfirmService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
-import { getAPIHost } from '@app/helpers'
+import { AuthService, ConfirmService, LocalStorageService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
+import { prepareIcu, getAPIHost } from '@app/helpers'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { Actor, DropdownAction } from '@app/shared/shared-main'
 import { AccountMutedStatus, BlocklistService, UserBanModalComponent, UserModerationDisplayType } from '@app/shared/shared-moderation'
@@ -22,6 +22,8 @@ type UserForList = User & {
   styleUrls: [ './user-list.component.scss' ]
 })
 export class UserListComponent extends RestTable implements OnInit {
+  private static readonly LOCAL_STORAGE_SELECTED_COLUMNS_KEY = 'admin-user-list-selected-columns'
+
   @ViewChild('userBanModal', { static: true }) userBanModal: UserBanModalComponent
 
   users: (User & { accountMutedStatus: AccountMutedStatus })[] = []
@@ -56,7 +58,7 @@ export class UserListComponent extends RestTable implements OnInit {
 
   requiresEmailVerification = false
 
-  private _selectedColumns: string[]
+  private _selectedColumns: string[] = []
 
   constructor (
     protected route: ActivatedRoute,
@@ -66,7 +68,8 @@ export class UserListComponent extends RestTable implements OnInit {
     private serverService: ServerService,
     private auth: AuthService,
     private blocklist: BlocklistService,
-    private userAdminService: UserAdminService
+    private userAdminService: UserAdminService,
+    private peertubeLocalStorage: LocalStorageService
   ) {
     super()
   }
@@ -76,11 +79,13 @@ export class UserListComponent extends RestTable implements OnInit {
   }
 
   get selectedColumns () {
-    return this._selectedColumns
+    return this._selectedColumns || []
   }
 
   set selectedColumns (val: string[]) {
     this._selectedColumns = val
+
+    this.saveSelectedColumns()
   }
 
   ngOnInit () {
@@ -126,14 +131,35 @@ export class UserListComponent extends RestTable implements OnInit {
       { id: 'role', label: $localize`Role` },
       { id: 'email', label: $localize`Email` },
       { id: 'quota', label: $localize`Video quota` },
-      { id: 'createdAt', label: $localize`Created` }
+      { id: 'createdAt', label: $localize`Created` },
+      { id: 'lastLoginDate', label: $localize`Last login` },
+
+      { id: 'quotaDaily', label: $localize`Daily quota` },
+      { id: 'pluginAuth', label: $localize`Auth plugin` }
     ]
 
-    this.selectedColumns = this.columns.map(c => c.id)
+    this.loadSelectedColumns()
+  }
+
+  loadSelectedColumns () {
+    const result = this.peertubeLocalStorage.getItem(UserListComponent.LOCAL_STORAGE_SELECTED_COLUMNS_KEY)
 
-    this.columns.push({ id: 'quotaDaily', label: $localize`Daily quota` })
-    this.columns.push({ id: 'pluginAuth', label: $localize`Auth plugin` })
-    this.columns.push({ id: 'lastLoginDate', label: $localize`Last login` })
+    if (result) {
+      try {
+        this.selectedColumns = JSON.parse(result)
+        return
+      } catch (err) {
+        console.error('Cannot load selected columns.', err)
+      }
+    }
+
+    // Default behaviour
+    this.selectedColumns = [ 'username', 'role', 'email', 'quota', 'createdAt', 'lastLoginDate' ]
+    return
+  }
+
+  saveSelectedColumns () {
+    this.peertubeLocalStorage.setItem(UserListComponent.LOCAL_STORAGE_SELECTED_COLUMNS_KEY, JSON.stringify(this.selectedColumns))
   }
 
   getIdentifier () {
@@ -164,6 +190,7 @@ export class UserListComponent extends RestTable implements OnInit {
   }
 
   getUserVideoQuotaDailyPercentage (user: UserForList) {
+    console.log(user.rawVideoQuotaUsedDaily * 100 / user.rawVideoQuotaDaily)
     return user.rawVideoQuotaUsedDaily * 100 / user.rawVideoQuotaDaily
   }
 
@@ -183,13 +210,25 @@ export class UserListComponent extends RestTable implements OnInit {
   }
 
   async unbanUsers (users: User[]) {
-    const res = await this.confirmService.confirm($localize`Do you really want to unban ${users.length} users?`, $localize`Unban`)
+    const res = await this.confirmService.confirm(
+      prepareIcu($localize`Do you really want to unban {count, plural, =1 {1 user} other {{count} users}}?`)(
+        { count: users.length },
+        $localize`Do you really want to unban ${users.length} users?`
+      ),
+      $localize`Unban`
+    )
+
     if (res === false) return
 
     this.userAdminService.unbanUsers(users)
         .subscribe({
           next: () => {
-            this.notifier.success($localize`${users.length} users unbanned.`)
+            this.notifier.success(
+              prepareIcu($localize`{count, plural, =1 {1 user unbanned.} other {{count} users unbanned.}}`)(
+                { count: users.length },
+                $localize`${users.length} users unbanned.`
+              )
+            )
             this.reloadData()
           },
 
@@ -198,21 +237,28 @@ export class UserListComponent extends RestTable implements OnInit {
   }
 
   async removeUsers (users: User[]) {
-    for (const user of users) {
-      if (user.username === 'root') {
-        this.notifier.error($localize`You cannot delete root.`)
-        return
-      }
+    if (users.some(u => u.username === 'root')) {
+      this.notifier.error($localize`You cannot delete root.`)
+      return
     }
 
-    const message = $localize`If you remove these users, you will not be able to create others with the same username!`
+    const message = $localize`<p>You can't create users or channels with a username that already used by a deleted user/channel.</p>` +
+      $localize`It means the following usernames will be permanently deleted and cannot be recovered:` +
+      '<ul>' + users.map(u => '<li>' + u.username + '</li>').join('') + '</ul>'
+
     const res = await this.confirmService.confirm(message, $localize`Delete`)
     if (res === false) return
 
     this.userAdminService.removeUser(users)
       .subscribe({
         next: () => {
-          this.notifier.success($localize`${users.length} users deleted.`)
+          this.notifier.success(
+            prepareIcu($localize`{count, plural, =1 {1 user deleted.} other {{count} users deleted.}}`)(
+              { count: users.length },
+              $localize`${users.length} users deleted.`
+            )
+          )
+
           this.reloadData()
         },
 
@@ -224,7 +270,13 @@ export class UserListComponent extends RestTable implements OnInit {
     this.userAdminService.updateUsers(users, { emailVerified: true })
       .subscribe({
         next: () => {
-          this.notifier.success($localize`${users.length} users email set as verified.`)
+          this.notifier.success(
+            prepareIcu($localize`{count, plural, =1 {1 user email set as verified.} other {{count} user emails set as verified.}}`)(
+              { count: users.length },
+              $localize`${users.length} users email set as verified.`
+            )
+          )
+
           this.reloadData()
         },
 
diff --git a/client/src/app/+admin/overview/videos/video-list.component.html b/client/src/app/+admin/overview/videos/video-list.component.html
index 75d9be5f1..2f36c27b7 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.html
+++ b/client/src/app/+admin/overview/videos/video-list.component.html
@@ -21,7 +21,7 @@
         </my-action-dropdown>
       </div>
 
-      <div class="ml-auto right-form">
+      <div class="ms-auto right-form">
         <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
 
         <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button>
@@ -67,25 +67,25 @@
       </td>
 
       <td>
-        <span class="badge badge-blue" *ngIf="video.isLocal">Local</span>
-        <span class="badge badge-purple" *ngIf="!video.isLocal">Remote</span>
+        <span class="pt-badge badge-blue" *ngIf="video.isLocal">Local</span>
+        <span class="pt-badge badge-purple" *ngIf="!video.isLocal">Remote</span>
 
-        <span [ngClass]="getPrivacyBadgeClass(video)" class="badge">{{ video.privacy.label }}</span>
+        <span [ngClass]="getPrivacyBadgeClass(video)" class="pt-badge">{{ video.privacy.label }}</span>
 
-        <span *ngIf="video.nsfw" class="badge badge-red" i18n>NSFW</span>
+        <span *ngIf="video.nsfw" class="pt-badge badge-red" i18n>NSFW</span>
 
-        <span *ngIf="isUnpublished(video)" class="badge badge-yellow" i18n>{{ video.state.label }}</span>
+        <span *ngIf="isUnpublished(video)" class="pt-badge badge-yellow" i18n>{{ video.state.label }}</span>
 
-        <span *ngIf="isAccountBlocked(video)" class="badge badge-red" i18n>Account muted</span>
-        <span *ngIf="isServerBlocked(video)" class="badge badge-red" i18n>Server muted</span>
+        <span *ngIf="isAccountBlocked(video)" class="pt-badge badge-red" i18n>Account muted</span>
+        <span *ngIf="isServerBlocked(video)" class="pt-badge badge-red" i18n>Server muted</span>
 
-        <span *ngIf="isVideoBlocked(video)" class="badge badge-red" i18n>Blocked</span>
+        <span *ngIf="isVideoBlocked(video)" class="pt-badge badge-red" i18n>Blocked</span>
       </td>
 
       <td>
-        <span *ngIf="isHLS(video)" class="badge badge-blue">HLS</span>
-        <span *ngIf="isWebTorrent(video)" class="badge badge-blue">WebTorrent ({{ video.files.length }})</span>
-        <span *ngIf="video.isLive" class="badge badge-blue">Live</span>
+        <span *ngIf="isHLS(video)" class="pt-badge badge-blue">HLS</span>
+        <span *ngIf="isWebTorrent(video)" class="pt-badge badge-blue">WebTorrent ({{ video.files.length }})</span>
+        <span *ngIf="video.isLive" class="pt-badge badge-blue">Live</span>
 
         <span *ngIf="!isImport(video) && !video.isLive && video.isLocal">{{ getFilesSize(video) | bytes: 1 }}</span>
       </td>
@@ -121,7 +121,7 @@
             </ul>
           </div>
 
-          <my-embed class="ml-auto" [video]="video"></my-embed>
+          <my-embed class="ms-auto" [video]="video"></my-embed>
         </div>
       </td>
     </tr>
diff --git a/client/src/app/+admin/overview/videos/video-list.component.scss b/client/src/app/+admin/overview/videos/video-list.component.scss
index cb47b6548..dcd41a1b4 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.scss
+++ b/client/src/app/+admin/overview/videos/video-list.component.scss
@@ -7,10 +7,8 @@ my-embed {
   width: 50%;
 }
 
-.badge {
-  @include peertube-badge;
-
-  margin-right: 5px;
+.pt-badge {
+  @include margin-right(5px);
 }
 
 .video-info > div {
diff --git a/client/src/app/+admin/overview/videos/video-list.component.ts b/client/src/app/+admin/overview/videos/video-list.component.ts
index 82ff372aa..67e52d100 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.ts
+++ b/client/src/app/+admin/overview/videos/video-list.component.ts
@@ -3,6 +3,7 @@ import { finalize } from 'rxjs/operators'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
+import { prepareIcu } from '@app/helpers'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { VideoBlockComponent, VideoBlockService } from '@app/shared/shared-moderation'
@@ -196,14 +197,24 @@ export class VideoListComponent extends RestTable implements OnInit {
   }
 
   private async removeVideos (videos: Video[]) {
-    const message = $localize`Are you sure you want to delete these ${videos.length} videos?`
+    const message = prepareIcu($localize`Are you sure you want to delete {count, plural, =1 {this video} other {these {count} videos}}?`)(
+      { count: videos.length },
+      $localize`Are you sure you want to delete these ${videos.length} videos?`
+    )
+
     const res = await this.confirmService.confirm(message, $localize`Delete`)
     if (res === false) return
 
     this.videoService.removeVideo(videos.map(v => v.id))
       .subscribe({
         next: () => {
-          this.notifier.success($localize`Deleted ${videos.length} videos.`)
+          this.notifier.success(
+            prepareIcu($localize`Deleted {count, plural, =1 {1 video} other {{count} videos}}.`)(
+              { count: videos.length },
+              $localize`Deleted ${videos.length} videos.`
+            )
+          )
+
           this.reloadData()
         },
 
@@ -215,7 +226,13 @@ export class VideoListComponent extends RestTable implements OnInit {
     this.videoBlockService.unblockVideo(videos.map(v => v.id))
       .subscribe({
         next: () => {
-          this.notifier.success($localize`Unblocked ${videos.length} videos.`)
+          this.notifier.success(
+            prepareIcu($localize`Unblocked {count, plural, =1 {1 video} other {{count} videos}}.`)(
+              { count: videos.length },
+              $localize`Unblocked ${videos.length} videos.`
+            )
+          )
+
           this.reloadData()
         },
 
@@ -224,9 +241,21 @@ export class VideoListComponent extends RestTable implements OnInit {
   }
 
   private async removeVideoFiles (videos: Video[], type: 'hls' | 'webtorrent') {
-    const message = type === 'hls'
-      ? $localize`Are you sure you want to delete ${videos.length} HLS streaming playlists?`
-      : $localize`Are you sure you want to delete WebTorrent files of ${videos.length} videos?`
+    let message: string
+
+    if (type === 'hls') {
+      // eslint-disable-next-line max-len
+      message = prepareIcu($localize`Are you sure you want to delete {count, plural, =1 {1 HLS streaming playlist} other {{count} HLS streaming playlists}}?`)(
+        { count: videos.length },
+        $localize`Are you sure you want to delete ${videos.length} HLS streaming playlists?`
+      )
+    } else {
+      // eslint-disable-next-line max-len
+      message = prepareIcu($localize`Are you sure you want to delete WebTorrent files of {count, plural, =1 {1 video} other {{count} videos}}?`)(
+        { count: videos.length },
+        $localize`Are you sure you want to delete WebTorrent files of ${videos.length} videos?`
+      )
+    }
 
     const res = await this.confirmService.confirm(message, $localize`Delete`)
     if (res === false) return
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index 33575ef52..c989d2e38 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -1,6 +1,6 @@
 <my-plugin-navigation [pluginType]="pluginType"></my-plugin-navigation>
 
-<div class="alert alert-info" i18n *ngIf="pluginInstalled">
+<div class="alert pt-alert-primary" i18n *ngIf="pluginInstalled">
   To load your new installed plugins or themes, refresh the page.
 </div>
 
@@ -32,9 +32,9 @@
   <ng-container *ngFor="let plugin of plugins" >
     <my-plugin-card [plugin]="plugin" [version]="plugin.latestVersion" [pluginType]="pluginType">
       <div ngProjectAs="badges">
-        <span i18n *ngIf="plugin.installed" class="badge badge-success">Installed</span>
+        <span i18n *ngIf="plugin.installed" class="pt-badge badge-success">Installed</span>
 
-        <span *ngIf="plugin.official" class="badge badge-primary" i18n i18n-title title="This plugin is developed by Framasoft">
+        <span *ngIf="plugin.official" class="pt-badge badge-primary" i18n i18n-title title="This plugin is developed by Framasoft">
           Official
         </span>
       </div>
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
index 10401e9df..d7b41f4d8 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
@@ -17,16 +17,13 @@
 
   input {
     @include peertube-input-text(500px);
-
-    height: 35px;
   }
 }
 
-.badge {
+.pt-badge {
   @include margin-left(15px);
 
   font-size: 13px;
-  font-weight: $font-semibold;
 }
 
 .alert {
diff --git a/client/src/app/+admin/plugins/shared/plugin-card.component.scss b/client/src/app/+admin/plugins/shared/plugin-card.component.scss
index 608064722..7ee3376a7 100644
--- a/client/src/app/+admin/plugins/shared/plugin-card.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-card.component.scss
@@ -14,12 +14,11 @@
   .plugin-name {
     @include margin-right(10px);
 
-    font-size: 16px;
     font-weight: $font-semibold;
   }
 
   .plugin-version {
-    opacity: 0.6;
+    opacity: 0.7;
   }
 
   .plugin-icon {
diff --git a/client/src/app/+admin/system/debug/debug.component.scss b/client/src/app/+admin/system/debug/debug.component.scss
index 7f5e861e2..bcbc3fc7c 100644
--- a/client/src/app/+admin/system/debug/debug.component.scss
+++ b/client/src/app/+admin/system/debug/debug.component.scss
@@ -1,11 +1,7 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.root {
-  font-size: 15px;
-
-  code {
-    font-size: 14px;
-    font-weight: $font-semibold;
-  }
+code {
+  font-size: 14px;
+  font-weight: $font-semibold;
 }
diff --git a/client/src/app/+admin/system/jobs/jobs.component.html b/client/src/app/+admin/system/jobs/jobs.component.html
index 301591786..8068fe626 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.html
+++ b/client/src/app/+admin/system/jobs/jobs.component.html
@@ -21,7 +21,7 @@
         <span i18n="Selector for the list displaying jobs, filtering by their state">any</span>
       </ng-option>
       <ng-option *ngFor="let state of jobStates" [value]="state">
-        <span class="badge" [ngClass]="getJobStateClass(state)">{{ state }}</span>
+        <span class="pt-badge" [ngClass]="getJobStateClass(state)">{{ state }}</span>
       </ng-option>
     </ng-select>
   </div>
@@ -62,7 +62,7 @@
       <td class="job-priority c-hand" [pRowToggler]="job">{{ job.priority }}</td>
 
       <td class="job-state c-hand" [pRowToggler]="job" *ngIf="jobState === 'all'">
-        <span class="badge" [ngClass]="getJobStateClass(job.state)">{{ job.state }}</span>
+        <span class="pt-badge" [ngClass]="getJobStateClass(job.state)">{{ job.state }}</span>
       </td>
 
       <td *ngIf="hasGlobalProgress()" class="job-progress c-hand" [pRowToggler]="job">
@@ -107,8 +107,8 @@
             </ng-container>
 
             <ng-container *ngIf="jobState !== 'all'">
-              <ng-container *ngIf="jobType === 'all'" i18n>No <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span> jobs found.</ng-container>
-              <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found that are <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span>.</ng-container>
+              <ng-container *ngIf="jobType === 'all'" i18n>No <span class="pt-badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span> jobs found.</ng-container>
+              <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found that are <span class="pt-badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span>.</ng-container>
             </ng-container>
           </div>
         </div>
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index a9e5e8d4b..4a76f1783 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -44,10 +44,6 @@
   }
 }
 
-td .glyphicon {
-  @include margin-right(10px);
-}
-
 pre {
   font-size: 11px;
 }
@@ -55,7 +51,3 @@ pre {
 .job-error {
   color: #ff0000;
 }
-
-.select-filter-block .badge {
-  @include peertube-badge;
-}