From 45d7858cee2cee98c28dc7f84942a7ee1bc2108a Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 14 Nov 2024 13:07:13 +0100
Subject: [PATCH] Redesign buttons

---
 client/e2e/src/po/video-watch.po.ts           |   4 +-
 .../about-follows.component.html              |   4 +-
 .../about-instance.component.html             |   2 +-
 .../contact-admin-modal.component.html        |   4 +-
 .../account-video-channels.component.html     |   2 +-
 .../account-video-channels.component.scss     |   5 -
 .../src/app/+accounts/accounts.component.html |   2 +-
 .../edit-custom-config.component.html         |   1 +
 .../edit-custom-config.component.scss         |  14 --
 .../followers-list.component.html             |   2 +-
 .../follow-modal.component.html               |   4 +-
 .../following-list.component.html             |   2 +-
 .../process-registration-modal.component.html |   4 +-
 .../registration-list.component.html          |   4 +-
 .../video-block-list.component.html           |   2 +-
 .../users/user-edit/user-edit.component.html  |   2 +-
 .../users/user-list/user-list.component.html  |   4 +-
 .../overview/videos/video-list.component.html |   4 +-
 .../plugin-list-installed.component.html      |   6 +-
 .../plugin-search.component.html              |  30 ++--
 .../plugin-show-installed.component.html      |   4 +-
 .../plugin-show-installed.component.scss      |  14 --
 .../plugin-show-installed.component.ts        |   1 -
 .../plugins/shared/plugin-card.component.scss |   5 -
 .../runner-job-list.component.html            |   6 +-
 .../runner-list/runner-list.component.html    |   4 +-
 ...ner-registration-token-list.component.html |   6 +-
 .../app/+error-page/error-page.component.html |   2 +-
 client/src/app/+login/login.component.html    |   6 +-
 .../video-channel-edit.component.html         |   2 +-
 .../my-account-applications.component.html    |   2 +-
 .../my-account-export.component.html          |   8 +-
 .../my-account-import.component.scss          |   2 +-
 .../my-account-notifications.component.html   |   4 +-
 .../my-account-change-email.component.html    |   2 +-
 .../my-account-change-email.component.scss    |   5 -
 .../my-account-change-password.component.html |   2 +-
 .../my-account-change-password.component.scss |   7 -
 ...y-account-email-preferences.component.html |   2 +-
 .../my-account-profile.component.html         |   2 +-
 .../my-account-profile.component.scss         |   7 -
 ...y-account-two-factor-button.component.html |   4 +-
 .../my-account-two-factor.component.html      |   4 +-
 .../my-video-channels.component.html          |   2 +-
 .../my-history/my-history.component.html      |   5 +-
 .../my-history/my-history.component.scss      |   4 -
 .../my-history/my-history.component.ts        |   2 +
 .../my-accept-ownership.component.html        |   4 +-
 .../my-video-channel-syncs.component.html     |   4 +-
 .../video-channel-sync-edit.component.html    |   2 +-
 .../my-video-imports.component.html           |   2 +-
 .../my-video-playlist-edit.component.html     |   2 +-
 .../my-video-playlist-elements.component.html |   6 +-
 .../my-video-playlist-elements.component.scss |   8 -
 .../my-video-playlist-elements.component.ts   |  24 +--
 .../video-change-ownership.component.html     |   4 +-
 .../my-videos/my-videos.component.html        |   9 +-
 .../my-videos/my-videos.component.scss        |  13 +-
 .../my-videos/my-videos.component.ts          |   4 +-
 .../reset-password.component.html             |   2 +-
 .../app/+search/search-filters.component.html |   5 +-
 .../app/+search/search-filters.component.scss |   5 -
 .../+signup/+register/register.component.html |  16 +-
 .../+signup/+register/register.component.scss |  12 --
 .../+register/steps/step.component.scss       |   5 -
 ...rify-account-ask-send-email.component.html |   2 +-
 .../video-channels.component.html             |   8 +-
 .../video-channels.component.scss             |   8 -
 .../edit/video-studio-edit.component.html     |   2 +-
 .../video-caption-add-modal.component.html    |   4 +-
 ...-caption-edit-modal-content.component.html |   4 +-
 .../thumbnail-manager.component.html          |   6 +-
 .../shared/video-edit.component.scss          |   2 +-
 .../video-go-live.component.html              |   2 +-
 .../video-import-torrent.component.html       |   2 +-
 .../video-import-url.component.html           |   2 +-
 .../video-add-components/video-send.scss      |  10 +-
 .../video-upload.component.html               |   4 +-
 .../+video-edit/video-add.component.html      |   4 +-
 .../+video-edit/video-update.component.html   |   2 +-
 .../comment/video-comment-add.component.html  |   6 +-
 .../comment/video-comments.component.scss     |   4 +-
 .../privacy-concerns.component.html           |   2 +-
 client/src/app/header/header.component.html   |  12 +-
 .../notification-dropdown.component.scss      |   8 +-
 .../app/menu/language-chooser.component.html  |   2 +-
 .../app/menu/language-chooser.component.scss  |  12 --
 client/src/app/menu/menu.component.scss       |  49 +++---
 ...account-setup-warning-modal.component.html |   4 +-
 .../modal/admin-welcome-modal.component.html  |   4 +-
 client/src/app/modal/confirm.component.html   |   4 +-
 .../src/app/modal/custom-modal.component.html |   4 +-
 ...stance-config-warning-modal.component.html |   4 +-
 .../abuse-list-table.component.html           |   4 +-
 .../abuse-message-modal.component.html        |   2 +-
 .../moderation-comment-modal.component.html   |   4 +-
 .../actor-avatar-edit.component.scss          |   1 +
 .../actor-image-edit.scss                     |   2 +-
 .../button-markup.component.ts                |   4 +-
 .../shared-forms/reactive-file.component.ts   |   4 +-
 .../shared-icons/global-icon.component.scss   |   1 +
 .../buttons/action-dropdown.component.html    |  59 ++++----
 .../buttons/action-dropdown.component.scss    |  32 +---
 .../buttons/action-dropdown.component.ts      |   4 +-
 .../shared-main/buttons/button.component.scss |   4 -
 .../shared-main/buttons/button.component.ts   |   6 +-
 .../buttons/delete-button.component.ts        |   2 +-
 .../channels-setup-message.component.html     |   2 +-
 .../account-blocklist.component.html          |   2 +-
 .../batch-domains-modal.component.html        |   4 +-
 .../report-modals/report.component.html       |   4 +-
 .../report-modals/video-report.component.html |   4 +-
 .../server-blocklist.component.html           |   2 +-
 .../user-ban-modal.component.html             |   4 +-
 .../video-block.component.html                |   4 +-
 .../video-share.component.html                |   4 +-
 .../support-modal.component.html              |   2 +-
 .../user-interface-settings.component.html    |   2 +-
 .../user-interface-settings.component.scss    |   8 -
 .../user-video-settings.component.html        |   2 +-
 .../user-video-settings.component.scss        |   7 -
 .../remote-subscribe.component.html           |  18 ++-
 .../remote-subscribe.component.scss           |   6 -
 .../remote-subscribe.component.ts             |   1 -
 .../subscribe-button.component.ts             |   4 +-
 ...eo-comment-list-admin-owner.component.html |   6 +-
 .../live-stream-information.component.html    |   2 +-
 .../subtitle-files-download.component.html    |   2 +-
 .../download/video-download.component.html    |   2 +-
 .../video-files-download.component.html       |   2 +-
 .../video-generate-download.component.html    |   2 +-
 .../videos-selection.component.html           |   2 +-
 .../videos-selection.component.scss           |   5 -
 .../video-add-to-playlist.component.html      |   2 +-
 .../video-add-to-playlist.component.scss      |   5 -
 ...-playlist-element-miniature.component.html |   2 +-
 ...-playlist-element-miniature.component.scss |   7 -
 .../upload-progress.component.html            |   6 +-
 ...ched-words-list-admin-owner.component.html |   2 +-
 ...tched-words-list-save-modal.component.html |   4 +-
 client/src/assets/images/feather/delete.svg   |   2 +-
 client/src/assets/images/feather/edit-2.svg   |   2 +-
 .../src/assets/images/feather/refresh-cw.svg  |   2 +-
 client/src/sass/bootstrap.scss                |   4 +-
 client/src/sass/class-helpers/_buttons.scss   |  18 +--
 client/src/sass/class-helpers/_forms.scss     |   2 +-
 client/src/sass/include/_mixins.scss          | 143 +++---------------
 client/src/sass/include/_variables.scss       |   3 +-
 148 files changed, 338 insertions(+), 618 deletions(-)
 delete mode 100644 client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
 delete mode 100644 client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss

diff --git a/client/e2e/src/po/video-watch.po.ts b/client/e2e/src/po/video-watch.po.ts
index 544930c6c..699a0b635 100644
--- a/client/e2e/src/po/video-watch.po.ts
+++ b/client/e2e/src/po/video-watch.po.ts
@@ -199,7 +199,7 @@ export class VideoWatchPage {
 
     await textarea.setValue(comment)
 
-    const confirmButton = await $('.comment-buttons .orange-button')
+    const confirmButton = await $('.comment-buttons .primary-button')
     await confirmButton.waitForClickable()
     await confirmButton.click()
 
@@ -218,7 +218,7 @@ export class VideoWatchPage {
     await textarea.waitForClickable()
     await textarea.setValue(comment)
 
-    const confirmButton = await $('my-video-comment .comment-buttons .orange-button')
+    const confirmButton = await $('my-video-comment .comment-buttons .primary-button')
     await confirmButton.waitForClickable()
     await confirmButton.click()
 
diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
index 34427452c..c4bda1944 100644
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -11,7 +11,7 @@
         {{ follower.name }}
       </a>
 
-      <button i18n class="peertube-button-link grey-button mt-1" *ngIf="!loadedAllFollowers && canLoadMoreFollowers()" (click)="loadAllFollowers()">Show full list</button>
+      <button i18n class="peertube-button-link secondary-button mt-1" *ngIf="!loadedAllFollowers && canLoadMoreFollowers()" (click)="loadAllFollowers()">Show full list</button>
     </div>
 
     <div class="col-xl-6 col-md-12">
@@ -23,7 +23,7 @@
         {{ following.name }}
       </a>
 
-      <button i18n class="peertube-button-link grey-button mt-1" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
+      <button i18n class="peertube-button-link secondary-button mt-1" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
     </div>
 
   </div>
diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index 876f29821..95d3ffc48 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -9,7 +9,7 @@
       <div class="d-flex justify-content-between">
         <h1 i18n class="fw-semibold fs-5">About {{ instanceName }}</h1>
 
-        <a routerLink="/about/contact" i18n *ngIf="isContactFormEnabled" class="peertube-button-link orange-button h-100 d-flex align-items-center">Contact us</a>
+        <a routerLink="/about/contact" i18n *ngIf="isContactFormEnabled" class="peertube-button-link primary-button h-100 d-flex align-items-center">Contact us</a>
       </div>
 
       <div class="mb-4" *ngIf="categories.length !== 0 || languages.length !== 0">
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html
index 0a2c30b30..8f414d168 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.html
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html
@@ -50,11 +50,11 @@
 
       <div class="form-group inputs">
         <input
-          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
           (click)="hide()" (key.enter)="hide()"
         >
 
-        <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid" />
+        <input type="submit" i18n-value value="Submit" class="peertube-button primary-button" [disabled]="!form.valid" />
       </div>
     </form>
 
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index e3b499773..698c82a4f 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -35,7 +35,7 @@
 
       <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
 
-      <a i18n class="button-show-channel peertube-button-link orange-button-inverted" [routerLink]="getVideoChannelLink(videoChannel)">Show this channel</a>
+      <a i18n class="button-show-channel peertube-button-link primary-button" [routerLink]="getVideoChannelLink(videoChannel)">Show this channel</a>
 
       <div class="videos-overflow-workaround">
         <div class="videos">
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 9a415a320..70b8d3a72 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -130,11 +130,6 @@ my-subscribe-button {
     }
   }
 
-  .show-channel a {
-    @include peertube-button-link;
-    @include orange-button-inverted;
-  }
-
   .videos {
     display: none;
   }
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index ac11705a5..2242b312d 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -56,7 +56,7 @@
     </button>
 
     <div class="buttons">
-      <a *ngIf="isManageable()" routerLink="/my-account" class="peertube-button-link orange-button" i18n>
+      <a *ngIf="isManageable()" routerLink="/my-account" class="peertube-button-link primary-button" i18n>
         Manage account
       </a>
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index f2e704ba2..294299e20 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -87,6 +87,7 @@
       </span>
 
       <input
+        class="peertube-button primary-button"
         (click)="formValidated()" type="submit" i18n-value value="Update configuration"
         [disabled]="!form.valid || !hasConsistentOptions() || !isUpdateAllowed()"
       >
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index dca44c85e..e71390190 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -65,8 +65,6 @@ my-select-custom-value {
 input[type=submit] {
   display: flex;
 
-  @include peertube-button;
-  @include orange-button;
   @include margin-left(auto);
 
   + .form-error {
@@ -131,18 +129,6 @@ ngb-tabset:not(.previews) ::ng-deep {
   height: 0;
   width: 100%;
   justify-content: right;
-
-  .callout-link {
-    position: relative;
-    right: 3.3em;
-    top: .3em;
-    font-size: 90%;
-    color: pvar(--mainColor);
-    background-color: pvar(--bg);
-    padding: 0 .3em;
-
-    @include peertube-button-link;
-  }
 }
 
 my-actor-banner-edit {
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index 8bb1871dd..d52c83643 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -16,7 +16,7 @@
     <div class="caption">
       <div class="left-buttons">
         <my-action-dropdown
-          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
+          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="primary"
           [actions]="bulkActions" [entry]="selectedRows"
         >
         </my-action-dropdown>
diff --git a/client/src/app/+admin/follows/following-list/follow-modal.component.html b/client/src/app/+admin/follows/following-list/follow-modal.component.html
index 43c89c3e3..dd306ab6c 100644
--- a/client/src/app/+admin/follows/following-list/follow-modal.component.html
+++ b/client/src/app/+admin/follows/following-list/follow-modal.component.html
@@ -32,11 +32,11 @@
 
       <div class="form-group inputs">
         <input
-          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
           (click)="hide()" (key.enter)="hide()"
         >
 
-        <input type="submit" i18n-value value="Follow" class="peertube-button orange-button" [disabled]="!form.valid" />
+        <input type="submit" i18n-value value="Follow" class="peertube-button primary-button" [disabled]="!form.valid" />
       </div>
     </form>
   </div>
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index ab13f6449..36631ab6a 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -16,7 +16,7 @@
     <div class="caption">
       <div class="left-buttons">
         <my-action-dropdown
-          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
+          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="primary"
           [actions]="bulkActions" [entry]="selectedRows"
         >
         </my-action-dropdown>
diff --git a/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.html b/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.html
index 17d18f980..5fac1bd79 100644
--- a/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.html
+++ b/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.html
@@ -66,11 +66,11 @@
 
     <div class="modal-footer inputs">
       <input
-        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
         (click)="hide()" (key.enter)="hide()"
       >
 
-      <input type="submit" [value]="getSubmitValue()" class="peertube-button orange-button" [disabled]="!form.valid">
+      <input type="submit" [value]="getSubmitValue()" class="peertube-button primary-button" [disabled]="!form.valid">
     </div>
   </form>
 </ng-template>
diff --git a/client/src/app/+admin/moderation/registration-list/registration-list.component.html b/client/src/app/+admin/moderation/registration-list/registration-list.component.html
index 7e7a823c3..b6135a618 100644
--- a/client/src/app/+admin/moderation/registration-list/registration-list.component.html
+++ b/client/src/app/+admin/moderation/registration-list/registration-list.component.html
@@ -16,7 +16,7 @@
     <div class="caption">
       <div class="left-buttons">
         <my-action-dropdown
-          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
+          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="primary"
           [actions]="bulkActions" [entry]="selectedRows"
         >
         </my-action-dropdown>
@@ -62,7 +62,7 @@
       <td class="action-cell">
         <my-action-dropdown
           [ngClass]="{ 'show': expanded }" placement="bottom-right top-right left auto" container="body"
-          i18n-label label="Actions" [actions]="registrationActions" [entry]="registration"
+          i18n-label label="Actions" [actions]="registrationActions" [entry]="registration" buttonSize="small"
         ></my-action-dropdown>
       </td>
 
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
index 9ac8edb7f..87a63a98a 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
@@ -48,7 +48,7 @@
       <td class="action-cell">
         <my-action-dropdown
           [ngClass]="{ 'show': expanded }" placement="bottom-right auto" container="body"
-          i18n-label label="Actions" [actions]="videoBlocklistActions" [entry]="videoBlock"
+          i18n-label label="Actions" [actions]="videoBlocklistActions" [entry]="videoBlock" buttonSize="small"
         ></my-action-dropdown>
       </td>
 
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
index dd307b267..bb9d4b282 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
@@ -207,7 +207,7 @@
           </my-peertube-checkbox>
         </div>
 
-        <input class="peertube-button orange-button" type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+        <input class="peertube-button primary-button" type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
       </form>
 
       <div class="d-none d-xxl-block col-7">
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.html b/client/src/app/+admin/overview/users/user-list/user-list.component.html
index 21ec15efe..5e17045dd 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.html
@@ -15,7 +15,7 @@
     <div class="caption">
       <div class="left-buttons">
         <my-action-dropdown
-          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
+          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="primary"
           [actions]="bulkActions" [entry]="selectedRows"
         >
         </my-action-dropdown>
@@ -97,7 +97,7 @@
       <td class="action-cell">
         <my-user-moderation-dropdown
           *ngIf="!isInSelectionMode()" [user]="user" [account]="user.accountMutedStatus" [displayOptions]="userModerationDisplayOptions"
-          container="body" (userChanged)="onUserChanged()" (userDeleted)="onUserChanged()">
+          container="body" (userChanged)="onUserChanged()" (userDeleted)="onUserChanged()" buttonSize="small">
         </my-user-moderation-dropdown>
       </td>
 
diff --git a/client/src/app/+admin/overview/videos/video-list.component.html b/client/src/app/+admin/overview/videos/video-list.component.html
index f82d5363b..c09d1a982 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.html
+++ b/client/src/app/+admin/overview/videos/video-list.component.html
@@ -16,7 +16,7 @@
     <div class="caption">
       <div class="left-buttons">
         <my-action-dropdown
-          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
+          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="primary"
           [actions]="bulkActions" [entry]="selectedRows"
         >
         </my-action-dropdown>
@@ -63,7 +63,7 @@
       <td class="action-cell">
         <my-video-actions-dropdown
           placement="bottom auto" buttonDirection="horizontal" buttonStyled="true" [video]="video" [displayOptions]="videoActionsOptions"
-          (videoRemoved)="reloadData()" (videoFilesRemoved)="reloadData()" (transcodingCreated)="reloadData()"
+          (videoRemoved)="reloadData()" (videoFilesRemoved)="reloadData()" (transcodingCreated)="reloadData()" buttonSize="small"
         ></my-video-actions-dropdown>
       </td>
 
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
index e80855a02..41d36a3d9 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
@@ -8,10 +8,10 @@
   <ng-container *ngFor="let plugin of plugins">
     <my-plugin-card [plugin]="plugin" [version]="plugin.version" [pluginType]="pluginType">
       <div ngProjectAs="buttons">
-        <my-edit-button
+        <my-button
           *ngIf="!isTheme(plugin)" [ptRouterLink]="getShowRouterLink(plugin)" label="Settings" i18n-label
-          [responsiveLabel]="true"
-        ></my-edit-button>
+          [responsiveLabel]="true" icon="config"
+        ></my-button>
 
         <my-button
           class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index 96aca5b5a..6339e55ad 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -5,19 +5,23 @@
 </my-alert>
 
 <div class="result-and-search">
-  <ng-container *ngIf="!search">
+  @if (!search) {
     <my-global-icon iconName="trending" aria-hidden="true"></my-global-icon>
-    <ng-container *ngIf="!isThemeSearch()" i18n>Popular plugins</ng-container>
-    <ng-container *ngIf="isThemeSearch()" i18n>Popular themes</ng-container>
-  </ng-container>
 
-  <ng-container *ngIf="search && !isSearching">
+    @if (isThemeSearch()) {
+      <ng-container i18n>Popular themes</ng-container>
+    } @else {
+      <ng-container i18n>Popular plugins</ng-container>
+    }
+  }
+
+  @if (search && !isSearching) {
     <my-global-icon iconName="search"></my-global-icon>
 
     <ng-container i18n>
       {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for "{{ search }}"
     </ng-container>
-  </ng-container>
+  }
 
   <div class="search-bar">
     <input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..." myAutofocus />
@@ -34,13 +38,15 @@
       <div ngProjectAs="badges">
         <span i18n *ngIf="plugin.installed" class="pt-badge badge-success">Installed</span>
 
-        <span *ngIf="plugin.official" class="pt-badge badge-primary" i18n i18n-title title="This plugin is developed by Framasoft, the not-for-profit that develops PeerTube">
-          Official
-        </span>
+        <span
+          *ngIf="plugin.official" class="pt-badge badge-primary"
+          i18n i18n-title title="This plugin is developed by Framasoft, the not-for-profit that develops PeerTube"
+        >Official</span>
 
-        <span *ngIf="plugin.recommended" class="pt-badge badge-primary" i18n i18n-title title="This plugin is recommended by Framasoft, the not-for-profit that develops PeerTube">
-          Recommended
-        </span>
+        <span
+          *ngIf="plugin.recommended" class="pt-badge badge-primary"
+          i18n i18n-title title="This plugin is recommended by Framasoft, the not-for-profit that develops PeerTube"
+        >Recommended</span>
       </div>
 
       <div ngProjectAs="buttons">
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
index c778d5ce8..709ba83aa 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="plugin">
 
-  <h2>
+  <h2 class="mb-4">
     <ng-container>{{ pluginTypeLabel }}</ng-container>
     {{ plugin.name }}
   </h2>
@@ -10,7 +10,7 @@
       <my-dynamic-form-field [hidden]="isSettingHidden(setting)" [form]="form" [setting]="setting" [formErrors]="formErrors"></my-dynamic-form-field>
     </div>
 
-    <input type="submit" i18n value="Update plugin settings" [disabled]="!form.valid">
+    <input class="peertube-button primary-button mt-3" type="submit" i18n value="Update plugin settings" [disabled]="!form.valid">
   </form>
 
   <div *ngIf="!hasRegisteredSettings()" i18n class="no-settings">
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
deleted file mode 100644
index 97d8604ca..000000000
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-
-h2 {
-  margin-bottom: 20px;
-}
-
-input[type=submit],
-button {
-  margin-top: 10px;
-
-  @include peertube-button;
-  @include orange-button;
-}
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
index 348637c5b..a0ac99355 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
@@ -15,7 +15,6 @@ import { BuildFormArgument } from '@app/shared/form-validators/form-validator.mo
 @Component({
   selector: 'my-plugin-show-installed',
   templateUrl: './plugin-show-installed.component.html',
-  styleUrls: [ './plugin-show-installed.component.scss' ],
   standalone: true,
   imports: [ NgIf, FormsModule, ReactiveFormsModule, NgFor, DynamicFormFieldComponent ]
 })
diff --git a/client/src/app/+admin/plugins/shared/plugin-card.component.scss b/client/src/app/+admin/plugins/shared/plugin-card.component.scss
index bd327e1ae..99003fae9 100644
--- a/client/src/app/+admin/plugins/shared/plugin-card.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-card.component.scss
@@ -51,11 +51,6 @@
   }
 }
 
-.action-button {
-  @include peertube-button-link;
-  @include button-with-icon(21px, 0, -2px);
-}
-
 @media screen and (max-width: $small-view) {
   .first-row {
     flex-wrap: wrap;
diff --git a/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html b/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
index ec026025b..df683d1ef 100644
--- a/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
+++ b/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
@@ -5,7 +5,7 @@
   </div>
 
   <div>
-    <a routerLink="/admin/system/runners/runners-list" class="peertube-button-link peertube-button-icon grey-button">
+    <a routerLink="/admin/system/runners/runners-list" class="peertube-button-link peertube-button-icon secondary-button">
       <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
       <ng-container i18n>Remote runners</ng-container>
     </a>
@@ -46,7 +46,7 @@
     <div class="caption">
       <div class="left-buttons">
         <my-action-dropdown
-          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
+          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="primary"
           [actions]="bulkActions" [entry]="selectedRows"
         >
         </my-action-dropdown>
@@ -73,7 +73,7 @@
       <td class="action-cell">
         <my-action-dropdown
           placement="bottom-right top-right left auto" container="body"
-          i18n-label label="Actions" [actions]="actions" [entry]="runnerJob"
+          i18n-label label="Actions" [actions]="actions" [entry]="runnerJob" buttonSize="small"
         ></my-action-dropdown>
       </td>
 
diff --git a/client/src/app/+admin/system/runners/runner-list/runner-list.component.html b/client/src/app/+admin/system/runners/runner-list/runner-list.component.html
index 1a4913a31..774c186fb 100644
--- a/client/src/app/+admin/system/runners/runner-list/runner-list.component.html
+++ b/client/src/app/+admin/system/runners/runner-list/runner-list.component.html
@@ -5,7 +5,7 @@
   </span>
 
   <div>
-    <a routerLink="/admin/system/runners/registration-tokens-list" class="peertube-button-link peertube-button-icon grey-button">
+    <a routerLink="/admin/system/runners/registration-tokens-list" class="peertube-button-link peertube-button-icon secondary-button">
       <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
       <ng-container i18n>Runner registration tokens</ng-container>
     </a>
@@ -36,7 +36,7 @@
       <td class="action-cell">
         <my-action-dropdown
           placement="bottom-right top-right left auto" container="body"
-          i18n-label label="Actions" [actions]="actions" [entry]="runner"
+          i18n-label label="Actions" [actions]="actions" [entry]="runner" buttonSize="small"
         ></my-action-dropdown>
       </td>
 
diff --git a/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html b/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
index 9c2d55291..aa70bb16c 100644
--- a/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
+++ b/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
@@ -5,7 +5,7 @@
   </span>
 
   <div>
-    <a routerLink="/admin/system/runners/runners-list" class="peertube-button-link peertube-button-icon grey-button">
+    <a routerLink="/admin/system/runners/runners-list" class="peertube-button-link peertube-button-icon secondary-button">
       <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
       <ng-container i18n>Remote runners</ng-container>
     </a>
@@ -32,7 +32,7 @@
   <ng-template pTemplate="caption">
     <div class="caption">
       <div class="left-buttons">
-        <my-button theme="orange" i18n-label label="Generate token" icon="add" (click)="generateToken()"></my-button>
+        <my-button theme="primary" i18n-label label="Generate token" icon="add" (click)="generateToken()"></my-button>
       </div>
     </div>
   </ng-template>
@@ -42,7 +42,7 @@
       <td class="action-cell">
         <my-action-dropdown
           placement="bottom-right top-right left auto" container="body"
-          i18n-label label="Actions" [actions]="actions" [entry]="registrationToken"
+          i18n-label label="Actions" [actions]="actions" [entry]="registrationToken" buttonSize="small"
         ></my-action-dropdown>
       </td>
 
diff --git a/client/src/app/+error-page/error-page.component.html b/client/src/app/+error-page/error-page.component.html
index 83de1f84a..9c5500e2d 100644
--- a/client/src/app/+error-page/error-page.component.html
+++ b/client/src/app/+error-page/error-page.component.html
@@ -12,7 +12,7 @@
         }
       </div>
 
-      <my-login-link className="peertube-button-big-link orange-button mt-5"></my-login-link>
+      <my-login-link className="peertube-button-big-link primary-button mt-5"></my-login-link>
     </div>
   } @else if (status === 403) {
     <div class="box">
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index 35168405b..350d4ac2d 100644
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -87,7 +87,7 @@
             ></my-input-text>
           </div>
 
-          <input type="submit" class="peertube-button orange-button w-100" i18n-value value="Login" [disabled]="!form.valid">
+          <input type="submit" class="peertube-button primary-button w-100" i18n-value value="Login" [disabled]="!form.valid">
 
           <div *ngIf="!otpStep" class="additional-links d-flex justify-content-center mt-4 mb-5 text-center">
             <button type="button" i18n class="button-unstyle link-orange mx-3" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">
@@ -158,12 +158,12 @@
 
   <div class="modal-footer inputs">
     <input
-      type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button d-none d-sm-block"
+      type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button d-none d-sm-block"
       (click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
     >
 
     <input
-      type="submit" i18n-value="Password reset button" value="Reset" class="peertube-button orange-button"
+      type="submit" i18n-value="Password reset button" value="Reset" class="peertube-button primary-button"
       (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
     >
   </div>
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
index 529a2b8a2..7fdad571f 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
@@ -82,7 +82,7 @@
           ></my-peertube-checkbox>
         </div>
 
-        <input type="submit" class="peertube-button orange-button mt-4" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+        <input type="submit" class="peertube-button primary-button mt-4" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
       </div>
     </div>
   </form>
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
index 63d3fae20..5d7307b3d 100644
--- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
@@ -29,7 +29,7 @@
       <div class="form-group-description" i18n>⚠️ Never share your feed token with anyone.</div>
     </div>
 
-    <input (click)="renewToken()" class="peertube-button orange-button mt-4" type="submit" i18n-value value="Renew token">
+    <input (click)="renewToken()" class="peertube-button primary-button mt-4" type="submit" i18n-value value="Renew token">
 
   </div>
 </div>
diff --git a/client/src/app/+my-account/my-account-import-export/my-account-export.component.html b/client/src/app/+my-account/my-account-import-export/my-account-export.component.html
index 9427f652d..ccb0ce607 100644
--- a/client/src/app/+my-account/my-account-import-export/my-account-export.component.html
+++ b/client/src/app/+my-account/my-account-import-export/my-account-export.component.html
@@ -58,14 +58,14 @@
           </td>
 
           <td>
-            <a i18n *ngIf="export.privateDownloadUrl" [href]="export.privateDownloadUrl" class="peertube-button-link grey-button">Download your archive</a>
+            <a i18n *ngIf="export.privateDownloadUrl" [href]="export.privateDownloadUrl" class="peertube-button-link secondary-button">Download your archive</a>
           </td>
         </tr>
       </table>
 
       <div class="mt-3">
         <input
-          class="peertube-button orange-button"
+          class="peertube-button primary-button"
           [disabled]="isRequestArchiveDisabled()"
           (click)="openNewArchiveModal()"
           type="submit" i18n-value value="Request a new archive"
@@ -109,12 +109,12 @@
 
   <div class="modal-footer inputs">
     <input
-      type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+      type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
       (click)="hide()" (key.enter)="hide()"
     >
 
     <input
-      type="submit" i18n-value value="Request an archive" class="peertube-button orange-button"
+      type="submit" i18n-value value="Request an archive" class="peertube-button primary-button"
       (click)="requestNewArchive()"
     />
   </div>
diff --git a/client/src/app/+my-account/my-account-import-export/my-account-import.component.scss b/client/src/app/+my-account/my-account-import-export/my-account-import.component.scss
index 265501b56..16cdb3000 100644
--- a/client/src/app/+my-account/my-account-import-export/my-account-import.component.scss
+++ b/client/src/app/+my-account/my-account-import-export/my-account-import.component.scss
@@ -3,7 +3,7 @@
 
 .button-file {
   @include peertube-button-file(max-content);
-  @include orange-button;
+  @include primary-button;
 }
 
 my-alert {
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
index dec372636..273c2a2ea 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@@ -6,7 +6,7 @@
 </div>
 
 <div class="header">
-  <a class="peertube-button-link grey-button" routerLink="/my-account/settings" fragment="notifications">
+  <a class="peertube-button-link secondary-button" routerLink="/my-account/settings" fragment="notifications">
     <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
     <span i18n>Notification preferences</span>
   </a>
@@ -18,7 +18,7 @@
     </select>
   </div>
 
-  <button class="ms-auto peertube-button grey-button" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
+  <button class="ms-auto peertube-button secondary-button" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
     <ng-container *ngIf="hasUnreadNotifications()">
       <my-global-icon iconName="tick" aria-hidden="true"></my-global-icon>
 
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
index 082f24d02..ed795d3b3 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
@@ -31,5 +31,5 @@
     ></my-input-text>
   </div>
 
-  <input type="submit" i18n-value value="Change email" [disabled]="!form.valid">
+  <input class="peertube-button primary-button" type="submit" i18n-value value="Change email" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
index 6bc4a7c2f..c3b2c38c0 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
@@ -14,11 +14,6 @@ input[type=email] {
   @include peertube-input-text(100%);
 }
 
-input[type=submit] {
-  @include peertube-button;
-  @include orange-button;
-}
-
 .pending-email {
   margin-bottom: 15px;
 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
index 0f2928990..260b7bed1 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
@@ -18,5 +18,5 @@
     [formError]="formErrors['new-confirmed-password']" autocomplete="new-password"
   ></my-input-text>
 
-  <input type="submit" i18n-value value="Change password" [disabled]="!form.valid">
+  <input class="mt-3 peertube-button primary-button" type="submit" i18n-value value="Change password" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
index f4cc18d8d..9fd685b4e 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
@@ -13,10 +13,3 @@ my-input-text {
 my-input-text + my-input-text {
   margin-top: 15px;
 }
-
-input[type=submit] {
-  margin-top: 15px;
-
-  @include peertube-button;
-  @include orange-button;
-}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-email-preferences/my-account-email-preferences.component.html b/client/src/app/+my-account/my-account-settings/my-account-email-preferences/my-account-email-preferences.component.html
index 68419ea04..33f941abc 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-email-preferences/my-account-email-preferences.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-email-preferences/my-account-email-preferences.component.html
@@ -17,5 +17,5 @@
     </my-peertube-checkbox>
   </div>
 
-  <input class="peertube-button orange-button" type="submit" i18n-value value="Save email settings" [disabled]="!form.valid">
+  <input class="peertube-button primary-button" type="submit" i18n-value value="Save email settings" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
index 1a42ebb84..042f9934a 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
@@ -35,5 +35,5 @@
     </div>
   </div>
 
-  <input type="submit" i18n-value value="Save profile" [disabled]="!form.valid">
+  <input class="mt-3 peertube-button primary-button" type="submit" i18n-value value="Save profile" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
index c60a1b421..1338ebb28 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
@@ -9,13 +9,6 @@ input[type=text] {
   @include peertube-input-text(340px);
 }
 
-input[type=submit] {
-  margin-top: 15px;
-
-  @include peertube-button;
-  @include orange-button;
-}
-
 textarea {
   max-width: 100%;
 
diff --git a/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.html b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.html
index 831b294d1..9e8ae11ba 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.html
@@ -2,11 +2,11 @@
   <ng-container *ngIf="!twoFactorEnabled">
     <p i18n>Two factor authentication adds an additional layer of security to your account by requiring a numeric code from another device (most commonly mobile phones) when you log in.</p>
 
-    <my-button [ptRouterLink]="[ '/my-account/two-factor-auth' ]" theme="orange" i18n>Enable two-factor authentication</my-button>
+    <my-button [ptRouterLink]="[ '/my-account/two-factor-auth' ]" theme="primary" i18n>Enable two-factor authentication</my-button>
   </ng-container>
 
   <ng-container *ngIf="twoFactorEnabled">
-    <my-button theme="orange" (click)="disableTwoFactor()" i18n>Disable two-factor authentication</my-button>
+    <my-button theme="primary" (click)="disableTwoFactor()" i18n>Disable two-factor authentication</my-button>
   </ng-container>
 
 </div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.html b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.html
index eefd31501..3cef25b4e 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.html
@@ -21,7 +21,7 @@
         [formError]="formErrorsPassword['current-password']" autocomplete="current-password"
       ></my-input-text>
 
-      <input class="peertube-button orange-button mt-3" type="submit" i18n-value value="Confirm" [disabled]="!formPassword.valid">
+      <input class="peertube-button primary-button mt-3" type="submit" i18n-value value="Confirm" [disabled]="!formPassword.valid">
     </form>
   </ng-container>
 
@@ -49,7 +49,7 @@
         [formError]="formErrorsOTP['otp-token']" autocomplete="otp-token"
       ></my-input-text>
 
-      <input class="peertube-button orange-button mt-3" type="submit" i18n-value value="Confirm" [disabled]="!formOTP.valid">
+      <input class="peertube-button primary-button mt-3" type="submit" i18n-value value="Confirm" [disabled]="!formOTP.valid">
     </form>
   </ng-container>
 
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
index d4d1c0931..39d79f617 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -6,7 +6,7 @@
   </div>
 
   <div>
-    <a routerLink="/my-library/video-channel-syncs" class="peertube-button-link grey-button peertube-button-icon">
+    <a routerLink="/my-library/video-channel-syncs" class="peertube-button-link secondary-button peertube-button-icon">
       <my-global-icon iconName="repeat" aria-hidden="true"></my-global-icon>
       <ng-container i18n>My synchronizations</ng-container>
     </a>
diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
index e41a2ba2a..624a8dfa2 100644
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -16,10 +16,7 @@
     <label for="track-watch-history" i18n>Track watch history</label>
   </div>
 
-  <button class="delete-history" (click)="clearAllHistory()" i18n>
-    <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
-    Clear all history
-  </button>
+  <my-button icon="delete" (click)="clearAllHistory()" i18n>Clear all history</my-button>
 </div>
 
 <my-videos-selection
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
index 4546c6f63..df81bc741 100644
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -39,10 +39,6 @@
 
   .delete-history {
     grid-column: 4;
-
-    @include peertube-button;
-    @include grey-button;
-    @include button-with-icon;
   }
 }
 
diff --git a/client/src/app/+my-library/my-history/my-history.component.ts b/client/src/app/+my-library/my-history/my-history.component.ts
index 13a45c48a..74e6c7d42 100644
--- a/client/src/app/+my-library/my-history/my-history.component.ts
+++ b/client/src/app/+my-library/my-history/my-history.component.ts
@@ -13,12 +13,14 @@ import { Video } from '@app/shared/shared-main/video/video.model'
 import { UserHistoryService } from '@app/shared/shared-main/users/user-history.service'
 import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature/video-miniature.component'
 import { VideosSelectionComponent } from '@app/shared/shared-video-miniature/videos-selection.component'
+import { ButtonComponent } from '@app/shared/shared-main/buttons/button.component'
 
 @Component({
   templateUrl: './my-history.component.html',
   styleUrls: [ './my-history.component.scss' ],
   standalone: true,
   imports: [
+    ButtonComponent,
     GlobalIconComponent,
     NgIf,
     AdvancedInputFilterComponent,
diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
index abbde552c..4baa954f5 100644
--- a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
@@ -19,12 +19,12 @@
   <div class="modal-footer inputs">
     <div class="inputs">
       <input
-        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
         (click)="dismiss()" (key.enter)="dismiss()"
       >
 
       <input
-        type="submit" i18n-value value="Accept" class="peertube-button orange-button"
+        type="submit" i18n-value value="Accept" class="peertube-button primary-button"
         (click)="close()"
       >
     </div>
diff --git a/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html
index e271fb927..10b40509f 100644
--- a/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html
+++ b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html
@@ -46,8 +46,8 @@
     <tr>
       <td class="action-cell">
         <my-action-dropdown
-           container="body"
-          [actions]="videoChannelSyncActions" [entry]="videoChannelSync"
+          container="body" [actions]="videoChannelSyncActions" [entry]="videoChannelSync"
+          buttonSize="small"
         ></my-action-dropdown>
       </td>
 
diff --git a/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.html b/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.html
index 77a06f31a..e9f06ee73 100644
--- a/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.html
+++ b/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.html
@@ -52,7 +52,7 @@
         </div>
       </div>
 
-      <input type="submit" class="peertube-button orange-button" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+      <input type="submit" class="peertube-button primary-button" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
     </form>
   </div>
 </div>
diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
index 2d7e603b7..41d77fc90 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
@@ -5,7 +5,7 @@
   </div>
 
   <div>
-    <a routerLink="/my-library/video-channel-syncs" class="peertube-button-link peertube-icon-link grey-button">
+    <a routerLink="/my-library/video-channel-syncs" class="peertube-button-link peertube-icon-link secondary-button">
       <my-global-icon iconName="repeat" aria-hidden="true"></my-global-icon>
       <ng-container i18n>My synchronizations</ng-container>
     </a>
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
index bbd8a1a24..221a70902 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
@@ -72,7 +72,7 @@
         <div *ngIf="formErrors['videoChannelId']" class="form-error" role="alert">{{ formErrors['videoChannelId'] }}</div>
       </div>
 
-      <input type="submit" class="peertube-button orange-button" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+      <input type="submit" class="peertube-button primary-button" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
     </form>
   </div>
 </div>
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
index df4687ce9..f4cddcf01 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
@@ -7,10 +7,8 @@
     ></my-video-playlist-miniature>
 
     <div class="playlist-buttons">
-      <button (click)="showShareModal()" class="action-button share-button">
-        <my-global-icon iconName="share" aria-hidden="true"></my-global-icon>
-        <span class="icon-text" i18n>Share</span>
-      </button>
+
+      <my-button class="me-3" (click)="showShareModal()" i18n icon="share">Share</my-button>
 
       <my-action-dropdown
         *ngIf="isRegularPlaylist(playlist)"
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
index 295f2015d..7edd8fd2e 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
@@ -28,14 +28,6 @@
 .playlist-buttons {
   display: flex;
   margin: 30px 0 10px;
-
-  .share-button {
-    @include peertube-button;
-    @include button-with-icon(17px, 3px, -1px);
-    @include grey-button;
-    @include apply-svg-color(pvar(--actionButtonColor));
-    @include margin-right(10px);
-  }
 }
 
 // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts
index c6f8760a3..e67e4ad70 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts
@@ -1,19 +1,20 @@
-import { Subject, Subscription } from 'rxjs'
-import { CdkDragDrop, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop'
+import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop'
+import { NgFor, NgIf } from '@angular/common'
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { ComponentPagination, ConfirmService, HooksService, Notifier, ScreenService } from '@app/core'
-import { VideoPlaylistType } from '@peertube/peertube-models'
-import { VideoPlaylistElementMiniatureComponent } from '../../shared/shared-video-playlist/video-playlist-element-miniature.component'
-import { InfiniteScrollerDirective } from '../../shared/shared-main/common/infinite-scroller.directive'
-import { ActionDropdownComponent, DropdownAction } from '../../shared/shared-main/buttons/action-dropdown.component'
-import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
-import { VideoPlaylistMiniatureComponent } from '../../shared/shared-video-playlist/video-playlist-miniature.component'
-import { NgIf, NgFor } from '@angular/common'
-import { VideoPlaylist } from '@app/shared/shared-video-playlist/video-playlist.model'
-import { VideoPlaylistElement } from '@app/shared/shared-video-playlist/video-playlist-element.model'
+import { ButtonComponent } from '@app/shared/shared-main/buttons/button.component'
 import { VideoShareComponent } from '@app/shared/shared-share-modal/video-share.component'
+import { VideoPlaylistElement } from '@app/shared/shared-video-playlist/video-playlist-element.model'
+import { VideoPlaylist } from '@app/shared/shared-video-playlist/video-playlist.model'
 import { VideoPlaylistService } from '@app/shared/shared-video-playlist/video-playlist.service'
+import { VideoPlaylistType } from '@peertube/peertube-models'
+import { Subject, Subscription } from 'rxjs'
+import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
+import { ActionDropdownComponent, DropdownAction } from '../../shared/shared-main/buttons/action-dropdown.component'
+import { InfiniteScrollerDirective } from '../../shared/shared-main/common/infinite-scroller.directive'
+import { VideoPlaylistElementMiniatureComponent } from '../../shared/shared-video-playlist/video-playlist-element-miniature.component'
+import { VideoPlaylistMiniatureComponent } from '../../shared/shared-video-playlist/video-playlist-miniature.component'
 
 @Component({
   templateUrl: './my-video-playlist-elements.component.html',
@@ -21,6 +22,7 @@ import { VideoPlaylistService } from '@app/shared/shared-video-playlist/video-pl
   standalone: true,
   imports: [
     NgIf,
+    ButtonComponent,
     VideoPlaylistMiniatureComponent,
     GlobalIconComponent,
     ActionDropdownComponent,
diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
index 0c800f2d1..32d81f67f 100644
--- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
@@ -25,12 +25,12 @@
   <div class="modal-footer">
     <div class="inputs">
       <input
-        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
         (click)="dismiss()" (key.enter)="dismiss()"
       >
 
       <input
-        type="submit" i18n-value value="Submit" class="peertube-button orange-button"
+        type="submit" i18n-value value="Submit" class="peertube-button primary-button"
         [disabled]="!form.valid" (click)="close()"
       />
     </div>
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html
index a39f88e1c..d82b75247 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.html
+++ b/client/src/app/+my-library/my-videos/my-videos.component.html
@@ -6,12 +6,12 @@
   </div>
 
   <div>
-    <a routerLink="/my-library/video-imports" class="peertube-button-link grey-button peertube-button-icon me-2">
+    <a routerLink="/my-library/video-imports" class="peertube-button-link secondary-button peertube-button-icon me-2">
       <my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon>
       <ng-container i18n>My imports</ng-container>
     </a>
 
-    <a routerLink="/my-library/ownership" class="peertube-button-link grey-button peertube-button-icon">
+    <a routerLink="/my-library/ownership" class="peertube-button-link secondary-button peertube-button-icon">
       <my-global-icon iconName="users" aria-hidden="true"></my-global-icon>
       <ng-container i18n>Ownership changes</ng-container>
     </a>
@@ -45,10 +45,7 @@
   #videosSelection
 >
   <ng-template ptTemplate="globalButtons">
-    <button class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()">
-      <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
-      <ng-container i18n>Delete</ng-container>
-    </button>
+    <my-delete-button class="delete-selection" (click)="deleteSelectedVideos()"></my-delete-button>
   </ng-template>
 
   <ng-template ptTemplate="rowButtons" let-video>
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss
index 9a2af6ac9..d59d8277b 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.scss
+++ b/client/src/app/+my-library/my-videos/my-videos.component.scss
@@ -10,18 +10,6 @@ input[type=text] {
   @include margin-left(0.5rem);
 }
 
-.action-button-delete-selection {
-  display: inline-block;
-
-  @include peertube-button;
-  @include orange-button;
-  @include button-with-icon(21px);
-
-  my-global-icon {
-    @include apply-svg-color(#fff);
-  }
-}
-
 .action-button {
   display: flex;
   align-self: flex-end;
@@ -58,6 +46,7 @@ my-edit-button {
       width: 100%;
       margin-bottom: 12px;
     }
+
     .peertube-select-container {
       @include margin-left(0);
     }
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts
index d037df7a6..379a82fd0 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.ts
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@@ -6,6 +6,7 @@ import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenServi
 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 import { formatICU, immutableAssign } from '@app/helpers'
 import { DropdownAction } from '@app/shared/shared-main/buttons/action-dropdown.component'
+import { DeleteButtonComponent } from '@app/shared/shared-main/buttons/delete-button.component'
 import { Video } from '@app/shared/shared-main/video/video.model'
 import { VideoService } from '@app/shared/shared-main/video/video.service'
 import { LiveStreamInformationComponent } from '@app/shared/shared-video-live/live-stream-information.component'
@@ -18,8 +19,8 @@ import { concat, Observable } from 'rxjs'
 import { tap, toArray } from 'rxjs/operators'
 import { AdvancedInputFilter, AdvancedInputFilterComponent } from '../../shared/shared-forms/advanced-input-filter.component'
 import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
-import { PeerTubeTemplateDirective } from '../../shared/shared-main/common/peertube-template.directive'
 import { EditButtonComponent } from '../../shared/shared-main/buttons/edit-button.component'
+import { PeerTubeTemplateDirective } from '../../shared/shared-main/common/peertube-template.directive'
 import {
   VideoActionsDisplayType,
   VideoActionsDropdownComponent
@@ -32,6 +33,7 @@ import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.c
   standalone: true,
   imports: [
     GlobalIconComponent,
+    DeleteButtonComponent,
     NgIf,
     RouterLink,
     AdvancedInputFilterComponent,
diff --git a/client/src/app/+reset-password/reset-password.component.html b/client/src/app/+reset-password/reset-password.component.html
index 04c990929..8144f997b 100644
--- a/client/src/app/+reset-password/reset-password.component.html
+++ b/client/src/app/+reset-password/reset-password.component.html
@@ -21,7 +21,7 @@
     </div>
 
     <input
-      class="peertube-button orange-button" type="submit" i18n-value value="Reset my password"
+      class="peertube-button primary-button" type="submit" i18n-value value="Reset my password"
       [disabled]="!form.valid || !isConfirmedPasswordValid()"
     >
   </form>
diff --git a/client/src/app/+search/search-filters.component.html b/client/src/app/+search/search-filters.component.html
index 5fc25e267..f54c845f4 100644
--- a/client/src/app/+search/search-filters.component.html
+++ b/client/src/app/+search/search-filters.component.html
@@ -230,6 +230,9 @@
       Reset
     </button>
 
-    <input type="submit" i18n-value value="Filter" i18n-ariaLabel aria-label="Filter the results and automatically close the filters panel">
+    <input
+      class="peertube-button primary-button" type="submit" i18n-value value="Filter"
+      i18n-ariaLabel aria-label="Filter the results and automatically close the filters panel"
+    >
   </div>
 </form>
diff --git a/client/src/app/+search/search-filters.component.scss b/client/src/app/+search/search-filters.component.scss
index 0b589a7f3..efd22eb74 100644
--- a/client/src/app/+search/search-filters.component.scss
+++ b/client/src/app/+search/search-filters.component.scss
@@ -25,11 +25,6 @@ input[type=text] {
   @include peertube-input-text(100%);
 }
 
-input[type=submit] {
-  @include peertube-button-link;
-  @include orange-button;
-}
-
 .submit-button {
   text-align: end;
 }
diff --git a/client/src/app/+signup/+register/register.component.html b/client/src/app/+signup/+register/register.component.html
index 987708c98..a41815578 100644
--- a/client/src/app/+signup/+register/register.component.html
+++ b/client/src/app/+signup/+register/register.component.html
@@ -30,7 +30,7 @@
               <strong>I already have an account</strong>, I log in
             </a>
 
-            <button cdkStepperNext>
+            <button class="peertube-button-big primary-button" cdkStepperNext>
               <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
             </button>
           </div>
@@ -56,8 +56,8 @@
           ></my-register-step-terms>
 
           <div class="step-buttons">
-            <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
-            <button cdkStepperNext [disabled]="!formStepTerms || !formStepTerms.valid">{{ defaultNextStepButtonLabel }}</button>
+            <button class="peertube-button-big secondary-button" cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
+            <button class="peertube-button-big primary-button" cdkStepperNext [disabled]="!formStepTerms || !formStepTerms.valid">{{ defaultNextStepButtonLabel }}</button>
           </div>
         </cdk-step>
 
@@ -73,8 +73,8 @@
           ></my-register-step-user>
 
           <div class="step-buttons">
-            <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
-            <button cdkStepperNext [disabled]="!formStepUser || !formStepUser.valid" (click)="videoUploadDisabled && signup()">{{ stepUserButtonLabel }}</button>
+            <button class="peertube-button-big secondary-button" cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
+            <button class="peertube-button-big primary-button" cdkStepperNext [disabled]="!formStepUser || !formStepUser.valid" (click)="videoUploadDisabled && signup()">{{ stepUserButtonLabel }}</button>
           </div>
         </cdk-step>
 
@@ -90,7 +90,7 @@
           ></my-register-step-channel>
 
           <div class="step-buttons">
-            <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
+            <button class="peertube-button-big secondary-button" cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
 
             <div class="skip-step">
               <button class="underline-orange button-unstyle" (click)="skipChannelCreation()">
@@ -100,7 +100,7 @@
               <div class="skip-step-description" i18n>You will be able to create a channel later</div>
             </div>
 
-            <button cdkStepperNext [disabled]="!formStepChannel || !formStepChannel.valid || hasSameChannelAndAccountNames()" (click)="signup()">
+            <button class="peertube-button-big primary-button" cdkStepperNext [disabled]="!formStepChannel || !formStepChannel.valid || hasSameChannelAndAccountNames()" (click)="signup()">
               <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
             </button>
           </div>
@@ -122,7 +122,7 @@
           ></my-signup-success-before-email>
 
           <div *ngIf="signupError" class="step-buttons">
-            <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
+            <button class="peertube-button-big secondary-button" cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
           </div>
         </cdk-step>
       </my-custom-stepper>
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 2bf149762..f8c701737 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -44,18 +44,6 @@ my-instance-about-accordion {
     }
   }
 
-  > button {
-    @include peertube-button-big;
-
-    &[cdkStepperNext] {
-      @include orange-button;
-    }
-
-    &[cdkStepperPrevious] {
-      @include grey-button;
-    }
-  }
-
   > button,
   .skip-step {
     margin-top: 20px;
diff --git a/client/src/app/+signup/+register/steps/step.component.scss b/client/src/app/+signup/+register/steps/step.component.scss
index 35ef20d97..753daf90a 100644
--- a/client/src/app/+signup/+register/steps/step.component.scss
+++ b/client/src/app/+signup/+register/steps/step.component.scss
@@ -11,11 +11,6 @@ input:not([type=submit]) {
   }
 }
 
-input[type=submit],
-button {
-  @include peertube-button;
-}
-
 label {
   font-size: 18px;
   margin-bottom: 5px;
diff --git a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
index 7038468f6..c4d8688d2 100644
--- a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
+++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
@@ -13,7 +13,7 @@
       <div *ngIf="formErrors['verify-email-email']" class="form-error" role="alert">{{ formErrors['verify-email-email'] }}</div>
     </div>
 
-    <input class="peertube-button orange-button" type="submit" i18n-value value="Send verification email" [disabled]="!form.valid">
+    <input class="peertube-button primary-button" type="submit" i18n-value value="Send verification email" [disabled]="!form.valid">
   </form>
 
   <ng-template #emailVerificationNotRequired>
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index b74ec7b0e..a8b70b804 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -6,13 +6,13 @@
   <div class="channel-info">
 
     <ng-template #buttonsTemplate>
-      <a *ngIf="isManageable()" [routerLink]="[ '/manage/update', videoChannel.nameWithHost  ]" class="peertube-button-link orange-button" i18n>
+      <a *ngIf="isManageable()" [routerLink]="[ '/manage/update', videoChannel.nameWithHost  ]" class="peertube-button-link primary-button" i18n>
         Manage channel
       </a>
 
       <my-subscribe-button *ngIf="!isOwner()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
 
-      <button *ngIf="videoChannel.support" (click)="showSupportModal()" class="support-button peertube-button orange-button-inverted">
+      <button *ngIf="videoChannel.support" (click)="showSupportModal()" class="support-button peertube-button primary-button-inverted">
         <my-global-icon iconName="support" aria-hidden="true"></my-global-icon>
         <span class="icon-text" i18n>Support</span>
       </button>
@@ -43,11 +43,11 @@
           <div class="description-html" [innerHTML]="ownerDescriptionHTML"></div>
         </div>
 
-        <a class="view-account short" [routerLink]="getAccountUrl()" i18n>
+        <a class="view-account peertube-button-link primary-button short mt-3" [routerLink]="getAccountUrl()" i18n>
           View account
         </a>
 
-        <a class="view-account complete" [routerLink]="getAccountUrl()" i18n>
+        <a class="view-account link-orange complete" [routerLink]="getAccountUrl()" i18n>
           View owner account
         </a>
       </div>
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index ec07ae082..7aafe9f75 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -133,13 +133,6 @@
   }
 }
 
-.view-account.short {
-  margin-top: 30px;
-
-  @include peertube-button-link;
-  @include orange-button-inverted;
-}
-
 .view-account.complete {
   display: none;
 }
@@ -232,7 +225,6 @@ my-copy-button {
     display: block;
     text-align: end;
     margin-top: 10px;
-    color: pvar(--mainColor);
   }
 
   .view-account.short {
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 9c2cb1920..5afb25209 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
@@ -63,7 +63,7 @@
       </div>
 
       <my-button
-        theme="orange" i18n-label label="Run video edition" icon="circle-tick"
+        theme="primary" i18n-label label="Run video edition" icon="circle-tick"
         (click)="runEdition()" (keydown.enter)="runEdition()"
         [disabled]="!form.valid || isRunningEdition || noEdition()"
       ></my-button>
diff --git a/client/src/app/+videos/+video-edit/shared/caption/video-caption-add-modal.component.html b/client/src/app/+videos/+video-edit/shared/caption/video-caption-add-modal.component.html
index 067ab8343..3345027b6 100644
--- a/client/src/app/+videos/+video-edit/shared/caption/video-caption-add-modal.component.html
+++ b/client/src/app/+videos/+video-edit/shared/caption/video-caption-add-modal.component.html
@@ -36,12 +36,12 @@
 
     <div class="modal-footer inputs">
       <input
-        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
         (click)="hide()" (key.enter)="hide()"
       >
 
       <input
-        type="submit" i18n-value value="Add this caption" class="peertube-button orange-button"
+        type="submit" i18n-value value="Add this caption" class="peertube-button primary-button"
         [disabled]="!form.valid" (click)="addCaption()"
       >
     </div>
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 f472b505b..ce9a973ea 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
@@ -121,12 +121,12 @@
 
 <div class="modal-footer inputs">
   <input
-    type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+    type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
     (click)="hide()" (key.enter)="hide()"
   >
 
   <input
-    type="button" i18n-value value="Edit this caption" class="peertube-button orange-button"
+    type="button" i18n-value value="Edit this caption" class="peertube-button primary-button"
     [disabled]="rawEdition && !form.valid" (click)="updateCaption()"
   >
 </div>
diff --git a/client/src/app/+videos/+video-edit/shared/thumbnail-manager/thumbnail-manager.component.html b/client/src/app/+videos/+video-edit/shared/thumbnail-manager/thumbnail-manager.component.html
index 8eb68bb5c..0912fcdc5 100644
--- a/client/src/app/+videos/+video-edit/shared/thumbnail-manager/thumbnail-manager.component.html
+++ b/client/src/app/+videos/+video-edit/shared/thumbnail-manager/thumbnail-manager.component.html
@@ -15,9 +15,9 @@
   <div class="mt-2">
 
     @if (selectingFromVideo) {
-      <button i18n type="button" class="peertube-button orange-button me-2" (click)="selectFrame()">Use this frame</button>
+      <button i18n type="button" class="peertube-button primary-button me-2" (click)="selectFrame()">Use this frame</button>
 
-      <button i18n type="button" i18n class="peertube-button grey-button" (click)="resetSelectFromVideo()">Cancel</button>
+      <button i18n type="button" i18n class="peertube-button secondary-button" (click)="resetSelectFromVideo()">Cancel</button>
     }
     @else {
       <my-reactive-file
@@ -28,7 +28,7 @@
       </my-reactive-file>
 
       @if (canSelectFromVideo()) {
-        <button i18n type="button" class="peertube-button grey-button ms-2" (click)="selectFromVideo()">Select from video</button>
+        <button i18n type="button" class="peertube-button secondary-button ms-2" (click)="selectFromVideo()">Select from video</button>
       }
     }
 
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 a8ece799f..eb7f8cccd 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
@@ -99,7 +99,7 @@ p-calendar {
 
 .button-file {
   @include peertube-button-file(max-content);
-  @include orange-button;
+  @include primary-button;
 }
 
 .hide-chapter-label {
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 4c3c54ec4..2851eb24a 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
@@ -57,7 +57,7 @@
 
   <div class="submit-container">
     <my-button
-      theme="orange" i18n-label label="Update" icon="circle-tick"
+      theme="primary" i18n-label label="Update" icon="circle-tick"
       (click)="updateSecondStep()" [disabled]="!form.valid || isUpdatingVideo === true"
     ></my-button>
   </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 051f545c5..c4e272775 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
@@ -64,7 +64,7 @@
 
   <div class="submit-container">
     <my-button
-      theme="orange" i18n-label label="Update" icon="circle-tick" (click)="updateSecondStep()"
+      theme="primary" i18n-label label="Update" icon="circle-tick" (click)="updateSecondStep()"
       [disabled]="!form.valid || isUpdatingVideo === true"
     ></my-button>
   </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 0bc7647e2..08d7bd207 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
@@ -62,7 +62,7 @@
 
   <div class="submit-container">
     <my-button
-      theme="orange" i18n-label label="Update" icon="circle-tick" (click)="updateSecondStep()"
+      theme="primary" i18n-label label="Update" icon="circle-tick" (click)="updateSecondStep()"
       [disabled]="!form.valid || isUpdatingVideo === true"
     ></my-button>
   </div>
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 0ef44885b..43ce2a54d 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
@@ -49,16 +49,8 @@ $width-size: 275px;
     @include peertube-input-text($width-size);
   }
 
-  input[type=button] {
-    width: $width-size;
-    margin-top: 30px;
-
-    @include peertube-button;
-    @include orange-button;
-  }
-
   .button-file {
     @include peertube-button-file(max-content);
-    @include orange-button;
+    @include primary-button;
   }
 }
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 a21ef6c84..ed4b7f691 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
@@ -42,7 +42,7 @@
       </div>
 
       <div class="form-group upload-audio-button">
-        <my-button theme="orange" [label]="getAudioUploadLabel()" icon="upload" (click)="uploadAudio()"></my-button>
+        <my-button theme="primary" [label]="getAudioUploadLabel()" icon="upload" (click)="uploadAudio()"></my-button>
       </div>
     </ng-container>
   </div>
@@ -71,7 +71,7 @@
     <div i18n *ngIf="videoUploaded === false" class="message-submit">Publish will be available when upload is finished</div>
 
     <my-button
-      theme="orange" i18n-label label="Publish" icon="circle-tick"
+      theme="primary" i18n-label label="Publish" icon="circle-tick"
       (click)="updateSecondStep()" (keydown.enter)="updateSecondStep()" [disabled]="isPublishingButtonDisabled()"
     ></my-button>
   </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 0ec9ddb76..4485cc4fc 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.html
+++ b/client/src/app/+videos/+video-edit/video-add.component.html
@@ -1,8 +1,8 @@
 <ng-template #AlertButtons>
   @if (isContactFormEnabled) {
-    <a i18n routerLink="/about/contact" class="peertube-button-link orange-button mt-2">Contact us</a>
+    <a i18n routerLink="/about/contact" class="peertube-button-link primary-button mt-2">Contact us</a>
   } @else {
-    <a i18n routerLink="/about/instance" class="peertube-button-link orange-button mt-2">Read instance rules for help</a>
+    <a i18n routerLink="/about/instance" class="peertube-button-link primary-button mt-2">Read instance rules for help</a>
   }
 </ng-template>
 
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 b04147dee..3f2b5d944 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.html
+++ b/client/src/app/+videos/+video-edit/video-update.component.html
@@ -44,7 +44,7 @@
 
     <div class="submit-container">
       <my-button
-        theme="orange" i18n-label label="Update" icon="circle-tick" (click)="update()" (keydown.enter)="update()"
+        theme="primary" i18n-label label="Update" icon="circle-tick" (click)="update()" (keydown.enter)="update()"
         [disabled]="!form.valid || isUpdatingVideo === true"
       ></my-button>
     </div>
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 1021c5e41..76efc3013 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
@@ -50,7 +50,7 @@
       Cancel
     </button>
 
-    <button *ngIf="isAddButtonDisplayed()" class="peertube-button orange-button" [disabled]="!form.valid || addingComment">
+    <button *ngIf="isAddButtonDisplayed()" class="peertube-button primary-button" [disabled]="!form.valid || addingComment">
       {{ addingCommentButtonValue }}
     </button>
   </div>
@@ -75,11 +75,11 @@
 
   <div class="modal-footer inputs">
     <input
-      type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+      type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
       (click)="hideModals()" (key.enter)="hideModals()"
     >
 
-    <my-login-link i18n-label label="Login to comment" className="peertube-button-link orange-button"></my-login-link>
+    <my-login-link i18n-label label="Login to comment" className="peertube-button-link primary-button"></my-login-link>
   </div>
 </ng-template>
 
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 a76eee96e..fc89a750a 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
@@ -24,8 +24,8 @@
     display: inline-block;
     transition: ease-in .2s opacity;
     width: 12px;
-    position: relative;
-    top: -3px;
+    height: 12px;
+    line-height: 12px;
 
     @include margin-left(5px);
   }
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 93c4ba7a7..e3fc96ac7 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
@@ -10,7 +10,7 @@
     <a i18n i18n-title title="Get more information" target="_blank" rel="noopener noreferrer" href="/about/peertube#privacy">More information</a>
   </div>
 
-  <button i18n class="ms-2 peertube-button orange-button" (click)="acceptedPrivacyConcern()">
+  <button i18n class="ms-2 peertube-button primary-button" (click)="acceptedPrivacyConcern()">
     OK
   </button>
 </div>
diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index 1be74daa2..370d5cd32 100644
--- a/client/src/app/header/header.component.html
+++ b/client/src/app/header/header.component.html
@@ -10,11 +10,11 @@
     @if (!loggedIn) {
       <my-button theme="tertiary" rounded="true" class="me-3" icon="cog" (click)="openQuickSettings()"></my-button>
 
-      <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button peertube-button-link text-truncate d-block">
+      <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link secondary-button w-100 text-truncate me-3">
         <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
       </a>
 
-      <my-login-link className="peertube-button-link orange-button w-100 text-truncate"></my-login-link>
+      <my-login-link className="peertube-button-link primary-button w-100 text-truncate"></my-login-link>
     } @else {
       <my-notification-dropdown class="me-3" (navigate)="onActiveLinkScrollToAnchor($event)"></my-notification-dropdown>
 
@@ -54,14 +54,14 @@
           >
             <my-global-icon iconName="language" aria-hidden="true"></my-global-icon>
             <span i18n>Interface:</span>
-            <span class="ms-auto muted">{{ currentInterfaceLanguage }}</span>
+            <span class="ms-auto ps-2 muted">{{ currentInterfaceLanguage }}</span>
           </button>
 
           <a ngbDropdownItem class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles"
             #settingsLanguagesSubtitles (click)="onActiveLinkScrollToAnchor(settingsLanguagesSubtitles)">
             <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon>
             <span i18n>Videos:</span>
-            <span class="ms-auto muted">{{ videoLanguages.join(', ') }}</span>
+            <span class="ms-auto ps-2 muted">{{ videoLanguages.join(', ') }}</span>
           </a>
 
           <a ngbDropdownItem class="dropdown-item settings-sensitive" routerLink="/my-account/settings"
@@ -71,14 +71,14 @@
             <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy === 'display'" iconName="eye-open" aria-hidden="true"></my-global-icon>
             <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy !== 'display'" iconName="eye-close" aria-hidden="true"></my-global-icon>
             <span i18n>Sensitive:</span>
-            <span class="ms-auto muted">{{ nsfwPolicy }}</span>
+            <span class="ms-auto ps-2 muted">{{ nsfwPolicy }}</span>
           </a>
 
           <button class="dropdown-item" (mousedown)="$event.stopPropagation(); toggleUseP2P()" [ariaPressed]="user.p2pEnabled" ngbDropdownItem>
             <my-global-icon iconName="p2p" aria-hidden="true"></my-global-icon>
             <ng-container i18n>Help share videos</ng-container>
 
-            <my-input-switch inputName="p2p-enabled" class="ms-auto" [preventUpdate]="true" [checked]="user.p2pEnabled"></my-input-switch>
+            <my-input-switch inputName="p2p-enabled" class="ms-auto ps-2" [preventUpdate]="true" [checked]="user.p2pEnabled"></my-input-switch>
           </button>
 
           <div class="dropdown-divider"></div>
diff --git a/client/src/app/header/notification-dropdown.component.scss b/client/src/app/header/notification-dropdown.component.scss
index f17b2e12d..a7308276f 100644
--- a/client/src/app/header/notification-dropdown.component.scss
+++ b/client/src/app/header/notification-dropdown.component.scss
@@ -121,9 +121,11 @@
     font-size: 10px;
     font-weight: $font-semibold;
 
-    border-radius: 15px;
-    width: 15px;
-    height: 15px;
+    border-radius: 16px;
+    width: 16px;
+    height: 16px;
+
+    line-height: 1;
 
     @media screen and (max-width: $mobile-view) {
       top: -4px;
diff --git a/client/src/app/menu/language-chooser.component.html b/client/src/app/menu/language-chooser.component.html
index ec4ac389e..6a4079507 100644
--- a/client/src/app/menu/language-chooser.component.html
+++ b/client/src/app/menu/language-chooser.component.html
@@ -7,7 +7,7 @@
   </div>
 
 
-  <a i18n class="help-to-translate" target="_blank" rel="noreferrer noopener" href="https://github.com/Chocobozzz/PeerTube/blob/develop/support/doc/translation.md">
+  <a i18n class="peertube-button-link primary-button rounded-0" target="_blank" rel="noreferrer noopener" href="https://github.com/Chocobozzz/PeerTube/blob/develop/support/doc/translation.md">
     Help to translate PeerTube!
   </a>
 
diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss
index 1bd06ac9d..447f6b250 100644
--- a/client/src/app/menu/language-chooser.component.scss
+++ b/client/src/app/menu/language-chooser.component.scss
@@ -1,18 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.help-to-translate {
-  border-radius: 0;
-
-  @include peertube-button-link;
-  @include orange-button;
-
-  &:focus-visible,
-  &:focus {
-    box-shadow: none;
-  }
-}
-
 .modal-body {
   text-align: center;
 
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 1ded70c64..8dc82eb5b 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -36,7 +36,11 @@
   border-radius: 100%;
   background-color: pvar(--secondary-400);
 
-  @include button-with-icon(20px, 0, -1px, 1px);
+  @include button-with-icon(20px, 0, 0, 1px);
+
+  my-global-icon {
+    margin: auto;
+  }
 
   &:hover {
     opacity: 0.8;
@@ -88,20 +92,6 @@
   background-color: pvar(--secondary-300);
 }
 
-.collapsed {
-  .main-menu-wrapper {
-    max-height: 100%;
-  }
-
-  .main-menu {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-  }
-}
-
 .menu-link,
 .menu-button,
 .block-title,
@@ -122,8 +112,26 @@
   }
 }
 
-.collapsed .toggle-menu-container {
-  text-align: center;
+.collapsed {
+  .main-menu-wrapper {
+    max-height: 100%;
+  }
+
+  .main-menu {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .toggle-menu-container {
+    text-align: center;
+  }
+
+  .menu-link {
+    justify-content: center;
+  }
 }
 
 .block-title {
@@ -140,7 +148,7 @@
   color: #2b2f32;
   white-space: normal;
   word-break: break-word;
-  transition: background-color .1s ease-inF-out;
+  transition: background-color .1s ease-in-out;
   width: 100%;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -159,6 +167,7 @@
   my-global-icon {
     width: 22px;
     height: 22px;
+    line-height: 22px;
     position: relative;
     top: -1px;
     color: pvar(--secondary);
@@ -169,10 +178,6 @@
   }
 }
 
-.menu-container.collapsed .menu-link {
-  justify-content: center;
-}
-
 .menu-button {
   margin-top: 0.5rem;
 }
diff --git a/client/src/app/modal/account-setup-warning-modal.component.html b/client/src/app/modal/account-setup-warning-modal.component.html
index ce4e3bd1c..8a2baa6f4 100644
--- a/client/src/app/modal/account-setup-warning-modal.component.html
+++ b/client/src/app/modal/account-setup-warning-modal.component.html
@@ -27,12 +27,12 @@
     </my-peertube-checkbox>
 
     <input
-      type="button" role="button" i18n-value value="Close" class="peertube-button grey-button"
+      type="button" role="button" i18n-value value="Close" class="peertube-button secondary-button"
       (click)="hide()" (key.enter)="hide()"
     >
 
     <a i18n (click)="hide()" (key.enter)="hide()"
-       class="peertube-button-link orange-button" routerLink="/my-account"
+       class="peertube-button-link primary-button" routerLink="/my-account"
        rel="noopener noreferrer" ngbAutofocus>
       Set up
     </a>
diff --git a/client/src/app/modal/admin-welcome-modal.component.html b/client/src/app/modal/admin-welcome-modal.component.html
index 9179d062a..c608481ec 100644
--- a/client/src/app/modal/admin-welcome-modal.component.html
+++ b/client/src/app/modal/admin-welcome-modal.component.html
@@ -72,12 +72,12 @@
 
   <div class="modal-footer inputs">
     <input
-      type="button" role="button" i18n-value value="Remind me later" class="peertube-button grey-button"
+      type="button" role="button" i18n-value value="Remind me later" class="peertube-button secondary-button"
       (click)="hide()" (key.enter)="hide()"
     >
 
     <a i18n (click)="doNotOpenAgain(); hide()" (key.enter)="doNotOpenAgain(); hide()"
-       class="peertube-button-link orange-button" href="/admin/config/edit-custom" target="_blank"
+       class="peertube-button-link primary-button" href="/admin/config/edit-custom" target="_blank"
        rel="noopener noreferrer" ngbAutofocus>
       Configure my instance
     </a>
diff --git a/client/src/app/modal/confirm.component.html b/client/src/app/modal/confirm.component.html
index 50d79e263..584f6eff0 100644
--- a/client/src/app/modal/confirm.component.html
+++ b/client/src/app/modal/confirm.component.html
@@ -31,13 +31,13 @@
 
   <div class="modal-footer inputs">
     <input
-      type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+      type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
       (click)="dismiss()" (key.enter)="dismiss()"
     >
 
     <input
       ngbAutofocus
-      type="submit" [value]="confirmButtonText" class="peertube-button orange-button" [disabled]="isConfirmationDisabled()"
+      type="submit" [value]="confirmButtonText" class="peertube-button primary-button" [disabled]="isConfirmationDisabled()"
       (click)="close()" (key.enter)="confirm()"
     >
   </div>
diff --git a/client/src/app/modal/custom-modal.component.html b/client/src/app/modal/custom-modal.component.html
index 79fc8ea32..9d49a0570 100644
--- a/client/src/app/modal/custom-modal.component.html
+++ b/client/src/app/modal/custom-modal.component.html
@@ -11,12 +11,12 @@
 
   <div *ngIf="hasCancel() || hasConfirm()" class="modal-footer inputs">
     <input
-      *ngIf="hasCancel()" type="button" role="button" value="{{cancel.value}}" class="peertube-button grey-button"
+      *ngIf="hasCancel()" type="button" role="button" value="{{cancel.value}}" class="peertube-button secondary-button"
       (click)="onCancelClick()" (key.enter)="onCancelClick()"
     >
 
     <input
-      *ngIf="hasConfirm()" type="button" role="button" value="{{confirm.value}}" class="peertube-button orange-button"
+      *ngIf="hasConfirm()" type="button" role="button" value="{{confirm.value}}" class="peertube-button primary-button"
       (click)="onConfirmClick()" (key.enter)="onConfirmClick()"
     >
   </div>
diff --git a/client/src/app/modal/instance-config-warning-modal.component.html b/client/src/app/modal/instance-config-warning-modal.component.html
index 10ce1dda3..675e83157 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.html
+++ b/client/src/app/modal/instance-config-warning-modal.component.html
@@ -37,11 +37,11 @@
     </my-peertube-checkbox>
 
     <input
-      type="button" role="button" i18n-value value="Close" class="peertube-button grey-button"
+      type="button" role="button" i18n-value value="Close" class="peertube-button secondary-button"
       (click)="hide()" (key.enter)="hide()"
     >
 
-    <a i18n class="peertube-button-link orange-button" ngbAutofocus
+    <a i18n class="peertube-button-link primary-button" ngbAutofocus
        href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">
        Configure
     </a>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index da7ea8bc6..87c6211de 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -38,7 +38,7 @@
       <td class="action-cell">
         <my-action-dropdown
           [ngClass]="{ 'show': expanded }" placement="bottom-right top-right left auto" container="body"
-          i18n-label label="Actions" [actions]="abuseActions" [entry]="abuse"
+          i18n-label label="Actions" [actions]="abuseActions" [entry]="abuse" buttonSize="small"
         ></my-action-dropdown>
       </td>
 
@@ -133,7 +133,7 @@
       <td class="abuse-messages">
         <button
           *ngIf="isLocalAbuse(abuse)" (click)="openAbuseMessagesModal(abuse)"
-          class="peertube-button grey-button"
+          class="peertube-button secondary-button"
           [ariaLabel]="getSendMessageButtonLabel(abuse)"
           [title]="getSendMessageButtonLabel(abuse)"
         >
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
index b40ca08f7..ce973efd9 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
@@ -43,7 +43,7 @@
       </div>
 
       <div class="form-group inputs">
-        <input type="submit" i18n-value value="Add a message" class="peertube-button orange-button" [disabled]="!form.valid || sendingMessage">
+        <input type="submit" i18n-value value="Add a message" class="peertube-button primary-button" [disabled]="!form.valid || sendingMessage">
       </div>
     </form>
 
diff --git a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
index b41664aac..afcf77e13 100644
--- a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
+++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
@@ -25,11 +25,11 @@
 
       <div class="form-group inputs">
         <input
-          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
           (click)="hide()" (key.enter)="hide()"
         >
 
-        <input type="submit" i18n-value value="Update this comment" class="peertube-button orange-button" [disabled]="!form.valid" />
+        <input type="submit" i18n-value value="Update this comment" class="peertube-button primary-button" [disabled]="!form.valid" />
       </div>
     </form>
   </div>
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
index 46b30d2c9..57cd9d3f7 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
@@ -33,6 +33,7 @@
 
 .actor-img-edit-button {
   border-radius: 50%;
+  padding: 8px 20px;
 
   position: absolute;
   bottom: 5px;
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss
index 371e6ed2b..383d788bd 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss
@@ -8,7 +8,7 @@
 .actor-img-edit-button {
   @include peertube-button-file(31px);
   @include button-with-icon(19px, 0);
-  @include orange-button;
+  @include primary-button;
 
   & {
     display: flex;
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts
index 49acba7da..41f3c2c68 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts
@@ -32,8 +32,8 @@ export class ButtonMarkupComponent implements CustomMarkupComponent {
 
   getClasses () {
     const additionalClass = this.theme === 'primary'
-      ? 'orange-button'
-      : 'grey-button'
+      ? 'primary-button'
+      : 'secondary-button'
 
     return [ 'peertube-button-link', additionalClass ]
   }
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.ts b/client/src/app/shared/shared-forms/reactive-file.component.ts
index ce8f7810e..c926abc4b 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.ts
+++ b/client/src/app/shared/shared-forms/reactive-file.component.ts
@@ -62,8 +62,8 @@ export class ReactiveFileComponent implements OnInit, OnChanges, ControlValueAcc
   buildClasses () {
     this.classes = {
       'with-icon': !!this.icon,
-      'orange-button': this.theme === 'primary',
-      'grey-button': this.theme === 'secondary'
+      'primary-button': this.theme === 'primary',
+      'secondary-button': this.theme === 'secondary'
     }
   }
 
diff --git a/client/src/app/shared/shared-icons/global-icon.component.scss b/client/src/app/shared/shared-icons/global-icon.component.scss
index 10180829f..c956a2f36 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.scss
+++ b/client/src/app/shared/shared-icons/global-icon.component.scss
@@ -1,5 +1,6 @@
 ::ng-deep {
   svg {
+    vertical-align: bottom;
     width: inherit;
     height: inherit;
   }
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
index f4c58f6c6..bc7a05ad3 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
@@ -1,12 +1,16 @@
 <div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)">
   <button
-    class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
+    class="action-button peertube-button"
+    [ngClass]="{ 'icon-only': !label, 'peertube-button-small': buttonSize === 'small', 'secondary-button': buttonStyled && theme === 'secondary', 'primary-button': buttonStyled && theme === 'primary' }"
     ngbDropdownToggle aria-label="Open actions" i18n-aria-label
   >
-    <my-global-icon *ngIf="!label && buttonDirection === 'horizontal'" class="more-icon" iconName="more-horizontal"></my-global-icon>
-    <my-global-icon *ngIf="!label && buttonDirection === 'vertical'" class="more-icon" iconName="more-vertical"></my-global-icon>
-
-    <span *ngIf="label" class="dropdown-toggle">{{ label }}</span>
+    @if (label) {
+      <span class="dropdown-toggle">{{ label }}</span>
+    } @else if (buttonDirection === 'horizontal') {
+      <my-global-icon class="more-icon" iconName="more-horizontal"></my-global-icon>
+    } @else if (buttonDirection === 'vertical') {
+      <my-global-icon class="more-icon" iconName="more-vertical"></my-global-icon>
+    }
   </button>
 
   <div ngbDropdownMenu class="dropdown-menu">
@@ -33,27 +37,30 @@
             </div>
           </ng-template>
 
-          <a
-            *ngIf="action.linkBuilder && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
-            class="dropdown-item"  [routerLink]="action.linkBuilder(entry)" [queryParams]="getQueryParams(action, entry)" [title]="action.title || ''"
-          >
-            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
-          </a>
-
-          <span
-            *ngIf="!action.linkBuilder && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
-            class="custom-action dropdown-item" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
-          >
-            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
-          </span>
-
-          <h6
-            *ngIf="!action.linkBuilder && action.isHeader && areActionsDisplayed(actions, entry)" [ngClass]="{ 'with-icon': !!action.iconName }"
-            class="dropdown-header" [title]="action.title || ''"
-          >
-            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
-          </h6>
-
+          @if (action.linkBuilder) {
+            @if (!action.isHeader) {
+              <a
+                [ngClass]="{ 'with-icon': !!action.iconName }"
+                class="dropdown-item"  [routerLink]="action.linkBuilder(entry)" [queryParams]="getQueryParams(action, entry)" [title]="action.title || ''"
+              >
+                <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
+              </a>
+            }
+          } @else {
+            @if (!action.isHeader) {
+              <span
+                [ngClass]="{ 'with-icon': !!action.iconName }"
+                class="custom-action dropdown-item" tabindex="0" role="button" [title]="action.title || ''"
+                (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
+              >
+                <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
+              </span>
+            } @else if (areActionsDisplayed(actions, entry)) {
+              <h6 [ngClass]="{ 'with-icon': !!action.iconName }" class="dropdown-header" [title]="action.title || ''">
+                <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
+              </h6>
+            }
+          }
         </div>
       </ng-container>
 
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
index aaed9360a..368a60e79 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
@@ -8,40 +8,12 @@
 .action-button {
   display: inline-block;
 
-  @include peertube-button;
-
-  &.button-styled {
-
-    &.grey {
-      @include grey-button;
-    }
-
-    &.orange {
-      @include orange-button;
-    }
-
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: $grey-background-color;
-    }
-  }
-
   &::after {
     display: none;
   }
 
-  .more-icon {
-    width: 21px;
-
-    ::ng-deep {
-      @include apply-svg-color(pvar(--actionButtonColor));
-    }
-  }
-
-  &.small {
-    font-size: 14px;
-    padding: 0 10px;
+  &.icon-only {
+    @include button-with-icon(21px, 0, 0);
   }
 }
 
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
index 4206288d6..5eaf90b5e 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
@@ -24,7 +24,7 @@ export type DropdownAction<T> = {
 }
 
 export type DropdownButtonSize = 'normal' | 'small'
-export type DropdownTheme = 'orange' | 'grey'
+export type DropdownTheme = 'primary' | 'secondary'
 export type DropdownDirection = 'horizontal' | 'vertical'
 
 @Component({
@@ -59,7 +59,7 @@ export class ActionDropdownComponent<T> {
   @Input() buttonStyled = true
 
   @Input() label: string
-  @Input() theme: DropdownTheme = 'grey'
+  @Input() theme: DropdownTheme = 'secondary'
 
   getActions (): DropdownAction<T>[][] {
     if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions as DropdownAction<T>[][]
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index 1de6ac79b..a43fa57ba 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -20,10 +20,6 @@
     &.has-icon {
       @include button-with-icon(24px, 0);
     }
-
-    &.icon-only {
-      padding: 6px 8px !important;
-    }
   }
 }
 
diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts
index 79b48a8c7..ba02e3cf7 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -17,7 +17,7 @@ import { LoaderComponent } from '../common/loader.component'
 
 export class ButtonComponent implements OnChanges, AfterViewInit {
   @Input() label = ''
-  @Input() theme: 'orange' | 'grey' | 'primary' | 'secondary' | 'tertiary' = 'grey'
+  @Input() theme: 'primary' | 'secondary' | 'tertiary' = 'secondary'
   @Input() icon: GlobalIconName
   @Input() ptRouterLink: string[] | string
   @Input() title: string
@@ -43,14 +43,12 @@ export class ButtonComponent implements OnChanges, AfterViewInit {
     this.classes = {
       'peertube-button': !this.ptRouterLink,
       'peertube-button-link': !!this.ptRouterLink,
-      'orange-button': this.theme === 'orange',
-      'grey-button': this.theme === 'grey',
       'primary-button': this.theme === 'primary',
       'secondary-button': this.theme === 'secondary',
       'tertiary-button': this.theme === 'tertiary',
       'has-icon': !!this.icon,
       'rounded-icon-button': !!this.rounded,
-      'icon-only': !(this.labelContent?.nativeElement as HTMLElement)?.innerText,
+      'icon-only': !this.label && !(this.labelContent?.nativeElement as HTMLElement)?.innerText,
       'responsive-label': this.responsiveLabel
     }
   }
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.ts b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
index 773caf94f..3b5b883d3 100644
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
@@ -5,7 +5,7 @@ import { ButtonComponent } from './button.component'
   selector: 'my-delete-button',
   template: `
     <my-button
-      icon="delete" className="grey-button"
+      icon="delete" theme="secondary"
       [disabled]="disabled" [label]="label" [title]="title"
       [responsiveLabel]="responsiveLabel"
     ></my-button>
diff --git a/client/src/app/shared/shared-main/channel/channels-setup-message.component.html b/client/src/app/shared/shared-main/channel/channels-setup-message.component.html
index c8d5ab88a..178db914a 100644
--- a/client/src/app/shared/shared-main/channel/channels-setup-message.component.html
+++ b/client/src/app/shared/shared-main/channel/channels-setup-message.component.html
@@ -3,5 +3,5 @@
 
   <div i18n>Some of your channels are not fully set up. Make them welcoming and explicit about what you publish by adding a <strong>banner</strong>, an <strong>avatar</strong> and a <strong>description</strong>.</div>
 
-  <a *ngIf="!hideLink" class="peertube-button-link grey-button mt-2" routerLink="/my-library/video-channels" i18n>Set up my channels</a>
+  <a *ngIf="!hideLink" class="peertube-button-link secondary-button mt-2" routerLink="/my-library/video-channels" i18n>Set up my channels</a>
 </my-alert>
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html
index 65fde65e4..1e6e607a9 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -30,7 +30,7 @@
   <ng-template pTemplate="body" let-accountBlock>
     <tr>
       <td class="action-cell">
-        <button class="peertube-button grey-button" (click)="unblockAccount(accountBlock)" i18n>Unmute</button>
+        <button class="peertube-button secondary-button" (click)="unblockAccount(accountBlock)" i18n>Unmute</button>
       </td>
       <td>
         <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
diff --git a/client/src/app/shared/shared-moderation/batch-domains-modal.component.html b/client/src/app/shared/shared-moderation/batch-domains-modal.component.html
index 0b0295924..ddb27d7fa 100644
--- a/client/src/app/shared/shared-moderation/batch-domains-modal.component.html
+++ b/client/src/app/shared/shared-moderation/batch-domains-modal.component.html
@@ -30,11 +30,11 @@
 
       <div class="form-group inputs">
         <input
-          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
           (click)="hide()" (key.enter)="hide()"
         >
 
-        <input type="submit" [value]="action" class="peertube-button orange-button" [disabled]="!form.valid" />
+        <input type="submit" [value]="action" class="peertube-button primary-button" [disabled]="!form.valid" />
       </div>
     </form>
   </div>
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.html b/client/src/app/shared/shared-moderation/report-modals/report.component.html
index 751ffd800..496fe2f76 100644
--- a/client/src/app/shared/shared-moderation/report-modals/report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.html
@@ -52,11 +52,11 @@
 
     <div class="form-group inputs">
       <input
-        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
         (click)="hide()" (key.enter)="hide()"
       >
 
-      <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid">
+      <input type="submit" i18n-value value="Submit" class="peertube-button primary-button" [disabled]="!form.valid">
     </div>
 
     </form>
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
index 421c0c425..2aee48312 100644
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
@@ -83,11 +83,11 @@
 
     <div class="form-group inputs">
       <input
-        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
         (click)="hide()" (key.enter)="hide()"
       >
 
-      <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid">
+      <input type="submit" i18n-value value="Submit" class="peertube-button primary-button" [disabled]="!form.valid">
     </div>
 
     </form>
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html
index 59ebc85f2..6220d2ee6 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -38,7 +38,7 @@
   <ng-template pTemplate="body" let-serverBlock>
     <tr>
       <td class="action-cell">
-        <button class="peertube-button grey-button" (click)="unblockServer(serverBlock)" i18n>Unmute</button>
+        <button class="peertube-button secondary-button" (click)="unblockServer(serverBlock)" i18n>Unmute</button>
       </td>
       <td>
         <a [href]="'https://' + serverBlock.blockedServer.host" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.html b/client/src/app/shared/shared-moderation/user-ban-modal.component.html
index e1acee7d5..d45ffe6d4 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.html
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.html
@@ -33,11 +33,11 @@
 
       <div class="form-group inputs">
         <input
-          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
           (click)="hide()" (key.enter)="hide()"
         >
 
-        <input type="submit" i18n-value [value]="getModalTitle()" class="peertube-button orange-button" [disabled]="!form.valid" />
+        <input type="submit" i18n-value [value]="getModalTitle()" class="peertube-button primary-button" [disabled]="!form.valid" />
       </div>
     </form>
   </div>
diff --git a/client/src/app/shared/shared-moderation/video-block.component.html b/client/src/app/shared/shared-moderation/video-block.component.html
index f73cb7bc1..8187dbdc7 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.html
+++ b/client/src/app/shared/shared-moderation/video-block.component.html
@@ -45,11 +45,11 @@
 
       <div class="form-group inputs">
         <input
-          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
           (click)="hide()" (key.enter)="hide()"
         >
 
-        <input type="submit" i18n-value value="Block" class="peertube-button orange-button" [disabled]="!form.valid" />
+        <input type="submit" i18n-value value="Block" class="peertube-button primary-button" [disabled]="!form.valid" />
       </div>
     </form>
 
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index f0181e994..5f026bbb6 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -16,7 +16,7 @@
       <my-alert *ngIf="isPrivatePlaylist()" class="alert-private" type="warning">
         <div i18n>This playlist is private so you won't be able to share it with external users</div>
 
-        <a i18n class="peertube-button-link orange-button" [routerLink]="[ '/my-library/video-playlists/update', playlist.shortUUID ]" target="_blank" rel="noopener noreferrer">
+        <a i18n class="peertube-button-link primary-button" [routerLink]="[ '/my-library/video-playlists/update', playlist.shortUUID ]" target="_blank" rel="noopener noreferrer">
           Update playlist privacy
         </a>
       </my-alert>
@@ -106,7 +106,7 @@
       <my-alert *ngIf="isPrivateVideo()" class="alert-private" type="warning">
         <div i18n>This video is private so you won't be able to share it with external users</div>
 
-        <a i18n class="peertube-button-link orange-button" [routerLink]="[ '/videos/', 'update', video.shortUUID ]" target="_blank" rel="noopener noreferrer">
+        <a i18n class="peertube-button-link primary-button" [routerLink]="[ '/videos/', 'update', video.shortUUID ]" target="_blank" rel="noopener noreferrer">
           Update video privacy
         </a>
       </my-alert>
diff --git a/client/src/app/shared/shared-support-modal/support-modal.component.html b/client/src/app/shared/shared-support-modal/support-modal.component.html
index fbe94432a..926c91ddb 100644
--- a/client/src/app/shared/shared-support-modal/support-modal.component.html
+++ b/client/src/app/shared/shared-support-modal/support-modal.component.html
@@ -10,7 +10,7 @@
 
   <div class="modal-footer inputs">
     <input
-      type="button" role="button" i18n-value value="Close" class="peertube-button grey-button"
+      type="button" role="button" i18n-value value="Close" class="peertube-button secondary-button"
       (click)="hide()" (key.enter)="hide()"
     >
   </div>
diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.html b/client/src/app/shared/shared-user-settings/user-interface-settings.component.html
index e6847aabd..eb76d22c1 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.html
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.html
@@ -13,5 +13,5 @@
     </div>
   </div>
 
-  <input *ngIf="!reactiveUpdate" type="submit" class="mt-0" i18n-value value="Save interface settings" [disabled]="!form.valid">
+  <input *ngIf="!reactiveUpdate" type="submit" class="peertube-button primary-button" i18n-value value="Save interface settings" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
index 4114b8079..ff81a07e4 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
@@ -1,14 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-input[type=submit] {
-  display: block;
-  margin-top: 15px;
-
-  @include peertube-button;
-  @include orange-button;
-}
-
 .peertube-select-container {
   margin-bottom: 30px;
 
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.html b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
index d03ebae7d..90b91d387 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.html
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
@@ -69,5 +69,5 @@
     </my-peertube-checkbox>
   </div>
 
-  <input *ngIf="!reactiveUpdate" type="submit" i18n-value value="Save video settings" [disabled]="!form.valid">
+  <input *ngIf="!reactiveUpdate" type="submit" i18n-value value="Save video settings" [disabled]="!form.valid" class="peertube-button primary-button mt-3">
 </form>
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
index 1917d5110..e0c201ece 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
@@ -1,13 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-input[type=submit] {
-  margin-top: 15px;
-
-  @include peertube-button;
-  @include orange-button;
-}
-
 .peertube-select-container {
   @include peertube-select-container(340px);
 }
diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html
index 656d1beb3..343d75603 100644
--- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html
+++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html
@@ -1,15 +1,17 @@
 <form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
   <div class="form-group">
-    <input type="email"
-      formControlName="text"
-      class="form-control"
-      (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()"
-      placeholder="jane_doe@example.com">
+    <input
+      type="email" formControlName="text" class="form-control"
+      (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" placeholder="jane_doe@example.com"
+    >
   </div>
 
-  <button type="submit" [disabled]="!form.valid" class="btn btn-sm btn-remote-follow" i18n>
-    <span *ngIf="!interact">Remote subscribe</span>
-    <span *ngIf="interact">Remote interact</span>
+  <button type="submit" [disabled]="!form.valid" class="peertube-button primary-button">
+    @if (interact) {
+      <span i18n>Remote interact</span>
+    } @else {
+      <span i18n>Remote subscribe</span>
+    }
   </button>
 
   <my-help *ngIf="!interact && showHelp">
diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss
deleted file mode 100644
index e87f43b63..000000000
--- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@use '_mixins' as *;
-
-.btn-remote-follow {
-  @include peertube-button;
-  @include orange-button;
-}
diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts
index 1eae1c7d1..8fa11355b 100644
--- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts
+++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts
@@ -12,7 +12,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 @Component({
   selector: 'my-remote-subscribe',
   templateUrl: './remote-subscribe.component.html',
-  styleUrls: [ './remote-subscribe.component.scss' ],
   standalone: true,
   imports: [ FormsModule, ReactiveFormsModule, NgIf, HelpComponent, PeerTubeTemplateDirective ]
 })
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.ts b/client/src/app/shared/shared-user-subscription/subscribe-button.component.ts
index 325e77f88..706bdd0c0 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.ts
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.ts
@@ -236,8 +236,8 @@ export class SubscribeButtonComponent implements OnChanges {
   private buildClasses () {
     this.buttonClasses = {
       'peertube-button': true,
-      'orange-button': !this.isAllChannelsSubscribed,
-      'grey-button': this.isAllChannelsSubscribed
+      'primary-button': !this.isAllChannelsSubscribed,
+      'secondary-button': this.isAllChannelsSubscribed
     }
   }
 }
diff --git a/client/src/app/shared/shared-video-comment/video-comment-list-admin-owner.component.html b/client/src/app/shared/shared-video-comment/video-comment-list-admin-owner.component.html
index a9fd8367a..d0536d63c 100644
--- a/client/src/app/shared/shared-video-comment/video-comment-list-admin-owner.component.html
+++ b/client/src/app/shared/shared-video-comment/video-comment-list-admin-owner.component.html
@@ -9,7 +9,7 @@
     <div class="caption">
       <div>
         <my-action-dropdown
-          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
+          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="primary"
           [actions]="bulkActions" [entry]="selectedRows"
         >
         </my-action-dropdown>
@@ -31,7 +31,7 @@
       <th scope="col" style="width: 40px;">
         <span i18n class="visually-hidden">More information</span>
       </th>
-      <th scope="col" style="width: 150px;">
+      <th scope="col" style="width: 70px;">
         <span i18n class="visually-hidden">Actions</span>
       </th>
       <th scope="col" i18n>Account</th>
@@ -56,7 +56,7 @@
       <td class="action-cell">
         <my-action-dropdown
           [ngClass]="{ 'show': expanded }" placement="bottom-right" container="body"
-          i18n-label label="Actions" [actions]="videoCommentActions" [entry]="videoComment"
+          [actions]="videoCommentActions" [entry]="videoComment" buttonSize="small"
         ></my-action-dropdown>
       </td>
 
diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.html b/client/src/app/shared/shared-video-live/live-stream-information.component.html
index 325a6e44a..7be81e8d0 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.html
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.html
@@ -51,7 +51,7 @@
 
   <div class="modal-footer">
     <div class="form-group inputs">
-      <input type="button" role="button" i18n-value value="Close" class="peertube-button grey-button" (click)="dismiss()" />
+      <input type="button" role="button" i18n-value value="Close" class="peertube-button secondary-button" (click)="dismiss()" />
 
       <my-edit-button
         i18n-label label="Update live settings"
diff --git a/client/src/app/shared/shared-video-miniature/download/subtitle-files-download.component.html b/client/src/app/shared/shared-video-miniature/download/subtitle-files-download.component.html
index 0780eece4..c0caaeb6e 100644
--- a/client/src/app/shared/shared-video-miniature/download/subtitle-files-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/download/subtitle-files-download.component.html
@@ -23,5 +23,5 @@
 <div class="modal-footer inputs">
   <ng-content select="cancel-button"></ng-content>
 
-  <input type="submit" i18n-value value="Download" class="peertube-button orange-button" (click)="download()" />
+  <input type="submit" i18n-value value="Download" class="peertube-button primary-button" (click)="download()" />
 </div>
diff --git a/client/src/app/shared/shared-video-miniature/download/video-download.component.html b/client/src/app/shared/shared-video-miniature/download/video-download.component.html
index c95d6abbf..3318262d0 100644
--- a/client/src/app/shared/shared-video-miniature/download/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/download/video-download.component.html
@@ -20,7 +20,7 @@
   <div class="modal-body" [ngClass]="{ 'opacity-0': !loaded }">
     <ng-template #cancelBlock>
       <input
-        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
         (click)="hide()" (key.enter)="hide()"
       >
     </ng-template>
diff --git a/client/src/app/shared/shared-video-miniature/download/video-files-download.component.html b/client/src/app/shared/shared-video-miniature/download/video-files-download.component.html
index ec3c77aa4..705f4abc2 100644
--- a/client/src/app/shared/shared-video-miniature/download/video-files-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/download/video-files-download.component.html
@@ -123,5 +123,5 @@
 <div class="modal-footer inputs">
   <ng-content select="cancel-button"></ng-content>
 
-  <input type="submit" i18n-value value="Download" class="peertube-button orange-button" (click)="download()" />
+  <input type="submit" i18n-value value="Download" class="peertube-button primary-button" (click)="download()" />
 </div>
diff --git a/client/src/app/shared/shared-video-miniature/download/video-generate-download.component.html b/client/src/app/shared/shared-video-miniature/download/video-generate-download.component.html
index f00bba8be..9de7d6759 100644
--- a/client/src/app/shared/shared-video-miniature/download/video-generate-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/download/video-generate-download.component.html
@@ -39,5 +39,5 @@
 <div class="modal-footer inputs">
   <ng-content select="cancel-button"></ng-content>
 
-  <input type="submit" i18n-value value="Download" class="peertube-button orange-button" (click)="download()" />
+  <input type="submit" i18n-value value="Download" class="peertube-button primary-button" (click)="download()" />
 </div>
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.html b/client/src/app/shared/shared-video-miniature/videos-selection.component.html
index 8931158a9..8ea03b127 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.html
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.html
@@ -20,7 +20,7 @@
     <!-- Display only once -->
     <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0">
       <div class="action-selection-mode-child">
-        <button i18n class="action-button action-button-cancel-selection" (click)="abortSelectionMode()">
+        <button i18n class="cancel-selection peertube-button secondary-button me-2" (click)="abortSelectionMode()">
           Cancel
         </button>
 
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
index 791241292..ea6df643c 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
@@ -18,11 +18,6 @@
   }
 }
 
-.action-button-cancel-selection {
-  @include peertube-button;
-  @include grey-button;
-}
-
 .video {
   @include row-blocks($column-responsive: false);
 
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
index 8000f9b6b..6ba0cf35a 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
@@ -79,6 +79,6 @@
       </div>
     </div>
 
-    <input type="submit" i18n-value value="Create" [disabled]="!form.valid">
+    <input type="submit" class="peertube-button primary-button" i18n-value value="Create" [disabled]="!form.valid">
   </form>
 </div>
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
index 83e36f071..472e05bbb 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
@@ -145,8 +145,3 @@ my-timestamp-input {
 input[type=text] {
   @include peertube-input-text(200px);
 }
-
-input[type=submit] {
-  @include peertube-button;
-  @include orange-button;
-}
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
index 3e42c6e3c..d238bd461 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
@@ -97,7 +97,7 @@
             ></my-timestamp-input>
           </div>
 
-          <input type="submit" i18n-value value="Save" (click)="updateTimestamps(playlistElement)">
+          <input class="peertube-button primary-button mt-2" type="submit" i18n-value value="Save" (click)="updateTimestamps(playlistElement)">
         </div>
       </ng-container>
 
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index 5449b6b59..c8c5aef4f 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -174,13 +174,6 @@ my-video-thumbnail,
     my-peertube-checkbox {
       @include margin-right(5px);
     }
-
-    input {
-      margin-top: 10px;
-
-      @include peertube-button;
-      @include orange-button;
-    }
   }
 }
 
diff --git a/client/src/app/shared/standalone-upload/upload-progress.component.html b/client/src/app/shared/standalone-upload/upload-progress.component.html
index 0c55d1e9f..f96324d29 100644
--- a/client/src/app/shared/standalone-upload/upload-progress.component.html
+++ b/client/src/app/shared/standalone-upload/upload-progress.component.html
@@ -8,7 +8,7 @@
 
   <input
     *ngIf="uploaded === false"
-    type="button" class="peertube-button grey-button ms-1" i18n-value="Cancel ongoing upload" value="Cancel" (click)="cancel.emit()"
+    type="button" class="peertube-button secondary-button ms-1" i18n-value="Cancel ongoing upload" value="Cancel" (click)="cancel.emit()"
   />
 </div>
 
@@ -19,8 +19,8 @@
   >
   </my-progress-bar>
 
-  <input type="button" class="peertube-button grey-button ms-1" i18n-value="Retry failed upload" value="Retry" (click)="retry.emit()" />
-  <input type="button" class="peertube-button grey-button ms-1" i18n-value="Cancel ongoing upload" value="Cancel" (click)="cancel.emit()" />
+  <input type="button" class="peertube-button secondary-button ms-1" i18n-value="Retry failed upload" value="Retry" (click)="retry.emit()" />
+  <input type="button" class="peertube-button secondary-button ms-1" i18n-value="Cancel ongoing upload" value="Cancel" (click)="cancel.emit()" />
 </div>
 
 <my-alert *ngIf="error && !enableRetryAfterError" type="danger">
diff --git a/client/src/app/shared/standalone-watched-words/watched-words-list-admin-owner.component.html b/client/src/app/shared/standalone-watched-words/watched-words-list-admin-owner.component.html
index f47cc1cfd..46088d3db 100644
--- a/client/src/app/shared/standalone-watched-words/watched-words-list-admin-owner.component.html
+++ b/client/src/app/shared/standalone-watched-words/watched-words-list-admin-owner.component.html
@@ -44,7 +44,7 @@
       <td class="action-cell">
         <my-action-dropdown
           [ngClass]="{ 'show': expanded }" placement="bottom-right" container="body"
-          i18n-label label="Actions" [actions]="actions" [entry]="list"
+          i18n-label label="Actions" [actions]="actions" [entry]="list" buttonSize="small"
         ></my-action-dropdown>
       </td>
 
diff --git a/client/src/app/shared/standalone-watched-words/watched-words-list-save-modal.component.html b/client/src/app/shared/standalone-watched-words/watched-words-list-save-modal.component.html
index 0c3b02a77..70b8a5f2d 100644
--- a/client/src/app/shared/standalone-watched-words/watched-words-list-save-modal.component.html
+++ b/client/src/app/shared/standalone-watched-words/watched-words-list-save-modal.component.html
@@ -36,12 +36,12 @@
 
     <div class="modal-footer inputs">
       <input
-        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
         (click)="hide()" (key.enter)="hide()"
       >
 
       <input
-        type="submit" i18n-value value="Save" class="peertube-button orange-button"
+        type="submit" i18n-value value="Save" class="peertube-button primary-button"
         [disabled]="!form.valid" (click)="addOrUpdate()"
       >
     </div>
diff --git a/client/src/assets/images/feather/delete.svg b/client/src/assets/images/feather/delete.svg
index f24d55bf6..6867b4214 100644
--- a/client/src/assets/images/feather/delete.svg
+++ b/client/src/assets/images/feather/delete.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
diff --git a/client/src/assets/images/feather/edit-2.svg b/client/src/assets/images/feather/edit-2.svg
index 06830c9d0..13a00256e 100644
--- a/client/src/assets/images/feather/edit-2.svg
+++ b/client/src/assets/images/feather/edit-2.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pen"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>
diff --git a/client/src/assets/images/feather/refresh-cw.svg b/client/src/assets/images/feather/refresh-cw.svg
index 06c358dd0..471b2cb84 100644
--- a/client/src/assets/images/feather/refresh-cw.svg
+++ b/client/src/assets/images/feather/refresh-cw.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-ccw"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg>
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index ba2a146e4..8183de3ce 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -314,11 +314,11 @@ body {
   font-weight: $font-semibold;
 
   .active {
-    @include orange-button;
+    @include primary-button;
   }
 
   :not(.active) {
-    @include grey-button;
+    @include secondary-button;
   }
 
   > * {
diff --git a/client/src/sass/class-helpers/_buttons.scss b/client/src/sass/class-helpers/_buttons.scss
index c378faa4b..4209d95cb 100644
--- a/client/src/sass/class-helpers/_buttons.scss
+++ b/client/src/sass/class-helpers/_buttons.scss
@@ -8,6 +8,10 @@
   @include peertube-button-big;
 }
 
+.peertube-button-small {
+  @include peertube-button-small;
+}
+
 .peertube-button-link {
   @include peertube-button-link;
 }
@@ -16,10 +20,6 @@
   @include peertube-button-big-link;
 }
 
-.orange-button {
-  @include orange-button;
-}
-
 .primary-button {
   @include primary-button;
 }
@@ -28,14 +28,6 @@
   @include rounded-icon-button;
 }
 
-.orange-button-inverted {
-  @include orange-button-inverted;
-}
-
-.grey-button {
-  @include grey-button;
-}
-
 .secondary-button {
   @include secondary-button;
 }
@@ -58,7 +50,7 @@
 
 .peertube-create-button {
   @include peertube-button-link;
-  @include orange-button;
+  @include primary-button;
   @include button-with-icon(20px, 5px, -1px);
 }
 
diff --git a/client/src/sass/class-helpers/_forms.scss b/client/src/sass/class-helpers/_forms.scss
index 50b3b275c..c4ad2778f 100644
--- a/client/src/sass/class-helpers/_forms.scss
+++ b/client/src/sass/class-helpers/_forms.scss
@@ -70,7 +70,7 @@ label + .form-group-description,
   height: auto;
 
   @include peertube-button;
-  @include grey-button;
+  @include tertiary-button;
 
   &.reset-button-small {
     font-size: 80%;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index a8ff0bc29..89491cfe4 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -81,7 +81,7 @@
 }
 
 @mixin rounded-line-height-1-5 ($font-size) {
-  line-height: $font-size + math.round(math.div($font-size, 2));
+  line-height: calc(#{$font-size} + #{math.round(math.div($font-size, 2))});
 }
 
 @mixin rounded-line-height-1-42 ($font-size) {
@@ -124,42 +124,6 @@
   @include peertube-input-text($width);
 }
 
-@mixin orange-button {
-  @include button-focus(pvar(--mainColorLightest));
-
-  &,
-  &:active,
-  &:focus {
-    color: #fff;
-    background-color: pvar(--mainColor);
-    border-color: inherit;
-  }
-
-  // Override bootstrap
-  &.btn:active,
-  &.btn:focus-visible,
-  &.btn.show {
-    color: #fff !important;
-    background-color: pvar(--mainColor) !important;
-    border-color: inherit !important;
-  }
-
-  &:hover {
-    color: #fff;
-    background-color: pvar(--mainHoverColor);
-  }
-
-  &[disabled] {
-    cursor: default;
-    color: #fff;
-    background-color: pvar(--inputBorderColor);
-  }
-
-  my-global-icon {
-    @include apply-svg-color(#fff);
-  }
-}
-
 @mixin primary-button {
   @include button-focus(pvar(--primary-300));
 
@@ -168,7 +132,7 @@
   &:focus {
     color: pvar(--fg);
     background-color: pvar(--primary);
-    border-color: inherit;
+    border: 1px solid pvar(--primary);
   }
 
   // Override bootstrap
@@ -177,7 +141,7 @@
   &.btn.show {
     color: pvar(--fg) !important;
     background-color: pvar(--primary) !important;
-    border-color: inherit !important;
+    border: 1px solid pvar(--primary) !important;
   }
 
   &:hover {
@@ -187,7 +151,7 @@
 
   &[disabled] {
     pointer-events: none;
-    opacity: 0.8;
+    opacity: 0.6;
   }
 
   my-global-icon {
@@ -270,85 +234,14 @@
 }
 
 @mixin rounded-icon-button {
-  padding: 0.5rem;
-  border-radius: 100%;
+  padding: 0.5rem !important;
+  border-radius: 100% !important;
 
   my-global-icon {
     width: 24px;
   }
 }
 
-@mixin orange-button-inverted {
-  padding: 2px 13px;
-  border: 2px solid pvar(--mainColor);
-  font-weight: $font-semibold;
-
-  @include button-focus(pvar(--mainColorLightest));
-
-  &,
-  &:active,
-  &:focus {
-    color: pvar(--mainColor);
-    background-color: pvar(--bg);
-  }
-
-  // Override bootstrap
-  &.btn:active,
-  &.btn:focus-visible,
-  &.btn.show {
-    color: pvar(--mainColor);
-    background-color: pvar(--bg);
-    border-color: inherit !important;
-  }
-
-  &:hover {
-    color: pvar(--mainColor);
-    background-color: pvar(--mainColorLightest);
-  }
-
-  &[disabled] {
-    cursor: default;
-    color: pvar(--mainColor);
-    background-color: pvar(--inputBorderColor);
-  }
-
-  my-global-icon {
-    @include apply-svg-color(pvar(--mainColor));
-  }
-}
-
-@mixin grey-button {
-  color: pvar(--greyForegroundColor);
-  background-color: pvar(--greyBackgroundColor);
-
-  @include button-focus($grey-button-outline-color);
-
-  &:hover,
-  &:active,
-  &:focus,
-  &[disabled] {
-    color: pvar(--greyForegroundColor);
-    background-color: pvar(--greySecondaryBackgroundColor);
-  }
-
-  // Override bootstrap
-  &.btn:active,
-  &.btn:focus-visible,
-  &.btn.show {
-    color: pvar(--greyForegroundColor);
-    background-color: pvar(--greySecondaryBackgroundColor);
-    border-color: inherit !important;
-  }
-
-  &[disabled] {
-    cursor: default;
-  }
-
-  my-global-icon {
-    @include apply-svg-color(pvar(--greyForegroundColor));
-  }
-}
-
 @mixin danger-button {
   background-color: pvar(--red);
   color: pvar(--white);
@@ -373,7 +266,6 @@
 
 @mixin peertube-button {
   padding: 6px 20px;
-
   border: 0;
   font-weight: $font-semibold;
 
@@ -383,13 +275,21 @@
   cursor: pointer;
 
   font-size: $button-font-size;
-
-  @include rounded-line-height-1-5($button-font-size);
+  line-height: 1.5;
 
   my-global-icon + *:not(:empty) {
     @include margin-right(8px);
     @include margin-left(8px);
   }
+
+  &.icon-only {
+    padding: 6px 8px;
+  }
+
+  &:is(input[type=button]) {
+    // Because of primeng that redefines border-radius of all input[type="..."]
+    border-radius: 4px !important;
+  }
 }
 
 @mixin peertube-button-big {
@@ -401,7 +301,12 @@
   font-weight: $font-semibold;
 
   // Because of primeng that redefines border-radius of all input[type="..."]
-  border-radius: 3px !important;
+  border-radius: 4px !important;
+}
+
+@mixin peertube-button-small {
+  padding: 0 10px !important;
+  font-size: 14px !important;
 }
 
 @mixin peertube-button-link {
@@ -431,6 +336,8 @@
     position: relative;
     display: inline-block;
     width: $width;
+    height: $width;
+    line-height: $width;
     top: $top;
     right: $right;
 
@@ -536,7 +443,7 @@
   }
 
   &.peertube-select-button {
-    @include grey-button;
+    @include secondary-button;
 
     select {
       font-weight: $font-semibold;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index eacda0e2a..7e3c3e317 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -15,7 +15,6 @@ $grey-background-color: #E5E5E5;
 $grey-background-hover-color: #EFEFEF;
 $grey-foreground-color: #585858;
 $grey-foreground-hover-color: #303030;
-$grey-button-outline-color: color.scale($grey-foreground-color, $alpha: -95%);
 
 $main-color: hsl(24, 90%, 50%);
 $main-color-lighter: color.adjust($main-color, $lightness: 10%);
@@ -35,7 +34,7 @@ $red: #dc3545;
 $green: #198754;
 $white: #fff;
 
-$button-font-size: 15px;
+$button-font-size: 1rem;
 
 $header-height: 84px;