diff --git a/src/App.js b/src/App.js
index 9e129a0..b6d397e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,12 @@
 import React, {useState} from 'react';
-import { SearchState, SortingState, IntegratedSorting, TreeDataState, CustomTreeData, FilteringState, IntegratedFiltering, TableColumnVisibility } from '@devexpress/dx-react-grid';
-import { Grid, Table, TableHeaderRow, TableTreeColumn, TableFilterRow, SearchPanel, Toolbar, ColumnChooser } from '@devexpress/dx-react-grid-bootstrap4';
+import { SearchState, SortingState, IntegratedSorting, TreeDataState, CustomTreeData, FilteringState, IntegratedFiltering, TableColumnVisibility} from '@devexpress/dx-react-grid';
+import { Grid, Table, TableHeaderRow, TableTreeColumn, TableFilterRow, SearchPanel, Toolbar, ColumnChooser, TableColumnResizing, DragDropProvider, TableColumnReordering  } from '@devexpress/dx-react-grid-bootstrap4';
 import Convert from 'ansi-to-html';
 import stripAnsi from 'strip-ansi';
 import ReactJson from 'react-json-view';
 import './App.css';
 import Logs from './Logs.js';
-import {Button, Card, Collapse} from 'react-bootstrap';
+import {Button, Card, Collapse, Navbar, Nav, Container} from 'react-bootstrap';
 import ReactBootstrapSlider from 'react-bootstrap-slider';
 
 import all_data from './log.json'
@@ -20,8 +20,35 @@ let session_object = Object.values(all_data).find((x) => x.session === x.id)
 
 let data = [session_object];
 
-function Section({title, children}) {
-  const [open, setOpen] = useState(false);
+const ImportFromFileBodyComponent = () => {
+  let fileReader;
+
+  const handleFileRead = (e) => {
+      const content = fileReader.result;
+      console.log(content);
+      // … do something with the 'content' …
+  };
+
+  const handleFileChosen = (file) => {
+    if (!file) return;
+    fileReader = new FileReader();
+    fileReader.onloadend = handleFileRead;
+    fileReader.readAsText(file);
+  };
+
+  return <div className='upload-expense'>
+      <input type='file'
+             id='file'
+             className='input-file'
+             accept='.csv'
+             onChange={e => handleFileChosen(e.target.files[0])}
+      />
+  </div>;
+};
+
+
+function Section({title, children, defaultOpen}) {
+  const [open, setOpen] = useState(defaultOpen);
 
   return (
     <>
@@ -54,6 +81,7 @@ class App extends React.PureComponent {
         { name: 'session', title: 'Session' },
         { name: 'parent_id', title: 'Parent' },
         { name: 'id', title: 'Id' },
+        { name: 'step', title: 'Step' },
         { name: 'name', title: 'Name' },
         { name: 'type', title: 'Type' },
         { name: 'timestamp', title: 'Timestamp' },
@@ -65,8 +93,23 @@ class App extends React.PureComponent {
       tableColumnExtensions: [{ columnName: 'name', width: 300 }],
       // defaultExpandedRowIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27]
       defaultExpandedRowIds: [],
-      defaultHiddenColumnNames: ['session', 'parent_id', 'id', 'error']
+      defaultHiddenColumnNames: ['session', 'parent_id', 'id', 'error'],
       // defaultHiddenColumnNames: []
+      defaultColumnWidths: [
+        // { columnName: 'step', width: 10 },
+
+        { columnName: 'session', width: 200 },
+        { columnName: 'parent_id', width: 200 },
+        { columnName: 'id', width: 200 },
+        { columnName: 'step', width: 150 },
+        { columnName: 'name', width: 400 },
+        { columnName: 'type', width: 200 },
+        { columnName: 'timestamp', width: 200 },
+        // { name: 'error', width: 200 },
+        // { name: 'inputs', width: 200 },
+        { columnName: 'msg', width: 200 },
+      ],
+      defaultOrder: ['session', 'parent_id', 'id', 'step', 'name', 'type', 'timestamp', 'msg']
     };
 
     this.previousLog = () => {
@@ -76,6 +119,7 @@ class App extends React.PureComponent {
       let newItem = all_data_ordered[this.state.current_index - 1]
       data.pop();
       nextLogs.pop()
+      newItem.step = this.state.current_index - 1
       this.setState({
         rows: nextRows,
         current_index: (this.state.current_index - 1),
@@ -95,6 +139,7 @@ class App extends React.PureComponent {
         nextLogs.push("") // easier to slice it after...
       }
       newItem.name = stripAnsi(newItem.name)
+      newItem.step = this.state.current_index + 1
       data.push(newItem)
       this.setState({
         rows: nextRows,
@@ -117,6 +162,7 @@ class App extends React.PureComponent {
       if (value < this.state.current_index) {
         let diff = this.state.current_index - value;
         for (let i=0; i<diff; i++) {
+          // TODO: instead do this 'in place' THEN do the setState
           this.previousLog();
         }
       }
@@ -124,6 +170,7 @@ class App extends React.PureComponent {
       if (value > this.state.current_index) {
         let diff = value - this.state.current_index;
         for (let i=0; i<diff; i++) {
+          // TODO: instead do this 'in place' THEN do the setState
           this.nextLog();
         }
       }
@@ -133,14 +180,23 @@ class App extends React.PureComponent {
   render() {
     return (
       <div>
-        step: {this.state.current_index} id: {this.state.current_id}
-        <button onClick={this.previousLog}>Previous</button>
-        <ReactBootstrapSlider min={0} max={this.state.max_index} change={this.changeValue} value={this.state.current_index} />
-        <button onClick={this.nextLog}>Next</button>
-        <div className="card">
+        <Navbar fixed="top" style={{"background-color": "white", "border-bottom": "1px solid black"}}>
+          {/* <ImportFromFileBodyComponent /> */}
+          <Navbar.Brand href="#">StructLog</Navbar.Brand>
+          <Nav className="mr-auto">
+          step: {this.state.current_index} id: {this.state.current_id}
+          </Nav>
+          < inline>
+          <button onClick={this.previousLog}>Previous</button>
+          <ReactBootstrapSlider min={0} max={this.state.max_index} change={this.changeValue} value={this.state.current_index} />
+          <button onClick={this.nextLog}>Next</button>
+          </inline>
+        </Navbar>
+        <div style={{"margin-top": "55px"}}>
+        <Section title="Current" defaultOpen={true}>
           <ReactJson src={this.state.current} theme="monokai" groupArraysAfterLength={5} name={false} />
-        </div>
-        <Section title="Console Output">
+        </Section>
+        <Section title="Console Output" defaultOpen={true}>
           <Logs>
             {this.state.logs.map((item, i) => {
               return (
@@ -151,7 +207,7 @@ class App extends React.PureComponent {
             })}
           </Logs>
         </Section>
-        <Section title="Logs">
+        <Section title="Logs" defaultOpen={true}>
           <Grid rows={this.state.rows} columns={this.state.columns} >
             <TreeDataState defaultExpandedRowIds={this.state.defaultExpandedRowIds} />
             <CustomTreeData getChildRows={this.getChildRows} />
@@ -160,11 +216,14 @@ class App extends React.PureComponent {
             <IntegratedFiltering />
             <SortingState defaultSorting={[{ columnName: 'Timestamp', direction: 'asc' }]} />
             <IntegratedSorting />
+            <DragDropProvider />
             <Table columnExtensions={this.state.tableColumnExtensions} />
+            <TableColumnResizing defaultColumnWidths={this.state.defaultColumnWidths} />
             <TableHeaderRow showSortingControls />
             <TableColumnVisibility
               defaultHiddenColumnNames={this.state.defaultHiddenColumnNames}
             />
+            <TableColumnReordering defaultOrder={this.state.defaultOrder} />
             <Toolbar />
             <SearchPanel />
             <TableFilterRow showFilterSelector={true} />
@@ -172,6 +231,7 @@ class App extends React.PureComponent {
             <ColumnChooser />
           </Grid>
         </Section>
+        </div>
       </div>
     );
   }