diff --git a/instance/index.html b/instance/index.html
index 11c4de4eed49ce1481357cc68db4cffb76831c75..06cde3f7f5042e212a6e7593cade05f36d504743 100644
--- a/instance/index.html
+++ b/instance/index.html
@@ -139,16 +139,28 @@
<div id="panelWrapper" class="row">
<ul id="panelLeft" class="col panel d-flex flex-column bd-highlight mb-3"></ul>
<div id="panelRight" class="col panel d-flex flex-column bd-highlight mb-3">
- <ul class="nav nav-tabs">
- <li class="active"><a data-toggle="tab" href="#queue">queue</a></li>
- <li><a data-toggle="tab" href="#playlist">Playlist</a></li>
+ <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
+ <li class="nav-item" role="presentation">
+ <button class="nav-link active" id="queue-tab" data-bs-toggle="tab" data-bs-target="#queue" type="button" role="tab" aria-controls="queue" aria-selected="true">Queue</button>
+ </li>
+ <li class="nav-item" role="presentation">
+ <button class="nav-link active" id="playlist-tab" data-bs-toggle="tab" data-bs-target="#playlist" type="button" role="tab" aria-controls="playlist" aria-selected="false">Playlist</button>
+ </li>
+ <li class="playlistChoice">
+ <select class="form-select mb-3 bd-highligh" aria-label="Default select example">
+ <option selected>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+ </li>
</ul>
<div class="tab-content">
- <div id="queue" class="tab-pane fade in active">
+ <div id="queue" class="tab-pane fade show active" role="tabpanel" aria-labelledby="queue-tab"">
<ul id="queueList"></ul>
</div>
- <div id="playlist" class="tab-pane fade">
- <ul id="playlistList"></ul>
+ <div id="playlist" class="tab-pane fade" role="tabpanel" aria-labelledby="playlist-tab">
+ <ul id="playlistList"> <head> Bonjour</head></ul>
</div>
</div>
</div>