42 files changed, 190 insertions, 249 deletions

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..650448a74 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
@@ -51,11 +51,10 @@
                 </ng-template>
               </my-help>
 
-              <my-markdown-textarea [truncate]="250" formControlName="description" [markdownVideo]="videoToUpdate"></my-markdown-textarea>
-
-              <div *ngIf="formErrors.description" class="form-error">
-                {{ formErrors.description }}
-              </div>
+              <my-markdown-textarea
+                formControlName="description" [markdownVideo]="videoToUpdate"
+                [formError]="formErrors.description" [truncate]="250"
+              ></my-markdown-textarea>
             </div>
           </div>
 
@@ -237,23 +236,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>
@@ -332,17 +331,30 @@
                   </ng-container>
                 </ng-template>
               </my-help>
+
               <my-markdown-textarea
                 id="support" formControlName="support" markdownType="enhanced"
-                [classes]="{ 'input-error': formErrors['support'] }"
+                [formError]="formErrors['support']"
               ></my-markdown-textarea>
-              <div *ngIf="formErrors.support" class="form-error">
-                {{ formErrors.support }}
-              </div>
             </div>
           </div>
 
           <div class="col-md-12 col-xl-4">
+
+            <div *ngIf="videoSource" class="form-group">
+              <label i18n for="filename">Filename</label>
+
+              <my-help>
+                <ng-template ptTemplate="preHtml">
+                  <ng-container i18n>
+                    Name of the uploaded file
+                  </ng-container>
+                </ng-template>
+              </my-help>
+
+              <input type="text" [disabled]="true" id="filename" class="form-control" [value]="videoSource.filename" />
+            </div>
+
             <div class="form-group originally-published-at">
               <label i18n for="originallyPublishedAt">Original publication date</label>
               <my-help>
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/shared/video-edit.component.ts b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
index 16b964482..c74ef5731 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
@@ -37,6 +37,7 @@ import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service'
 import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
 import { VideoCaptionEditModalComponent } from './video-caption-edit-modal/video-caption-edit-modal.component'
 import { VideoEditType } from './video-edit.type'
+import { VideoSource } from '@shared/models/videos/video-source'
 
 type VideoLanguages = VideoConstant<string> & { group?: string }
 type PluginField = {
@@ -61,6 +62,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
   @Input() forbidScheduledPublication = true
 
   @Input() videoCaptions: VideoCaptionWithPathEdit[] = []
+  @Input() videoSource: VideoSource
 
   @Input() waitTranscodingEnabled = true
   @Input() type: VideoEditType
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-import-url.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
index 0c78669c1..4c74eda84 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
@@ -78,7 +78,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, AfterV
         .pipe(
           switchMap(res => {
             return this.videoCaptionService
-                .listCaptions(res.video.id)
+                .listCaptions(res.video.uuid)
                 .pipe(
                   map(result => ({ video: res.video, videoCaptions: result.data }))
                 )
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..ffd125695 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>
 
@@ -12,6 +12,7 @@
       [videoCaptions]="videoCaptions" [waitTranscodingEnabled]="isWaitTranscodingEnabled()"
       type="update" (pluginFieldsAdded)="hydratePluginFieldsFromVideo()"
       [liveVideo]="liveVideo" [videoToUpdate]="videoDetails"
+      [videoSource]="videoSource"
 
       (formBuilt)="onFormBuilt()"
     ></my-video-edit>
diff --git a/client/src/app/+videos/+video-edit/video-update.component.ts b/client/src/app/+videos/+video-edit/video-update.component.ts
index 9c4998f2e..43e8ba3e5 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.ts
+++ b/client/src/app/+videos/+video-edit/video-update.component.ts
@@ -10,6 +10,7 @@ import { LiveVideoService } from '@app/shared/shared-video-live'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { LiveVideo, LiveVideoUpdate, VideoPrivacy } from '@shared/models'
 import { hydrateFormFromVideo } from './shared/video-edit-utils'
+import { VideoSource } from '@shared/models/videos/video-source'
 
 @Component({
   selector: 'my-videos-update',
@@ -19,6 +20,7 @@ import { hydrateFormFromVideo } from './shared/video-edit-utils'
 export class VideoUpdateComponent extends FormReactive implements OnInit {
   video: VideoEdit
   videoDetails: VideoDetails
+  videoSource: VideoSource
   userVideoChannels: SelectChannelItem[] = []
   videoCaptions: VideoCaptionEdit[] = []
   liveVideo: LiveVideo
@@ -46,13 +48,14 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
     this.buildForm({})
 
     const { videoData } = this.route.snapshot.data
-    const { video, videoChannels, videoCaptions, liveVideo } = videoData
+    const { video, videoChannels, videoCaptions, videoSource, liveVideo } = videoData
 
     this.video = new VideoEdit(video)
     this.videoDetails = video
 
     this.userVideoChannels = videoChannels
     this.videoCaptions = videoCaptions
+    this.videoSource = videoSource
     this.liveVideo = liveVideo
 
     this.forbidScheduledPublication = this.video.privacy !== VideoPrivacy.PRIVATE
diff --git a/client/src/app/+videos/+video-edit/video-update.resolver.ts b/client/src/app/+videos/+video-edit/video-update.resolver.ts
index 82dae5c1c..524ceae10 100644
--- a/client/src/app/+videos/+video-edit/video-update.resolver.ts
+++ b/client/src/app/+videos/+video-edit/video-update.resolver.ts
@@ -23,7 +23,8 @@ export class VideoUpdateResolver implements Resolve<any> {
     return this.videoService.getVideo({ videoId: uuid })
                .pipe(
                  switchMap(video => forkJoin(this.buildVideoObservables(video))),
-                 map(([ video, videoChannels, videoCaptions, liveVideo ]) => ({ video, videoChannels, videoCaptions, liveVideo }))
+                 map(([ video, videoSource, videoChannels, videoCaptions, liveVideo ]) =>
+                   ({ video, videoChannels, videoCaptions, videoSource, liveVideo }))
                )
   }
 
@@ -33,10 +34,12 @@ export class VideoUpdateResolver implements Resolve<any> {
         .loadCompleteDescription(video.descriptionPath)
         .pipe(map(description => Object.assign(video, { description }))),
 
+      this.videoService.getSource(video.id),
+
       listUserChannelsForSelect(this.authService),
 
       this.videoCaptionService
-        .listCaptions(video.id)
+        .listCaptions(video.uuid)
         .pipe(
           map(result => result.data)
         ),
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/action-buttons/video-rate.component.ts b/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.ts
index 48d48f33f..0fef246b3 100644
--- a/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.ts
@@ -89,7 +89,7 @@ export class VideoRateComponent implements OnInit, OnChanges, OnDestroy {
     // Unlogged users do not have ratings
     if (this.isUserLoggedIn === false) return
 
-    this.videoService.getUserVideoRating(this.video.id)
+    this.videoService.getUserVideoRating(this.video.uuid)
         .subscribe({
           next: ratingObject => {
             if (!ratingObject) return
@@ -103,13 +103,13 @@ export class VideoRateComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   private setRating (nextRating: UserVideoRateType) {
-    const ratingMethods: { [id in UserVideoRateType]: (id: number) => Observable<any> } = {
+    const ratingMethods: { [id in UserVideoRateType]: (id: string) => Observable<any> } = {
       like: this.videoService.setVideoLike,
       dislike: this.videoService.setVideoDislike,
       none: this.videoService.unsetVideoLike
     }
 
-    ratingMethods[nextRating].call(this.videoService, this.video.id)
+    ratingMethods[nextRating].call(this.videoService, this.video.uuid)
           .subscribe({
             next: () => {
               // Update the video like attribute
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..6bc201f32 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
@@ -1,8 +1,8 @@
 <form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
   <div class="avatar-and-textarea">
-    <my-actor-avatar [account]="user?.account" size="25"></my-actor-avatar>
+    <my-actor-avatar [actor]="user?.account" [actorType]="getAvatarActorType()" 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)"
@@ -88,8 +88,8 @@
   </div>
   <div class="modal-body">
     <div class="emoji-flex">
-      <div class="emoji-flex-item" *ngFor="let emojiMarkup of emojiMarkupList">
-        {{ emojiMarkup[0] }} <code>:{{ emojiMarkup[1] }}:</code>
+      <div class="emoji-flex-item" *ngFor="let emojiMarkup of getEmojiMarkupList()">
+        {{ emojiMarkup.emoji }} <code>:{{ emojiMarkup.name }}:</code>
       </div>
     </div>
   </div>
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-add.component.ts b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts
index 85da83a4c..fd3614297 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts
@@ -45,6 +45,8 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
   addingComment = false
   addingCommentButtonValue: string
 
+  private emojiMarkupList: { emoji: string, name: string }[]
+
   constructor (
     protected formValidatorService: FormValidatorService,
     private notifier: Notifier,
@@ -56,21 +58,6 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
     super()
   }
 
-  get emojiMarkupList () {
-    const emojiMarkupObjectList = require('markdown-it-emoji/lib/data/light.json')
-
-    // Populate emoji-markup-list from object to array to avoid keys alphabetical order
-    const emojiMarkupArrayList = []
-    for (const emojiMarkupName in emojiMarkupObjectList) {
-      if (emojiMarkupName) {
-        const emoji = emojiMarkupObjectList[emojiMarkupName]
-        emojiMarkupArrayList.push([ emoji, emojiMarkupName ])
-      }
-    }
-
-    return emojiMarkupArrayList
-  }
-
   ngOnInit () {
     this.buildForm({
       text: VIDEO_COMMENT_TEXT_VALIDATOR
@@ -96,6 +83,20 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
     }
   }
 
+  getEmojiMarkupList () {
+    if (this.emojiMarkupList) return this.emojiMarkupList
+
+    const emojiMarkupObjectList = require('markdown-it-emoji/lib/data/light.json')
+
+    this.emojiMarkupList = []
+    for (const name of Object.keys(emojiMarkupObjectList)) {
+      const emoji = emojiMarkupObjectList[name]
+      this.emojiMarkupList.push({ emoji, name })
+    }
+
+    return this.emojiMarkupList
+  }
+
   onValidKey () {
     this.forceCheck()
     if (!this.form.valid) return
@@ -174,14 +175,20 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
     return getLocaleDirection(this.localeId) === 'rtl'
   }
 
+  getAvatarActorType () {
+    if (this.user) return 'account'
+
+    return 'unlogged'
+  }
+
   private addCommentReply (commentCreate: VideoCommentCreate) {
     return this.videoCommentService
-      .addCommentReply(this.video.id, this.parentComment.id, commentCreate)
+      .addCommentReply(this.video.uuid, this.parentComment.id, commentCreate)
   }
 
   private addCommentThread (commentCreate: VideoCommentCreate) {
     return this.videoCommentService
-      .addCommentThread(this.video.id, commentCreate)
+      .addCommentThread(this.video.uuid, commentCreate)
   }
 
   private initTextValue () {
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..da35a9a2e 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
@@ -1,6 +1,10 @@
 <div *ngIf="isCommentDisplayed()" class="root-comment" [ngClass]="{ 'is-child': isChild() }">
   <div class="left">
-    <my-actor-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account" [size]="isChild() ? '25' : '36'"></my-actor-avatar>
+    <my-actor-avatar
+      *ngIf="!comment.isDeleted" [href]="comment.account.url"
+      [actor]="comment.account" actorType="account" [size]="isChild() ? '25' : '36'"
+    ></my-actor-avatar>
+
     <div class="vertical-border"></div>
   </div>
 
@@ -16,7 +20,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/comment/video-comments.component.ts b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.ts
index 17e0af3bc..8e556c58f 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.ts
@@ -78,7 +78,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
     this.threadLoading[commentId] = true
 
     const params = {
-      videoId: this.video.id,
+      videoId: this.video.uuid,
       threadId: commentId
     }
 
@@ -110,7 +110,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
 
   loadMoreThreads () {
     const params = {
-      videoId: this.video.id,
+      videoId: this.video.uuid,
       componentPagination: this.componentPagination,
       sort: this.sort
     }
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.html b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html
index a23152b67..a608a22f6 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html
@@ -2,7 +2,7 @@
   <my-actor-avatar
     *ngIf="showChannel"
     class="channel"
-    [channel]="video.channel"
+    [actor]="video.channel" actorType="channel"
     [internalHref]="[ '/c', video.byVideoChannel ]"
     [title]="channelLinkTitle"
     size="35"
@@ -12,7 +12,7 @@
     *ngIf="showAccount"
     class="account"
     [class.second-avatar]="showChannel"
-    [account]="video.account"
+    [actor]="video.account" actorType="account"
     [internalHref]="[ '/a', video.byAccount ]"
     [title]="accountLinkTitle"
     size="35">
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..b38516af8 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,8 +32,8 @@
 
       <div class="section channel videos" *ngFor="let object of overview.channels">
         <div class="section-title">
-          <a [routerLink]="[ '/c', buildVideoChannelBy(object) ]">
-            <my-actor-avatar [channel]="buildVideoChannel(object)" size="28"></my-actor-avatar>
+          <a class="link-orange" [routerLink]="[ '/c', buildVideoChannelBy(object) ]">
+            <my-actor-avatar [actor]="buildVideoChannel(object)" actorType="channel" size="28"></my-actor-avatar>
 
             <h2 class="section-title">{{ object.channel.displayName }}</h2>
           </a>
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