diff --git a/front/scripts/fix-fomantic-css.py b/front/scripts/fix-fomantic-css.py
index 0cdb4b5ff..0e9f51771 100755
--- a/front/scripts/fix-fomantic-css.py
+++ b/front/scripts/fix-fomantic-css.py
@@ -37,6 +37,11 @@ GLOBAL_REPLACES = [
     ("#e76b00", "var(--vibrant-active-color)"),
     ("#e55b00", "var(--vibrant-focus-color)"),
     ("#f17000", "var(--vibrant-focus-color)"),
+    (".teal", ".accent"),
+    ("#00B5AD", "var(--accent-color)"),
+    ("#009c95", "var(--accent-hover-color)"),
+    ("#00827c", "var(--accent-active-color)"),
+    ("#008c86", "var(--accent-focus-color)"),
     (".green", ".success"),
     ("#21BA45", "var(--success-color)"),
     ("#2ECC40", "var(--success-color)"),
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index a35614a23..961213ec1 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -18,7 +18,7 @@
               <i class="wrench icon"></i>
               <div
                 v-if="moderationNotifications > 0"
-                :class="['ui', 'teal', 'mini', 'bottom floating', 'circular', 'label']">{{ moderationNotifications }}</div>
+                :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']">{{ moderationNotifications }}</div>
               <div class="menu">
                 <div class="header">
                   <translate translate-context="Sidebar/Admin/Title/Noun">Administration</translate>
@@ -31,7 +31,7 @@
                   <div
                     v-if="$store.state.ui.notifications.pendingReviewEdits > 0"
                     :title="labels.pendingReviewEdits"
-                    :class="['ui', 'circular', 'mini', 'right floated', 'teal', 'label']">
+                    :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']">
                     {{ $store.state.ui.notifications.pendingReviewEdits }}</div>
                   <translate translate-context="*/*/*/Noun">Library</translate>
                 </router-link>
@@ -42,7 +42,7 @@
                   <div
                     v-if="$store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests> 0"
                     :title="labels.pendingReviewReports"
-                    :class="['ui', 'circular', 'mini', 'right floated', 'teal', 'label']">{{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }}</div>
+                    :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']">{{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }}</div>
                   <translate translate-context="*/Moderation/*">Moderation</translate>
                 </router-link>
                 <router-link
@@ -70,7 +70,7 @@
         <router-link class="item" v-if="$store.state.auth.authenticated" :title="labels.notifications" :to="{name: 'notifications'}">
           <i class="bell icon"></i><div
             v-if="$store.state.ui.notifications.inbox + additionalNotifications > 0"
-            :class="['ui', 'teal', 'mini', 'bottom floating', 'circular', 'label']">{{ $store.state.ui.notifications.inbox + additionalNotifications }}</div>
+            :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']">{{ $store.state.ui.notifications.inbox + additionalNotifications }}</div>
         </router-link>
         <div class="item">
           <div class="ui user-dropdown dropdown" >
diff --git a/front/src/components/audio/EmbedWizard.vue b/front/src/components/audio/EmbedWizard.vue
index 96fecc200..81103879d 100644
--- a/front/src/components/audio/EmbedWizard.vue
+++ b/front/src/components/audio/EmbedWizard.vue
@@ -27,7 +27,7 @@
           </template>
         </div>
         <div class="field">
-          <button @click="copy" class="ui right teal labeled icon floated button"><i class="copy icon"></i><translate translate-context="*/*/Button.Label/Short, Verb">Copy</translate></button>
+          <button @click="copy" class="ui right accent labeled icon floated button"><i class="copy icon"></i><translate translate-context="*/*/Button.Label/Short, Verb">Copy</translate></button>
           <label for="embed-width"><translate translate-context="Popup/Embed/Input.Label/Noun">Embed code</translate></label>
           <p><translate translate-context="Popup/Embed/Paragraph">Copy/paste this code in your website HTML</translate></p>
           <textarea ref="textarea" :value="embedCode" rows="5" readonly>
diff --git a/front/src/components/common/CopyInput.vue b/front/src/components/common/CopyInput.vue
index 3e862ef9e..0878e4edf 100644
--- a/front/src/components/common/CopyInput.vue
+++ b/front/src/components/common/CopyInput.vue
@@ -14,7 +14,7 @@
 export default {
   props: {
     value: {type: String},
-    buttonClasses: {type: String, default: 'teal'},
+    buttonClasses: {type: String, default: 'accent'},
     id: {type: String, default: 'copy-input'},
   },
   data () {
diff --git a/front/src/components/manage/ChannelsTable.vue b/front/src/components/manage/ChannelsTable.vue
index fa57aefde..794124cdb 100644
--- a/front/src/components/manage/ChannelsTable.vue
+++ b/front/src/components/manage/ChannelsTable.vue
@@ -70,7 +70,7 @@
               </router-link>
               <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.attributed_to.domain)" :title="scope.obj.attributed_to.domain">{{ scope.obj.attributed_to.domain }}</span>
             </template>
-            <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.attributed_to.domain)">
+            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.attributed_to.domain)">
               <i class="home icon"></i>
               <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
             </span>
diff --git a/front/src/components/manage/library/AlbumsTable.vue b/front/src/components/manage/library/AlbumsTable.vue
index b9fd35764..af7c82d1a 100644
--- a/front/src/components/manage/library/AlbumsTable.vue
+++ b/front/src/components/manage/library/AlbumsTable.vue
@@ -61,7 +61,7 @@
               </router-link>
               <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span>
             </template>
-            <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
               <i class="home icon"></i>
               <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
             </span>
diff --git a/front/src/components/manage/library/ArtistsTable.vue b/front/src/components/manage/library/ArtistsTable.vue
index 46f183364..3790d92e0 100644
--- a/front/src/components/manage/library/ArtistsTable.vue
+++ b/front/src/components/manage/library/ArtistsTable.vue
@@ -65,7 +65,7 @@
               </router-link>
               <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span>
             </template>
-            <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
               <i class="home icon"></i>
               <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
             </span>
diff --git a/front/src/components/manage/library/LibrariesTable.vue b/front/src/components/manage/library/LibrariesTable.vue
index f0b1276b3..e3d487774 100644
--- a/front/src/components/manage/library/LibrariesTable.vue
+++ b/front/src/components/manage/library/LibrariesTable.vue
@@ -71,7 +71,7 @@
               </router-link>
               <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span>
             </template>
-            <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
               <i class="home icon"></i>
               <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
             </span>
diff --git a/front/src/components/manage/library/TracksTable.vue b/front/src/components/manage/library/TracksTable.vue
index a9a36b5ac..d44558da9 100644
--- a/front/src/components/manage/library/TracksTable.vue
+++ b/front/src/components/manage/library/TracksTable.vue
@@ -69,7 +69,7 @@
               </router-link>
               <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span>
             </template>
-            <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
               <i class="home icon"></i>
               <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
             </span>
diff --git a/front/src/components/manage/library/UploadsTable.vue b/front/src/components/manage/library/UploadsTable.vue
index 974a2176e..cdcb7e1bf 100644
--- a/front/src/components/manage/library/UploadsTable.vue
+++ b/front/src/components/manage/library/UploadsTable.vue
@@ -95,7 +95,7 @@
               </router-link>
               <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span>
             </template>
-            <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
               <i class="home icon"></i>
               <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
             </span>
diff --git a/front/src/components/manage/moderation/AccountsTable.vue b/front/src/components/manage/moderation/AccountsTable.vue
index c0cb75fcc..c613c4968 100644
--- a/front/src/components/manage/moderation/AccountsTable.vue
+++ b/front/src/components/manage/moderation/AccountsTable.vue
@@ -55,7 +55,7 @@
               </router-link>
               <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span>
             </template>
-            <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
               <i class="home icon"></i>
               <translate translate-context="Content/Moderation/*/Short, Noun">Local account</translate>
             </span>
diff --git a/front/src/components/tags/List.vue b/front/src/components/tags/List.vue
index c3210010a..049c31e54 100644
--- a/front/src/components/tags/List.vue
+++ b/front/src/components/tags/List.vue
@@ -8,7 +8,7 @@
       :key="tag">
       #{{ tag|truncate(truncateSize) }}
     </router-link>
-    <div role="button" @click.prevent="honorLimit = false" class="ui circular inverted teal label" v-if="showMore && toDisplay.length < tags.length">
+    <div role="button" @click.prevent="honorLimit = false" class="ui circular inverted accent label" v-if="showMore && toDisplay.length < tags.length">
       <translate translate-context="Content/*/Button/Label/Verb" :translate-params="{count: tags.length - toDisplay.length}" :translate-n="tags.length - toDisplay.length" translate-plural="Show %{ count } more tags">Show 1 more tag</translate>
     </div>
   </div>
diff --git a/front/src/style/_vars.scss b/front/src/style/_vars.scss
index 2d574c68b..dba9c2eef 100644
--- a/front/src/style/_vars.scss
+++ b/front/src/style/_vars.scss
@@ -12,7 +12,6 @@ $success-hover-color: #16ab39 !default;
 $success-active-color: #198f35 !default;
 $success-focus-color: var(--$success-hover-color) !default;
 
-
 $primary-color: #2185D0 !default;
 $primary-hover-color: #1678c2 !default;
 $primary-active-color: #1a69a4 !default;
@@ -28,6 +27,11 @@ $danger-hover-color: #ff392b !default;
 $danger-active-color: #b21e1e !default;
 $danger-focus-color: var(--danger-hover-color) !default;
 
+$accent-color: #00B5AD !default;
+$accent-hover-color: #009c95 !default;
+$accent-active-color: #00827c !default;
+$accent-focus-color: var(--accent-hover-color) !default;
+
 $link-color: #4183C4 !default;
 $link-text-decoration: none !default;
 $link-hover-color: #1e70bf !default;
diff --git a/front/src/views/admin/ChannelDetail.vue b/front/src/views/admin/ChannelDetail.vue
index e7f562e9f..0b9e0fb46 100644
--- a/front/src/views/admin/ChannelDetail.vue
+++ b/front/src/views/admin/ChannelDetail.vue
@@ -15,7 +15,7 @@
                   {{ object.artist.name | truncate(100) }}
                   <div class="sub header">
                     <template v-if="object.artist.is_local">
-                      <span class="ui tiny teal label">
+                      <span class="ui tiny accent label">
                         <i class="home icon"></i>
                         <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
                       </span>
diff --git a/front/src/views/admin/library/AlbumDetail.vue b/front/src/views/admin/library/AlbumDetail.vue
index d90b36bea..d1a07da37 100644
--- a/front/src/views/admin/library/AlbumDetail.vue
+++ b/front/src/views/admin/library/AlbumDetail.vue
@@ -15,7 +15,7 @@
                   {{ object.title | truncate(100) }}
                   <div class="sub header">
                     <template v-if="object.is_local">
-                      <span class="ui tiny teal label">
+                      <span class="ui tiny accent label">
                         <i class="home icon"></i>
                         <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
                       </span>
diff --git a/front/src/views/admin/library/ArtistDetail.vue b/front/src/views/admin/library/ArtistDetail.vue
index c6e64b2af..751e75b22 100644
--- a/front/src/views/admin/library/ArtistDetail.vue
+++ b/front/src/views/admin/library/ArtistDetail.vue
@@ -15,7 +15,7 @@
                   {{ object.name | truncate(100) }}
                   <div class="sub header">
                     <template v-if="object.is_local">
-                      <span class="ui tiny teal label">
+                      <span class="ui tiny accent label">
                         <i class="home icon"></i>
                         <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
                       </span>
diff --git a/front/src/views/admin/library/LibraryDetail.vue b/front/src/views/admin/library/LibraryDetail.vue
index 1e7cd35bf..82f5e80b8 100644
--- a/front/src/views/admin/library/LibraryDetail.vue
+++ b/front/src/views/admin/library/LibraryDetail.vue
@@ -14,7 +14,7 @@
                   {{ object.name | truncate(100) }}
                   <div class="sub header">
                     <template v-if="object.is_local">
-                      <span class="ui tiny teal label">
+                      <span class="ui tiny accent label">
                         <i class="home icon"></i>
                         <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
                       </span>
diff --git a/front/src/views/admin/library/TrackDetail.vue b/front/src/views/admin/library/TrackDetail.vue
index 55d8a1aa2..a820573c0 100644
--- a/front/src/views/admin/library/TrackDetail.vue
+++ b/front/src/views/admin/library/TrackDetail.vue
@@ -15,7 +15,7 @@
                   {{ object.title | truncate(100) }}
                   <div class="sub header">
                     <template v-if="object.is_local">
-                      <span class="ui tiny teal label">
+                      <span class="ui tiny accent label">
                         <i class="home icon"></i>
                         <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
                       </span>
diff --git a/front/src/views/admin/library/UploadDetail.vue b/front/src/views/admin/library/UploadDetail.vue
index ea338b05f..e10f29acd 100644
--- a/front/src/views/admin/library/UploadDetail.vue
+++ b/front/src/views/admin/library/UploadDetail.vue
@@ -15,7 +15,7 @@
                   {{ displayName(object) | truncate(100) }}
                   <div class="sub header">
                     <template v-if="object.is_local">
-                      <span class="ui tiny teal label">
+                      <span class="ui tiny accent label">
                         <i class="home icon"></i>
                         <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
                       </span>
diff --git a/front/src/views/admin/moderation/AccountsDetail.vue b/front/src/views/admin/moderation/AccountsDetail.vue
index aead3f1cc..b04910205 100644
--- a/front/src/views/admin/moderation/AccountsDetail.vue
+++ b/front/src/views/admin/moderation/AccountsDetail.vue
@@ -14,7 +14,7 @@
                   {{ object.full_username }}
                   <div class="sub header">
                     <template v-if="object.user">
-                      <span class="ui tiny teal label">
+                      <span class="ui tiny accent label">
                         <i class="home icon"></i>
                         <translate translate-context="Content/Moderation/*/Short, Noun">Local account</translate>
                       </span>
diff --git a/front/src/views/admin/moderation/Base.vue b/front/src/views/admin/moderation/Base.vue
index e8414ed2c..9bf5468b0 100644
--- a/front/src/views/admin/moderation/Base.vue
+++ b/front/src/views/admin/moderation/Base.vue
@@ -7,7 +7,7 @@
         <translate translate-context="*/Moderation/*/Noun">Reports</translate>
         <div
           v-if="$store.state.ui.notifications.pendingReviewReports > 0"
-          :class="['ui', 'circular', 'mini', 'right floated', 'teal', 'label']">{{ $store.state.ui.notifications.pendingReviewReports }}</div>
+          :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']">{{ $store.state.ui.notifications.pendingReviewReports }}</div>
       </router-link>
       <router-link
         class="ui item"
@@ -15,7 +15,7 @@
         <translate translate-context="*/Moderation/*/Noun">User Requests</translate>
         <div
           v-if="$store.state.ui.notifications.pendingReviewRequests > 0"
-          :class="['ui', 'circular', 'mini', 'right floated', 'teal', 'label']">{{ $store.state.ui.notifications.pendingReviewRequests }}</div>
+          :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']">{{ $store.state.ui.notifications.pendingReviewRequests }}</div>
       </router-link>
       <router-link
         class="ui item"