diff --git a/frontend/AsyncTasksViewer.vue b/frontend/AsyncTasksViewer.vue
index 418dadf..358964b 100644
--- a/frontend/AsyncTasksViewer.vue
+++ b/frontend/AsyncTasksViewer.vue
@@ -25,8 +25,10 @@
   -->
 <template>
   <a
-      class="dropdown-toggle"
+      class="dropdown-toggle nav-link"
       data-toggle="dropdown"
+      data-bs-toggle="dropdown"
+      href="#"
       role="button"
       aria-haspopup="true"
       aria-expanded="false"
@@ -40,7 +42,7 @@
     </div>
   </a>
   <ul
-      class="dropdown-menu async-tasks-dropdown"
+      class="dropdown-menu async-tasks-dropdown dropdown-menu-end w-md-container w-xl-container"
   >
     <li v-if="error">
       <div
diff --git a/frontend/components/AsyncTask.vue b/frontend/components/AsyncTask.vue
index c42a2ea..9f9169a 100644
--- a/frontend/components/AsyncTask.vue
+++ b/frontend/components/AsyncTask.vue
@@ -26,21 +26,21 @@
 <template>
   <li class="async-task-dropdown-item container">
     <div class="row">
-      <div class="col-md-12 text-left">
+      <div class="col-12 text-left text-start">
         <span :class="{ 'font-bold': !isDone }">
           {{ name }}
         </span>
-        <span class="async-task-date pull-right">
+        <span class="async-task-date pull-right float-end">
           <em>{{ asyncDate }}</em>
         </span>
       </div>
-      <div class="col-md-12 text-left">
+      <div class="col-12 text-left text-start">
         <span
             class="async-task-text"
             v-html="description"
         />
       </div>
-      <div class="col-md-12">
+      <div class="col-12">
         <div class="progress">
           <div
               class="progress-bar progress-bar-striped"