diff --git a/css/hues-m.css b/css/hues-m.css
index 42e62d6..477bd26 100644
--- a/css/hues-m.css
+++ b/css/hues-m.css
@@ -32,6 +32,23 @@
     border-radius: 10px;
 }
 
+.hues-m-leftinfo, .hues-m-rightinfo {
+    position: absolute;
+    font-size: 10px;
+    text-align: center;
+    color: rgba(255,255,255, 0.7);
+    bottom: 29px;
+    width: 100px;
+}
+
+.hues-m-leftinfo {
+    left: 8px;
+}
+
+.hues-m-rightinfo {
+    right: 8px;
+}
+
 .hues-m-huename {
     font-size: 8px;
     height: 12px;
@@ -137,16 +154,18 @@
 
 .hues-m-songtitle, .hues-m-imagename, .hues-m-huename {
     position: absolute;
-    left: 8px;
-    right: 8px;
     text-align: center;
     padding: 0 4px;
+    left: 8px;
+    right: 8px;
 }
 .hues-m-songtitle {
     bottom: 5px;
 }
 .hues-m-imagename {
     bottom: 29px;
+    left: 108px;
+    right: 108px;
 }
 
 .hues-m-songtitle > a:link, .hues-m-songtitle > a:visited, .hues-m-imagename > a:link, .hues-m-imagename > a:visited {
@@ -292,10 +311,20 @@ input[type=range]::-ms-thumb {
   .hues-m-controls {
     height: 54px;
     }
-  .hues-m-songtitle, .hues-m-imagename {
+  .hues-m-imagename {
+    left: 300px;
+    right: 300px;
+  }
+  .hues-m-songtitle {
     left: 192px;
     right: 192px;
-    }
+  }
+  .hues-m-leftinfo {
+    left: 200px;
+  }
+  .hues-m-rightinfo {
+    right: 200px;
+  }
   .hues-m-leftbox {
     bottom: 0;
     left: 0;
diff --git a/css/style.css b/css/style.css
index 98da097..5c64efd 100644
--- a/css/style.css
+++ b/css/style.css
@@ -57,11 +57,55 @@ html, body {
     font-size: 12pt;
 }
 
-#huesSettings {
-    background: rgba(127,127,127,0.5);
-    border-color: rgba(0,0,0,0.5);
-    border-width: 4px;
+#settingsHelper {
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width:100%;
+    height:100%;
+}
+
+#settingsWindow {
+    background: rgba(200,200,200, 0.7);
+    border-color: "black";
+    border-width: 2px;
+    border-style: solid;
+    font-family: 'PetMe64Web';
+    padding: 5px;
+}
+
+.settings-category {
+    font-size: 10pt;
+}
+
+.settings-individual{
+    font-size: 8px;
+}
+
+.settings-buttons{
+    margin: 10px 2px 10px 0px;
+}
+
+.settings-checkbox{
+    display: none;
+}
+
+input[type="radio"]:checked + label {
+    background: rgba(255,255,255, 0.5);
+}
+
+.settings-label {
+    font-size: 8px;
+    margin: 10px 2px;
+    padding: 3px;
+    background: rgba(127,127,127, 0.5);
+    border-color: rgb(0,0,0);
+    border-width: 1px;
     border-style: solid;
+    cursor: pointer;
 }
 
 @keyframes fadeout {
diff --git a/index.html b/index.html
index a932087..997a7e2 100644
--- a/index.html
+++ b/index.html
@@ -38,7 +38,11 @@
                 <div id="preSub"></div>
             </div>
         </div>
-        <div id="huesSettings">TODO</div>
+        <div id="settingsHelper">
+            <div id="settingsWindow">
+                <div class="content" id="huesSettings"></div>
+            </div>
+        </div>
         <div id="huesUI"></div>
         <canvas id="waifu" width="1280" height="720"></canvas>
     </body>
diff --git a/js/HuesCanvas.js b/js/HuesCanvas.js
index c0eeb7f..9cd0d32 100644
--- a/js/HuesCanvas.js
+++ b/js/HuesCanvas.js
@@ -85,7 +85,7 @@ HuesCanvas.prototype.redraw = function() {
         this.canvas.fillRect(0,0,width,720);
     }
 
-    if(this.image) {
+    if(this.image && (this.image.bitmap || this.image.bitmaps)) {
         var bitmap = this.image.animated ?
             this.image.bitmaps[this.animFrame] : this.image.bitmap;
         if(this.smartAlign) {
@@ -105,8 +105,6 @@ HuesCanvas.prototype.redraw = function() {
         }
         if(this.xBlur || this.yBlur) {
             this.canvas.globalAlpha = this.blurAlpha;
-            var delta = cTime - this.blurStart;
-            this.blurDistance = this.blurAmount * Math.exp(-this.blurDecay * delta);
         }
         if(this.xBlur) {
             for(var i=this.blurMin; i<=this.blurMax; i+= this.blurDelta) {
@@ -171,6 +169,10 @@ HuesCanvas.prototype.animationLoop = function() {
         this.needsRedraw = true;
     }
     if(this.blurStart) {
+        var delta = this.aContext.currentTime - this.blurStart;
+        this.blurDistance = this.blurAmount * Math.exp(-this.blurDecay * delta);
+        
+        // Update UI
         var dist = this.blurDistance / this.blurAmount;
         if(this.xBlur)
             this.core.blurUpdated(dist, 0);
diff --git a/js/HuesCore.js b/js/HuesCore.js
index cbef55c..9a22a2a 100644
--- a/js/HuesCore.js
+++ b/js/HuesCore.js
@@ -32,7 +32,6 @@ HuesCore = function(defaults) {
     this.renderer = new HuesCanvas("waifu", this.soundManager.context, this);
     
     this.uiArray.push(new RetroUI(), new WeedUI(), new ModernUI(), new XmasUI());
-    this.changeUI(1);
     this.settings.connectCore(this);
     
     var that = this;
@@ -60,6 +59,10 @@ HuesCore = function(defaults) {
 
     document.onkeydown = function(e){
         e = e || window.event;
+        // Ignore modifiers so we don't steal other events
+        if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) {
+            return true;
+        }
         var key = e.keyCode || e.which;
         return that.keyHandler(key);
     };
@@ -218,7 +221,6 @@ HuesCore.prototype.songDataUpdated = function() {
     if (this.currentSong) {
         this.beatLength = 0;
         this.userInterface.updateLists();
-        this.userInterface.updateTexts();
         this.userInterface.setSongText();
         this.userInterface.setImageText();
     } else {
@@ -447,7 +449,6 @@ HuesCore.prototype.changeUI = function(index) {
         this.userInterface = this.uiArray[index];
         this.userInterface.connectCore(this);
         this.userInterface.updateLists();
-        this.userInterface.updateTexts();
         this.userInterface.setSongText();
         this.userInterface.setImageText();
         this.userInterface.setColourText(this.colourIndex);
@@ -464,7 +465,7 @@ HuesCore.prototype.settingsUpdated = function() {
     case "retro":
         this.changeUI(0);
         break;
-    case "weed":
+    case "v4.20":
         this.changeUI(1);
         break;
     case "modern":
@@ -481,7 +482,7 @@ HuesCore.prototype.settingsUpdated = function() {
     case "pastel":
         this.colours = this.pastelColours;
         break;
-    case "gp":
+    case "v4.20":
         this.colours = this.weedColours;
         break;
     }
@@ -561,28 +562,28 @@ HuesCore.prototype.keyHandler = function(key) {
         this.userInterface.toggleHide();
         break;
     case 82: // R
-        this.window.showRespacks();
+        this.settings.showRespacks();
         break;
-    case 69: // E
+    /*case 69: // E
         this.window.showEditor();
-        break;
+        break;*/
     case 79: // O
-        this.window.showOptions();
+        this.settings.showOptions();
         break;
     case 73: // I
-        this.window.showInfo();
+        this.settings.showInfo();
         break;
     case 49: // NUMBER_1
-        this.changeUI(0);
+        this.settings.set("currentUI", "retro");
         break;
     case 50: // NUMBER_2
-        this.changeUI(1);
+        this.settings.set("currentUI", "v4.20");
         break;
     case 51: // NUMBER_3
-        this.changeUI(2);
+        this.settings.set("currentUI", "modern");
         break;
     case 52: // NUMBER_4
-        this.changeUI(3);
+        this.settings.set("currentUI", "xmas");
         break;
     case 76: // L
         this.loadLocal();
@@ -594,7 +595,7 @@ HuesCore.prototype.keyHandler = function(key) {
         this.toggleSongList();
         break;
     case 87: // W
-        this.toggleSettingsWindow();
+        this.settings.toggle();
         break;
     case 16: // SHIFT
         this.randomSong();
diff --git a/js/HuesSettings.js b/js/HuesSettings.js
index a1b2826..c66a64c 100644
--- a/js/HuesSettings.js
+++ b/js/HuesSettings.js
@@ -44,7 +44,7 @@ HuesSettings.prototype.settingsOptions = {
     },
     blurAmount : {
         name : "Blur Amount",
-        options : ["low", "med", "high"]
+        options : ["low", "medium", "high"]
     },
     blurDecay : {
         name : "Blur Decay",
@@ -56,11 +56,11 @@ HuesSettings.prototype.settingsOptions = {
     },
     currentUI : {
         name : "User Interface",
-        options : ["retro", "weed", "modern", "xmas"]
+        options : ["retro", "v4.20", "modern", "xmas"]
     },
     colourSet : {
         name : "Colour Set",
-        options : ["normal", "pastel", "420"]
+        options : ["normal", "pastel", "v4.20"]
     },
     blackoutUI : {
         name : "Blackout affects UI",
@@ -75,6 +75,9 @@ HuesSettings.prototype.settingsOptions = {
 
 function HuesSettings(defaults) {
     this.core = null;
+    this.root = document.getElementById("huesSettings");
+    this.window = document.getElementById("settingsWindow");
+    this.show(); // TODO hide
     
     for(var attr in this.defaultSettings) {
         if(attr == "respacks") {
@@ -92,6 +95,8 @@ function HuesSettings(defaults) {
     }
     
     this.defaults = defaults;
+    
+    this.initUI();
 }
 
 HuesSettings.prototype.connectCore = function(core) {
@@ -99,13 +104,81 @@ HuesSettings.prototype.connectCore = function(core) {
     core.settingsUpdated();
 };
 
+HuesSettings.prototype.show = function() {
+    this.window.style.display = "block";
+}
+
+HuesSettings.prototype.hide = function() {
+    this.window.style.display = "none";
+}
+
+HuesSettings.prototype.toggle = function() {
+    if(this.window.style.display == "none") {
+        this.window.style.display = "block";
+    } else {
+        this.window.style.display = "none";
+    }
+}
+
+HuesSettings.prototype.initUI = function() {
+    var doc = this.root.ownerDocument;
+    
+    // To order things nicely
+    for(cat in this.settingsCategories) {
+        var catContainer = doc.createElement("div");
+        catContainer.textContent = cat;
+        catContainer.className = "settings-category";
+        var cats = this.settingsCategories[cat];
+        for(var i = 0; i < cats.length; i++) {
+            var setName = cats[i];
+            var setContainer = doc.createElement("div");
+            var setting = this.settingsOptions[setName];
+            setContainer.textContent = setting.name;
+            setContainer.className = "settings-individual";
+            var buttonContainer = doc.createElement("div");
+            buttonContainer.className = "settings-buttons";
+            for(var j = 0; j < setting.options.length; j++) {
+                var option = setting.options[j];
+                var checkbox = doc.createElement("input");
+                checkbox.className = "settings-checkbox";
+                checkbox.type = "radio";
+                checkbox.name = setName;
+                checkbox.value = option;
+                checkbox.id = setName + "-" + option;
+                if(localStorage[setName] == option) {
+                    checkbox.checked = true;
+                }
+                var that = this;
+                checkbox.onclick = function() {
+                    that.set(this.name, this.value);
+                }
+                buttonContainer.appendChild(checkbox);
+                // So we can style this nicely
+                var label = doc.createElement("label");
+                label.className = "settings-label";
+                label.htmlFor = checkbox.id;
+                label.textContent = option.toUpperCase();
+                buttonContainer.appendChild(label);
+            }
+            setContainer.appendChild(buttonContainer);
+            catContainer.appendChild(setContainer);
+        }
+        this.root.appendChild(catContainer);
+    }
+}
+
 // Set a named index to its named value, returns false if name doesn't exist
 HuesSettings.prototype.set = function(setting, value) {
     value = value.toLowerCase();
     var opt = this.settingsOptions[setting];
     if(!opt || opt.options.indexOf(value) == -1) {
+        console.log(value, "is not a valid value for", setting);
         return false;
     }
+    // for updating the UI selection
+    try {
+        document.getElementById(setting + "-" + value).checked = true;
+    } catch(e) {}
     localStorage[setting] = value;
     core.settingsUpdated();
     return true;
diff --git a/js/HuesUI.js b/js/HuesUI.js
index 810f080..d0fb63e 100644
--- a/js/HuesUI.js
+++ b/js/HuesUI.js
@@ -25,6 +25,11 @@ function HuesUI(parent) {
     this.volInput = null;
     this.volLabel = null;
     
+    this.beatCount = null;
+    this.timer = null;
+    this.xBlur = null;
+    this.yBlur = null;
+    
     this.initUI();
 }
 
@@ -47,6 +52,18 @@ HuesUI.prototype.initUI = function() {
 
     var hueName = doc.createElement("div");
     this.hueName = hueName;
+    
+    this.timer = doc.createElement("div");
+    this.timer.textContent = "T=$0x0000";
+    
+    this.beatCount = doc.createElement("div");
+    this.beatCount.textContent = "B=$0x00";
+    
+    this.xBlur = doc.createElement("div");
+    this.xBlur.textContent = "X=$0x00";
+    
+    this.yBlur = doc.createElement("div");
+    this.yBlur.textContent = "Y=$0x00";
 
     //this.setupVolume(leftBox)
 }
@@ -73,8 +90,6 @@ HuesUI.prototype.hide = function() {
 HuesUI.prototype.resize = function() {}
 HuesUI.prototype.modeUpdated = function() {}
 HuesUI.prototype.beat = function() {}
-HuesUI.prototype.updateTime = function() {}
-HuesUI.prototype.blurUpdated = function(x, y) {}
 
 HuesUI.prototype.setSongText = function() {
     var song = this.core.currentSong;
@@ -93,7 +108,7 @@ HuesUI.prototype.setImageText = function() {
         return;
 
     this.imageLink.textContent = image.fullname.toUpperCase();
-    this.imageLink.href = image.source;
+    this.imageLink.href = image.source ? image.source : "";
 }
 
 HuesUI.prototype.setColourText = function(colour) {
@@ -108,8 +123,24 @@ HuesUI.prototype.updateLists = function() {
     // TODO display this
 }
 
-HuesUI.prototype.updateTexts = function() {
-    // Timer, beat counter
+HuesUI.prototype.blurUpdated = function(x, y) {
+    x = Math.floor(x * 0xFF);
+    y = Math.floor(y * 0xFF);;
+    this.xBlur.textContent = "X=" + this.intToHex2(x);
+    this.yBlur.textContent = "Y=" + this.intToHex2(y);
+}
+
+HuesUI.prototype.updateTime = function(time) {
+    time = Math.floor(time * 1000);
+    this.timer.textContent = "T=" + this.intToHex4(time);
+}
+
+HuesUI.prototype.intToHex2 = function(num) {
+    return '$0x' + ("00"+num.toString(16)).slice(-2);
+}
+
+HuesUI.prototype.intToHex4 = function(num) {
+    return '$0x' + ("0000"+num.toString(16)).slice(-4);
 }
 
 /*
@@ -120,8 +151,6 @@ function RetroUI() {
     this.container = null;
     this.mode = null;
     this.beatBar = null;
-    this.beatCount = null;
-    this.timer = null;
     this.colourIndex = null;
     this.version = null;
     HuesUI.call(this);
@@ -142,21 +171,9 @@ RetroUI.prototype.initUI = function() {
     this.mode = doc.createElement("div");
     container.appendChild(this.mode);
     container.appendChild(this.imageName);
-    
-    this.timer = doc.createElement("div");
-    this.timer.textContent = "T=$0x0000";
     container.appendChild(this.timer);
-    
-    this.beatCount = doc.createElement("div");
-    this.beatCount.textContent = "B=$0x00";
     container.appendChild(this.beatCount);
-    
-    this.xBlur = doc.createElement("div");
-    this.xBlur.textContent = "X=$0x00";
     container.appendChild(this.xBlur);
-    
-    this.yBlur = doc.createElement("div");
-    this.yBlur.textContent = "Y=$0x00";
     container.appendChild(this.yBlur);
     
     this.colourIndex = doc.createElement("div");
@@ -184,13 +201,6 @@ RetroUI.prototype.modeUpdated = function() {
     this.mode.textContent = "M=" + this.core.getCurrentMode();
 }
 
-RetroUI.prototype.blurUpdated = function(x, y) {
-    x = Math.floor(x * 0xFF);
-    y = Math.floor(y * 0xFF);;
-    this.xBlur.textContent = "X=" + this.intToHex2(x);
-    this.yBlur.textContent = "Y=" + this.intToHex2(y);
-}
-
 RetroUI.prototype.setImageText = function() {
     var image = this.core.currentImage;
     
@@ -216,18 +226,6 @@ RetroUI.prototype.beat = function() {
     this.beatCount.textContent = "B=" + this.intToHex2(this.core.getSafeBeatIndex());
 }
 
-RetroUI.prototype.updateTime = function(time) {
-    time = Math.floor(time * 1000);
-    this.timer.textContent = "T=" + this.intToHex4(time);
-}
-
-RetroUI.prototype.intToHex2 = function(num) {
-    return '$0x' + ("00"+num.toString(16)).slice(-2);
-}
-RetroUI.prototype.intToHex4 = function(num) {
-    return '$0x' + ("0000"+num.toString(16)).slice(-4);
-}
-
 function ModernUI() {
     this.beatBar = null;
     this.beatLeft = null;
@@ -235,6 +233,8 @@ function ModernUI() {
     this.beatCenter = null;
     this.rightBox = null;
     this.leftBox = null;
+    this.rightInfo = null;
+    this.leftInfo = null;
     this.controls = null;
     
     HuesUI.call(this);
@@ -270,6 +270,19 @@ ModernUI.prototype.initUI = function() {
     rightBox.className = "hues-m-rightbox";
     controls.appendChild(rightBox);
     this.rightBox = rightBox;
+    
+    //TODO add stuff to right box
+    
+    var leftInfo = doc.createElement("div");
+    leftInfo.className = "hues-m-leftinfo";
+    var rightInfo = doc.createElement("div");
+    rightInfo.className = "hues-m-rightinfo";
+    leftInfo.appendChild(this.xBlur);
+    leftInfo.appendChild(this.yBlur);
+    rightInfo.appendChild(this.timer);
+    rightInfo.appendChild(this.beatCount);
+    controls.appendChild(leftInfo);
+    controls.appendChild(rightInfo);
 
     var beatBar = doc.createElement("div");
     beatBar.className = "hues-m-beatbar";
@@ -310,6 +323,7 @@ ModernUI.prototype.beat = function() {
         span.textContent = current;
         this.beatCenter.appendChild(span);
     }
+    this.beatCount.textContent = "B=" + this.intToHex4(this.core.getSafeBeatIndex());
 }
 
 ModernUI.prototype.setSongText = function() {