diff --git a/bot.js b/bot.js
index 9997b5d..a6ba469 100644
--- a/bot.js
+++ b/bot.js
@@ -25,12 +25,13 @@ class Bot {
         logger.verbose('Registering cleanup function');
         utils.Cleanup(() => {
             for (let gh in Object.values(this.guildHandlers)) {
-                if (gh)
+                if (gh instanceof guilding.GuildHandler)
                     gh.destroy();
             }
             this.client.destroy().then(() => {
                 logger.debug('destroyed client');
             });
+            this.maindb.close();
         });
         cmd.setLogger(logger);
         logger.verbose('Verifying config');
@@ -194,10 +195,12 @@ class Bot {
                 logger.debug('Destroying client...');
 
                 this.client.destroy().finally(() => {
-                    logger.debug('Exiting server...')
+                    logger.debug('Exiting server...');
                     this.webServer.stop().then(() => {
                         logger.debug(`Exiting Process...`);
                         process.exit(0);
+                    }).catch(() => {
+                        process.exit(0);
                     });
                 });
             });
diff --git a/lib/music.js b/lib/music.js
index fa8c80e..c74e0e1 100644
--- a/lib/music.js
+++ b/lib/music.js
@@ -228,10 +228,13 @@ exports.DJ = class {
     }
 
     /**
-     * Stops playing music by ending the Dispatcher and disconnecting
+     * Stops playing music by ending the Dispatcher and disconnecting.
+     * Also sets playing to false and clears the queue and the current song.
      */
     stop() {
+        this.playing = false;
         this.queue = [];
+        this.current = null;
         logger.verbose("Stopping music...");
         try {
             if (this.disp) {
@@ -248,6 +251,7 @@ exports.DJ = class {
             if (this.voiceChannel) {
                 this.voiceChannel.leave();
                 logger.debug("Left VoiceChannel");
+                logger.info(`Disconnected from Voicechannel ${this.voiceChannel.name}`);
             }
         } catch (error) {
             logger.verbose(JSON.stringify(error));
@@ -441,4 +445,4 @@ exports.nowPlaying = function (guildId) {
  */
 exports.shuffle = function (guildId) {
     djs[guildId].shuffle();
-};
\ No newline at end of file
+};
diff --git a/lib/webapi.js b/lib/webapi.js
index fdcfd0e..7c01981 100644
--- a/lib/webapi.js
+++ b/lib/webapi.js
@@ -62,7 +62,7 @@ exports.WebServer = class {
     stop() {
         return new Promise((resolve) => {
             if (this.server)
-                this.server.close(() => resolve());
+                this.server.close(resolve);
             else
                 resolve();
         })
@@ -245,6 +245,18 @@ class DJ {
         return this.dj.playing;
     }
 
+    get connected() {
+        return this.dj.connected;
+    }
+
+    get queueCount() {
+        return this.dj.queue.length;
+    }
+
+    get songStartTime() {
+        return this.dj.disp.player.streamingData.startTime;
+    }
+
     get volume() {
         return this.dj.volume;
     }
@@ -411,4 +423,4 @@ class LogEntry {
         this.timestamp = entry.timestamp;
         this.level = entry.level;
     }
-}
\ No newline at end of file
+}
diff --git a/web/graphql/schema.graphql b/web/graphql/schema.graphql
index 383948f..0083f16 100644
--- a/web/graphql/schema.graphql
+++ b/web/graphql/schema.graphql
@@ -28,12 +28,15 @@ type GuildMember {
 }
 type DJ {
     queue(first: Int = 10, offset: Int = 0, id: String): [MediaEntry]
-    playing: Boolean
+    queueCount: Int!
+    songStartTime: String
+    playing: Boolean!
     volume: Float
     repeat: Boolean
     currentSong: MediaEntry
     quality: String
     voiceChannel: String
+    connected: Boolean!
 }
 type Guild {
     id: ID!
@@ -75,4 +78,4 @@ type Query {
     config: String
     prefix: String
     logs(first: Int, offset: Int = 0, id: String, last: Int = 10, level: String): [LogEntry]
-}
\ No newline at end of file
+}
diff --git a/web/http/index.html b/web/http/index.html
index 1b44a15..fb27838 100644
--- a/web/http/index.html
+++ b/web/http/index.html
@@ -11,7 +11,6 @@
 <body>
 	<div id="content">
 		<div class="column" id="column-left">
-			<pre class="cell text-left" id="bot-config"></pre>
 			<h2 class="cell">Logs</h2>
 			<div id="log-container" class="listContainer"></div>
 		</div>
@@ -70,18 +69,24 @@
 					<span class="label text-right">Repeat: </span>
 					<span class="text-left" id="dj-repeat"></span>
 				</div>
-				<a class="cell listContainer" id="dj-songinfo" style="display: none">
-					<div class="cell">
-						<span class="label text-right">Voice Channel: </span>
-						<span class="text-left" id="dj-voiceChannel"></span>
-					</div>
-					<div id="songinfo-container">
+				<div class="cell">
+					<span class="label text-right">Voice Channel: </span>
+					<span class="text-left" id="dj-voiceChannel"></span>
+				</div>
+				<div class="cell listContainer" id="dj-songinfo" style="display: none">
+					<a id="songinfo-container">
 						<span id="dj-songname"></span>
 						<img id="dj-songImg" src="" alt=""/>
-						<span style="font-weight: bold">Next 5 Songs</span>
+						<div id="dj-songProgress">
+							<span id="dj-songCurrentTS"></span>
+						</div>
+					</a>
+					<div id="dj-queue-container">
+						<span class="cell label" id="Queue Song count"><span id="dj-queueCount"></span> Songs in Queue</span>
+						<span class="cell">Next <span id="dj-queueDisplayCount">0</span> Songs:</span>
 						<div id="dj-songQueue"></div>
 					</div>
-				</a>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -89,4 +94,4 @@
 		startUpdating();
 	</script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/web/http/sass/style.sass b/web/http/sass/style.sass
index e48e325..20c05e5 100644
--- a/web/http/sass/style.sass
+++ b/web/http/sass/style.sass
@@ -120,6 +120,8 @@ div.cell > *
   padding: 2px
   margin: 5px
   border-radius: 5px
+  text-decoration: none
+  color: $cPrimary
 
 .songEntry > *
   display: table-column
@@ -130,6 +132,7 @@ div.cell > *
   max-width: 20%
   height: auto
   width: auto
+  border-radius: 2px
 
 .songEntry a
   width: 80%
@@ -184,11 +187,6 @@ div.cell > *
 #status-indicator[status=offline]
   background-color: $cOffline
 
-#bot-config
-  background: darken($cBackground, 3)
-  word-wrap: break-word
-  display: none
-
 #guild-select
   background: $cBackgroundVariant
   color: $cPrimary
@@ -211,14 +209,19 @@ div.cell > *
   border-radius: 25%
 
 #dj-songinfo
+  display: block
+  background-color: $cBackgroundVariant
+  border-radius: 20px
+
+#songinfo-container
+  display: list-item
   text-decoration: none
   color: $cPrimary
   padding: 10px
+  width: calc(100% - 20px)
 
-#songinfo-container
-  background-color: $cBackgroundVariant
-  border-radius: 20px
-  padding: 10px
+dj-queue-container
+  display: list-item
 
 #dj-songname
   font-weight: bold
diff --git a/web/http/scripts/query.js b/web/http/scripts/query.js
index 92676d1..c78b9fd 100644
--- a/web/http/scripts/query.js
+++ b/web/http/scripts/query.js
@@ -1,5 +1,4 @@
 let latestLogs = [];
-let latestSongs = [];
 
 let status = {
     0: 'ready',
@@ -48,13 +47,11 @@ function queryStatic() {
                         avatar
                     }
                 }
-                config
             }`;
     postQuery(query).then((res) => {
         let d = res.data;
         document.querySelector('#user-avatar').setAttribute('src', d.client.user.avatar);
         document.querySelector('#user-tag').innerText = d.client.user.tag;
-        document.querySelector('#bot-config').innerText = d.config;
     })
 }
 
@@ -121,13 +118,16 @@ function queryGuildStatus(guildId) {
                     guilds(id: "${guildId}") {
                         dj {
                             playing
+                            connected
                             repeat
                             voiceChannel
+                            songStartTime
                             currentSong {
                                 name
                                 url
-                                thumbnail
+                                thumbnail                                
                             }
+                            queueCount
                             queue(first: 5) {
                                 id
                                 name
@@ -141,37 +141,47 @@ function queryGuildStatus(guildId) {
             }`;
     postQuery(query).then((res) => {
         let guild = res.data.client.guilds[0];
-        document.querySelector('#guild-djStatus').innerText = guild.dj.playing? 'playing' : 'idle';
         document.querySelector('#dj-repeat').innerText = guild.dj.repeat? 'on': 'off';
-        if (guild.dj.playing) {
+        document.querySelector('#guild-djStatus').innerText = guild.dj.connected? 'connected' : 'disconnected';
+        if (guild.dj.connected) {
             $('#dj-songinfo').show();
+            document.querySelector('#guild-djStatus').innerText = guild.dj.playing? 'playing' : 'connected';
             document.querySelector('#dj-voiceChannel').innerText = guild.dj.voiceChannel;
-            document.querySelector('#dj-songinfo').setAttribute('href', guild.dj.currentSong.url);
-            document.querySelector('#dj-songname').innerText = guild.dj.currentSong.name;
-            document.querySelector('#dj-songImg').setAttribute('src', guild.dj.currentSong.thumbnail);
-            let songContainer = document.querySelector('#dj-songQueue');
-            for (let song of guild.dj.queue) {
-                if ($(`.songEntry[song-id=${song.id}]`).length === 0) {
-                    let songEntry = document.createElement('div');
+            let songinfoContainer = $('#dj-songinfo');
+
+            if (guild.dj.playing) {
+                if (songinfoContainer.is(':hidden'))
+                    songinfoContainer.show();
+                document.querySelector('#songinfo-container').setAttribute('href', guild.dj.currentSong.url);
+                document.querySelector('#dj-songname').innerText = guild.dj.currentSong.name;
+                document.querySelector('#dj-songImg').setAttribute('src', guild.dj.currentSong.thumbnail.replace('maxresdefault', 'mqdefault'));
+                let songSd = getSplitDuration(Date.now() - guild.dj.songStartTime);
+                document.querySelector('#dj-songCurrentTS').innerText = `${songSd.minutes}:${songSd.seconds.toString().padStart(2, '0')}`;
+                document.querySelector('#dj-songCurrentTS').setAttribute('start-ts', guild.dj.songStartTime);
+                document.querySelector('#dj-queueCount').innerText = guild.dj.queueCount;
+                let songContainer = document.querySelector('#dj-songQueue');
+                $('.songEntry').remove();
+                for (let song of guild.dj.queue) {
+                    let songEntry = document.createElement('a');
+                    songEntry.setAttribute('href', song.url);
                     songEntry.setAttribute('class', 'songEntry');
                     songEntry.setAttribute('song-id', song.id);
                     let imageEntry = document.createElement('img');
-                    imageEntry.setAttribute('src', song.thumbnail);
+                    imageEntry.setAttribute('src', song.thumbnail.replace('maxresdefault', 'mqdefault'));
                     songEntry.appendChild(imageEntry);
                     let nameEntry = document.createElement('a');
-                    nameEntry.setAttribute('href', song.url);
                     nameEntry.innerText = song.name;
                     songEntry.appendChild(nameEntry);
                     songContainer.appendChild(songEntry);
                 }
+                document.querySelector('#dj-queueDisplayCount').innerText = document.querySelectorAll('.songEntry').length;
+            } else {
+                if (songinfoContainer.is(':not(:hidden)'))
+                    songinfoContainer.hide();
             }
-            let songEntries = $('.songEntry');
-            if (songEntries.length > 5) {
-                document.querySelector('#dj-songQueue').firstElementChild.remove();
-            }
-            let latestSongs = guild.dj.queue;
         } else {
             $('#dj-songinfo').hide();
+            document.querySelector('#dj-voiceChannel').innerText = 'None';
         }
     });
 }
@@ -201,7 +211,11 @@ function queryStatus() {
             .innerText = `${sd.days}d ${sd.hours}h ${sd.minutes}min ${sd.seconds}s`;
 
         document.querySelector('#client-guildCount').innerText = d.client.guildCount;
-        document.querySelector('#status-indicator').setAttribute('status', d.client.user.presence.status);
+        if (d.client.status !== 0) {
+            document.querySelector('#status-indicator').setAttribute('status', 'offline');
+        } else {
+            document.querySelector('#status-indicator').setAttribute('status', d.client.user.presence.status);
+        }
         document.querySelector('#user-game').innerText = d.client.user.presence.game;
 
         setTimeout(() => {
@@ -283,4 +297,8 @@ function startUpdating() {
         let guildId = ev.target.value;
         queryGuild(guildId);
     });
-}
\ No newline at end of file
+    setInterval(() => {
+        let songSd = getSplitDuration(Date.now() - $('#dj-songCurrentTS').attr('start-ts'));
+        document.querySelector('#dj-songCurrentTS').innerText = `${songSd.minutes}:${songSd.seconds.toString().padStart(2, '0')}`;
+    }, 500);
+}