From e346077a947613aba2bec0a6db136a39035d7cdd Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 22 Nov 2024 16:16:12 +0100
Subject: [PATCH] Cleanup

---
 client/package.json                           |  2 +-
 .../about-instance.component.scss             | 10 ++---
 client/src/app/+login/login.component.html    | 10 +----
 client/src/app/+login/login.component.scss    |  4 +-
 client/src/app/+search/search.component.scss  |  4 +-
 .../+register/custom-stepper.component.scss   |  8 ++--
 .../+signup/+register/register.component.html | 14 ++-----
 .../+signup/+register/register.component.scss | 14 -------
 .../+signup/+register/register.component.ts   |  4 +-
 .../+stats/video/video-stats.component.html   |  6 ++-
 .../+stats/video/video-stats.component.scss   |  3 +-
 .../app/+stats/video/video-stats.component.ts |  6 ++-
 .../video-channel-playlists.component.html    |  4 --
 .../video-channel-playlists.component.scss    |  5 ---
 .../video-channels.component.scss             | 17 +++-----
 .../edit/video-studio-edit.component.html     | 10 +++--
 .../edit/video-studio-edit.component.scss     |  6 +--
 .../edit/video-studio-edit.component.ts       |  4 +-
 ...-caption-edit-modal-content.component.html |  4 +-
 .../shared/video-edit.component.html          |  2 +-
 .../video-go-live.component.html              |  1 +
 .../video-add-components/video-send.scss      |  2 +
 .../+video-edit/video-add.component.html      | 13 +++---
 .../+video-edit/video-add.component.scss      |  4 --
 .../+video-edit/video-update.component.html   |  5 +--
 .../comment/video-comment-add.component.scss  | 13 ++----
 .../comment/video-comment.component.scss      |  6 +--
 .../comment/video-comments.component.html     |  7 ++--
 .../comment/video-comments.component.scss     |  7 +++-
 .../recommended-videos.component.html         |  2 +-
 .../recommended-videos.component.scss         |  5 ++-
 .../+video-watch/video-watch.component.html   |  2 +-
 client/src/app/core/theme/theme.service.ts    |  4 +-
 client/src/app/header/header.component.scss   | 20 +++++----
 .../notification-dropdown.component.html      |  9 ++--
 .../notification-dropdown.component.scss      | 11 +----
 .../header/search-typeahead.component.html    |  4 +-
 .../header/search-typeahead.component.scss    |  4 --
 .../menu/quick-settings-modal.component.html  |  4 +-
 .../modal/admin-welcome-modal.component.html  |  6 +--
 .../abuse-details.component.html              |  8 +---
 .../abuse-details.component.scss              |  4 +-
 .../shared-forms/input-switch.component.scss  |  5 ++-
 .../timestamp-input.component.html            |  2 +-
 .../timestamp-input.component.scss            | 18 +++-----
 .../shared-forms/timestamp-input.component.ts |  2 +-
 .../instance-about-accordion.component.scss   |  3 +-
 .../menu/horizontal-menu.component.html       |  1 -
 .../users/signup-label.component.html         | 15 ++++++-
 .../users/signup-label.component.ts           | 13 +++++-
 .../shared/shared-moderation/moderation.scss  |  1 +
 .../video-filters-header.component.html       | 41 ++++++++++---------
 .../video-filters-header.component.scss       | 16 ++++----
 .../video-filters-header.component.ts         |  9 ++--
 .../video-miniature.component.scss            | 12 +++++-
 .../video-playlist-miniature.component.scss   |  6 ++-
 .../user-notifications.component.scss         | 10 ++++-
 client/src/assets/images/misc/markdown.svg    |  2 +-
 client/src/sass/application.scss              | 28 ++++++++-----
 client/src/sass/bootstrap.scss                | 14 ++++++-
 client/src/sass/class-helpers/_common.scss    | 10 +++--
 client/src/sass/class-helpers/_menu.scss      | 33 +++------------
 client/src/sass/class-helpers/_text.scss      |  8 +---
 client/src/sass/include/_badges.scss          |  2 +
 client/src/sass/include/_form-mixins.scss     | 31 +++++++-------
 client/src/sass/include/_mixins.scss          | 11 +----
 client/src/sass/include/_variables.scss       | 25 ++++++++---
 client/src/sass/primeng-custom.scss           | 14 ++++---
 client/src/typings.d.ts                       |  3 --
 client/yarn.lock                              |  8 ++--
 70 files changed, 306 insertions(+), 315 deletions(-)

diff --git a/client/package.json b/client/package.json
index 1f69ad4da..42d3ad03e 100644
--- a/client/package.json
+++ b/client/package.json
@@ -89,7 +89,7 @@
     "buffer": "^6.0.3",
     "chart.js": "^4.3.0",
     "chartjs-plugin-zoom": "~2.0.1",
-    "color-bits": "^1.0.3",
+    "color-bits": "^1.0.4",
     "core-js": "^3.22.8",
     "debug": "^4.3.1",
     "dompurify": "^3.1.6",
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 c162ca598..cb7324f06 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -15,8 +15,11 @@
 
 .middle-title {
   margin-top: 0;
+  text-transform: uppercase;
+  color: pvar(--fg);
+  font-weight: $font-bold;
 
-  @include in-content-small-title;
+  @include font-size(22px);
   @include margin-bottom(1.5rem);
 }
 
@@ -42,9 +45,6 @@
   .middle-title,
   .section-title {
     display: inline-block;
-  }
-
-  .section-title {
-    color: pvar(--fg);
+    color: pvar(--fg-400);
   }
 }
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index 96c458ba2..6fc650694 100644
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -4,15 +4,9 @@
   </div>
 </ng-template>
 
-<h1 class="title-page-v2">
-  <strong class="underline-orange">{{ instanceName }}</strong>
-
-  >
-
-  <ng-container i18n>Login</ng-container>
-</h1>
-
 <div class="margin-content">
+  <h1 class="title-page" i18n>Login on {{ instanceName }}</h1>
+
   <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">
 
     <my-alert type="primary">
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index 2754cd9f7..8de4de5b8 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -18,7 +18,6 @@ input[type=email] {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  margin: auto;
 
   > div {
     flex: 1 1;
@@ -32,8 +31,7 @@ my-alert {
 
 my-alert {
   display: block;
-
-  @include margin(0, auto, 2rem);
+  margin-bottom: 2rem;
 }
 
 .login-form-and-externals {
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
index b6cee3850..47b7b43e9 100644
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@@ -124,10 +124,10 @@
   }
 
   .video-channel-display-name {
-    font-size: $video-miniature-row-mobile-name-font-size;
+    font-size: $miniature-fs-mobile-big;
   }
 
   .video-channel-name {
-    font-size: $video-miniature-row-mobile-info-font-size;
+    font-size: $miniature-fs-mobile-medium;
   }
 }
diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss
index b6c017a75..b545ec982 100644
--- a/client/src/app/+signup/+register/custom-stepper.component.scss
+++ b/client/src/app/+signup/+register/custom-stepper.component.scss
@@ -5,10 +5,12 @@
 $index-block-height: 40px;
 
 header {
-  margin-bottom: 30px;
-  padding-bottom: 25px;
   width: 100%;
-  background-color: pvar(--primary-50);
+  background-color: pvar(--primary-150);
+  border-radius: 5px;
+
+  @include rfs(2rem, margin-bottom);
+  @include rfs(2rem, padding);
 }
 
 .header-steps {
diff --git a/client/src/app/+signup/+register/register.component.html b/client/src/app/+signup/+register/register.component.html
index a41815578..468ea25eb 100644
--- a/client/src/app/+signup/+register/register.component.html
+++ b/client/src/app/+signup/+register/register.component.html
@@ -1,16 +1,10 @@
-<div>
+<div class="margin-content">
 
-  <div class="margin-content signup-disabled" *ngIf="signupDisabled">
+  <div class="signup-disabled" *ngIf="signupDisabled">
     <my-alert type="warning" i18n>Signup is not enabled on this instance.</my-alert>
   </div>
 
   <ng-container *ngIf="!signupDisabled">
-    <h1 class="title-page-v2">
-      <strong class="underline-orange">{{ instanceName }}</strong>
-      >
-      <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
-    </h1>
-
     <div class="register-content">
       <my-custom-stepper linear>
 
@@ -26,7 +20,7 @@
           <my-register-step-about [serverStats]="serverStats" [requiresApproval]="requiresApproval" [videoUploadDisabled]="videoUploadDisabled"></my-register-step-about>
 
           <div class="step-buttons">
-            <a i18n class="skip-step underline-orange" routerLink="/login">
+            <a i18n class="skip-step link-primary fw-normal" routerLink="/login">
               <strong>I already have an account</strong>, I log in
             </a>
 
@@ -93,7 +87,7 @@
             <button class="peertube-button-big secondary-button" cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
 
             <div class="skip-step">
-              <button class="underline-orange button-unstyle" (click)="skipChannelCreation()">
+              <button class="link-primary button-unstyle" (click)="skipChannelCreation()">
                 <strong i18n>I don't want to create a channel</strong>
               </button>
 
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index ff4b160cc..f7053d870 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -9,12 +9,6 @@ my-signup-step-title strong {
   padding-top: 30vh;
 }
 
-.title-page-v2 {
-  background-color: pvar(--primary-50);
-  margin: 0;
-  padding-bottom: 10px;
-}
-
 my-instance-about-accordion {
   display: block;
   margin-bottom: 30px;
@@ -36,14 +30,6 @@ my-instance-about-accordion {
     font-size: 14px;
   }
 
-  .underline-orange {
-    color: pvar(--fg);
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-
   > button,
   .skip-step {
     margin-top: 20px;
diff --git a/client/src/app/+signup/+register/register.component.ts b/client/src/app/+signup/+register/register.component.ts
index 11ffefae8..9ffdcb21b 100644
--- a/client/src/app/+signup/+register/register.component.ts
+++ b/client/src/app/+signup/+register/register.component.ts
@@ -7,7 +7,7 @@ import { AuthService, ServerService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance/instance-about-accordion.component'
 import { AlertComponent } from '@app/shared/shared-main/common/alert.component'
-import { ServerConfig, ServerStats, UserRegister } from '@peertube/peertube-models'
+import { PeerTubeProblemDocument, ServerConfig, ServerStats, UserRegister } from '@peertube/peertube-models'
 import { LoaderComponent } from '../../shared/shared-main/common/loader.component'
 import { SignupLabelComponent } from '../../shared/shared-main/users/signup-label.component'
 import { SignupStepTitleComponent } from '../shared/signup-step-title.component'
@@ -213,7 +213,7 @@ export class RegisterComponent implements OnInit {
       },
 
       error: err => {
-        this.signupError = err.message
+        this.signupError = (err.body as PeerTubeProblemDocument)?.detail || err.message
       }
     })
   }
diff --git a/client/src/app/+stats/video/video-stats.component.html b/client/src/app/+stats/video/video-stats.component.html
index fbfd5f1f7..9fcfb7ef9 100644
--- a/client/src/app/+stats/video/video-stats.component.html
+++ b/client/src/app/+stats/video/video-stats.component.html
@@ -1,5 +1,9 @@
 <div class="margin-content">
-  <h1 class="title-page" i18n>{{ video.name }}</h1>
+  <h1 class="title-page">
+    <my-global-icon iconName="stats"></my-global-icon>
+
+    <ng-container i18n>{{ video.name }} statistics</ng-container>
+  </h1>
 
   <div class="stats-embed">
     <div class="global-stats">
diff --git a/client/src/app/+stats/video/video-stats.component.scss b/client/src/app/+stats/video/video-stats.component.scss
index b20d7b07c..5ddd7a920 100644
--- a/client/src/app/+stats/video/video-stats.component.scss
+++ b/client/src/app/+stats/video/video-stats.component.scss
@@ -46,7 +46,8 @@
 
   .label,
   .more-info {
-    font-size: 14px;
+    font-size: 1rem;
+    font-weight: $font-semibold;
   }
 
   .value {
diff --git a/client/src/app/+stats/video/video-stats.component.ts b/client/src/app/+stats/video/video-stats.component.ts
index 97892cc6e..17da3966e 100644
--- a/client/src/app/+stats/video/video-stats.component.ts
+++ b/client/src/app/+stats/video/video-stats.component.ts
@@ -27,6 +27,7 @@ import { NgFor, NgIf } from '@angular/common'
 import { NumberFormatterPipe } from '@app/shared/shared-main/common/number-formatter.pipe'
 import { VideoDetails } from '@app/shared/shared-main/video/video-details.model'
 import { LiveVideoService } from '@app/shared/shared-video-live/live-video.service'
+import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'
 
 type ActiveGraphId = VideoStatsTimeserieMetric | 'retention' | 'countries' | 'regions'
 
@@ -69,7 +70,8 @@ ChartJSDefaults.color = getComputedStyle(document.body).getPropertyValue('--fg')
     NgbNavContent,
     ChartModule,
     ButtonComponent,
-    NgbNavOutlet
+    NgbNavOutlet,
+    GlobalIconComponent
   ]
 })
 export class VideoStatsComponent implements OnInit {
@@ -583,7 +585,7 @@ export class VideoStatsComponent implements OnInit {
   }
 
   private buildChartColor () {
-    return getComputedStyle(document.body).getPropertyValue('--primary-400')
+    return getComputedStyle(document.body).getPropertyValue('--border-primary')
   }
 
   private formatXTick (options: {
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 dd0b10d66..3398c76ec 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,8 +1,4 @@
 <div class="margin-content">
-  <h1 i18n class="title-page" *ngIf="pagination.totalItems">
-    Created {pagination.totalItems, plural, =1 {1 playlist} other {{{ pagination.totalItems }} playlists}}
-  </h1>
-
   <div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>
 
   <div class="playlists" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
index 0776bdde0..23f9ec2d3 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
@@ -19,11 +19,6 @@
 }
 
 @media screen and (max-width: $mobile-view) {
-  .title-page {
-    display: block;
-    text-align: center;
-  }
-
   .playlists {
     justify-content: left;
 
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 8e1a26542..81d687d8e 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -4,8 +4,9 @@
 @use '_miniature' as *;
 @use '_button-mixins' as *;
 
+$owner-block-bg: pvar(--bg-secondary-350);
+
 .root {
-  --co-global-top-padding: 2rem;
   --co-channel-img-margin: 30px;
   --co-font-size: 16px;
   --co-channel-handle-font-size: 16px;
@@ -28,7 +29,6 @@
   grid-template-columns: 1fr auto;
   grid-template-rows: auto auto;
 
-  padding-top: var(--co-global-top-padding);
   font-size: var(--co-font-size);
 
   @include margin-bottom(3rem);
@@ -41,7 +41,6 @@
 .channel-description {
   grid-column: 1;
   word-break: break-word;
-  padding-bottom: var(--co-global-top-padding);
 }
 
 .show-more {
@@ -84,8 +83,6 @@
 }
 
 .owner-block {
-  $owner-block-bg: pvar(--bg-secondary-350);
-
   background-color: $owner-block-bg;
   padding: 30px;
   width: 300px;
@@ -146,7 +143,6 @@ my-copy-button {
 
 @media screen and (max-width: 1100px) {
   .root {
-    --co-global-top-padding: 45px;
     --co-channel-img-margin: 15px;
   }
 
@@ -159,7 +155,7 @@ my-copy-button {
   .channel-description:not(.expanded) {
     max-height: 70px;
 
-    @include fade-text(30px, pvar(--bg-secondary-350));
+    @include fade-text(30px, pvar(--bg));
   }
 
   .show-more {
@@ -182,16 +178,14 @@ my-copy-button {
 
   .bottom-owner {
     display: block;
-    width: 100%;
     border-bottom: 2px solid $separator-border-color;
-    padding: var(--co-global-top-padding) 45px;
     margin-bottom: 60px;
   }
 
   .owner-block {
     display: grid;
     width: 100%;
-    padding: 0;
+    padding: 1rem;
 
     .avatar-row {
       grid-column: 1;
@@ -203,7 +197,7 @@ my-copy-button {
       grid-column: 2;
       max-height: 70px;
 
-      @include fade-text(30px, pvar(--bg));
+      @include fade-text(30px, $owner-block-bg);
     }
 
     .view-account {
@@ -224,7 +218,6 @@ my-copy-button {
 
 @media screen and (max-width: $mobile-view) {
   .root {
-    --co-global-top-padding: 1rem;
     --co-font-size: 14px;
     --co-channel-handle-font-size: 13px;
     --co-owner-handle-font-size: 13px;
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 7997dd5a8..aa6a4535a 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,9 @@
 <div class="margin-content">
-  <h1 class="title-page" i18n>Studio for {{ video.name }}</h1>
+  <h1 class="title-page">
+    <my-global-icon iconName="film"></my-global-icon>
+
+    <ng-container i18n>Studio for {{ video.name }}</ng-container>
+  </h1>
 
   <div class="grid-container">
     <form [formGroup]="form">
@@ -11,12 +15,12 @@
 
         <div class="form-group">
           <label i18n for="cutStart">New start</label>
-          <my-timestamp-input inputName="cutStart" [disableBorder]="false" [maxTimestamp]="video.duration" formControlName="start"></my-timestamp-input>
+          <my-timestamp-input inputName="cutStart" enableBorder="true" [maxTimestamp]="video.duration" formControlName="start"></my-timestamp-input>
         </div>
 
         <div class="form-group">
           <label i18n for="cutEnd">New end</label>
-          <my-timestamp-input inputName="cutEnd" [disableBorder]="false" [maxTimestamp]="video.duration" formControlName="end"></my-timestamp-input>
+          <my-timestamp-input inputName="cutEnd" enableBorder="true" [maxTimestamp]="video.duration" formControlName="end"></my-timestamp-input>
         </div>
       </div>
 
diff --git a/client/src/app/+video-studio/edit/video-studio-edit.component.scss b/client/src/app/+video-studio/edit/video-studio-edit.component.scss
index b9fd1e070..70da409d7 100644
--- a/client/src/app/+video-studio/edit/video-studio-edit.component.scss
+++ b/client/src/app/+video-studio/edit/video-studio-edit.component.scss
@@ -52,16 +52,12 @@ my-timestamp-input {
   }
 }
 
-h1 {
-  font-size: 20px;
-}
-
 h2 {
   font-weight: $font-bold;
   font-size: 16px;
   padding: 0 5px;
   width: fit-content;
-  margin: -8px 0 1rem;
+  margin-top: 0.5rem;
 }
 
 .section {
diff --git a/client/src/app/+video-studio/edit/video-studio-edit.component.ts b/client/src/app/+video-studio/edit/video-studio-edit.component.ts
index 587f69e3c..55c344940 100644
--- a/client/src/app/+video-studio/edit/video-studio-edit.component.ts
+++ b/client/src/app/+video-studio/edit/video-studio-edit.component.ts
@@ -15,6 +15,7 @@ import { ReactiveFileComponent } from '../../shared/shared-forms/reactive-file.c
 import { TimestampInputComponent } from '../../shared/shared-forms/timestamp-input.component'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { VideoDetails } from '@app/shared/shared-main/video/video-details.model'
+import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-video-studio-edit',
@@ -29,7 +30,8 @@ import { VideoDetails } from '@app/shared/shared-main/video/video-details.model'
     ButtonComponent,
     EmbedComponent,
     NgIf,
-    NgFor
+    NgFor,
+    GlobalIconComponent
   ]
 })
 export class VideoStudioEditComponent extends FormReactive implements OnInit {
diff --git a/client/src/app/+videos/+video-edit/shared/caption/video-caption-edit-modal-content.component.html b/client/src/app/+videos/+video-edit/shared/caption/video-caption-edit-modal-content.component.html
index ce9a973ea..f0577f452 100644
--- a/client/src/app/+videos/+video-edit/shared/caption/video-caption-edit-modal-content.component.html
+++ b/client/src/app/+videos/+video-edit/shared/caption/video-caption-edit-modal-content.component.html
@@ -52,7 +52,7 @@
 
                     <my-timestamp-input
                       class="me-1"
-                      inputName="segmentStart" [disableBorder]="false" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999"
+                      inputName="segmentStart" enableBorder="true" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999"
                       [(ngModel)]="segment.startMs" [parser]="timestampParser" [formatter]="timestampFormatter"
                     ></my-timestamp-input>
 
@@ -67,7 +67,7 @@
 
                     <my-timestamp-input
                       class="me-1"
-                      inputName="segmentEnd" [disableBorder]="false" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999"
+                      inputName="segmentEnd" enableBorder="true" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999"
                       [(ngModel)]="segment.endMs" [parser]="timestampParser" [formatter]="timestampFormatter"
                     ></my-timestamp-input>
 
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 e8707c6a5..4c48df265 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
@@ -262,7 +262,7 @@
                 <div class="position">{{ i + 1 }}</div>
 
                 <my-timestamp-input
-                  class="d-block" [disableBorder]="false" [inputName]="'timecode[' + i + ']'"
+                  class="d-block" enableBorder="true" [inputName]="'timecode[' + i + ']'"
                   [maxTimestamp]="publishedVideo?.duration" formControlName="timecode"
                 ></my-timestamp-input>
 
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 2851eb24a..95be942e2 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
@@ -29,6 +29,7 @@
     </div>
 
     <input
+      class="peertube-button primary-button"
       [disabled]="firstStepPermanentLive !== true && firstStepPermanentLive !== false"
       type="button" i18n-value value="Go Live" (click)="goLive()"
     />
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
index 017a63880..440e6be3e 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
@@ -13,6 +13,8 @@ $width-size: 275px;
 }
 
 .first-step-block {
+  --input-bg: #{pvar(--bg-secondary-500)};
+
   display: flex;
   flex-direction: column;
   align-items: center;
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 c387631f8..c0b5f2273 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.html
+++ b/client/src/app/+videos/+video-edit/video-add.component.html
@@ -42,15 +42,18 @@
       <ng-container i18n>Instead, <a class="text-decoration-underline alert-link" routerLink="/admin/overview/users">create a dedicated account</a> to upload your videos.</ng-container>
     </my-alert>
 
+    <my-channels-setup-message></my-channels-setup-message>
+
     <my-user-quota *ngIf="!isInSecondStep() || secondStepType === 'go-live'"></my-user-quota>
 
     <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>
+      @if (secondStepType === 'import-url' || secondStepType === 'import-torrent') {
+        <ng-container i18n>Import {{ videoName }}</ng-container>
+      } @else if (secondStepType === 'upload') {
+        <ng-container i18n>Upload {{ videoName }}</ng-container>
+      }
     </div>
 
-    <my-channels-setup-message></my-channels-setup-message>
-
     <div ngbNav #nav="ngbNav" class="nav-tabs video-add-nav" [activeId]="activeNav" (activeIdChange)="onNavChange($event)" [ngClass]="{ 'hide-nav': !!secondStepType }">
       <ng-container ngbNavItem="upload">
         <a ngbNavLink>
@@ -93,6 +96,6 @@
       </ng-container>
     </div>
 
-    <div [ngbNavOutlet]="nav"></div>
+    <div class="nav-content" [ngbNavOutlet]="nav"></div>
   </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 6b3d10a8d..d49e626b6 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -37,10 +37,6 @@ $nav-link-height: 40px;
   }
 }
 
-.margin-content {
-  padding-top: 20px;
-}
-
 :host ::ng-deep .video-add-nav {
   @include peertube-nav-tabs($border-width, $border-type, $border-color, $nav-link-height);
 
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 3f2b5d944..9c7cd3fe0 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.html
+++ b/client/src/app/+videos/+video-edit/video-update.component.html
@@ -1,8 +1,5 @@
 <div class="margin-content">
-  <div class="title-page">
-    <span class="me-1" i18n>Update</span>
-    <a [routerLink]="getVideoUrl()">{{ videoDetails?.name }}</a>
-  </div>
+  <h1 class="title-page" i18n>Update {{ videoDetails?.name }}</h1>
 
   <my-upload-progress
     [isUploading]="isReplacingVideoFile" [uploadPercents]="videoUploadPercents" [error]="uploadError" [uploaded]="updateDone"
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 f4c0f0d5d..d59fc6498 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
@@ -53,24 +53,17 @@ form {
 
   ::ng-deep .help-tooltip-button {
     my-global-icon {
+      color: pvar(--input-placeholder);
       height: $markdown-icon-height;
       width: $markdown-icon-width;
 
       svg {
-        color: pvar(--input-border-color);
-        fill: pvar(--input-border-color);
         border-radius: 3px;
       }
     }
 
-    &:focus,
-    &:active,
-    &:hover {
-      my-global-icon svg {
-        background-color: pvar(--input-border-color);
-        color: pvar(--bg);
-        fill: pvar(--bg);
-      }
+    &:focus my-global-icon {
+      color: pvar(--input-fg);
     }
   }
 }
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 db2c51f22..3175dc2b5 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
@@ -32,7 +32,7 @@
 
 .highlighted-comment {
   display: inline-block;
-  background-color: pvar(--bg-secondary-500);
+  background-color: pvar(--bg-secondary-400);
   color: pvar(--fg);
   padding: 0 5px;
   font-size: 13px;
@@ -48,7 +48,8 @@
 
 .video-author {
   height: 20px;
-  background-color: #888888;
+  background-color: pvar(--bg-secondary-400);
+  color: pvar(--fg);
   border-radius: 12px;
   margin-bottom: 2px;
   max-width: 100%;
@@ -56,7 +57,6 @@
   flex-direction: row;
   align-items: center;
   display: inline-flex;
-  color: #fff !important;
 
   @include padding-right(6px);
   @include padding-left(6px);
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 b2cbd01f6..1eea9f3fd 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,15 +1,16 @@
 <div>
   <div class="title-block">
-    <h2 class="title-page">
+    <h2>
       {totalNotDeletedComments, plural, =0 {Comments} =1 {1 Comment} other {{{totalNotDeletedComments}} Comments}}
     </h2>
 
     <my-feed [syndicationItems]="syndicationItems"></my-feed>
 
-    <div ngbDropdown class="d-inline-block ms-4 dropdown-root">
-      <button class="btn btn-sm btn-outline-secondary" id="dropdown-sort-comments" ngbDropdownToggle i18n>
+    <div ngbDropdown class="d-inline-block ms-auto dropdown-root">
+      <button class="peertube-button tertiary-button" id="dropdown-sort-comments" ngbDropdownToggle i18n>
         SORT BY
       </button>
+
       <div ngbDropdownMenu aria-labelledby="dropdown-sort-comments">
         <button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button>
         <button (click)="handleSortChange('-totalReplies')" ngbDropdownItem i18n>Most replies first</button>
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 fc89a750a..bea6d4234 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
@@ -16,8 +16,11 @@
 }
 
 .title-block {
-  .title-page {
-    @include margin-right(0);
+  > h2 {
+    display: inline-block;
+    margin-bottom: 1.5rem;
+
+    @include font-size(1.25rem);
   }
 
   my-feed {
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 834412645..82c63809b 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,7 +1,7 @@
 <div class="other-videos" [ngClass]="{ 'display-as-row': displayAsRow }">
   @if (videos.length !== 0) {
     <div class="title-page-container">
-      <h2 i18n class="title-page">Other videos</h2>
+      <h2 i18n>Other videos</h2>
 
       <div
         *ngIf="!playlist" class="title-page-autoplay"
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 998d03864..b41229ebc 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,9 +8,10 @@
   margin-bottom: 25px;
   flex-wrap: wrap-reverse;
 
-  .title-page {
-    margin-bottom: unset;
+  > h2 {
+    margin-bottom: 0;
     margin-top: 0;
+    font-size: 1.25rem;
 
     @include margin-right(.5rem !important);
   }
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 3f1ad9704..4fd54c14e 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -107,7 +107,7 @@
       <my-video-attributes [video]="video"></my-video-attributes>
 
       <my-video-comments
-        class="border-top"
+        class="border-top pt-3"
         [video]="video"
         [videoPassword]="videoPassword"
         [user]="user"
diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts
index d7a931579..526696087 100644
--- a/client/src/app/core/theme/theme.service.ts
+++ b/client/src/app/core/theme/theme.service.ts
@@ -207,14 +207,14 @@ export class ThemeService {
 
       const mainColorHSL = toHSLA(parse(mainColor))
 
-      let lastColorHSL = { ...mainColorHSL }
-
       // Inject in alphabetical order for easy debug
       const toInject: { id: number, key: string, value: string }[] = [
         { id: 500, key: `--${prefix}-500`, value: this.toHSLStr(mainColorHSL) }
       ]
 
       for (const j of [ -1, 1 ]) {
+        let lastColorHSL = { ...mainColorHSL }
+
         for (let i = 1; i <= 9; i++) {
           const suffix = 500 + (50 * i * j)
           const key = `--${prefix}-${suffix}`
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index c1526ee15..cde2e110a 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -5,10 +5,11 @@
 
 .root {
   --co-logo-size: 34px;
+  --co-root-padding: 1.5rem;
 
   background-color: pvar(--bg);
 
-  padding: 1.5rem;
+  padding: var(--co-root-padding);
   width: 100%;
 
   display: flex;
@@ -34,6 +35,7 @@
   width: 100%;
 
   @include ellipsis;
+  @include margin-left(10px);
 }
 
 .icon-logo {
@@ -45,8 +47,6 @@
 
   background-repeat: no-repeat;
   background-size: contain;
-
-  @include margin-right(10px);
 }
 
 my-search-typeahead {
@@ -135,15 +135,15 @@ my-actor-avatar {
 
 @media screen and (max-width: $small-view) {
   .root {
-    padding: 1rem;
+    --co-root-padding: 1rem;
   }
 
   my-search-typeahead {
     @include margin-right(0.5rem);
   }
 
-  .margin-button.tertiary-button {
-    @include margin-right(0);
+  .margin-button[theme=tertiary] {
+    @include margin-right(5px);
   }
 
   my-actor-avatar {
@@ -177,8 +177,8 @@ my-actor-avatar {
   .root {
     --co-logo-size: 48px;
 
-    padding: 1rem;
     display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
     row-gap: 0.5rem;
     justify-content: space-between;
 
@@ -196,11 +196,15 @@ my-actor-avatar {
   my-search-typeahead {
     grid-row: 2 !important;
     grid-column: 1 / 4;
-    max-width: none;
+    max-width: 100%;
 
     @include margin-right(0);
   }
 
+  .peertube-title {
+    @include margin-right(5px)
+  }
+
   .instance-name {
     display: none;
   }
diff --git a/client/src/app/header/notification-dropdown.component.html b/client/src/app/header/notification-dropdown.component.html
index 166343a94..50b6cbb25 100644
--- a/client/src/app/header/notification-dropdown.component.html
+++ b/client/src/app/header/notification-dropdown.component.html
@@ -69,10 +69,11 @@
           [markAllAsReadSubject]="markAllAsReadSubject" (notificationsLoaded)="onNotificationLoaded()"
         ></my-user-notifications>
 
-        <a *ngIf="loaded" class="all-notifications" routerLink="/my-account/notifications" #notifications (click)="onNavigate(notifications)">
-          <my-global-icon class="me-1" iconName="bell" aria-hidden="true"></my-global-icon>
-          <span i18n>See all your notifications</span>
-        </a>
+        <div class="all-notifications">
+          <a *ngIf="loaded" class="text-decoration-underline" routerLink="/my-account/notifications" #notifications (click)="onNavigate(notifications)" i18n>
+            View all
+          </a>
+        </div>
       </div>
     </div>
 
diff --git a/client/src/app/header/notification-dropdown.component.scss b/client/src/app/header/notification-dropdown.component.scss
index d72530671..2d79bf1a0 100644
--- a/client/src/app/header/notification-dropdown.component.scss
+++ b/client/src/app/header/notification-dropdown.component.scss
@@ -50,7 +50,7 @@
         display: flex;
         justify-content: space-between;
 
-        border-bottom: 1px solid $separator-border-color;
+        border-bottom: 1px solid $separator-border-color-on-secondary;
         align-items: center;
         padding: 0 12px;
         font-size: 14px;
@@ -61,17 +61,10 @@
       }
 
       .all-notifications {
-        border-top: 1px solid pvar(--bg-secondary-300);
+        border-top: 1px solid $separator-border-color-on-secondary;
         margin-top: -1px; // To not have 2 borders with the last notification
         text-align: center;
-        font-weight: $font-semibold;
-        color: pvar(--fg);
         padding: 0.75rem 0;
-        text-decoration: underline !important;
-
-        &:hover {
-          opacity: 0.85;
-        }
       }
     }
   }
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html
index 7579e7330..b9fe8c4b5 100644
--- a/client/src/app/header/search-typeahead.component.html
+++ b/client/src/app/header/search-typeahead.component.html
@@ -28,7 +28,7 @@
     <!-- suggestion help, not shown until one of the suggestions is selected and specific to that suggestion -->
     <div *ngIf="showSearchGlobalHelp()" id="typeahead-suggestion-help" class="overflow-hidden">
       <div class="d-flex justify-content-between">
-        <div class="small-title mb-2" i18n>GLOBAL SEARCH</div>
+        <div class="section-label mb-2" i18n>GLOBAL SEARCH</div>
 
         <span *ngIf="serverConfig" class="muted" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
       </div>
@@ -39,7 +39,7 @@
     <!-- search instructions, when search input is empty -->
     <div [hidden]="this.search" id="typeahead-input-help" class="overflow-hidden">
       <span class="muted" i18n>Your query will be matched against video names or descriptions, channel names.</span>
-      <div class="mt-3 mb-2 small-title" i18n>ADVANCED SEARCH</div>
+      <div class="mt-3 mb-2 section-label" i18n>ADVANCED SEARCH</div>
 
       <ul>
         <li>
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index 64a8b8612..7c2fdc345 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -116,10 +116,6 @@
   }
 }
 
-.small-title {
-  @include in-content-small-title;
-}
-
 my-suggestion {
   width: 100%;
 }
diff --git a/client/src/app/menu/quick-settings-modal.component.html b/client/src/app/menu/quick-settings-modal.component.html
index 3ae275b28..a9fe150ad 100644
--- a/client/src/app/menu/quick-settings-modal.component.html
+++ b/client/src/app/menu/quick-settings-modal.component.html
@@ -9,7 +9,7 @@
   <div class="modal-body">
     <my-alert i18n type="primary">These settings apply only to your session on this instance.</my-alert>
 
-    <h5 i18n class="mt-4 mb-2">Videos</h5>
+    <h5 i18n class="section-label mt-4 mb-2">VIDEOS</h5>
 
     <my-user-video-settings
       *ngIf="!isUserLoggedIn()"
@@ -17,7 +17,7 @@
     >
     </my-user-video-settings>
 
-    <h5 i18n class="mt-4 mb-2">Interface</h5>
+    <h5 i18n class="section-label mt-4 mb-2">INTERFACE</h5>
 
     <my-user-interface-settings
       *ngIf="!isUserLoggedIn()"
diff --git a/client/src/app/modal/admin-welcome-modal.component.html b/client/src/app/modal/admin-welcome-modal.component.html
index 01b8af7e6..784a51f4d 100644
--- a/client/src/app/modal/admin-welcome-modal.component.html
+++ b/client/src/app/modal/admin-welcome-modal.component.html
@@ -11,19 +11,19 @@
     <div class="block-documentation">
       <div class="columns">
         <a class="link-block" href="https://docs.joinpeertube.org/maintain/tools" target="_blank" i18n-title title="Go to the CLI documentation">
-          <h5 i18n class="underline-orange">CLI documentation</h5>
+          <h5 i18n class="link-primary">CLI documentation</h5>
 
           <div i18n>Upload or import videos, parse logs, prune storage directories, reset user password...</div>
         </a>
 
         <a class="link-block" href="https://docs.joinpeertube.org/admin/following-instances" target="_blank" i18n-title title="Go to the admin documentation">
-          <h5 i18n class="underline-orange">Admin documentation</h5>
+          <h5 i18n class="link-primary">Admin documentation</h5>
 
           <div i18n>Managing users, following other instances, dealing with spammers...</div>
         </a>
 
         <a class="link-block" href="https://docs.joinpeertube.org/use/setup-account" target="_blank" i18n-title title="Go to the user documentation">
-          <h5 i18n class="underline-orange">User documentation</h5>
+          <h5 i18n class="link-primary">User documentation</h5>
 
           <div i18n>Setup your account, managing video playlists, discover third-party applications...</div>
         </a>
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 5a4e60fe7..a53cbd027 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
@@ -11,9 +11,7 @@
           class="chip me-1"
         >
           <my-actor-avatar size="18" [actor]="abuse.reporterAccount" actorType="account"></my-actor-avatar>
-          <div>
-            <span class="muted">{{ abuse.reporterAccount.nameWithHost }}</span>
-          </div>
+          <span class="muted">{{ abuse.reporterAccount.nameWithHost }}</span>
         </a>
 
         <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
@@ -32,9 +30,7 @@
           class="chip me-1"
         >
           <my-actor-avatar size="18" [actor]="abuse.flaggedAccount" actorType="account"></my-actor-avatar>
-          <div>
-            <span class="muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
-          </div>
+          <span class="muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
         </a>
 
         <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
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 bd43ed459..7be5b561c 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
@@ -3,7 +3,7 @@
 @use '_miniature' as *;
 
 .comment-html {
-  background-color: #ececec;
+  background-color: pvar(--bg-secondary-400);
   padding: 10px;
 }
 
@@ -17,5 +17,5 @@
 }
 
 my-global-icon[iconName=flag] {
-  width: 15px;
+  @include global-icon-size(15px);
 }
diff --git a/client/src/app/shared/shared-forms/input-switch.component.scss b/client/src/app/shared/shared-forms/input-switch.component.scss
index f1c86144e..946fa64e7 100644
--- a/client/src/app/shared/shared-forms/input-switch.component.scss
+++ b/client/src/app/shared/shared-forms/input-switch.component.scss
@@ -12,7 +12,7 @@ input {
     text-indent: -9999px;
     width: 35px;
     height: 20px;
-    background: #cccccc;
+    background: pvar(--input-bg);
     display: block;
     border-radius: 100px;
     position: relative;
@@ -25,7 +25,7 @@ input {
       left: 3px;
       width: 14px;
       height: 14px;
-      background: pvar(--on-primary);
+      background: pvar(--fg-300);
       border-radius: 50%;
       transition: 0.3s ease-out;
     }
@@ -41,6 +41,7 @@ input {
     &::after {
       left: calc(100% - 3px);
       transform: translateX(-100%);
+      background: pvar(--on-primary);
     }
   }
 
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.html b/client/src/app/shared/shared-forms/timestamp-input.component.html
index 9080b2d66..b097377a9 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.html
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.html
@@ -1,5 +1,5 @@
 <p-inputMask
   [disabled]="disabled" [(ngModel)]="timestampString" (onBlur)="onBlur()"
-  [ngClass]="{ 'border-disabled': disableBorder }"
+  [ngClass]="{ 'with-border': enableBorder }"
   [mask]="mask" slotChar="0" (ngModelChange)="onModelChange()" [inputId]="inputName"
 ></p-inputMask>
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 12b80122c..23f634a13 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -3,10 +3,16 @@
 @use '_form-mixins' as *;
 
 p-inputmask {
+  &.with-border {
+    --input-border-color: #{pvar(--bg-secondary-500)};
+  }
+
   ::ng-deep input {
     width: 100%;
     text-align: center;
 
+    @include peertube-input-text(100%);
+
     &:focus-within,
     &:focus {
       box-shadow: $focus-box-shadow-form;
@@ -17,16 +23,4 @@ p-inputmask {
       opacity: 0.5;
     }
   }
-
-  &.border-disabled {
-    ::ng-deep input {
-      border: 0;
-    }
-  }
-
-  &:not(.border-disabled) {
-    ::ng-deep input {
-      @include peertube-input-text(100%);
-    }
-  }
 }
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.ts b/client/src/app/shared/shared-forms/timestamp-input.component.ts
index 394163dec..e77128dd5 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.ts
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.ts
@@ -23,7 +23,7 @@ export class TimestampInputComponent implements ControlValueAccessor, OnInit {
   @Input() timestamp: number
 
   @Input({ transform: booleanAttribute }) disabled = false
-  @Input({ transform: booleanAttribute }) disableBorder = true
+  @Input({ transform: booleanAttribute }) enableBorder = false
 
   @Input() inputName: string
   @Input() mask = '99:99:99'
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 2bc2d52bd..c11a9eb2a 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
@@ -15,8 +15,7 @@
 }
 
 my-global-icon {
-  line-height: 24px;
-
+  @include global-icon-size(24px);
   @include margin-right(15px);
 }
 
diff --git a/client/src/app/shared/shared-main/menu/horizontal-menu.component.html b/client/src/app/shared/shared-main/menu/horizontal-menu.component.html
index 6fcd1396f..6df31a064 100644
--- a/client/src/app/shared/shared-main/menu/horizontal-menu.component.html
+++ b/client/src/app/shared/shared-main/menu/horizontal-menu.component.html
@@ -3,7 +3,6 @@
     <my-global-icon *ngIf="h1Icon" [iconName]="h1Icon"></my-global-icon>
 
     {{ h1 }}
-
   </h1>
 
   <ng-template #entryTemplate let-item="item">
diff --git a/client/src/app/shared/shared-main/users/signup-label.component.html b/client/src/app/shared/shared-main/users/signup-label.component.html
index 35d6c5360..3311dd602 100644
--- a/client/src/app/shared/shared-main/users/signup-label.component.html
+++ b/client/src/app/shared/shared-main/users/signup-label.component.html
@@ -1,2 +1,13 @@
-<ng-container i18n *ngIf="requiresApproval">Request an account</ng-container>
-<ng-container i18n *ngIf="!requiresApproval">Create an account</ng-container>
+@if (withInstanceName) {
+  @if (requiresApproval) {
+    <ng-container i18n>Request an account on {{ instanceName }}</ng-container>
+  } @else {
+    <ng-container i18n>Create an account on {{ instanceName }}</ng-container>
+  }
+} @else {
+  @if (requiresApproval) {
+    <ng-container i18n>Request an account</ng-container>
+  } @else {
+    <ng-container i18n>Create an account</ng-container>
+  }
+}
diff --git a/client/src/app/shared/shared-main/users/signup-label.component.ts b/client/src/app/shared/shared-main/users/signup-label.component.ts
index c194c78dd..4210f3ac5 100644
--- a/client/src/app/shared/shared-main/users/signup-label.component.ts
+++ b/client/src/app/shared/shared-main/users/signup-label.component.ts
@@ -1,5 +1,6 @@
-import { Component, Input } from '@angular/core'
+import { booleanAttribute, Component, Input } from '@angular/core'
 import { NgIf } from '@angular/common'
+import { ServerService } from '@app/core'
 
 @Component({
   selector: 'my-signup-label',
@@ -8,5 +9,13 @@ import { NgIf } from '@angular/common'
   imports: [ NgIf ]
 })
 export class SignupLabelComponent {
-  @Input() requiresApproval: boolean
+  @Input({ transform: booleanAttribute }) requiresApproval: boolean
+  @Input({ transform: booleanAttribute }) withInstanceName = false
+
+  constructor (private server: ServerService) {
+  }
+
+  get instanceName () {
+    return this.server.getHTMLConfig().instance.name
+  }
 }
diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss
index 2150c85dd..11957a628 100644
--- a/client/src/app/shared/shared-moderation/moderation.scss
+++ b/client/src/app/shared/shared-moderation/moderation.scss
@@ -48,6 +48,7 @@ my-action-dropdown.show {
 
 .table-comment-link,
 .table-account-link {
+  text-decoration: none;
   color: pvar(--fg);
 
   @include disable-outline;
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 dd6cae368..2c7f041f3 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
@@ -1,33 +1,34 @@
 <div class="root" [formGroup]="form">
 
-  <div class="scope-row" *ngIf="totalFollowing && !hideScope">
-    @if (filters.scope === 'local') {
-      <ng-container i18n>Videos on {{ instanceName }}</ng-container>
-    } @else {
-      <ng-container i18n>Videos on {{ instanceName }} and {{ totalFollowing }} other platforms</ng-container>
+  <div class="d-flex flex-wrap mb-3">
+    @for (quickFilter of quickFilters; track quickFilter) {
+      <my-button
+        theme="secondary" [icon]="quickFilter.iconName" class="me-2 mb-2"
+        ptRouterLink="." [ptQueryParams]="quickFilter.filters" [active]="quickFilter.isActive()" ptQueryParamsHandling="merge"
+        (click)="onQuickFilter($event, quickFilter)"
+        >{{ quickFilter.label }} </my-button>
     }
   </div>
 
-
-  <div class="filters-row">
-    <div class="d-flex flex-wrap">
-      <div class="d-flex flex-wrap me-2">
-        @for (quickFilter of quickFilters; track quickFilter) {
-          <my-button
-            theme="secondary" [icon]="quickFilter.iconName" class="me-2 mb-2"
-            ptRouterLink="." [ptQueryParams]="quickFilter.filters" [active]="quickFilter.isActive()" ptQueryParamsHandling="merge"
-            (click)="onQuickFilter($event, quickFilter)"
-            >{{ quickFilter.label }} </my-button>
+  <div class="d-flex flex-wrap-reverse align-items-start justify-content-between">
+    <div class="me-3">
+      <div class="scope-info" *ngIf="totalFollowing && !hideScope">
+        @if (filters.scope === 'local') {
+          <ng-container i18n>Videos on <strong>{{ instanceName }}</strong></ng-container>
+        } @else {
+          <ng-container i18n>Videos on <strong>{{ instanceName }}</strong> and <strong>{{ totalFollowing }}</strong> other platforms</ng-container>
         }
       </div>
 
       <div class="filters-summary d-inline-block">
         <div class="d-inline-block active-filters">
           @for (filter of filters.getActiveFilters(); track filter.key + (filter.value || '')) {
-            <div class="d-inline-block">
-              <span i18n *ngIf="filter.value">{{ filter.label }}: </span>
-              <strong>{{ getFilterValue(filter) || filter.label }}</strong>
-            </div>
+            @if (filter.key !== 'scope') {
+              <div class="d-inline-block">
+                <span i18n *ngIf="filter.value">{{ filter.label }}: </span>
+                <strong>{{ getFilterValue(filter) || filter.label }}</strong>
+              </div>
+            }
           }
         </div>
 
@@ -47,7 +48,7 @@
       </div>
     </div>
 
-    <div class="d-flex flex-wrap align-items-center ms-3" >
+    <div class="d-flex flex-wrap align-items-center mb-2">
       <label for="sort-videos" i18n class="select-label">Sort by:</label>
 
       <my-select-options inputId="sort-videos" class="d-inline-block me-2" formControlName="sort" [items]="sortItems"></my-select-options>
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 d8e83b0bf..311053ca6 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
@@ -7,19 +7,15 @@ $filters-background: pvar(--bg-secondary-400);
   --input-bg: #{pvar(--input-bg-in-secondary)};
   --input-border-color: #{pvar(--input-bg-in-secondary)};
 
-  margin-bottom: 45px;
+  margin-bottom: 1rem;
+
+  // Prevent layout shift
+  min-height: 140px;
 }
 
-.scope-row {
+.scope-info {
   font-size: 20px;
   color: pvar(--fg-350);
-  margin-bottom: 0.5rem;
-}
-
-.filters-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
 }
 
 .select-label {
@@ -92,6 +88,8 @@ $filters-background: pvar(--bg-secondary-400);
   @include margin-left(0.25rem);
 
   my-global-icon {
+    color: pvar(--secondary-icon-color);
+
     @include margin-left(5px);
   }
 
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts b/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts
index c7ab1e0b1..4c92f027e 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts
@@ -1,24 +1,23 @@
 import { NgClass, NgIf } from '@angular/common'
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { ActivatedRoute, Params, RouterLink } from '@angular/router'
+import { RouterLink } from '@angular/router'
 import { AuthService, RedirectService } from '@app/core'
 import { ServerService } from '@app/core/server/server.service'
 import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap'
 import { UserRight, VideoConstant } from '@peertube/peertube-models'
+import { AttributesOnly } from '@peertube/peertube-typescript-utils'
 import debug from 'debug'
-import { Subscription } from 'rxjs'
 import { SelectOptionsItem } from 'src/types'
 import { PeertubeCheckboxComponent } from '../shared-forms/peertube-checkbox.component'
 import { SelectCategoriesComponent } from '../shared-forms/select/select-categories.component'
 import { SelectLanguagesComponent } from '../shared-forms/select/select-languages.component'
 import { SelectOptionsComponent } from '../shared-forms/select/select-options.component'
 import { GlobalIconComponent, GlobalIconName } from '../shared-icons/global-icon.component'
+import { InstanceFollowService } from '../shared-instance/instance-follow.service'
 import { ButtonComponent } from '../shared-main/buttons/button.component'
 import { PeertubeModalService } from '../shared-main/peertube-modal/peertube-modal.service'
 import { VideoFilterActive, VideoFilters } from './video-filters.model'
-import { InstanceFollowService } from '../shared-instance/instance-follow.service'
-import { AttributesOnly } from '@peertube/peertube-typescript-utils'
 
 const debugLogger = debug('peertube:videos:VideoFiltersHeaderComponent')
 
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 47924d637..b9cd33ba3 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
@@ -204,8 +204,8 @@ $more-button-width: 40px;
     margin-bottom: 0.5rem;
   }
 
-  my-actor-avatar + .owner-label {
-    @include margin-left(0.5rem);
+  my-actor-avatar {
+    @include margin-right(0.5rem);
   }
 
   .video-actions {
@@ -232,5 +232,13 @@ $more-button-width: 40px;
   .video-miniature.display-as-row {
     --co-row-thumbnail-width: #{$video-thumbnail-small-width};
     --co-row-thumbnail-height: #{$video-thumbnail-small-height};
+
+    --co-fs-small: 0.875rem;
+    --co-fs-medium: 0.875rem;
+    --co-fs-big: 1rem;
+
+    my-actor-avatar {
+      display: none;
+    }
   }
 }
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 9a87db926..6607a31de 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
@@ -98,7 +98,7 @@
   display: flex;
 
   .miniature-name {
-    font-size: $video-miniature-row-name-font-size;
+    font-size: $miniature-fs-row-big;
   }
 
   .miniature-thumbnail {
@@ -121,5 +121,9 @@
   .miniature.display-as-row {
     --co-row-thumbnail-width: #{$video-thumbnail-small-width};
     --co-row-thumbnail-height: #{$video-thumbnail-small-height};
+
+    .miniature-name {
+      font-size: $miniature-fs-mobile-big;
+    }
   }
 }
diff --git a/client/src/app/shared/standalone-notifications/user-notifications.component.scss b/client/src/app/shared/standalone-notifications/user-notifications.component.scss
index 89f847ba4..18f65878f 100644
--- a/client/src/app/shared/standalone-notifications/user-notifications.component.scss
+++ b/client/src/app/shared/standalone-notifications/user-notifications.component.scss
@@ -13,16 +13,21 @@
   align-items: center;
   font-size: inherit;
   padding: 15px 5px 15px 10px;
-  border-bottom: 1px solid $separator-border-color;
+  border-bottom: 1px solid $separator-border-color-on-secondary;
   word-break: break-word;
 
   &.unread {
     background-color: pvar(--bg-secondary-400);
+    cursor: pointer;
+  }
+
+  &:hover {
+    background-color: pvar(--bg-secondary-350);
   }
 
   my-global-icon {
     width: 24px;
-    color: pvar(--fg);
+    color: pvar(--secondary-icon-color);
 
     @include margin-right(11px);
     @include margin-left(3px);
@@ -43,6 +48,7 @@
 
     a {
       font-weight: $font-semibold;
+      text-decoration: underline;
     }
   }
 
diff --git a/client/src/assets/images/misc/markdown.svg b/client/src/assets/images/misc/markdown.svg
index 0e2831320..afd6cc30d 100644
--- a/client/src/assets/images/misc/markdown.svg
+++ b/client/src/assets/images/misc/markdown.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="24" viewBox="0 0 208 128"><rect width="198" height="118" x="5" y="5" ry="10" stroke="#C6C6C6" stroke-width="10" fill="none"/><path d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="24" viewBox="0 0 208 128"><rect width="198" height="118" x="5" y="5" ry="10" stroke="currentColor" stroke-width="10" fill="none"/><path fill="currentColor" d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/></svg>
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 859038dc4..402e841e2 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -51,6 +51,9 @@ body {
   --input-border-color: var(--inputBorderColor, #{pvar(--input-bg)});
   --input-bg-in-secondary: #{pvar(--bg-secondary-450)};
 
+  --input-check-active-fg: #{pvar(--on-primary)};
+  --input-check-active-bg: #{pvar(--primary)};
+
   --input-y-padding: 5px;
   --input-x-padding: 20px;
 
@@ -78,6 +81,10 @@ body {
 
   --header-height: #{$header-height};
 
+  @media screen and (max-width: $small-view) {
+    --header-height: #{$header-height-small-view};
+  }
+
   @media screen and (max-width: $mobile-view) {
     --header-height: #{$header-height-mobile-view};
   }
@@ -102,6 +109,9 @@ body {
     --secondary-icon-color: hsl(0, 9%, 51%);
     --input-placeholder: hsl(0, 9%, 51%);
 
+    --input-check-active-fg: #{pvar(--bg)};
+    --input-check-active-bg: #{pvar(--fg-250)};
+
     --alert-primary-fg: #{pvar(--on-primary)};
     --alert-primary-bg: #{pvar(--primary-200)};
     --alert-primary-border-color: #{pvar(--primary-300)};
@@ -204,6 +214,14 @@ code {
   vertical-align: middle;
 }
 
+a {
+  color: inherit;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
 .main-col {
   // Don't use rfs to get exact pixels
   margin-inline-start: $menu-width;
@@ -256,16 +274,6 @@ my-global-icon[iconName=external-link] {
   top: -0.1em;
 }
 
-@media screen and (max-width: #{breakpoint(xl)}) {
-  /* the following applies from 500px to 900px and is partially overridden from 500px to 800px by changes below to $small-view */
-  .main-col,
-  .main-col.expanded {
-    .title-page {
-      font-size: 17px;
-    }
-  }
-}
-
 @media screen and (max-width: $menu-overlay-view) {
   .menu-open {
     overflow: hidden !important;
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 5776c2f7a..cac77a5e7 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -218,6 +218,14 @@ body {
 // Nav
 // ---------------------------------------------------------------------------
 
+.nav:not(.nav-pills) {
+  --bs-nav-link-padding-x: 0;
+
+  .nav-link {
+    @include margin-right(2rem);
+  }
+}
+
 .nav .nav-link {
   display: flex !important;
   align-items: center;
@@ -281,11 +289,15 @@ body {
 .accordion-button {
   font-size: 18px;
 
+  my-global-icon {
+    color: pvar(--secondary-icon-color);
+  }
+
   &:not(.collapsed) {
     font-weight: $font-bold;
 
     my-global-icon {
-      color: pvar(--primary-400);
+      color: pvar(--fg);
     }
   }
 }
diff --git a/client/src/sass/class-helpers/_common.scss b/client/src/sass/class-helpers/_common.scss
index f8ff89b51..f5a91a5b0 100644
--- a/client/src/sass/class-helpers/_common.scss
+++ b/client/src/sass/class-helpers/_common.scss
@@ -49,7 +49,7 @@
 
 .callout {
   padding: 1.25rem;
-  border: 1px solid #eee;
+  border: 1px solid pvar(--bg-secondary-400);
   border-radius: 0.25rem;
   position: relative;
 
@@ -57,7 +57,7 @@
     position: relative;
     top: -5px;
     left: -10px;
-    color: #6c757d !important;
+    color: pvar(--fg-400) !important;
     font-size: 1rem;
     font-weight: $font-bold;
     margin-bottom: 0.5rem;
@@ -69,7 +69,7 @@
   }
 
   &.callout-primary {
-    border-color: pvar(--primary-100);
+    border-color: pvar(--primary-350);
 
     &:not(.callout-light) {
       border-left-color: pvar(--primary);
@@ -96,6 +96,10 @@
       color: pvar(--alert-primary-fg) !important;
     }
 
+    .link-primary {
+      color: inherit !important;
+    }
+
     .secondary-button {
       @include secondary-button(
         $fg: pvar(--alert-primary-fg),
diff --git a/client/src/sass/class-helpers/_menu.scss b/client/src/sass/class-helpers/_menu.scss
index d8c327e47..440370121 100644
--- a/client/src/sass/class-helpers/_menu.scss
+++ b/client/src/sass/class-helpers/_menu.scss
@@ -38,36 +38,15 @@
   }
 }
 
-.title-page-v2 {
-  font-weight: normal;
-  font-size: 15px;
-  padding: 35px 25px;
-}
-
 .title-page {
-  margin-top: 30px;
-  margin-bottom: 25px;
+  margin-bottom: 1.5rem;
+  color: pvar(--fg-400);
 
-  color: pvar(--fg);
-  display: inline-block;
-  font-weight: $font-semibold;
-  font-size: 1.25rem;
+  @include font-size(2rem);
 
-  @include margin-right(55px);
-
-  a {
-    color: inherit;
-
-    @include disable-default-a-behaviour;
-
-    &:hover {
-      color: inherit;
-      opacity: 0.8;
-    }
-  }
-
-  @media screen and (max-width: $mobile-view) {
-    @include margin-left(15px);
+  my-global-icon {
+    @include global-icon-size(28px);
+    @include margin-right(0.5rem);
   }
 }
 
diff --git a/client/src/sass/class-helpers/_text.scss b/client/src/sass/class-helpers/_text.scss
index 300403d84..7a7b537df 100644
--- a/client/src/sass/class-helpers/_text.scss
+++ b/client/src/sass/class-helpers/_text.scss
@@ -70,13 +70,13 @@
   font-weight: $font-semibold;
   line-height: 1.1;
 
-  @include underline-orange;
+  @include underline-primary;
 
   &:hover {
     color: pvar(--fg);
     opacity: 0.8;
 
-    @include underline-orange;
+    @include underline-primary;
   }
 }
 
@@ -92,10 +92,6 @@
   }
 }
 
-.underline-orange {
-  @include underline-orange;
-}
-
 .section-label {
   @include section-label;
 }
diff --git a/client/src/sass/include/_badges.scss b/client/src/sass/include/_badges.scss
index 971a9a490..36b537be3 100644
--- a/client/src/sass/include/_badges.scss
+++ b/client/src/sass/include/_badges.scss
@@ -9,6 +9,8 @@
   font-weight: $font-semibold;
   line-height: 1.1;
   max-width: 100%;
+  white-space: normal;
+  word-break: normal;
 
   &.badge-fs-normal {
     font-size: 100%;
diff --git a/client/src/sass/include/_form-mixins.scss b/client/src/sass/include/_form-mixins.scss
index 35275355e..440d461e0 100644
--- a/client/src/sass/include/_form-mixins.scss
+++ b/client/src/sass/include/_form-mixins.scss
@@ -86,7 +86,7 @@
 
       padding: pvar(--input-y-padding) calc(#{pvar(--input-x-padding)} + 23px) pvar(--input-y-padding) pvar(--input-x-padding);
       position: relative;
-      border: 0;
+      border: 0 !important;
       appearance: none;
       text-overflow: ellipsis;
 
@@ -148,9 +148,9 @@
     content: '';
     position: absolute;
     left: 0;
-    top: 0;
-    width: 18px;
-    height: 18px;
+    top: -1px;
+    width: 20px;
+    height: 20px;
     border: 2px solid pvar(--fg-300);
     border-radius: 100%;
   }
@@ -158,11 +158,11 @@
   [type=radio]:checked + label::after,
   [type=radio]:not(:checked) + label::after {
     content: '';
-    width: 8px;
-    height: 8px;
-    background: pvar(--primary);
+    width: 10px;
+    height: 10px;
+    background: pvar(--input-check-active-bg);
     position: absolute;
-    top: 5px;
+    top: 4px;
     left: 5px;
     border-radius: 100%;
     transition: all 0.2s ease;
@@ -212,29 +212,30 @@
     &::after {
       content: '';
       position: absolute;
-      top: 3px;
+      top: 4px;
       left: 6px;
       width: 5px;
-      height: 8px;
+      height: 7px;
       opacity: 0;
       transform: rotate(45deg) scale(0);
-      border-right: 2px solid pvar(--on-primary);
-      border-bottom: 2px solid pvar(--on-primary);
+      border-right: 2px solid pvar(--input-check-active-fg);
+      border-bottom: 2px solid pvar(--input-check-active-fg);
     }
   }
 
   &:checked + span {
-    background: pvar(--fg-400);
+    background: pvar(--input-check-active-bg);
     animation: jelly 0.6s ease;
 
     &::before {
       content: '';
       width: 100%;
       height: 100%;
-      background: pvar(--primary);
+      background: pvar(--input-check-active-bg);
       position: absolute;
+      left: 0;
       transition: all 0.2s ease;
-      border: 2px solid transparent;
+      border: 2px solid pvar(--input-check-active-fg);
       border-radius: 2px;
     }
 
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index b98310f69..0f54c1d97 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -3,7 +3,7 @@
 @use '_variables' as *;
 @import '_bootstrap-mixins';
 
-@mixin underline-orange {
+@mixin underline-primary {
   text-decoration: underline !important;
   text-decoration-color: pvar(--border-primary) !important;
   text-underline-offset: 0.25em !important;
@@ -135,15 +135,6 @@
   }
 }
 
-@mixin in-content-small-title {
-  text-transform: uppercase;
-  color: pvar(--fg);
-  font-weight: $font-bold;
-  font-size: 13px;
-
-  @include underline-orange();
-}
-
 @mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
   display: flex;
   min-height: $min-height;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 04f8fb4e1..b06039b7e 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -21,7 +21,8 @@ $white: #fff;
 $button-font-size: 1rem;
 
 $header-height: 94px;
-$header-height-mobile-view: 144px;
+$header-height-small-view: 74px;
+$header-height-mobile-view: 124px;
 
 $menu-width: 248px;
 $menu-collapsed-width: 50px;
@@ -37,11 +38,19 @@ $max-channels-width: 1200px;
 $footer-height: 30px;
 $footer-margin: 30px;
 
-$video-miniature-row-name-font-size: 1.3em;
-$video-miniature-row-mobile-name-font-size: 14px;
+// ---------------------------------------------------------------------------
 
-$video-miniature-row-info-font-size: 14px;
-$video-miniature-row-mobile-info-font-size: 12px;
+$miniature-fs-small: 0.75rem;
+$miniature-fs-medium: 0.875rem;
+$miniature-fs-big: 1rem;
+
+$miniature-fs-row-small: 0.875rem;
+$miniature-fs-row-medium: 1rem;
+$miniature-fs-row-big: 1.25rem;
+
+$miniature-fs-mobile-small: 0.875rem;
+$miniature-fs-mobile-medium: 0.875rem;
+$miniature-fs-mobile-big: 1rem;
 
 $video-thumbnail-height: 153px;
 $video-thumbnail-width: 280px;
@@ -87,9 +96,14 @@ $variables: (
 
   --input-fg: var(--input-fg),
   --input-bg: var(--input-bg),
+
   --input-placeholder: var(--input-placeholder),
   --input-border-color: var(--input-border-color),
   --input-bg-in-secondary: var(--input-bg-in-secondary),
+
+  --input-check-active-fg: var(--input-check-active-fg),
+  --input-check-active-bg: var(--input-check-active-bg),
+
   --input-x-padding: var(--input-x-padding),
   --input-y-padding: var(--input-y-padding),
 
@@ -201,4 +215,5 @@ $zindex: (
 // ---------------------------------------------------------------------------
 
 $separator-border-color: pvar(--bg-secondary-400);
+$separator-border-color-on-secondary: pvar(--bg-secondary-450);
 $focus-box-shadow-form: #{$focus-box-shadow-dimensions} #{pvar(--fg-100)};
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index a50393405..0f0cb2fb3 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -2,6 +2,8 @@
 @use '_mixins' as *;
 @use '_icons' as *;
 
+$hover-bg: pvar(--bg-secondary-350);
+
 /* stylelint-disable */
 @import 'primeng/resources/primeng.css';
 
@@ -71,7 +73,7 @@ body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
 body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
 body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
 body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
-  background-color: pvar(--bg-secondary-400);
+  background-color: $hover-bg;
   color: pvar(--fg);
 }
 body .p-paginator .p-paginator-first:focus,
@@ -128,7 +130,7 @@ body .p-paginator .p-paginator-pages .p-paginator-page {
   border-radius: 0;
 }
 body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
-  background-color: pvar(--bg-secondary-400);
+  background-color: $hover-bg;
   color: pvar(--fg);
 }
 body .p-paginator .p-paginator-pages .p-paginator-page:focus {
@@ -243,7 +245,7 @@ body .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
 }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
   color: pvar(--fg);
-  background: pvar(--bg-secondary-400);
+  background: $hover-bg;
 }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
   margin: 0;
@@ -565,7 +567,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon {
   background: pvar(--bg-secondary-500);
 }
 .p-multiselect.p-variant-filled:not(.p-disabled):hover {
-  background-color: pvar(--bg-secondary-400);
+  background-color: $hover-bg;
 }
 .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
   background-color: pvar(--bg-secondary-500);
@@ -816,7 +818,7 @@ p-table {
   .p-datatable-tbody {
     tr {
       &:hover {
-        background-color: pvar(--bg-secondary-400) !important;
+        background-color: $hover-bg !important;
       }
 
       td {
@@ -860,7 +862,7 @@ p-table {
     color: pvar(--fg) !important;
 
     &.p-sortable-column:hover {
-      background-color: pvar(--bg-secondary-400) !important;
+      background-color: $hover-bg !important;
     }
 
     &.p-sortable-column:focus-visible {
diff --git a/client/src/typings.d.ts b/client/src/typings.d.ts
index 0ad2ab5c7..9145ebc3f 100644
--- a/client/src/typings.d.ts
+++ b/client/src/typings.d.ts
@@ -7,6 +7,3 @@ interface NodeModule {
 }
 
 declare module 'markdown-it-emoji/lib/light.mjs'
-
-// FIXME: remove color-bits upgrade (with https://github.com/romgrk/color-bits/commit/ea01b950ab89e5ea7a85471642b95dd1fbffb68d included)
-declare module 'color-bits'
diff --git a/client/yarn.lock b/client/yarn.lock
index 4504b1dea..b4577d709 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -4444,10 +4444,10 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
-color-bits@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/color-bits/-/color-bits-1.0.3.tgz#bd1c52eebffb4cd1e0c906161a76b7377a98dd8c"
-  integrity sha512-CkCco0HfT8kWR317vK8r5hzIRcKbiM+kdhlZ/RbmEmoj5vINgzoCZ29S5cY6BMQZC49b+p2elgNj/xbdF9FOdg==
+color-bits@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/color-bits/-/color-bits-1.0.4.tgz#9ed0acc9bc67509493a713f60f356783f189adbf"
+  integrity sha512-gcNCga5BpVlzW+ZqO+U1/4thYuJ13DsQSBzrnhBcEUUe30eF54STR/kqnPn2I18jLp0lfXDw8KJT228DTyLKXA==
 
 color-convert@^1.9.0:
   version "1.9.3"