diff --git a/packages/webamp-modern-2/src/UIRoot.ts b/packages/webamp-modern-2/src/UIRoot.ts
index 90861100..77133995 100644
--- a/packages/webamp-modern-2/src/UIRoot.ts
+++ b/packages/webamp-modern-2/src/UIRoot.ts
@@ -8,9 +8,10 @@ import GammaGroup from "./skin/GammaGroup";
 import Container from "./skin/Container";
 import Vm from "./skin/VM";
 import BaseObject from "./skin/BaseObject";
-import AudioPlayer from "./skin/AudioPlayer";
+import AUDIO_PLAYER, { AudioPlayer } from "./skin/AudioPlayer";
 
 export class UIRoot {
+  _div: HTMLDivElement = document.createElement("div");
   // Just a temporary place to stash things
   _bitmaps: Bitmap[] = [];
   _fonts: (TrueTypeFont | BitmapFont)[] = [];
@@ -25,7 +26,7 @@ export class UIRoot {
   _objects: BaseObject[] = [];
 
   vm: Vm = new Vm();
-  audio: AudioPlayer = new AudioPlayer();
+  audio: AudioPlayer = AUDIO_PLAYER;
 
   reset() {
     this.dispose();
@@ -40,9 +41,10 @@ export class UIRoot {
 
     // A list of all objects created for this skin.
     this._objects = [];
+  }
 
-    this.vm = new Vm();
-    this.audio = new AudioPlayer();
+  getRootDiv() {
+    return this._div;
   }
 
   addObject(obj: BaseObject) {
@@ -168,10 +170,7 @@ export class UIRoot {
       }
       const url = imgCache.get(groupId);
       // TODO: Techincally we only need one per image/gammagroup.
-      document.documentElement.style.setProperty(
-        bitmap.getCSSVar(),
-        `url(${url})`
-      );
+      this._div.style.setProperty(bitmap.getCSSVar(), `url(${url})`);
     }
   }
 
@@ -210,6 +209,7 @@ export class UIRoot {
   }
 
   dispose() {
+    this._div.remove();
     for (const obj of this._objects) {
       obj.dispose();
     }
diff --git a/packages/webamp-modern-2/src/index.ts b/packages/webamp-modern-2/src/index.ts
index 1c0aac69..09cc231c 100644
--- a/packages/webamp-modern-2/src/index.ts
+++ b/packages/webamp-modern-2/src/index.ts
@@ -13,8 +13,6 @@ function hack() {
 }
 
 addDropHandler(loadSkin);
-const NODE = document.createElement("div");
-document.body.appendChild(NODE);
 
 const STATUS = document.getElementById("status");
 
@@ -32,8 +30,8 @@ async function main() {
 }
 
 async function loadSkin(skinData: Blob) {
-  removeAllChildNodes(NODE);
   UI_ROOT.reset();
+  document.body.appendChild(UI_ROOT.getRootDiv());
 
   setStatus("Loading .wal archive...");
   const zip = await JSZip.loadAsync(skinData);
@@ -49,7 +47,7 @@ async function loadSkin(skinData: Blob) {
   setStatus("Rendering skin for the first time...");
   for (const container of uiRoot.getContainers()) {
     container.draw();
-    NODE.appendChild(container.getDiv());
+    UI_ROOT.getRootDiv().appendChild(container.getDiv());
   }
 
   setStatus("Initializing Maki...");
diff --git a/packages/webamp-modern-2/src/skin/AudioPlayer.ts b/packages/webamp-modern-2/src/skin/AudioPlayer.ts
index 0a56aea0..721bdcaf 100644
--- a/packages/webamp-modern-2/src/skin/AudioPlayer.ts
+++ b/packages/webamp-modern-2/src/skin/AudioPlayer.ts
@@ -1,4 +1,4 @@
-export default class AudioPlayer {
+export class AudioPlayer {
   _input: HTMLInputElement = document.createElement("input");
   _audio: HTMLAudioElement = document.createElement("audio");
   constructor() {
@@ -67,3 +67,7 @@ export default class AudioPlayer {
     return this._audio.duration;
   }
 }
+
+const AUDIO_PLAYER = new AudioPlayer();
+
+export default AUDIO_PLAYER;