diff --git a/components.js b/components.js
deleted file mode 100644
index b8ce0ba..0000000
--- a/components.js
+++ /dev/null
@@ -1,312 +0,0 @@
-import { h, render, createContext, Fragment } from 'https://cdn.skypack.dev/preact';
-import { useReducer, useState } from 'https://cdn.skypack.dev/preact/hooks';
-import { css, cx } from 'https://cdn.skypack.dev/@emotion/css';
-import htm from 'https://unpkg.com/htm?module';
-const html = htm.bind(h);
-
-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 indiciesPivot = pivotColumnsUsed.map(node=>node.Meta.Index);
-    let indiciesSum = sumColumns.map(node=>node.Meta.Index);
-    //let indiciesSum = sumColumnsUsed.map(node=>node.Meta.Index);
-    
-    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</button>
-        </div>
-        `;
-    }
-
-    return html`
-    <div class=${Styles.Form}>
-        <div class="Title">Create New Pivot</div>
-        ${displayPivotsAll}
-        ${displayPivotsPending}
-    </div>
-    `;
-}
-
-let Section = props =>
-{
-    let styles = css`
-        .Heading
-        {
-            padding:6px 0 6px 0;
-            color:#666;
-            font-weight:900;
-            font-size:12px;
-            text-transform:uppercase;
-            cursor:pointer;
-
-            span
-            {
-                display:inline-block;
-                width:20px;
-                height:20px;
-                margin-right:10px;
-                border-radius:20px;
-                background:black;
-                color:white;
-                text-align:center;
-            }
-        }
-        .Heading:hover
-        {
-            color:black;
-        }
-        .Body
-        {
-            position:relative;
-            padding:10px 0 20px 30px;
-            &::before
-            {
-                content: " ";
-                display:block;
-                position:absolute;
-                top:-8px;
-                left:8px;
-                width:3px;
-                height:100%;
-                background:black;
-            }
-        }
-    `;
-
-    let [openGet, openSet] = useState(false);
-    return html`
-        <div class=${styles}>
-            <div class="Heading" onClick=${e=>openSet(!openGet)}>
-                <span>${openGet ? `−` : `+`}</span>
-                ${props.label}
-            </div>
-            ${ openGet ? html`<div class="Body">${props.children}</div>` : null }
-        </div>
-    `;
-}
-
-let Modifier = props =>
-{
-    let refNode = N.Step(props.modifier, "ModifyAt")[0];
-
-    let handleDelete = () =>
-    {
-        Pivot.Unmodify(props.modifier);
-        Render();
-    };
-
-    let displayFields = [];
-    N.Walk(node=>{
-        displayFields.push(html`<input type='number'/>`)
-    }, Pivot.Schema, "sum");
-
-
-    return html`
-    <div>
-        <div>${refNode.Meta.Label}</div>
-        <button onClick=${handleDelete}>Delete</button>
-    </div>
-    `;
-}
-
-let PivotBranch = props =>
-{
-    let row = props.node.Meta.Row;
-    let displayCells = row.map(column=>h("td", null, column));
-    let displayCellsModify = row.map(column=>false);
-    props.node.Meta.IndexSum.forEach(i=>
-    {
-        displayCellsModify[i] = html`<td><input type="number" value=${row[i]}/></td>`;
-    });
-    displayCellsModify.forEach((cell, i)=>
-    {
-        if(!cell)
-        {
-            displayCellsModify[i] = html`<td>${row[i]}</td>`
-        }
-    });
-
-    return html`
-    <tbody>
-        <tr>
-            <td colspan=${displayCells.length+1}><hr/></td>
-        </tr>
-        <tr>
-            <td>
-                <strong>${props.node.Meta.Label}</strong>
-            </td>
-            ${displayCells}
-        </tr>
-        <tr>
-            <td colspan=${displayCells.length+1}>Modifications</td>
-        </tr>
-        <tr>
-            <td>At</td>
-            ${displayCellsModify}
-        </tr>
-        <tr>
-            <td>Below</td>
-            ${displayCells}
-        </tr>
-        <tr>
-            <td>Above</td>
-            ${displayCells}
-        </tr>
-        <tr>
-            <td>Outside</td>
-            ${displayCells}
-        </tr>
-        <tr>
-            <td>Computed</td>
-            ${displayCells}
-        </tr>
-        <tr>
-            <td colspan=${displayCells.length+1}>Goals</td>
-        </tr>
-        <tr>
-            <td>Max</td>
-            ${displayCells}
-        </tr>
-        <tr>
-            <td>Min</td>
-            ${displayCells}
-        </tr>
-    </tbody>
-    `;
-};
-
-
-let PivotRoot = ({pivot}) =>
-{
-
-    let stylesRoot = css`
-        display:block;
-        box-sizing:border-box;
-        padding:15px;
-        font-family:sans-serif;
-    `;
-    let stylesHeading = css`
-        margin: 0 0 15px 0;
-        font-weight:0;
-        font-size:24px;
-    `;
-
-    let modifiers = N.Step(pivot, "ModifyUp", false) || [];
-    let handleDelete = ()=>
-    {
-        Pivot.Delete(pivot);
-        Render();
-    };
-
-    let rows = [];
-    N.ID.Walk++;
-    N.Walk(n=>rows.push(h(PivotBranch, {node:n}, null)), pivot, "Hierarchy");
-
-    return html`
-    <div class=${stylesRoot}>
-        <div key="heading" class=${stylesHeading}>${pivot.Meta.Label}</div>
-        <${Section} key="settings" label=${`Settings`}>
-            <button onClick=${handleDelete}>Destroy Pivot</button>
-        <//>
-        <${Section} key="modifiers" label=${`Modifiers (${modifiers.length})`}>
-            ${ !modifiers.length ? html`<em>No modifiers</em>` : modifiers.map( m => html`<${Modifier} modifier=${m}/>`)}
-        <//>
-        <${Section} key="tree" label=${"Tree"}>
-            <table>
-            ${rows}
-            </table>
-        <//>
-    </div>
-    `;
-};
-
-export {Section, PivotRoot, PivotForm};
\ No newline at end of file
diff --git a/index.html b/index.html
index 6a6bd84..b97369b 100755
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <div id="app"></div>
 
+<!-- N -->
 <script>
 
 var N =
@@ -168,35 +169,7 @@ var N =
 };
 </script>
 
-<!-- calc testing -->
-<script>
-let ModificationPull = (inDAG) =>
-{
-    let collect = inArray => n => { n.Meta.Tweak.forEach((t, i)=>{ inArray[n.Meta.Indicies[i]] += t; }); };
-    let totalScale = [0, 0, 0, 0, 0, 0, 0, 0];
-    let totalAdd = [0, 0, 0, 0, 0, 0, 0, 0];
-
-    N.ID.Walk++;
-    N.Walk(collect(totalScale), inDAG, "ModifyAt", false);
-    N.Walk(collect(totalScale), inDAG, "ModifyDown", false);
-    N.Walk(collect(totalAdd), inDAG, "ModifyUp", false);
-    N.Walk(collect(totalAdd), inDAG, "ModifyOut", false);
-
-    return [totalScale, totalAdd];
-};
-
-let dag1 = N.Create({Label:"dag-1"});
-let m0 = N.Create({Label:"m-0", Tweak:[-1, 2, 0.7], Indicies:[0, 1, 2]});
-let m1 = N.Create({Label:"m-1", Tweak:[0.1, 0.1, 0.1], Indicies:[1, 2, 3]});
-
-N.Connect(m0, dag1, "ModifyAt");
-N.Connect(m1, dag1, "ModifyDown");
-
-let results = ModificationPull(dag1);
-console.log(results);
-
-</script>
-
+<!-- Pivot -->
 <script>
 var Pivot = 
 {
@@ -381,18 +354,9 @@ var Pivot =
 };
 </script>
 
-<script>
-var Render = () => {};
-</script>
-
+<!-- rendering -->
 <script type="module">
 
-import { h, render, createContext, Fragment } from 'https://cdn.skypack.dev/preact';
-import { useReducer } from 'https://cdn.skypack.dev/preact/hooks';
-import { css, cx } from 'https://cdn.skypack.dev/@emotion/css';
-
-import {PivotRoot, PivotForm} from './components.js';
-
 Pivot.Init(
     ["id", "type-a", "type-b", "count", "extra"],
     ["label", "label", "label", "sum", "sum"],
@@ -407,6 +371,312 @@ Pivot.Init(
     ]
 );
 
+import { h, render, createContext, Fragment } from 'https://cdn.skypack.dev/preact';
+import { useReducer, useState } from 'https://cdn.skypack.dev/preact/hooks';
+import { css, cx } from 'https://cdn.skypack.dev/@emotion/css';
+import htm from 'https://unpkg.com/htm?module';
+const html = htm.bind(h);
+
+let PivotForm = props =>
+{
+    let styles = 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 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 = sumColumns.map(node=>node.Meta.Index);
+    //let indiciesSum = sumColumnsUsed.map(node=>node.Meta.Index);
+    
+    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</button>
+        </div>
+        `;
+    }
+
+    return html`
+    <div class=${styles}>
+        <div class="Title">Create New Pivot</div>
+        ${displayPivotsAll}
+        ${displayPivotsPending}
+    </div>
+    `;
+}
+
+let Section = props =>
+{
+    let styles = css`
+        .Heading
+        {
+            padding:6px 0 6px 0;
+            color:#666;
+            font-weight:900;
+            font-size:12px;
+            text-transform:uppercase;
+            cursor:pointer;
+
+            span
+            {
+                display:inline-block;
+                width:20px;
+                height:20px;
+                margin-right:10px;
+                border-radius:20px;
+                background:black;
+                color:white;
+                text-align:center;
+            }
+        }
+        .Heading:hover
+        {
+            color:black;
+        }
+        .Body
+        {
+            position:relative;
+            padding:10px 0 20px 30px;
+            &::before
+            {
+                content: " ";
+                display:block;
+                position:absolute;
+                top:-8px;
+                left:8px;
+                width:3px;
+                height:100%;
+                background:black;
+            }
+        }
+    `;
+
+    let [openGet, openSet] = useState(false);
+    return html`
+        <div class=${styles}>
+            <div class="Heading" onClick=${e=>openSet(!openGet)}>
+                <span>${openGet ? `−` : `+`}</span>
+                ${props.label}
+            </div>
+            ${ openGet ? html`<div class="Body">${props.children}</div>` : null }
+        </div>
+    `;
+}
+
+let Modifier = props =>
+{
+    let refNode = N.Step(props.modifier, "ModifyAt")[0];
+
+    let handleDelete = () =>
+    {
+        Pivot.Unmodify(props.modifier);
+        Render();
+    };
+
+    let displayFields = [];
+    N.Walk(node=>{
+        displayFields.push(html`<input type='number'/>`)
+    }, Pivot.Schema, "sum");
+
+
+    return html`
+    <div>
+        <div>${refNode.Meta.Label}</div>
+        <button onClick=${handleDelete}>Delete</button>
+    </div>
+    `;
+}
+
+let PivotBranch = props =>
+{
+    let row = props.node.Meta.Row;
+    let displayCells = row.map(column=>h("td", null, column));
+    let displayCellsModify = row.map(column=>false);
+    props.node.Meta.IndexSum.forEach(i=>
+    {
+        displayCellsModify[i] = html`<td><input type="number" value=${row[i]}/></td>`;
+    });
+    displayCellsModify.forEach((cell, i)=>
+    {
+        if(!cell)
+        {
+            displayCellsModify[i] = html`<td>${row[i]}</td>`
+        }
+    });
+
+    return html`
+    <tbody>
+        <tr>
+            <td colspan=${displayCells.length+1}><hr/></td>
+        </tr>
+        <tr>
+            <td>
+                <strong>${props.node.Meta.Label}</strong>
+            </td>
+            ${displayCells}
+        </tr>
+        <tr>
+            <td colspan=${displayCells.length+1}>Modifications</td>
+        </tr>
+        <tr>
+            <td>At</td>
+            ${displayCellsModify}
+        </tr>
+        <tr>
+            <td>Below</td>
+            ${displayCells}
+        </tr>
+        <tr>
+            <td>Above</td>
+            ${displayCells}
+        </tr>
+        <tr>
+            <td>Outside</td>
+            ${displayCells}
+        </tr>
+        <tr>
+            <td>Computed</td>
+            ${displayCells}
+        </tr>
+        <tr>
+            <td colspan=${displayCells.length+1}>Goals</td>
+        </tr>
+        <tr>
+            <td>Max</td>
+            ${displayCells}
+        </tr>
+        <tr>
+            <td>Min</td>
+            ${displayCells}
+        </tr>
+    </tbody>
+    `;
+};
+
+let PivotRoot = ({pivot}) =>
+{
+
+    let stylesRoot = css`
+        display:block;
+        box-sizing:border-box;
+        padding:15px;
+        font-family:sans-serif;
+    `;
+    let stylesHeading = css`
+        margin: 0 0 15px 0;
+        font-weight:0;
+        font-size:24px;
+    `;
+
+    let modifiers = N.Step(pivot, "ModifyUp", false) || [];
+    let handleDelete = ()=>
+    {
+        Pivot.Delete(pivot);
+        Render();
+    };
+
+    let rows = [];
+    N.ID.Walk++;
+    N.Walk(n=>rows.push(h(PivotBranch, {node:n}, null)), pivot, "Hierarchy");
+
+    return html`
+    <div class=${stylesRoot}>
+        <div key="heading" class=${stylesHeading}>${pivot.Meta.Label}</div>
+        <${Section} key="settings" label=${`Settings`}>
+            <button onClick=${handleDelete}>Destroy Pivot</button>
+        <//>
+        <${Section} key="modifiers" label=${`Modifiers (${modifiers.length})`}>
+            ${ !modifiers.length ? html`<em>No modifiers</em>` : modifiers.map( m => html`<${Modifier} modifier=${m}/>`)}
+        <//>
+        <${Section} key="tree" label=${"Tree"}>
+            <table>
+            ${rows}
+            </table>
+        <//>
+    </div>
+    `;
+};
+
 let ElRoot = props =>
 {
     let pivots = N.Step(Pivot.Root, "Pivot")||[];
@@ -415,7 +685,37 @@ let ElRoot = props =>
         pivots.map(pivot=>h(PivotRoot, {key:pivot.Meta.Label, pivot}))
     ])
 };
-Render = () => render(h(ElRoot), document.querySelector("#app"));
+const Render = () => render(h(ElRoot), document.querySelector("#app"));
 Render();
 
+
+</script>
+
+<!-- testing area -->
+<script>
+    let ModificationPull = (inDAG) =>
+    {
+        let collect = inArray => n => { n.Meta.Tweak.forEach((t, i)=>{ inArray[n.Meta.Indicies[i]] += t; }); };
+        let totalScale = [0, 0, 0, 0, 0, 0, 0, 0];
+        let totalAdd = [0, 0, 0, 0, 0, 0, 0, 0];
+    
+        N.ID.Walk++;
+        N.Walk(collect(totalScale), inDAG, "ModifyAt", false);
+        N.Walk(collect(totalScale), inDAG, "ModifyDown", false);
+        N.Walk(collect(totalAdd), inDAG, "ModifyUp", false);
+        N.Walk(collect(totalAdd), inDAG, "ModifyOut", false);
+    
+        return [totalScale, totalAdd];
+    };
+    
+    let dag1 = N.Create({Label:"dag-1"});
+    let m0 = N.Create({Label:"m-0", Tweak:[-1, 2, 0.7], Indicies:[0, 1, 2]});
+    let m1 = N.Create({Label:"m-1", Tweak:[0.1, 0.1, 0.1], Indicies:[1, 2, 3]});
+    
+    N.Connect(m0, dag1, "ModifyAt");
+    N.Connect(m1, dag1, "ModifyDown");
+    
+    let results = ModificationPull(dag1);
+    console.log(results);
+    
 </script>
\ No newline at end of file