310 files changed, 2414 insertions, 2304 deletions

diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
index 6bc1d0448..f16f8bd71 100644
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -1,5 +1,6 @@
 <div class="row">
-  <h1 class="sr-only" i18n>Follows</h1>
+  <h1 class="visually-hidden" i18n>Follows</h1>
+
   <div class="col-xl-6 col-md-12">
     <h2 i18n class="subtitle">Follower instances ({{ followersPagination.totalItems }})</h2>
 
diff --git a/client/src/app/+about/about-follows/about-follows.component.scss b/client/src/app/+about/about-follows/about-follows.component.scss
index 80eb997e4..057d04ced 100644
--- a/client/src/app/+about/about-follows/about-follows.component.scss
+++ b/client/src/app/+about/about-follows/about-follows.component.scss
@@ -15,6 +15,7 @@ a {
 
 .no-results {
   justify-content: flex-start;
+  align-items: flex-start;
 }
 
 .show-more {
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 7f2a6aa77..b113df82f 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -8,9 +8,9 @@
     </div>
 
     <div class="instance-badges" *ngIf="categories.length !== 0 || languages.length !== 0">
-      <span *ngFor="let category of categories" class="badge badge-primary category">{{ category }}</span>
+      <span *ngFor="let category of categories" class="pt-badge badge-primary">{{ category }}</span>
 
-      <span *ngFor="let language of languages" class="badge badge-secondary language">{{ language }}</span>
+      <span *ngFor="let language of languages" class="pt-badge badge-secondary">{{ language }}</span>
     </div>
 
     <div class="short-description">
@@ -204,7 +204,7 @@
   </div>
 
   <div class="col-md-12 col-xl-6" myPluginSelector pluginSelectorId="about-instance-features">
-    <h2 class="sr-only" i18n>FEATURES</h2>
+    <h2 class="visually-hidden" i18n>FEATURES</h2>
     <my-instance-features-table></my-instance-features-table>
   </div>
 
diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
index 965c04b6c..c01e690d1 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -19,27 +19,19 @@
 }
 
 .instance-badges {
-  font-size: 16px;
   margin-bottom: 20px;
 
-  .badge {
+  .pt-badge {
     @include margin-right(5px);
-
-    font-size: 12px;
-    font-weight: $font-semibold;
-
-    &.category {
-      background-color: pvar(--mainColor);
-    }
   }
 }
 
 .section-title {
   font-weight: $font-semibold;
-  font-size: 16px;
   margin-bottom: 5px;
   display: flex;
   align-items: center;
+  font-size: 1rem;
 }
 
 .middle-title {
@@ -51,7 +43,6 @@
 
 .block {
   margin-bottom: 75px;
-  font-size: 15px;
 }
 
 .short-description {
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html
index ed027af44..a14ba3a4f 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.html
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html
@@ -53,7 +53,7 @@
       </div>
     </form>
 
-    <div *ngIf="!isContactFormEnabled()" class="alert alert-error" i18n>The contact form is not enabled on this instance.</div>
+    <div *ngIf="!isContactFormEnabled()" class="alert alert-danger" i18n>The contact form is not enabled on this instance.</div>
 
   </div>
 </ng-template>
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.scss b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
index e143a9dc6..6db6f13b3 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.scss
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
@@ -2,7 +2,6 @@
 @use '_mixins' as *;
 
 .modal-subtitle {
-  font-size: 16px;
   line-height: 1rem;
   margin-bottom: 0;
 }
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.html b/client/src/app/+about/about-peertube/about-peertube.component.html
index 62689e3ae..f8700d9b6 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.html
+++ b/client/src/app/+about/about-peertube/about-peertube.component.html
@@ -11,12 +11,12 @@
     </p>
 
     <p i18n>
-      It is free and open-source software, under <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE">AGPLv3
+      It is free and open-source software, under <a class="link-orange" href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE">AGPLv3
       licence</a>.
     </p>
 
     <p i18n>
-      For more information, please visit <a target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org">joinpeertube.org</a>.
+      For more information, please visit <a class="link-orange" target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org">joinpeertube.org</a>.
     </p>
   </div>
 
@@ -25,9 +25,8 @@
     <div class="card">
       <div class="card-body">
         <div class="card-title">
-          <a i18n target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/use-setup-account">Use PeerTube
-            documentation</a>
-          </div>
+          <a i18n class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/use-setup-account">Use PeerTube documentation</a>
+        </div>
 
         <div i18n class="card-text">
           Discover how to setup your account, what is a channel, how to create a playlist and more!
@@ -38,9 +37,8 @@
     <div class="card">
       <div class="card-body">
         <div class="card-title">
-          <a i18n target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/use-third-party-application">PeerTube
-            Applications</a>
-          </div>
+          <a i18n class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/use-third-party-application">PeerTube Applications</a>
+        </div>
 
         <div i18n class="card-text">
           Discover unofficial Android applications or browser addons!
@@ -51,9 +49,8 @@
     <div class="card">
       <div class="card-body">
         <div class="card-title">
-          <a i18n target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/contribute-getting-started">Contribute on
-            PeerTube</a>
-          </div>
+          <a i18n class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/contribute-getting-started">Contribute on PeerTube</a>
+        </div>
 
         <div i18n class="card-text">
           Want to help to improve PeerTube? You can translate the web interface, give your feedback or directly contribute to the code!
@@ -116,7 +113,7 @@
           Web peers are not publicly accessible: because we use the websocket transport, the protocol is different from classic BitTorrent tracker.
           When you are in a web browser, you send a signal containing your IP address to the tracker that will randomly choose other peers
           to forward the information to.
-          See <a href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information
+          See <a class="link-orange" href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information
         </li>
       </ul>
 
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.scss b/client/src/app/+about/about-peertube/about-peertube.component.scss
index 2a5ec08f5..a0d227a28 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube.component.scss
@@ -37,18 +37,6 @@
   .card {
     margin: 30px;
     flex-basis: 300px;
-    font-size: 15px;
-  }
-}
-
-.description,
-.p2p-privacy,
-my-about-peertube-contributors {
-  ::ng-deep {
-    p,
-    li {
-      font-size: 15px;
-    }
   }
 }
 
@@ -70,7 +58,9 @@ my-about-peertube-contributors {
 }
 
 .card-title {
-  font-size: 1.25rem;
+  font-size: 1.1rem;
+  text-align: center;
+  margin-bottom: 1rem;
 }
 
 .p2p-privacy-title {
diff --git a/client/src/app/+about/about.component.html b/client/src/app/+about/about.component.html
index 63d429ebf..cf302e061 100644
--- a/client/src/app/+about/about.component.html
+++ b/client/src/app/+about/about.component.html
@@ -1,13 +1,10 @@
-<div class="row">
+<div>
   <div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed }">
+    <a myPluginSelector pluginSelectorId="about-menu-instance" i18n routerLink="instance" routerLinkActive="active" class="sub-menu-entry">Instance</a>
 
-    <div class="links">
-      <a myPluginSelector pluginSelectorId="about-menu-instance" i18n routerLink="instance" routerLinkActive="active" class="title-page title-page-about">Instance</a>
+    <a myPluginSelector pluginSelectorId="about-menu-peertube" i18n routerLink="peertube" routerLinkActive="active" class="sub-menu-entry">PeerTube</a>
 
-      <a myPluginSelector pluginSelectorId="about-menu-peertube" i18n routerLink="peertube" routerLinkActive="active" class="title-page title-page-about">PeerTube</a>
-
-      <a myPluginSelector pluginSelectorId="about-menu-network" i18n routerLink="follows" routerLinkActive="active" class="title-page title-page-about">Network</a>
-    </div>
+    <a myPluginSelector pluginSelectorId="about-menu-network" i18n routerLink="follows" routerLinkActive="active" class="sub-menu-entry">Network</a>
   </div>
 
   <div class="margin-content" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 379c0443e..0dfa87074 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -1,4 +1,4 @@
-<h1 class="sr-only" i18n>Video channels</h1>
+<h1 class="visually-hidden" i18n>Video channels</h1>
 
 <div class="margin-content">
 
@@ -23,10 +23,10 @@
         </h2>
 
         <div class="actor-counters">
-          <div class="followers" i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
+          <div class="followers" i18n>{videoChannel.followersCount, plural, =0 {No subscribers} =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
 
           <span class="videos-count" *ngIf="getTotalVideosOf(videoChannel) !== undefined" i18n>
-            {getTotalVideosOf(videoChannel), plural, =1 {1 videos} other {{{ getTotalVideosOf(videoChannel) }} videos}}
+            {getTotalVideosOf(videoChannel), plural, =0 {No videos} =1 {1 video} other {{{ getTotalVideosOf(videoChannel) }} videos}}
           </span>
         </div>
 
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 30b8098be..832ddf973 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -65,7 +65,6 @@
     grid-row: 2;
 
     max-height: 80px;
-    font-size: 16px;
   }
 }
 
@@ -105,7 +104,6 @@ my-subscribe-button {
 
   a {
     color: pvar(--mainColor);
-    font-size: 16px;
     font-weight: $font-semibold;
   }
 }
@@ -126,10 +124,6 @@ my-subscribe-button {
       grid-row: 1 / 4;
     }
 
-    h2 {
-      font-size: 16px;
-    }
-
     .actor-counters {
       margin: 0;
       font-size: 13px;
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 8362e6b7e..0be2271c7 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -18,7 +18,7 @@
                 (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
               ></my-user-moderation-dropdown>
 
-              <span *ngIf="accountUser?.blocked" [ngbTooltip]="accountUser.blockedReason" class="badge badge-danger" i18n>Banned</span>
+              <span *ngIf="accountUser?.blocked" [ngbTooltip]="accountUser.blockedReason" class="pt-badge badge-danger" i18n>Banned</span>
 
               <my-account-block-badges [account]="account"></my-account-block-badges>
             </div>
@@ -28,15 +28,15 @@
               <button [cdkCopyToClipboard]="account.nameWithHostForced" (click)="activateCopiedMessage()"
                       class="btn btn-outline-secondary btn-sm copy-button" title="Copy account handle" i18n-title
               >
-                <span class="glyphicon glyphicon-duplicate"></span>
+                <my-global-icon iconName="copy"></my-global-icon>
               </button>
             </div>
 
             <div class="actor-counters">
-              <span i18n>{naiveAggregatedSubscribers(), plural, =1 {1 subscriber} other {{{ naiveAggregatedSubscribers() }} subscribers}}</span>
+              <span i18n>{naiveAggregatedSubscribers(), plural, =0 {No subscribers} =1 {1 subscriber} other {{{ naiveAggregatedSubscribers() }} subscribers}}</span>
 
               <span class="videos-count" *ngIf="accountVideosCount !== undefined" i18n>
-                {accountVideosCount, plural, =1 {1 videos} other {{{ accountVideosCount }} videos}}
+                {accountVideosCount, plural, =0 {No videos} =1 {1 video} other {{{ accountVideosCount }} videos}}
               </span>
             </div>
           </div>
@@ -66,7 +66,7 @@
 
   <div class="links" [ngClass]="{ 'on-channel-page': isOnChannelPage() }">
     <ng-template #linkTemplate let-item="item">
-      <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
+      <a [routerLink]="item.routerLink" routerLinkActive="active" class="sub-menu-entry">{{ item.label }}</a>
     </ng-template>
 
     <my-list-overflow [hidden]="hideMenu" [items]="links" [itemTemplate]="linkTemplate"></my-list-overflow>
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 5043b98c4..e5f86e61e 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -37,7 +37,13 @@ my-user-moderation-dropdown {
 }
 
 .copy-button {
+  @include margin-left(3px);
+
   border: 0;
+
+  my-global-icon {
+    width: 15px;
+  }
 }
 
 .account-info {
@@ -93,6 +99,10 @@ my-user-moderation-dropdown {
   }
 }
 
+.pt-badge {
+  @include margin-right(5px);
+}
+
 @media screen and (max-width: $small-view) {
   .root {
     --myGlobalTopPadding: 45px;
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index 898325492..cf66b817a 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -30,8 +30,6 @@ export class AccountsComponent implements OnInit, OnDestroy {
   links: ListOverflowItem[] = []
   hideMenu = false
 
-  accountFollowerTitle = ''
-
   accountVideosCount: number
   accountDescriptionHTML = ''
   accountDescriptionExpanded = false
@@ -121,12 +119,6 @@ export class AccountsComponent implements OnInit, OnDestroy {
     this.notifier.success($localize`Username copied`)
   }
 
-  subscribersDisplayFor (count: number) {
-    if (count === 1) return $localize`1 subscriber`
-
-    return $localize`${count} subscribers`
-  }
-
   searchChanged (search: string) {
     const queryParams = { search }
 
@@ -150,8 +142,6 @@ export class AccountsComponent implements OnInit, OnDestroy {
   }
 
   private async onAccount (account: Account) {
-    this.accountFollowerTitle = $localize`${account.followersCount} direct account followers`
-
     this.accountDescriptionHTML = await this.markdown.textMarkdownToHTML(account.description)
 
     // After the markdown renderer to avoid layout changes
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;
-}
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index dc74354d8..834ea6e51 100644
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -1,15 +1,38 @@
+<h1 i18n class="title-page-v2">
+  <strong class="underline-orange">{{ instanceName }}</strong>
+  >
+  Login
+</h1>
+
 <div class="margin-content">
-  <div i18n class="title-page title-page-single">
-    Login
-  </div>
+  <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">
 
-  <div class="alert alert-danger" i18n *ngIf="externalAuthError">
-    Sorry but there was an issue with the external login process. Please <a routerLink="/about">contact an administrator</a>.
-  </div>
+    <div class="alert pt-alert-primary" role="alert">
+      <h5 class="alert-heading" i18n>
+        Logging into an account lets you publish content
+      </h5>
 
-  <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">
-    <div *ngIf="error" class="alert alert-danger">{{ error }}
-      <span *ngIf="error === 'User email is not verified.'"> <a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a></span>
+      <p *ngIf="signupAllowed" i18n>
+        This instance allows registration. However, be careful to check the <a class="link-orange terms-anchor" (click)="onTermsClick($event, instanceInformation)" href='#'>Terms</a><a class="terms-link" target="_blank" routerLink="/about/instance" fragment="terms">Terms</a> before creating an account.
+        You may also search for another instance to match your exact needs at: <a class="link-orange" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>.
+      </p>
+
+      <p *ngIf="!signupAllowed" i18n>
+        Currently this instance doesn't allow for user registration, you may check the <a (click)="onTermsClick($event, instanceInformation)" href='#'>Terms</a> for more details or find an instance that gives you the possibility to sign up for an account and upload your videos there.
+        Find yours among multiple instances at: <a class="link-orange" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>.
+      </p>
+    </div>
+
+    <div class="alert alert-danger" i18n *ngIf="externalAuthError">
+      Sorry but there was an issue with the external login process. Please <a class="link-orange" routerLink="/about">contact an administrator</a>.
+    </div>
+
+    <div *ngIf="error" class="alert alert-danger">
+      {{ error }}
+
+      <a *ngIf="error === 'User email is not verified.'" class="ms-1 link-orange" i18n routerLink="/verify-account/ask-send-email">
+        Request new verification email
+      </a>
     </div>
 
     <div class="wrapper">
@@ -18,16 +41,14 @@
         <form myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form">
           <div class="form-group">
             <div>
-              <label i18n for="username">User</label>
+              <label i18n for="username">Username or email address</label>
               <input
-                type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1"
+                type="text" id="username" i18n-placeholder placeholder="Example: john@example.com" required tabindex="1"
                 formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" myAutofocus
               >
             </div>
 
-            <div *ngIf="formErrors.username" class="form-error">
-              {{ formErrors.username }}
-            </div>
+            <div *ngIf="formErrors.username" class="form-error">{{ formErrors.username }}</div>
 
             <div *ngIf="hasUsernameUppercase()" i18n class="form-warning">
               ⚠️ Most email addresses do not include capital letters.
@@ -36,40 +57,24 @@
 
           <div class="form-group">
             <label i18n for="password">Password</label>
-            <my-input-toggle-hidden formControlName="password" inputId="password"
+
+            <my-input-text formControlName="password" inputId="password"
                                     i18n-placeholder placeholder="Password"
                                     [ngClass]="{ 'input-error': formErrors['password'] }"
-                                    autocomplete="current-password" [tabindex]="2"></my-input-toggle-hidden>
-            <div *ngIf="formErrors.password" class="form-error">
-              {{ formErrors.password }}
-            </div>
+                                    autocomplete="current-password" [tabindex]="2"></my-input-text>
+
+            <div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
           </div>
 
           <input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid">
 
-          <div class="additionnal-links">
-            <a i18n role="button" class="forgot-password-button" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a>
+          <div class="additional-links">
+            <a i18n role="button" class="link-orange" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a>
 
-            <div *ngIf="signupAllowed" class="signup-link">
+            <ng-container *ngIf="signupAllowed">
               <span>·</span>
-              <a i18n routerLink="/signup" class="create-an-account">Create an account</a>
-            </div>
-          </div>
-
-          <div class="looking-for-account alert alert-info"  role="alert">
-            <h6 class="alert-heading" i18n>
-              Logging into an account lets you publish content
-            </h6>
-
-            <div *ngIf="signupAllowed" i18n>
-              This instance allows registration. However, be careful to check the <a class="terms-anchor" (click)="onTermsClick($event, instanceInformation)" href='#'>Terms</a><a class="terms-link" target="_blank" routerLink="/about/instance" fragment="terms">Terms</a> before creating an account.
-              You may also search for another instance to match your exact needs at: <br /><a class="alert-link" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>.
-            </div>
-
-            <div *ngIf="!signupAllowed" i18n>
-              Currently this instance doesn't allow for user registration, you may check the <a (click)="onTermsClick($event, instanceInformation)" href='#'>Terms</a> for more details or find an instance that gives you the possibility to sign up for an account and upload your videos there.
-              Find yours among multiple instances at: <br /> <a class="alert-link" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>.
-            </div>
+              <a i18n routerLink="/signup" class="link-orange">Create an account</a>
+            </ng-container>
           </div>
         </form>
 
@@ -86,6 +91,7 @@
 
       <div #instanceInformation class="instance-information">
         <my-instance-about-accordion
+          [displayInstanceName]="false"
           (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"
           pluginScope="login" pluginHook="filter:login.instance-about-plugin-panels.create.result"
         ></my-instance-about-accordion>
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index 49c873cd4..d31d428f7 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -6,11 +6,13 @@
 
 label {
   display: block;
+  font-size: 18px;
+  margin-bottom: 5px;
 }
 
 input[type=text],
 input[type=email] {
-  @include peertube-input-text(340px);
+  @include peertube-input-text(100%);
 }
 
 .modal-body {
@@ -21,7 +23,7 @@ input[type=email] {
   }
 }
 
-@media screen and (max-width: #{map-get($container-max-widths, sm)}) {
+@media screen and (max-width: $small-view) {
   .modal-body {
     #forgot-password-email {
       width: 100%;
@@ -33,114 +35,102 @@ input[type=email] {
   }
 }
 
-.create-an-account,
-.forgot-password-button {
-  color: pvar(--mainForegroundColor);
-  cursor: pointer;
-  transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
-
-  &:hover {
-    text-decoration: none !important;
-    opacity: .7 !important;
-  }
-}
-
 .wrapper {
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
   flex-wrap: wrap;
+  margin: auto;
 
   > div {
     flex: 1 1;
   }
 
-  .login-form-and-externals {
-    @include margin-left(10px);
-    @include margin-right(10px);
+  form {
+    width: 100%;
+  }
+}
 
-    display: flex;
-    flex-wrap: wrap;
-    font-size: 15px;
-    max-width: 450px;
-    margin-bottom: 40px;
+.wrapper,
+.alert {
+  max-width: 1200px;
+}
 
-    form {
-      margin: 0;
+.alert {
+  margin: 0 auto 30px;
+}
 
-      &,
-      input {
-        width: 100%;
-      }
+.login-form-and-externals {
+  @include margin-left(10px);
+  @include margin-right(10px);
 
-      .additionnal-links {
-        display: block;
-        text-align: center;
-        margin-top: 20px;
-        margin-bottom: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 450px;
+  margin-bottom: 40px;
 
-        .forgot-password-button,
-        .create-an-account {
-          padding: 4px;
-          display: inline-block;
+  form {
+    margin: 0;
 
-          color: var(--mainColor);
+    input[type=submit] {
+      width: 100%;
+    }
 
-          &:hover,
-          &:active {
-            color: var(--mainHoverColor);
-          }
-        }
+    .additional-links {
+      display: flex;
+      justify-content: center;
+      margin: 20px 0 30px;
+
+      .link-orange {
+        margin: 0 15px;
       }
     }
+  }
+}
 
-    .external-login-blocks {
-      min-width: 200px;
+.external-login-blocks {
+  min-width: 200px;
+  text-align: center;
 
-      .block-title {
-        font-weight: $font-semibold;
-      }
+  .block-title {
+    font-weight: $font-semibold;
+  }
 
-      .external-login-block {
-        @include disable-default-a-behaviour;
-
-        cursor: pointer;
-        border: 1px solid #d1d7e0;
-        border-radius: 5px;
-        color: pvar(--mainForegroundColor);
-        margin: 10px 10px 0 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-height: 35px;
-        min-width: 100px;
-
-        &:hover {
-          background-color: rgba(209, 215, 224, 0.5);
-        }
-      }
-    }
+  .external-login-block {
+    @include disable-default-a-behaviour;
 
-    .signup-link {
-      display: inline-block;
+    cursor: pointer;
+    border: 1px solid #d1d7e0;
+    border-radius: 5px;
+    color: pvar(--mainForegroundColor);
+    margin: 10px 10px 0 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 35px;
+    min-width: 100px;
+
+    &:hover {
+      background-color: rgba(209, 215, 224, 0.5);
     }
   }
+}
 
-  .instance-information {
-    @include margin-left(10px);
-    @include margin-right(10px);
+.instance-information {
+  @include margin-left(10px);
+  @include margin-right(10px);
 
-    max-width: 600px;
-    min-width: 350px;
-    margin-bottom: 40px;
-  }
+  max-width: 600px;
+  min-width: 350px;
+  margin-bottom: 40px;
+}
 
-  .terms-anchor {
-    display: inline;
-  }
+.terms-anchor {
+  display: inline;
+}
 
-  .terms-link {
-    display: none;
-  }
+.terms-link {
+  display: none;
 }
 
 @mixin column-reverse-display {
diff --git a/client/src/app/+login/login.component.ts b/client/src/app/+login/login.component.ts
index 96754b782..2ed9be16c 100644
--- a/client/src/app/+login/login.component.ts
+++ b/client/src/app/+login/login.component.ts
@@ -59,6 +59,10 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
     return this.serverConfig.signup.allowed === true
   }
 
+  get instanceName () {
+    return this.serverConfig.instance.name
+  }
+
   onTermsClick (event: Event, instanceInformation: HTMLElement) {
     event.preventDefault()
 
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
index 3751747a9..f71f73fec 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
@@ -3,42 +3,41 @@
 <div class="margin-content">
   <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
 
-    <div class="form-row"> <!-- channel grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row"> <!-- channel grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div *ngIf="isCreation()" class="video-channel-title" i18n>NEW CHANNEL</div>
         <div *ngIf="!isCreation() && videoChannel" class="video-channel-title" i18n>CHANNEL</div>
       </div>
-  
-      <div class="form-group col-12 col-lg-8 col-xl-9">
-        <h6 i18n>Banner image of the channel</h6>
-  
+
+      <div class="col-12 col-lg-8 col-xl-9">
+        <label i18n>Banner image of the channel</label>
+
         <my-actor-banner-edit
           *ngIf="videoChannel" [previewImage]="isCreation()"
           [actor]="videoChannel" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
         ></my-actor-banner-edit>
-  
+
         <my-actor-avatar-edit
           *ngIf="videoChannel" [previewImage]="isCreation()"
           [actor]="videoChannel" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
           [displayUsername]="!isCreation()" [displaySubscribers]="!isCreation()"
         ></my-actor-avatar-edit>
-  
+
         <div class="form-group" *ngIf="isCreation()">
           <label i18n for="name">Name</label>
+
           <div class="input-group">
             <input
               type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
               formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control"
             >
-            <div class="input-group-append">
-              <span class="input-group-text">@{{ instanceHost }}</span>
-            </div>
+            <div class="input-group-text">@{{ instanceHost }}</div>
           </div>
           <div *ngIf="formErrors['name']" class="form-error">
             {{ formErrors['name'] }}
           </div>
         </div>
-  
+
         <div class="form-group">
           <label i18n for="display-name">Display name</label>
           <input
@@ -49,7 +48,7 @@
             {{ formErrors['display-name'] }}
           </div>
         </div>
-  
+
         <div class="form-group">
           <label i18n for="description">Description</label>
           <textarea
@@ -60,7 +59,7 @@
             {{ formErrors.description }}
           </div>
         </div>
-  
+
         <div class="form-group">
           <label for="support">Support</label>
           <my-help
@@ -75,22 +74,22 @@
             {{ formErrors.support }}
           </div>
         </div>
-  
+
         <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()">
           <my-peertube-checkbox
             inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate"
             i18n-labelText labelText="Overwrite support field of all videos of this channel"
           ></my-peertube-checkbox>
         </div>
-  
+
       </div>
     </div>
-  
-    <div class="form-row"> <!-- submit placement block -->
+
+    <div class="row"> <!-- submit placement block -->
       <div class="col-md-7 col-xl-5"></div>
       <div class="col-md-5 col-xl-5 d-inline-flex">
         <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
       </div>
     </div>
-  </form>  
-</div>
\ No newline at end of file
+  </form>
+</div>
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
index d010d6277..008397a7a 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
@@ -5,11 +5,6 @@
   padding-top: 20px;
 }
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
 .video-channel-title {
   @include settings-big-title;
 }
@@ -24,31 +19,21 @@ my-actor-banner-edit {
   max-width: 500px;
 }
 
-.input-group {
-  @include peertube-input-group(fit-content);
-}
-
-.input-group-append {
-  height: 30px;
-}
+input[type=text] {
+  @include peertube-input-text(340px);
 
-input {
-  &[type=text] {
-    @include peertube-input-text(340px);
-
-    display: block;
+  display: block;
 
-    &#name {
-      width: auto;
-      flex-grow: 1;
-    }
+  &#name {
+    width: auto;
+    flex-grow: 1;
   }
+}
 
-  &[type=submit] {
-    @include peertube-button;
-    @include orange-button;
-    @include margin-left(auto);
-  }
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+  @include margin-left(auto);
 }
 
 textarea {
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
index 68d094a4f..2fc691707 100644
--- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
@@ -3,8 +3,9 @@
   <ng-container i18n>Applications</ng-container>
 </h1>
 
-<div class="form-row"> <!-- built-in token grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row"> <!-- built-in token grid -->
+
+  <div class="group col-12 col-lg-4 col-xl-3">
     <h2 i18n class="applications-title">SUBSCRIPTION FEED</h2>
     <div i18n class="applications-description">
       Use third-party feed aggregators to retrieve the list of videos from
@@ -12,16 +13,16 @@
     </div>
   </div>
 
-  <div class="form-group 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="feed-url">Feed URL</label>
-      <my-input-toggle-hidden [value]="feedUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-text [value]="feedUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
     </div>
 
     <div class="form-group">
       <label i18n for="feed-token">Feed Token</label>
-      <my-input-toggle-hidden [value]="feedToken" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-text [value]="feedToken" [withCopy]="true" [readonly]="true"></my-input-text>
 
       <div class="form-group-description" i18n>⚠️ Never share your feed token with anyone.</div>
     </div>
@@ -29,7 +30,7 @@
   </div>
 </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">
     <input (click)="renewToken()" type="submit" i18n-value value="Renew token">
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
index 2a3b85c22..b3fedd2f6 100644
--- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
 .applications-title {
   @include settings-big-title;
 }
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
index f0e9f4010..b98cd1156 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@@ -1,11 +1,11 @@
-<h1 class="sr-only" i18n>Notifications</h1>
+<h1 class="visually-hidden" i18n>Notifications</h1>
 <div class="header">
   <a routerLink="/my-account/settings" fragment="notifications" i18n>
     <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
     Notification preferences
   </a>
 
-  <div class="peertube-select-container peertube-select-button ml-2 mr-2">
+  <div class="peertube-select-container peertube-select-button ms-2 me-2">
     <select [(ngModel)]="notificationSortType" (ngModelChange)="onChangeSortColumn()" class="form-control">
       <option value="undefined" disabled>Sort by</option>
       <option value="createdAt" i18n>Newest first</option>
@@ -13,7 +13,7 @@
     </select>
   </div>
 
-  <button class="btn ml-auto" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
+  <button class="btn ms-auto" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
     <ng-container *ngIf="hasUnreadNotifications()">
       <my-global-icon iconName="tick" aria-hidden="true"></my-global-icon>
 
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
index b0ac45e30..d412e568f 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -3,7 +3,6 @@
 
 .header {
   display: flex;
-  font-size: 15px;
   margin-bottom: 20px;
 
   a {
@@ -23,11 +22,6 @@
   }
 }
 
-
-my-user-notifications {
-  font-size: 15px;
-}
-
 @media screen and (max-width: $mobile-view) {
   .header {
     flex-direction: column;
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
index 6d2d7d46e..c9f9d8f55 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
@@ -1,18 +1,20 @@
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 <div *ngIf="success" class="alert alert-success">{{ success }}</div>
 
-<div i18n class="current-email">
-  Your current email is <span class="email">{{ user.email }}</span>.
-  It is never shown to the public.
-</div>
-
 <div i18n class="pending-email" *ngIf="user.pendingEmail">
-  <span class="email">{{ user.pendingEmail }}</span> is awaiting email verification
+  <strong>{{ user.pendingEmail }}</strong> is awaiting email verification
 </div>
 
 <form role="form" class="change-email" (ngSubmit)="changeEmail()" [formGroup]="form" *ngIf="user.pluginAuth === null">
 
   <div class="form-group">
+    <label i18n for="new-email">Change your email</label>
+
+    <div i18n class="form-group-description">
+      Your current email is <strong>{{ user.email }}</strong>.
+      It is never shown to the public.
+    </div>
+
     <input
       type="email" id="new-email" i18n-placeholder placeholder="New email" class="form-control"
       formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }"
@@ -23,11 +25,11 @@
   </div>
 
   <div class="form-group">
-    <my-input-toggle-hidden formControlName="password"
+    <my-input-text formControlName="password"
                             id="password"
                             i18n-placeholder placeholder="Current password"
                             [ngClass]="{ 'input-error': formErrors['password'] }"
-                            autocomplete="current-password"></my-input-toggle-hidden>
+                            autocomplete="current-password"></my-input-text>
     <div *ngIf="formErrors['password']" class="form-error">
       {{ formErrors['password'] }}
     </div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
index 788db02ad..8d1804a93 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
@@ -1,18 +1,17 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
+form {
+  max-width: 340px;
 }
 
-my-input-toggle-hidden {
-  width: 340px;
+my-input-text {
   display: block;
+  width: 100%;
 }
 
 input[type=email] {
-  @include peertube-input-text(340px);
+  @include peertube-input-text(100%);
 
   display: block;
 }
@@ -22,15 +21,6 @@ input[type=submit] {
   @include orange-button;
 }
 
-.current-email,
 .pending-email {
   margin-bottom: 15px;
-
-  .email {
-    font-weight: $font-semibold;
-  }
-}
-
-.form-group {
-  width: max-content;
 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
index 43facb7ed..f1deb4273 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
@@ -3,29 +3,29 @@
 <form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
 
   <label i18n for="current-password">Change password</label>
-  <my-input-toggle-hidden formControlName="current-password"
+  <my-input-text formControlName="current-password"
                           inputId="current-password"
                           i18n-placeholder placeholder="Current password"
                           [ngClass]="{ 'input-error': formErrors['current-password'] }"
-                          autocomplete="current-password"></my-input-toggle-hidden>
+                          autocomplete="current-password"></my-input-text>
   <div *ngIf="formErrors['current-password']" class="form-error">
     {{ formErrors['current-password'] }}
   </div>
 
-  <my-input-toggle-hidden formControlName="new-password"
+  <my-input-text formControlName="new-password"
                           inputId="new-password"
                           i18n-placeholder placeholder="New password"
                           [ngClass]="{ 'input-error': formErrors['new-password'] }"
-                          autocomplete="new-password"></my-input-toggle-hidden>
+                          autocomplete="new-password"></my-input-text>
   <div *ngIf="formErrors['new-password']" class="form-error">
     {{ formErrors['new-password'] }}
   </div>
 
-  <my-input-toggle-hidden formControlName="new-confirmed-password"
+  <my-input-text formControlName="new-confirmed-password"
                           inputId="new-confirmed-password"
                           i18n-placeholder placeholder="Confirm new password"
                           [ngClass]="{ 'input-error': formErrors['new-confirmed-password'] }"
-                          autocomplete="new-password"></my-input-toggle-hidden>
+                          autocomplete="new-password"></my-input-text>
   <div *ngIf="formErrors['new-confirmed-password']" class="form-error">
     {{ formErrors['new-confirmed-password'] }}
   </div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
index c46aae266..a29f04c36 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
@@ -1,17 +1,16 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
+form {
+  max-width: 340px;
 }
 
-my-input-toggle-hidden {
-  width: 340px;
+my-input-text {
   display: block;
+  width: 100%;
 }
 
-my-input-toggle-hidden + my-input-toggle-hidden {
+my-input-text + my-input-text {
   margin-top: 15px;
 }
 
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
index c3cfe0314..46f5e5d6b 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
@@ -1,13 +1,13 @@
 <div *ngIf="webNotifications">
   <ng-container *ngFor="let group of notificationSettingGroups">
-    <div class="header custom-row">
+    <div class="header notification-row">
       <div i18n>{{ group.label }}</div>
       <div i18n>Web</div>
       <div i18n *ngIf="emailEnabled">Email</div>
     </div>
 
     <ng-container *ngFor="let notificationType of group.keys">
-      <div class="custom-row" *ngIf="hasUserRight(notificationType)">
+      <div class="small notification-row" *ngIf="hasUserRight(notificationType)">
         <div>{{ labelNotifications[notificationType] }}</div>
 
         <div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
index 2fe1f9536..8181c3175 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -1,13 +1,12 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.custom-row {
+.notification-row {
   display: flex;
   align-items: center;
   border-bottom: 1px solid $separator-border-color;
 
   &.header {
-    font-size: 16px;
     font-weight: $font-semibold;
     margin-top: 10px;
   }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
index 7c13282fa..769ab647a 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
@@ -37,7 +37,7 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
       myVideoPublished: $localize`Video published (after transcoding/scheduled update)`,
       myVideoImportFinished: $localize`Video import finished`,
       newUserRegistration: $localize`A new user registered on your instance`,
-      newFollow: $localize`You or your channel(s) has a new follower`,
+      newFollow: $localize`You or one of your channels has a new follower`,
       commentMention: $localize`Someone mentioned you in video comments`,
       newInstanceFollower: $localize`Your instance has a new follower`,
       autoInstanceFollowing: $localize`Your instance automatically followed another instance`,
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
index ae5f25cff..2b192ab6d 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
@@ -8,7 +8,7 @@
       type="text" id="username" class="form-control"
       formControlName="username" readonly
     >
-    <div class="muted" i18n>
+    <div class="form-group-description" i18n>
       People can find you using @{{ user.username }}@{{ instanceHost }}
     </div>
   </div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
index cbac81d01..23e701332 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
@@ -1,15 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
-.form-group:first-child {
-  margin-bottom: 15px;
-}
-
 input#username + .muted {
   margin-top: 5px;
 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index 8ca197fd4..d9e833019 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -1,83 +1,83 @@
-<h1 class="sr-only" i18n>Settings</h1>
-<div class="form-row"> <!-- preview -->
-  <div class="form-group col-12 col-lg-4 col-xl-3"></div>
+<h1 class="visually-hidden" i18n>Settings</h1>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+<div class="row"> <!-- preview -->
+  <div class="col-12 col-lg-4 col-xl-3"></div>
+
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-actor-avatar-edit [actor]="user.account" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"></my-actor-avatar-edit>
   </div>
 </div>
 
-<div class="form-row"> <!-- profile settings grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-3"> <!-- profile settings grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <h2 i18n class="account-title">PROFILE SETTINGS</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
-
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-user-quota [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota>
 
     <my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile>
   </div>
 </div>
 
-<div class="form-row mt-5"> <!-- interface grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5"> <!-- interface grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <h2 i18n class="account-title">INTERFACE</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-user-interface-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-interface-settings>
   </div>
 </div>
 
-<div class="form-row mt-5"> <!-- video settings grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5"> <!-- video settings grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <div class="anchor" id="video-settings"></div> <!-- video settings anchor -->
     <h2 i18n class="account-title">VIDEO SETTINGS</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-user-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-video-settings>
   </div>
 </div>
 
-<div class="form-row mt-5"> <!-- notifications grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5"> <!-- notifications grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <div class="anchor" id="notifications"></div> <!-- notifications anchor -->
     <h2 i18n class="account-title">NOTIFICATIONS</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-account-notification-preferences [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-notification-preferences>
   </div>
 </div>
 
-<div class="form-row mt-5" *ngIf="user.pluginAuth === null"> <!-- password grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5" *ngIf="user.pluginAuth === null"> <!-- password grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <h2 i18n class="account-title">PASSWORD</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-account-change-password></my-account-change-password>
   </div>
 </div>
 
-<div class="form-row mt-5"> <!-- email grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5"> <!-- email grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <h2 i18n class="account-title">EMAIL</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-account-change-email></my-account-change-email>
   </div>
 </div>
 
-<div class="form-row mt-5"> <!-- danger zone grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5"> <!-- danger zone grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <h2 i18n class="account-title account-title-danger">DANGER ZONE</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-account-danger-zone [user]="user"></my-account-danger-zone>
   </div>
 </div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
index 1c216d79d..8206f4dd8 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
@@ -1,5 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
+@use '~bootstrap/scss/functions' as *;
 
 .account-title {
   @include settings-big-title;
@@ -9,6 +10,6 @@
   }
 }
 
-.form-group {
+.row > div {
   max-width: 500px;
 }
diff --git a/client/src/app/+my-account/my-account.component.html b/client/src/app/+my-account/my-account.component.html
index b465d0156..1c44c8472 100644
--- a/client/src/app/+my-account/my-account.component.html
+++ b/client/src/app/+my-account/my-account.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="root">
   <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
 
   <div class="margin-content pb-5" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss
index 1ec25315a..6275b7ac2 100644
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -1,7 +1,7 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.row {
+.root {
   @include sub-menu-h1;
 
   flex-direction: column;
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
index 89327b065..f39f90803 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -1,7 +1,7 @@
 <h1>
   <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
   <ng-container i18n>My channels</ng-container>
-  <span class="badge badge-secondary">{{ totalItems }}</span>
+  <span *ngIf="totalItems" class="pt-badge badge-secondary">{{ totalItems }}</span>
 </h1>
 
 <my-channels-setup-message [hideLink]="true"></my-channels-setup-message>
@@ -31,10 +31,14 @@
         i18n class="video-channel-followers"
         [routerLink]="[ '/my-library', 'followers' ]" [queryParams]="{ search: 'channel:' + videoChannel.name }"
       >
-        {videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
+        {videoChannel.followersCount, plural, =0 {No subscribers} =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
       </a>
 
-      <div i18n class="video-channel-videos">{videoChannel.videosCount, plural, =0 {No videos} =1 {1 video} other {{{ videoChannel.videosCount }} videos}}</div>
+      <div class="d-flex">
+        <span i18n>{videoChannel.videosCount, plural, =0 {No videos} =1 {1 video} other {{{ videoChannel.videosCount }} videos}}</span>
+        <span class="mx-1">·</span>
+        <span i18n>{videoChannel.totalViews, plural, =0 {No views} =1 {1 view} other {{{ videoChannel.totalViews | myNumberFormatter }} views}}</span>
+      </div>
 
       <div class="video-channel-buttons">
         <my-edit-button label [routerLink]="[ '/manage/update', videoChannel.nameWithHost ]"></my-edit-button>
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.html b/client/src/app/+my-library/my-follows/my-followers.component.html
index a8a3da863..ef2ab7aca 100644
--- a/client/src/app/+my-library/my-follows/my-followers.component.html
+++ b/client/src/app/+my-library/my-follows/my-followers.component.html
@@ -2,7 +2,7 @@
   <span>
     <my-global-icon iconName="follower" aria-hidden="true"></my-global-icon>
     <ng-container i18n>My followers</ng-container>
-    <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
+    <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
   </span>
 </h1>
 
@@ -19,10 +19,10 @@
     <div class="actor-info">
       <a [href]="follow.follower.url" class="actor-names" rel="noopener noreferrer" target="_blank" i18n-title title="Follower page">
         <div class="actor-display-name">{{ follow.follower.name + '@' + follow.follower.host }}</div>
-        <span class="glyphicon glyphicon-new-window"></span>
+        <my-global-icon iconName="external-link"></my-global-icon>
       </a>
 
-      <div class="muted">
+      <div class="small muted">
         <ng-container *ngIf="isFollowingAccount(follow)" i18n>Is following all your channels</ng-container>
         <ng-container *ngIf="!isFollowingAccount(follow)" i18n>Is following your channel {{ follow.following.name }}</ng-container>
       </div>
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.scss b/client/src/app/+my-library/my-follows/my-followers.component.scss
index fae4cd972..2caa4cc48 100644
--- a/client/src/app/+my-library/my-follows/my-followers.component.scss
+++ b/client/src/app/+my-library/my-follows/my-followers.component.scss
@@ -13,14 +13,4 @@ input[type=text] {
 
 .actor {
   @include actor-row($min-height: auto, $separator: true);
-
-  .actor-display-name {
-    font-size: 16px;
-
-    + .glyphicon {
-      @include margin-left(5px);
-
-      font-size: 12px;
-    }
-  }
 }
diff --git a/client/src/app/+my-library/my-follows/my-subscriptions.component.html b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
index 391c4d3be..11d460b19 100644
--- a/client/src/app/+my-library/my-follows/my-subscriptions.component.html
+++ b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
@@ -2,7 +2,7 @@
   <span>
     <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
     <ng-container i18n>My subscriptions</ng-container>
-    <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
+    <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
   </span>
 </h1>
 
diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
index 14bf01804..6791dab52 100644
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -1,6 +1,7 @@
 <h1>
   <my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My watch history</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
+  <ng-container i18n>My watch history</ng-container>
+  <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
 </h1>
 
 <div class="top-buttons">
@@ -26,7 +27,7 @@
   [titlePage]="titlePage"
   [getVideosObservableFunction]="getVideosObservableFunction"
   [user]="user"
-  i18n-noResultMessage noResultMessage="You don't have any video in your watch history yet."
+  [noResultMessage]="getNoResultMessage()"
   [enableSelection]="false"
   [disabled]="disabled"
   #videosSelection
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
index 3257b2215..21011a089 100644
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -6,7 +6,6 @@
   justify-content: center;
   margin-top: 50px;
   font-weight: $font-semibold;
-  font-size: 16px;
 }
 
 .top-buttons {
@@ -29,11 +28,11 @@
 
     grid-column: 3;
     display: flex;
+    align-items: center;
 
     label {
       margin: 0 0 0 5px;
       color: var(--greyForegroundColor);
-      font-size: 15px;
       font-weight: $font-semibold;
     }
   }
@@ -44,8 +43,6 @@
     @include button-with-icon;
 
     grid-column: 4;
-
-    font-size: 15px;
   }
 }
 
diff --git a/client/src/app/+my-library/my-history/my-history.component.ts b/client/src/app/+my-library/my-history/my-history.component.ts
index f6b712908..c4878c957 100644
--- a/client/src/app/+my-library/my-history/my-history.component.ts
+++ b/client/src/app/+my-library/my-history/my-history.component.ts
@@ -93,8 +93,8 @@ export class MyHistoryComponent implements OnInit, DisableForReuseHook {
       .subscribe({
         next: () => {
           const message = this.videosHistoryEnabled === true
-            ? $localize`Videos history is enabled`
-            : $localize`Videos history is disabled`
+            ? $localize`Video history is enabled`
+            : $localize`Video history is disabled`
 
           this.notifier.success(message)
 
@@ -117,8 +117,8 @@ export class MyHistoryComponent implements OnInit, DisableForReuseHook {
   }
 
   async clearAllHistory () {
-    const title = $localize`Delete videos history`
-    const message = $localize`Are you sure you want to delete all your videos history?`
+    const title = $localize`Delete video history`
+    const message = $localize`Are you sure you want to delete all your video history?`
 
     const res = await this.confirmService.confirm(message, title)
     if (res !== true) return
@@ -126,7 +126,7 @@ export class MyHistoryComponent implements OnInit, DisableForReuseHook {
     this.userHistoryService.clearAll()
         .subscribe({
           next: () => {
-            this.notifier.success($localize`Videos history deleted`)
+            this.notifier.success($localize`Video history deleted`)
 
             this.reloadData()
           },
@@ -134,4 +134,12 @@ export class MyHistoryComponent implements OnInit, DisableForReuseHook {
           error: err => this.notifier.error(err.message)
         })
   }
+
+  getNoResultMessage () {
+    if (this.search) {
+      return $localize`No videos found for "${this.search}".`
+    }
+
+    return $localize`You don't have any video in your watch history yet.`
+  }
 }
diff --git a/client/src/app/+my-library/my-library.component.html b/client/src/app/+my-library/my-library.component.html
index b465d0156..1c44c8472 100644
--- a/client/src/app/+my-library/my-library.component.html
+++ b/client/src/app/+my-library/my-library.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="root">
   <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
 
   <div class="margin-content pb-5" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
diff --git a/client/src/app/+my-library/my-library.component.scss b/client/src/app/+my-library/my-library.component.scss
index 1ec25315a..6275b7ac2 100644
--- a/client/src/app/+my-library/my-library.component.scss
+++ b/client/src/app/+my-library/my-library.component.scss
@@ -1,7 +1,7 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.row {
+.root {
   @include sub-menu-h1;
 
   flex-direction: column;
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.html b/client/src/app/+my-library/my-ownership/my-ownership.component.html
index c29c71c0a..01470e46f 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.html
@@ -65,7 +65,7 @@
       <td>{{ videoChangeOwnership.createdAt | date: 'short' }}</td>
 
       <td>
-        <span class="badge"
+        <span class="pt-badge"
           [ngClass]="getStatusClass(videoChangeOwnership.status)">{{ videoChangeOwnership.status }}</span>
       </td>
     </tr>
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 d32477270..a8450ff1b 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
@@ -55,13 +55,6 @@
     color: pvar(--mainForegroundColor);
     line-height: 1rem;
 
-    div .glyphicon {
-      @include margin-left(0.1rem);
-
-      font-size: 80%;
-      color: #808080;
-    }
-
     div + div {
       font-size: 80%;
     }
diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
index 1525d0bd1..79fb4da26 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
@@ -50,7 +50,7 @@
       </td>
 
       <td>
-        <span class="badge" [ngClass]="getVideoImportStateClass(videoImport.state.id)">
+        <span class="pt-badge" [ngClass]="getVideoImportStateClass(videoImport.state.id)">
           {{ videoImport.state.label }}
         </span>
       </td>
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
index c39e90a1e..35682cf81 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
@@ -20,13 +20,13 @@
 
 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
 
-  <div class="form-row"> <!-- playlist grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row"> <!-- playlist grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div *ngIf="isCreation()" class="video-playlist-title" i18n>NEW PLAYLIST</div>
       <div *ngIf="!isCreation() && videoPlaylistToUpdate" class="video-playlist-title" i18n>PLAYLIST</div>
     </div>
 
-    <div class="form-group col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <div class="col-md-12 col-xl-6">
         <div class="form-group">
@@ -88,7 +88,7 @@
         </div>
       </div>
 
-      <div class="form-row"> <!-- submit placement block -->
+      <div class="row"> <!-- submit placement block -->
         <div class="col-md-7 col-xl-5"></div>
         <div class="col-md-5 col-xl-5 d-inline-flex">
           <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
index 840e449ea..93bc18fe2 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
 .video-playlist-title {
   @include settings-big-title;
 }
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
index 25b742bff..0091f70be 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
@@ -1,6 +1,7 @@
 <h1>
   <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
+  <ng-container i18n>My playlists</ng-container>
+  <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
 </h1>
 
 <my-channels-setup-message></my-channels-setup-message>
diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
index 955fd4884..56ff0e788 100644
--- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
@@ -17,7 +17,7 @@
   </div>
 
   <div class="modal-footer">
-    <div class="form-group inputs">
+    <div class="inputs">
       <input
         type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
         (click)="dismiss()" (key.enter)="dismiss()"
diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
index 0eb694162..48c073192 100644
--- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
@@ -4,7 +4,3 @@
 p-autocomplete {
   display: block;
 }
-
-.form-group {
-  margin: 20px 0;
-}
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html
index 7f12e2c71..146dcf41e 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.html
+++ b/client/src/app/+my-library/my-videos/my-videos.component.html
@@ -2,7 +2,7 @@
   <span>
     <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
     <ng-container i18n>My videos</ng-container>
-    <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
+    <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
   </span>
 
   <div>
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts
index 91cc06702..2f1eb84ba 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.ts
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@@ -4,7 +4,7 @@ import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User } from '@app/core'
 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
-import { immutableAssign } from '@app/helpers'
+import { prepareIcu, immutableAssign } from '@app/helpers'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { LiveStreamInformationComponent } from '@app/shared/shared-video-live'
@@ -167,7 +167,10 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
                                     .map(k => parseInt(k, 10))
 
     const res = await this.confirmService.confirm(
-      $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`,
+      prepareIcu($localize`Do you really want to delete {length, plural, =1 {this video} other {{length} videos}}?`)(
+        { length: toDeleteVideosIds.length },
+        $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`
+      ),
       $localize`Delete`
     )
     if (res === false) return
@@ -184,7 +187,13 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
       .pipe(toArray())
       .subscribe({
         next: () => {
-          this.notifier.success($localize`${toDeleteVideosIds.length} videos deleted.`)
+          this.notifier.success(
+            prepareIcu($localize`{length, plural, =1 {Video has been deleted} other {{length} videos have been deleted}}`)(
+              { length: toDeleteVideosIds.length },
+              $localize`${toDeleteVideosIds.length} have been deleted.`
+            )
+          )
+
           this.selection = {}
         },
 
diff --git a/client/src/app/+page-not-found/page-not-found.component.html b/client/src/app/+page-not-found/page-not-found.component.html
index 0333f9550..70ede26e8 100644
--- a/client/src/app/+page-not-found/page-not-found.component.html
+++ b/client/src/app/+page-not-found/page-not-found.component.html
@@ -1,7 +1,7 @@
 <div class="root">
   <div *ngIf="status !== 403 && status !== 418" class="box">
     <strong>{{ status }}.</strong>
-    <span class="ml-1 muted" i18n>That's an error.</span>
+    <span class="ms-1 muted" i18n>That's an error.</span>
 
     <div class="text mt-4">
       <ng-container *ngIf="type === 'video'" i18n>We couldn't find any video tied to the URL {{ pathname }} you were looking for.</ng-container>
@@ -24,7 +24,7 @@
 
   <div *ngIf="status === 403" class="box">
     <strong>{{ status }}.</strong>
-    <span class="ml-1 muted" i18n>You are not authorized here.</span>
+    <span class="ms-1 muted" i18n>You are not authorized here.</span>
 
     <div class="text mt-4">
       <ng-container *ngIf="type === 'video'" i18n>You might need to check your account is allowed by the video or instance owner.</ng-container>
@@ -34,7 +34,7 @@
 
   <div *ngIf="status === 418" class="box">
     <strong>{{ status }}.</strong>
-    <span class="ml-1 muted">I'm a teapot.</span>
+    <span class="ms-1 muted">I'm a teapot.</span>
 
     <div class="text mt-4" i18n="Description of a tea flavour, keeping the 'requested entity body' as a technical expression referring to a web request">
       The requested entity body blends sweet bits with a mellow earthiness.
diff --git a/client/src/app/+remote-interaction/remote-interaction.component.html b/client/src/app/+remote-interaction/remote-interaction.component.html
index e59783b9a..135ddc00b 100644
--- a/client/src/app/+remote-interaction/remote-interaction.component.html
+++ b/client/src/app/+remote-interaction/remote-interaction.component.html
@@ -1,7 +1,5 @@
 <div class="root">
 
-  <div class="alert alert-error" *ngIf="error">
-    {{ error }}
-  </div>
+  <div class="alert alert-danger" *ngIf="error">{{ error }}</div>
 
 </div>
diff --git a/client/src/app/+reset-password/reset-password.component.html b/client/src/app/+reset-password/reset-password.component.html
index 143f426ec..130873593 100644
--- a/client/src/app/+reset-password/reset-password.component.html
+++ b/client/src/app/+reset-password/reset-password.component.html
@@ -1,31 +1,32 @@
 <div class="margin-content">
-  <div i18n class="title-page title-page-single">
-    Reset my password
-  </div>
+  <h1 i18n class="title-page">Reset my password</h1>
 
   <form role="form" (ngSubmit)="resetPassword()" [formGroup]="form">
     <div class="form-group">
       <label i18n for="password">Password</label>
-      <my-input-toggle-hidden formControlName="password" inputId="password"
-                              i18n-placeholder placeholder="Password"
-                              [ngClass]="{ 'input-error': formErrors['password'] }"
-                              autocomplete="new-password"></my-input-toggle-hidden>
-      <div *ngIf="formErrors.password" class="form-error">
-        {{ formErrors.password }}
-      </div>
+
+      <my-input-text
+        formControlName="password" inputId="password" i18n-placeholder placeholder="Password"
+        [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
+      ></my-input-text>
+
+      <div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
     </div>
 
     <div class="form-group">
       <label i18n for="password-confirm">Confirm password</label>
-      <my-input-toggle-hidden formControlName="password-confirm" inputId="password-confirm"
-                              i18n-placeholder placeholder="Confirmed password"
-                              [ngClass]="{ 'input-error': formErrors['password-confirm'] }"
-                              autocomplete="new-password"></my-input-toggle-hidden>
-      <div *ngIf="formErrors['password-confirm']" class="form-error">
-        {{ formErrors['password-confirm'] }}
-      </div>
+
+      <my-input-text
+        formControlName="password-confirm" inputId="password-confirm" i18n-placeholder placeholder="Confirmed password"
+        [ngClass]="{ 'input-error': formErrors['password-confirm'] }" autocomplete="new-password"
+      ></my-input-text>
+
+      <div *ngIf="formErrors['password-confirm']" class="form-error">{{ formErrors['password-confirm'] }}</div>
     </div>
 
-    <input type="submit" i18n-value value="Reset my password" [disabled]="!form.valid || !isConfirmedPasswordValid()">
+    <input
+      class="peertube-button orange-button" type="submit" i18n-value value="Reset my password"
+      [disabled]="!form.valid || !isConfirmedPasswordValid()"
+    >
   </form>
 </div>
diff --git a/client/src/app/+reset-password/reset-password.component.scss b/client/src/app/+reset-password/reset-password.component.scss
index 5494e29c6..dd981ca39 100644
--- a/client/src/app/+reset-password/reset-password.component.scss
+++ b/client/src/app/+reset-password/reset-password.component.scss
@@ -1,12 +1,7 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-input:not([type=submit]) {
-  @include peertube-input-text(340px);
+my-input-text {
+  max-width: 340px;
   display: block;
 }
-
-input[type=submit] {
-  @include peertube-button;
-  @include orange-button;
-}
diff --git a/client/src/app/+search/search-filters.component.html b/client/src/app/+search/search-filters.component.html
index c4861e8c4..5bce009d5 100644
--- a/client/src/app/+search/search-filters.component.html
+++ b/client/src/app/+search/search-filters.component.html
@@ -77,7 +77,7 @@
         </div>
 
         <div class="row">
-          <div class="pl-0 col-sm-6">
+          <div class="ps-0 col-sm-6">
             <input
               (change)="onDurationOrPublishedUpdated()"
               (keydown.enter)="$event.preventDefault()"
@@ -87,7 +87,7 @@
               class="form-control"
             >
           </div>
-          <div class="pr-0 col-sm-6">
+          <div class="pe-0 col-sm-6">
             <input
               (change)="onDurationOrPublishedUpdated()"
               (keydown.enter)="$event.preventDefault()"
diff --git a/client/src/app/+search/search-filters.component.scss b/client/src/app/+search/search-filters.component.scss
index ece4ba5b5..c55e59310 100644
--- a/client/src/app/+search/search-filters.component.scss
+++ b/client/src/app/+search/search-filters.component.scss
@@ -6,7 +6,6 @@ form {
 }
 
 .radio-label {
-  font-size: 15px;
   font-weight: $font-bold;
 }
 
@@ -22,10 +21,6 @@ form {
   margin-bottom: 1rem;
 }
 
-.form-group {
-  margin-bottom: 25px;
-}
-
 input[type=text] {
   @include peertube-input-text(100%);
   display: block;
diff --git a/client/src/app/+search/search.component.html b/client/src/app/+search/search.component.html
index 2c84dd930..247dfb56a 100644
--- a/client/src/app/+search/search.component.html
+++ b/client/src/app/+search/search.component.html
@@ -2,22 +2,22 @@
   <div class="results-header">
     <div class="first-line">
       <div class="results-counter" *ngIf="pagination.totalItems">
-        <span class="mr-1" i18n>{{ pagination.totalItems | myNumberFormatter }} {pagination.totalItems, plural, =1 {result} other {results}}</span>
+        <span class="me-1" i18n>{{ pagination.totalItems | myNumberFormatter }} {pagination.totalItems, plural, =1 {result} other {results}}</span>
 
-        <span class="mr-1" i18n *ngIf="advancedSearch.searchTarget === 'local'">on this instance</span>
-        <span class="mr-1" i18n *ngIf="advancedSearch.searchTarget === 'search-index'">on the vidiverse</span>
+        <span class="me-1" i18n *ngIf="advancedSearch.searchTarget === 'local'">on this instance</span>
+        <span class="me-1" i18n *ngIf="advancedSearch.searchTarget === 'search-index'">on the vidiverse</span>
 
         <span *ngIf="currentSearch" i18n>for <span class="search-value">{{ currentSearch }}</span></span>
       </div>
 
       <div
-        class="results-filter-button ml-auto" (click)="isSearchFilterCollapsed = !isSearchFilterCollapsed" role="button"
+        class="results-filter-button ms-auto" (click)="isSearchFilterCollapsed = !isSearchFilterCollapsed" role="button"
         [attr.aria-expanded]="!isSearchFilterCollapsed" aria-controls="collapseBasic"
       >
         <span class="icon icon-filter"></span>
         <ng-container i18n>
           Filters
-          <span *ngIf="numberOfFilters() > 0" class="badge badge-secondary">{{ numberOfFilters() }}</span>
+          <span *ngIf="numberOfFilters() > 0" class="pt-badge badge-secondary">{{ numberOfFilters() }}</span>
         </ng-container>
       </div>
     </div>
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
index cab1d0e88..11d95df6a 100644
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@@ -20,7 +20,6 @@
 }
 
 .results-header {
-  font-size: 16px;
   padding-bottom: 20px;
   margin-bottom: 30px;
   border-bottom: 1px solid #DADADA;
diff --git a/client/src/app/+search/search.component.ts b/client/src/app/+search/search.component.ts
index b9ec6dbcc..62b1c4446 100644
--- a/client/src/app/+search/search.component.ts
+++ b/client/src/app/+search/search.component.ts
@@ -248,11 +248,11 @@ export class SearchComponent implements OnInit, OnDestroy {
   }
 
   private updateTitle () {
-    const suffix = this.currentSearch
-      ? ' ' + this.currentSearch
-      : ''
+    const title = this.currentSearch
+      ? $localize`Search ${this.currentSearch}`
+      : $localize`Search`
 
-    this.metaService.setTitle($localize`Search` + suffix)
+    this.metaService.setTitle(title)
   }
 
   private updateUrlFromAdvancedSearch () {
diff --git a/client/src/app/+signup/+register/custom-stepper.component.html b/client/src/app/+signup/+register/custom-stepper.component.html
index aad2f31d3..f43a46842 100644
--- a/client/src/app/+signup/+register/custom-stepper.component.html
+++ b/client/src/app/+signup/+register/custom-stepper.component.html
@@ -1,24 +1,29 @@
-<section class="container">
+<section>
   <header *ngIf="steps.length > 2">
-    <ng-container *ngFor="let step of steps; let i = index; let isLast = last;">
-      <div
-        class="step-info" [ngClass]="{ active: selectedIndex === i, completed: isCompleted(step), 'c-hand': isAccessible(i) }" [attr.aria-current]="selectedIndex === i"
-        (click)="onClick(i)"
-      >
-        <div class="step-index">
-          <ng-container *ngIf="!isCompleted(step)"><span class="sr-only" i18n>Step</span> {{ i + 1 }}</ng-container>
-          <my-global-icon *ngIf="isCompleted(step)" iconName="tick"></my-global-icon>
-        </div>
+    <div class="header-steps">
+      <ng-container *ngFor="let step of steps; let i = index; let isLast = last;">
+        <div
+          class="step-info" [ngClass]="{ active: selectedIndex === i, completed: isCompleted(step), 'c-hand': isAccessible(step) }" [attr.aria-current]="selectedIndex === i"
+          (click)="onClick(i)"
+        >
+          <div class="step-index">
+            <span class="visually-hidden" i18n>Step</span> {{ i + 1 }}
+
+            <div class="completed-icon" *ngIf="isCompleted(step)">
+              <my-global-icon iconName="tick"></my-global-icon>
+            </div>
+          </div>
 
-        <div class="step-label">{{ step.label }}</div>
-      </div>
+          <div class="step-label">{{ step.label }}</div>
+        </div>
 
-      <!-- Do no display if this is the last child -->
-      <div *ngIf="!isLast" class="connector"></div>
-    </ng-container>
+        <!-- Do no display if this is the last child -->
+        <div *ngIf="!isLast" class="connector"></div>
+      </ng-container>
+    </div>
   </header>
 
-  <div [style.display]="selected ? 'block' : 'none'">
+  <div class="margin-content" [style.display]="selected ? 'block' : 'none'">
     <ng-container [ngTemplateOutlet]="selected.content"></ng-container>
   </div>
 
diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss
index 6a8815c77..dfbdc863b 100644
--- a/client/src/app/+signup/+register/custom-stepper.component.scss
+++ b/client/src/app/+signup/+register/custom-stepper.component.scss
@@ -2,76 +2,113 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-$grey-color: #9CA3AB;
-$index-block-height: 32px;
+$index-block-height: 40px;
 
-.container {
-  @include padding-left(0);
-  @include padding-right(0);
-  max-width: unset !important;
+header {
+  margin-bottom: 40px;
+  padding-bottom: 60px;
+  width: 100%;
+  background-color: pvar(--mainColorVeryLight);
 }
 
-header {
+.header-steps {
+  max-width: 800px;
   display: flex;
   justify-content: space-between;
-  font-size: 15px;
-  margin-bottom: 30px;
+  margin: auto;
+
+  // Useful on small screens
+  padding: 0 20px;
+}
 
-  .step-info {
-    color: $grey-color;
+.step-index {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: $index-block-height;
+  height: $index-block-height;
+  border-radius: $index-block-height;
+  border: 1px solid pvar(--mainColor);
+  margin-bottom: 10px;
+  font-size: 24px;
+  position: relative;
+
+  .completed-icon {
+    width: 16px;
+    height: 16px;
+    border-radius: 16px;
+    background-color: pvar(--mainBackgroundColor);
+    position: absolute;
+    bottom: 0;
+    right: 0;
     display: flex;
-    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    width: $index-block-height;
+    border: 1px solid pvar(--mainColor);
+
+    my-global-icon {
+      @include apply-svg-color(pvar(--mainColor));
 
-    &:not(.c-hand) {
-      cursor: default;
+      display: flex;
+      width: 12px;
+      height: 12px;
     }
+  }
+}
 
+.step-label {
+  width: max-content;
+  font-size: 18px;
+}
+
+.step-info {
+  color: pvar(--mainColor);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: $index-block-height;
+  opacity: 0.5;
+  cursor: default;
+
+  &.c-hand {
+    cursor: pointer;
+  }
+
+  &.active,
+  &.completed {
     .step-index {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: $index-block-height;
-      height: $index-block-height;
-      border-radius: 100px;
-      border: 2px solid $grey-color;
-      margin-bottom: 10px;
-
-      my-global-icon {
-        @include apply-svg-color(pvar(--mainBackgroundColor));
-
-        width: 22px;
-        height: 22px;
-      }
+      background-color: pvar(--mainColor);
+      color: pvar(--mainBackgroundColor);
     }
 
     .step-label {
-      width: max-content;
+      color: pvar(--mainColor);
     }
+  }
 
-    &.active,
-    &.completed {
-      .step-index {
-        border-color: pvar(--mainColor);
-        background-color: pvar(--mainColor);
-        color: pvar(--mainBackgroundColor);
-      }
-
-      .step-label {
-        color: pvar(--mainColor);
-      }
-    }
+  &.active {
+    opacity: 1;
+  }
+}
 
-    &.completed {
-      cursor: pointer;
-    }
+.connector {
+  flex: auto;
+  margin: math.div($index-block-height, 2) 10px 0 10px;
+  height: 2px;
+  background-color: pvar(--mainColor);
+  opacity: 0.3;
+}
+
+@media screen and (min-width: $small-view) {
+  .margin-content {
+    max-width: 1000px;
+    margin: auto;
   }
+}
 
-  .connector {
-    flex: auto;
-    margin: math.div($index-block-height, 2) 10px 0 10px;
-    height: 2px;
-    background-color: $grey-color;
+@media screen and (max-width: $small-view) {
+  .step-label {
+    width: auto;
+    text-align: center;
   }
 }
diff --git a/client/src/app/+signup/+register/custom-stepper.component.ts b/client/src/app/+signup/+register/custom-stepper.component.ts
index 3b7ba40e8..4c308f7b6 100644
--- a/client/src/app/+signup/+register/custom-stepper.component.ts
+++ b/client/src/app/+signup/+register/custom-stepper.component.ts
@@ -14,13 +14,10 @@ export class CustomStepperComponent extends CdkStepper {
   }
 
   isCompleted (step: CdkStep) {
-    return step.stepControl?.dirty && step.stepControl.valid
+    return step.completed
   }
 
-  isAccessible (index: number) {
-    const stepsCompletedMap = this.steps.map(step => this.isCompleted(step))
-    return index === 0
-      ? true
-      : stepsCompletedMap[index - 1]
+  isAccessible (step: CdkStep) {
+    return step.editable && step.completed
   }
 }
diff --git a/client/src/app/+signup/+register/register-step-channel.component.html b/client/src/app/+signup/+register/register-step-channel.component.html
deleted file mode 100644
index 67f332409..000000000
--- a/client/src/app/+signup/+register/register-step-channel.component.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<form role="form" [formGroup]="form">
-
-  <div class="channel-explanations">
-    <p i18n>
-      A channel is an entity in which you upload your videos. Creating several of them helps you to organize and separate your content.<br />
-      For example, you could decide to have a channel to publish your piano concerts, and another channel in which you publish your videos talking about ecology.
-    </p>
-
-    <p i18n>
-      Other users can decide to subscribe any channel they want, to be notified when you publish a new video.
-    </p>
-  </div>
-
-  <div class="form-group">
-    <label for="displayName" i18n>Channel display name</label>
-
-    <div class="input-group">
-      <input
-        type="text" id="displayName"
-        formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
-      >
-    </div>
-
-    <div *ngIf="formErrors.displayName" class="form-error">
-      {{ formErrors.displayName }}
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label for="name" i18n>Channel name</label>
-
-    <div class="input-group">
-      <input
-        type="text" id="name" i18n-placeholder placeholder="Example: my_super_channel"
-        formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }"
-      >
-      <div class="input-group-append">
-        <span class="input-group-text">@{{ instanceHost }}</span>
-      </div>
-    </div>
-
-    <div class="name-information" i18n>
-      The channel name is a unique identifier of your channel on this and all the other instances. It's as unique as an email address, which makes it easy for other people to interact with it.
-    </div>
-
-    <div *ngIf="formErrors.name" class="form-error">
-      {{ formErrors.name }}
-    </div>
-
-    <div *ngIf="isSameThanUsername()" class="form-error" i18n>
-      Channel name cannot be the same as your account name. You can click on the first step to update your account name.
-    </div>
-  </div>
-</form>
diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html
deleted file mode 100644
index cab21c655..000000000
--- a/client/src/app/+signup/+register/register-step-user.component.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<form role="form" [formGroup]="form">
-
-  <div class="capability-information alert alert-info" i18n *ngIf="videoUploadDisabled">
-    Video uploads are disabled on this instance, hence your account won't be able to upload videos.
-  </div>
-
-  <div class="form-group">
-    <label for="displayName" i18n>Display name</label>
-
-    <div class="input-group">
-      <input
-        type="text" id="displayName" placeholder="John Doe"
-        formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
-      >
-    </div>
-
-    <div *ngIf="formErrors.displayName" class="form-error">
-      {{ formErrors.displayName }}
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label for="username" i18n>Username</label>
-
-    <div class="input-group">
-      <input
-        type="text" id="username" i18n-placeholder="Username choice placeholder in the registration form" placeholder="e.g. jane_doe"
-        formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }"
-      >
-      <div class="input-group-append">
-        <span class="input-group-text">@{{ instanceHost }}</span>
-      </div>
-    </div>
-
-    <div class="name-information" i18n>
-      The username is a unique identifier of your account on this and all the other instances. It's as unique as an email address, which makes it easy for other people to interact with it.
-    </div>
-
-    <div *ngIf="formErrors.username" class="form-error">
-      {{ formErrors.username }}
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label for="email" i18n>Email</label>
-    <input
-      type="text" id="email" i18n-placeholder placeholder="Email"
-      formControlName="email" class="form-control" [ngClass]="{ 'input-error': formErrors['email'] }"
-    >
-    <div *ngIf="formErrors.email" class="form-error">
-      {{ formErrors.email }}
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label for="password" i18n>Password</label>
-    <my-input-toggle-hidden formControlName="password" inputId="password"
-                            i18n-placeholder placeholder="Password"
-                            [ngClass]="{ 'input-error': formErrors['password'] }"
-                            autocomplete="new-password"></my-input-toggle-hidden>
-    <div *ngIf="formErrors.password" class="form-error">
-      {{ formErrors.password }}
-    </div>
-  </div>
-
-</form>
diff --git a/client/src/app/+signup/+register/register.component.html b/client/src/app/+signup/+register/register.component.html
index 2d0e6e865..442c65e2d 100644
--- a/client/src/app/+signup/+register/register.component.html
+++ b/client/src/app/+signup/+register/register.component.html
@@ -1,64 +1,121 @@
-<div class="margin-content">
+<div>
 
-  <div class="signup-disabled" *ngIf="signupDisabled">
+  <div class="margin-content signup-disabled" *ngIf="signupDisabled">
     <div class="alert alert-warning" i18n>Signup is not enabled on this instance.</div>
   </div>
 
   <ng-container *ngIf="!signupDisabled">
-    <div i18n class="title-page title-page-single">
+    <h1 i18n class="title-page-v2">
+      <strong class="underline-orange">{{ instanceName }}</strong>
+      >
       Create an account
-    </div>
+    </h1>
 
-    <my-signup-success *ngIf="signupDone" [message]="success"></my-signup-success>
-    <div *ngIf="info" class="alert alert-info">{{ info }}</div>
-
-    <div class="wrapper" [hidden]="signupDone">
-      <div class="register-form">
-        <my-custom-stepper linear *ngIf="!signupDone">
-          <cdk-step [stepControl]="formStepTerms" i18n-label="Stepper label for the registration page describing terms of service" label="Terms">
-            <div class="instance-information">
-              <my-instance-about-accordion
-                (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"
-                pluginScope="signup" pluginHook="filter:signup.instance-about-plugin-panels.create.result"
-              ></my-instance-about-accordion>
-            </div>
+    <div class="register-content">
+      <my-custom-stepper linear>
+
+        <cdk-step i18n-label label="About" [editable]="!signupSuccess">
+          <my-signup-step-title mascotImageName="about" i18n>
+            <strong>Create an account</strong>
+            <div>on {{ instanceName }}</div>
+          </my-signup-step-title>
+
+          <my-register-step-about [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>
 
-            <my-register-step-terms
-              [hasCodeOfConduct]="!!aboutHtml.codeOfConduct"
-              [minimumAge]="minimumAge"
-              (formBuilt)="onTermsFormBuilt($event)" (termsClick)="onTermsClick()" (codeOfConductClick)="onCodeOfConductClick()"
-            ></my-register-step-terms>
+            <button i18n cdkStepperNext>I create an account</button>
+          </div>
+        </cdk-step>
 
+        <cdk-step [stepControl]="formStepTerms" i18n-label label="Terms" [editable]="!signupSuccess">
+          <my-signup-step-title mascotImageName="terms" i18n>
+            <strong>Terms</strong>
+            <div>of {{ instanceName }}</div>
+          </my-signup-step-title>
+
+          <my-instance-about-accordion
+            [displayInstanceName]="false"
+            (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"
+            pluginScope="signup" pluginHook="filter:signup.instance-about-plugin-panels.create.result"
+          ></my-instance-about-accordion>
+
+          <my-register-step-terms
+            [hasCodeOfConduct]="!!aboutHtml.codeOfConduct"
+            [minimumAge]="minimumAge"
+            (formBuilt)="onTermsFormBuilt($event)" (termsClick)="onTermsClick()" (codeOfConductClick)="onCodeOfConductClick()"
+          ></my-register-step-terms>
+
+          <div class="step-buttons">
+            <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
             <button cdkStepperNext [disabled]="!formStepTerms || !formStepTerms.valid">{{ defaultNextStepButtonLabel }}</button>
-          </cdk-step>
+          </div>
+        </cdk-step>
+
+        <cdk-step [stepControl]="formStepUser" label="My account" [editable]="!signupSuccess">
+          <my-signup-step-title mascotImageName="account" i18n>
+            <strong>Setup</strong>
+            <div>your account</div>
+          </my-signup-step-title>
 
-          <cdk-step [stepControl]="formStepUser" i18n-label="Stepper label for the registration page asking user informations" label="User">
-            <my-register-step-user (formBuilt)="onUserFormBuilt($event)" [videoUploadDisabled]="videoUploadDisabled"></my-register-step-user>
+          <my-register-step-user
+            (formBuilt)="onUserFormBuilt($event)"
+            [videoUploadDisabled]="videoUploadDisabled" [requiresEmailVerification]="requiresEmailVerification"
+          ></my-register-step-user>
 
+          <div class="step-buttons">
             <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
             <button cdkStepperNext [disabled]="!formStepUser || !formStepUser.valid" (click)="videoUploadDisabled && signup()">{{ stepUserButtonLabel }}</button>
-          </cdk-step>
+          </div>
+        </cdk-step>
 
-          <cdk-step [stepControl]="formStepChannel" i18n-label="Stepper label for the registration page asking information about the default channel" label="Channel" *ngIf="!videoUploadDisabled">
-            <my-register-step-channel (formBuilt)="onChannelFormBuilt($event)" [username]="getUsername()"></my-register-step-channel>
+        <cdk-step *ngIf="!videoUploadDisabled" [optional]="true" [stepControl]="formStepChannel" i18n-label label="My channel" [editable]="!signupSuccess">
+          <my-signup-step-title mascotImageName="channel" i18n>
+            <div>Create</div>
+            <strong>your first channel</strong>
+          </my-signup-step-title>
 
+          <my-register-step-channel
+            (formBuilt)="onChannelFormBuilt($event)"
+            [videoQuota]="videoQuota" [instanceName]="instanceName" [username]="getUsername()"
+          ></my-register-step-channel>
+
+          <div class="step-buttons">
             <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
+
+            <div class="skip-step">
+              <span class="underline-orange" role="button" (click)="skipChannelCreation()">
+                <strong i18n>I don't want to create a channel</strong>
+              </span>
+
+              <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>
               Create my account
             </button>
-          </cdk-step>
+          </div>
+        </cdk-step>
 
-          <cdk-step i18n-label label="Done" editable="false">
-            <div *ngIf="!signupDone && !error" class="done-loader">
-              <my-loader [loading]="true"></my-loader>
+        <cdk-step #lastStep i18n-label label="Done!" [editable]="false">
+          <div *ngIf="!signupSuccess && !signupError" class="done-loader">
+            <my-loader [loading]="true"></my-loader>
 
-              <div i18n>PeerTube is creating your account...</div>
-            </div>
+            <div i18n>PeerTube is creating your account...</div>
+          </div>
+
+          <div *ngIf="signupError" class="alert alert-danger">{{ signupError }}</div>
 
-            <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-          </cdk-step>
-        </my-custom-stepper>
-      </div>
+          <my-signup-success *ngIf="signupSuccess" [requiresEmailVerification]="requiresEmailVerification"></my-signup-success>
+
+          <div *ngIf="signupError" class="steps-button">
+            <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
+          </div>
+        </cdk-step>
+      </my-custom-stepper>
     </div>
   </ng-container>
 
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 4be67a858..c706d6955 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -1,86 +1,72 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.alert {
-  font-size: 15px;
-  text-align: center;
-}
-
 .signup-disabled {
   padding-top: 30vh;
 }
 
-.wrapper {
+.title-page-v2 {
+  background-color: pvar(--mainColorVeryLight);
+  margin: 0;
+}
+
+my-instance-about-accordion {
+  display: block;
+  margin-bottom: 25px;
+}
+
+.step-buttons {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
 
-  .register-form {
-    max-width: 600px;
-    align-self: center;
-  }
+  .skip-step {
+    @include margin-right(30px);
 
-  .register-form,
-  .instance-information {
-    width: 100%;
+    display: inline-block;
   }
 
-  .instance-information {
-    margin-bottom: 15px;
+  .skip-step-description {
+    margin-top: 5px;
+    font-size: 14px;
   }
-}
 
-.form-group-terms {
-  margin: 30px 0;
-}
+  .underline-orange {
+    color: pvar(--mainForegroundColor);
 
-.input-group {
-  @include peertube-input-group(100%);
-}
-
-.input-group-append {
-  height: 30px;
-}
+    &:hover {
+      opacity: 0.8;
+    }
+  }
 
-.form-group-terms {
-  width: 100% !important;
-}
+  button,
+  .skip-step {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
 
-input:not([type=submit]) {
-  @include peertube-input-text(100%);
-  display: block;
+  .skip-step,
+  button[cdkStepperNext] {
+    @include margin-left(auto);
+  }
 
-  &#username,
-  &#name {
-    width: auto !important;
-    flex-grow: 1;
+  .skip-step + button[cdkStepperNext] {
+    @include margin-left(0);
   }
 }
 
-input[type=submit],
 button {
-  @include peertube-button;
+  @include peertube-button-big;
 
   &[cdkStepperNext] {
     @include orange-button;
-
-    // Chrome does not support inline-end
-    float: right;
-    float: inline-end;
   }
 
   &[cdkStepperPrevious] {
     @include grey-button;
-
-    // Chrome does not support inline-start
-    float: left;
-    float: inline-start;
   }
 }
 
-.name-information {
-  margin-top: 10px;
-}
-
 .done-loader {
   display: flex;
   justify-content: center;
@@ -89,13 +75,16 @@ button {
 
   my-loader {
     margin-bottom: 20px;
+  }
+}
 
-    ::ng-deep .loader div {
-      border-color: pvar(--mainColor) transparent transparent transparent;
-    }
+@media screen and (max-width: $small-view) {
+  .step-buttons {
+    justify-content: space-between;
 
-    + div {
-      font-size: 15px;
+    .skip-step,
+    button[cdkStepperNext] {
+      @include margin-left(0);
     }
   }
 }
diff --git a/client/src/app/+signup/+register/register.component.ts b/client/src/app/+signup/+register/register.component.ts
index b4a7c0d0e..396b27e5a 100644
--- a/client/src/app/+signup/+register/register.component.ts
+++ b/client/src/app/+signup/+register/register.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core'
+import { CdkStep } from '@angular/cdk/stepper'
+import { Component, OnInit, ViewChild } from '@angular/core'
 import { FormGroup } from '@angular/forms'
 import { ActivatedRoute } from '@angular/router'
 import { AuthService } from '@app/core'
@@ -15,13 +16,15 @@ import { ServerConfig } from '@shared/models/server'
   styleUrls: [ './register.component.scss' ]
 })
 export class RegisterComponent implements OnInit {
+  @ViewChild('lastStep') lastStep: CdkStep
+
   accordion: NgbAccordion
-  info: string = null
-  error: string = null
-  success: string = null
-  signupDone = false
+
+  signupError: string
+  signupSuccess = false
 
   videoUploadDisabled: boolean
+  videoQuota: number
 
   formStepTerms: FormGroup
   formStepUser: FormGroup
@@ -39,8 +42,8 @@ export class RegisterComponent implements OnInit {
     moderation: false
   }
 
-  defaultPreviousStepButtonLabel = $localize`:Button on the registration form to go to the previous step:Back`
-  defaultNextStepButtonLabel = $localize`:Button on the registration form to go to the previous step:Next`
+  defaultPreviousStepButtonLabel = $localize`:Button on the registration form to go to the previous step:Go to the previous step`
+  defaultNextStepButtonLabel = $localize`:Button on the registration form to go to the previous step:Go to the next step`
   stepUserButtonLabel = this.defaultNextStepButtonLabel
 
   signupDisabled = false
@@ -62,7 +65,11 @@ export class RegisterComponent implements OnInit {
     return this.serverConfig.signup.minimumAge
   }
 
-  ngOnInit (): void {
+  get instanceName () {
+    return this.serverConfig.instance.name
+  }
+
+  ngOnInit () {
     this.serverConfig = this.route.snapshot.data.serverConfig
 
     if (this.serverConfig.signup.allowed === false || this.serverConfig.signup.allowedForCurrentIP === false) {
@@ -70,7 +77,9 @@ export class RegisterComponent implements OnInit {
       return
     }
 
-    this.videoUploadDisabled = this.serverConfig.user.videoQuota === 0
+    this.videoQuota = this.serverConfig.user.videoQuota
+    this.videoUploadDisabled = this.videoQuota === 0
+
     this.stepUserButtonLabel = this.videoUploadDisabled
       ? $localize`:Button on the registration form to finalize the account and channel creation:Signup`
       : this.defaultNextStepButtonLabel
@@ -120,21 +129,31 @@ export class RegisterComponent implements OnInit {
     this.aboutHtml = instanceAboutAccordion.aboutHtml
   }
 
+  skipChannelCreation () {
+    this.formStepChannel.reset()
+    this.lastStep.select()
+    this.signup()
+  }
+
   async signup () {
-    this.error = null
+    this.signupError = undefined
 
     const body: UserRegister = await this.hooks.wrapObject(
-      Object.assign(this.formStepUser.value, { channel: this.videoUploadDisabled ? undefined : this.formStepChannel.value }),
+      {
+        ...this.formStepUser.value,
+
+        channel: this.formStepChannel?.value?.name
+          ? this.formStepChannel.value
+          : undefined
+      },
       'signup',
       'filter:api.signup.registration.create.params'
     )
 
     this.userSignupService.signup(body).subscribe({
       next: () => {
-        this.signupDone = true
-
         if (this.requiresEmailVerification) {
-          this.info = $localize`Now please check your emails to verify your account and complete signup.`
+          this.signupSuccess = true
           return
         }
 
@@ -142,17 +161,17 @@ export class RegisterComponent implements OnInit {
         this.authService.login(body.username, body.password)
           .subscribe({
             next: () => {
-              this.success = $localize`You are now logged in as ${body.username}!`
+              this.signupSuccess = true
             },
 
             error: err => {
-              this.error = err.message
+              this.signupError = err.message
             }
           })
       },
 
       error: err => {
-        this.error = err.message
+        this.signupError = err.message
       }
     })
   }
diff --git a/client/src/app/+signup/+register/register.module.ts b/client/src/app/+signup/+register/register.module.ts
index 52cdb33bc..684aae2e9 100644
--- a/client/src/app/+signup/+register/register.module.ts
+++ b/client/src/app/+signup/+register/register.module.ts
@@ -2,15 +2,15 @@ import { CdkStepperModule } from '@angular/cdk/stepper'
 import { NgModule } from '@angular/core'
 import { SharedSignupModule } from '@app/+signup/shared/shared-signup.module'
 import { SharedInstanceModule } from '@app/shared/shared-instance'
+import { SharedMainModule } from '@app/shared/shared-main'
 import { CustomStepperComponent } from './custom-stepper.component'
 import { RegisterRoutingModule } from './register-routing.module'
-import { RegisterStepChannelComponent } from './register-step-channel.component'
-import { RegisterStepTermsComponent } from './register-step-terms.component'
-import { RegisterStepUserComponent } from './register-step-user.component'
 import { RegisterComponent } from './register.component'
+import { RegisterStepAboutComponent, RegisterStepChannelComponent, RegisterStepTermsComponent, RegisterStepUserComponent } from './steps'
 
 @NgModule({
   imports: [
+    SharedMainModule,
     RegisterRoutingModule,
 
     CdkStepperModule,
@@ -25,7 +25,8 @@ import { RegisterComponent } from './register.component'
     CustomStepperComponent,
     RegisterStepChannelComponent,
     RegisterStepTermsComponent,
-    RegisterStepUserComponent
+    RegisterStepUserComponent,
+    RegisterStepAboutComponent
   ],
 
   exports: [
diff --git a/client/src/app/+signup/+register/steps/index.ts b/client/src/app/+signup/+register/steps/index.ts
new file mode 100644
index 000000000..b5eae7468
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/index.ts
@@ -0,0 +1,4 @@
+export * from './register-step-about.component'
+export * from './register-step-channel.component'
+export * from './register-step-terms.component'
+export * from './register-step-user.component'
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
new file mode 100644
index 000000000..f93de8ce9
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/register-step-about.component.html
@@ -0,0 +1,39 @@
+<div class="why">
+  <h3 i18n>Why creating an account?</h3>
+
+  <p i18n>
+    As you probably noticed: creating an account is not necessary to watch video son {{ instanceName }}.
+    <br />
+    However, creating an account on {{ instanceName }} will allow you to:
+  </p>
+
+  <ul>
+    <li i18n><strong>Comment</strong> videos</li>
+    <li i18n><strong>Subscribe</strong> to channels to be notified of new videos</li>
+    <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>
+</div>
+
+<div>
+  <h4 i18n>You're using Mastodon, ActivityPub or a RSS feed aggregator?</h4>
+
+  <p i18n>
+    You can already follow {{ instanceName }} using your favorite tool.
+  </p>
+</div>
+
+<div class="callout callout-orange callout-light">
+  <div class="mascot-container" style="min-width: 140px">
+    <img class="mascot" width="140px" height="160px" src="/client/assets/images/mascot/happy.svg" alt="mascot"/>
+  </div>
+
+  <div class="callout-content">
+    <h4 i18>This website is a GAFAM alternative</h4>
+
+    <p i18n>
+      {{ instanceName }} has been created using <a class="link-orange" target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org">PeerTube</a>, a video creation platform developed by Framasoft.
+      <a class="link-orange" target="_blank" rel="noopener noreferrer" href="https://framasoft.org">Framasoft</a> is a french non-profit organization that offers alternatives to Big Tech's digital tools
+    </p>
+  </div>
+</div>
diff --git a/client/src/app/+signup/+register/steps/register-step-about.component.scss b/client/src/app/+signup/+register/steps/register-step-about.component.scss
new file mode 100644
index 000000000..ab6d6dd4d
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/register-step-about.component.scss
@@ -0,0 +1,53 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+h3 {
+  font-weight: $font-bold;
+  font-size: 24px;
+}
+
+h4 {
+  font-size: 18px;
+  font-weight: $font-bold;
+}
+
+.why {
+  margin-bottom: 30px;
+}
+
+.callout {
+  margin: 75px auto 25px;
+  border-width: 2px;
+  display: flex;
+
+  .mascot-container {
+    position: relative;
+
+    .mascot {
+      position: absolute;
+      top: -65px;
+    }
+  }
+
+  .callout-content {
+    margin-left: 30px;
+
+    p {
+      margin: 0;
+    }
+  }
+}
+
+@media screen and (max-width: $small-view) {
+  .callout {
+    margin-top: 20px;
+
+    .mascot-container {
+      display: none;
+    }
+
+    .callout-content {
+      margin-left: 0;
+    }
+  }
+}
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
new file mode 100644
index 000000000..9a0941016
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/register-step-about.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core'
+import { ServerService } from '@app/core'
+
+@Component({
+  selector: 'my-register-step-about',
+  templateUrl: './register-step-about.component.html',
+  styleUrls: [ './register-step-about.component.scss' ]
+})
+export class RegisterStepAboutComponent {
+  @Input() videoUploadDisabled: boolean
+
+  constructor (private serverService: ServerService) {
+
+  }
+
+  get instanceName () {
+    return this.serverService.getHTMLConfig().instance.name
+  }
+}
diff --git a/client/src/app/+signup/+register/steps/register-step-channel.component.html b/client/src/app/+signup/+register/steps/register-step-channel.component.html
new file mode 100644
index 000000000..c79256c68
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/register-step-channel.component.html
@@ -0,0 +1,55 @@
+<div class="mb-5">
+  <p i18n>
+    You want to <strong>publish videos</strong> on {{ instanceName }}? Then you need to create your first <strong>channel</strong>.
+  </p>
+
+  <p i18n>
+    You might want to <strong>create a channel by theme:</strong> for example, you can create a channel named "SweetMelodies"
+    to publish your piano concerts and another one "Ecology" in which you publish your videos talking about ecology.
+  </p>
+
+  <p i18n *ngIf="videoQuota !== -1">
+    {{ instanceName }} administrators allow you to publish up to <strong>{{ videoQuota | bytes: 0 }} of videos</strong> on their website.
+  </p>
+</div>
+
+<form role="form" [formGroup]="form">
+
+  <div class="row">
+
+    <div class="col-md-12 col-xl-6 form-group">
+      <label for="displayName" i18n>Channel display name</label>
+
+      <div i18n class="form-group-description">This is the name that will be publicly visible by other users.</div>
+
+      <div class="input-group">
+        <input
+          type="text" id="displayName" i18n-placeholder placeholder="Example: Sweet Melodies"
+          formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
+        >
+      </div>
+
+      <div *ngIf="formErrors.displayName" class="form-error">{{ formErrors.displayName }}</div>
+    </div>
+
+    <div class="col-md-12 col-xl-6 form-group">
+      <label for="name" i18n>Channel identifier</label>
+
+      <div i18n class="form-group-description">This is the name that will be displayed in your profile URL.</div>
+
+      <div class="input-group">
+        <input
+          type="text" id="name" i18n-placeholder placeholder="Example: sweetmelodies24"
+          formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }"
+        >
+        <div class="input-group-text">@{{ instanceHost }}</div>
+      </div>
+
+      <div *ngIf="formErrors.name" class="form-error">{{ formErrors.name }}</div>
+
+      <div *ngIf="isSameThanUsername()" class="form-error" i18n>
+        Channel identifier cannot be the same as your account name. You can click on the first step to update your account name.
+      </div>
+    </div>
+  </div>
+</form>
diff --git a/client/src/app/+signup/+register/register-step-channel.component.ts b/client/src/app/+signup/+register/steps/register-step-channel.component.ts
index 1bc0ccfd3..c10b568ba 100644
--- a/client/src/app/+signup/+register/register-step-channel.component.ts
+++ b/client/src/app/+signup/+register/steps/register-step-channel.component.ts
@@ -9,10 +9,13 @@ import { UserSignupService } from '@app/shared/shared-users'
 @Component({
   selector: 'my-register-step-channel',
   templateUrl: './register-step-channel.component.html',
-  styleUrls: [ './register.component.scss' ]
+  styleUrls: [ './step.component.scss' ]
 })
 export class RegisterStepChannelComponent extends FormReactive implements OnInit {
   @Input() username: string
+  @Input() instanceName: string
+  @Input() videoQuota: number
+
   @Output() formBuilt = new EventEmitter<FormGroup>()
 
   constructor (
diff --git a/client/src/app/+signup/+register/register-step-terms.component.html b/client/src/app/+signup/+register/steps/register-step-terms.component.html
index 28a6e0021..f54ca77e2 100644
--- a/client/src/app/+signup/+register/register-step-terms.component.html
+++ b/client/src/app/+signup/+register/steps/register-step-terms.component.html
@@ -1,18 +1,16 @@
 <form role="form" [formGroup]="form">
-  <div class="form-group form-group-terms">
+  <div class="form-group">
     <my-peertube-checkbox inputName="terms" formControlName="terms">
       <ng-template ptTemplate="label">
-        <ng-container i18n> 
+        <ng-container i18n>
           I am at least {{ minimumAge }} years old and agree
-          to the <a class="terms-anchor" (click)="onTermsClick($event)" href='#'>Terms</a>
+          to the <a class="link-orange" (click)="onTermsClick($event)" href='#'>Terms</a>
           <ng-container *ngIf="hasCodeOfConduct"> and to the <a (click)="onCodeOfConductClick($event)" href='#'>Code of Conduct</a></ng-container>
           of this instance
         </ng-container>
       </ng-template>
     </my-peertube-checkbox>
 
-    <div *ngIf="formErrors.terms" class="form-error">
-      {{ formErrors.terms }}
-    </div>
+    <div *ngIf="formErrors.terms" class="form-error">{{ formErrors.terms }}</div>
   </div>
 </form>
diff --git a/client/src/app/+signup/+register/register-step-terms.component.ts b/client/src/app/+signup/+register/steps/register-step-terms.component.ts
index 20c1ae1c4..87d16696e 100644
--- a/client/src/app/+signup/+register/register-step-terms.component.ts
+++ b/client/src/app/+signup/+register/steps/register-step-terms.component.ts
@@ -8,7 +8,7 @@ import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 @Component({
   selector: 'my-register-step-terms',
   templateUrl: './register-step-terms.component.html',
-  styleUrls: [ './register.component.scss' ]
+  styleUrls: [ './step.component.scss' ]
 })
 export class RegisterStepTermsComponent extends FormReactive implements OnInit {
   @Input() hasCodeOfConduct = false
diff --git a/client/src/app/+signup/+register/steps/register-step-user.component.html b/client/src/app/+signup/+register/steps/register-step-user.component.html
new file mode 100644
index 000000000..bffcf0346
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/register-step-user.component.html
@@ -0,0 +1,73 @@
+<div class="alert pt-alert-primary" i18n *ngIf="videoUploadDisabled">
+  Video uploads are disabled on this instance, hence your account won't be able to upload videos.
+</div>
+
+<form role="form" [formGroup]="form">
+  <div class="row">
+
+    <div class="col-md-12 col-xl-6 form-group">
+      <label for="displayName" i18n>Public name</label>
+
+      <div class="form-group-description" i18n>
+        This is the name that will be publicly visible by other users.
+      </div>
+
+      <div class="input-group">
+        <input
+          type="text" id="displayName" i18n-placeholder placeholder="Example: John Doe"
+          formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
+        >
+      </div>
+
+      <div *ngIf="formErrors.displayName" class="form-error">{{ formErrors.displayName }}</div>
+    </div>
+
+    <div class="col-md-12 col-xl-6 form-group">
+      <label for="username" i18n>Username</label>
+
+      <div class="form-group-description" i18n>
+        This is the name that will be displayed in your profile URL.
+      </div>
+
+      <div class="input-group">
+        <input
+          type="text" id="username" i18n-placeholder placeholder="Example: john_doe58"
+          formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }"
+        >
+        <span class="input-group-text">@{{ instanceHost }}</span>
+      </div>
+
+      <div *ngIf="formErrors.username" class="form-error">{{ formErrors.username }}</div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-md-12 col-xl-6 form-group">
+      <label for="email" i18n>Email</label>
+
+      <div *ngIf="requiresEmailVerification" class="form-group-description" i18n>
+        This email address will be used to validate your account.
+      </div>
+
+      <input
+        type="text" id="email" i18n-placeholder placeholder="Example: john@example.com"
+        formControlName="email" class="form-control" [ngClass]="{ 'input-error': formErrors['email'] }"
+      >
+
+      <div *ngIf="formErrors.email" class="form-error">{{ formErrors.email }}</div>
+    </div>
+
+    <div class="col-md-12 col-xl-6 form-group">
+      <label for="password" i18n>Password</label>
+
+      <div class="form-group-description">{{ getMinPasswordLengthMessage() }}</div>
+
+      <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>
+</form>
diff --git a/client/src/app/+signup/+register/register-step-user.component.ts b/client/src/app/+signup/+register/steps/register-step-user.component.ts
index 92ddfca2e..b89e38a28 100644
--- a/client/src/app/+signup/+register/register-step-user.component.ts
+++ b/client/src/app/+signup/+register/steps/register-step-user.component.ts
@@ -14,10 +14,11 @@ import { UserSignupService } from '@app/shared/shared-users'
 @Component({
   selector: 'my-register-step-user',
   templateUrl: './register-step-user.component.html',
-  styleUrls: [ './register.component.scss' ]
+  styleUrls: [ './step.component.scss' ]
 })
 export class RegisterStepUserComponent extends FormReactive implements OnInit {
   @Input() videoUploadDisabled = false
+  @Input() requiresEmailVerification = false
 
   @Output() formBuilt = new EventEmitter<FormGroup>()
 
@@ -49,6 +50,10 @@ export class RegisterStepUserComponent extends FormReactive implements OnInit {
      .subscribe(([ oldValue, newValue ]) => this.onDisplayNameChange(oldValue, newValue))
   }
 
+  getMinPasswordLengthMessage () {
+    return USER_PASSWORD_VALIDATOR.MESSAGES.minlength
+  }
+
   private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) {
     const username = this.form.value['username'] || ''
 
diff --git a/client/src/app/+signup/+register/steps/step.component.scss b/client/src/app/+signup/+register/steps/step.component.scss
new file mode 100644
index 000000000..35cfdae91
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/step.component.scss
@@ -0,0 +1,27 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+input:not([type=submit]) {
+  @include peertube-input-text(100%);
+  display: block;
+
+  &#username,
+  &#name {
+    width: auto !important;
+    flex-grow: 1;
+  }
+}
+
+input[type=submit],
+button {
+  @include peertube-button;
+}
+
+label {
+  font-size: 18px;
+  margin-bottom: 5px;
+}
+
+.row {
+  margin-bottom: 30px;
+}
diff --git a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
index ece9d1022..023082f61 100644
--- a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
+++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
@@ -1,21 +1,21 @@
 <div class="margin-content">
-  <div i18n class="title-page title-page-single">
-    Request email for account verification
-  </div>
+  <h1 i18n class="title-page">Request email for account verification</h1>
 
   <form *ngIf="requiresEmailVerification; else emailVerificationNotRequired" role="form" (ngSubmit)="askSendVerifyEmail()" [formGroup]="form">
     <div class="form-group">
       <label i18n for="verify-email-email">Email</label>
+
       <input
         type="email" id="verify-email-email" i18n-placeholder placeholder="Email address" required
         formControlName="verify-email-email" class="form-control" [ngClass]="{ 'input-error': formErrors['verify-email-email'] }"
       >
-      <div *ngIf="formErrors['verify-email-email']" class="form-error">
-          {{ formErrors['verify-email-email'] }}
-      </div>
+
+      <div *ngIf="formErrors['verify-email-email']" class="form-error">{{ formErrors['verify-email-email'] }}</div>
     </div>
-    <input type="submit" i18n-value value="Send verification email" [disabled]="!form.valid">
+
+    <input class="peertube-button orange-button" type="submit" i18n-value value="Send verification email" [disabled]="!form.valid">
   </form>
+
   <ng-template #emailVerificationNotRequired>
     <div i18n>This instance does not require email verification.</div>
   </ng-template>
diff --git a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss
index 5494e29c6..c542f3d8a 100644
--- a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss
+++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss
@@ -1,12 +1,8 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-input:not([type=submit]) {
+input[type=email] {
   @include peertube-input-text(340px);
-  display: block;
-}
 
-input[type=submit] {
-  @include peertube-button;
-  @include orange-button;
+  display: block;
 }
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 47519c943..122f3c28c 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,18 +1,14 @@
 <div class="margin-content">
-  <div i18n class="title-page title-page-single">
-    Verify account email confirmation
-  </div>
+  <h1 i18n class="title-page">Verify account email confirmation</h1>
 
-  <my-signup-success i18n *ngIf="!isPendingEmail && success" message="Your email has been verified and you may now login.">
+  <my-signup-success i18n *ngIf="!isPendingEmail && success" [requiresEmailVerification]="false">
   </my-signup-success>
 
-  <div i18n class="alert alert-success" *ngIf="isPendingEmail && success">
-    Email updated.
-  </div>
+  <div i18n class="alert alert-success" *ngIf="isPendingEmail && success">Email updated.</div>
 
-  <div *ngIf="failed">
+  <div class="alert alert-danger" *ngIf="failed">
     <span i18n>An error occurred.</span>
 
-    <a i18n 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" [queryParams]="{ isPendingEmail: isPendingEmail }">Request new verification email</a>
   </div>
 </div>
diff --git a/client/src/app/+signup/shared/shared-signup.module.ts b/client/src/app/+signup/shared/shared-signup.module.ts
index f8b224c71..0aa08f3e2 100644
--- a/client/src/app/+signup/shared/shared-signup.module.ts
+++ b/client/src/app/+signup/shared/shared-signup.module.ts
@@ -3,6 +3,8 @@ import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 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'
 
 @NgModule({
@@ -14,7 +16,9 @@ import { SignupSuccessComponent } from './signup-success.component'
   ],
 
   declarations: [
-    SignupSuccessComponent
+    SignupSuccessComponent,
+    SignupStepTitleComponent,
+    SignupMascotComponent
   ],
 
   exports: [
@@ -22,7 +26,9 @@ import { SignupSuccessComponent } from './signup-success.component'
     SharedFormModule,
     SharedGlobalIconModule,
 
-    SignupSuccessComponent
+    SignupSuccessComponent,
+    SignupStepTitleComponent,
+    SignupMascotComponent
   ],
 
   providers: [
diff --git a/client/src/app/+signup/shared/signup-mascot.component.scss b/client/src/app/+signup/shared/signup-mascot.component.scss
new file mode 100644
index 000000000..5eebfb014
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-mascot.component.scss
@@ -0,0 +1,11 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.root {
+  display: inline-block;
+  width: 270px;
+}
+
+div ::ng-deep svg {
+  color: pvar(--mainColor);
+}
diff --git a/client/src/app/+signup/shared/signup-mascot.component.ts b/client/src/app/+signup/shared/signup-mascot.component.ts
new file mode 100644
index 000000000..a96ccffee
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-mascot.component.ts
@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core'
+import { DomSanitizer } from '@angular/platform-browser'
+
+const images = {
+  about: require('!!raw-loader?!../../../assets/images/mascot/register/about.svg').default,
+  terms: require('!!raw-loader?!../../../assets/images/mascot/register/terms.svg').default,
+  success: require('!!raw-loader?!../../../assets/images/mascot/register/success.svg').default,
+  channel: require('!!raw-loader?!../../../assets/images/mascot/register/channel.svg').default,
+  account: require('!!raw-loader?!../../../assets/images/mascot/register/account.svg').default
+}
+
+export type MascotImageName = keyof typeof images
+
+@Component({
+  selector: 'my-signup-mascot',
+  styleUrls: [ './signup-mascot.component.scss' ],
+  template: `<div class="root" [innerHTML]="html"></div>`
+})
+export class SignupMascotComponent {
+  @Input() imageName: MascotImageName
+
+  constructor (private sanitize: DomSanitizer) {
+
+  }
+
+  get html () {
+    return this.sanitize.bypassSecurityTrustHtml(images[this.imageName])
+  }
+}
diff --git a/client/src/app/+signup/shared/signup-step-title.component.html b/client/src/app/+signup/shared/signup-step-title.component.html
new file mode 100644
index 000000000..9cf4c4826
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-step-title.component.html
@@ -0,0 +1,9 @@
+<div class="step-content-title">
+  <my-signup-mascot [imageName]="mascotImageName"></my-signup-mascot>
+
+  <h2>
+    <ng-content></ng-content>
+  </h2>
+
+  <div class="step-content-title-separator"></div>
+</div>
diff --git a/client/src/app/+signup/shared/signup-step-title.component.scss b/client/src/app/+signup/shared/signup-step-title.component.scss
new file mode 100644
index 000000000..1e0cb2440
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-step-title.component.scss
@@ -0,0 +1,23 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.step-content-title {
+  text-align: center;
+  margin: auto;
+  margin-bottom: 45px;
+
+  h2 {
+    font-size: 32px;
+    font-weight: normal;
+    max-width: 300px;
+    margin: 15px auto 0;
+  }
+}
+
+.step-content-title-separator {
+  height: 6px;
+  width: 60px;
+  border-radius: 4px;
+  background-color: pvar(--mainColor);
+  margin: 5px auto 0;
+}
diff --git a/client/src/app/+signup/shared/signup-step-title.component.ts b/client/src/app/+signup/shared/signup-step-title.component.ts
new file mode 100644
index 000000000..9664eb7f3
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-step-title.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core'
+import { MascotImageName } from './signup-mascot.component'
+
+@Component({
+  selector: 'my-signup-step-title',
+  templateUrl: './signup-step-title.component.html',
+  styleUrls: [ './signup-step-title.component.scss' ]
+})
+export class SignupStepTitleComponent {
+  @Input() mascotImageName: MascotImageName
+
+}
diff --git a/client/src/app/+signup/shared/signup-success.component.html b/client/src/app/+signup/shared/signup-success.component.html
index d66e8b568..c14889c72 100644
--- a/client/src/app/+signup/shared/signup-success.component.html
+++ b/client/src/app/+signup/shared/signup-success.component.html
@@ -1,20 +1,22 @@
-<!-- Thanks: Amit Singh Sansoya from https://codepen.io/amit3200/pen/zWMJOO -->
+<my-signup-step-title mascotImageName="success" i18n>
+  <strong>Welcome</strong>
+  <div>on {{ instanceName }}</div>
+</my-signup-step-title>
 
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
-  <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
-  <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
-</svg>
+<div class="alert pt-alert-primary">
+  <p i18n>Your account has been created!</p>
 
-<p i18n class="bottom-message">Welcome to PeerTube!</p>
-
-<div *ngIf="message" class="alert alert-success">
-  <p>{{ message }}</p>
-
-  <p i18n>
-    If you need help to use PeerTube, you can have a look at the <a href="https://docs.joinpeertube.org/use-setup-account" target="_blank" rel="noopener noreferrer">documentation</a>.
+  <p i18n *ngIf="requiresEmailVerification">
+    <strong>Check your emails</strong> to validate your account and complete your inscription.
   </p>
 
-  <p i18n>
-    To help moderators and other users to know <strong>who you are</strong>, don't forget to <a routerLink="/my-account/settings">set up your account profile</a> by adding an <strong>avatar</strong> and a <strong>description</strong>.
-  </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.scss b/client/src/app/+signup/shared/signup-success.component.scss
index b302366e2..918349ba0 100644
--- a/client/src/app/+signup/shared/signup-success.component.scss
+++ b/client/src/app/+signup/shared/signup-success.component.scss
@@ -1,54 +1,6 @@
-svg {
-  width: 100px;
-  display: block;
-  margin: 40px auto 0;
-}
-
-.path {
-  stroke-dasharray: 1000;
-  stroke-dashoffset: 0;
-
-  &.circle {
-    animation: dash .9s ease-in-out;
-  }
-
-  &.line {
-    stroke-dashoffset: 1000;
-    animation: dash .9s .35s ease-in-out forwards;
-  }
-
-  &.check {
-    stroke-dashoffset: -100;
-    animation: dash-check .9s .35s ease-in-out forwards;
-  }
-}
-
-.bottom-message {
-  text-align: center;
-  margin: 20px 0 60px;
-  font-size: 1.25em;
-  color: #73AF55;
-}
-
 .alert {
-  font-size: 15px;
+  font-size: 18px;
+  max-width: 900px;
   text-align: center;
-}
-
-@keyframes dash {
-  0% {
-    stroke-dashoffset: 1000;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes dash-check {
-  0% {
-    stroke-dashoffset: -100;
-  }
-  100% {
-    stroke-dashoffset: 900;
-  }
+  margin: auto;
 }
diff --git a/client/src/app/+signup/shared/signup-success.component.ts b/client/src/app/+signup/shared/signup-success.component.ts
index 19fb5922a..a03f3819d 100644
--- a/client/src/app/+signup/shared/signup-success.component.ts
+++ b/client/src/app/+signup/shared/signup-success.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core'
+import { ServerService } from '@app/core'
 
 @Component({
   selector: 'my-signup-success',
@@ -6,5 +7,13 @@ import { Component, Input } from '@angular/core'
   styleUrls: [ './signup-success.component.scss' ]
 })
 export class SignupSuccessComponent {
-  @Input() message: string
+  @Input() requiresEmailVerification: boolean
+
+  constructor (private serverService: ServerService) {
+
+  }
+
+  get instanceName () {
+    return this.serverService.getHTMLConfig().instance.name
+  }
 }
diff --git a/client/src/app/+stats/video/video-stats.component.html b/client/src/app/+stats/video/video-stats.component.html
index adfe095a3..242a5a7a2 100644
--- a/client/src/app/+stats/video/video-stats.component.html
+++ b/client/src/app/+stats/video/video-stats.component.html
@@ -1,5 +1,5 @@
 <div class="margin-content">
-  <h1 class="title-page title-page-single" i18n>{{ video.name }}</h1>
+  <h1 class="title-page" i18n>{{ video.name }}</h1>
 
   <div class="stats-embed">
     <div class="global-stats">
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
index fa58963ce..dd0b10d66 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
@@ -1,7 +1,7 @@
 <div class="margin-content">
-  <div i18n class="title-page title-page-single" *ngIf="pagination.totalItems">
+  <h1 i18n class="title-page" *ngIf="pagination.totalItems">
     Created {pagination.totalItems, plural, =1 {1 playlist} other {{{ pagination.totalItems }} playlists}}
-  </div>
+  </h1>
 
   <div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>
 
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 212e2f867..0fe6e808a 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -67,15 +67,15 @@
               <button [cdkCopyToClipboard]="videoChannel.nameWithHostForced" (click)="activateCopiedMessage()"
                       class="btn btn-outline-secondary btn-sm copy-button" title="Copy channel handle" i18n-title
               >
-                <span class="glyphicon glyphicon-duplicate"></span>
+                <my-global-icon iconName="copy"></my-global-icon>
               </button>
             </div>
 
             <div class="actor-counters">
-              <span i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</span>
+              <span i18n>{videoChannel.followersCount, plural, =0 {No subscribers} =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</span>
 
               <span class="videos-count" *ngIf="channelVideosCount !== undefined" i18n>
-                {channelVideosCount, plural, =1 {1 videos} other {{{ channelVideosCount }} videos}}
+                {channelVideosCount, plural, =0 {No videos} =1 {1 video} other {{{ channelVideosCount }} videos}}
               </span>
             </div>
           </div>
@@ -113,7 +113,7 @@
 
   <div class="links">
     <ng-template #linkTemplate let-item="item">
-      <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
+      <a [routerLink]="item.routerLink" routerLinkActive="active" class="sub-menu-entry">{{ item.label }}</a>
     </ng-template>
 
     <my-list-overflow [items]="links" [itemTemplate]="linkTemplate"></my-list-overflow>
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index c00dacae5..945d9a13d 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -150,7 +150,13 @@
 }
 
 .copy-button {
+  @include margin-left(3px);
+
   border: 0;
+
+  my-global-icon {
+    width: 15px;
+  }
 }
 
 @media screen and (max-width: 1400px) {
diff --git a/client/src/app/+video-studio/edit/video-studio-edit.component.html b/client/src/app/+video-studio/edit/video-studio-edit.component.html
index acfc1a452..fe74062d2 100644
--- a/client/src/app/+video-studio/edit/video-studio-edit.component.html
+++ b/client/src/app/+video-studio/edit/video-studio-edit.component.html
@@ -1,5 +1,5 @@
 <div class="margin-content">
-  <h1 class="title-page title-page-single" i18n>Studio for {{ video.name }}</h1>
+  <h1 class="title-page" i18n>Studio for {{ video.name }}</h1>
 
   <div class="columns">
     <form role="form" [formGroup]="form">
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
index 4ce2c6758..c0b670c65 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
 .caption-file {
   margin-top: 20px;
   width: max-content;
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.html b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
index 44004eb21..b99e430dd 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
@@ -237,23 +237,23 @@
       <ng-template ngbNavContent>
         <div class="row live-settings">
           <div class="col-md-12">
-            <div class="alert alert-info">
+            <div class="alert pt-alert-primary">
               <my-live-documentation-link></my-live-documentation-link>
             </div>
 
             <div *ngIf="liveVideo.rtmpUrl" class="form-group">
               <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label>
-              <my-input-toggle-hidden inputId="liveVideoRTMPUrl" [value]="liveVideo.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+              <my-input-text inputId="liveVideoRTMPUrl" [value]="liveVideo.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
             </div>
 
             <div *ngIf="liveVideo.rtmpsUrl" class="form-group">
               <label for="liveVideoRTMPSUrl" i18n>Live RTMPS Url</label>
-              <my-input-toggle-hidden inputId="liveVideoRTMPSUrl" [value]="liveVideo.rtmpsUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+              <my-input-text inputId="liveVideoRTMPSUrl" [value]="liveVideo.rtmpsUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
             </div>
 
             <div class="form-group">
               <label for="liveVideoStreamKey" i18n>Live stream key</label>
-              <my-input-toggle-hidden inputId="liveVideoStreamKey" [value]="liveVideo.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
+              <my-input-text inputId="liveVideoStreamKey" [value]="liveVideo.streamKey" [withCopy]="true" [readonly]="true"></my-input-text>
 
               <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div>
             </div>
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
index 5344e5431..e8a6c6e42 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -1,25 +1,10 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label,
-my-dynamic-form-field ::ng-deep label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
 .peertube-select-container {
   @include peertube-select-container(auto);
 }
 
-.title-page a {
-  color: pvar(--mainForegroundColor);
-
-  &:hover {
-    text-decoration: none;
-    opacity: .8;
-  }
-}
-
 my-peertube-checkbox {
   display: block;
   margin-bottom: 1rem;
@@ -33,22 +18,10 @@ my-peertube-checkbox {
   height: 100%;
   min-height: 300px;
 
-  .form-group {
-    margin-bottom: 25px;
-  }
-
   input {
     @include peertube-input-text(100%);
     display: block;
   }
-
-  .label-tags + span {
-    font-size: 15px;
-  }
-
-  .advanced-settings .form-group {
-    margin-bottom: 20px;
-  }
 }
 
 .captions-header {
@@ -79,7 +52,6 @@ my-peertube-checkbox {
   .caption-entry-label {
     @include margin-right(20px);
 
-    font-size: 15px;
     font-weight: bold;
     width: 150px;
   }
@@ -108,7 +80,6 @@ my-peertube-checkbox {
 
 .no-caption {
   text-align: center;
-  font-size: 15px;
 }
 
 .submit-container {
@@ -119,7 +90,6 @@ my-peertube-checkbox {
 
     display: inline-block;
     color: pvar(--greyForegroundColor);
-    font-size: 15px;
   }
 }
 
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html
index ecec6045b..f537b939f 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html
@@ -44,7 +44,7 @@
   {{ error }}
 </div>
 
-<div class="alert alert-info" i18n *ngIf="isInUpdateForm && getMaxLiveDuration() >= 0">
+<div class="alert pt-alert-primary" i18n *ngIf="isInUpdateForm && getMaxLiveDuration() >= 0">
   Max live duration is {{ getMaxLiveDuration() | myDurationFormatter }}.
   If your live reaches this limit, it will be automatically terminated.
 </div>
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html
index 14a7a287a..aa34d644a 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html
@@ -52,7 +52,7 @@
   {{ error }}
 </div>
 
-<div *ngIf="hasImportedVideo && !error" class="alert alert-info" i18n>
+<div *ngIf="hasImportedVideo && !error" class="alert pt-alert-primary" i18n>
   Congratulations, the video will be imported with BitTorrent! You can already add information about this video.
 </div>
 
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html
index 60a43c870..67e1cb418 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html
@@ -45,7 +45,7 @@
   {{ error }}
 </div>
 
-<div *ngIf="!error && hasImportedVideo" class="alert alert-info" i18n>
+<div *ngIf="!error && hasImportedVideo" class="alert pt-alert-primary" i18n>
   Congratulations, the video behind {{ targetUrl }} will be imported! You can already add information about this video.
 </div>
 
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
index 860fb76fa..728884986 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
@@ -87,7 +87,7 @@
   {{ error }}
 </div>
 
-<div *ngIf="videoUploaded && !error" class="alert alert-info" i18n>
+<div *ngIf="videoUploaded && !error" class="alert pt-alert-primary" i18n>
   Congratulations! Your video is now available in your private library.
 </div>
 
diff --git a/client/src/app/+videos/+video-edit/video-add.component.html b/client/src/app/+videos/+video-edit/video-add.component.html
index 29cf08e75..27ad14d63 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.html
+++ b/client/src/app/+videos/+video-edit/video-add.component.html
@@ -40,7 +40,7 @@
 <div *ngIf="!user.isUploadDisabled()" class="margin-content">
   <my-user-quota *ngIf="!isInSecondStep() || secondStepType === 'go-live'" [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota>
 
-  <div class="title-page title-page-single" *ngIf="isInSecondStep()">
+  <div class="title-page" *ngIf="isInSecondStep()">
     <ng-container *ngIf="secondStepType === 'import-url' || secondStepType === 'import-torrent'" i18n>Import {{ videoName }}</ng-container>
     <ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container>
   </div>
diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss
index dda868789..461a38204 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -10,7 +10,6 @@ $nav-link-height: 40px;
 .upload-message {
   width: 100%;
   text-align: center;
-  font-size: 15px;
   margin-bottom: 0;
   border-radius: 0;
 
diff --git a/client/src/app/+videos/+video-edit/video-update.component.html b/client/src/app/+videos/+video-edit/video-update.component.html
index 4376f6fe4..6a32f1477 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.html
+++ b/client/src/app/+videos/+video-edit/video-update.component.html
@@ -1,6 +1,6 @@
 <div class="margin-content">
-  <div class="title-page title-page-single">
-    <span class="mr-1" i18n>Update</span>
+  <div class="title-page">
+    <span class="me-1" i18n>Update</span>
     <a [routerLink]="getVideoUrl()">{{ video?.name }}</a>
   </div>
 
diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html
index f23efca98..cf32e371a 100644
--- a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html
@@ -1,5 +1,5 @@
 <div class="video-actions-rates">
-  <div class="video-actions full-width justify-content-end">
+  <div class="video-actions justify-content-end">
     <my-video-rate
       [video]="video" [isUserLoggedIn]="isUserLoggedIn"
       (rateUpdated)="onRateUpdated($event)" (userRatingLoaded)="onRateUpdated($event)"
diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss
index fdf4e3edb..786d10f73 100644
--- a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss
@@ -5,6 +5,9 @@
   height: 40px; // Align with the title
   display: flex;
   align-items: center;
+  width: 100%;
+  margin: 0 auto;
+  max-width: initial;
 
   .action-button:not(:first-child),
   .action-dropdown,
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
index 3ee818c8b..95d117eec 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
@@ -2,7 +2,7 @@
   <div class="avatar-and-textarea">
     <my-actor-avatar [account]="user?.account" size="25"></my-actor-avatar>
 
-    <div class="form-group">
+    <div class="textarea-wrapper">
       <textarea i18n-placeholder placeholder="Add comment..." myAutoResize
                 [readonly]="(user === null) ? true : false"
                 (click)="openVisitorModal($event)"
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
index ae889dd38..023d625e9 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
@@ -17,9 +17,8 @@ form {
     @include margin-right(10px);
   }
 
-  .form-group {
+  .textarea-wrapper {
     flex-grow: 1;
-    margin: 0;
     position: relative;
   }
 
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
index 5014b9692..160865519 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
@@ -16,7 +16,7 @@
                 {{ comment.account.displayName }}
               </span>
 
-              <span class="comment-account-fid ml-1">{{ comment.by }}</span>
+              <span class="comment-account-fid ms-1">{{ comment.by }}</span>
             </a>
           </div>
 
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
index 54f828014..8b5034083 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
@@ -2,7 +2,6 @@
 @use '_mixins' as *;
 
 .root-comment {
-  font-size: 15px;
   display: flex;
 
   .left {
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
index 0e00c9c0e..e27942e66 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
@@ -1,12 +1,12 @@
 <div>
   <div class="title-block">
-    <h2 class="title-page title-page-single">
+    <h2 class="title-page">
       {totalNotDeletedComments, plural, =0 {Comments} =1 {1 Comment} other {{{totalNotDeletedComments}} Comments}}
     </h2>
 
     <my-feed [syndicationItems]="syndicationItems"></my-feed>
 
-    <div ngbDropdown class="d-inline-block ml-4 dropdown-root">
+    <div ngbDropdown class="d-inline-block ms-4 dropdown-root">
       <button class="btn btn-sm btn-outline-secondary" id="dropdown-sort-comments" ngbDropdownToggle i18n>
         SORT BY
       </button>
@@ -65,7 +65,7 @@
           [redraftValue]="commentReplyRedraftValue"
         >
           <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2">
-            <span class="glyphicon glyphicon-menu-down"></span>
+            <span class="chevron-down"></span>
 
             <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container>
 
@@ -80,7 +80,7 @@
 
             <ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template>
 
-            <my-small-loader class="comment-thread-loading ml-1" [loading]="threadLoading[comment.id]"></my-small-loader>
+            <my-loader size="sm" class="ms-1" [loading]="threadLoading[comment.id]"></my-loader>
           </div>
         </my-video-comment>
 
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
index 31aa73937..638147dfe 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
@@ -7,18 +7,9 @@
 
 .view-replies {
   font-weight: $font-semibold;
-  font-size: 15px;
   cursor: pointer;
 }
 
-.glyphicon,
-.comment-thread-loading {
-  @include margin-right(5px);
-
-  display: inline-block;
-  font-size: 13px;
-}
-
 .title-block {
   .title-page {
     @include margin-right(0);
@@ -41,10 +32,9 @@
 }
 
 #dropdown-sort-comments {
-  font-weight: 600;
+  font-weight: $font-semibold;
   text-transform: uppercase;
   border: 0;
-  transform: translateY(-7%);
 }
 
 @media screen and (max-width: 600px) {
diff --git a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
index d579aaddb..b64d45564 100644
--- a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
+++ b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
@@ -1,6 +1,6 @@
 <div class="privacy-concerns" *ngIf="display">
   <div class="privacy-concerns-text">
-    <span class="mr-2">
+    <span class="me-2">
       <strong i18n>Friendly Reminder: </strong>
       <ng-container i18n>
         the sharing system used for this video implies that some technical information about your system (such as a public IP address) can be sent to other peers.
diff --git a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html
index be726c990..79b83811d 100644
--- a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html
+++ b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html
@@ -22,15 +22,15 @@
   The video is being moved to an external server, it may not work properly.
 </div>
 
-<div i18n class="alert alert-info" *ngIf="hasVideoScheduledPublication()">
+<div i18n class="alert pt-alert-primary" *ngIf="hasVideoScheduledPublication()">
   This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }}.
 </div>
 
-<div i18n class="alert alert-info" *ngIf="isWaitingForLive()">
+<div i18n class="alert pt-alert-primary" *ngIf="isWaitingForLive()">
   This live has not started yet.
 </div>
 
-<div i18n class="alert alert-info" *ngIf="isLiveEnded()">
+<div i18n class="alert pt-alert-primary" *ngIf="isLiveEnded()">
   This live has ended.
 </div>
 
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html
index 10ff46595..52ad1999d 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html
@@ -11,9 +11,11 @@
   >{{ video.originInstanceHost }}</a>
 
   <a
-    i18n-title title="Open the video on the origin instance" class="glyphicon glyphicon-new-window"
+    i18n-title title="Open the video on the origin instance"
     target="_blank" rel="noopener noreferrer" [href]="video.url"
-  ></a>
+  >
+    <my-global-icon iconName="external-link"></my-global-icon>
+  </a>
 </div>
 
 <div *ngIf="!!video.originallyPublishedAt" class="attribute attribute-originally-published-at">
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss
index 26bead124..1470a9f6d 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss
@@ -33,12 +33,6 @@ a.attribute-value {
   }
 }
 
-.glyphicon-new-window {
-  color: pvar(--inputPlaceholderColor);
-  margin-left: 5px;
-  font-size: 12px;
-}
-
 @media screen and (max-width: 1600px) {
   .attributes .attribute {
     margin-bottom: 5px;
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss
index 80711ff32..fd9dd1a6a 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss
@@ -1,14 +1,5 @@
 @use '_mixins' as *;
 
-@mixin secondary {
-  height: 60%;
-  width: 60%;
-  position: absolute;
-  bottom: -5px;
-  right: -5px;
-  background-color: rgba(0, 0, 0, 0);
-}
-
 .wrapper {
   @include margin-right(5px);
 
@@ -16,6 +7,11 @@
   margin-bottom: 5px;
 
   .second-avatar {
-    @include secondary();
+    height: 60%;
+    width: 60%;
+    position: absolute;
+    bottom: -5px;
+    right: -5px;
+    background-color: rgba(0, 0, 0, 0);
   }
 }
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
index 2cfaad8f6..fa4dbb3ca 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
@@ -8,12 +8,12 @@
 
   <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
     <ng-container i18n>Show more</ng-container>
-    <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
-    <my-small-loader class="description-loading" [loading]="descriptionLoading"></my-small-loader>
+    <span *ngIf="descriptionLoading === false" class="chevron-down"></span>
+    <my-loader size="sm" class="description-loading" [loading]="descriptionLoading"></my-loader>
   </div>
 
   <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
     <ng-container i18n>Show less</ng-container>
-    <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
+    <span *ngIf="descriptionLoading === false" class="chevron-up"></span>
   </div>
 </div>
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss
index fc8b4574c..b503a94cb 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss
@@ -7,7 +7,6 @@
 
   margin-top: 20px;
   margin-bottom: 20px;
-  font-size: 15px;
 
   .video-info-description-html {
     @include peertube-word-wrap;
@@ -17,13 +16,8 @@
     }
   }
 
-  .glyphicon,
   .description-loading {
-    @include margin-left(3px);
-  }
-
-  .description-loading {
-    display: inline-block;
+    @include margin-left(5px);
   }
 
   .video-info-description-more {
@@ -31,11 +25,6 @@
     font-weight: $font-semibold;
     color: pvar(--greyForegroundColor);
     font-size: 14px;
-
-    .glyphicon {
-      position: relative;
-      top: 2px;
-    }
   }
 }
 
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
index f5dd352a3..b04bd3548 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
@@ -6,9 +6,9 @@
     <div class="playlist-display-name">
       {{ playlist.displayName }}
 
-      <span *ngIf="isUnlistedPlaylist()" class="badge badge-warning" i18n>Unlisted</span>
-      <span *ngIf="isPrivatePlaylist()" class="badge badge-danger" i18n>Private</span>
-      <span *ngIf="isPublicPlaylist()" class="badge badge-info" i18n>Public</span>
+      <span *ngIf="isUnlistedPlaylist()" class="pt-badge badge-warning" i18n>Unlisted</span>
+      <span *ngIf="isPrivatePlaylist()" class="pt-badge badge-danger" i18n>Private</span>
+      <span *ngIf="isPublicPlaylist()" class="pt-badge badge-info" i18n>Public</span>
     </div>
 
     <div class="playlist-by-index">
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
index 5c3453e4b..0f0ac1979 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
@@ -15,43 +15,47 @@
   .playlist-info {
     padding: 5px 30px;
     background-color: pvar(--greyBackgroundColor);
+  }
+
+  .playlist-display-name {
+    font-size: 18px;
+    font-weight: $font-semibold;
+    margin-bottom: 5px;
 
-    .playlist-display-name {
-      font-size: 18px;
-      font-weight: $font-semibold;
-      margin-bottom: 5px;
+    .pt-badge {
+      @include margin-left(5px);
     }
+  }
 
-    .playlist-by-index {
-      color: pvar(--greyForegroundColor);
-      display: flex;
+  .playlist-by-index {
+    color: pvar(--greyForegroundColor);
+    display: flex;
 
-      .playlist-by {
-        @include margin-right(5px);
-      }
+    .playlist-by {
+      @include margin-right(5px);
+    }
 
-      .playlist-index span:first-child::after {
-        content: '/';
-        margin: 0 3px;
-      }
+    .playlist-index span:first-child::after {
+      content: '/';
+      margin: 0 3px;
     }
+  }
 
-    .playlist-controls {
-      display: flex;
-      margin: 10px 0;
+  .playlist-controls {
+    display: flex;
+    margin: 10px 0;
 
-      my-global-icon:not(:last-child) {
-        @include margin-right(.5rem);
-      }
+    my-global-icon:not(:last-child) {
+      @include margin-right(.5rem);
+    }
 
-      my-global-icon {
-        &:not(.active) {
-          opacity: .5;
-        }
+    my-global-icon {
+      &:not(.active) {
+        opacity: .5;
+      }
 
-        ::ng-deep {
-          cursor: pointer;
-        }
+      ::ng-deep {
+        cursor: pointer;
       }
     }
   }
diff --git a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
index e493ad8d7..5ac801622 100644
--- a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
+++ b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
@@ -1,9 +1,8 @@
 <div class="other-videos" [ngClass]="{ 'display-as-row': displayAsRow }">
   <ng-container *ngIf="hasVideos$ | async">
     <div class="title-page-container">
-      <h2 i18n class="title-page title-page-single">
-        Other videos
-      </h2>
+      <h2 i18n class="title-page">Other videos</h2>
+
       <div *ngIf="!playlist" class="title-page-autoplay"
         [ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto"
       >
diff --git a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss
index 784d0e961..5b1bf9cab 100644
--- a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss
@@ -8,18 +8,14 @@
   margin-bottom: 25px;
   flex-wrap: wrap-reverse;
 
-  .title-page.active,
-  .title-page.title-page-single {
+  .title-page {
     @include margin-right(.5rem !important);
 
     margin-bottom: unset;
+    margin-top: 0;
   }
 }
 
-.title-page {
-  margin-top: 0;
-}
-
 .title-page-autoplay {
   @include margin-left(auto);
 
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index 1ea0cf6b8..461891779 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -61,7 +61,7 @@
             <div class="video-info-channel-left d-flex">
               <my-video-avatar-channel [video]="video" [showChannel]="!isChannelDisplayNameGeneric()"></my-video-avatar-channel>
 
-              <div class="video-info-channel-left-links ml-1">
+              <div class="video-info-channel-left-links ms-1">
                 <ng-container *ngIf="!isChannelDisplayNameGeneric()">
                   <a [routerLink]="[ '/c', video.byVideoChannel ]" i18n-title title="Channel page">
                     {{ video.channel.displayName }}
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss
index 6818a4257..d438facd3 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -112,7 +112,6 @@ $video-height: 66vh;
   margin-top: 50px;
   text-align: center;
   font-weight: $font-semibold;
-  font-size: 15px;
 }
 
 .video-bottom {
@@ -158,12 +157,11 @@ $video-height: 66vh;
 
   margin-bottom: 10px;
   align-self: start;
-  font-size: 1em;
+  font-size: 14px;
 }
 
 .video-info-channel {
   font-weight: $font-semibold;
-  font-size: 15px;
 
   a {
     @include disable-default-a-behaviour;
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.html b/client/src/app/+videos/video-list/overview/video-overview.component.html
index f250c2407..20cbb239b 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.html
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.html
@@ -1,4 +1,4 @@
-<h1 class="sr-only" i18n>Discover</h1>
+<h1 class="visually-hidden" i18n>Discover</h1>
 <div class="margin-content">
 
   <div class="no-results" i18n *ngIf="notResults">No results.</div>
@@ -10,7 +10,7 @@
 
       <div class="section videos" *ngFor="let object of overview.categories">
         <h1 class="section-title">
-          <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
+          <a class="link-orange" routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
         </h1>
 
         <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
@@ -21,7 +21,7 @@
 
       <div class="section videos" *ngFor="let object of overview.tags">
         <h2 class="section-title">
-          <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
+          <a class="link-orange" routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
         </h2>
 
         <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
@@ -32,7 +32,7 @@
 
       <div class="section channel videos" *ngFor="let object of overview.channels">
         <div class="section-title">
-          <a [routerLink]="[ '/c', buildVideoChannelBy(object) ]">
+          <a class="link-orange" [routerLink]="[ '/c', buildVideoChannelBy(object) ]">
             <my-actor-avatar [channel]="buildVideoChannel(object)" size="28"></my-actor-avatar>
 
             <h2 class="section-title">{{ object.channel.displayName }}</h2>
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss
index 8b2aa88f2..5a789b66d 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.scss
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss
@@ -13,7 +13,7 @@
 
 .section {
   &:first-child {
-    padding-top: 30px;
+    padding-top: 15px;
 
     .section-title {
       border-top: 0 !important;
@@ -22,66 +22,27 @@
 
   .section-title {
     font-size: 24px;
-    font-weight: $font-semibold;
-    padding-top: 15px;
-    margin-bottom: 15px;
-    display: flex;
-    justify-content: space-between;
+    padding-top: 20px;
+    margin-bottom: 30px;
 
     &:not(h2) {
       border-top: 1px solid $separator-border-color;
     }
 
-    a {
-      color: pvar(--mainForegroundColor);
-
-      &:hover,
-      &:focus:not(.focus-visible),
-      &:active {
-        text-decoration: none;
-        outline: none;
-      }
+    a > h2 {
+      margin-bottom: 0;
+      display: inline-block;
+      font-weight: $font-bold;
     }
-  }
-
-  &.channel {
-    .section-title {
-      a {
-        display: flex;
-        width: fit-content;
-        align-items: center;
-
-        my-actor-avatar {
-          @include margin-right(8px);
-
-          font-size: initial;
-        }
-      }
 
-      .followers {
-        @include margin-left(10px);
+    my-actor-avatar {
+      @include margin-right(8px);
 
-        color: pvar(--greyForegroundColor);
-        font-weight: normal;
-        font-size: 14px;
-        position: relative;
-        top: 2px;
-      }
+      position: relative;
+      top: -2px;
     }
   }
 
-  .show-more {
-    position: relative;
-    top: -5px;
-    display: inline-block;
-    font-size: 16px;
-    text-transform: uppercase;
-    color: pvar(--greyForegroundColor);
-    margin-bottom: 10px;
-    font-weight: $font-semibold;
-    text-decoration: none;
-  }
-
   @media screen and (max-width: $mobile-view) {
     max-height: initial;
     overflow: initial;
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 d2782036b..c8fa8ef30 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
@@ -204,13 +204,28 @@ export class VideosListCommonPageComponent implements OnInit, OnDestroy, Disable
     if ([ 'hot', 'trending', 'likes', 'views' ].includes(sanitizedSort)) {
       this.title = $localize`Trending`
 
-      if (sanitizedSort === 'hot') this.titleTooltip = $localize`Videos with the most interactions for recent videos`
-      if (sanitizedSort === 'likes') this.titleTooltip = $localize`Videos that have the most likes`
-      if (sanitizedSort === 'views') this.titleTooltip = undefined
+      if (sanitizedSort === 'hot') {
+        this.titleTooltip = $localize`Videos with the most interactions for recent videos`
+        return
+      }
+
+      if (sanitizedSort === 'likes') {
+        this.titleTooltip = $localize`Videos that have the most likes`
+        return
+      }
+
+      if (sanitizedSort === 'views') {
+        this.titleTooltip = undefined
+        return
+      }
 
       if (sanitizedSort === 'trending') {
-        if (this.trendingDays === 1) this.titleTooltip = $localize`Videos with the most views during the last 24 hours`
-        else this.titleTooltip = $localize`Videos with the most views during the last ${this.trendingDays} days`
+        if (this.trendingDays === 1) {
+          this.titleTooltip = $localize`Videos with the most views during the last 24 hours`
+          return
+        }
+
+        this.titleTooltip = $localize`Videos with the most views during the last ${this.trendingDays} days`
       }
 
       return
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 6969329e8..629c04e6b 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -53,9 +53,7 @@
         <p>{{ message.detail }}</p>
       </div>
 
-      <span *ngIf="message.severity === 'success'" class="glyphicon glyphicon-ok"></span>
-      <span *ngIf="message.severity === 'info'" class="glyphicon glyphicon-info-sign"></span>
-      <span *ngIf="message.severity === 'error'" class="glyphicon glyphicon-remove"></span>
+      <my-global-icon [iconName]="getNotificationIcon(message)"></my-global-icon>
     </div>
   </ng-template>
 </p-toast>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 5f3e15d80..31e9987c6 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -103,14 +103,4 @@
     cursor: pointer;
     width: 20px;
   }
-
-  ::ng-deep {
-    p {
-      font-size: 16px;
-    }
-
-    p:last-child {
-      margin-bottom: 0;
-    }
-  }
 }
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index a60138af9..8fdab0c40 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -31,6 +31,7 @@ import { BroadcastMessageLevel, HTMLServerConfig, UserRole } from '@shared/model
 import { MenuService } from './core/menu/menu.service'
 import { POP_STATE_MODAL_DISMISS } from './helpers'
 import { InstanceService } from './shared/shared-instance'
+import { GlobalIconName } from './shared/shared-icons'
 
 @Component({
   selector: 'my-app',
@@ -150,6 +151,17 @@ export class AppComponent implements OnInit, AfterViewInit {
     this.screenService.isBroadcastMessageDisplayed = false
   }
 
+  getNotificationIcon (message: { severity: 'success' | 'error' | 'info' }): GlobalIconName {
+    switch (message.severity) {
+      case 'error':
+        return 'cross'
+      case 'success':
+        return 'tick'
+      case 'info':
+        return 'help'
+    }
+  }
+
   private initRouteEvents () {
     const eventsObs = this.router.events
 
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index d80f95ed6..4a4c2321b 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -41,7 +41,9 @@ import { LocalStorageService, ScreenService, SessionStorageService } from './wra
     ToastModule,
 
     HotkeyModule.forRoot({
-      cheatSheetCloseEsc: true
+      cheatSheetCloseEsc: true,
+      cheatSheetDescription: $localize`Show/hide this help menu`,
+      cheatSheetCloseEscDescription: $localize`Hide this help menu`
     })
   ],
 
diff --git a/client/src/app/core/menu/menu.service.ts b/client/src/app/core/menu/menu.service.ts
index f0dc4fcaa..81837db7e 100644
--- a/client/src/app/core/menu/menu.service.ts
+++ b/client/src/app/core/menu/menu.service.ts
@@ -132,7 +132,7 @@ export class MenuService {
         path: '/videos/trending'
       },
       {
-        icon: 'recently-added' as 'recently-added',
+        icon: 'add' as 'add',
         label: $localize`Recently added videos`,
         shortLabel: $localize`Recently added`,
         path: '/videos/recently-added'
diff --git a/client/src/app/core/notification/peertube-socket.service.ts b/client/src/app/core/notification/peertube-socket.service.ts
index 0db86d8e7..50a11e948 100644
--- a/client/src/app/core/notification/peertube-socket.service.ts
+++ b/client/src/app/core/notification/peertube-socket.service.ts
@@ -1,5 +1,5 @@
 import { Subject } from 'rxjs'
-import { io, Socket } from 'socket.io-client'
+import { ManagerOptions, Socket, SocketOptions } from 'socket.io-client'
 import { Injectable } from '@angular/core'
 import { LiveVideoEventPayload, LiveVideoEventType, UserNotification as UserNotificationServer } from '@shared/models'
 import { environment } from '../../../environments/environment'
@@ -9,7 +9,7 @@ export type NotificationEvent = 'new' | 'read' | 'read-all'
 
 @Injectable()
 export class PeerTubeSocket {
-  private io: typeof io
+  private io: (uri: string, opts?: Partial<ManagerOptions & SocketOptions>) => Socket
 
   private notificationSubject = new Subject<{ type: NotificationEvent, notification?: UserNotificationServer }>()
   private liveVideosSubject = new Subject<{ type: LiveVideoEventType, payload: LiveVideoEventPayload }>()
diff --git a/client/src/app/core/rest/rest-extractor.service.ts b/client/src/app/core/rest/rest-extractor.service.ts
index 17053811c..86c7484a5 100644
--- a/client/src/app/core/rest/rest-extractor.service.ts
+++ b/client/src/app/core/rest/rest-extractor.service.ts
@@ -34,49 +34,17 @@ export class RestExtractor {
     return target
   }
 
-  handleError (err: any) {
-    let errorMessage
+  redirectTo404IfNotFound (obj: { status: number }, type: 'video' | 'other', status = [ HttpStatusCode.NOT_FOUND_404 ]) {
+    if (obj?.status && status.includes(obj.status)) {
+      // Do not use redirectService to avoid circular dependencies
+      this.router.navigate([ '/404' ], { state: { type, obj }, skipLocationChange: true })
+    }
 
-    if (err.error instanceof Error) {
-      // A client-side or network error occurred. Handle it accordingly.
-      errorMessage = err.error.detail || err.error.title
-      console.error('An error occurred:', errorMessage)
-    } else if (typeof err.error === 'string') {
-      errorMessage = err.error
-    } else if (err.status !== undefined) {
-      // A server-side error occurred.
-      if (err.error?.errors) {
-        const errors = err.error.errors
-        const errorsArray: string[] = []
-
-        Object.keys(errors).forEach(key => {
-          errorsArray.push(errors[key].msg)
-        })
-
-        errorMessage = errorsArray.join('. ')
-      } else if (err.error?.error) {
-        errorMessage = err.error.error
-      } else if (err.status === HttpStatusCode.PAYLOAD_TOO_LARGE_413) {
-        // eslint-disable-next-line max-len
-        errorMessage = $localize`Media is too large for the server. Please contact you administrator if you want to increase the limit size.`
-      } else if (err.status === HttpStatusCode.TOO_MANY_REQUESTS_429) {
-        const secondsLeft = err.headers.get('retry-after')
-        if (secondsLeft) {
-          const minutesLeft = Math.floor(parseInt(secondsLeft, 10) / 60)
-          errorMessage = $localize`Too many attempts, please try again after ${minutesLeft} minutes.`
-        } else {
-          errorMessage = $localize`Too many attempts, please try again later.`
-        }
-      } else if (err.status === HttpStatusCode.INTERNAL_SERVER_ERROR_500) {
-        errorMessage = $localize`Server error. Please retry later.`
-      }
+    return observableThrowError(() => obj)
+  }
 
-      errorMessage = errorMessage || 'Unknown error.'
-      console.error(`Backend returned code ${err.status}, errorMessage is: ${errorMessage}`)
-    } else {
-      console.error(err)
-      errorMessage = err
-    }
+  handleError (err: any) {
+    const errorMessage = this.buildErrorMessage(err)
 
     const errorObj: { message: string, status: string, body: string } = {
       message: errorMessage,
@@ -92,12 +60,63 @@ export class RestExtractor {
     return observableThrowError(() => errorObj)
   }
 
-  redirectTo404IfNotFound (obj: { status: number }, type: 'video' | 'other', status = [ HttpStatusCode.NOT_FOUND_404 ]) {
-    if (obj?.status && status.includes(obj.status)) {
-      // Do not use redirectService to avoid circular dependencies
-      this.router.navigate([ '/404' ], { state: { type, obj }, skipLocationChange: true })
+  private buildErrorMessage (err: any) {
+    if (err.error instanceof Error) {
+      // A client-side or network error occurred. Handle it accordingly.
+      const errorMessage = err.error.detail || err.error.title
+      console.error('An error occurred:', errorMessage)
+
+      return errorMessage
     }
 
-    return observableThrowError(() => obj)
+    if (typeof err.error === 'string') {
+      return err.error
+    }
+
+    if (err.status !== undefined) {
+      const errorMessage = this.buildServerErrorMessage(err)
+      console.error(`Backend returned code ${err.status}, errorMessage is: ${errorMessage}`)
+
+      return errorMessage
+    }
+
+    console.error(err)
+    return err
+  }
+
+  private buildServerErrorMessage (err: any) {
+    // A server-side error occurred.
+    if (err.error?.errors) {
+      const errors = err.error.errors
+
+      return Object.keys(errors)
+        .map(key => errors[key].msg)
+        .join('. ')
+    }
+
+    if (err.error?.error) {
+      return err.error.error
+    }
+
+    if (err.status === HttpStatusCode.PAYLOAD_TOO_LARGE_413) {
+      return $localize`Media is too large for the server. Please contact you administrator if you want to increase the limit size.`
+    }
+
+    if (err.status === HttpStatusCode.TOO_MANY_REQUESTS_429) {
+      const secondsLeft = err.headers.get('retry-after')
+
+      if (secondsLeft) {
+        const minutesLeft = Math.floor(parseInt(secondsLeft, 10) / 60)
+        return $localize`Too many attempts, please try again after ${minutesLeft} minutes.`
+      }
+
+      return $localize`Too many attempts, please try again later.`
+    }
+
+    if (err.status === HttpStatusCode.INTERNAL_SERVER_ERROR_500) {
+      return $localize`Server error. Please retry later.`
+    }
+
+    return $localize`Unknown server error`
   }
 }
diff --git a/client/src/app/core/rest/rest-table.ts b/client/src/app/core/rest/rest-table.ts
index d8b039187..7b765f7fc 100644
--- a/client/src/app/core/rest/rest-table.ts
+++ b/client/src/app/core/rest/rest-table.ts
@@ -39,6 +39,10 @@ export abstract class RestTable {
     }
   }
 
+  saveSort () {
+    peertubeLocalStorage.setItem(this.getSortLocalStorageKey(), JSON.stringify(this.sort))
+  }
+
   loadLazy (event: LazyLoadEvent) {
     logger('Load lazy %o.', event)
 
@@ -60,10 +64,6 @@ export abstract class RestTable {
     this.saveSort()
   }
 
-  saveSort () {
-    peertubeLocalStorage.setItem(this.getSortLocalStorageKey(), JSON.stringify(this.sort))
-  }
-
   onSearch (search: string) {
     this.search = search
     this.reloadData()
diff --git a/client/src/app/core/routing/scroll.service.ts b/client/src/app/core/routing/scroll.service.ts
index bd5076502..6d37fde71 100644
--- a/client/src/app/core/routing/scroll.service.ts
+++ b/client/src/app/core/routing/scroll.service.ts
@@ -67,7 +67,7 @@ export class ScrollService {
   private consumeScroll () {
     // Handle anchors/restore position
     this.peertubeRouter.getScrollEvents().subscribe(e => {
-      logger('Will schedule scroll after router event %o.', e)
+      logger('Will schedule scroll after router event %o.', { e, resetScroll: this.resetScroll })
 
       // scrollToAnchor first to preserve anchor position when using history navigation
       if (e.anchor) {
diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts
index e88511054..da6f2442a 100644
--- a/client/src/app/core/theme/theme.service.ts
+++ b/client/src/app/core/theme/theme.service.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core'
+import { capitalizeFirstLetter } from '@root-helpers/string'
 import { UserLocalStorageKeys } from '@root-helpers/users'
 import { HTMLServerConfig, ServerConfigTheme } from '@shared/models'
 import { environment } from '../../../environments/environment'
@@ -40,6 +41,19 @@ export class ThemeService {
     this.listenUserTheme()
   }
 
+  getDefaultThemeLabel () {
+    if (this.hasDarkTheme()) {
+      return $localize`Light/Orange or Dark`
+    }
+
+    return $localize`Light/Orange`
+  }
+
+  getAvailableThemeLabels () {
+    return this.serverConfig.theme.registered
+               .map(t => capitalizeFirstLetter(t.name))
+  }
+
   private injectThemes (themes: ServerConfigTheme[], fromLocalStorage = false) {
     this.themes = themes
 
@@ -81,10 +95,7 @@ export class ThemeService {
     if (instanceTheme !== 'default') return instanceTheme
 
     // Default to dark theme if available and wanted by the user
-    if (
-      this.themes.find(t => t.name === 'dark') &&
-      window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-    ) {
+    if (this.hasDarkTheme() && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
       return 'dark'
     }
 
@@ -193,4 +204,8 @@ export class ThemeService {
   private getTheme (name: string) {
     return this.themes.find(t => t.name === name)
   }
+
+  private hasDarkTheme () {
+    return this.serverConfig.theme.registered.some(t => t.name === 'dark')
+  }
 }
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index de483086b..8a4111c5a 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -2,7 +2,11 @@
 @use '_mixins' as *;
 
 my-search-typeahead {
-  @include margin-right(15px);
+  @include margin-right(80px);
+
+  @media screen and (max-width: $small-view) {
+    @include margin-right(15px);
+  }
 }
 
 .publish-button {
@@ -11,7 +15,7 @@ my-search-typeahead {
   @include button-with-icon(22px, 3px, -1px);
   @include margin-right(25px);
 
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: $mobile-view) {
     @include margin-right(10px);
 
     padding: 0 10px;
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html
index 7a9b6c51f..783b4b53b 100644
--- a/client/src/app/header/search-typeahead.component.html
+++ b/client/src/app/header/search-typeahead.component.html
@@ -25,8 +25,7 @@
       <div class="d-flex justify-content-between">
         <label class="small-title" i18n>GLOBAL SEARCH</label>
         <div class="advanced-search-status muted">
-          <span *ngIf="serverConfig" class="mr-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
-          <i class="glyphicon glyphicon-globe"></i>
+          <span *ngIf="serverConfig" class="me-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
         </div>
       </div>
       <div class="muted" i18n>Results will be augmented with those of a third-party index. Only data necessary to make the query will be sent.</div>
@@ -39,9 +38,8 @@
         <label class="small-title" i18n>ADVANCED SEARCH</label>
         <div class="advanced-search-status c-help">
           <span [ngClass]="canSearchAnyURI ? 'text-success' : 'muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows.">
-            <span *ngIf="canSearchAnyURI()" class="mr-1" i18n>any instance</span>
-            <span *ngIf="!canSearchAnyURI()" class="mr-1" i18n>only followed instances</span>
-            <i [ngClass]="canSearchAnyURI() ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i>
+            <span *ngIf="canSearchAnyURI()" class="me-1" i18n>any instance</span>
+            <span *ngIf="!canSearchAnyURI()" class="me-1" i18n>only followed instances</span>
           </span>
         </div>
       </div>
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index 5114ec3a7..e4c9c602c 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -129,10 +129,6 @@ li.suggestion {
   }
 }
 
-.glyphicon {
-  top: 3px;
-}
-
 .advanced-search-status {
   height: max-content;
   cursor: default;
diff --git a/client/src/app/header/suggestion.component.html b/client/src/app/header/suggestion.component.html
index 4ac9809e1..3f85ed6ae 100644
--- a/client/src/app/header/suggestion.component.html
+++ b/client/src/app/header/suggestion.component.html
@@ -1,16 +1,16 @@
 <a tabindex="-1" class="d-flex flex-auto flex-items-center p-2" [class.focus-visible]="active">
-  <div class="flex-shrink-0 mr-2 text-center">
+  <div class="flex-shrink-0 me-2 text-center">
     <my-global-icon iconName="search"></my-global-icon>
   </div>
 
-  <img class="avatar mr-2 flex-shrink-0 d-none" alt="" aria-label="Team" src="" width="28" height="28">
+  <img class="avatar me-2 flex-shrink-0 d-none" alt="" aria-label="Team" src="" width="28" height="28">
 
   <div
-    class="flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target"
+    class="flex-auto overflow-hidden text-start no-wrap css-truncate css-truncate-target"
     [attr.aria-label]="result.text" [innerHTML]="result.text | highlight : highlight"
   ></div>
 
-  <div class="border rounded flex-shrink-0 px-1 bg-gray text-gray-light ml-1 f6">
+  <div class="border rounded flex-shrink-0 px-1 bg-gray text-gray-light ms-1 f6">
     <span *ngIf="result.type === 'search-instance'" i18n>In this instance's network</span>
     <span *ngIf="result.type === 'search-index'" i18n>In the vidiverse</span>
   </div>
diff --git a/client/src/app/helpers/i18n-utils.ts b/client/src/app/helpers/i18n-utils.ts
index bbfb12959..2017a31ea 100644
--- a/client/src/app/helpers/i18n-utils.ts
+++ b/client/src/app/helpers/i18n-utils.ts
@@ -1,4 +1,5 @@
 import { environment } from '../../environments/environment'
+import IntlMessageFormat from 'intl-messageformat'
 
 function isOnDevLocale () {
   return environment.production === false && window.location.search === '?lang=fr'
@@ -8,7 +9,31 @@ function getDevLocale () {
   return 'fr-FR'
 }
 
+function prepareIcu (icu: string) {
+  let alreadyWarned = false
+
+  try {
+    const msg = new IntlMessageFormat(icu, $localize.locale)
+
+    return (context: { [id: string]: number | string }, fallback: string) => {
+      try {
+        return msg.format(context) as string
+      } catch (err) {
+        if (!alreadyWarned) console.warn('Cannot format ICU %s.', icu, err)
+
+        alreadyWarned = true
+        return fallback
+      }
+    }
+  } catch (err) {
+    console.warn('Cannot build intl message %s.', icu, err)
+
+    return (_context: unknown, fallback: string) => fallback
+  }
+}
+
 export {
   getDevLocale,
+  prepareIcu,
   isOnDevLocale
 }
diff --git a/client/src/app/helpers/utils/upload.ts b/client/src/app/helpers/utils/upload.ts
index a3fce7fee..5c2600a0d 100644
--- a/client/src/app/helpers/utils/upload.ts
+++ b/client/src/app/helpers/utils/upload.ts
@@ -2,36 +2,43 @@ import { HttpErrorResponse } from '@angular/common/http'
 import { Notifier } from '@app/core'
 import { HttpStatusCode } from '@shared/models'
 
-function genericUploadErrorHandler (parameters: {
+function genericUploadErrorHandler (options: {
   err: Pick<HttpErrorResponse, 'message' | 'status' | 'headers'>
   name: string
   notifier: Notifier
   sticky?: boolean
 }) {
-  const { err, name, notifier, sticky } = { sticky: false, ...parameters }
-  const title = $localize`The upload failed`
-  let message = err.message
-
-  if (err instanceof ErrorEvent) { // network error
-    message = $localize`The connection was interrupted`
-    notifier.error(message, title, null, sticky)
-  } else if (err.status === HttpStatusCode.INTERNAL_SERVER_ERROR_500) {
-    message = $localize`The server encountered an error`
-    notifier.error(message, title, null, sticky)
-  } else if (err.status === HttpStatusCode.REQUEST_TIMEOUT_408) {
-    message = $localize`Your ${name} file couldn't be transferred before the set timeout (usually 10min)`
-    notifier.error(message, title, null, sticky)
-  } else if (err.status === HttpStatusCode.PAYLOAD_TOO_LARGE_413) {
-    const maxFileSize = err.headers?.get('X-File-Maximum-Size') || '8G'
-    message = $localize`Your ${name} file was too large (max. size: ${maxFileSize})`
-    notifier.error(message, title, null, sticky)
-  } else {
-    notifier.error(err.message, title)
-  }
+  const { err, name, notifier, sticky = false } = options
+  const title = $localize`Upload failed`
+  const message = buildMessage(name, err)
 
+  notifier.error(message, title, null, sticky)
   return message
 }
 
 export {
   genericUploadErrorHandler
 }
+
+// ---------------------------------------------------------------------------
+
+function buildMessage (name: string, err: Pick<HttpErrorResponse, 'message' | 'status' | 'headers'>) {
+  if (err instanceof ErrorEvent) { // network error
+    return $localize`The connection was interrupted`
+  }
+
+  if (err.status === HttpStatusCode.INTERNAL_SERVER_ERROR_500) {
+    return $localize`The server encountered an error`
+  }
+
+  if (err.status === HttpStatusCode.REQUEST_TIMEOUT_408) {
+    return $localize`Your ${name} file couldn't be transferred before the server proxy timeout`
+  }
+
+  if (err.status === HttpStatusCode.PAYLOAD_TOO_LARGE_413) {
+    const maxFileSize = err.headers?.get('X-File-Maximum-Size') || '8G'
+    return $localize`Your ${name} file was too large (max. size: ${maxFileSize})`
+  }
+
+  return err.message
+}
diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss
index 04b18af33..28d58a678 100644
--- a/client/src/app/menu/language-chooser.component.scss
+++ b/client/src/app/menu/language-chooser.component.scss
@@ -18,7 +18,6 @@
 
   a {
     display: block;
-    font-size: 16px;
     margin: 15px;
   }
 }
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index b8f8d68ab..66ccb9870 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -16,7 +16,7 @@
               </div>
 
               <div class="dropdown-toggle-indicator">
-                <span class="glyphicon glyphicon-chevron-down"></span>
+                <span class="chevron-down"></span>
               </div>
             </div>
 
@@ -36,31 +36,31 @@
               >
                 <my-global-icon iconName="language" aria-hidden="true"></my-global-icon>
                 <span i18n>Interface:</span>
-                <span class="ml-auto muted">{{ currentInterfaceLanguage }}</span>
+                <span class="ms-auto muted">{{ currentInterfaceLanguage }}</span>
               </a>
 
               <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles"
                 #settingsLanguagesSubtitles (click)="onActiveLinkScrollToAnchor(settingsLanguagesSubtitles)">
                 <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon>
                 <span i18n>Videos:</span>
-                <span class="ml-auto muted">{{ videoLanguages.join(', ') }}</span>
+                <span class="ms-auto muted">{{ videoLanguages.join(', ') }}</span>
               </a>
 
               <a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings"
                 fragment="video-sensitive-content-policy" #settingsSensitiveContentPolicy
                 (click)="onActiveLinkScrollToAnchor(settingsSensitiveContentPolicy)"
               >
-                <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy === 'display'" iconName="sensitive" aria-hidden="true"></my-global-icon>
-                <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy !== 'display'" iconName="unsensitive" aria-hidden="true"></my-global-icon>
+                <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy === 'display'" iconName="eye-open" aria-hidden="true"></my-global-icon>
+                <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy !== 'display'" iconName="eye-close" aria-hidden="true"></my-global-icon>
                 <span i18n>Sensitive:</span>
-                <span class="ml-auto muted">{{ nsfwPolicy }}</span>
+                <span class="ms-auto muted">{{ nsfwPolicy }}</span>
               </a>
 
               <a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
                 <my-global-icon iconName="p2p" aria-hidden="true"></my-global-icon>
                 <ng-container i18n>Help share videos</ng-container>
 
-                <my-input-switch class="ml-auto" [checked]="user.p2pEnabled"></my-input-switch>
+                <my-input-switch class="ms-auto" [checked]="user.p2pEnabled"></my-input-switch>
               </a>
 
               <div class="dropdown-divider"></div>
@@ -149,7 +149,7 @@
 
         <div class="footer-copyleft">
           <small class="d-inline" i18n-title title="powered by PeerTube - CopyLeft 2015-2022">
-            <a href="https://joinpeertube.org" class="mr-1" target="_blank" rel="noopener noreferrer" i18n>powered by PeerTube</a>
+            <a href="https://joinpeertube.org" class="me-1" target="_blank" rel="noopener noreferrer" i18n>powered by PeerTube</a>
 
             <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE" target="_blank" rel="noopener noreferrer">
               <span aria-label="copyleft" class="d-inline-block" style="transform: rotateY(180deg)">&copy;</span> 2015-2022
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 808a33a4a..a548c08cf 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -16,7 +16,6 @@ $footer-links-base-opacity: .8;
 
   color: pvar(--menuForegroundColor);
   cursor: pointer;
-  font-size: 16px;
   white-space: normal;
   word-break: break-word;
   transition: background-color .1s ease-in-out;
@@ -106,6 +105,7 @@ my-notification {
 }
 
 .logged-in-more {
+
   @mixin display-hints($is-mobile: false) {
     background-color: rgba(255, 255, 255, 0.15);
 
@@ -114,18 +114,16 @@ my-notification {
         display: inherit !important;
       }
 
-      .dropdown-toggle {
+      > .dropdown-toggle {
         max-width: 88% !important;
       }
     }
   }
 
-  $main-radius: 25px;
-
   @include margin-left(13px);
 
   flex: 1;
-  border-radius: $main-radius;
+  border-radius: 25px;
   transition: all .1s ease-in-out;
   cursor: pointer;
   line-height: 1;
@@ -157,7 +155,6 @@ my-notification {
 
   .dropdown-toggle-indicator {
     position: relative;
-    width: 0;
     display: none;
 
     span {
@@ -165,21 +162,17 @@ my-notification {
       right: -35px;
       top: -8px;
       color: #808080;
-      width: $main-radius;
     }
   }
 
-  .dropdown-toggle {
-    &::after {
-      border: 0;
-    }
+  .dropdown-toggle::after {
+    border: 0;
   }
 
-  .dropdown-toggle:first-child {
+  > .dropdown-toggle:first-child {
     display: flex;
     align-items: center;
     padding: 5px 7px;
-    border-radius: $main-radius;
   }
 }
 
@@ -201,7 +194,6 @@ my-actor-avatar {
 .logged-in-display-name {
   @include disable-default-a-behaviour;
 
-  font-size: 16px;
   font-weight: $font-semibold;
   color: pvar(--menuForegroundColor);
 }
@@ -325,7 +317,7 @@ my-actor-avatar {
     color: pvar(--menuForegroundColor);
     opacity: $footer-links-base-opacity;
     white-space: nowrap;
-    font-size: 90%;
+    font-size: 0.75rem;
     font-weight: 500;
     line-height: 1.4rem;
   }
@@ -358,10 +350,6 @@ my-actor-avatar {
   display: flex;
   align-items: center;
 
-  i.glyphicon-menu-right {
-    opacity: .4;
-  }
-
   &:hover {
     .hover-display-toggle {
       display: none;
@@ -396,13 +384,6 @@ my-actor-avatar {
   .dropdown-menu {
     width: calc(100vw - 30px);
   }
-
-  .dropdown-item:hover,
-  .dropdown-item:active {
-    &.settings-sensitive my-global-icon ::ng-deep svg {
-      margin-top: 0 !important;
-    }
-  }
 }
 
 my-global-icon {
diff --git a/client/src/app/menu/notification.component.html b/client/src/app/menu/notification.component.html
index beda1c43c..890b086f1 100644
--- a/client/src/app/menu/notification.component.html
+++ b/client/src/app/menu/notification.component.html
@@ -24,19 +24,24 @@
       <div>
         <button
           *ngIf="unreadNotifications"
-          i18n-title title="Mark all as read" class="glyphicon glyphicon-ok mr-2"
+          i18n-title title="Mark all as read" class="me-2"
           (click)="markAllAsRead()"
-        ></button>
+        >
+          <my-global-icon iconName="tick"></my-global-icon>
+        </button>
+
         <a
-          i18n-title title="Update your notification preferences" class="glyphicon glyphicon-cog"
+          i18n-title title="Update your notification preferences"
           routerLink="/my-account/settings" fragment="notifications"
           #settingsNotifications (click)="onNavigate(settingsNotifications)"
-        ></a>
+        >
+          <my-global-icon iconName="cog"></my-global-icon>
+        </a>
       </div>
     </div>
 
     <div *ngIf="!loaded" class="loader mt-4">
-      <my-loader [loading]="!loaded"></my-loader>
+      <my-loader size="xl" [loading]="!loaded"></my-loader>
     </div>
 
     <my-user-notifications
@@ -45,7 +50,7 @@
     ></my-user-notifications>
 
     <a *ngIf="loaded" class="all-notifications" routerLink="/my-account/notifications" #notifications (click)="onNavigate(notifications)">
-      <my-global-icon class="mr-1" iconName="bell" aria-hidden="true"></my-global-icon>
+      <my-global-icon class="me-1" iconName="bell" aria-hidden="true"></my-global-icon>
       <span i18n>See all your notifications</span>
     </a>
   </div>
diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss
index 3515c3e19..7f72c98d1 100644
--- a/client/src/app/menu/notification.component.scss
+++ b/client/src/app/menu/notification.component.scss
@@ -119,6 +119,10 @@
             color: rgba(20, 20, 20, 0.8);
           }
         }
+
+        my-global-icon {
+          width: 20px;
+        }
       }
 
       .all-notifications {
diff --git a/client/src/app/modal/account-setup-warning-modal.component.scss b/client/src/app/modal/account-setup-warning-modal.component.scss
index d99edaf7a..25e67b08f 100644
--- a/client/src/app/modal/account-setup-warning-modal.component.scss
+++ b/client/src/app/modal/account-setup-warning-modal.component.scss
@@ -2,7 +2,6 @@
 @use '_variables' as *;
 
 .modal-body {
-  font-size: 15px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -24,7 +23,6 @@
 .subtitle {
   font-weight: $font-semibold;
   margin-bottom: 10px;
-  font-size: 16px;
 }
 
 li {
diff --git a/client/src/app/modal/admin-welcome-modal.component.scss b/client/src/app/modal/admin-welcome-modal.component.scss
index 242a498d0..716f1fff0 100644
--- a/client/src/app/modal/admin-welcome-modal.component.scss
+++ b/client/src/app/modal/admin-welcome-modal.component.scss
@@ -1,10 +1,6 @@
 @use '_mixins' as *;
 @use '_variables' as *;
 
-.modal-body {
-  font-size: 15px;
-}
-
 .two-columns {
   display: flex;
   align-items: center;
@@ -26,7 +22,6 @@
 .subtitle {
   font-weight: $font-semibold;
   margin-bottom: 10px;
-  font-size: 16px;
 }
 
 .block-documentation {
@@ -63,7 +58,6 @@ li {
   }
 
   .link-title {
-    font-size: 16px;
     font-weight: $font-semibold;
     display: flex;
     justify-content: center;
diff --git a/client/src/app/modal/confirm.component.html b/client/src/app/modal/confirm.component.html
index f07501726..c59c25770 100644
--- a/client/src/app/modal/confirm.component.html
+++ b/client/src/app/modal/confirm.component.html
@@ -9,7 +9,7 @@
   <div class="modal-body" >
     <div [innerHtml]="message"></div>
 
-    <div *ngIf="inputLabel && expectedInputValue" class="form-group">
+    <div *ngIf="inputLabel && expectedInputValue" class="form-group mt-3">
       <label for="confirmInput">{{ inputLabel }}</label>
       <input type="text" id="confirmInput" name="confirmInput" [(ngModel)]="inputValue" />
     </div>
diff --git a/client/src/app/modal/confirm.component.scss b/client/src/app/modal/confirm.component.scss
index 77ea4d307..3372baf1a 100644
--- a/client/src/app/modal/confirm.component.scss
+++ b/client/src/app/modal/confirm.component.scss
@@ -1,10 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.modal-body {
-  font-size: 15px;
-}
-
 .button {
   padding: 0 13px;
 }
@@ -13,7 +9,3 @@ input[type=text] {
   @include peertube-input-text(100%);
   display: block;
 }
-
-.form-group {
-  margin: 20px 0;
-}
diff --git a/client/src/app/modal/custom-modal.component.scss b/client/src/app/modal/custom-modal.component.scss
index 15cbadfc0..c5b77994e 100644
--- a/client/src/app/modal/custom-modal.component.scss
+++ b/client/src/app/modal/custom-modal.component.scss
@@ -1,10 +1,6 @@
 @use '_mixins' as *;
 @use '_variables' as *;
 
-.modal-body {
-  font-size: 15px;
-}
-
 li {
   margin-bottom: 10px;
 }
diff --git a/client/src/app/modal/instance-config-warning-modal.component.scss b/client/src/app/modal/instance-config-warning-modal.component.scss
index 3e6c6d716..b650f4e69 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.scss
+++ b/client/src/app/modal/instance-config-warning-modal.component.scss
@@ -1,10 +1,6 @@
 @use '_mixins' as *;
 @use '_variables' as *;
 
-.modal-body {
-  font-size: 15px;
-}
-
 li {
   margin-bottom: 10px;
 }
diff --git a/client/src/app/modal/quick-settings-modal.component.html b/client/src/app/modal/quick-settings-modal.component.html
index 8fa3aee50..5c55ee028 100644
--- a/client/src/app/modal/quick-settings-modal.component.html
+++ b/client/src/app/modal/quick-settings-modal.component.html
@@ -5,21 +5,17 @@
   </div>
 
   <div class="modal-body">
-    <div i18n class="mb-4 font-italic">These settings apply only to your session on this instance.</div>
+    <div i18n class="alert pt-alert-primary">These settings apply only to your session on this instance.</div>
 
-    <h6 i18n class="mb-4">Display settings</h6>
+    <h5 i18n class="mt-4 mb-2">Videos</h5>
 
     <my-user-video-settings
       *ngIf="!isUserLoggedIn()"
       [user]="user" [userInformationLoaded]="userInformationLoaded" [reactiveUpdate]="true" [notifyOnUpdate]="true"
     >
-
-      <ng-container ngProjectAs="inner-title">
-        <h6 i18n class="mb-4 mt-4">Video settings</h6>
-      </ng-container>
     </my-user-video-settings>
 
-    <h6 i18n class="mb-4 mt-4">Interface settings</h6>
+    <h5 i18n class="mt-4 mb-2">Interface</h5>
 
     <my-user-interface-settings
       *ngIf="!isUserLoggedIn()"
diff --git a/client/src/app/shared/form-validators/user-validators.ts b/client/src/app/shared/form-validators/user-validators.ts
index 6d0dea64e..3262853d8 100644
--- a/client/src/app/shared/form-validators/user-validators.ts
+++ b/client/src/app/shared/form-validators/user-validators.ts
@@ -61,7 +61,7 @@ export const USER_EXISTING_PASSWORD_VALIDATOR: BuildFormValidator = {
   }
 }
 
-export const USER_PASSWORD_VALIDATOR: BuildFormValidator = {
+export const USER_PASSWORD_VALIDATOR = {
   VALIDATORS: [
     Validators.required,
     Validators.minLength(6),
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
index 986de15ed..b04d46e32 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@@ -17,9 +17,10 @@
         </a>
 
         <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
-          class="ml-auto muted abuse-details-links" i18n
+          class="ms-auto muted abuse-details-links" i18n
         >
-          {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
+          {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}
+          <my-global-icon iconName="flag"></my-global-icon>
         </a>
       </span>
     </div>
@@ -37,9 +38,10 @@
         </a>
 
         <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
-          class="ml-auto muted abuse-details-links" i18n
+          class="ms-auto muted abuse-details-links" i18n
         >
-          {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
+          {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}
+          <my-global-icon iconName="flag"></my-global-icon>
         </a>
       </span>
     </div>
@@ -53,7 +55,7 @@
     <div class="mt-3 d-flex">
       <span class="moderation-expanded-label">
         <ng-container i18n>Report</ng-container>
-        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse.id  }" class="ml-1 muted">#{{ abuse.id }}</a>
+        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse.id  }" class="ms-1 muted">#{{ abuse.id }}</a>
       </span>
       <span class="moderation-expanded-text" [innerHTML]="abuse.reasonHtml"></span>
     </div>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
index 37bf4cc56..bd43ed459 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
@@ -15,3 +15,7 @@
 .abuse-details-links {
   @include disable-default-a-behaviour;
 }
+
+my-global-icon[iconName=flag] {
+  width: 15px;
+}
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index f0a27c6e2..f79054d03 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -8,7 +8,7 @@
 >
   <ng-template pTemplate="caption">
     <div class="caption">
-      <div class="ml-auto">
+      <div class="ms-auto">
         <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
@@ -70,7 +70,7 @@
             </span>
 
             <span name>
-              <span *ngIf="abuse.video.blacklisted" i18n-title title="The video was blocked" class="glyphicon glyphicon-ban-circle"></span>
+              <my-global-icon *ngIf="abuse.video.blacklisted" iconName="no" i18n-title title="The video was blocked"></my-global-icon>
             </span>
           </my-video-cell>
         </td>
@@ -80,7 +80,7 @@
             <div class="table-video-text">
               <div>
                 {{ abuse.video.name }}
-                <span class="glyphicon glyphicon-trash"></span>
+                <my-global-icon iconName="delete"></my-global-icon>
               </div>
               <div i18n>by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }} </div>
             </div>
@@ -116,8 +116,8 @@
       <td class="c-hand" [pRowToggler]="abuse">{{ abuse.createdAt | date: 'short'  }}</td>
 
       <td class="c-hand abuse-states" [pRowToggler]="abuse">
-        <span *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-ok"></span>
-        <span *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-remove"></span>
+        <my-global-icon *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" iconName="tick"></my-global-icon>
+        <my-global-icon *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" iconName="cross"></my-global-icon>
       </td>
 
       <td class="c-hand abuse-messages" (click)="openAbuseMessagesModal(abuse)">
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
index 2d8acae58..4852f2e8b 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
@@ -7,10 +7,6 @@
   color: var(--greyForegroundColor);
 }
 
-.abuse-states .glyphicon-comment {
-  @include margin-left(0.5rem);
-}
-
 .abuse-messages {
   my-global-icon {
     @include margin-left(3px);
@@ -20,3 +16,10 @@
     top: -2px;
   }
 }
+
+.table-video-text my-global-icon,
+my-video-cell my-global-icon {
+  width: 15px;
+  position: relative;
+  top: -2px;
+}
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
index d77e44a9d..3b43a4a4d 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
@@ -25,7 +25,6 @@ textarea {
 
 .no-messages {
   display: flex;
-  font-size: 15px;
   justify-content: center;
 }
 
@@ -45,10 +44,6 @@ textarea {
     color: var(--mainForegroundColor);
     background-color: var(--greyBackgroundColor);
 
-    .content {
-      font-size: 15px;
-    }
-
     .date {
       font-size: 13px;
       color: var(--greyForegroundColor);
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
index e9c5fadcf..b63bf1f92 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
@@ -6,7 +6,7 @@
 
       <div *ngIf="editable && !hasAvatar()" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
         <my-global-icon iconName="upload"></my-global-icon>
-        <label class="sr-only" for="avatarfile" i18n>Upload a new avatar</label>
+        <label class="visually-hidden" for="avatarfile" i18n>Upload a new avatar</label>
         <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
       </div>
 
@@ -15,7 +15,7 @@
         #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-image-info" autoClose="outside" placement="right"
       >
         <my-global-icon iconName="edit"></my-global-icon>
-        <label class="sr-only" for="avatarMenu" i18n>Change your avatar</label>
+        <label class="visually-hidden" for="avatarMenu" i18n>Change your avatar</label>
       </div>
 
     </div>
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
index 923f0029b..fd8cd7ffc 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
@@ -3,37 +3,36 @@
 
 .actor {
   display: flex;
+}
 
-  my-actor-avatar {
-    @include margin-right(15px);
-  }
+my-actor-avatar {
+  @include margin-right(15px);
+}
 
-  .actor-info {
-    display: inline-flex;
-    flex-direction: column;
+.actor-info {
+  display: inline-flex;
+  flex-direction: column;
+}
 
-    .actor-info-display-name {
-      @include peertube-word-wrap;
+.actor-info-display-name {
+  @include peertube-word-wrap;
 
-      font-size: 20px;
-      font-weight: $font-bold;
+  font-size: 20px;
+  font-weight: $font-bold;
 
-      @media screen and (max-width: $small-view) {
-        font-size: 16px;
-      }
-    }
+  @media screen and (max-width: $small-view) {
+    font-size: 16px;
+  }
+}
 
-    .actor-info-username {
-      position: relative;
-      font-size: 14px;
-      color: pvar(--greyForegroundColor);
-    }
+.actor-info-username {
+  position: relative;
+  font-size: 14px;
+  color: pvar(--greyForegroundColor);
+}
 
-    .actor-info-followers {
-      font-size: 15px;
-      padding-bottom: .5rem;
-    }
-  }
+.actor-info-followers {
+  padding-bottom: .5rem;
 }
 
 .actor-img-edit-container {
@@ -46,3 +45,7 @@
   right: 45px;
   border-radius: 50%;
 }
+
+.dropdown-item {
+  @include dropdown-with-icon-item;
+}
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.html b/client/src/app/shared/shared-actor-image/actor-avatar.component.html
index c285b6cc3..ba025da4d 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.html
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.html
@@ -1,7 +1,7 @@
 <ng-template #img>
-  <img *ngIf="previewImage || avatarUrl || !initial" [class]="getClass('avatar')" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" />
+  <img *ngIf="previewImage || avatarUrl || !initial" [class]="classes" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" />
 
-  <div *ngIf="!avatarUrl && initial" [ngClass]="getClass('initial')">
+  <div *ngIf="!avatarUrl && initial" [ngClass]="classes">
     <span>{{ initial }}</span>
   </div>
 </ng-template>
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
index 600984aa2..fa4f1e51f 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, OnChanges } from '@angular/core'
 import { VideoChannel } from '../shared-main'
 import { Account } from '../shared-main/account/account.model'
 
@@ -15,7 +15,7 @@ export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | '
   styleUrls: [ './actor-avatar.component.scss' ],
   templateUrl: './actor-avatar.component.html'
 })
-export class ActorAvatarComponent {
+export class ActorAvatarComponent implements OnChanges {
   private _title: string
 
   @Input() account: ActorInput
@@ -42,6 +42,8 @@ export class ActorAvatarComponent {
     return ''
   }
 
+  classes: string[] = []
+
   get alt () {
     if (this.account) return $localize`Account avatar`
     if (this.channel) return $localize`Channel avatar`
@@ -68,20 +70,18 @@ export class ActorAvatarComponent {
     return name.slice(0, 1)
   }
 
-  getClass (type: 'avatar' | 'initial') {
-    const base = [ 'avatar' ]
+  ngOnChanges () {
+    this.classes = [ 'avatar' ]
 
-    if (this.size) base.push(`avatar-${this.size}`)
+    if (this.size) this.classes.push(`avatar-${this.size}`)
 
-    if (this.channel) base.push('channel')
-    else base.push('account')
+    if (this.channel) this.classes.push('channel')
+    else this.classes.push('account')
 
-    if (type === 'initial' && this.initial) {
-      base.push('initial')
-      base.push(this.getColorTheme())
+    if (!this.avatarUrl && this.initial) {
+      this.classes.push('initial')
+      this.classes.push(this.getColorTheme())
     }
-
-    return base
   }
 
   hasActor () {
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts
index 0e4d5fb12..7d3498d4c 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts
@@ -7,7 +7,7 @@ import { MiniatureDisplayOptions } from '../../shared-video-miniature'
 import { CustomMarkupComponent } from './shared'
 
 /*
- * Markup component list videos depending on criterias
+ * Markup component list videos depending on criteria
 */
 
 @Component({
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.html b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
index 7031cb53b..e4f318385 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.html
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
@@ -1,6 +1,7 @@
-<div class="input-group has-feedback has-clear">
-  <div *ngIf="hasFilters()" class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
-    <div class="input-group-text" ngbDropdownToggle>
+<div class="input-group has-clear" ngbDropdown placement="bottom-left auto" container="body">
+
+  <ng-container *ngIf="hasFilters()">
+    <div class="input-group-text c-hand" ngbDropdownToggle>
       <span class="caret" aria-haspopup="menu" role="button"></span>
     </div>
 
@@ -15,14 +16,14 @@
         </button>
       </ng-container>
     </div>
-  </div>
+  </ng-container>
 
   <input
     type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+    class="last-in-group"
     [(ngModel)]="searchValue"
     (keyup)="onInputSearch($event)"
   >
 
-  <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="onResetTableFilter()"></a>
-  <span class="sr-only" i18n>Clear filters</span>
+  <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter()"></my-global-icon>
 </div>
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
index ee1b3b508..ed85385fd 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
@@ -23,7 +23,6 @@ my-global-icon {
   width: 18px;
   height: 18px;
 
-
   &.no-visible {
     @include margin-right($size + $margin);
 
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.html b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
index 2ef61ecfc..2ec436ac6 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.html
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
@@ -18,7 +18,7 @@
     </select>
   </div>
 
-  <my-input-toggle-hidden *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [inputId]="setting.name"></my-input-toggle-hidden>
+  <my-input-text *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [inputId]="setting.name"></my-input-text>
 
   <textarea *ngIf="setting.type === 'input-textarea'" type="text" [id]="setting.name" [formControlName]="setting.name"></textarea>
 
diff --git a/client/src/app/shared/shared-forms/index.ts b/client/src/app/shared/shared-forms/index.ts
index 727416a40..495785e7b 100644
--- a/client/src/app/shared/shared-forms/index.ts
+++ b/client/src/app/shared/shared-forms/index.ts
@@ -3,7 +3,7 @@ export * from './form-reactive'
 export * from './form-validator.service'
 export * from './form-validator.service'
 export * from './input-switch.component'
-export * from './input-toggle-hidden.component'
+export * from './input-text.component'
 export * from './markdown-textarea.component'
 export * from './peertube-checkbox.component'
 export * from './preview-upload.component'
diff --git a/client/src/app/shared/shared-forms/input-switch.component.html b/client/src/app/shared/shared-forms/input-switch.component.html
index ce1dee470..9a466055a 100644
--- a/client/src/app/shared/shared-forms/input-switch.component.html
+++ b/client/src/app/shared/shared-forms/input-switch.component.html
@@ -1,4 +1,4 @@
 <div (click)="update()">
   <input type="checkbox" [checked]="checked"/>
-  <label class="ml-auto">Toggle</label>
+  <label class="ms-auto">Toggle</label>
 </div>
diff --git a/client/src/app/shared/shared-forms/input-text.component.html b/client/src/app/shared/shared-forms/input-text.component.html
new file mode 100644
index 000000000..f890c4f02
--- /dev/null
+++ b/client/src/app/shared/shared-forms/input-text.component.html
@@ -0,0 +1,20 @@
+<div class="input-group">
+  <input
+    [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex"
+    [(ngModel)]="value" (ngModelChange)="update()" [readonly]="readonly"
+    #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
+  />
+
+  <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle">
+    <my-global-icon *ngIf="show" iconName="eye-open"></my-global-icon>
+    <my-global-icon *ngIf="!show" iconName="eye-close"></my-global-icon>
+  </button>
+
+  <button
+    *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button"
+    class="btn btn-outline-secondary text-uppercase" i18n-title title="Copy"
+  >
+    <my-global-icon iconName="copy"></my-global-icon>
+    <span class="copy-text">Copy</span>
+  </button>
+</div>
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss b/client/src/app/shared/shared-forms/input-text.component.scss
index ef4236ebc..ae8bf5fec 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
+++ b/client/src/app/shared/shared-forms/input-text.component.scss
@@ -5,11 +5,14 @@ input {
   @include peertube-input-text(auto);
   @include padding-left(15px !important);
   @include padding-right(15px !important);
+}
 
-  // set again properties of peertube-input-text that are overriden by .input-group
-  font-size: 15px !important;
+.btn {
+  @include button-with-icon(18px);
 }
 
-.eye-button {
-  line-height: 1 !important;
+.copy-text {
+  font-size: 14px;
+  margin-left: 5px;
+  vertical-align: top;
 }
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.ts b/client/src/app/shared/shared-forms/input-text.component.ts
index e03353fe1..ed4637c17 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.ts
+++ b/client/src/app/shared/shared-forms/input-text.component.ts
@@ -3,18 +3,18 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { Notifier } from '@app/core'
 
 @Component({
-  selector: 'my-input-toggle-hidden',
-  templateUrl: './input-toggle-hidden.component.html',
-  styleUrls: [ './input-toggle-hidden.component.scss' ],
+  selector: 'my-input-text',
+  templateUrl: './input-text.component.html',
+  styleUrls: [ './input-text.component.scss' ],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => InputToggleHiddenComponent),
+      useExisting: forwardRef(() => InputTextComponent),
       multi: true
     }
   ]
 })
-export class InputToggleHiddenComponent implements ControlValueAccessor {
+export class InputTextComponent implements ControlValueAccessor {
   @Input() inputId = Math.random().toString(11).slice(2, 8) // id cannot be left empty or undefined
   @Input() value = ''
   @Input() autocomplete = 'off'
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
deleted file mode 100644
index dfe646d2f..000000000
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="input-group input-group-sm">
-  <input
-    [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex"
-    [(ngModel)]="value" (ngModelChange)="update()" [readonly]="readonly"
-    #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
-  />
-
-  <div *ngIf="withToggle || withCopy" class="input-group-append">
-    <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary eye-button" [title]="toggleTitle">
-      <span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span>
-    </button>
-
-    <button
-      *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button"
-      class="btn btn-outline-secondary text-uppercase" i18n-title title="Copy"
-    >
-      <span class="glyphicon glyphicon-duplicate"></span>
-      Copy
-    </button>
-  </div>
-</div>
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index 5939bb999..116630d8a 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -49,7 +49,7 @@ $input-border-radius: 3px;
 
           svg {
             stroke: var(--mainForegroundColor);
-            opacity: 0.6;
+            opacity: 0.7;
           }
 
           &:hover,
@@ -102,7 +102,6 @@ $input-border-radius: 3px;
   min-height: 75px;
   padding: $base-padding;
   overflow-y: auto;
-  font-size: 15px;
   word-wrap: break-word;
 }
 
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.html b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
index c679e1403..cd06e75ba 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
@@ -1,6 +1,6 @@
 <div class="root flex-column">
   <div class="d-flex">
-    <label class="form-group-checkbox">
+    <label>
       <input
         type="checkbox"
         [(ngModel)]="checked"
@@ -33,10 +33,10 @@
     <div *ngIf="recommended" class="recommended" i18n>Recommended</div>
   </div>
 
-  <div class="ml-4 d-flex flex-column">
-    <small class="wrapper mt-2 muted">
+  <div class="ms-4 d-flex flex-column">
+    <div class="wrapper form-group-description">
       <ng-content select="description"></ng-content>
-    </small>
+    </div>
 
     <span class="wrapper mt-3">
       <ng-content select="extra"></ng-content>
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
index 4e384e7e0..ac9127677 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
@@ -4,14 +4,9 @@
 .root {
   display: flex;
 
-  .form-group-checkbox {
+  label {
     display: flex;
-    align-items: center;
-
-    .label-text {
-      font-weight: $font-regular;
-      margin: 0;
-    }
+    font-size: $form-input-font-size;
 
     input {
       @include peertube-checkbox(1px);
@@ -23,12 +18,11 @@
   }
 
   my-help {
-    position: relative;
-    top: 2px;
+    line-height: 17px;
   }
 
-  small {
-    font-size: 90%;
+  .form-group-description {
+    margin-top: 2px;
   }
 
   .wrapper:empty {
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.ts b/client/src/app/shared/shared-forms/reactive-file.component.ts
index 50b7d4c3e..48055a51c 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.ts
+++ b/client/src/app/shared/shared-forms/reactive-file.component.ts
@@ -57,7 +57,7 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
 
       const extension = '.' + file.name.split('.').pop()
       if (this.extensions.includes(extension.toLowerCase()) === false) {
-        const message = $localize`PeerTube cannot handle this kind of file. Accepted extensions are ${this.allowedExtensionsMessage}}.`
+        const message = $localize`PeerTube cannot handle this kind of file. Accepted extensions are ${this.allowedExtensionsMessage}.`
         this.notifier.error(message)
 
         return
diff --git a/client/src/app/shared/shared-forms/select/select-channel.component.html b/client/src/app/shared/shared-forms/select/select-channel.component.html
index f83f17a16..b49fd36fa 100644
--- a/client/src/app/shared/shared-forms/select/select-channel.component.html
+++ b/client/src/app/shared/shared-forms/select/select-channel.component.html
@@ -7,7 +7,7 @@
   [searchable]="searchable"
 >
   <ng-option *ngFor="let channel of channels" [value]="channel.id">
-    <img alt="" class="avatar mr-1" [src]="channel.avatarPath" />
+    <img alt="" class="avatar me-1" [src]="channel.avatarPath" />
     {{ channel.label }}
   </ng-option>
 </ng-select>
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox-all.component.ts b/client/src/app/shared/shared-forms/select/select-checkbox-all.component.ts
index ebf7b77a6..2c3226f68 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox-all.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-checkbox-all.component.ts
@@ -1,6 +1,7 @@
 import { Component, forwardRef, Input } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { Notifier } from '@app/core'
+import { prepareIcu } from '@app/helpers'
 import { SelectOptionsItem } from '../../../../types/select-options-item.model'
 import { ItemSelectCheckboxValue } from './select-checkbox.component'
 
@@ -78,7 +79,12 @@ export class SelectCheckboxAllComponent implements ControlValueAccessor {
     if (!outputItems) return true
 
     if (outputItems.length >= this.maxItems) {
-      this.notifier.error($localize`You can't select more than ${this.maxItems} items`)
+      this.notifier.error(
+        prepareIcu($localize`You can't select more than {maxItems, plural, =1 {1 item} other {{maxItems} items}}`)(
+          { maxItems: this.maxItems },
+          $localize`You can't select more than ${this.maxItems} items`
+        )
+      )
 
       return false
     }
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.html b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
index 03db2875b..2799ccdcc 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
@@ -22,7 +22,7 @@
 >
 
   <ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
-    <div class="form-group-checkbox">
+    <div class="checkbox-wrapper">
       <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
       <span role="checkbox" [attr.aria-checked]="item$.selected"></span>
       <span>{{ item.group }}</span>
@@ -30,7 +30,7 @@
   </ng-template>
 
   <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
-    <div class="form-group-checkbox">
+    <div class="checkbox-wrapper">
       <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
       <span role="checkbox" [attr.aria-checked]="item$.selected"></span>
       <span>{{ item.label }}</span>
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.scss b/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
index d47c4f9da..892f22dff 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
@@ -7,7 +7,7 @@ ng-select ::ng-deep {
     align-items: center;
   }
 
-  .form-group-checkbox {
+  .checkbox-wrapper {
     display: flex;
     align-items: center;
 
diff --git a/client/src/app/shared/shared-forms/shared-form.module.ts b/client/src/app/shared/shared-forms/shared-form.module.ts
index 60c2f66ae..81f076db6 100644
--- a/client/src/app/shared/shared-forms/shared-form.module.ts
+++ b/client/src/app/shared/shared-forms/shared-form.module.ts
@@ -9,7 +9,7 @@ import { AdvancedInputFilterComponent } from './advanced-input-filter.component'
 import { DynamicFormFieldComponent } from './dynamic-form-field.component'
 import { FormValidatorService } from './form-validator.service'
 import { InputSwitchComponent } from './input-switch.component'
-import { InputToggleHiddenComponent } from './input-toggle-hidden.component'
+import { InputTextComponent } from './input-text.component'
 import { MarkdownTextareaComponent } from './markdown-textarea.component'
 import { PeertubeCheckboxComponent } from './peertube-checkbox.component'
 import { PreviewUploadComponent } from './preview-upload.component'
@@ -40,7 +40,7 @@ import { TimestampInputComponent } from './timestamp-input.component'
   ],
 
   declarations: [
-    InputToggleHiddenComponent,
+    InputTextComponent,
     MarkdownTextareaComponent,
     PeertubeCheckboxComponent,
     PreviewUploadComponent,
@@ -71,7 +71,7 @@ import { TimestampInputComponent } from './timestamp-input.component'
     InputMaskModule,
     NgSelectModule,
 
-    InputToggleHiddenComponent,
+    InputTextComponent,
     MarkdownTextareaComponent,
     PeertubeCheckboxComponent,
     PreviewUploadComponent,
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.scss b/client/src/app/shared/shared-forms/timestamp-input.component.scss
index 27d6fa173..e69a06947 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -4,7 +4,6 @@
 p-inputmask {
   ::ng-deep input {
     width: 80px;
-    font-size: 15px;
 
     &:focus-within,
     &:focus {
diff --git a/client/src/app/shared/shared-icons/global-icon.component.scss b/client/src/app/shared/shared-icons/global-icon.component.scss
index 6795d6628..10180829f 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.scss
+++ b/client/src/app/shared/shared-icons/global-icon.component.scss
@@ -3,4 +3,9 @@
     width: inherit;
     height: inherit;
   }
+
+  .feather-flag {
+    margin-left: -1px;
+  }
 }
+
diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index ba23edde0..55eb45a75 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -21,6 +21,7 @@ const icons = {
   local: require('!!raw-loader?!../../../assets/images/misc/local.svg').default,
 
   // feather icons
+  copy: require('!!raw-loader?!../../../assets/images/feather/copy.svg').default,
   flag: require('!!raw-loader?!../../../assets/images/feather/flag.svg').default,
   playlists: require('!!raw-loader?!../../../assets/images/feather/list.svg').default,
   syndication: require('!!raw-loader?!../../../assets/images/feather/syndication.svg').default,
@@ -28,7 +29,6 @@ const icons = {
   alert: require('!!raw-loader?!../../../assets/images/feather/alert.svg').default,
   globe: require('!!raw-loader?!../../../assets/images/feather/globe.svg').default,
   home: require('!!raw-loader?!../../../assets/images/feather/home.svg').default,
-  'recently-added': require('!!raw-loader?!../../../assets/images/feather/recently-added.svg').default,
   trending: require('!!raw-loader?!../../../assets/images/feather/trending.svg').default,
   search: require('!!raw-loader?!../../../assets/images/feather/search.svg').default,
   upload: require('!!raw-loader?!../../../assets/images/feather/upload.svg').default,
@@ -62,8 +62,9 @@ const icons = {
   'exit-fullscreen': require('!!raw-loader?!../../../assets/images/feather/minimize.svg').default,
   film: require('!!raw-loader?!../../../assets/images/feather/film.svg').default,
   edit: require('!!raw-loader?!../../../assets/images/feather/edit-2.svg').default,
-  sensitive: require('!!raw-loader?!../../../assets/images/feather/eye.svg').default,
-  unsensitive: require('!!raw-loader?!../../../assets/images/feather/eye-off.svg').default,
+  'external-link': require('!!raw-loader?!../../../assets/images/feather/external-link.svg').default,
+  'eye-open': require('!!raw-loader?!../../../assets/images/feather/eye.svg').default,
+  'eye-close': require('!!raw-loader?!../../../assets/images/feather/eye-off.svg').default,
   refresh: require('!!raw-loader?!../../../assets/images/feather/refresh-cw.svg').default,
   command: require('!!raw-loader?!../../../assets/images/feather/command.svg').default,
   go: require('!!raw-loader?!../../../assets/images/feather/arrow-up-right.svg').default,
@@ -89,6 +90,7 @@ export type GlobalIconName = keyof typeof icons
 })
 export class GlobalIconComponent implements OnInit {
   @Input() iconName: GlobalIconName
+  @Input() width: string
 
   constructor (
     private el: ElementRef,
@@ -104,6 +106,10 @@ export class GlobalIconComponent implements OnInit {
       'filter:internal.common.svg-icons.get-content.params',
       'filter:internal.common.svg-icons.get-content.result'
     )
+
+    if (this.width) {
+      nativeElement.style.width = this.width
+    }
   }
 
   private getSVGContent (options: { name: string }) {
diff --git a/client/src/app/shared/shared-instance/feature-boolean.component.html b/client/src/app/shared/shared-instance/feature-boolean.component.html
index ccb8a30cc..6de5d2075 100644
--- a/client/src/app/shared/shared-instance/feature-boolean.component.html
+++ b/client/src/app/shared/shared-instance/feature-boolean.component.html
@@ -1,3 +1,2 @@
-<span *ngIf="value === true" class="glyphicon glyphicon-ok" i18n-aria-label aria-label="yes"></span>
-<span *ngIf="value === false" class="glyphicon glyphicon-remove" i18n-aria-label aria-label="no"></span>
-
+<my-global-icon *ngIf="value === true" iconName="tick" i18n-aria-label aria-label="yes"></my-global-icon>
+<my-global-icon *ngIf="value === false" iconName="cross" i18n-aria-label aria-label="no"></my-global-icon>
diff --git a/client/src/app/shared/shared-instance/feature-boolean.component.scss b/client/src/app/shared/shared-instance/feature-boolean.component.scss
index 8683ecc55..29b8c3e02 100644
--- a/client/src/app/shared/shared-instance/feature-boolean.component.scss
+++ b/client/src/app/shared/shared-instance/feature-boolean.component.scss
@@ -1,10 +1,10 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.glyphicon-ok {
+my-global-icon[iconName=tick] {
   color: $green;
 }
 
-.glyphicon-remove {
+my-global-icon[iconName=cross] {
   color: $red;
 }
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.html b/client/src/app/shared/shared-instance/instance-about-accordion.component.html
index 73e511d1c..466d73ca4 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.html
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.html
@@ -1,6 +1,6 @@
-<h2 class="instance-name">{{ about?.instance.name }}</h2>
+<h2 *ngIf="displayInstanceName" class="instance-name">{{ about?.instance.name }}</h2>
 
-<div class="instance-short-description">{{ about?.instance.shortDescription }}</div>
+<div *ngIf="displayInstanceShortDescription" class="instance-short-description">{{ about?.instance.shortDescription }}</div>
 
 <ngb-accordion #accordion="ngbAccordion" [closeOthers]="true">
   <ngb-panel *ngIf="panels.features" id="instance-features" i18n-title title="Features found on this instance">
@@ -32,7 +32,7 @@
       </ng-template>
     </ngb-panel>
 
-    <ngb-panel *ngIf="termsPanel" id="terms" i18n-title title="Terms">
+    <ngb-panel *ngIf="termsPanel" id="terms" [title]="getTermsTitle()">
       <ng-template ngbPanelContent>
         <div class="block" [innerHTML]="aboutHtml.terms"></div>
       </ng-template>
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
index be6099a97..c8e288462 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
@@ -8,34 +8,9 @@
 .instance-short-description {
   @include ellipsis-multiline(1rem, 3);
 
-  margin-top: 20px;
-  margin-bottom: 20px;
+  margin: 25px 0;
 }
 
 .block {
-  font-size: 15px;
   margin-bottom: 15px;
 }
-
-ngb-accordion ::ng-deep {
-  .card {
-    border-color: var(--mainBackgroundColor);
-
-    .card-header {
-      background-color: unset;
-      padding: 0;
-
-      + .collapse.show {
-        background-color: var(--submenuBackgroundColor);
-      }
-    }
-  }
-
-  .btn {
-    @include peertube-button;
-    @include grey-button;
-
-    border-radius: unset;
-    width: 100%;
-  }
-}
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
index b9f57e2a4..e13703c03 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
@@ -15,6 +15,9 @@ export class InstanceAboutAccordionComponent implements OnInit {
 
   @Output() init: EventEmitter<InstanceAboutAccordionComponent> = new EventEmitter<InstanceAboutAccordionComponent>()
 
+  @Input() displayInstanceName = true
+  @Input() displayInstanceShortDescription = true
+
   @Input() pluginScope: PluginClientScope
   @Input() pluginHook: ClientFilterHookName
 
@@ -66,6 +69,10 @@ export class InstanceAboutAccordionComponent implements OnInit {
     return !!(this.aboutHtml?.administrator || this.about?.instance.maintenanceLifetime || this.about?.instance.businessModel)
   }
 
+  getTermsTitle () {
+    return $localize`Terms of ${this.about.instance.name}`
+  }
+
   get moderationPanel () {
     return this.panels.moderation && !!this.aboutHtml.moderationInformation
   }
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.html b/client/src/app/shared/shared-instance/instance-features-table.component.html
index 1fdef95ff..761243bfe 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.html
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="serverConfig" class="feature-table">
 
-  <table class="table" *ngIf="serverConfig">
+  <table *ngIf="serverConfig">
     <caption i18n>Features found on this instance</caption>
     <tr>
       <th i18n class="label" scope="row">PeerTube version</th>
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.scss b/client/src/app/shared/shared-instance/instance-features-table.component.scss
index 56ca105f4..bfae0c112 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.scss
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.scss
@@ -4,6 +4,7 @@
 table {
   font-size: 14px;
   color: pvar(--mainForegroundColor);
+  width: 100%;
 
   .label,
   .sub-label {
@@ -24,13 +25,14 @@ table {
     }
   }
 
+  th,
   td {
-    vertical-align: middle;
+    padding: 0.75rem;
+    border-top: 1px solid #dee2e6;
   }
 
   caption {
     caption-side: top;
-    font-size: 15px;
     font-weight: $font-semibold;
     color: pvar(--mainForegroundColor);
   }
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.ts b/client/src/app/shared/shared-instance/instance-features-table.component.ts
index 6335de450..e405c5790 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.ts
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { ServerService } from '@app/core'
+import { prepareIcu } from '@app/helpers'
 import { ServerConfig } from '@shared/models'
 import { PeertubeModalService } from '../shared-main/peertube-modal/peertube-modal.service'
 
@@ -65,15 +66,20 @@ export class InstanceFeaturesTableComponent implements OnInit {
 
   private getApproximateTime (seconds: number) {
     const hours = Math.floor(seconds / 3600)
-    let pluralSuffix = ''
-    if (hours > 1) pluralSuffix = 's'
-    if (hours > 0) return `~ ${hours} hour${pluralSuffix}`
 
-    const minutes = Math.floor(seconds % 3600 / 60)
+    if (hours !== 0) {
+      return prepareIcu($localize`~ {hours, plural, =1 {1 hour} other {{hours} hours}}`)(
+        { hours },
+        $localize`~ ${hours} hours`
+      )
+    }
 
-    if (minutes === 1) return $localize`~ 1 minute`
+    const minutes = Math.floor(seconds % 3600 / 60)
 
-    return $localize`~ ${minutes} minutes`
+    return prepareIcu($localize`~ {minutes, plural, =1 {1 minute} other {{minutes} minutes}}`)(
+      { minutes },
+      $localize`~ ${minutes} minutes`
+    )
   }
 
   private buildQuotaHelpIndication () {
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.html b/client/src/app/shared/shared-instance/instance-statistics.component.html
index 2ca61fd94..68b209990 100644
--- a/client/src/app/shared/shared-instance/instance-statistics.component.html
+++ b/client/src/app/shared/shared-instance/instance-statistics.component.html
@@ -10,7 +10,7 @@
           <p class="stat-value">{{ serverStats.totalUsers | number }}</p>
           <p class="stat-label" i18n>users</p>
         </div>
-        <i class="glyphicon glyphicon-user icon-bottom"></i>
+        <my-global-icon iconName="user"></my-global-icon>
       </div>
     </div>
 
@@ -20,7 +20,7 @@
           <p class="stat-value">{{ serverStats.totalLocalVideos | number }}</p>
           <p class="stat-label" i18n>videos</p>
         </div>
-        <i class="glyphicon glyphicon-facetime-video"></i>
+        <my-global-icon iconName="film"></my-global-icon>
       </div>
     </div>
 
@@ -30,7 +30,7 @@
           <p class="stat-value">{{ serverStats.totalLocalVideoViews | number }}</p>
           <p class="stat-label" i18n>views</p>
         </div>
-        <i class="glyphicon glyphicon-eye-open"></i>
+        <my-global-icon iconName="eye-open"></my-global-icon>
       </div>
     </div>
 
@@ -40,7 +40,7 @@
           <p class="stat-value">{{ serverStats.totalLocalVideoComments | number }}</p>
           <p class="stat-label" i18n>comments</p>
         </div>
-        <i class="glyphicon glyphicon-comment"></i>
+        <my-global-icon iconName="message-circle"></my-global-icon>
       </div>
     </div>
 
@@ -50,7 +50,7 @@
           <p class="stat-value">{{ serverStats.totalLocalVideoFilesSize | bytes:1 }}</p>
           <p class="stat-label" i18n>hosted video</p>
         </div>
-        <i class="glyphicon glyphicon-hdd"></i>
+        <my-global-icon iconName="home"></my-global-icon>
       </div>
     </div>
   </div>
@@ -64,7 +64,7 @@
           <p class="stat-value">{{ serverStats.totalVideos | number }}</p>
           <p class="stat-label" i18n>videos</p>
         </div>
-        <i class="glyphicon glyphicon-facetime-video"></i>
+        <my-global-icon iconName="film"></my-global-icon>
       </div>
     </div>
 
@@ -74,7 +74,7 @@
           <p class="stat-value">{{ serverStats.totalVideoComments | number }}</p>
           <p class="stat-label" i18n>comments</p>
         </div>
-        <i class="glyphicon glyphicon-comment"></i>
+        <my-global-icon iconName="message-circle"></my-global-icon>
       </div>
     </div>
 
@@ -84,7 +84,7 @@
           <p class="stat-value">{{ serverStats.totalInstanceFollowers | number }}</p>
           <p class="stat-label" i18n>followers</p>
         </div>
-        <i class="glyphicon glyphicon-retweet"></i>
+        <my-global-icon iconName="share"></my-global-icon>
       </div>
     </div>
 
@@ -94,7 +94,7 @@
           <p class="stat-value">{{ serverStats.totalInstanceFollowing | number }}</p>
           <p class="stat-label" i18n>following</p>
         </div>
-        <i class="glyphicon glyphicon-retweet"></i>
+        <my-global-icon iconName="globe"></my-global-icon>
       </div>
     </div>
   </div>
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.scss b/client/src/app/shared/shared-instance/instance-statistics.component.scss
index 5286ab03a..e1d489d28 100644
--- a/client/src/app/shared/shared-instance/instance-statistics.component.scss
+++ b/client/src/app/shared/shared-instance/instance-statistics.component.scss
@@ -1,3 +1,5 @@
+@use '_variables' as *;
+@use '_mixins' as *;
 
 h3 {
   font-size: 1.25rem;
@@ -19,22 +21,19 @@ h3 {
     margin: 0;
   }
 
-  .glyphicon {
-    opacity: 0.12;
-    position: absolute;
-    left: 16px;
-    top: -24px;
-
-    &.icon-bottom {
-      top: 4px;
-    }
-
-    &::before {
-      font-size: 8em;
-    }
-  }
-
   .card-body {
     z-index: 2;
   }
 }
+
+my-global-icon {
+  opacity: 0.12;
+  position: absolute;
+  left: 16px;
+  top: -24px;
+  width: 110px;
+
+  &.icon-bottom {
+    top: 4px;
+  }
+}
diff --git a/client/src/app/shared/shared-instance/shared-instance.module.ts b/client/src/app/shared/shared-instance/shared-instance.module.ts
index 13c681ab8..dfce88e11 100644
--- a/client/src/app/shared/shared-instance/shared-instance.module.ts
+++ b/client/src/app/shared/shared-instance/shared-instance.module.ts
@@ -1,6 +1,7 @@
 
 import { NgModule } from '@angular/core'
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
+import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { FeatureBooleanComponent } from './feature-boolean.component'
 import { InstanceAboutAccordionComponent } from './instance-about-accordion.component'
@@ -12,6 +13,7 @@ import { InstanceService } from './instance.service'
 @NgModule({
   imports: [
     SharedMainModule,
+    SharedGlobalIconModule,
     NgbAccordionModule
   ],
 
diff --git a/client/src/app/shared/shared-main/angular/autofocus.directive.ts b/client/src/app/shared/shared-main/angular/autofocus.directive.ts
index 2da492ea1..051635f45 100644
--- a/client/src/app/shared/shared-main/angular/autofocus.directive.ts
+++ b/client/src/app/shared/shared-main/angular/autofocus.directive.ts
@@ -7,6 +7,8 @@ export class AutofocusDirective implements AfterViewInit {
   constructor (private host: ElementRef) { }
 
   ngAfterViewInit () {
-    this.host.nativeElement.focus()
+    const el = this.host.nativeElement as HTMLElement
+
+    el.focus({ preventScroll: true })
   }
 }
diff --git a/client/src/app/shared/shared-main/angular/from-now.pipe.ts b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
index d62c1f88e..dc6a25e83 100644
--- a/client/src/app/shared/shared-main/angular/from-now.pipe.ts
+++ b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
@@ -1,37 +1,51 @@
 import { Pipe, PipeTransform } from '@angular/core'
+import { prepareIcu } from '@app/helpers'
 
 // Thanks: https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site
 @Pipe({ name: 'myFromNow' })
 export class FromNowPipe implements PipeTransform {
+  private yearICU = prepareIcu($localize`{interval, plural, =1 {1 year ago} other {{interval} years ago}}`)
+  private monthICU = prepareIcu($localize`{interval, plural, =1 {1 month ago} other {{interval} months ago}}`)
+  private weekICU = prepareIcu($localize`{interval, plural, =1 {1 week ago} other {{interval} weeks ago}}`)
+  private dayICU = prepareIcu($localize`{interval, plural, =1 {1 day ago} other {{interval} days ago}}`)
+  private hourICU = prepareIcu($localize`{interval, plural, =1 {1 hour ago} other {{interval} hours ago}}`)
+
   transform (arg: number | Date | string) {
     const argDate = new Date(arg)
     const seconds = Math.floor((Date.now() - argDate.getTime()) / 1000)
 
     let interval = Math.floor(seconds / 31536000)
-    if (interval > 1) return $localize`${interval} years ago`
-    if (interval === 1) return $localize`1 year ago`
+    if (interval >= 1) {
+      return this.yearICU({ interval }, $localize`${interval} year(s) ago`)
+    }
 
     interval = Math.floor(seconds / 2419200)
     // 12 months = 360 days, but a year ~ 365 days
     // Display "1 year ago" rather than "12 months ago"
     if (interval >= 12) return $localize`1 year ago`
-    if (interval > 1) return $localize`${interval} months ago`
-    if (interval === 1) return $localize`1 month ago`
+
+    if (interval >= 1) {
+      return this.monthICU({ interval }, $localize`${interval} month(s) ago`)
+    }
 
     interval = Math.floor(seconds / 604800)
     // 4 weeks ~ 28 days, but our month is 30 days
     // Display "1 month ago" rather than "4 weeks ago"
     if (interval >= 4) return $localize`1 month ago`
-    if (interval > 1) return $localize`${interval} weeks ago`
-    if (interval === 1) return $localize`1 week ago`
+
+    if (interval >= 1) {
+      return this.weekICU({ interval }, $localize`${interval} week(s) ago`)
+    }
 
     interval = Math.floor(seconds / 86400)
-    if (interval > 1) return $localize`${interval} days ago`
-    if (interval === 1) return $localize`1 day ago`
+    if (interval >= 1) {
+      return this.dayICU({ interval }, $localize`${interval} day(s) ago`)
+    }
 
     interval = Math.floor(seconds / 3600)
-    if (interval > 1) return $localize`${interval} hours ago`
-    if (interval === 1) return $localize`1 hour ago`
+    if (interval >= 1) {
+      return this.hourICU({ interval }, $localize`${interval} hour(s) ago`)
+    }
 
     interval = Math.floor(seconds / 60)
     if (interval >= 1) return $localize`${interval} min ago`
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
index 10dae68f0..017355bd0 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
@@ -39,7 +39,7 @@
           </span>
 
           <h6
-            *ngIf="!action.linkBuilder && action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            *ngIf="!action.linkBuilder && action.isHeader && areActionsDisplayed(actions, entry)" [ngClass]="{ 'with-icon': !!action.iconName }"
             class="dropdown-header" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
           >
             <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
index 67ac6e1aa..749773f8a 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
@@ -48,7 +48,7 @@ export class ActionDropdownComponent<T> {
     return actions.some(a => {
       if (Array.isArray(a)) return this.areActionsDisplayed(a, entry)
 
-      return a.isDisplayed === undefined || a.isDisplayed(entry)
+      return a.isHeader !== true && (a.isDisplayed === undefined || a.isDisplayed(entry))
     })
   }
 }
diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index d1a4215e6..3e3728623 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -1,8 +1,16 @@
-<span class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0">
-  <my-small-loader [loading]="loading"></my-small-loader>
+<div *ngIf="!routerLink" class="action-button" [ngClass]="classes" [ngbTooltip]="title" tabindex="0">
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+</div>
+
+<a *ngIf="routerLink" class="action-button" [ngClass]="classes" [ngbTooltip]="title" [routerLink]="routerLink">
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+</a>
+
+<ng-template #content>
+  <my-loader size="sm" [loading]="loading"></my-loader>
   <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon>
 
   <span *ngIf="label" class="button-label">{{ label }}</span>
 
   <ng-content></ng-content>
-</span>
+</ng-template>
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index c53b8f2e5..7f0cdf1ed 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -9,17 +9,14 @@
   .button-label {
     display: none;
   }
-}
 
-:host {
-  outline: none;
-  display: inline-block;
+  my-global-icon {
+    margin: 0 !important;
+  }
 }
 
-my-small-loader ::ng-deep .root {
+:host {
   display: inline-block;
-  margin: 0 3px 0 0;
-  width: 20px;
 }
 
 a[class$=-button],
@@ -30,35 +27,34 @@ span[class$=-button] {
 }
 
 .action-button {
-  @include peertube-button-link;
-  @include button-with-icon(21px);
-
   width: 100%; // useful for ellipsis, allow to define a max-width on host component
 
-  &.icon-only {
-    my-global-icon {
-      margin: 0;
-    }
+  &.has-icon {
+    @include button-with-icon(21px);
+  }
+
+  &.icon-only my-global-icon {
+    margin: 0 !important;
   }
 }
 
-.orange-button {
+.orange-button,
+.grey-button {
   @include peertube-button;
-  @include orange-button;
 }
 
-.orange-button-link {
+.orange-button-link,
+.grey-button-link {
   @include peertube-button-link;
-  @include orange-button;
 }
 
-.grey-button {
-  @include peertube-button;
-  @include grey-button;
+.orange-button,
+.orange-button-link {
+  @include orange-button;
 }
 
+.grey-button,
 .grey-button-link {
-  @include peertube-button-link;
   @include grey-button;
 }
 
diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts
index 52936a4d4..10d67831f 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, OnChanges } from '@angular/core'
 import { GlobalIconName } from '@app/shared/shared-icons'
 
 @Component({
@@ -7,20 +7,24 @@ import { GlobalIconName } from '@app/shared/shared-icons'
   templateUrl: './button.component.html'
 })
 
-export class ButtonComponent {
+export class ButtonComponent implements OnChanges {
   @Input() label = ''
   @Input() className = 'grey-button'
   @Input() icon: GlobalIconName = undefined
+  @Input() routerLink: string[] | string
   @Input() title: string = undefined
   @Input() loading = false
   @Input() disabled = false
   @Input() responsiveLabel = false
 
-  getClasses () {
-    return {
+  classes: { [id: string]: boolean } = {}
+
+  ngOnChanges () {
+    this.classes = {
       [this.className]: true,
       disabled: this.disabled,
       'icon-only': !this.label,
+      'has-icon': !!this.icon,
       'responsive-label': this.responsiveLabel
     }
   }
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.html b/client/src/app/shared/shared-main/buttons/delete-button.component.html
deleted file mode 100644
index d7a6702a7..000000000
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<span
-  class="action-button action-button-delete grey-button"
-  [ngClass]="{ 'responsive-label': responsiveLabel }" [ngbTooltip]="title" role="button" tabindex="0"
->
-  <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
-
-  <span class="button-label" *ngIf="label">{{ label }}</span>
-</span>
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.ts b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
index 90735852c..1cab10803 100644
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
@@ -2,17 +2,16 @@ import { Component, Input, OnInit } from '@angular/core'
 
 @Component({
   selector: 'my-delete-button',
-  styleUrls: [ './button.component.scss' ],
-  templateUrl: './delete-button.component.html'
+  template: `
+  <my-button icon="delete" className="grey-button" [label]="label" [title]="title" [responsiveLabel]="responsiveLabel"></my-button>
+  `
 })
-
 export class DeleteButtonComponent implements OnInit {
   @Input() label: string
   @Input() title: string
   @Input() responsiveLabel = false
 
   ngOnInit () {
-    // <my-delete-button /> No label
     if (this.label === undefined && !this.title) {
       this.title = $localize`Delete`
     }
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.html b/client/src/app/shared/shared-main/buttons/edit-button.component.html
deleted file mode 100644
index 8beeee6c4..000000000
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<a
-  class="action-button action-button-edit grey-button"
-  [ngClass]="{ 'responsive-label': responsiveLabel }" [routerLink]="routerLink" [ngbTooltip]="title"
->
-  <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon>
-
-  <span class="button-label" *ngIf="label">{{ label }}</span>
-</a>
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.ts b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
index 24c8625ff..28aacbbff 100644
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
@@ -2,8 +2,13 @@ import { Component, Input, OnInit } from '@angular/core'
 
 @Component({
   selector: 'my-edit-button',
-  styleUrls: [ './button.component.scss' ],
-  templateUrl: './edit-button.component.html'
+  template: `
+    <my-button
+      icon="edit" className="grey-button-link"
+      [label]="label" [title]="title" [responsiveLabel]="responsiveLabel"
+      [routerLink]="routerLink"
+    ></my-button>
+  `
 })
 export class EditButtonComponent implements OnInit {
   @Input() label: string
@@ -20,10 +25,6 @@ export class EditButtonComponent implements OnInit {
     // <my-edit-button label /> Use default label
     if (this.label === '') {
       this.label = $localize`Update`
-
-      if (!this.title) {
-        this.title = this.label
-      }
     }
   }
 }
diff --git a/client/src/app/shared/shared-main/loaders/index.ts b/client/src/app/shared/shared-main/loaders/index.ts
index a061914d5..60483727c 100644
--- a/client/src/app/shared/shared-main/loaders/index.ts
+++ b/client/src/app/shared/shared-main/loaders/index.ts
@@ -1,2 +1 @@
 export * from './loader.component'
-export * from './small-loader.component'
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.html b/client/src/app/shared/shared-main/loaders/loader.component.html
deleted file mode 100644
index ca8ed063e..000000000
--- a/client/src/app/shared/shared-main/loaders/loader.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div *ngIf="loading">
-  <div class="loader">
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-  </div>
-</div>
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.scss b/client/src/app/shared/shared-main/loaders/loader.component.scss
deleted file mode 100644
index b88b0db6a..000000000
--- a/client/src/app/shared/shared-main/loaders/loader.component.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-
-// Thanks to https://loading.io/css/ (CC0 License)
-
-.loader {
-  display: inline-block;
-  position: relative;
-  width: 50px;
-  height: 50px;
-}
-
-.loader div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 44px;
-  height: 44px;
-  margin: 6px;
-  border: 4px solid;
-  border-radius: 50%;
-  animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #999999 transparent transparent;
-}
-
-.loader div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-
-.loader div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-
-.loader div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-
-@keyframes loader {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.ts b/client/src/app/shared/shared-main/loaders/loader.component.ts
index e3b1eea3a..bd038f8b5 100644
--- a/client/src/app/shared/shared-main/loaders/loader.component.ts
+++ b/client/src/app/shared/shared-main/loaders/loader.component.ts
@@ -2,9 +2,27 @@ import { Component, Input } from '@angular/core'
 
 @Component({
   selector: 'my-loader',
-  styleUrls: [ './loader.component.scss' ],
-  templateUrl: './loader.component.html'
+  template: `<div *ngIf="loading" class="spinner-border" [ngStyle]="getStyle()" role="status"></div>`
 })
 export class LoaderComponent {
   @Input() loading: boolean
+  @Input() size: 'sm' | 'xl'
+
+  private readonly sizes = {
+    sm: {
+      width: '1rem',
+      height: '1rem',
+      'border-width': '0.15rem'
+    },
+    xl: {
+      width: '3rem',
+      height: '3rem'
+    }
+  }
+
+  getStyle () {
+    if (!this.size) return undefined
+
+    return this.sizes[this.size]
+  }
 }
diff --git a/client/src/app/shared/shared-main/loaders/small-loader.component.html b/client/src/app/shared/shared-main/loaders/small-loader.component.html
deleted file mode 100644
index 7886f8918..000000000
--- a/client/src/app/shared/shared-main/loaders/small-loader.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="root" *ngIf="loading">
-  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
-</div>
diff --git a/client/src/app/shared/shared-main/loaders/small-loader.component.ts b/client/src/app/shared/shared-main/loaders/small-loader.component.ts
deleted file mode 100644
index 191877f14..000000000
--- a/client/src/app/shared/shared-main/loaders/small-loader.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component, Input } from '@angular/core'
-
-@Component({
-  selector: 'my-small-loader',
-  styleUrls: [ ],
-  templateUrl: './small-loader.component.html'
-})
-
-export class SmallLoaderComponent {
-  @Input() loading: boolean
-}
diff --git a/client/src/app/shared/shared-main/misc/channels-setup-message.component.html b/client/src/app/shared/shared-main/misc/channels-setup-message.component.html
index 3fe888a35..539df06bd 100644
--- a/client/src/app/shared/shared-main/misc/channels-setup-message.component.html
+++ b/client/src/app/shared/shared-main/misc/channels-setup-message.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="hasChannelNotConfigured()" class="channels-setup-message alert alert-info">
+<div *ngIf="hasChannelNotConfigured()" class="channels-setup-message alert pt-alert-primary">
   <my-global-icon iconName="tip"></my-global-icon>
 
   <div>
diff --git a/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
index 7dcba2ca5..2aa176e1b 100644
--- a/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
+++ b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
@@ -5,28 +5,24 @@
   display: flex;
   align-items: center;
   justify-content: center;
+}
 
-  my-global-icon {
-    width: 32px;
-    align-self: flex-start;
+my-global-icon {
+  @include apply-svg-color(pvar(--mainColor));
 
-    ::ng-deep {
-      svg {
-        fill: #0c5460;
-      }
-    }
+  width: 32px;
+  align-self: flex-start;
 
-    + div {
-      margin-left: 10px;
-      text-align: center;
+  + div {
+    margin-left: 10px;
+    text-align: center;
+  }
+}
 
-      a.channels-settings-link {
-        @include peertube-button-link;
-        @include grey-button;
+.channels-settings-link {
+  @include peertube-button-link;
+  @include grey-button;
 
-        height: fit-content;
-        margin-top: 10px;
-      }
-    }
-  }
+  height: fit-content;
+  margin-top: 10px;
 }
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.html b/client/src/app/shared/shared-main/misc/list-overflow.component.html
index b2e0982f1..6f29eaefa 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.html
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.html
@@ -1,18 +1,22 @@
-<div #itemsParent class="d-flex align-items-center text-nowrap w-100 list-overflow-parent">
+<div #itemsParent class="list-overflow-parent">
   <span [id]="getId(id)" #itemsRendered *ngFor="let item of items; index as id">
     <ng-container *ngTemplateOutlet="itemTemplate; context: {item: item}"></ng-container>
   </span>
 
   <ng-container *ngIf="isMenuDisplayed()">
     <button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()">
-      <span class="glyphicon glyphicon-chevron-down"></span>
+      <span class="chevron-down"></span>
     </button>
 
-    <div *ngIf="!isInMobileView" class="list-overflow-menu" ngbDropdown container="body" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)">
+    <div
+      *ngIf="!isInMobileView" class="list-overflow-menu"
+      ngbDropdown container="body" #dropdown="ngbDropdown"
+      (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)"
+    >
       <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ 'route-active': active }"
         ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
       >
-        <span class="glyphicon glyphicon-chevron-down"></span>
+        <span class="chevron-down"></span>
       </button>
 
       <div ngbDropdownMenu>
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.scss b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
index 19c055fd3..b06418568 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.scss
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
@@ -7,6 +7,9 @@
 
 .list-overflow-parent {
   overflow: hidden;
+  display: flex;
+  // For the menu icon
+  max-width: calc(100vw - 30px);
 }
 
 .list-overflow-menu {
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.ts b/client/src/app/shared/shared-main/misc/list-overflow.component.ts
index fbc481093..541991f74 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.ts
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.ts
@@ -15,6 +15,9 @@ import {
 } from '@angular/core'
 import { ScreenService } from '@app/core'
 import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import * as debug from 'debug'
+
+const logger = debug('peertube:main:ListOverflowItem')
 
 export interface ListOverflowItem {
   label: string
@@ -37,7 +40,6 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
 
   showItemsUntilIndexExcluded: number
   active = false
-  isInTouchScreen = false
   isInMobileView = false
 
   private openedOnHover = false
@@ -58,13 +60,14 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
 
   @HostListener('window:resize')
   onWindowResize () {
-    this.isInTouchScreen = !!this.screenService.isInTouchScreen()
     this.isInMobileView = !!this.screenService.isInMobileView()
 
     const parentWidth = this.parent.nativeElement.getBoundingClientRect().width
     let showItemsUntilIndexExcluded: number
     let accWidth = 0
 
+    logger('Parent width is %d', parentWidth)
+
     for (const [ index, el ] of this.itemsRendered.toArray().entries()) {
       accWidth += el.nativeElement.getBoundingClientRect().width
       if (showItemsUntilIndexExcluded === undefined) {
@@ -76,6 +79,8 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
       e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
     }
 
+    logger('Accumulated children width is %d so exclude index is %d', accWidth, showItemsUntilIndexExcluded)
+
     this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
     this.cdr.markForCheck()
   }
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.html b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
index 1e2f6c6a9..386d26116 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.html
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
@@ -1,17 +1,10 @@
 <div class="root">
-  <div class="input-group has-feedback has-clear">
-    <input
-      #ref
-      type="text"
-      [(ngModel)]="value"
-      (keyup.enter)="sendSearch()"
-      [hidden]="!inputShown"
-      [name]="name"
-      [placeholder]="placeholder"
+  <div class="input-group has-clear">
+    <input #ref type="text" class="last-in-group"
+      [(ngModel)]="value" (keyup.enter)="sendSearch()" [hidden]="!inputShown" [name]="name" [placeholder]="placeholder"
     >
 
-    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="onResetFilter()"></a>
-    <span class="sr-only" i18n>Clear filters</span>
+    <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></my-global-icon>
   </div>
 
   <my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon>
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
index d5fcff760..ee0f7a8d2 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
@@ -5,7 +5,7 @@
   display: flex;
 }
 
-my-global-icon {
+.root > my-global-icon {
   @include margin-left(10px);
 
   height: 28px;
@@ -25,3 +25,7 @@ input {
     box-shadow: 0 0 5px 0 #a5a5a5;
   }
 }
+
+.input-group > my-global-icon {
+  width: 20px;
+}
diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
index d884e75b2..d96fdbdc6 100644
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
@@ -1,7 +1,13 @@
 <div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed, 'no-scroll': isModalOpened }">
   <ng-container *ngFor="let menuEntry of menuEntries; index as id">
 
-    <a *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings" #routerLink (click)="onActiveLinkScrollToTop(routerLink)">{{ menuEntry.label }}</a>
+    <a
+      *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" class="sub-menu-entry"
+      [routerLink]="menuEntry.routerLink" routerLinkActive="active" #routerLink
+      (click)="onActiveLinkScrollToTop(routerLink)"
+    >
+      {{ menuEntry.label }}
+    </a>
 
     <div *ngIf="!menuEntry.routerLink && isDisplayed(menuEntry)" ngbDropdown class="parent-entry"
       #dropdown="ngbDropdown" autoClose="true" container="body">
@@ -10,7 +16,7 @@
         tabindex=0
         [ngClass]="{ active: !!suffixLabels[menuEntry.label] }"
         (click)="openModal(id)" (keydown.enter)="openModal(id)"
-        role="button" class="title-page title-page-settings">
+        role="button" class="sub-menu-entry">
         <ng-container i18n>{{ menuEntry.label }}</ng-container>
       </span>
 
@@ -19,7 +25,7 @@
         tabindex=0
         [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
         (click)="dropdownAnchorClicked(dropdown)" (keydown.enter)="dropdownAnchorClicked(dropdown)"
-        role="button" class="title-page title-page-settings"
+        role="button" class="sub-menu-entry"
       >
         <ng-container i18n>{{ menuEntry.label }}</ng-container>
       </span>
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 5629640bc..89f43239f 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -34,7 +34,7 @@ import { ActionDropdownComponent, ButtonComponent, DeleteButtonComponent, EditBu
 import { CustomPageService } from './custom-page'
 import { DateToggleComponent } from './date'
 import { FeedComponent } from './feeds'
-import { LoaderComponent, SmallLoaderComponent } from './loaders'
+import { LoaderComponent } from './loaders'
 import {
   ChannelsSetupMessageComponent,
   HelpComponent,
@@ -97,7 +97,6 @@ import { VideoChannelService } from './video-channel'
     FeedComponent,
 
     LoaderComponent,
-    SmallLoaderComponent,
 
     ChannelsSetupMessageComponent,
     HelpComponent,
@@ -157,7 +156,6 @@ import { VideoChannelService } from './video-channel'
     FeedComponent,
 
     LoaderComponent,
-    SmallLoaderComponent,
 
     ChannelsSetupMessageComponent,
     HelpComponent,
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.html b/client/src/app/shared/shared-main/users/user-quota.component.html
index dd1fc20d0..0e0d38c2a 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.html
+++ b/client/src/app/shared/shared-main/users/user-quota.component.html
@@ -12,7 +12,7 @@
   <div *ngIf="hasDailyQuota()" class="mt-3">
     <label class="user-quota-title" tabindex="0" i18n>Daily video quota</label>
     <div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuotaDaily()">
-      <div class="progress-bar secondary" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }"
+      <div class="progress-bar" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }"
         [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuotaDaily"></div>
       <span>{{ userVideoQuotaUsedDaily | bytes: 1 }}</span>
       <span>{{ userVideoQuotaDaily }}</span>
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss
index 70571bde6..f3e86ce78 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.scss
+++ b/client/src/app/shared/shared-main/users/user-quota.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
 .user-quota {
   label {
     @include margin-right(5px);
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
index 32376bf62..62bd94349 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
@@ -27,6 +27,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
   videosCount?: number
 
   viewsPerDay?: ViewsPerDate[]
+  totalViews?: number
 
   static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size: number) {
     return Actor.GET_ACTOR_AVATAR_URL(actor, size)
@@ -74,6 +75,10 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
       this.viewsPerDay = hash.viewsPerDay.map(v => ({ ...v, date: new Date(v.date) }))
     }
 
+    if (hash.totalViews !== null && hash.totalViews !== undefined) {
+      this.totalViews = hash.totalViews
+    }
+
     if (hash.ownerAccount) {
       this.ownerAccount = hash.ownerAccount
       this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host)
diff --git a/client/src/app/shared/shared-main/video/video.model.ts b/client/src/app/shared/shared-main/video/video.model.ts
index 022bb95ad..2e4ab87d7 100644
--- a/client/src/app/shared/shared-main/video/video.model.ts
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -1,6 +1,6 @@
 import { AuthUser } from '@app/core'
 import { User } from '@app/core/users/user.model'
-import { durationToString, getAbsoluteAPIUrl, getAbsoluteEmbedUrl } from '@app/helpers'
+import { durationToString, prepareIcu, getAbsoluteAPIUrl, getAbsoluteEmbedUrl } from '@app/helpers'
 import { Actor } from '@app/shared/shared-main/account/actor.model'
 import { buildVideoWatchPath } from '@shared/core-utils'
 import { peertubeTranslate } from '@shared/core-utils/i18n'
@@ -19,6 +19,9 @@ import {
 } from '@shared/models'
 
 export class Video implements VideoServerModel {
+  private static readonly viewsICU = prepareIcu($localize`{views, plural, =0 {No view} =1 {1 view} other {{views} views}}`)
+  private static readonly viewersICU = prepareIcu($localize`{viewers, plural, =0 {No viewers} =1 {1 viewer} other {{viewers} viewers}}`)
+
   byVideoChannel: string
   byAccount: string
 
@@ -269,12 +272,10 @@ export class Video implements VideoServerModel {
   }
 
   getExactNumberOfViews () {
-    if (this.views < 1000) return ''
-
     if (this.isLive) {
-      return $localize`${this.views} viewers`
+      return Video.viewersICU({ viewers: this.viewers }, $localize`${this.viewers} viewer(s)`)
     }
 
-    return $localize`${this.views} views`
+    return Video.viewsICU({ views: this.views }, $localize`{${this.views} view(s)}`)
   }
 }
diff --git a/client/src/app/shared/shared-moderation/account-block-badges.component.html b/client/src/app/shared/shared-moderation/account-block-badges.component.html
index feac707c2..fd3709676 100644
--- a/client/src/app/shared/shared-moderation/account-block-badges.component.html
+++ b/client/src/app/shared/shared-moderation/account-block-badges.component.html
@@ -1,4 +1,4 @@
-<span *ngIf="account.mutedByUser" class="badge badge-danger" i18n>Muted</span>
-<span *ngIf="account.mutedServerByUser" class="badge badge-danger" i18n>Instance muted</span>
-<span *ngIf="account.mutedByInstance" class="badge badge-danger" i18n>Muted by your instance</span>
-<span *ngIf="account.mutedServerByInstance" class="badge badge-danger" i18n>Instance muted by your instance</span>
+<span *ngIf="account.mutedByUser" class="pt-badge badge-danger" i18n>Muted</span>
+<span *ngIf="account.mutedServerByUser" class="pt-badge badge-danger" i18n>Instance muted</span>
+<span *ngIf="account.mutedByInstance" class="pt-badge badge-danger" i18n>Muted by your instance</span>
+<span *ngIf="account.mutedServerByInstance" class="pt-badge badge-danger" i18n>Instance muted by your instance</span>
diff --git a/client/src/app/shared/shared-moderation/account-block-badges.component.scss b/client/src/app/shared/shared-moderation/account-block-badges.component.scss
index ccc3666aa..301d8305e 100644
--- a/client/src/app/shared/shared-moderation/account-block-badges.component.scss
+++ b/client/src/app/shared/shared-moderation/account-block-badges.component.scss
@@ -1,9 +1,8 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.badge {
+.pt-badge {
   @include margin-right(10px);
 
-  height: fit-content;
   font-size: 12px;
 }
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html
index a4f81d824..131110318 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -11,7 +11,7 @@
 >
   <ng-template pTemplate="caption">
     <div class="caption">
-      <div class="ml-auto">
+      <div class="ms-auto">
         <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
@@ -48,7 +48,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td colspan="3">
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No account found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>No account found.</ng-container>
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.html b/client/src/app/shared/shared-moderation/report-modals/report.component.html
index 6c99180ef..8e0b0993c 100644
--- a/client/src/app/shared/shared-moderation/report-modals/report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.html
@@ -8,11 +8,11 @@
     <form novalidate [formGroup]="form" (ngSubmit)="report()">
 
     <div class="row">
-      <div class="col-5 form-group">
+      <div class="col-5">
 
           <label i18n for="reportPredefinedReasons">What is the issue?</label>
 
-          <div class="ml-2 mt-2 d-flex flex-column">
+          <div class="ms-2 mt-2 d-flex flex-column">
             <ng-container formGroupName="predefinedReasons">
 
               <div class="form-group" *ngFor="let reason of predefinedReasons">
@@ -29,7 +29,6 @@
 
             </ng-container>
           </div>
-
       </div>
 
       <div class="col-7">
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
index afac108fc..51ca0b9d6 100644
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
@@ -8,38 +8,32 @@
     <form novalidate [formGroup]="form" (ngSubmit)="report()">
 
     <div class="row">
-      <div class="col-5 form-group">
+      <div class="col-12 col-md-5">
+        <label i18n for="reportPredefinedReasons">What is the issue?</label>
 
-          <label i18n for="reportPredefinedReasons">What is the issue?</label>
+        <div class="ms-2 mt-2 d-flex flex-column">
+          <ng-container formGroupName="predefinedReasons">
 
-          <div class="ml-2 mt-2 d-flex flex-column">
-            <ng-container formGroupName="predefinedReasons">
+            <div class="form-group" *ngFor="let reason of predefinedReasons">
+              <my-peertube-checkbox [inputName]="reason.id" [formControlName]="reason.id" [labelText]="reason.label">
+                <ng-template *ngIf="reason.help" ptTemplate="help">
+                  <div [innerHTML]="reason.help"></div>
+                </ng-template>
 
-              <div class="form-group" *ngFor="let reason of predefinedReasons">
-                <my-peertube-checkbox [inputName]="reason.id" [formControlName]="reason.id" [labelText]="reason.label">
-                  <ng-template *ngIf="reason.help" ptTemplate="help">
-                    <div [innerHTML]="reason.help"></div>
-                  </ng-template>
-
-                  <ng-container *ngIf="reason.description" ngProjectAs="description">
-                    <div [innerHTML]="reason.description"></div>
-                  </ng-container>
-                </my-peertube-checkbox>
-              </div>
-
-            </ng-container>
-          </div>
+                <ng-container *ngIf="reason.description" ngProjectAs="description">
+                  <div [innerHTML]="reason.description"></div>
+                </ng-container>
+              </my-peertube-checkbox>
+            </div>
 
+          </ng-container>
+        </div>
       </div>
 
-      <div class="col-7">
-        <div class="row justify-content-center">
-          <div class="col-12 col-lg-9 mb-2">
-            <my-embed [video]="video"></my-embed>
-          </div>
-        </div>
+      <div class="col-12 col-md-7">
+        <my-embed [video]="video"></my-embed>
 
-        <div class="mb-1 start-at" formGroupName="timestamp">
+        <div class="mb-1 mt-3 start-at" formGroupName="timestamp">
           <my-peertube-checkbox
             formControlName="hasStart"
             i18n-labelText labelText="Start at"
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html
index 1a320e9a4..bc47bf26f 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -19,7 +19,7 @@
         </a>
       </div>
 
-      <div class="ml-auto">
+      <div class="ms-auto">
         <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
@@ -41,7 +41,7 @@
       <td>
         <a [href]="'https://' + serverBlock.blockedServer.host" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
           {{ serverBlock.blockedServer.host }}
-          <span class="glyphicon glyphicon-new-window"></span>
+          <my-global-icon iconName="external-link"></my-global-icon>
         </a>
       </td>
       <td>{{ serverBlock.createdAt | date: 'short' }}</td>
@@ -50,7 +50,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td colspan="3">
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No server found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>No server found.</ng-container>
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
index 2c46c3d03..376fb1693 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
@@ -2,7 +2,6 @@
 @use '_mixins' as *;
 
 .description {
-  font-size: 15px;
   margin-bottom: 15px;
 }
 
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.ts b/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
index 9edfac388..617408f2a 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
@@ -1,6 +1,7 @@
 import { forkJoin } from 'rxjs'
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
+import { prepareIcu } from '@app/helpers'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
@@ -63,9 +64,16 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
     forkJoin(observables)
       .subscribe({
         next: () => {
-          const message = Array.isArray(this.usersToBan)
-            ? $localize`${this.usersToBan.length} users banned.`
-            : $localize`User ${this.usersToBan.username} banned.`
+          let message: string
+
+          if (Array.isArray(this.usersToBan)) {
+            message = prepareIcu($localize`{count, plural, =1 {1 user banned.} other {{count} users banned.}}`)(
+              { count: this.usersToBan.length },
+              $localize`${this.usersToBan.length} users banned.`
+            )
+          } else {
+            message = $localize`User ${this.usersToBan.username} banned.`
+          }
 
           this.notifier.success(message)
 
@@ -79,7 +87,12 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
   }
 
   getModalTitle () {
-    if (Array.isArray(this.usersToBan)) return $localize`Ban ${this.usersToBan.length} users`
+    if (Array.isArray(this.usersToBan)) {
+      return prepareIcu($localize`Ban {count, plural, =1 {1 user} other {{count} users}}`)(
+        { count: this.usersToBan.length },
+        $localize`Ban ${this.usersToBan.length} users`
+      )
+    }
 
     return $localize`Ban "${this.usersToBan.username}"`
   }
diff --git a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
index 787318c2c..c69a45c25 100644
--- a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
@@ -100,7 +100,8 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
       return
     }
 
-    const message = $localize`If you remove user ${user.username}, you won't be able to create another with the same username!`
+    // eslint-disable-next-line max-len
+    const message = $localize`If you remove this user, you won't be able to create another user or channel with <strong>${user.username}</strong> username!`
     const res = await this.confirmService.confirm(message, $localize`Delete ${user.username}`)
     if (res === false) return
 
diff --git a/client/src/app/shared/shared-moderation/video-block.component.scss b/client/src/app/shared/shared-moderation/video-block.component.scss
index 3061bbf15..7726eca11 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.scss
+++ b/client/src/app/shared/shared-moderation/video-block.component.scss
@@ -6,6 +6,5 @@ textarea {
 }
 
 .live-info {
-  font-size: 15px;
   margin: 40px 0 20px;
 }
diff --git a/client/src/app/shared/shared-moderation/video-block.component.ts b/client/src/app/shared/shared-moderation/video-block.component.ts
index 400913f02..f8b22a3f6 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.ts
+++ b/client/src/app/shared/shared-moderation/video-block.component.ts
@@ -1,5 +1,6 @@
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
+import { prepareIcu } from '@app/helpers'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { Video } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
@@ -80,9 +81,10 @@ export class VideoBlockComponent extends FormReactive implements OnInit {
     this.videoBlocklistService.blockVideo(options)
         .subscribe({
           next: () => {
-            const message = this.isMultiple
-              ? $localize`Blocked ${this.videos.length} videos.`
-              : $localize`Blocked ${this.getSingleVideo().name}`
+            const message = prepareIcu($localize`{count, plural, =1 {Blocked {videoName}.} other {Blocked {count} videos.}}`)(
+              { count: this.videos.length, videoName: this.getSingleVideo().name },
+              $localize`Blocked ${this.videos.length} videos.`
+            )
 
             this.notifier.success(message)
             this.hide()
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index 67ca56516..b163d3581 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -8,7 +8,7 @@
   <div class="modal-body">
 
     <div class="playlist" *ngIf="playlist">
-      <div class="title-page title-page-single" i18n *ngIf="video">Share the playlist</div>
+      <h5 i18n *ngIf="video">Share the playlist</h5>
 
       <div *ngIf="isPrivatePlaylist()" class="alert-private alert alert-warning">
         <div i18n>This playlist is private so you won't be able to share it with external users</div>
@@ -25,8 +25,7 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-
-              <my-input-toggle-hidden [value]="getPlaylistUrl()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+              <my-input-text [value]="getPlaylistUrl()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
             </div>
           </ng-template>
         </ng-container>
@@ -46,10 +45,10 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <my-input-toggle-hidden
+              <my-input-text
                 [value]="customizations.onlyEmbedUrl ? getPlaylistEmbedUrl() : getPlaylistIframeCode()" (change)="updateEmbedCode()"
                 [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
-              ></my-input-toggle-hidden>
+              ></my-input-text>
 
               <div i18n *ngIf="notSecure()" class="alert alert-warning">
                 The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
@@ -86,7 +85,7 @@
 
 
     <div class="video" *ngIf="video">
-      <div class="title-page title-page-single" *ngIf="playlist" i18n>Share the video</div>
+      <h5 *ngIf="playlist" i18n>Share the video</h5>
 
       <div *ngIf="isPrivateVideo()" class="alert-private alert alert-warning">
         <div i18n>This video is private so you won't be able to share it with external users</div>
@@ -103,7 +102,7 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <my-input-toggle-hidden [value]="getVideoUrl()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+              <my-input-text [value]="getVideoUrl()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
             </div>
           </ng-template>
         </ng-container>
@@ -123,10 +122,10 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <my-input-toggle-hidden
+              <my-input-text
                 [value]="customizations.onlyEmbedUrl ? getVideoEmbedUrl() : getVideoIframeCode()" (ngModelChange)="updateEmbedCode()"
                 [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
-              ></my-input-toggle-hidden>
+              ></my-input-text>
 
               <div i18n *ngIf="notSecure()" class="alert alert-warning">
                 The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
@@ -171,9 +170,8 @@
             </div>
           </div>
 
-          <div class="form-group">
+          <div class="form-group" *ngIf="isInVideoEmbedTab()">
             <my-peertube-checkbox
-              *ngIf="isInVideoEmbedTab()"
               inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
               i18n-labelText labelText="Only display embed URL"
             ></my-peertube-checkbox>
@@ -268,7 +266,7 @@
              [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
 
           <ng-container *ngIf="isAdvancedCustomizationCollapsed">
-            <span class="glyphicon glyphicon-menu-down"></span>
+            <span class="chevron-down"></span>
 
             <ng-container i18n>
               More customization
@@ -276,7 +274,7 @@
           </ng-container>
 
           <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
-            <span class="glyphicon glyphicon-menu-up"></span>
+            <span class="chevron-up"></span>
 
             <ng-container i18n>
               Less customization
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss
index 44ebb13f4..6e80f8c76 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.scss
+++ b/client/src/app/shared/shared-share-modal/video-share.component.scss
@@ -1,14 +1,10 @@
 @use '_mixins' as *;
 @use '_variables' as *;
 
-my-input-toggle-hidden {
+my-input-text {
   width: 100%;
 }
 
-.title-page.title-page-single {
-  margin-top: 0;
-}
-
 .playlist {
   margin-bottom: 50px;
 }
@@ -34,6 +30,10 @@ my-input-toggle-hidden {
   margin-top: 20px;
 }
 
+.alert-private {
+  margin-top: 0;
+}
+
 .filters {
   margin-top: 30px;
 
@@ -46,20 +46,8 @@ my-input-toggle-hidden {
     justify-content: center;
     align-items: center;
     margin-top: 20px;
-    font-size: 16px;
     font-weight: $font-semibold;
     cursor: pointer;
-
-    .glyphicon {
-      @include margin-right(5px);
-    }
-  }
-
-  .form-group {
-    margin-bottom: 0;
-    height: 34px;
-    display: flex;
-    align-items: center;
   }
 
   .video-caption-block {
@@ -88,3 +76,7 @@ my-input-toggle-hidden {
   align-items: center;
   justify-content: space-between;
 }
+
+h5 {
+  font-size: 1.15rem;
+}
diff --git a/client/src/app/shared/shared-tables/table-expander-icon.component.ts b/client/src/app/shared/shared-tables/table-expander-icon.component.ts
index 3756b475a..66bbfe6fb 100644
--- a/client/src/app/shared/shared-tables/table-expander-icon.component.ts
+++ b/client/src/app/shared/shared-tables/table-expander-icon.component.ts
@@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core'
   selector: 'my-table-expander-icon',
   template: `
 <span class="expander">
-    <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
+    <i [ngClass]="expanded ? 'chevron-down' : 'chevron-right'"></i>
 </span>`
 })
 export class TableExpanderIconComponent {
diff --git a/client/src/app/shared/shared-tables/video-cell.component.scss b/client/src/app/shared/shared-tables/video-cell.component.scss
index 7efb61502..5d26b02ef 100644
--- a/client/src/app/shared/shared-tables/video-cell.component.scss
+++ b/client/src/app/shared/shared-tables/video-cell.component.scss
@@ -59,13 +59,6 @@
     color: pvar(--mainForegroundColor);
     line-height: 1rem;
 
-    div .glyphicon {
-      @include margin-left(0.1rem);
-
-      font-size: 80%;
-      color: #808080;
-    }
-
     div + div {
       color: var(--greyForegroundColor);
       font-size: 11px;
diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.html b/client/src/app/shared/shared-user-settings/user-interface-settings.component.html
index b739e881b..1a24641a2 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.html
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.html
@@ -5,10 +5,10 @@
 
     <div class="peertube-select-container">
       <select formControlName="theme" id="theme" class="form-control">
-        <option i18n value="instance-default">Instance default theme ({{ getDefaultThemeLabel() }})</option>
-        <option i18n value="default">{{ defaultThemeLabel }}</option>
+        <option i18n value="instance-default">{{ instanceName }} default theme ({{ getDefaultInstanceThemeLabel() }})</option>
+        <option i18n value="default">{{ getDefaultThemeLabel() }}</option>
 
-        <option *ngFor="let theme of availableThemes" [value]="theme">{{ capitalizeFirstLetter(theme) }}</option>
+        <option *ngFor="let theme of getAvailableThemes()" [value]="theme">{{ theme }}</option>
       </select>
     </div>
   </div>
diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
index 2fc245ace..da8202594 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
 input[type=submit] {
   @include peertube-button;
   @include orange-button;
diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts b/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
index 932db498a..24ad54b1d 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
@@ -1,8 +1,7 @@
 import { Subject, Subscription } from 'rxjs'
 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { AuthService, Notifier, ServerService, UserService } from '@app/core'
+import { AuthService, Notifier, ServerService, ThemeService, UserService } from '@app/core'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
-import { capitalizeFirstLetter } from '@root-helpers/string'
 import { HTMLServerConfig, User, UserUpdateMe } from '@shared/models'
 
 @Component({
@@ -18,8 +17,6 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
 
   formValuesWatcher: Subscription
 
-  defaultThemeLabel = $localize`Light/Orange`
-
   private serverConfig: HTMLServerConfig
 
   constructor (
@@ -27,14 +24,14 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
     private authService: AuthService,
     private notifier: Notifier,
     private userService: UserService,
+    private themeService: ThemeService,
     private serverService: ServerService
   ) {
     super()
   }
 
-  get availableThemes () {
-    return this.serverConfig.theme.registered
-               .map(t => t.name)
+  get instanceName () {
+    return this.serverConfig.instance.name
   }
 
   ngOnInit () {
@@ -61,17 +58,23 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
   }
 
   getDefaultThemeLabel () {
+    return this.themeService.getDefaultThemeLabel()
+  }
+
+  getAvailableThemes () {
+    return this.themeService.getAvailableThemeLabels()
+  }
+
+  getDefaultInstanceThemeLabel () {
     const theme = this.serverConfig.theme.default
 
-    if (theme === 'default') return this.defaultThemeLabel
+    if (theme === 'default') {
+      return this.getDefaultThemeLabel()
+    }
 
     return theme
   }
 
-  capitalizeFirstLetter (str: string) {
-    return capitalizeFirstLetter(str)
-  }
-
   updateInterfaceSettings () {
     const theme = this.form.value['theme']
 
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.html b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
index 446ade445..85b27a4ff 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.html
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
@@ -1,5 +1,5 @@
 <form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
-  <div class="form-group form-group-select">
+  <div class="form-group">
     <div class="anchor" id="video-sensitive-content-policy"></div> <!-- video-sensitive-content-policy anchor -->
     <label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label>
     <my-help>
@@ -20,7 +20,7 @@
     </div>
   </div>
 
-  <div class="form-group form-group-select">
+  <div class="form-group">
     <div class="anchor" id="video-languages-subtitles"></div> <!-- video-languages-subtitles anchor -->
     <label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label>
     <my-help>
@@ -30,7 +30,7 @@
     </my-help>
 
     <div>
-      <my-select-languages formControlName="videoLanguages"></my-select-languages>
+      <my-select-languages [maxLanguages]="20" formControlName="videoLanguages"></my-select-languages>
     </div>
   </div>
 
@@ -42,7 +42,7 @@
       i18n-labelText labelText="Help share videos being played"
     >
       <ng-container ngProjectAs="description">
-        <span i18n>The <a routerLink="/about/peertube" fragment="privacy" target="_blank">sharing system</a> implies that some technical information about your system (such as a public IP address) can be sent to other peers, but greatly helps to reduce server load.</span>
+        <span i18n>The <a class="link-orange" routerLink="/about/peertube" fragment="privacy" target="_blank">sharing system</a> implies that some technical information about your system (such as a public IP address) can be sent to other peers, but greatly helps to reduce server load.</span>
       </ng-container>
     </my-peertube-checkbox>
   </div>
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
index c4f6020d4..163c899d3 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
 input[type=submit] {
   @include peertube-button;
   @include orange-button;
@@ -15,8 +10,6 @@ input[type=submit] {
 
 .peertube-select-container {
   @include peertube-select-container(340px);
-
-  margin-bottom: 30px;
 }
 
 my-select-languages {
@@ -24,7 +17,3 @@ my-select-languages {
 
   display: block;
 }
-
-.form-group-select {
-  margin-bottom: 30px;
-}
diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html
index a00c3d1c7..656d1beb3 100644
--- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html
+++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html
@@ -1,5 +1,5 @@
 <form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
-  <div class="form-group mb-2">
+  <div class="form-group">
     <input type="email"
       formControlName="text"
       class="form-control"
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
index a6d851315..0e09c2697 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
@@ -1,5 +1,5 @@
 <div
-  class="btn-group-subscribe btn-group"
+  class="btn-group-subscribe btn-group" role="group"
   [ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }"
 >
 
@@ -20,17 +20,11 @@
   </ng-template>
 
   <ng-template #userLoggedIn>
-    <button
-      *ngIf="!isAllChannelsSubscribed" type="button"
-      class="btn btn-sm" (click)="subscribe()"
-    >
+    <button *ngIf="!isAllChannelsSubscribed" type="button" class="btn" (click)="subscribe()">
       <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template>
     </button>
 
-    <button
-      *ngIf="isAllChannelsSubscribed" type="button"
-      class="btn btn-sm" role="button"
-      (click)="unsubscribe()">
+    <button *ngIf="isAllChannelsSubscribed" type="button" class="btn" role="button" (click)="unsubscribe()">
       <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container>
     </button>
   </ng-template>
@@ -43,7 +37,7 @@
     class="btn-group" ngbDropdown autoClose="outside" placement="bottom-right bottom-left bottom auto"
     role="group" aria-label="Multiple ways to subscribe to the current channel" i18n-aria-label
   >
-    <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label>
+    <button class="btn dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label>
       <ng-container
         *ngIf="!isUserLoggedIn(); then userLoggedOut">
       </ng-container>
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
index da8eaf646..889596b62 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
@@ -3,14 +3,10 @@
 
 .btn-group-subscribe {
   @include peertube-button;
-  @include disable-default-a-behaviour;
 
-  float: right;
-  padding: 0;
-
-  > .btn,
-  > .dropdown > .dropdown-toggle {
-    font-size: 15px;
+  button.dropdown-toggle {
+    font-size: $button-font-size;
+    line-height: 1.2;
   }
 
   &:not(.big) {
@@ -38,7 +34,7 @@
 
   // Unlogged
   > .dropdown > .dropdown-toggle span {
-    @include padding-right(3px);
+    @include padding-right(5px);
   }
 
   // Logged
@@ -65,9 +61,11 @@
       @include padding-left(5px);
     }
   }
+
   &.unsubscribe-button {
     .btn {
       @include grey-button;
+
       font-weight: 600;
     }
   }
diff --git a/client/src/app/shared/shared-video-live/live-documentation-link.component.html b/client/src/app/shared/shared-video-live/live-documentation-link.component.html
index acf8a71eb..27248645f 100644
--- a/client/src/app/shared/shared-video-live/live-documentation-link.component.html
+++ b/client/src/app/shared/shared-video-live/live-documentation-link.component.html
@@ -1,4 +1,4 @@
-<div i18n>
-  See <a href="https://docs.joinpeertube.org/use-create-upload-video?id=publish-a-live-in-peertube-gt-v3" target="_blank" rel="noopener noreferrer">the documentation</a>
+<p i18n>
+  See <a class="link-orange" href="https://docs.joinpeertube.org/use-create-upload-video?id=publish-a-live-in-peertube-gt-v3" target="_blank" rel="noopener noreferrer">the documentation</a>
   to learn how to use the PeerTube live streaming feature.
-</div>
+</p>
diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.html b/client/src/app/shared/shared-video-live/live-stream-information.component.html
index 01e305938..99c7dbd4c 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.html
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.html
@@ -7,27 +7,27 @@
 
   <div class="modal-body" *ngIf="live">
     <div>
-      <div class="badge badge-info" *ngIf="live.permanentLive" i18n>Permanent/Recurring live</div>
-      <div class="badge badge-info" *ngIf="live.saveReplay" i18n>Replay will be saved</div>
+      <div class="pt-badge badge-blue" *ngIf="live.permanentLive" i18n>Permanent/Recurring live</div>
+      <div class="pt-badge badge-blue" *ngIf="live.saveReplay" i18n>Replay will be saved</div>
     </div>
 
-    <div class="alert alert-info">
+    <div class="alert pt-alert-primary">
       <my-live-documentation-link></my-live-documentation-link>
     </div>
 
     <div *ngIf="live.rtmpUrl" class="form-group">
       <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label>
-      <my-input-toggle-hidden inputId="liveVideoRTMPUrl" [value]="live.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-text inputId="liveVideoRTMPUrl" [value]="live.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
     </div>
 
     <div *ngIf="live.rtmpsUrl" class="form-group">
       <label for="liveVideoRTMPSUrl" i18n>Live RTMPS Url</label>
-      <my-input-toggle-hidden inputId="liveVideoRTMPSUrl" [value]="live.rtmpsUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-text inputId="liveVideoRTMPSUrl" [value]="live.rtmpsUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
     </div>
 
     <div class="form-group">
       <label for="liveVideoStreamKey" i18n>Live stream key</label>
-      <my-input-toggle-hidden inputId="liveVideoStreamKey" [value]="live.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-text inputId="liveVideoStreamKey" [value]="live.streamKey" [withCopy]="true" [readonly]="true"></my-input-text>
 
       <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div>
     </div>
@@ -36,8 +36,8 @@
       <label i18n>Latest live sessions</label>
 
       <div class="journal-session" *ngFor="let session of latestLiveSessions">
-        <span i18n class="badge badge-success" *ngIf="!getErrorLabel(session)">Success</span>
-        <span class="badge badge-danger" *ngIf="getErrorLabel(session)">{{ getErrorLabel(session) }}</span>
+        <span i18n class="pt-badge badge-success" *ngIf="!getErrorLabel(session)">Success</span>
+        <span class="pt-badge badge-danger" *ngIf="getErrorLabel(session)">{{ getErrorLabel(session) }}</span>
 
         <span i18n>Started on {{ session.startDate | date:'medium' }}</span>
         <span i18n *ngIf="session.endDate">Ended on {{ session.endDate | date:'medium' }}</span>
diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.scss b/client/src/app/shared/shared-video-live/live-stream-information.component.scss
index 9c8ad12bd..a0cb30897 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.scss
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.scss
@@ -9,19 +9,20 @@ p-autocomplete {
   margin: 20px 0;
 }
 
-.alert-info {
+.pt-alert-primary {
   margin: 1rem 0;
 }
 
-.badge {
+.pt-badge {
+  @include margin-right(5px);
+
   font-size: 13px;
-  margin-right: 5px;
 }
 
 .journal-session {
   margin-bottom: 5px;
 
-  span:not(.badge, :last-child)::after {
+  span:not(.pt-badge, :last-child)::after {
     margin: 3px;
     content: '•';
   }
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index b50544057..1c7458b4b 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -28,15 +28,10 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <div class="input-group input-group-sm">
-                <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
-
-                <div class="input-group-append" *ngIf="!isConfidentialVideo()">
-                  <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
-                    <span class="glyphicon glyphicon-duplicate"></span>
-                  </button>
-                </div>
-              </div>
+              <my-input-text
+                *ngIf="!isConfidentialVideo()"
+                [show]="true" [readonly]="true" [withCopy]="true" [withToggle]="false" [value]="getLink()"
+              ></my-input-text>
             </div>
           </ng-template>
         </ng-container>
@@ -53,14 +48,10 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <div class="input-group input-group-sm">
-                <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
-                <div class="input-group-append" *ngIf="!isConfidentialVideo()">
-                  <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
-                    <span class="glyphicon glyphicon-duplicate"></span>
-                  </button>
-                </div>
-              </div>
+              <my-input-text
+                *ngIf="!isConfidentialVideo()"
+                [show]="true" [readonly]="true" [withCopy]="true" [withToggle]="false" [value]="getLink()"
+              ></my-input-text>
             </div>
           </ng-template>
         </ng-container>
@@ -129,7 +120,7 @@
         [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"
       >
         <ng-container *ngIf="isAdvancedCustomizationCollapsed">
-          <span class="glyphicon glyphicon-menu-down"></span>
+          <span class="chevron-down"></span>
 
           <ng-container i18n>
             Advanced
@@ -137,7 +128,7 @@
         </ng-container>
 
         <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
-          <span class="glyphicon glyphicon-menu-up"></span>
+          <span class="chevron-up"></span>
 
           <ng-container i18n>
             Simple
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss
index bd42f4813..407bdadf2 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss
@@ -10,17 +10,12 @@
   justify-content: center;
   align-items: center;
   margin-top: 20px;
-  font-size: 16px;
   font-weight: 600;
   cursor: pointer;
 
   .nav-tabs {
     margin-top: 10x;
   }
-
-  .glyphicon {
-    @include margin-right(5px);
-  }
 }
 
 .peertube-select-container.title-select {
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.ts b/client/src/app/shared/shared-video-miniature/video-download.component.ts
index 5328f5170..bbda39c2d 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.ts
@@ -193,10 +193,6 @@ export class VideoDownloadComponent {
     return this.video.privacy.id === VideoPrivacy.PRIVATE || this.video.privacy.id === VideoPrivacy.INTERNAL
   }
 
-  activateCopiedMessage () {
-    this.notifier.success($localize`Copied`)
-  }
-
   switchToType (type: DownloadType) {
     this.type = type
   }
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
index a07b8b5ee..fe7a59bdb 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
@@ -44,6 +44,7 @@
       [searchable]="false"
     >
       <ng-option i18n value="-publishedAt">Sort by <strong>"Recently Added"</strong></ng-option>
+      <ng-option i18n value="-originallyPublishedAt">Sort by <strong>"Original Publication Date"</strong></ng-option>
 
       <ng-option i18n *ngIf="isTrendingSortEnabled('most-viewed')" value="-trending">Sort by <strong>"Recent Views"</strong></ng-option>
       <ng-option i18n *ngIf="isTrendingSortEnabled('hot')" value="-hot">Sort by <strong>"Hot"</strong></ng-option>
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
index 8cb1ff5b8..a4e51982c 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
@@ -3,7 +3,6 @@
 
 .root {
   margin-bottom: 45px;
-  font-size: 15px;
 }
 
 .first-row {
@@ -49,7 +48,6 @@
 
   border-radius: 24px;
   padding: 4px 15px;
-  font-size: 16px;
   margin-bottom: 15px;
   cursor: pointer;
 }
@@ -101,7 +99,7 @@
 }
 
 .sort {
-  min-width: 200px;
+  min-width: 250px;
   max-width: 300px;
   height: min-content;
 
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index 80b418c87..a397efdca 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -4,6 +4,10 @@
 
 $more-button-width: 40px;
 
+.video-miniature {
+  font-size: 14px;
+}
+
 .video-miniature-name {
   @include miniature-name;
 }
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index 42c472579..534a78b3f 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -175,7 +175,7 @@ export class VideoMiniatureComponent implements OnInit {
 
     if (video.scheduledUpdate) {
       const updateAt = new Date(video.scheduledUpdate.updateAt.toString()).toLocaleString(this.localeId)
-      return $localize`Publication scheduled on ` + updateAt
+      return $localize`Publication scheduled on ${updateAt}`
     }
 
     if (video.state.id === VideoState.TRANSCODING_FAILED) {
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.html b/client/src/app/shared/shared-video-miniature/videos-list.component.html
index 2b554517f..c220f61f1 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.html
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.html
@@ -12,15 +12,15 @@
 
     <div class="action-block">
       <ng-container *ngFor="let action of headerActions">
-        <a *ngIf="action.routerLink" class="ml-2" [routerLink]="action.routerLink" routerLinkActive="active">
+        <a *ngIf="action.routerLink" class="ms-2" [routerLink]="action.routerLink" routerLinkActive="active">
           <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
         </a>
 
-        <a *ngIf="!action.routerLink && !action.href && action.click" class="ml-2" (click)="action.click($event)" (key.enter)="action.click($event)">
+        <a *ngIf="!action.routerLink && !action.href && action.click" class="ms-2" (click)="action.click($event)" (key.enter)="action.click($event)">
           <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
         </a>
 
-        <a *ngIf="!action.routerLink && action.href && action.click" class="ml-2" (click)="action.click($event)" (key.enter)="action.click($event)" [href]="action.href">
+        <a *ngIf="!action.routerLink && action.href && action.click" class="ms-2" (click)="action.click($event)" (key.enter)="action.click($event)" [href]="action.href">
           <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
         </a>
 
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.scss b/client/src/app/shared/shared-video-miniature/videos-list.component.scss
index 209201a5c..fb9dcafb8 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.scss
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.scss
@@ -54,9 +54,9 @@ $margin-top: 30px;
 }
 
 .date-title {
-  font-size: 16px;
   font-weight: $font-semibold;
   margin-bottom: 20px;
+  font-size: 1rem;
 
   // Make the element span a full grid row within .videos grid
   grid-column: 1 / -1;
@@ -99,11 +99,5 @@ $margin-top: 30px;
     align-items: center;
     height: auto;
     margin-bottom: 10px;
-
-    .title-page {
-      @include margin-right(0);
-
-      margin-bottom: 10px;
-    }
   }
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
index bd5d37196..6d787796a 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
@@ -30,12 +30,10 @@
       </div>
 
       <div class="optional-rows" *ngIf="playlist.optionalRowDisplayed">
-        <div class="labels">
-          <div i18n>Start at</div>
-          <div i18n>Stop at</div>
-        </div>
+        <div class="header-label" i18n>Start at</div>
+        <div class="header-label" i18n>Stop at</div>
 
-        <div *ngFor="let element of buildOptionalRowElements(playlist)">
+        <ng-container *ngFor="let element of buildOptionalRowElements(playlist)">
           <my-peertube-checkbox
             [inputName]="getOptionalInputName(playlist, element)"
             [ngModel]="element.enabled" [onPushWorkaround]="true"
@@ -55,7 +53,7 @@
             (inputBlur)="onElementTimestampUpdate(playlist, element)"
             #stopAt
           ></my-timestamp-input>
-        </div>
+        </ng-container>
       </div>
     </div>
   </div>
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
index 7db469d7c..de2f1032b 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
@@ -1,10 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-$optional-rows-checkbox-width: 34px;
-$timestamp-width: 50px;
-$timestamp-margin-right: 10px;
-
 .header,
 .dropdown-item,
 .input-container {
@@ -52,12 +48,12 @@ $timestamp-margin-right: 10px;
   }
 }
 
-.primary-row,
-.optional-rows > div {
+.primary-row {
   display: flex;
 
   my-peertube-checkbox {
     @include margin-right(10px);
+
     align-self: center;
   }
 
@@ -84,41 +80,30 @@ $timestamp-margin-right: 10px;
       height: 19px;
     }
   }
-
-  my-timestamp-input {
-    @include margin-right($timestamp-margin-right);
-
-    ::ng-deep .ui-inputtext {
-      padding: 0;
-      width: $timestamp-width;
-    }
-  }
 }
 
 .optional-rows {
-  > div {
-    padding: 8px 5px 5px 10px;
-  }
+  display: grid;
+  grid-template-columns: 35px 80px 80px;
+  row-gap: 3px;
+  column-gap: 10px;
+  align-items: center;
 
   my-peertube-checkbox {
-    @include margin-right(0 !important);
-
-    display: block;
-    width: $optional-rows-checkbox-width;
+    @include margin-left(auto);
   }
 
-  .labels {
-    @include margin-left($optional-rows-checkbox-width);
-
+  .header-label {
     font-size: 13px;
     color: pvar(--greyForegroundColor);
-    padding-top: 5px;
-    padding-bottom: 0;
+    padding-left: 2px;
 
-    div {
-      @include margin-right($timestamp-margin-right);
+    &:nth-child(1) {
+      grid-column: 2;
+    }
 
-      width: $timestamp-width;
+    &:nth-child(2) {
+      grid-column: 3;
     }
   }
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
index 2400a4c25..f58d5f7f6 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
@@ -21,7 +21,7 @@
             [attr.title]="playlistElement.video.name"
           >{{ playlistElement.video.name }}</a>
 
-          <span *ngIf="isVideoPrivate()" class="badge badge-yellow">Private</span>
+          <span *ngIf="isVideoPrivate()" class="pt-badge badge-yellow">Private</span>
         </div>
 
         <span class="video-miniature-created-at-views">
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index fbf67e892..e6b01d33d 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -75,41 +75,6 @@ my-video-thumbnail,
         left: -2px;
       }
     }
-
-    .video-info {
-      display: flex;
-      flex-direction: column;
-      align-self: flex-start;
-      min-width: 0;
-
-      .video-info-header {
-        display: flex;
-        align-items: baseline;
-
-        a {
-          width: auto;
-          padding-right: 5px;
-        }
-
-        .badge {
-          @include peertube-badge;
-          margin-right: 5px;
-        }
-      }
-
-      .video-info-account,
-      .video-info-timestamp {
-        color: pvar(--greyForegroundColor);
-      }
-    }
-  }
-
-  .video-info-name {
-    @include ellipsis;
-
-    font-size: 18px;
-    font-weight: $font-semibold;
-    display: inline-block;
   }
 
   .more,
@@ -140,6 +105,45 @@ my-video-thumbnail,
   }
 }
 
+.video-info-name {
+  @include ellipsis;
+
+  font-size: 18px;
+  font-weight: $font-semibold;
+  display: inline-block;
+}
+
+.video-info {
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+  min-width: 0;
+
+  .video-info-header {
+    display: flex;
+    align-items: baseline;
+
+    a {
+      width: auto;
+      padding-right: 5px;
+    }
+
+    .pt-badge {
+      @include margin-right(5px);
+    }
+  }
+
+  .video-info-account,
+  .video-info-timestamp {
+    color: pvar(--greyForegroundColor);
+  }
+}
+
+.video-info-account,
+.video-miniature-created-at-views {
+  font-size: 14px;
+}
+
 .dropdown-menu {
 
   .dropdown-item {
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
index 3956d9282..d43afad28 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
@@ -53,7 +53,7 @@
 
   .privacy-date {
     margin-top: 5px;
-    font-size: 13px;
+    font-size: 14px;
 
     .privacy {
       font-weight: $font-semibold;