diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 82cc1cbdb..062f0b8c5 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -282,7 +282,7 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
                   {{ currentTrack.artistName }}
                 </router-link>
                 <template v-if="currentTrack.albumId !== -1">
-                  /
+                  <span class="middle slash symbol" />
                   <router-link
                     class="discrete link album"
                     :to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}"
@@ -388,8 +388,8 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
                 <span class="right floated timer total">{{ time.parse(Math.round(duration)) }}</span>
               </template>
               <template v-else>
-                <span class="left floated timer">00:00</span>
-                <span class="right floated timer">00:00</span>
+                <span class="left floated timer">{{ durationFormatted(0) }}</span>
+                <span class="right floated timer">{{ durationFormatted(0) }}</span>
               </template>
             </div>
           </div>
@@ -417,7 +417,7 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
                 <div>
                   {{ $t('components.Queue.queuePosition', {index: currentIndex +1, length: queue.length}) }}
                   <template v-if="!$store.state.radios.running">
-                    -
+                    <span class="middle ellipses symbol" />
                     <span :title="labels.duration">
                       {{ timeLeft }}
                     </span>
diff --git a/front/src/components/audio/ChannelForm.vue b/front/src/components/audio/ChannelForm.vue
index 7ae918d63..fc1163c2c 100644
--- a/front/src/components/audio/ChannelForm.vue
+++ b/front/src/components/audio/ChannelForm.vue
@@ -225,7 +225,7 @@ defineExpose({
           </label>
           <div class="ui left labeled input">
             <div class="ui basic label">
-              @
+              <span class="at symbol" />
             </div>
             <input
               v-model="newValues.username"
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index 26a1386d3..803f93772 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -191,7 +191,7 @@ const hideArtist = () => {
                 {{ currentTrack.artistName }}
               </router-link>
               <template v-if="currentTrack.albumId !== -1">
-                /
+                <span class="middle slash symbol" />
                 <router-link
                   class="discrete link"
                   :to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}"
@@ -218,7 +218,8 @@ const hideArtist = () => {
             <div class="meta">
               {{ currentTrack.artistName }}
               <template v-if="currentTrack.albumId !== -1">
-                / {{ currentTrack.albumTitle }}
+                <span class="middle slash symbol" />
+                {{ currentTrack.albumTitle }}
               </template>
             </div>
           </div>
@@ -254,7 +255,7 @@ const hideArtist = () => {
               >
                 {{ time.parse(Math.round(currentTime)) }}
               </span>
-              |
+              <span class="middle pipe symbol" />
               <span class="total">{{ time.parse(Math.round(duration)) }}</span>
             </template>
           </div>
@@ -276,7 +277,7 @@ const hideArtist = () => {
                   class="ui circular tiny vibrant label"
                 >
                   <template v-if="looping === LoopingMode.LoopTrack">1</template>
-                  <template v-else-if="looping === LoopingMode.LoopQueue">&infin;</template>
+                  <span v-else-if="looping === LoopingMode.LoopQueue" class="infinity symbol" />
                 </span>
               </i>
             </button>
diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue
index 12a3846d5..3c17c5633 100644
--- a/front/src/components/audio/album/Card.vue
+++ b/front/src/components/audio/album/Card.vue
@@ -58,7 +58,10 @@ const imageUrl = computed(() => props.album.cover?.urls.original
       </div>
     </div>
     <div class="extra content">
-      <span v-if="album.release_date">{{ momentFormat(new Date(album.release_date), 'Y') }} · </span>
+      <span v-if="album.release_date">
+        {{ momentFormat(new Date(album.release_date), 'Y') }}
+        <span class="middle middledot symbol" />
+      </span>
       <span>
         {{ $t('components.audio.album.Card.trackCount', album.tracks_count) }}
       </span>
diff --git a/front/src/components/audio/podcast/MobileRow.vue b/front/src/components/audio/podcast/MobileRow.vue
index a9218811a..ed029dd4c 100644
--- a/front/src/components/audio/podcast/MobileRow.vue
+++ b/front/src/components/audio/podcast/MobileRow.vue
@@ -116,7 +116,7 @@ const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.
           class="really discrete"
           :date="track.creation_date"
         />
-        <span>&#183;</span>
+        <span class="nospace middledot symbol" />
         <human-duration
           v-if="track.uploads[0] && track.uploads[0].duration"
           :duration="track.uploads[0].duration"
@@ -126,7 +126,8 @@ const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.
         v-else
         class="track-meta mobile"
       >
-        {{ track.artist?.name }} <span>&#183;</span>
+        {{ track.artist?.name }}
+        <span class="nospace middledot symbol" />
         <human-duration
           v-if="track.uploads[0] && track.uploads[0].duration"
           :duration="track.uploads[0].duration"
diff --git a/front/src/components/audio/track/MobileRow.vue b/front/src/components/audio/track/MobileRow.vue
index 0bebd35e7..391878875 100644
--- a/front/src/components/audio/track/MobileRow.vue
+++ b/front/src/components/audio/track/MobileRow.vue
@@ -109,7 +109,8 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.ac
         {{ track.title }}
       </p>
       <p class="track-meta mobile">
-        {{ track.artist?.name }} <span>&#183;</span>
+        {{ track.artist?.name }}
+        <span class="middle middledot symbol" />
         <human-duration
           v-if="track.uploads[0] && track.uploads[0].duration"
           :duration="track.uploads[0].duration"
diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue
index 9937fc62f..447af4a46 100644
--- a/front/src/components/audio/track/Widget.vue
+++ b/front/src/components/audio/track/Widget.vue
@@ -170,7 +170,8 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
                   class="left floated"
                   :to="{name: 'profile.overview', params: {username: object.user.username}}"
                 >
-                  @{{ object.user.username }}
+                  <span class="at symbol" />
+                  {{ object.user.username }}
                 </router-link>
                 <span class="right floated"><human-date :date="object.creation_date" /></span>
               </div>
diff --git a/front/src/components/auth/LoginForm.vue b/front/src/components/auth/LoginForm.vue
index def7ce0f3..d08268730 100644
--- a/front/src/components/auth/LoginForm.vue
+++ b/front/src/components/auth/LoginForm.vue
@@ -94,7 +94,7 @@ const submit = async () => {
         <label for="username-field">
           {{ $t('components.auth.LoginForm.usernameFieldLabel') }}
           <template v-if="showSignup">
-            |
+            <span class="middle pipe symbol" />
             <router-link :to="{path: '/signup'}">
               {{ $t('components.auth.LoginForm.createAccountLink') }}
             </router-link>
diff --git a/front/src/components/channels/UploadForm.vue b/front/src/components/channels/UploadForm.vue
index 8bd755395..7cbfdb9da 100644
--- a/front/src/components/channels/UploadForm.vue
+++ b/front/src/components/channels/UploadForm.vue
@@ -529,7 +529,10 @@ const labels = computed(() => ({
                 <template v-if="file.response?.uuid">
                   {{ humanSize(file.size ?? 0) }}
                   <template v-if="file.response.duration">
-                    · <human-duration :duration="file.response.duration" />
+                    <span class="middle middledot symbol" />
+                    <human-duration
+                      :duration="file.response.duration"
+                    />
                   </template>
                 </template>
                 <template v-else>
@@ -548,14 +551,18 @@ const labels = computed(() => ({
                   >
                     {{ $t('components.channels.UploadForm.pendingStatus') }}
                   </span>
-                  · {{ humanSize(file.size ?? 0) }}
-                  · {{ parseFloat(file.progress ?? '0') }}%
+                  <span class="middle middledot symbol" />
+                  {{ humanSize(file.size ?? 0) }}
+                  <span class="middle middledot symbol" />
+                  {{ parseFloat(file.progress ?? '0') }}
+                  <span class="percent symbol" />
                 </template>
-                · <a @click.stop.prevent="remove(file)">
+                <span class="middle middledot symbol" />
+                <a @click.stop.prevent="remove(file)">
                   {{ $t('components.channels.UploadForm.removeUpload') }}
                 </a>
                 <template v-if="file.error">
-                  ·
+                  <span class="middle middledot symbol" />
                   <a @click.stop.prevent="retry(file)">
                     {{ $t('components.channels.UploadForm.retryUpload') }}
                   </a>
diff --git a/front/src/components/common/UserLink.vue b/front/src/components/common/UserLink.vue
index 78c840a8d..1b215815c 100644
--- a/front/src/components/common/UserLink.vue
+++ b/front/src/components/common/UserLink.vue
@@ -33,6 +33,6 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${userColor.valu
       >{{ user.username[0] }}</span>
       &nbsp;
     </template>
-    @{{ user.username }}
+    {{ $t('components.common.UserLink.username', {username: user.username}) }}
   </span>
 </template>
diff --git a/front/src/components/common/UserModal.vue b/front/src/components/common/UserModal.vue
index af08ad914..2d5dee2e1 100644
--- a/front/src/components/common/UserModal.vue
+++ b/front/src/components/common/UserModal.vue
@@ -89,7 +89,10 @@ const labels = computed(() => ({
             @click="[$emit('update:show', false), emit('showLanguageModalEvent')]"
           >
             <i class="language icon user-modal list-icon" />
-            <span class="user-modal list-item">{{ labels.language }}:</span>
+            <span class="user-modal list-item">
+              {{ labels.language }}
+              <span class="left colon symbol" />
+            </span>
             <div class="right floated">
               <span class="user-modal list-item">{{ $language.available[$language.current] }}</span>
               <i class="action-hint chevron right icon" />
@@ -103,7 +106,10 @@ const labels = computed(() => ({
             @click="[$emit('update:show', false), emit('showThemeModalEvent')]"
           >
             <i class="palette icon user-modal list-icon" />
-            <span class="user-modal list-item">{{ labels.theme }}:</span>
+            <span class="user-modal list-item">
+              {{ labels.theme }}
+              <span class="left colon symbol" />
+            </span>
             <div class="right floated">
               <span class="user-modal list-item"> {{ themes.find(x => x.key === theme)?.name }}</span>
               <i class="action-hint chevron right icon user-modal" />
diff --git a/front/src/components/library/AlbumBase.vue b/front/src/components/library/AlbumBase.vue
index 540204f37..018a274aa 100644
--- a/front/src/components/library/AlbumBase.vue
+++ b/front/src/components/library/AlbumBase.vue
@@ -255,7 +255,10 @@ const remove = async () => {
                 v-if="object.release_date || (totalTracks > 0)"
                 class="ui small hidden divider"
               />
-              <span v-if="object.release_date">{{ momentFormat(new Date(object.release_date ?? '1970-01-01'), 'Y') }} &middot; </span>
+              <template v-if="object.release_date">
+                {{ momentFormat(new Date(object.release_date ?? '1970-01-01'), 'Y') }}
+                <span class="middle middledot symbol" />
+              </template>
               <template v-if="totalTracks > 0">
                 <span
                   v-if="isSerie"
@@ -266,7 +269,8 @@ const remove = async () => {
                   v-else
                 >
                   {{ $t('components.library.AlbumBase.trackCount', {tracks_count: totalTracks}) }}
-                </span> ·
+                </span>
+                <span class="middle middledot symbol" />
               </template>
               <human-duration
                 v-if="totalDuration > 0"
diff --git a/front/src/components/library/FileUpload.vue b/front/src/components/library/FileUpload.vue
index 4bae31256..79ff649e8 100644
--- a/front/src/components/library/FileUpload.vue
+++ b/front/src/components/library/FileUpload.vue
@@ -305,13 +305,17 @@ useEventListener(window, 'beforeunload', (event) => {
           v-else-if="files.length > uploadedFilesCount + erroredFilesCount"
           class="ui warning label"
         >
-          {{ uploadedFilesCount + erroredFilesCount }}/{{ files.length }}
+          {{ uploadedFilesCount + erroredFilesCount }}
+          <span class="nospace slash symbol" />
+          {{ files.length }}
         </div>
         <div
           v-else
           :class="['ui', {'success': erroredFilesCount === 0}, {'danger': erroredFilesCount > 0}, 'label']"
         >
-          {{ uploadedFilesCount + erroredFilesCount }}/{{ files.length }}
+          {{ uploadedFilesCount + erroredFilesCount }}
+          <span class="nospace slash symbol" />
+          {{ files.length }}
         </div>
       </a>
       <a
@@ -330,13 +334,17 @@ useEventListener(window, 'beforeunload', (event) => {
           v-else-if="processableFiles > processedFilesCount"
           class="ui warning label"
         >
-          {{ processedFilesCount }}/{{ processableFiles }}
+          {{ processedFilesCount }}
+          <span class="nospace slash symbol" />
+          {{ processableFiles }}
         </div>
         <div
           v-else
           :class="['ui', {'success': uploads.errored === 0}, {'danger': uploads.errored > 0}, 'label']"
         >
-          {{ processedFilesCount }}/{{ processableFiles }}
+          {{ processedFilesCount }}
+          <span class="nospace slash symbol" />
+          {{ processableFiles }}
         </div>
       </a>
     </div>
@@ -467,7 +475,7 @@ useEventListener(window, 'beforeunload', (event) => {
                   >
                     {{ $t('components.library.FileUpload.uploadingStatusLabel') }}
                   </span>
-                  ({{ parseFloat(file.progress ?? '0.00') }}%)
+                  {{ $t('components.library.FileUpload.uploadingProgress', {percent: parseFloat(file.progress ?? '0.00')}) }}
                 </span>
                 <span
                   v-else
diff --git a/front/src/components/library/FsBrowser.vue b/front/src/components/library/FsBrowser.vue
index 24bf771a5..a1640da9c 100644
--- a/front/src/components/library/FsBrowser.vue
+++ b/front/src/components/library/FsBrowser.vue
@@ -54,7 +54,7 @@ const handleClick = (entry: FSEntry) => {
       >
         <i class="folder icon" />
         <div class="content">
-          <div class="header">..</div>
+          <div class="header doubledot symbol" />
         </div>
       </a>
       <a
diff --git a/front/src/components/library/ImportStatusModal.vue b/front/src/components/library/ImportStatusModal.vue
index 0fec3699e..620fef4b9 100644
--- a/front/src/components/library/ImportStatusModal.vue
+++ b/front/src/components/library/ImportStatusModal.vue
@@ -131,7 +131,9 @@ const getErrorData = (upload: Upload) => {
                       v-for="row in getErrorData(upload).errorRows"
                       :key="row.key"
                     >
-                      {{ row.key }}: {{ row.value }}
+                      {{ row.key }}
+                      <span class="left colon symbol" />
+                      {{ row.value }}
                     </li>
                   </ul>
                 </td>
diff --git a/front/src/components/moderation/ReportModal.vue b/front/src/components/moderation/ReportModal.vue
index 120f5e587..4cc0c4067 100644
--- a/front/src/components/moderation/ReportModal.vue
+++ b/front/src/components/moderation/ReportModal.vue
@@ -127,7 +127,9 @@ watchEffect(async () => {
     >
       {{ $t('components.moderation.ReportModal.reportModalHeader') }}
       <div class="ui sub header">
-        {{ target.typeLabel }} - {{ target.label }}
+        {{ target.typeLabel }}
+        <span class="middle hyphen symbol" />
+        {{ target.label }}
       </div>
     </h2>
     <div class="scrolling content">
diff --git a/front/src/components/tags/List.vue b/front/src/components/tags/List.vue
index 776df92b7..1d3186e57 100644
--- a/front/src/components/tags/List.vue
+++ b/front/src/components/tags/List.vue
@@ -38,7 +38,8 @@ const tags = computed(() => {
       :to="{name: props.detailRoute, params: { id: tag } }"
       :class="['ui', 'circular', 'hashtag', 'label', props.labelClasses]"
     >
-      #{{ truncate(tag, props.truncateSize) }}
+      <span class="hashtag symbol" />
+      {{ truncate(tag, props.truncateSize) }}
     </router-link>
     <div
       v-if="props.showMore && tags.length < props.tags.length"
diff --git a/front/src/components/vui/Pagination.vue b/front/src/components/vui/Pagination.vue
index fe2e1b798..40b4dc672 100644
--- a/front/src/components/vui/Pagination.vue
+++ b/front/src/components/vui/Pagination.vue
@@ -97,7 +97,7 @@ const labels = computed(() => ({
           href="#"
           class="item disabled"
         >
-          <span>…</span>
+          <span class="nospace ellipses symbol" />
         </a>
         <a
           v-else
diff --git a/front/src/locales/en.json b/front/src/locales/en.json
index 342269f00..854ab99e0 100644
--- a/front/src/locales/en.json
+++ b/front/src/locales/en.json
@@ -749,6 +749,9 @@
                 "cancelButton": "Cancel",
                 "updateButton": "Update description"
             },
+            "UserLink": {
+                "username": "{'@'}{username}"
+            },
             "UserMenu": {
                 "profileLabel": "Profile",
                 "settingsLabel": "Settings",
@@ -999,6 +1002,7 @@
                 "retryButton": "Retry failed uploads",
                 "uploadedStatusLabel": "Uploaded",
                 "uploadingStatusLabel": "Uploading…",
+                "uploadingProgress": "{percent}%",
                 "pendingStatusLabel": "Pending",
                 "serverUploadHeader": "Import music from your server",
                 "uploadFailureHeader": "Error while launching import",
diff --git a/front/src/style/globals/_utils.scss b/front/src/style/globals/_utils.scss
index 2b4e5c0e7..d40dec459 100644
--- a/front/src/style/globals/_utils.scss
+++ b/front/src/style/globals/_utils.scss
@@ -1,10 +1,11 @@
-
 .center.aligned.menu {
   justify-content: center;
 }
+
 .text.center.aligned {
   text-align: center;
 }
+
 .ellipsis:not(.icon) {
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -24,9 +25,11 @@
 a {
   cursor: pointer;
 }
+
 .segment.hidden {
   display: none;
 }
+
 .hidden:not(.divider) {
   display: none !important;
 }
@@ -53,21 +56,25 @@ a {
     display: none !important;
   }
 }
+
 .desktop-and-below {
   @include media(">=desktop") {
     display: none !important;
   }
 }
+
 .tablet-and-up {
   @include media("<tablet") {
     display: none !important;
   }
 }
+
 .tablet-and-below {
   @include media(">=tablet") {
     display: none !important;
   }
 }
+
 .mobile-only {
   @include media(">tablet") {
     display: none !important;
@@ -91,7 +98,7 @@ a {
 }
 
 span.diff.added {
-  background-color:rgba(0, 255, 0, 0.25);
+  background-color: rgba(0, 255, 0, 0.25);
 }
 
 
@@ -106,13 +113,149 @@ span.diff.removed {
 .discrete {
   color: var(--discrete-text-color);
 }
+
 .really.discrete {
   color: var(--really-discrete-text-color);
 }
 
 .ui.inverted.dimmer {
   background-color: var(--dimmer-background);
-  > .ui.dimmer {
+
+  >.ui.dimmer {
     color: var(--dimmer-color);
   }
 }
+
+.symbol {
+  &.at::after {
+    content: "@";
+  }
+
+  &.slash {
+    &.left::after {
+      padding-right: 0.25em;
+      content: "/";
+    }
+
+    &.right::after {
+      padding-left: 0.25em;
+      content: "/";
+    }
+
+    &.middle::after {
+      padding: 0.25em;
+      content: "/";
+    }
+
+    &.nospace::after {
+      content: "/";
+    }
+  }
+
+  &.pipe {
+    &.left::after {
+      padding-right: 0.25em;
+      content: "|";
+    }
+
+    &.right::after {
+      padding-left: 0.25em;
+      content: "|";
+    }
+
+    &.middle::after {
+      padding: 0.25em;
+      content: "|";
+    }
+  }
+
+  &.middledot {
+
+    &.left::before {
+      padding-right: 0.25em;
+      content: "·";
+    }
+
+    &.right::after {
+      padding-left: 0.25em;
+      content: "·";
+    }
+
+    &.middle::after {
+      padding: 0.25em;
+      content: "·";
+    },
+
+    &.nospace::after {
+      content: "·"; 
+    }
+  }
+
+  &.infinity::after {
+    content: "∞";
+  }
+
+  &.single::after {
+    content: "1";
+  }
+
+  &.hashtag::after {
+    content: "#";
+  }
+
+  &.ellipses {
+
+    &.nospace::after {
+      content: "…";
+    }
+
+    &.middle::after {
+      padding: 0.25em;
+      content: "…";
+    }
+  }
+
+  &.doubledot::after {
+    content: "..";
+  }
+
+  &.hyphen {
+
+    &.left::before {
+      padding-right: 0.25em;
+      content: "-";
+    }
+
+    &.right {
+      padding-left: 0.25em;
+      content: "-";
+    }
+
+    &.middle::after {
+      padding: 0.25em;
+      content: "-";
+    }
+  }
+
+  &.colon {
+
+    &.left::before {
+      padding-right: 0.25em;
+      content: ":";
+    }
+
+    &.right::after {
+      padding-left: 0.25em;
+      content: ":";
+    }
+
+    &.middle::after {
+      padding: 0.25em;
+      content: ":";
+    }
+  }
+
+  &.percent::after {
+    content: "%";
+  }
+}
diff --git a/front/src/views/library/LibraryBase.vue b/front/src/views/library/LibraryBase.vue
index 190c2c894..ca5b31923 100644
--- a/front/src/views/library/LibraryBase.vue
+++ b/front/src/views/library/LibraryBase.vue
@@ -171,14 +171,17 @@ const updateUploads = (count: number) => {
             <span
               v-else-if="object.privacy_level === 'everyone'"
               :title="labels.tooltips.everyone"
+              class="middledot icon"
             >
               <i class="globe icon" />
               {{ labels.visibility.everyone }}
-            </span> ·
-            <i class="music icon" />
-            {{ $t('views.library.LibraryBase.trackCount', {count: object.uploads_count}) }}
+            </span>
+            <span class="middledot icon">
+              <i class="music icon" />
+              {{ $t('views.library.LibraryBase.trackCount', {count: object.uploads_count}) }}
+            </span>
             <span v-if="object.size">
-              · <i class="database icon" />
+              <i class="database icon" />
               {{ humanSize(object.size) }}
             </span>
           </p>