diff --git a/package-lock.json b/package-lock.json
index 1173b88..4425231 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7209,6 +7209,11 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "nexusui": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/nexusui/-/nexusui-2.1.5.tgz",
+      "integrity": "sha512-aSOw0wSVxJla3Cb6aGBDogdlxoCfgFP7dFqzh/gJ9x9grCLw8VZ45L08jgNuHKrEVLMYCHZgxn/n//TzRhfklQ=="
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
diff --git a/package.json b/package.json
index 9f8f06f..bd0dbb9 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "nexusui": "^2.0.13"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",
diff --git a/src/components/Scarlett.vue b/src/components/Scarlett.vue
index 1256b36..3a9848a 100644
--- a/src/components/Scarlett.vue
+++ b/src/components/Scarlett.vue
@@ -9,6 +9,7 @@
       <div v-else>
         <h1>Scarlett 18i8 Mixer</h1>
         <p>Found Device: <tt>{{ info | findScarlett }}</tt></p>
+        <ScarlettMixer />
       </div>
     </section> 
   </div>
@@ -38,7 +39,7 @@
           }
         })
         if ( found ) {
-          return outInfo.info
+          return outInfo.name
         } else {
           outInfo = {"error": "No Scarlett device found"}
           return outInfo
@@ -55,6 +56,9 @@
         })
         .finally(() => this.loading = false)
     },
-    name: 'Scarlett'
+    name: 'Scarlett',
+    components: {
+      'ScarlettMixer': () => import('./ScarlettMixer.vue')
+    }
   }
 </script>
diff --git a/src/components/ScarlettMixer.vue b/src/components/ScarlettMixer.vue
new file mode 100644
index 0000000..25da85b
--- /dev/null
+++ b/src/components/ScarlettMixer.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="mixer">
+    <button v-on:click="pan1()">Load Mixer Controls</button>
+    <h1>I'm a ScarlettMixer!</h1>
+    <div id="channel">
+      <div id="pan"></div>
+      <div id="volume"></div>
+      <div id="outbus"></div>
+    </div>
+    <div id="debug">
+      <hr />
+      <h3>Debugging</h3>
+      <tt>{{ controls.data }}</tt>
+    </div>
+  </div>
+</template>
+
+<script>
+  import axios from 'axios'
+  var apiURL = 'http://localhost:1234/jsonapi?request=';
+  // https://nexus-js.github.io/ui/api/#intro
+  import Nexus from 'nexusui'
+  //we gotta seperate the actual rendering of NexusUI elements before the context is started
+  function loadAudio() {
+    Nexus.context.resume();
+
+    var pan = new Nexus.Pan('#pan');
+    var volume = new Nexus.Slider("#volume", {
+      'size': [20,200]
+    });
+    var outbus = new Nexus.Toggle('#outbus');
+
+    var channel = [pan, volume, outbus];
+    pan.on('change', function(v) {
+      console.log('Pan ' + v.value);
+    })
+
+    volume.on('change', function(v) {
+      console.log('Volume ' + v);
+    })
+
+    outbus.on('change', function(v) {
+      console.log('Channel ' + v);
+    })
+    return channel;
+  }
+
+  export default {
+    data () {
+      return {
+        controls: null,
+        loading: true,
+        errored: false,
+        pan1: loadAudio,
+        context: Nexus.context
+      }
+    },
+    mounted () {
+      // There can be more than one device named hw:USB
+      // I'll have to pass in cardid from a value from the Scarlett component
+      axios
+        .get(apiURL + 'ctrl-get-all' + '&cardid=hw:USB')
+        .then(response => (this.controls = response.data))
+        .catch(error => {
+          console.log(error)
+          this.errored = true
+        })
+        .finally(() => this.loading = false)
+    },
+    name: 'ScarlettMixer'
+  }
+</script>
diff --git a/src/main.js b/src/main.js
index 90c0769..f7775bc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,10 +1,16 @@
 import Vue from 'vue'
 import './plugins/axios'
-import App from './App.vue' // no data because we're not importing it?
-// commenting this out removes the default template, which is a bit weird.
+import App from './App.vue' 
+// eslint-disable-next-line no-unused-vars
+import Nexus from 'nexusui'
 
 Vue.config.productionTip = false;
-//Vue.config.runtimeCompiler = true;
+// Vue.config.runtimeCompiler = true;
+
+// https://nexus-js.github.io/ui/api/#intro
+// the following is a convention for defaults of Vue
+// eslint-disable-next-line no-unused-vars
+//var dial = new Nexus.Dial('#dial')
 
 new Vue({
   render: h => h(App),