diff --git a/assets/audio/BattleForAzeroth.ogg b/assets/audio/BattleForAzeroth.ogg
new file mode 100644
index 0000000..64a3820
Binary files /dev/null and b/assets/audio/BattleForAzeroth.ogg differ
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 6f1e328..0e5e5b0 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -19,13 +19,6 @@ html, body {
     z-index: -1;
 }
 
-#logo {
-    z-index: 1;
-    top: 20px;
-    left: 20px;
-    position: absolute;
-}
-
 #quitButtonContainer {
     bottom: 10px;
     right: 10px;
@@ -150,4 +143,30 @@ html, body {
 
 .foreground {
     z-index: 1;
+}
+
+.xPacButton {
+    z-index: 1;
+    position: absolute;
+    top: -15px;
+    left: -55px;
+    width: 633px;
+    height: 289px;
+    border: none;
+    outline: none;
+    display: inline-block;
+    background: url('../img/ui/logos/Shadowlands.png') no-repeat top;
+    background-color: transparent;
+    transform: scale(0.8);
+    transition: 0.2s;
+}
+
+.xPacButton:hover {
+    transform: scale(0.81);
+    -webkit-filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
+}
+
+.xPacButton:active {
+    transform: scale(0.79);
+    -webkit-filter: drop-shadow(0px 0px 0px rgb(0, 0, 0));
 }
\ No newline at end of file
diff --git a/assets/img/bg/BattleForAzeroth.webm b/assets/img/bg/BattleForAzeroth.webm
new file mode 100644
index 0000000..38ea178
Binary files /dev/null and b/assets/img/bg/BattleForAzeroth.webm differ
diff --git a/assets/img/ui/logos/BattleForAzeroth.png b/assets/img/ui/logos/BattleForAzeroth.png
new file mode 100644
index 0000000..4e338f8
Binary files /dev/null and b/assets/img/ui/logos/BattleForAzeroth.png differ
diff --git a/assets/js/audiohandler.js b/assets/js/audiohandler.js
index cd4418d..c01cc56 100644
--- a/assets/js/audiohandler.js
+++ b/assets/js/audiohandler.js
@@ -1,15 +1,24 @@
-var bgSelection = 0;
+var expansion = 8;
 var audioSelect = {
+    'BattleForAzeroth' : './assets/audio/BattleForAzeroth.ogg',
     'Shadowlands' : './assets/audio/Shadowlands.ogg'
 }
-var audio;
+var videoSelect = {
+    'BattleForAzeroth' : './assets/img/bg/BattleForAzeroth.webm',
+    'Shadowlands' : './assets/img/bg/Shadowlands.webm'
+}
+var logoSelect = {
+    'BattleForAzeroth' : './assets/img/ui/logos/BattleForAzeroth.png',
+    'Shadowlands' : './assets/img/ui/logos/Shadowlands.png',
+}
+var audio = new Audio();
 var audioInitialPlayback = false;
 var queuePos = null;
 var disconnected = false;
 
 function init()
 {
-    audio = new Audio(audioSelect.Shadowlands);
+    switchExpansion();
     window.addEventListener('click', waitForInteractionToPlayAudio);
 
     getPositionInQueue();
@@ -23,6 +32,8 @@ function waitForInteractionToPlayAudio()
 {
     if(!audioInitialPlayback)
     {
+        audio.volume = 0.1;
+        audio.loop = true;
         audio.play();
         audioInitialPlayback = true;
     }
@@ -80,4 +91,83 @@ function doDisconnect()
 {
     // disconnected = true;
     // console.log("DC'd")
+}
+
+function manualChangeExpac()
+{
+    console.log("Changing xpac to: ");
+    expansion += 1;
+    if(expansion > 8)
+        expansion = 0;
+    
+    switchExpansion();
+}
+
+function switchExpansion()
+{
+    queuePos = null;
+    getPositionInQueue();
+
+    var bg = document.getElementById('background');
+    var logo = document.getElementById('logo')
+    audio.pause();
+    switch(expansion)
+    {
+        case 0:
+            console.log('Vanilla');
+            expansion = 7;
+            switchExpansion();
+        break;
+
+        case 1:
+            console.log('Burning Crusade');
+            expansion = 7;
+            switchExpansion();
+        break;
+
+        case 2:
+            console.log('Wrath of the Lich King');
+            expansion = 7;
+            switchExpansion();
+        break;
+
+        case 3:
+            console.log('Cataclysm');
+            expansion = 7;
+            switchExpansion();
+        break;
+
+        case 4:
+            console.log('Mists of Pandaria');
+            expansion = 7;
+            switchExpansion();
+        break;
+
+        case 5:
+            console.log('Warlords of Draenor');
+            expansion = 7;
+            switchExpansion();
+        break;
+
+        case 6:
+            console.log('Legion');
+            expansion = 7;
+            switchExpansion();
+        break;
+
+        case 7:
+            console.log('Battle for Azeroth');
+            audio.src = audioSelect.BattleForAzeroth;
+            bg.setAttribute('src', videoSelect.BattleForAzeroth);
+            logo.style.background = `url(${logoSelect.BattleForAzeroth})`;
+        break;
+
+        case 8:
+            console.log('Shadowlands');
+            audio.src = audioSelect.Shadowlands;
+            bg.setAttribute('src', videoSelect.Shadowlands);
+            logo.style.background = `url(${logoSelect.Shadowlands})`;
+        break;
+    }
+    audio.play();
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 1c7193f..5be2942 100644
--- a/index.html
+++ b/index.html
@@ -9,11 +9,11 @@
     <body onload="init();">
         
         <!-- LOGO -->
-        <img src="assets/img/ui/logos/Shadowlands.png" style="width: 400px;" id="logo">
+        <button class="xPacButton" id="logo" onclick="manualChangeExpac();"></button>
         
         <!--QUIT BUTTON-->
         <div id="quitButtonContainer" class="foreground">
-            <button class="button"> Quit </button>
+            <button class="button" onclick="location.href='http://www.wowaholics.org/';"> Quit </button>
         </div>
         
         <!--QUEUE BOX-->