diff --git a/changes/changelog.d/fomentic.enhancement b/changes/changelog.d/fomentic.enhancement
new file mode 100644
index 000000000..0f6c4ad95
--- /dev/null
+++ b/changes/changelog.d/fomentic.enhancement
@@ -0,0 +1 @@
+Switched from Semantic-UI to Fomentic-UI
diff --git a/front/package.json b/front/package.json
index ebd520505..54cf3c8e1 100644
--- a/front/package.json
+++ b/front/package.json
@@ -21,7 +21,7 @@
     "lodash": "^4.17.10",
     "masonry-layout": "^4.2.2",
     "moment": "^2.22.2",
-    "semantic-ui-css": "^2.4.1",
+    "fomantic-ui-css": "^2.7",
     "showdown": "^1.8.6",
     "vue": "^2.5.17",
     "vue-gettext": "^2.1.0",
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index 994227c63..d66c17704 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -78,7 +78,7 @@
           class="two wide column control"
           @click.prevent.stop="previous"
           :disabled="emptyQueue">
-            <i :class="['ui', 'backward step', {'disabled': emptyQueue}, 'secondary', 'icon']"></i>
+            <i :class="['ui', 'backward step', {'disabled': emptyQueue}, 'icon']"></i>
         </span>
         <span
           role="button"
@@ -87,7 +87,7 @@
           :aria-label="labels.play"
           @click.prevent.stop="togglePlay"
           class="two wide column control">
-            <i :class="['ui', 'play', {'disabled': !currentTrack}, 'secondary', 'icon']"></i>
+            <i :class="['ui', 'play', {'disabled': !currentTrack}, 'icon']"></i>
         </span>
         <span
           role="button"
@@ -96,7 +96,7 @@
           :aria-label="labels.pause"
           @click.prevent.stop="togglePlay"
           class="two wide column control">
-            <i :class="['ui', 'pause', {'disabled': !currentTrack}, 'secondary', 'icon']"></i>
+            <i :class="['ui', 'pause', {'disabled': !currentTrack}, 'icon']"></i>
         </span>
         <span
           role="button"
@@ -105,7 +105,7 @@
           class="two wide column control"
           @click.prevent.stop="next"
           :disabled="!hasNext">
-            <i :class="['ui', {'disabled': !hasNext}, 'forward step', 'secondary', 'icon']" ></i>
+            <i :class="['ui', {'disabled': !hasNext}, 'forward step', 'icon']" ></i>
         </span>
         <div
           class="wide column control volume-control"
@@ -118,7 +118,7 @@
             :title="labels.unmute"
             :aria-label="labels.unmute"
             @click.prevent.stop="unmute">
-            <i class="volume off secondary icon"></i>
+            <i class="volume off icon"></i>
           </span>
           <span
             role="button"
@@ -126,7 +126,7 @@
             :title="labels.mute"
             :aria-label="labels.mute"
             @click.prevent.stop="mute">
-            <i class="volume down secondary icon"></i>
+            <i class="volume down icon"></i>
           </span>
           <span
             role="button"
@@ -134,7 +134,7 @@
             :title="labels.mute"
             :aria-label="labels.mute"
             @click.prevent.stop="mute">
-            <i class="volume up secondary icon"></i>
+            <i class="volume up icon"></i>
           </span>
           <input
             type="range"
@@ -152,7 +152,7 @@
             :aria-label="labels.loopingDisabled"
             @click.prevent.stop="$store.commit('player/looping', 1)"
             :disabled="!currentTrack">
-            <i :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'secondary', 'icon']"></i>
+            <i :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'icon']"></i>
           </span>
           <span
             role="button"
@@ -162,7 +162,7 @@
             v-if="looping === 1"
             :disabled="!currentTrack">
             <i
-              class="repeat secondary icon">
+              class="repeat icon">
               <span class="ui circular tiny orange label">1</span>
             </i>
           </span>
@@ -174,7 +174,7 @@
             :disabled="!currentTrack"
             @click.prevent.stop="$store.commit('player/looping', 0)">
             <i
-              class="repeat orange secondary icon">
+              class="repeat orange icon">
             </i>
           </span>
         </div>
@@ -187,7 +187,7 @@
           @click.prevent.stop="shuffle()"
           class="two wide column control">
           <div v-if="isShuffling" class="ui inline shuffling inverted tiny active loader"></div>
-          <i v-else :class="['ui', 'random', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
+          <i v-else :class="['ui', 'random', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
         </span>
         <div class="one wide column" v-if="!showVolume"></div>
         <span
@@ -199,8 +199,8 @@
           @click.prevent.stop="clean()"
           class="two wide column control">
           <i class="icons">
-            <i :class="['ui', 'trash', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
-            <i :class="['ui corner large inverted', 'list', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
+            <i :class="['ui', 'trash', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
+            <i :class="['ui corner inverted', 'list', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
           </i>
         </span>
       </div>
@@ -820,7 +820,7 @@ export default {
   vertical-align: middle;
 }
 
-.secondary.icon {
+.control .icon {
   font-size: 1.5em;
 }
 .progress-area .actions {
diff --git a/front/src/semantic.js b/front/src/semantic.js
index f5dad8192..206b59149 100644
--- a/front/src/semantic.js
+++ b/front/src/semantic.js
@@ -1,24 +1,24 @@
-// require('semantic-ui-css/components/accordion.min.js')
-require('semantic-ui-css/components/api.min.js')
-require('semantic-ui-css/components/checkbox.min.js')
-// require('semantic-ui-css/components/colorize.min.js')
-require('semantic-ui-css/components/dimmer.min.js')
-require('semantic-ui-css/components/dropdown.min.js')
-// require('semantic-ui-css/components/embed.min.js')
-// require('semantic-ui-css/components/form.min.js')
-require('semantic-ui-css/components/modal.min.js')
-// require('semantic-ui-css/components/nag.min.js')
-// require('semantic-ui-css/components/popup.min.js')
-require('semantic-ui-css/components/progress.min.js')
-// require('semantic-ui-css/components/rating.min.js')
-require('semantic-ui-css/components/search.min.js')
-// require('semantic-ui-css/components/shape.min.js')
-// require('semantic-ui-css/components/sidebar.min.js')
-require('semantic-ui-css/components/site.min.js')
-require('semantic-ui-css/components/state.min.js')
-require('semantic-ui-css/components/sticky.min.js')
-// require('semantic-ui-css/components/tab.min.js')
-require('semantic-ui-css/components/transition.min.js')
-// require('semantic-ui-css/components/video.min.js')
-require('semantic-ui-css/components/visibility.min.js')
-// require('semantic-ui-css/components/visit.min.js')
+// require('fomantic-ui-css/components/accordion.min.js')
+require('fomantic-ui-css/components/api.min.js')
+require('fomantic-ui-css/components/checkbox.min.js')
+// require('fomantic-ui-css/components/colorize.min.js')
+require('fomantic-ui-css/components/dimmer.min.js')
+require('fomantic-ui-css/components/dropdown.min.js')
+// require('fomantic-ui-css/components/embed.min.js')
+// require('fomantic-ui-css/components/form.min.js')
+require('fomantic-ui-css/components/modal.min.js')
+// require('fomantic-ui-css/components/nag.min.js')
+// require('fomantic-ui-css/components/popup.min.js')
+require('fomantic-ui-css/components/progress.min.js')
+// require('fomantic-ui-css/components/rating.min.js')
+require('fomantic-ui-css/components/search.min.js')
+// require('fomantic-ui-css/components/shape.min.js')
+// require('fomantic-ui-css/components/sidebar.min.js')
+require('fomantic-ui-css/components/site.min.js')
+require('fomantic-ui-css/components/state.min.js')
+require('fomantic-ui-css/components/sticky.min.js')
+// require('fomantic-ui-css/components/tab.min.js')
+require('fomantic-ui-css/components/transition.min.js')
+// require('fomantic-ui-css/components/video.min.js')
+require('fomantic-ui-css/components/visibility.min.js')
+// require('fomantic-ui-css/components/visit.min.js')
diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss
index 4c6c6d61e..a15f33956 100644
--- a/front/src/style/_main.scss
+++ b/front/src/style/_main.scss
@@ -10,66 +10,66 @@
   Import this file into your LESS project to use Semantic UI without build tools
 */
 
-// Those semantic-ui-css/*.scss don't exist in the package, but we create them
+// Those fomantic-ui-css/*.scss don't exist in the package, but we create them
 // via scripts/link-scss-files.sh on postinstall, so we can include theme
 // under a class namespace
 
 /* Global */
-@import "~semantic-ui-css/components/reset.css";
+@import "~fomantic-ui-css/components/reset.css";
 // we use our custom site css here to avoid loading google font
 @import "./site";
 
 /* Elements */
-@import "~semantic-ui-css/components/button.css";
-@import "~semantic-ui-css/components/container.css";
-@import "~semantic-ui-css/components/divider.css";
-// @import "~semantic-ui-css/components/flag.css";
-@import "~semantic-ui-css/components/header.css";
-@import "~semantic-ui-css/components/icon.css";
-@import "~semantic-ui-css/components/image.css";
-@import "~semantic-ui-css/components/input.css";
-@import "~semantic-ui-css/components/label.css";
-@import "~semantic-ui-css/components/list.css";
-@import "~semantic-ui-css/components/loader.css";
-@import "~semantic-ui-css/components/placeholder.css";
-// @import "~semantic-ui-css/components/rail.css";
-// @import "~semantic-ui-css/components/reveal.css";
-@import "~semantic-ui-css/components/segment.css";
-@import "~semantic-ui-css/components/step.css";
+@import "~fomantic-ui-css/components/button.css";
+@import "~fomantic-ui-css/components/container.css";
+@import "~fomantic-ui-css/components/divider.css";
+// @import "~fomantic-ui-css/components/flag.css";
+@import "~fomantic-ui-css/components/header.css";
+@import "~fomantic-ui-css/components/icon.css";
+@import "~fomantic-ui-css/components/image.css";
+@import "~fomantic-ui-css/components/input.css";
+@import "~fomantic-ui-css/components/label.css";
+@import "~fomantic-ui-css/components/list.css";
+@import "~fomantic-ui-css/components/loader.css";
+@import "~fomantic-ui-css/components/placeholder.css";
+// @import "~fomantic-ui-css/components/rail.css";
+// @import "~fomantic-ui-css/components/reveal.css";
+@import "~fomantic-ui-css/components/segment.css";
+@import "~fomantic-ui-css/components/step.css";
 
 /* Collections */
-// @import "~semantic-ui-css/components/breadcrumb.css";
-@import "~semantic-ui-css/components/form.css";
-@import "~semantic-ui-css/components/grid.css";
-@import "~semantic-ui-css/components/menu.css";
-@import "~semantic-ui-css/components/message.css";
-@import "~semantic-ui-css/components/table.css";
+// @import "~fomantic-ui-css/components/breadcrumb.css";
+@import "~fomantic-ui-css/components/form.css";
+@import "~fomantic-ui-css/components/grid.css";
+@import "~fomantic-ui-css/components/menu.css";
+@import "~fomantic-ui-css/components/message.css";
+@import "~fomantic-ui-css/components/table.css";
 
 /* Views */
-// @import "~semantic-ui-css/components/ad.css";
-@import "~semantic-ui-css/components/card.css";
-// @import "~semantic-ui-css/components/comment.css";
-// @import "~semantic-ui-css/components/feed.css";
-@import "~semantic-ui-css/components/item.css";
-@import "~semantic-ui-css/components/statistic.css";
+// @import "~fomantic-ui-css/components/ad.css";
+@import "~fomantic-ui-css/components/card.css";
+// @import "~fomantic-ui-css/components/comment.css";
+// @import "~fomantic-ui-css/components/feed.css";
+@import "~fomantic-ui-css/components/item.css";
+@import "~fomantic-ui-css/components/statistic.css";
 
 /* Modules */
-// @import "~semantic-ui-css/components/accordion.css";
-@import "~semantic-ui-css/components/checkbox.css";
-@import "~semantic-ui-css/components/dimmer.css";
-@import "~semantic-ui-css/components/dropdown.css";
-// @import "~semantic-ui-css/components/embed.css";
-@import "~semantic-ui-css/components/modal.css";
-// @import "~semantic-ui-css/components/nag.css";
-@import "~semantic-ui-css/components/popup.css";
-@import "~semantic-ui-css/components/progress.css";
-// @import "~semantic-ui-css/components/rating.css";
-@import "~semantic-ui-css/components/search.css";
-// @import "~semantic-ui-css/components/shape.css";
-@import "~semantic-ui-css/components/sidebar.css";
-@import "~semantic-ui-css/components/sticky.css";
-@import "~semantic-ui-css/components/tab.css";
-@import "~semantic-ui-css/components/transition.css";
+// @import "~fomantic-ui-css/components/accordion.css";
+@import "~fomantic-ui-css/components/checkbox.css";
+@import "~fomantic-ui-css/components/dimmer.css";
+@import "~fomantic-ui-css/components/dropdown.css";
+// @import "~fomantic-ui-css/components/embed.css";
+@import "~fomantic-ui-css/components/modal.css";
+// @import "~fomantic-ui-css/components/nag.css";
+@import "~fomantic-ui-css/components/popup.css";
+@import "~fomantic-ui-css/components/progress.css";
+// @import "~fomantic-ui-css/components/rating.css";
+@import "~fomantic-ui-css/components/search.css";
+// @import "~fomantic-ui-css/components/shape.css";
+@import "~fomantic-ui-css/components/sidebar.css";
+@import "~fomantic-ui-css/components/sticky.css";
+@import "~fomantic-ui-css/components/tab.css";
+@import "~fomantic-ui-css/components/transition.css";
 
 
 
diff --git a/front/yarn.lock b/front/yarn.lock
index a00f8dc13..1959e9e1a 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -3976,6 +3976,13 @@ follow-redirects@^1.0.0:
   dependencies:
     debug "^3.2.6"
 
+fomantic-ui-css@^2.7:
+  version "2.7.6"
+  resolved "https://registry.yarnpkg.com/fomantic-ui-css/-/fomantic-ui-css-2.7.6.tgz#8af84c0afce21142bf663979cf7452155562e6e2"
+  integrity sha512-oruD/DoMDZGSfK6fE3EnWKGad3vbhpiOtXrCwS0Bi+3QWXHwQsDU0k6P0Q8HzawoLXqHff83LmTDJWST5ARTxw==
+  dependencies:
+    jquery "^3.4.0"
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
@@ -5058,7 +5065,7 @@ javascript-stringify@^1.6.0:
   resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-1.6.0.tgz#142d111f3a6e3dae8f4a9afd77d45855b5a9cce3"
   integrity sha1-FC0RHzpuPa6PSpr9d9RYVbWpzOM=
 
-jquery@x.*:
+jquery@^3.4.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
   integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
@@ -7870,13 +7877,6 @@ selfsigned@^1.10.4:
   dependencies:
     node-forge "0.7.5"
 
-semantic-ui-css@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/semantic-ui-css/-/semantic-ui-css-2.4.1.tgz#f5aea39fafb787cbd905ec724272a3f9cba9004a"
-  integrity sha512-Pkp0p9oWOxlH0kODx7qFpIRYpK1T4WJOO4lNnpNPOoWKCrYsfHqYSKgk5fHfQtnWnsAKy7nLJMW02bgDWWFZFg==
-  dependencies:
-    jquery x.*
-
 "semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
   version "5.7.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b"