diff --git a/package.json b/package.json
index af5eb38..11a2bfb 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   "dependencies": {
     "@iconify-icons/bi": "^1.2.2",
     "@vueuse/core": "^11.1.0",
-    "bootstrap": "^4.6.0",
+    "bootstrap": "^5.3.3",
     "bootstrap-vue": "^2.23.1",
     "icecast-metadata-stats": "^0.1.1",
     "lodash-es": "^4.17.21",
diff --git a/public/index.html b/public/index.html
index a70c447..fe48d57 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="light"  >
   <head data-build="<%= process.env.VUE_APP_BUILD %>">
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <% if (process.env.NODE_ENV === "production") { %>
-    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src *; img-src *; media-src *; manifest-src 'self'; style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-624gmqlO23N0g1Ru4tkjuaPEoL/hXP4w7tUqel4WM98=' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-5uOIRR03mYcVoiexgzGGALQ0p1Babe2XxbeIl9t1UpA=' 'sha256-lM8P08IzH0mbT5Tvlm1F5BY3h0gPsb0qNpnZW9YHc7A='; script-src 'self'; base-uri 'self';">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src *; img-src data: *; media-src *; manifest-src 'self'; style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-624gmqlO23N0g1Ru4tkjuaPEoL/hXP4w7tUqel4WM98=' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-5uOIRR03mYcVoiexgzGGALQ0p1Babe2XxbeIl9t1UpA=' 'sha256-lM8P08IzH0mbT5Tvlm1F5BY3h0gPsb0qNpnZW9YHc7A='; script-src 'self'; base-uri 'self';">
     <% } else { %>
-    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src *; img-src *; media-src *; manifest-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval'; base-uri 'self';">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src *; img-src data: *; media-src *; manifest-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval'; base-uri 'self';">
     <% } %>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000" />
diff --git a/src/app/Logo.vue b/src/app/Logo.vue
index 6531ac5..4cfc9fc 100644
--- a/src/app/Logo.vue
+++ b/src/app/Logo.vue
@@ -18,7 +18,7 @@
         <rect width="5.994" height="22.372" x="119.04" y="230.78" rx="2.997" ry="2.997" />
       </g>
     </svg>
-    <span class="text-body ml-2 text-nowrap">
+    <span class="text-body ms-2 text-nowrap">
       <span>airsonic&nbsp;</span>
       <span class="text-muted">(refix)</span>
     </span>
@@ -26,7 +26,7 @@
 </template>
 <style scoped>
   svg {
-    fill: var(--primary);
+    fill: var(--bs-primary);
     height: 32px;
     margin-bottom: 2px;
   }
diff --git a/src/app/Sidebar.vue b/src/app/Sidebar.vue
index 290f5fe..9a80ee8 100644
--- a/src/app/Sidebar.vue
+++ b/src/app/Sidebar.vue
@@ -3,30 +3,25 @@
     <div class="sidebar-fixed d-none d-md-block">
       <SidebarNav />
     </div>
-    <b-sidebar
-      :visible="store.menuVisible"
-      class="d-md-none"
-      sidebar-class="elevated"
-      bg-variant=""
-      shadow="lg"
-      no-header
-      backdrop
-      backdrop-variant=""
-      @hidden="store.hideMenu"
+    <div
+      class="offcanvas offcanvas-start d-md-none"
+      tabindex="-1"
+      :class="store.menuVisible ? 'showing': 'hiding'"
+      @click="store.hideMenu"
     >
-      <SidebarNav />
-    </b-sidebar>
+      <div class="offcanvas-body p-0">
+        <SidebarNav />
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue'
   import SidebarNav from './SidebarNav.vue'
   import { useMainStore } from '@/shared/store'
-  import { BSidebar } from 'bootstrap-vue'
 
   export default defineComponent({
     components: {
-      BSidebar,
       SidebarNav,
     },
     setup() {
@@ -37,12 +32,14 @@
   })
 </script>
 <style>
-  .sidebar-container .sidebar-fixed {
+  .sidebar-container .nav {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
+  }
+
+  .sidebar-container .sidebar-fixed {
     padding-bottom: 100px;
     width: 250px;
-
     position: sticky;
     top: 0;
     max-height: 100vh;
@@ -78,17 +75,17 @@
   }
 
   .sidebar-container .nav-link:not(.router-link-active) .icon {
-    color: var(--text-muted);
+    color: var(--bs-secondary-color); /* TODO */
   }
   .sidebar-container .nav-link:hover {
     color: inherit;
     background-color: rgba(255, 255, 255, 0.045);
   }
   .sidebar-container .nav-link.router-link-active {
-    color: var(--primary);
+    color: var(--bs-primary);
     background-color: rgba(255, 255, 255, 0.045);
   }
   .sidebar-container .nav-link.router-link-active:hover {
-    color: var(--primary);
+    color: var(--bs-primary);
   }
 </style>
diff --git a/src/app/TopNav.vue b/src/app/TopNav.vue
index e08f7d3..c7024da 100644
--- a/src/app/TopNav.vue
+++ b/src/app/TopNav.vue
@@ -1,23 +1,23 @@
 <template>
   <div class="d-flex align-items-center mb-2">
-    <button class="navbar-toggler text-white d-md-none" @click="store.showMenu">
+    <button class="btn navbar-toggler text-white d-md-none" @click="store.showMenu">
       <Icon icon="nav" />
     </button>
 
-    <div class="ml-auto" />
+    <div class="ms-auto" />
 
-    <SearchForm />
+    <SearchForm class="mx-2" />
 
     <template v-if="store.username">
-      <b-dropdown variant="link" right no-caret>
+      <b-dropdown variant="link" right no-caret toggle-class="px-0">
         <template #button-content>
           <Avatar>
             <Icon icon="person" />
           </Avatar>
         </template>
-        <b-dropdown-text>
+        <div class="px-3 py-1">
           {{ store.username }}
-        </b-dropdown-text>
+        </div>
         <b-dropdown-divider />
         <b-dropdown-item :href="store.server" target="_blank" rel="noopener noreferrer">
           Server <Icon icon="link" />
diff --git a/src/app/layout/Default.vue b/src/app/layout/Default.vue
index b1ab396..070fce4 100644
--- a/src/app/layout/Default.vue
+++ b/src/app/layout/Default.vue
@@ -24,7 +24,7 @@
     },
   })
 </script>
-<style lang="scss">
+<style scoped>
   main {
     margin-bottom: 80px;
     overflow-x: hidden;
diff --git a/src/auth/Login.vue b/src/auth/Login.vue
index b87b475..f0faa6d 100644
--- a/src/auth/Login.vue
+++ b/src/auth/Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="row align-items-center h-100 mt-5">
+  <div class="d-flex align-items-center h-100 mt-5">
     <div v-if="!displayForm" class="mx-auto">
       <span class="spinner-border " />
     </div>
@@ -10,25 +10,25 @@
             <div class="d-flex mb-2">
               <Logo class="mx-auto" />
             </div>
-            <div v-if="!config.serverUrl" class="form-group">
-              <label>Server</label>
+            <div v-if="!config.serverUrl" class="mb-3">
+              <label class="form-label">Server</label>
               <input v-model="server" name="server" type="text"
                      class="form-control" :class="{'is-invalid': hasError}">
             </div>
-            <div class="form-group">
-              <label>Username</label>
+            <div class="mb-3">
+              <label class="form-label">Username</label>
               <input v-model="username" name="username" type="text"
                      class="form-control" :class="{'is-invalid': hasError}">
             </div>
-            <div class="form-group">
-              <label>Password</label>
+            <div class="mb-3">
+              <label class="form-label">Password</label>
               <input v-model="password" name="password" type="password"
                      class="form-control" :class="{'is-invalid': hasError}">
             </div>
             <div v-if="error != null" class="alert alert-danger">
               Could not log in. ({{ error.message }})
             </div>
-            <button class="btn btn-primary btn-block" :disabled="busy" @click="login">
+            <button class="btn btn-primary w-100" :disabled="busy" @click="login">
               <span v-show="false" class="spinner-border spinner-border-sm" /> Log in
             </button>
           </form>
diff --git a/src/library/album/AlbumDetails.vue b/src/library/album/AlbumDetails.vue
index 591bea6..1cebaaf 100644
--- a/src/library/album/AlbumDetails.vue
+++ b/src/library/album/AlbumDetails.vue
@@ -18,12 +18,12 @@
           </span>
         </div>
         <span v-if="album.year" class="mx-1"> • {{ album.year }}</span>
-        <span class="mr-3" />
+        <span class="me-3" />
         <div class="d-flex flex-nowrap">
-          <ExternalLink v-if="album.lastFmUrl" :href="album.lastFmUrl" class="btn btn-link p-0 mr-2" title="Last.fm">
+          <ExternalLink v-if="album.lastFmUrl" :href="album.lastFmUrl" class="btn btn-link p-0 me-2" title="Last.fm">
             <IconLastFm />
           </ExternalLink>
-          <ExternalLink v-if="album.musicBrainzUrl" :href="album.musicBrainzUrl" class="btn btn-link mr-2 p-0" title="MusicBrainz">
+          <ExternalLink v-if="album.musicBrainzUrl" :href="album.musicBrainzUrl" class="btn btn-link me-2 p-0" title="MusicBrainz">
             <IconMusicBrainz />
           </ExternalLink>
         </div>
@@ -43,10 +43,10 @@
       </OverflowFade>
 
       <div class="text-nowrap mt-3">
-        <b-button variant="secondary" class="mr-2" @click="playNow">
+        <b-button variant="secondary" class="me-2" @click="playNow">
           <Icon icon="play" /> Play
         </b-button>
-        <b-button variant="secondary" class="mr-2" @click="shuffleNow">
+        <b-button variant="secondary" class="me-2" @click="shuffleNow">
           <Icon icon="shuffle" /> Shuffle
         </b-button>
         <OverflowMenu class="px-1">
diff --git a/src/library/artist/ArtistDetails.vue b/src/library/artist/ArtistDetails.vue
index 8d0fc23..713cfd7 100644
--- a/src/library/artist/ArtistDetails.vue
+++ b/src/library/artist/ArtistDetails.vue
@@ -12,14 +12,14 @@
           <strong>{{ item.albumCount }}</strong> albums
         </span>
         <span class="mx-1">•</span>
-        <span class="text-nowrap mr-3">
+        <span class="text-nowrap me-3">
           <strong>{{ item.trackCount }}</strong> tracks
         </span>
         <div class="d-flex flex-nowrap">
-          <ExternalLink v-if="item.lastFmUrl" :href="item.lastFmUrl" class="btn btn-link p-0 mr-2" title="Last.fm">
+          <ExternalLink v-if="item.lastFmUrl" :href="item.lastFmUrl" class="btn btn-link p-0 me-2" title="Last.fm">
             <IconLastFm />
           </ExternalLink>
-          <ExternalLink v-if="item.musicBrainzUrl" :href="item.musicBrainzUrl" class="btn btn-link mr-2 p-0" title="MusicBrainz">
+          <ExternalLink v-if="item.musicBrainzUrl" :href="item.musicBrainzUrl" class="btn btn-link me-2 p-0" title="MusicBrainz">
             <IconMusicBrainz />
           </ExternalLink>
         </div>
@@ -38,7 +38,7 @@
       </OverflowFade>
 
       <div class="text-nowrap mt-3">
-        <b-button variant="secondary" :disabled="item.topTracks.length === 0" class="mr-2" @click="playNow">
+        <b-button variant="secondary" :disabled="item.topTracks.length === 0" class="me-2" @click="playNow">
           <Icon icon="play" /> Play
         </b-button>
         <b-button variant="secondary" :disabled="item.topTracks.length === 0" @click="shuffleNow">
diff --git a/src/library/file/Files.vue b/src/library/file/Files.vue
index 837e548..9cb6aca 100644
--- a/src/library/file/Files.vue
+++ b/src/library/file/Files.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="d-flex justify-content-between align-items-center mb-2">
-      <h1 class="mb-0 mr-2 text-truncate">
+      <h1 class="mb-0 me-2 text-truncate">
         Files
       </h1>
     </div>
diff --git a/src/library/playlist/CreatePlaylistModal.vue b/src/library/playlist/CreatePlaylistModal.vue
index f049a6a..0addebf 100644
--- a/src/library/playlist/CreatePlaylistModal.vue
+++ b/src/library/playlist/CreatePlaylistModal.vue
@@ -1,13 +1,13 @@
 <template>
   <b-modal :visible="visible" @ok="confirm" @change="change">
-    <template #modal-header-close>
-      <Icon icon="x" />
+    <template #modal-header>
+      <h5 class="modal-title">
+        New playlist
+      </h5>
+      <button class="btn-close" @click="change" />
     </template>
-    <template #modal-title>
-      New playlist
-    </template>
-    <div class="form-group">
-      <label>Name</label>
+    <div class="mb-3">
+      <label class="form-label">Name</label>
       <input v-model="name" class="form-control" type="text">
     </div>
     <template #modal-ok>
diff --git a/src/library/playlist/Playlist.vue b/src/library/playlist/Playlist.vue
index 733e00b..4c4b865 100644
--- a/src/library/playlist/Playlist.vue
+++ b/src/library/playlist/Playlist.vue
@@ -1,10 +1,10 @@
 <template>
   <ContentLoader v-slot :loading="playlist == null">
     <div class="d-flex align-items-center mb-2">
-      <h1 class="mb-0 mr-2 text-truncate">
+      <h1 class="mb-0 me-2 text-truncate">
         {{ playlist.name }}
       </h1>
-      <OverflowMenu class="ml-auto">
+      <OverflowMenu class="ms-auto">
         <ContextMenuItem icon="edit" :disabled="playlist.isReadOnly" @click="showEditModal = true">
           Edit
         </ContextMenuItem>
@@ -23,23 +23,23 @@
       <strong>{{ formatDuration(playlist.duration) }}</strong>
       <template v-if="playlist.isPublic">
         <span class="mx-1">•</span>
-        <span  class="badge badge-secondary badge-pill">
+        <span class="badge bg-secondary rounded-pill">
           Public
         </span>
       </template>
     </div>
 
-    <div v-if="playlist.comment"  class="mt-3">
+    <div v-if="playlist.comment" class="mt-3">
       {{ playlist.comment }}
     </div>
 
     <div class="text-nowrap mt-3">
-    <b-button variant="secondary" :disabled="playlist.tracks.length === 0" class="mr-2" @click="playNow">
-      <Icon icon="play" /> Play
-    </b-button>
-    <b-button variant="secondary" :disabled="playlist.tracks.length === 0" @click="shuffleNow">
-      <Icon icon="shuffle" /> Shuffle
-    </b-button>
+      <b-button variant="secondary" :disabled="playlist.tracks.length === 0" class="me-2" @click="playNow">
+        <Icon icon="play" /> Play
+      </b-button>
+      <b-button variant="secondary" :disabled="playlist.tracks.length === 0" @click="shuffleNow">
+        <Icon icon="shuffle" /> Shuffle
+      </b-button>
     </div>
 
     <TrackList v-if="playlist.tracks.length > 0" :tracks="playlist.tracks" class="mt-3">
@@ -56,16 +56,16 @@
         Edit playlist
       </template>
       <template #default="{ item }">
-        <div class="form-group">
-          <label>Name</label>
+        <div class="mb-3">
+          <label class="form-label">Name</label>
           <input v-model="item.name" class="form-control" type="text">
         </div>
-        <div class="form-group">
-          <label>Comment</label>
+        <div class="mb-3">
+          <label class="form-label">Comment</label>
           <textarea v-model="item.comment" class="form-control" />
         </div>
-        <div class="form-group">
-          <label class="mb-0">Public</label>
+        <div class="mb-3">
+          <label class="form-label mb-0">Public</label>
           <SwitchInput v-model="item.isPublic" />
         </div>
       </template>
diff --git a/src/library/playlist/PlaylistNav.vue b/src/library/playlist/PlaylistNav.vue
index ecec90b..5596ab1 100644
--- a/src/library/playlist/PlaylistNav.vue
+++ b/src/library/playlist/PlaylistNav.vue
@@ -2,14 +2,14 @@
   <div class="mw-100">
     <small class="sidebar-heading text-muted">
       Playlists
-      <button type="button" class="btn btn-link btn-sm p-0 float-right" @click="showAddModal = true">
+      <button type="button" class="btn btn-link btn-sm p-0 float-end" @click="showAddModal = true">
         <Icon icon="plus" />
       </button>
       <CreatePlaylistModal :visible.sync="showAddModal" />
     </small>
 
     <router-link class="nav-link" :to="{name: 'playlist', params: { id: 'random' }}">
-      <Icon icon="playlist" class="mr-2" /> Random
+      <Icon icon="playlist" class="me-2" /> Random
     </router-link>
 
     <template v-if="playlists">
@@ -19,7 +19,7 @@
         class="nav-link"
       >
         <span @dragover="onDragover" @drop="onDrop(item.id, $event)">
-          <Icon icon="playlist" class="mr-2" /> {{ item.name }}
+          <Icon icon="playlist" class="me-2" /> {{ item.name }}
         </span>
       </router-link>
     </template>
diff --git a/src/library/podcast/AddPodcastModal.vue b/src/library/podcast/AddPodcastModal.vue
index 07ef42e..5b0c858 100644
--- a/src/library/podcast/AddPodcastModal.vue
+++ b/src/library/podcast/AddPodcastModal.vue
@@ -1,13 +1,13 @@
 <template>
   <b-modal :visible="visible" @ok="confirm" @change="change">
-    <template #modal-header-close>
-      <Icon icon="x" />
+    <template #modal-header>
+      <h5 class="modal-title">
+        Add podcast
+      </h5>
+      <button class="btn-close" @click="change" />
     </template>
-    <template #modal-title>
-      Add podcast
-    </template>
-    <div class="form-group">
-      <label>URL</label>
+    <div class="mb-3">
+      <label class="form-label">URL</label>
       <input v-model="url" class="form-control" type="text" :class="{'is-invalid': hasError}">
       <div class="invalid-feedback">
         Required
diff --git a/src/library/podcast/PodcastDetails.vue b/src/library/podcast/PodcastDetails.vue
index 15c2757..05de044 100644
--- a/src/library/podcast/PodcastDetails.vue
+++ b/src/library/podcast/PodcastDetails.vue
@@ -8,7 +8,7 @@
         {{ podcast.description }}
       </OverflowFade>
       <div class="text-nowrap">
-        <b-button variant="secondary" class="mr-2" :disabled="playableTracks.length === 0" @click="playNow">
+        <b-button variant="secondary" class="me-2" :disabled="playableTracks.length === 0" @click="playNow">
           <Icon icon="play" /> Play
         </b-button>
         <b-button variant="secondary" :disabled="playableTracks.length === 0" @click="shuffleNow">
@@ -24,7 +24,7 @@
 
     <BaseTable v-if="podcast.tracks.length > 0">
       <BaseTableHead>
-        <th class="text-right d-none d-md-table-cell">
+        <th class="text-end d-none d-md-table-cell">
           Duration
         </th>
       </BaseTableHead>
diff --git a/src/library/podcast/PodcastLibrary.vue b/src/library/podcast/PodcastLibrary.vue
index 5f0840b..679c5de 100644
--- a/src/library/podcast/PodcastLibrary.vue
+++ b/src/library/podcast/PodcastLibrary.vue
@@ -14,7 +14,7 @@
         </li>
       </ul>
       <div>
-        <b-button variant="link" class="mr-2" @click="showAddModal = true">
+        <b-button variant="link" class="me-2" @click="showAddModal = true">
           <Icon icon="plus" />
         </b-button>
         <b-button icon="refresh" variant="link" @click="refresh()">
diff --git a/src/library/radio/RadioStations.vue b/src/library/radio/RadioStations.vue
index 1e9928e..8e5ae5e 100644
--- a/src/library/radio/RadioStations.vue
+++ b/src/library/radio/RadioStations.vue
@@ -1,7 +1,7 @@
 <template>
   <ContentLoader v-slot :loading="items === null">
     <div class="d-flex justify-content-between align-items-center mb-2">
-      <h1 class="mb-0 mr-2 text-truncate">
+      <h1 class="mb-0 me-2 text-truncate">
         Radio
       </h1>
       <b-button variant="link" :disabled="unsupported" @click="openAddModal">
@@ -28,16 +28,16 @@
         {{ item?.id ? "Edit" : "Add" }} Radio Station
       </template>
       <template #default="{ item }">
-        <div class="form-group">
-          <label>Name</label>
+        <div class="mb-3">
+          <label class="form-label">Name</label>
           <input v-model="item.title" class="form-control" type="text">
         </div>
-        <div class="form-group">
-          <label>Stream URL</label>
+        <div class="mb-3">
+          <label class="form-label">Stream URL</label>
           <input v-model="item.url" class="form-control" type="text">
         </div>
-        <div class="form-group">
-          <label class="mb-0">Home Page URL</label>
+        <div class="mb-3">
+          <label class="form-label mb-0">Home Page URL</label>
           <input v-model="item.description" class="form-control" type="text">
         </div>
       </template>
diff --git a/src/library/search/SearchForm.vue b/src/library/search/SearchForm.vue
index e8b1dda..791861a 100644
--- a/src/library/search/SearchForm.vue
+++ b/src/library/search/SearchForm.vue
@@ -1,12 +1,10 @@
 <template>
-  <div>
-    <form class="form-inline my-2 my-lg-0" @submit.prevent="search">
-      <input
-        v-model="query"
-        class="form-control mr-sm-2" type="search"
-        placeholder="Search">
-    </form>
-  </div>
+  <form class="form-inline" @submit.prevent="search">
+    <input
+      v-model="query"
+      class="form-control" type="search"
+      placeholder="Search">
+  </form>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue'
diff --git a/src/library/track/BaseTableHead.vue b/src/library/track/BaseTableHead.vue
index de4bd18..56cf6e8 100644
--- a/src/library/track/BaseTableHead.vue
+++ b/src/library/track/BaseTableHead.vue
@@ -2,11 +2,11 @@
   <thead>
     <tr>
       <th>#</th>
-      <th class="text-left">
+      <th class="text-start">
         Title
       </th>
       <slot />
-      <th class="text-right">
+      <th class="text-end">
         Actions
       </th>
     </tr>
diff --git a/src/library/track/CellActions.vue b/src/library/track/CellActions.vue
index 35fcc15..df200f1 100644
--- a/src/library/track/CellActions.vue
+++ b/src/library/track/CellActions.vue
@@ -1,5 +1,5 @@
 <template>
-  <td class="text-right" @click.stop="">
+  <td class="text-end" @click.stop="">
     <OverflowMenu>
       <ContextMenuItem v-if="!track.isUnavailable" icon="plus" @click="setNextInQueue()">
         Play next
@@ -19,13 +19,12 @@
       <slot :item="track" />
     </OverflowMenu>
 
-    <b-modal
-      v-model="showPlaylistSelect"
-      title="Add to playlist" ok-only ok-variant="secondary" ok-title="Cancel"
-      size="md"
-    >
-      <template #modal-header-close>
-        <Icon icon="x" />
+    <b-modal v-model="showPlaylistSelect" ok-only ok-variant="secondary" ok-title="Cancel" size="md">
+      <template #modal-header>
+        <h5 class="modal-title">
+          Add to playlist
+        </h5>
+        <button class="btn-close" @click="showPlaylistSelect = false" />
       </template>
       <div class="list-group list-group-flush">
         <button
diff --git a/src/library/track/CellDuration.vue b/src/library/track/CellDuration.vue
index 229afaa..ac34a35 100644
--- a/src/library/track/CellDuration.vue
+++ b/src/library/track/CellDuration.vue
@@ -1,5 +1,5 @@
 <template>
-  <td class="text-right d-none d-md-table-cell">
+  <td class="text-end d-none d-md-table-cell">
     {{ duration }}
   </td>
 </template>
diff --git a/src/library/track/TrackList.vue b/src/library/track/TrackList.vue
index 9666820..6833fe0 100644
--- a/src/library/track/TrackList.vue
+++ b/src/library/track/TrackList.vue
@@ -1,13 +1,13 @@
 <template>
   <BaseTable>
     <BaseTableHead>
-      <th v-if="!noArtist" class="text-left d-none d-lg-table-cell">
+      <th v-if="!noArtist" class="text-start d-none d-lg-table-cell">
         Artist
       </th>
-      <th v-if="!noAlbum" class="text-left d-none d-md-table-cell">
+      <th v-if="!noAlbum" class="text-start d-none d-md-table-cell">
         Album
       </th>
-      <th v-if="!noDuration" class="text-right d-none d-md-table-cell">
+      <th v-if="!noDuration" class="text-end d-none d-md-table-cell">
         Duration
       </th>
     </BaseTableHead>
diff --git a/src/player/Player.vue b/src/player/Player.vue
index 2e38034..3cb5eb3 100644
--- a/src/player/Player.vue
+++ b/src/player/Player.vue
@@ -37,7 +37,7 @@
 
         <!-- Controls right --->
         <div class="col-auto col-sm p-0">
-          <div class="d-flex flex-nowrap justify-content-end pr-3">
+          <div class="d-flex flex-nowrap justify-content-end pe-3">
             <div class="m-0 d-none d-md-inline-flex align-items-center">
               <template v-if="track && track.isPodcast">
                 <b-button id="player-playback-rate-btn" variant="icon" title="Speed" class="mb-1">
@@ -80,44 +80,36 @@
               </b-button>
             </div>
             <OverflowMenu class="d-md-none">
-              <b-dropdown-text>
-                <div class="d-flex justify-content-between align-items-center">
-                  <strong>Volume</strong>
-                  <Slider class="px-3" style="width: 120px;"
-                          :min="0" :max="1" :step="0.01" percent
-                          :value="volume" @input="setVolume"
-                  />
-                </div>
-              </b-dropdown-text>
-              <b-dropdown-text v-if="track && track.isPodcast">
-                <div class="d-flex justify-content-between align-items-center">
-                  <strong>Speed</strong>
+              <div class="d-flex justify-content-between align-items-center px-3 py-1">
+                <span>Volume</span>
+                <Slider class="p-3" style="width: 120px;"
+                        :min="0" :max="1" :step="0.01" percent
+                        :value="volume" @input="setVolume"
+                />
+              </div>
+              <template v-if="track && track.isPodcast">
+                <div class="d-flex justify-content-between align-items-center px-3 py-1">
+                  <span>Speed</span>
                   <Slider class="px-3" style="width: 120px;"
                           :min="0.7" :max="2" :step="0.1"
                           :value="playbackRate" @input="setPlaybackRate"
                   />
                 </div>
-              </b-dropdown-text>
-              <b-dropdown-text>
-                <div class="d-flex justify-content-between">
-                  <strong>Repeat</strong>
-                  <SwitchInput :value="repeatActive" @input="toggleRepeat" />
-                </div>
-              </b-dropdown-text>
-              <b-dropdown-text>
-                <div class="d-flex justify-content-between">
-                  <strong>Shuffle</strong>
-                  <SwitchInput :value="shuffleActive" @input="toggleShuffle" />
-                </div>
-              </b-dropdown-text>
-              <b-dropdown-text>
-                <div class="d-flex justify-content-between">
-                  <strong>Favourite</strong>
-                  <b-button variant="link" class="m-0 px-2 py-0" @click.stop="toggleFavourite">
-                    <Icon :icon="isFavourite ? 'heart-fill' : 'heart'" />
-                  </b-button>
-                </div>
-              </b-dropdown-text>
+              </template>
+              <div class="d-flex justify-content-between px-3 py-1">
+                <span>Repeat</span>
+                <SwitchInput :value="repeatActive" @input="toggleRepeat" />
+              </div>
+              <div class="d-flex justify-content-between px-3 py-1">
+                <span>Shuffle</span>
+                <SwitchInput :value="shuffleActive" @input="toggleShuffle" />
+              </div>
+              <div class="d-flex justify-content-between px-3 py-1">
+                <span>Favourite</span>
+                <b-button variant="link" class="m-0 px-2 py-0" @click.stop="toggleFavourite">
+                  <Icon :icon="isFavourite ? 'heart-fill' : 'heart'" />
+                </b-button>
+              </div>
             </OverflowMenu>
           </div>
         </div>
diff --git a/src/player/ProgressBar.vue b/src/player/ProgressBar.vue
index 4dd6903..62e0218 100644
--- a/src/player/ProgressBar.vue
+++ b/src/player/ProgressBar.vue
@@ -47,20 +47,20 @@
     cursor: pointer;
   }
   ::v-deep .vue-slider-rail {
-    background-color: var(--secondary);
+    background-color: var(--bs-secondary);
     border-radius: 0;
   }
   ::v-deep .vue-slider-process {
-    background-color:  var(--primary);
+    background-color:  var(--bs-primary);
     border-radius: 0;
   }
 
   /* dot handle */
   ::v-deep .vue-slider-dot-handle  {
-    background-color:  var(--primary);
+    background-color:  var(--bs-primary);
   }
   ::v-deep .vue-slider-dot-handle::after {
-    background-color: var(--primary);
+    background-color: var(--bs-primary);
     opacity: 0.32;
     transform: translate(-50%, -50%) scale(1);
   }
@@ -79,8 +79,8 @@
     display: block;
   }
   ::v-deep .vue-slider-dot-tooltip-inner {
-    background-color:  var(--primary);
-    border-color:  var(--primary);
+    background-color:  var(--bs-primary);
+    border-color:  var(--bs-primary);
   }
   ::v-deep .vue-slider-dot-tooltip-text {
     display: block;
@@ -97,8 +97,8 @@
     text-align: center;
     color: #fff;
     border-radius: 5px;
-    border-color:  var(--primary);
-    background-color:  var(--primary);
+    border-color:  var(--bs-primary);
+    background-color:  var(--bs-primary);
     box-sizing: content-box;
     transform: none;
   }
diff --git a/src/player/Queue.vue b/src/player/Queue.vue
index 2b73a32..f47b624 100644
--- a/src/player/Queue.vue
+++ b/src/player/Queue.vue
@@ -5,7 +5,7 @@
         Playing
       </h1>
       <div>
-        <b-button variant="link" class="mr-2" :disabled="!tracks?.length" @click="shuffle">
+        <b-button variant="link" class="me-2" :disabled="!tracks?.length" @click="shuffle">
           <Icon icon="shuffle" /> Shuffle
         </b-button>
         <b-button class="clear-btn" variant="link" :disabled="!tracks?.length" @click="clear">
@@ -21,13 +21,13 @@
     <ContentLoader v-slot :loading="loading">
       <BaseTable v-if="tracks.length > 0">
         <BaseTableHead>
-          <th class="text-left d-none d-lg-table-cell">
+          <th class="text-start d-none d-lg-table-cell">
             Artist
           </th>
-          <th class="text-left d-none d-md-table-cell">
+          <th class="text-start d-none d-md-table-cell">
             Album
           </th>
-          <th class="text-right d-none d-md-table-cell">
+          <th class="text-end d-none d-md-table-cell">
             Duration
           </th>
         </BaseTableHead>
diff --git a/src/shared/components/ContextMenuItem.vue b/src/shared/components/ContextMenuItem.vue
index 465d033..107e35b 100644
--- a/src/shared/components/ContextMenuItem.vue
+++ b/src/shared/components/ContextMenuItem.vue
@@ -2,15 +2,15 @@
   <BDropdownItemButton
     :disabled="disabled"
     :button-class="[
-      'd-flex justify-content-between text-nowrap',
-      {[`text-${variant}`]: variant}
+      'd-flex justify-content-between align-items-center text-nowrap',
+      {[`dropdown-item-${variant}`]: variant}
     ]"
     v-on="$listeners"
   >
     <slot>
       {{ text }}
     </slot>
-    <Icon v-if="icon" :icon="icon" class="ml-4" />
+    <Icon v-if="icon" :icon="icon" class="ms-4" />
   </BDropdownItemButton>
 </template>
 <script lang="ts">
@@ -25,3 +25,8 @@
     }
   })
 </script>
+<style>
+  .dropdown-item-danger:not(:disabled) {
+    color: var(--bs-danger);
+  }
+</style>
diff --git a/src/shared/components/EditModal.vue b/src/shared/components/EditModal.vue
index 5a59d1a..c0c0909 100644
--- a/src/shared/components/EditModal.vue
+++ b/src/shared/components/EditModal.vue
@@ -1,12 +1,12 @@
 <template>
   <b-modal ok-title="Save" :visible="visible" @ok="confirm" @change="change">
-    <template #modal-header-close>
-      <Icon icon="x" />
-    </template>
-    <template #modal-title>
-      <slot name="title" :item="copy">
-        {{ title }}
-      </slot>
+    <template #modal-header>
+      <h5 class="modal-title">
+        <slot name="title" :item="copy">
+          {{ title }}
+        </slot>
+      </h5>
+      <button class="btn-close" @click="change" />
     </template>
     <template v-if="visible">
       <slot :item="copy" />
diff --git a/src/shared/components/Hero.vue b/src/shared/components/Hero.vue
index 6d1423c..b143b91 100644
--- a/src/shared/components/Hero.vue
+++ b/src/shared/components/Hero.vue
@@ -3,7 +3,7 @@
     <div class="backdrop" />
     <img v-if="image" :src="image">
     <img v-else src="@/shared/assets/fallback.svg">
-    <div class="body d-flex flex-column align-items-center align-items-md-start pt-4 pt-md-0 pl-md-4 pb-1 text-center text-md-left">
+    <div class="body d-flex flex-column align-items-center align-items-md-start pt-4 pt-md-0 ps-md-4 pb-1 text-center text-md-start">
       <slot />
     </div>
   </div>
diff --git a/src/shared/components/OverflowMenu.vue b/src/shared/components/OverflowMenu.vue
index aff0266..6813c0f 100644
--- a/src/shared/components/OverflowMenu.vue
+++ b/src/shared/components/OverflowMenu.vue
@@ -1,5 +1,6 @@
 <template>
   <b-dropdown
+    right
     no-caret
     boundary="window"
     :variant="variant"
diff --git a/src/shared/components/Slider.vue b/src/shared/components/Slider.vue
index c36085d..126592d 100644
--- a/src/shared/components/Slider.vue
+++ b/src/shared/components/Slider.vue
@@ -43,18 +43,18 @@
     cursor: pointer;
   }
   ::v-deep .vue-slider-rail {
-    background-color: var(--secondary);
+    background-color: var(--bs-secondary);
     border-radius: 0;
   }
   ::v-deep .vue-slider-process {
-    background-color: var(--primary);
+    background-color: var(--bs-primary);
     border-radius: 0;
   }
   ::v-deep .vue-slider-dot-handle  {
-    background-color: var(--primary);
+    background-color: var(--bs-primary);
   }
   ::v-deep .vue-slider-dot-handle::after {
-    background-color: var(--primary);
+    background-color: var(--bs-primary);
     opacity: 0.32;
     transform: translate(-50%, -50%) scale(1);
   }
@@ -62,8 +62,8 @@
     visibility: visible;
   }
   ::v-deep .vue-slider-dot-tooltip-inner {
-    background-color: var(--primary);
-    border-color: var(--primary);
+    background-color: var(--bs-primary);
+    border-color: var(--bs-primary);
   }
   ::v-deep .vue-slider-dot-tooltip-text {
     width: 44px;
diff --git a/src/shared/components/SwitchInput.vue b/src/shared/components/SwitchInput.vue
index 3e8d503..3532cf4 100644
--- a/src/shared/components/SwitchInput.vue
+++ b/src/shared/components/SwitchInput.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="custom-control custom-switch">
+  <div class="form-check form-switch">
     <input
       :id="id"
-      type="checkbox"
-      class="custom-control-input"
+      type="checkbox" role="switch"
+      class="form-check-input"
       :checked="value"
       @change="$emit('input', $event.target.checked)"
     >
-    <label :for="id" class="custom-control-label" />
+    <label :for="id" class="form-check-label" />
   </div>
 </template>
 <script lang="ts">
diff --git a/src/shared/components/Tile.vue b/src/shared/components/Tile.vue
index 5ee270b..78db105 100644
--- a/src/shared/components/Tile.vue
+++ b/src/shared/components/Tile.vue
@@ -10,7 +10,7 @@
       </template>
     </ContextMenu>
     <div class="card-body">
-      <div class="text-truncate font-weight-bold">
+      <div class="text-truncate fw-bold">
         <slot name="title">
           <router-link :to="props.to">
             {{ props.title }}
diff --git a/src/style/_variables.scss b/src/style/_variables.scss
deleted file mode 100644
index 12addd8..0000000
--- a/src/style/_variables.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-$theme-elevation-0: hsl(0, 0%, 0%);
-$theme-elevation-1: hsl(0, 0%, 8%);
-$theme-elevation-2: hsl(0, 0%, 18%);
-$theme-text: #ccc;
-$theme-text-muted: #999;
-
-$primary: #09f;
-$danger: #ff4141;
-$secondary: $theme-elevation-2;
-
-$body-bg: $theme-elevation-0;
-$body-color: $theme-text;
-$link-color: $theme-text;
-$text-muted: $theme-text-muted;
-$border-color: $theme-elevation-2;
diff --git a/src/style/main.scss b/src/style/main.scss
index 9a747d9..f34a369 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -1,22 +1,65 @@
-@import "./variables";
+$theme-elevation-0: hsl(0, 0%, 0%);
+$theme-elevation-1: hsl(0, 0%, 8%);
+$theme-elevation-2: hsl(0, 0%, 18%);
+$theme-text: #ccc;
+$theme-text-muted: #999;
+
+// Bootstrap overrides
+$primary: #09f;
+$danger: #ff4141;
+$secondary: $theme-elevation-2;
+
+$body-bg: $theme-elevation-0;
+$body-color: $theme-text;
+
+$grid-gutter-width: 2rem;
+
+$headings-color: #fff;
+
+$link-color: $theme-text;
+$link-decoration: none;
+$link-hover-decoration: underline;
+
+$text-muted: $theme-text-muted;
+$border-color: $theme-elevation-2;
+
+// Button FIXME
+$btn-color: red;
+$btn-primary-color: #fff;
+:root {
+  --bs-btn-color: #fff !important;
+}
+.btn-primary {
+  --bs-btn-color: #fff !important;
+}
+$btn-close-color: $theme-text;
 
 // Card
 $card-bg: $theme-elevation-1;
 $card-cap-bg: $theme-elevation-1;
+$card-spacer-y: 1.25rem;
+$card-spacer-x: 1.25rem;
 
 // Modal
 $modal-content-bg: $theme-elevation-1;
 $modal-content-border-color: $theme-elevation-2;
+.modal-backdrop {
+  opacity: .5;
+}
 
 // Dropdown
 $dropdown-bg: $theme-elevation-1;
 $dropdown-link-color: $theme-text;
-$dropdown-link-hover-bg: $theme-elevation-1;
-$dropdown-link-hover-color: $theme-text-muted;
-$dropdown-link-disabled-color: $theme-elevation-2 !important;
+$dropdown-link-hover-bg: $theme-elevation-2;
+$dropdown-link-hover-color: white;
 $dropdown-border-color: $theme-elevation-2;
 $dropdown-divider-bg: $theme-elevation-2;
 
+.dropdown-toggle.dropdown-toggle-no-caret::before,
+.dropdown-toggle.dropdown-toggle-no-caret::after {
+  display: none !important;
+}
+
 // Popover
 $popover-bg: $theme-elevation-1;
 $popover-border-color: $theme-elevation-2;
@@ -25,6 +68,10 @@ $popover-border-color: $theme-elevation-2;
 $tooltip-bg: $theme-elevation-1;
 $tooltip-color: $theme-text;
 
+.tooltip {
+  position: absolute;
+}
+
 // Form
 $input-bg: $theme-elevation-2;
 $input-border-color: $theme-elevation-2;
@@ -32,19 +79,20 @@ $input-color: $theme-text;
 $custom-range-track-height: 0.1rem;
 $custom-range-thumb-bg: $theme-text;
 $custom-range-track-bg: $theme-text-muted;
+$form-switch-color-dark: rgba(#fff, .25);
+$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>");
 
 // List group
 $list-group-bg: rgba(#fff, 0);
 $list-group-hover-bg: rgba(#fff, .1);
 $list-group-color: $theme-text;
 $list-group-action-hover-color: $theme-text;
-$list-group-border-color: $border-color;
+$list-group-border-color: $theme-elevation-2;
 $list-group-action-active-bg: rgba(#fff, .1);
 
-:root {
-  --text-body: #{$theme-text};
-  --text-muted: #{$theme-text-muted};
-}
+// Offcanvas
+$offcanvas-bg-color:$theme-elevation-1;
+
 
 .elevated {
   background-color: $theme-elevation-1;
@@ -56,7 +104,7 @@ $list-group-action-active-bg: rgba(#fff, .1);
 }
 
 a.active {
-  color: var(--primary);
+  color: var(--bs-primary);
 }
 
 h1, h2, h3, h4, h5 {
@@ -67,32 +115,29 @@ h1, h2, h3, h4, h5 {
   box-shadow: none !important;
 }
 
-@import './nav';
+@import './nav-underlined';
 @import './table';
 
-$enable-print-styles: false;
-$enable-responsive-font-sizes: true;
+//$enable-responsive-font-sizes: true;
 
-@import '~bootstrap';
-@import '~bootstrap-vue';
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import '~bootstrap/scss/bootstrap';
+//@import '~bootstrap-vue';
 
-.modal-header .close {
-  color: $theme-text;
-  opacity: 1;
-}
-
-/* Override bootstrap styles with var */
 
-.text-primary {
-  color: var(--primary) !important;
-}
+/* Bootstrap CSS overrides */
+//
+//.text-primary {
+//  color: var(--primary) !important;
+//}
 
-.btn-primary {
-  background-color: var(--primary) !important;
-  border-color: var(--primary) !important;
-}
+//.btn-primary {
+//  background-color: var(--primary) !important;
+//  border-color: var(--primary) !important;
+//}
 
 /* Remove badge fade in */
-.badge {
-  transition: none !important;
-}
+  //.badge {
+  //  transition: none !important;
+  //}
diff --git a/src/style/nav.scss b/src/style/nav-underlined.scss
similarity index 93%
rename from src/style/nav.scss
rename to src/style/nav-underlined.scss
index d58ded0..f219b39 100644
--- a/src/style/nav.scss
+++ b/src/style/nav-underlined.scss
@@ -20,7 +20,7 @@ ul.nav-underlined {
       border-bottom: 2px solid;
     }
     a.active:hover {
-      color: var(--primary);
+      color: var(--bs-primary);
     }
   }
 }
diff --git a/src/style/table.scss b/src/style/table.scss
index d449096..a7653da 100644
--- a/src/style/table.scss
+++ b/src/style/table.scss
@@ -1,24 +1,32 @@
+$table-color: $theme-text;
+$table-bg: rgba(#fff, 0);
 $table-hover-bg: rgba(#fff, .1);
 
+$table-cell-padding-y: 0.75rem;
+$table-cell-padding-x: 0.75rem;
+
 table thead tr {
   font-size: 80%;
   text-transform: uppercase;
-  color: $theme-text-muted;
+  color: $text-muted;
 }
 
 table.table {
+  th {
+    color: $text-muted;
+  }
   tr {
     cursor: pointer;
   }
   tr.active {
     td, td a, td button.dropdown-toggle {
-      color: var(--primary);
+      color: $primary;
     }
   }
   tr.disabled {
     cursor: default;
     td, td a, td button.dropdown-toggle {
-      color: var(--text-muted);
+      color: $text-muted;
     }
     button {
       cursor: default;
@@ -33,7 +41,7 @@ table.table-numbered {
     width: 26px;
     max-width: 26px;
     text-align: center;
-    color: var(--text-muted);
+    color: $text-muted;
   }
   tr td:first-child button {
     border: none;
diff --git a/yarn.lock b/yarn.lock
index 43bc45d..85d320c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2362,11 +2362,16 @@ bootstrap-vue@^2.23.1:
     portal-vue "^2.1.7"
     vue-functional-data-merge "^3.1.0"
 
-bootstrap@^4.6.0, bootstrap@^4.6.1:
+bootstrap@^4.6.1:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.2.tgz#8e0cd61611728a5bf65a3a2b8d6ff6c77d5d7479"
   integrity sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==
 
+bootstrap@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.3.tgz#de35e1a765c897ac940021900fcbb831602bac38"
+  integrity sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
