diff --git a/components.js b/components.js
index ec6b4f4..d9d1135 100644
--- a/components.js
+++ b/components.js
@@ -4,102 +4,114 @@ import { css, cx } from 'https://cdn.skypack.dev/@emotion/css';
 import htm from 'https://unpkg.com/htm?module';
 const html = htm.bind(h);
 
-let FormPivot = props =>
+let Styles = {
+    Form:css`
+        position:realtive;
+        box-sizing: border-box;
+        padding: 10px;
+        color:black;
+        font-family:sans-serif;
+
+        .Title
+        {
+            font-size:24px;
+            font-weight:100;
+        }
+
+        .Section
+        {
+            padding:10px 0 10px 0;
+
+            .Heading
+            {
+                display:inline-block;
+                color:#666;
+                font-family:sans-serif;
+                font-size:12px;
+                font-weight:900;
+                text-transform:uppercase;
+            }
+            .Group
+            {
+                display:inline-block;
+                padding:5px;
+                border-radius:5px;
+                margin:3px;
+                background:rgba(0, 0, 0, 0.3)
+            }
+        }
+    `
+};
+
+let PivotForm = props =>
 {
+
     let pivotColumns = N.Step(Pivot.Schema, "label")||[];
     let pivotColumnsUsed = N.Step(Pivot.Proto, "used-pivot")||[];
 
     let sumColumns = N.Step(Pivot.Schema, "sum")||[];
-    let sumColumnsUsed = N.Step(Pivot.Proto, "used-sum")||[];
+    //let sumColumnsUsed = N.Step(Pivot.Proto, "used-sum")||[];
 
     let indiciesPivot = pivotColumnsUsed.map(node=>node.Meta.Index);
-    let indiciesSum = sumColumnsUsed.map(node=>node.Meta.Index);
+    let indiciesSum = sumColumns.map(node=>node.Meta.Index);
+    //let indiciesSum = sumColumnsUsed.map(node=>node.Meta.Index);
     
-    var action;
-    if(indiciesPivot.length)
-    {
-        action = h("p", null, [
-            h("span", null, "Build"),
-            h("button", {onClick:e=>
+    let displayPivotsAll = html`
+    <div class="Section">
+        <div class="Heading">Available Columns</div>
+        <div class="Group">
+        ${pivotColumns.map( columnPivot =>
+        {
+            let attributes = {};
+            if(N.Step(columnPivot, "used-pivot", false))
             {
+                attributes.disabled = true;
+            }
+            else
+            {
+                attributes.onClick = e=>
+                {
+                    N.Connect(Pivot.Proto, columnPivot, "used-pivot");
+                    Render();
+                }
+            }
+            return html`<button ...${attributes}>${columnPivot.Meta.Label}</button>`;
+        })}
+        </div>
+    </div>
+    `;
+
+    let displayPivotsPending = null;
+    if(pivotColumnsUsed.length)
+    {
+        displayPivotsPending  = html`
+        <div class="Section">
+            <div class="Heading">Pending Pivot</div>
+            <div class="Group">
+                ${pivotColumnsUsed.map(columnPivot=>html`
+                <button onClick=${e=>{N.Disconnect(Pivot.Proto, columnPivot, "used-pivot");Render();}}>
+                    ${columnPivot.Meta.Label}
+                </button>
+                `)}
+            </div>
+
+            <button onClick=${e=>{
                 N.Disconnect(Pivot.Proto, null, "used-pivot");
                 N.Disconnect(Pivot.Proto, null, "used-sum");
                 Pivot.Create(indiciesPivot, indiciesSum);
                 Render();
-            }
-            }, "Create Pivot")
-        ]);
-    }
-    else
-    {
-        action = h("p", null, "(select columns)")
+            }}>Create</button>
+        </div>
+        `;
     }
 
-    return h("div", {}, [
-        h("p", null, [
-
-            h("span", null, "Pivot Columns"),
-            ...pivotColumns.map( columnLabel =>
-            {
-                let attributes = {};
-                if(N.Step(columnLabel, "used-pivot", false))
-                {
-                    attributes.disabled = true;
-                }
-                else
-                {
-                    attributes.onClick = e=>
-                    {
-                        N.Connect(Pivot.Proto, columnLabel, "used-pivot");
-                        Render();
-                    }
-                }
-                return h("button", attributes, columnLabel.Meta.Label);
-            }),
-
-            h("span", null, "Summation Columns"),
-            ...sumColumns.map( columnSum =>
-            {
-                let attributes = {};
-                if(N.Step(columnSum, "used-sum", false))
-                {
-                    attributes.disabled = true;
-                }
-                else
-                {
-                    attributes.onClick = e=>
-                    {
-                        N.Connect(Pivot.Proto, columnSum, "used-sum");
-                        Render();
-                    }
-                }
-                return h("button", attributes, columnSum.Meta.Label);
-            })
-        ]),
-        h("p", null, [
-            h("span", null, "Current Pivot"),
-            ...pivotColumnsUsed.map( columnLabel =>
-            {
-                return h("button", {onClick:e=>
-                {
-                    N.Disconnect(Pivot.Proto, columnLabel, "used-pivot");
-                    Render();
-                }
-                }, columnLabel.Meta.Label);
-            }),
-            h("span", null, "Current Summation"),
-            ...sumColumnsUsed.map( columnSum =>
-            {
-                return h("button", {onClick:e=>
-                {
-                    N.Disconnect(Pivot.Proto, columnSum, "used-sum");
-                    Render();
-                }
-                }, columnSum.Meta.Label);
-            }),
-        ]),
-        action
-    ]);
+    return html`
+    <div class=${Styles.Form}>
+        <div class="Title">Create New Pivot</div>
+        ${displayPivotsAll}
+        ${displayPivotsPending}
+    </div>
+    `;
 }
 
 let Section = props =>
@@ -206,4 +218,4 @@ let PivotRoot = ({pivot, children}) =>
     `;
 };
 
-export {Section, PivotRoot};
\ No newline at end of file
+export {Section, PivotRoot, PivotForm};
\ No newline at end of file
diff --git a/index.html b/index.html
index 2c24d3f..4879633 100755
--- a/index.html
+++ b/index.html
@@ -283,10 +283,10 @@ var Pivot =
     {
         N.ID.Walk++;
         
-        let names = N.Step(Pivot.Schema, "label");
+        let columns = N.Step(Pivot.Schema, "all");
         let label = inPivotIndicies.map( inPivotIndex =>
         {
-            return names[inPivotIndex].Meta.Label;
+            return columns[inPivotIndex].Meta.Label;
         });
 
         let pivotRoot = N.Create({Label:label.join("|"), Leaves:Pivot.Leaves});
@@ -376,11 +376,11 @@ import { h, render, createContext, Fragment } from 'https://cdn.skypack.dev/prea
 import { useReducer } from 'https://cdn.skypack.dev/preact/hooks';
 import { css, cx } from 'https://cdn.skypack.dev/@emotion/css';
 
-import {PivotRoot as PR} from './components.js';
+import {PivotRoot, PivotForm} from './components.js';
 
 Pivot.Init(
-    ["number", "type-a", "type-b", "count", "extra"],
-    ["label", "label", "label", "sum", "sum"],
+    ["id", "type-a", "type-b", "count", "extra"],
+    ["", "label", "label", "sum", "sum"],
     [
     ["#1", "a", "long",  1, 4],
     ["#2", "b", "long",  2, 4],
@@ -392,103 +392,6 @@ Pivot.Init(
     ]
 );
 
-let ElForm = props =>
-{
-    let pivotColumns = N.Step(Pivot.Schema, "label")||[];
-    let pivotColumnsUsed = N.Step(Pivot.Proto, "used-pivot")||[];
-
-    let sumColumns = N.Step(Pivot.Schema, "sum")||[];
-    let sumColumnsUsed = N.Step(Pivot.Proto, "used-sum")||[];
-
-    let indiciesPivot = pivotColumnsUsed.map(node=>node.Meta.Index);
-    let indiciesSum = sumColumnsUsed.map(node=>node.Meta.Index);
-    
-    var action;
-    if(indiciesPivot.length)
-    {
-        action = h("p", null, [
-            h("span", null, "Build"),
-            h("button", {onClick:e=>
-            {
-                N.Disconnect(Pivot.Proto, null, "used-pivot");
-                N.Disconnect(Pivot.Proto, null, "used-sum");
-                Pivot.Create(indiciesPivot, indiciesSum);
-                Render();
-            }
-            }, "Create Pivot")
-        ]);
-    }
-    else
-    {
-        action = h("p", null, "(select columns)")
-    }
-
-    return h("div", {}, [
-        h("p", null, [
-
-            h("span", null, "Pivot Columns"),
-            ...pivotColumns.map( columnLabel =>
-            {
-                let attributes = {};
-                if(N.Step(columnLabel, "used-pivot", false))
-                {
-                    attributes.disabled = true;
-                }
-                else
-                {
-                    attributes.onClick = e=>
-                    {
-                        N.Connect(Pivot.Proto, columnLabel, "used-pivot");
-                        Render();
-                    }
-                }
-                return h("button", attributes, columnLabel.Meta.Label);
-            }),
-
-            h("span", null, "Summation Columns"),
-            ...sumColumns.map( columnSum =>
-            {
-                let attributes = {};
-                if(N.Step(columnSum, "used-sum", false))
-                {
-                    attributes.disabled = true;
-                }
-                else
-                {
-                    attributes.onClick = e=>
-                    {
-                        N.Connect(Pivot.Proto, columnSum, "used-sum");
-                        Render();
-                    }
-                }
-                return h("button", attributes, columnSum.Meta.Label);
-            })
-        ]),
-        h("p", null, [
-            h("span", null, "Current Pivot"),
-            ...pivotColumnsUsed.map( columnLabel =>
-            {
-                return h("button", {onClick:e=>
-                {
-                    N.Disconnect(Pivot.Proto, columnLabel, "used-pivot");
-                    Render();
-                }
-                }, columnLabel.Meta.Label);
-            }),
-            h("span", null, "Current Summation"),
-            ...sumColumnsUsed.map( columnSum =>
-            {
-                return h("button", {onClick:e=>
-                {
-                    N.Disconnect(Pivot.Proto, columnSum, "used-sum");
-                    Render();
-                }
-                }, columnSum.Meta.Label);
-            }),
-        ]),
-        action
-    ])
-};
 let ElNode = ({node, depth}) =>
 {
     let nodeBase = css`
@@ -570,32 +473,13 @@ let ElNode = ({node, depth}) =>
         h("div", {className:"Nodes"}, N.Step(node, "Hierarchy").map(child=>h(ElNode, {node:child, depth:depth+1})) )
     ]);
 };
-let ElPivot = ({pivot}) =>
-{   
-    return h(PR, {key:pivot.Meta.Label, pivot}, h(ElNode, {node:pivot, depth:0}));
-};
-let ElModifiers = ({node}) =>
-{
-    let modifiers = N.Step(node, "Modifier") || [];
 
-    return h("div", null, [
-        h("strong", null, "modifiers"),
-        ...modifiers.map( m => h("span", {onClick:e=>
-        {
-            Pivot.Unmodify(m);
-            Render();
-        }
-        }, "modifier"))
-    ]);
-};
 let ElRoot = props =>
 {
     let pivots = N.Step(Pivot.Root, "Pivot")||[];
     return h("div", null, [
-        h("h3", null, "tree view"),
-        h(ElForm),
-        h(ElModifiers, {node:Pivot.Root}),
-        pivots.map(pivot=>h(ElPivot, {pivot}))
+        h(PivotForm),
+        pivots.map(pivot=>h(PivotRoot, {key:pivot.Meta.Label, pivot}, h(ElNode, {node:pivot, depth:0})))
     ])
 };
 Render = () => render(h(ElRoot), document.querySelector("#app"));