diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 9c564536..599537bd 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -114,7 +114,11 @@ export default {
 
     &:hover,
     &:focus {
-      background-color: shade-color($gray-100, 3%);
+      background-color: shade-color($body-tertiary-bg, 3%);
+
+      [data-bs-theme='dark'] & {
+        background-color: tint-color($body-tertiary-bg-dark, 3%);
+      }
     }
   }
 }
diff --git a/app/src/components/globals/ExplainWhat.vue b/app/src/components/globals/ExplainWhat.vue
index ed3665ab..5878a449 100644
--- a/app/src/components/globals/ExplainWhat.vue
+++ b/app/src/components/globals/ExplainWhat.vue
@@ -58,18 +58,30 @@ export default {
 
   .btn {
     padding: 0;
-    margin-left: 0.1rem;
+    margin-left: 0.25rem;
     border-radius: 50rem;
     line-height: inherit;
     font-size: inherit;
   }
 
-  &-popover {
-    background-color: $white;
-    border-width: 2px;
+  :deep() {
+    .popover {
+      background-color: $gray-800;
+      color: $black;
+      border-width: 2px;
 
-    :deep(.popover-body) {
-      color: $dark;
+      [data-bs-theme='dark'] & {
+        background-color: $white;
+        color: $white;
+      }
+
+      .popover-body {
+        color: $white;
+
+        [data-bs-theme='dark'] & {
+          color: $black;
+        }
+      }
     }
   }
 }
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index 3ed5c9f4..5ac6962f 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -49,6 +49,7 @@ export default {
 
   &-status {
     width: 2rem;
+    min-width: 2rem;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index b85566c0..525e3954 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -194,7 +194,14 @@ export default {
     padding-top: 0.5rem;
     position: sticky;
     top: 0;
-    background-color: $white;
+  }
+}
+
+// FIXME bvn fix (should be fixed in lib)
+:deep(.btn-group) {
+  display: block;
+  .btn {
+    width: 100%;
   }
 }
 </style>
diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index 48cbe7dc..b484a896 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -132,8 +132,6 @@ $list-group-item-padding-y: $spacer * 0.75;
 @import '~bootstrap/scss/mixins';
 @import '~bootstrap/scss/utilities';
 
-$hr-border-color: $gray-200;
-
 $list-group-action-color: $gray-800;
 
 //  ╭──────────────────────────────────────╮
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 7e770aaa..dbea3507 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -117,6 +117,29 @@ body {
 .tooltip {
   top: 0;
 }
+
+// BVN fixes
+// FIXME move to CardForm ?
+form {
+  .row {
+    margin-bottom: $spacer;
+  }
+  fieldset {
+    margin-bottom: $spacer;
+    width: 100%;
+    .row {
+      margin-bottom: 0;
+    }
+  }
+  .form-text {
+    display: block;
+
+    .alert {
+      margin-bottom: 0;
+    }
+  }
+}
+
 // Descriptive list (<b-row /> elems with <b-col> inside)
 // FIXME REMOVE when every infos switch to `DescriptionRow`
 .row-line {
@@ -247,6 +270,10 @@ code {
   background: $gray-300;
   padding: 0.15rem 0.25rem;
   border-radius: $border-radius;
+
+  [data-bs-theme='dark'] & {
+    background-color: $gray-800;
+  }
 }
 
 pre code {
@@ -258,6 +285,10 @@ pre code {
   padding: 1rem;
   background-color: $light;
   overflow: auto;
+
+  [data-bs-theme='dark'] & {
+    background-color: $dark;
+  }
 }
 
 .unselectable {
diff --git a/app/src/views/_partials/ViewLockOverlay.vue b/app/src/views/_partials/ViewLockOverlay.vue
index 8450b12f..a32fe263 100644
--- a/app/src/views/_partials/ViewLockOverlay.vue
+++ b/app/src/views/_partials/ViewLockOverlay.vue
@@ -1,6 +1,6 @@
 <template>
   <BOverlay
-    variant="white"
+    :variant="dark ? 'dark' : 'light'"
     opacity="0.75"
     no-center
     :show="waiting || reconnecting || error !== null"
@@ -41,7 +41,13 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['waiting', 'reconnecting', 'error', 'currentRequest']),
+    ...mapGetters([
+      'waiting',
+      'reconnecting',
+      'error',
+      'currentRequest',
+      'dark',
+    ]),
 
     component() {
       const { error, reconnecting, currentRequest: request } = this
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 7f87ec1a..c7542ae8 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -466,19 +466,20 @@ export default {
 .card-deck {
   padding: 0;
   margin-bottom: 0;
+  display: flex;
+  flex-flow: row wrap;
 
   > * {
-    margin-bottom: 2rem;
     flex-basis: 100%;
 
     @include media-breakpoint-up(md) {
       flex-basis: 50%;
-      max-width: calc(50% - 30px);
+      max-width: calc(50% - 0.75rem);
     }
 
     @include media-breakpoint-up(lg) {
       flex-basis: 33%;
-      max-width: calc(33.3% - 30px);
+      max-width: calc(33.3% - 1rem);
     }
   }
 
@@ -489,8 +490,9 @@ export default {
       border-color: $dark;
     }
 
-    .card-link {
+    :deep(.card-link) {
       color: inherit;
+      text-decoration: none;
 
       &::after {
         content: '';
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 8b97b476..b09d3767 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -45,11 +45,11 @@
 
         <BCol>
           <template v-if="group.isSpecial">
-            <p class="text-primary">
+            <p class="text-primary-emphasis">
               <YIcon iname="info-circle" />
               {{ $t('group_explain_' + groupName) }}
             </p>
-            <p class="text-primary" v-if="groupName === 'visitors'">
+            <p class="text-primary-emphasis" v-if="groupName === 'visitors'">
               <em>{{
                 $t('group_explain_visitors_needed_for_external_client')
               }}</em>
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 1eab60e1..30a47513 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -33,9 +33,7 @@
               "
             >
               <span
-                :class="
-                  'btn btn-sm py-0 btn-' + (data.value ? 'danger' : 'success')
-                "
+                :class="'btn btn-xs btn-' + (data.value ? 'danger' : 'success')"
               >
                 {{ $t(data.value ? 'close' : 'open') }}
               </span>
@@ -59,13 +57,13 @@
       :server-error="serverError"
       @submit.prevent="onFormPortToggling"
       inline
-      form-classes="d-flex justify-content-between align-items-start"
+      form-classes="d-flex flex-column flex-lg-row gap-3 justify-content-between align-items-start"
     >
       <BInputGroup :prepend="$t('action')">
         <BFormSelect v-model="form.action" :options="actionChoices" />
       </BInputGroup>
 
-      <FormField :validation="v$.form.port">
+      <FormField :validation="v$.form.port" class="mb-0">
         <BInputGroup :prepend="$t('port')">
           <InputItem
             id="input-port"
@@ -290,47 +288,34 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-:deep(.on-off-switch) {
-  .custom-control-input {
-    &:checked ~ .custom-control-label::before {
-      border-color: $success;
-      background-color: $success;
-    }
-    &:not(:checked) ~ .custom-control-label {
-      &::before {
+:deep() {
+  .form-switch {
+    .form-check-input {
+      --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgb(255, 255, 255)'/></svg>") !important;
+      [data-bs-theme='dark'] * & {
+        --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgb(34, 38, 42)'/></svg>") !important;
+      }
+      &:checked {
+        border-color: $success;
+        background-color: $success;
+      }
+      &:not(:checked) {
         border-color: $danger;
         background-color: $danger;
       }
-      &::after {
-        background-color: $white;
+    }
+
+    input:focus ~ .custom-control-label,
+    &:hover {
+      span {
+        visibility: visible;
       }
     }
-  }
-
-  input:focus ~ .custom-control-label,
-  &:hover {
     span {
-      visibility: visible;
-    }
-  }
-  span {
-    visibility: hidden;
-    @include media-breakpoint-down(sm) {
-      display: none;
-    }
-  }
-}
-
-:deep(form) {
-  margin-bottom: -1rem;
-
-  & > * {
-    margin-bottom: 1rem;
-  }
-
-  @include media-breakpoint-down(sm) {
-    fieldset {
-      width: 100%;
+      visibility: hidden;
+      @include media-breakpoint-down(sm) {
+        display: none;
+      }
     }
   }
 }
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index f1d1e3f4..fa4eb56b 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -199,9 +199,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss" scoped>
-.custom-select {
-  flex-basis: 40%;
-}
-</style>
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index 4e6418b6..7d64224a 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -361,11 +361,6 @@ export default {
   display: flex;
   justify-items: stretch;
 
-  .form-group {
-    margin-bottom: 0.5rem;
-    width: 100%;
-  }
-
   .btn-danger {
     align-self: flex-start;
     margin-left: 0.5rem;
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index d9b47bd3..b1009585 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -16,7 +16,7 @@
             <BCol>
               <strong>{{ $t('user_email') }}</strong>
             </BCol>
-            <BCol class="font-italic">
+            <BCol class="fst-italic">
               {{ user.mail }}
             </BCol>
           </BRow>