diff --git a/components/Account.vue b/components/Account.vue
index ab414fc6..e9441c36 100644
--- a/components/Account.vue
+++ b/components/Account.vue
@@ -223,7 +223,7 @@
     @import "assets/variables";
 
     .profile-current {
-        border-left: 3px solid $primary;
+        border-inline-start: 3px solid $primary;
     }
 
     .narrow-message {
diff --git a/components/Dictionary.vue b/components/Dictionary.vue
index f964d9c1..4b24eb01 100644
--- a/components/Dictionary.vue
+++ b/components/Dictionary.vue
@@ -308,7 +308,7 @@
     @import "assets/variables";
 
     .list-singular {
-        padding-left: 0;
+        padding-inline-start: 0;
         list-style: none;
         li {
             white-space: nowrap;
@@ -327,7 +327,7 @@
         }
     }
     .list-plural {
-        padding-left: 0;
+        padding-inline-start: 0;
         list-style: none;
         li {
             white-space: nowrap;
diff --git a/components/Header.vue b/components/Header.vue
index 1a447464..b46dae83 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -69,7 +69,7 @@
                 <Icon v="bars"/>
             </button>
             <div :class="['bg-white border p-3', hamburgerActive ? '' : 'd-none']">
-                <div class="btn-group-vertical d-flex nav-custom nav-custom-left mb-2">
+                <div class="btn-group-vertical d-flex nav-custom nav-custom-start mb-2">
                     <nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
                         <Icon :v="link.icon"/>
                         <Spelling>{{ link.textLong || link.text }}</Spelling>
@@ -91,10 +91,10 @@
             This language version is still under construction!
         </div>
         <div v-show="showCensus" class="alert alert-info mt-3">
-            <a href="#" class="float-right" @click.prevent="dismissCensus">
+            <a href="#" class="float-end" @click.prevent="dismissCensus">
                 <Icon v="times"/>
             </a>
-            <Icon v="user-chart" size="2" class="d-inline-block float-left mr-3 mt-2"/>
+            <Icon v="user-chart" size="2" class="d-inline-block float-start mr-3 mt-2"/>
             <T silent>census.banner</T>
         </div>
     </header>
@@ -307,12 +307,12 @@
 
         .nav-custom {
             .btn {
-                border-left: 1px solid $gray-500;
+                border-inline-start: 1px solid $gray-500;
                 border-radius: 0;
 
                 &:hover, &:focus, &.active {
-                    border-left: 3px solid $primary;
-                    padding-left: calc(#{$btn-padding-x-sm} - 2px);
+                    border-inline-start: 3px solid $primary;
+                    padding-inline-start: calc(#{$btn-padding-x-sm} - 2px);
                     color: $primary;
                 }
 
@@ -321,14 +321,14 @@
         }
     }
 
-    .nav-custom-left {
+    .nav-custom-start {
         .btn {
-            border-left: 1px solid $gray-500;
+            border-inline-start: 1px solid $gray-500;
             border-radius: 0;
 
             &:hover, &:focus, &.active {
-                border-left: 3px solid $primary;
-                padding-left: calc(#{$btn-padding-x-sm} - 2px);
+                border-inline-start: 3px solid $primary;
+                padding-inline-start: calc(#{$btn-padding-x-sm} - 2px);
                 color: $primary;
             }
 
@@ -337,7 +337,7 @@
     }
 
     @include media-breakpoint-up('md', $grid-breakpoints) {
-        .nav-custom:not(.nav-custom-left) {
+        .nav-custom:not(.nav-custom-start) {
             .btn {
                 border-bottom: 1px solid $gray-500;
                 border-radius: 0;
diff --git a/components/Separator.vue b/components/Separator.vue
index cf955ea8..915a2a60 100644
--- a/components/Separator.vue
+++ b/components/Separator.vue
@@ -44,7 +44,7 @@
             bottom: 100%;
             margin-bottom: -$size/2;
             left: 50%;
-            margin-left: -$size/2;
+            margin-inline-start: -$size/2;
             border-radius: 100%;
             display: grid;
             place-items: center;
@@ -60,7 +60,7 @@
             }
             > span {
                 box-shadow:0 2px 4px $value;
-                // FIXME background: theme-color-level($color, $alert-bg-level);
+                background: tint-color($value, 80%);
                 color: $value;
             }
         }
diff --git a/components/Table.vue b/components/Table.vue
index 018fcc10..f7a795ee 100644
--- a/components/Table.vue
+++ b/components/Table.vue
@@ -123,6 +123,6 @@
     @import "assets/variables";
 
     .marked {
-        border-left: 3px solid $primary;
+        border-inline-start: 3px solid $primary;
     }
 </style>
diff --git a/routes/census.vue b/routes/census.vue
index 64d340ce..6895a14e 100644
--- a/routes/census.vue
+++ b/routes/census.vue
@@ -11,7 +11,7 @@
                     {{countResponses}}
                     <T>census.replies</T>
 
-                    <a href="/api/census/export" class="btn btn-outline-secondary btn-sm float-right">
+                    <a href="/api/census/export" class="btn btn-outline-secondary btn-sm float-end">
                         <Icon v="download"/>
                     </a>
                 </div>
diff --git a/routes/profile.vue b/routes/profile.vue
index a50c4f14..b9ad9701 100644
--- a/routes/profile.vue
+++ b/routes/profile.vue
@@ -6,7 +6,7 @@
                 @{{username}}
             </h2>
             <div>
-                <div class="text-right">
+                <div class="text-end">
                     <nuxt-link v-if="$user() && $user().username === username" to="/editor"
                                class="btn btn-outline-primary btn-sm mb-2"
                     >
@@ -228,8 +228,8 @@
     .list-group-item-hoverable {
         &:hover {
             color: $primary;
-            border-left: 3px solid $primary;
-            padding-left: calc(#{$list-group-item-padding-x} - 2px);
+            border-inline-start: 3px solid $primary;
+            padding-inline-start: calc(#{$list-group-item-padding-x} - 2px);
         }
     }
 
diff --git a/routes/select.vue b/routes/select.vue
index 93cb68ea..3f8fda68 100644
--- a/routes/select.vue
+++ b/routes/select.vue
@@ -16,8 +16,8 @@
     .list-group-item-hoverable {
         &:hover {
             color: $primary;
-            border-left: 3px solid $primary;
-            padding-left: calc(#{$list-group-item-padding-x} - 2px);
+            border-inline-start: 3px solid $primary;
+            padding-inline-start: calc(#{$list-group-item-padding-x} - 2px);
         }
     }
 </style>