diff --git a/instance/index.html b/instance/index.html
index cfc848e92a1da0558f857a6caeaf3893e1025dd1..11c4de4eed49ce1481357cc68db4cffb76831c75 100644
--- a/instance/index.html
+++ b/instance/index.html
@@ -138,7 +138,20 @@
             ></div>
             <div id="panelWrapper" class="row">
                 <ul id="panelLeft" class="col panel d-flex flex-column bd-highlight mb-3"></ul>
-                <ul id="panelRight" 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>
+                    <div class="tab-content">
+                        <div id="queue" class="tab-pane fade in active">
+                            <ul id="queueList"></ul>
+                        </div>
+                        <div id="playlist" class="tab-pane fade">
+                            <ul id="playlistList"></ul>
+                        </div>
+                    </div>
+                </div>
             </div>
             <div
                 id="progress"
diff --git a/instance/main.js b/instance/main.js
index 8b0dc0ea7d990fe7691238add7558355a53b86b0..255f0cc77747476a0632395c92ccb2548dd53e29 100644
--- a/instance/main.js
+++ b/instance/main.js
@@ -197,13 +197,13 @@ ipcRenderer.on('reload-db-responce', (event, arg) => {
 ipcRenderer.on('reload-queue-responce', (event, arg) => {
     logger.debug('instance', `Web page got reload-queue`);
     countKaraInQueue = 0;
-    document.getElementById('panelRight').innerHTML = '';
+    document.getElementById('queueList').innerHTML = '';
     arg.forEach(kara => {
         countKaraInQueue++;
         ejs.renderFile(__dirname + '/views/karaQueueListItem.ejs', { kara: kara }, (err, data) => {
             if (err) logger.error('instance', err);
-            document.getElementById('panelRight').innerHTML = `
-                ${document.getElementById('panelRight').innerHTML}
+            document.getElementById('queueList').innerHTML = `
+                ${document.getElementById('queueList').innerHTML}
                 ${data}`;
         });
     });