diff --git a/e2e.html b/e2e.html
index 7171dd23..b42f9f1f 100644
--- a/e2e.html
+++ b/e2e.html
@@ -5,7 +5,14 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <link rel="stylesheet" href="style.css">
+    <style>
+        .main {
+            display: flex;
+            flex-direction: row;
+            place-items: space-between;
+        }
+
+    </style>
 </head>
 <body>
     <script src="./e2e.js" type="module"></script>
diff --git a/e2e.js b/e2e.js
index cc10349c..fd4b9a91 100644
--- a/e2e.js
+++ b/e2e.js
@@ -1,7 +1,7 @@
 import { mkcanvas, chart } from "https://unpkg.com/mk-60fps@1.1.0/chart.js";
 import { mkdiv } from "https://unpkg.com/mkdiv@3.1.0/mkdiv.js";
 import { SpinNode } from "./spin/spin.js";
-import mkpath from "./src/path.js";
+import { mkpath } from "./src/path.js";
 import SF2Service from "./sf2-service/index.js";
 const sf2url = "file.sf2";
 
@@ -12,26 +12,6 @@ let program, spinner, zref, presetId;
 
 renderMain();
 window.addEventListener("hashchange", renderMain);
-
-window.addEventListener("click", start, { once: true });
-
-async function start() {
-  const ctx = new AudioContext();
-  if (ctx.state == "suspended") {
-    await ctx.resume();
-  }
-  spinner = (await mkpath(ctx)).spinner;
-  spinner.shipProgram(program, presetId);
-  const zones = p.filterKV(key, vel).filter((z) => z.SampleId !== 0);
-  let i = 0;
-  while (zones.length) {
-    spinner.keyOn(0, zones.shift(), i + 50, i + 30);
-    spinner.KeyOff(9, i + 50, i + 70);
-    console.log(zones.length);
-    i++;
-  }
-}
-
 async function renderMain() {
   await loadWait;
   document.body.innerHTML = "";
@@ -64,17 +44,18 @@ async function renderMain() {
     mkdiv("div", { class: "col note-viewer" }),
   ];
   const main = mkdiv("div", { class: "main" }, [leftNav, rightPanel]);
-  document.location.hash.substring(1).split("|");
+  const presetId = document.location.hash.substring(1).split("|");
   const intpre = parseInt(presetId);
   const pid = intpre;
   const bid = 0;
   program = sf2file.loadProgram(pid, bid);
-  if (!zref) zref = program.filterKV(55, 55)[0].zref;
+  console.log(program.zMap);
+  if (!zref) zref = program.filterKV(55, 55)[0]?.zref;
 
   const kRangeList = program.zMap.map(
     (z) =>
       `<option value=${z.ref} ${z.ref + "" == zref ? "selected" : ""}>${
-        z.SampleId
+        z.Unused1 + "|" + z.Unused2
       } ${
         "key " +
         [z.KeyRange.lo, z.KeyRange.hi].join("-") +
@@ -100,27 +81,28 @@ async function renderMain() {
       style:
         "display:flex flex-direction:row; max-height:50vh; overflow-y:scroll; gap:0 20px 20px",
     }),
-  ]);
+  ]).attachTo(main);
   const mainRight = mkdiv("div", { class: "note" }, [
     mkdiv("div", { class: "note-title" }, [sf2file.programNames[presetId]]),
     articleHeader,
-    articleMain,
+    ,
   ]).attachTo(rightPanel);
   document.body.append(main);
+  const canvas = mkcanvas({ container: articleHeader });
 
   renderZ(zref);
   async function renderZ(zref) {
     let zoneSelect = zref
       ? program.zMap.find((z) => z.ref + "" == zref)
       : program.zMap[0];
+    articleMain.innerHTML = 0;
 
     if (zoneSelect) {
       const zattrs = Object.entries(zoneSelect).filter(
-        ([attr, val], idx) => val && idx < 60
+        ([attr, val], idx) => idx < 60
       );
 
       const pcm = await zoneSelect.shdr.data();
-      const canvas = mkcanvas({ container: articleHeader });
       chart(canvas, pcm);
 
       const zoneinfo = mkdiv("div", [
@@ -137,25 +119,35 @@ async function renderMain() {
           "<br>",
           "loop: ",
           zoneSelect.shdr.loops.join("-"),
+          "<br>",
 
           JSON.stringify(zoneSelect.KeyRange),
+          "<br>",
+          JSON.stringify(zoneSelect.VolRange),
         ]),
-        ..."Addr,KeyRange,Attenuation,VolEnv,Filter,LFO"
-          .split(",")
-          .map((keyword) =>
-            mkdiv(
-              "div",
-              { style: "padding:10px;color:gray;" },
-              zattrs
-                .filter(([k]) => k.includes(keyword))
-                .map(([k, v]) => k + ": " + v)
-                .join("<br>")
-            )
-          ),
+        ..."Sustain,Attenuation,VolEnv,Filter,LFO".split(",").map((keyword) =>
+          mkdiv(
+            "div",
+            { style: "padding:10px;color:gray;" },
+            zattrs
+              .filter(([k]) => k.includes(keyword))
+              .map(([k, v]) => k + ": " + v)
+              .join("<br>")
+          )
+        ),
       ]);
-      zoneinfo.attachTo(mainRight);
+      zoneinfo.attachTo(articleMain);
     }
   }
-
-  console.log(program);
+}
+const button = mkdiv("button", "start");
+button.attachTo(document.body);
+button.addEventListener("click", start, { once: true });
+async function start() {
+  const ctx = new AudioContext();
+  if (ctx.state == "suspended") {
+    await ctx.resume();
+  }
+  spinner = (await mkpath(ctx)).spinner;
+  spinner.shipProgram(program, presetId);
 }
diff --git a/index.html b/index.html
index edbf06da..f320a6b9 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,8 @@
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
   <link rel="stylesheet" href="src/keyboard/keyboard.css">
   <script type="text/babel" src="./src/keyboard/like.jsx">  </script>
+  <link rel="stylesheet" href="style.css">
+
 
 
 </head>
@@ -44,11 +46,18 @@ <h3>Performant WASM MIDI Playe</h3>
     </div>
   </header>
   <main class="main">
-    <div id="channelContainer"></div>
-    <div id="stdout"></div>
-    <div id="bigcan"><canvas id="c1"></canvas></div>
+    <aside></aside>
+    <div>
+      <div id="col3"></div>
+      <div id="col2"></div>
+    </div>
+    <div>
+      <div id="col4"></div>
+      <div id="col5"></div>
+    </div>
   </main>
-  <aside></aside>
+  <div id="stdout"></div>
+
   <footer>
   </footer>
 
diff --git a/sf2-service b/sf2-service
index 261dcdef..cd845157 160000
--- a/sf2-service
+++ b/sf2-service
@@ -1 +1 @@
-Subproject commit 261dcdef81fc359f0b717d6eea28d5eb9e66cc70
+Subproject commit cd84515752292fe58b9186b18c611097b9e38d27
diff --git a/src/createChannel.js b/src/createChannel.js
index dfe53b8a..4ccd3001 100644
--- a/src/createChannel.js
+++ b/src/createChannel.js
@@ -1,3 +1,5 @@
+import { midi_ch_cmds } from "./constants.js";
+
 export function createChannel(uiController, channelId, sf2, spinner) {
   let _sf2 = sf2;
   let program;
@@ -18,10 +20,18 @@ export function createChannel(uiController, channelId, sf2, spinner) {
       uiController.CC = { key, value: vel };
     },
     keyOn(key, vel) {
+      console.log("ch chan ", channelId);
       const zones = program.filterKV(key, vel);
-      zones.slice(2).map((zone, i) => {
-        key_on_map[key] = channelId * +i;
-        spinner.keyOn(channelId * 2 + i, zone, key, vel);
+      zones.slice(0, 2).map((zone, i) => {
+        console.log("zone", i);
+        key_on_map[key] = channelId * 2 + i;
+        spinner.port.postMessage([
+          midi_ch_cmds.note_on,
+          channelId * 2 + i,
+          zone.ref,
+          zone.calcPitchRatio(key, spinner.context.sampleRate),
+          vel,
+        ]);
       });
 
       // zones[0].shdr.data().then((pcm) => {
@@ -49,8 +59,10 @@ export function createChannel(uiController, channelId, sf2, spinner) {
         uiController.midi = key;
         //  uiController.zone = zones[0];
       });
+      return zones[0];
     },
     keyOff(key, vel) {
+      if (!key_on_map[key]) return;
       while (key_on_map[key].length) {
         spinner.keyOff(key_on_map[key].shift(), key, vel);
       }
diff --git a/src/index.js b/src/index.js
index 2a952773..61443187 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,12 +1,11 @@
 import { mkdiv, logdiv, mkdiv2 } from "https://unpkg.com/mkdiv@3.1.2/mkdiv.js";
-
-import { SpinNode } from "../spin/spin.js";
 import { mkui } from "./ui.js";
 import SF2Service from "https://unpkg.com/sf2-service@1.3.6/index.js";
-import { fetchmidilist, fetchSF2List } from "./midilist.js";
+import { fetchmidilist } from "./midilist.js";
 import { mkeventsPipe } from "./mkeventsPipe.js";
 import { createChannel } from "./createChannel.js";
 import { midi_ch_cmds, range } from "./constants.js";
+import { chart, mkcanvas } from "https://unpkg.com/mk-60fps@1.1.0/chart.js";
 const $ = (sel) => document.querySelector(sel);
 
 const sf2select = $("#sf2select"),
@@ -16,7 +15,11 @@ const sf2select = $("#sf2select"),
   timeNow = $("#timeNow"),
   tempo = $("#tempo"),
   duration = $("#duration"),
-  msel = $("#msel");
+  msel = $("#msel"),
+  panel2 = document.querySelector("#col2"),
+  col4 = $("#col4"),
+  col5 = $("#col5"),
+  canvas1 = mkcanvas({ container: $("#col3") });
 
 const drumList = document.querySelector("#drums");
 const programList = document.querySelector("#programs");
@@ -41,7 +44,6 @@ globalThis.appState = new Proxy(appState, {
     return true;
   },
 });
-8;
 function updateAppState(newArr) {
   try {
     globalThis.appState = Object.assign({}, globalThis.appState, newArr);
@@ -58,6 +60,7 @@ async function main(sf2file, midifile) {
     midiworker = new Worker("src/midiworker.js", {
       type: "module",
     });
+  stdout("start");
 
   updateAppState({
     midifile,
@@ -72,12 +75,11 @@ async function main(sf2file, midifile) {
       const { totalTicks, presets } = e.data.midifile;
       const queues = [[], [], []];
       const [l1, l2, l3] = queues;
+
       for (const preset of presets) {
         const { pid, channel } = preset;
         const bkid = channel == 9 ? 128 : 0;
         await channels[channel].setProgram(pid, bkid);
-
-        //queues[pid % 3].push(() => channels[channel].setProgram(pid, bkid));
       }
       duration.innerHTML = totalTicks / 4;
       timeslide.setAttribute("max", totalTicks);
@@ -116,14 +118,11 @@ async function main(sf2file, midifile) {
     style: "width:300px",
     value: midifile,
     onchange: (e) => {
-      document.location.href = `?midifile=${e.target.value}&sf2file=${sf2file}`;
+      midiworker.postMessage({ cmd: "load", url: e.target.value });
+      e.preventDefault();
     },
     children: midiList.map((f) =>
-      mkdiv(
-        "option",
-        { value: f.get("Url"), seleced: f.get("Url").includes(midifile) },
-        f.get("Name").substring(0, 80)
-      )
+      mkdiv("option", { value: f.get("Url") }, f.get("Name").substring(0, 80))
     ),
   });
   midiSelect.attachTo(msel);
@@ -150,7 +149,6 @@ async function main(sf2file, midifile) {
     const ch = a & 0x0f;
     const key = b & 0x7f;
     const velocity = c & 0x7f;
-    console.log(cmd, ch, key);
     switch (cmd) {
       case midi_ch_cmds.continuous_change: // set CC
         channels[ch].setCC({ key, vel: velocity });
@@ -169,7 +167,8 @@ async function main(sf2file, midifile) {
           channels[ch].keyOff(key, velocity);
         } else {
           stdout([ch, cmd, key, velocity].join("/"));
-          channels[ch].keyOn(key, velocity);
+          const zone = channels[ch].keyOn(key, velocity);
+          //requestAnimationFrame(() => renderZ(panel2, canvas1, zone));
         }
         break;
       default:
@@ -201,20 +200,25 @@ async function main(sf2file, midifile) {
         mkdiv2({ tag: "option", value: n, children: n }).attachTo(drumList);
       }
     });
-    channels.forEach((c) => c.setSF2(sf2));
+    channels.forEach((c, i) => {
+      c.setSF2(sf2);
+      c.setProgram(i, i == 9 ? 128 : 0);
+    });
     for (const [section, text] of sf2.meta) {
       stderr(section + ": " + text);
     }
   }
 
-  playBtn.setAttribute("disabled", true);
   await loadSF2File(sf2file);
-  midiworker.postMessage({ cmd: "load", url: midifile });
   window.mkTracks($("main"), {
     programNames: range(0, 12).map((i) => "ch " + i),
     keyRange: range(46, 80),
     eventPipe,
   });
+  spinner.port.onmessage = ({ data }) => {
+    if (data.spState) col5.innerHTML = JSON.stringify(data.spState);
+    if (data.egStages) col4.innerHTML = Object.values(data.egStages).join(" ");
+  };
 }
 
 function onMidiMeta(stderr, e) {
@@ -251,3 +255,48 @@ function onMidiMeta(stderr, e) {
   };
   stderr(metaDisplay(e.data.meta) + ": " + e.data.payload);
 }
+async function renderZ(container, canvas, zoneSelect) {
+  container.innerHTML = "";
+
+  if (zoneSelect) {
+    const zattrs = Object.entries(zoneSelect).filter(
+      ([attr, val], idx) => idx < 60
+    );
+
+    const pcm = await zoneSelect.shdr.data();
+    chart(canvas, pcm);
+
+    const zoneinfo = mkdiv("div", [
+      mkdiv("div", [
+        "smpl: ",
+        zoneSelect.shdr.SampleId,
+        " ",
+        zoneSelect.shdr.name,
+        "<br>nsample: ",
+        zoneSelect.shdr.nsamples,
+        "<br>srate: " + zoneSelect.shdr.originalPitch,
+        "<br>Range: ",
+        zoneSelect.shdr.range.join("-"),
+        "<br>",
+        "loop: ",
+        zoneSelect.shdr.loops.join("-"),
+        "<br>",
+
+        JSON.stringify(zoneSelect.KeyRange),
+        "<br>",
+        JSON.stringify(zoneSelect.VolRange),
+      ]),
+      ..."Sustain,Attenuation,VolEnv,Filter,LFO".split(",").map((keyword) =>
+        mkdiv(
+          "div",
+          { style: "padding:10px;color:gray;" },
+          zattrs
+            .filter(([k]) => k.includes(keyword))
+            .map(([k, v]) => k + ": " + v)
+            .join("<br>")
+        )
+      ),
+    ]);
+    zoneinfo.attachTo(container);
+  }
+}
diff --git a/src/keyboard/like.jsx b/src/keyboard/like.jsx
index 8b08ec9d..731b3158 100644
--- a/src/keyboard/like.jsx
+++ b/src/keyboard/like.jsx
@@ -3,7 +3,6 @@ const keys = ["a", "w", "s", "e", "d", "f", "t", "g", "y", "h", "u", "j"];
 function Keyboard({ callback, channel, keyRange }) {
   React.useEffect(() => {
     window.onkeydown = (e) => {
-      console.log(e.key);
       const index = keys.indexOf(e.key);
       if (index < 0) return;
       callback([0x90 | channel, index + 45, 120]);
@@ -29,6 +28,7 @@ function Keyboard({ callback, channel, keyRange }) {
                 : "keywhite"
             }
             onMouseDown={(e) => {
+              console.log("adsfds");
               callback([0x90 | channel, midi, 120]);
             }}
             onMouseUp={(e) => {
diff --git a/src/ui.js b/src/ui.js
index be407993..87093148 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -216,7 +216,7 @@ export function mkui(eventPipe, container) {
     "div",
     {
       border: 1,
-      style: `height:500px;overflow-y:scroll`,
+      style: `width:500px;overflow-y:scroll`,
     },
     [`<h4>${activeChannel}</h4>`]
   );
@@ -259,9 +259,7 @@ export function mkui(eventPipe, container) {
 
   const cpanel = mkdiv2({
     tag: "div",
-    border: 1,
     children: [tb, keyboard],
   });
-  container.append(cpanel);
   return controllers;
 }
diff --git a/style.css b/style.css
index 362d20aa..c0c5acba 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,11 @@
+.main {
+  display: flex;
+  flex-direction: row;
+  place-items: space-between;
+}
+#stdout {
+  width: 80em;
+}
 /*
 html5doctor.com Reset Stylesheet
 v1.6.1
