diff --git a/src/app.jsx b/src/app.jsx
index 6660ff8..3d6ae72 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -9,6 +9,7 @@ import Fixed from 'rebass/dist/Fixed'
 import { MapboxGlMap } from './gl.jsx'
 import { OpenLayers3Map } from './ol3.jsx'
 import { LayerList } from './layers/list.jsx'
+import { LayerEditor } from './layers/editor.jsx'
 import {Toolbar} from './toolbar.jsx'
 import style from './style.js'
 import { loadDefaultStyle, SettingsStore, StyleStore } from './stylestore.js'
@@ -39,9 +40,7 @@ export default class App extends React.Component {
     this.settingsStore = new SettingsStore()
     this.state = {
       accessToken: this.settingsStore.accessToken,
-      workContext: "layers",
-      currentStyle: style.emptyStyle,
-      mapRenderer: 'gl',
+      mapStyle: style.emptyStyle,
     }
   }
 
@@ -58,7 +57,7 @@ export default class App extends React.Component {
   }
 
   onStyleDownload() {
-    const mapStyle = style.toJSON(this.state.currentStyle)
+    const mapStyle = style.toJSON(this.state.mapStyle)
     const blob = new Blob([JSON.stringify(mapStyle, null, 4)], {type: "application/json;charset=utf-8"});
     saveAs(blob, mapStyle.id + ".json");
     this.onStyleSave()
@@ -66,33 +65,18 @@ export default class App extends React.Component {
 
   onStyleUpload(newStyle) {
     const savedStyle = this.styleStore.save(newStyle)
-    this.setState({ currentStyle: savedStyle })
+    this.setState({ mapStyle: savedStyle })
   }
 
   onStyleSave() {
-    const snapshotStyle = this.state.currentStyle.set('modified', new Date().toJSON())
-    this.setState({ currentStyle: snapshotStyle })
+    const snapshotStyle = this.state.mapStyle.set('modified', new Date().toJSON())
+    this.setState({ mapStyle: snapshotStyle })
     console.log('Save')
     this.styleStore.save(snapshotStyle)
   }
 
   onStyleChanged(newStyle) {
-    this.setState({ currentStyle: newStyle })
-  }
-
-  onOpenSettings() {
-    //TODO: open settings modal
-    //this.setState({ workContext: "settings" })
-  }
-
-  onOpenAbout() {
-    //TODO: open about modal
-    //this.setState({ workContext: "about" })
-  }
-
-  onOpenSources() {
-    //TODO: open sources modal
-    //this.setState({ workContext: "sources", })
+    this.setState({ mapStyle: newStyle })
   }
 
   onAccessTokenChanged(newToken) {
@@ -107,10 +91,10 @@ export default class App extends React.Component {
 
   mapRenderer() {
     const mapProps = {
-      mapStyle: this.state.currentStyle,
+      mapStyle: this.state.mapStyle,
       accessToken: this.state.accessToken,
     }
-    const renderer = this.state.currentStyle.getIn(['metadata', 'maputnik:renderer'], 'mbgljs')
+    const renderer = this.state.mapStyle.getIn(['metadata', 'maputnik:renderer'], 'mbgljs')
     if(renderer === 'ol3') {
       return  <OpenLayers3Map {...mapProps} />
     } else {
@@ -119,9 +103,11 @@ export default class App extends React.Component {
   }
 
   render() {
+    const layers = this.state.mapStyle.get('layers').keySeq()
+    console.log(layers.size)
     return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}>
       <Toolbar
-        mapStyle={this.state.currentStyle}
+        mapStyle={this.state.mapStyle}
         onStyleChanged={this.onStyleChanged.bind(this)}
         onStyleSave={this.onStyleSave.bind(this)}
         onStyleUpload={this.onStyleUpload.bind(this)}
@@ -132,15 +118,26 @@ export default class App extends React.Component {
         top: 50,
         left: 0,
         zIndex: 100,
-        width: 300,
+        width: 200,
         overflow: "hidden",
         backgroundColor: colors.gray
       }}>
         <LayerList
           onLayersChanged={this.onLayersChanged.bind(this)}
-          layers={this.state.currentStyle.get('layers')}
+          layers={this.state.mapStyle.get('layers')}
         />
       </div>
+      <div style={{
+        ...fullHeight,
+        top: 50,
+        left: 200,
+        zIndex: 100,
+        width: 300,
+        overflow: "hidden",
+        backgroundColor: colors.gray}
+      }>
+      {layers.size > 0 && <LayerEditor layer={this.state.mapStyle.get('layers').get(layers.get(0))} />}
+      </div>
       {this.mapRenderer()}
     </div>
   }
diff --git a/src/layers/editor.jsx b/src/layers/editor.jsx
index 4b79597..1197396 100644
--- a/src/layers/editor.jsx
+++ b/src/layers/editor.jsx
@@ -18,144 +18,149 @@ import MdDelete from 'react-icons/lib/md/delete'
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 class UnsupportedLayer extends React.Component {
-	render() {
-		return <div></div>
-	}
+  render() {
+    return <div></div>
+  }
 }
 
 /** Layer editor supporting multiple types of layers. */
 export class LayerEditor extends React.Component {
-	static propTypes = {
-		layer: React.PropTypes.object.isRequired,
-		onLayerChanged: React.PropTypes.func.isRequired,
-		onLayerDestroyed: React.PropTypes.func.isRequired,
-	}
+  static propTypes = {
+    layer: React.PropTypes.object.isRequired,
+    onLayerChanged: React.PropTypes.func,
+    onLayerDestroyed: React.PropTypes.func,
+  }
 
-	static childContextTypes = {
-		reactIconBase: React.PropTypes.object
-	}
+  static defaultProps = {
+    onLayerChanged: () => {},
+    onLayerDestroyed: () => {},
+  }
 
-	constructor(props) {
-		super(props);
-		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
-		this.state = {
-			isOpened: false,
-		}
-	}
+  static childContextTypes = {
+    reactIconBase: React.PropTypes.object
+  }
 
-	getChildContext () {
-		return {
-			reactIconBase: {
-				size: theme.fontSizes[4],
-				color: theme.colors.lowgray,
-			}
-		}
-	}
+  constructor(props) {
+    super(props);
+    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+    this.state = {
+      isOpened: false,
+    }
+  }
 
-	onPaintChanged(property, newValue) {
-		let layer = this.props.layer
-		//TODO: by using immutable records we can avoid this checking if object exists
-		if(!layer.has('paint')) {
-			layer = layer.set('paint', Immutable.Map())
-		}
+  getChildContext () {
+    return {
+      reactIconBase: {
+        size: theme.fontSizes[4],
+        color: theme.colors.lowgray,
+      }
+    }
+  }
 
-		const changedLayer = layer.setIn(['paint', property], newValue)
-		this.props.onLayerChanged(changedLayer)
-	}
+  onPaintChanged(property, newValue) {
+    let layer = this.props.layer
+    //TODO: by using immutable records we can avoid this checking if object exists
+    if(!layer.has('paint')) {
+      layer = layer.set('paint', Immutable.Map())
+    }
 
-	onLayoutChanged(property, newValue) {
-		let layer = this.props.layer
-		//TODO: by using immutable records we can avoid this checking if object exists
-		if(!layer.has('layout')) {
-			layer = layer.set('layout', Immutable.Map())
-		}
+    const changedLayer = layer.setIn(['paint', property], newValue)
+    this.props.onLayerChanged(changedLayer)
+  }
 
-		const changedLayer = layer.setIn(['layout', property], newValue)
-		this.props.onLayerChanged(changedLayer)
-	}
+  onLayoutChanged(property, newValue) {
+    let layer = this.props.layer
+    //TODO: by using immutable records we can avoid this checking if object exists
+    if(!layer.has('layout')) {
+      layer = layer.set('layout', Immutable.Map())
+    }
 
-	toggleLayer() {
-		this.setState({isOpened: !this.state.isOpened})
-	}
+    const changedLayer = layer.setIn(['layout', property], newValue)
+    this.props.onLayerChanged(changedLayer)
+  }
 
-	layerFromType(type) {
-		if (type === "fill") {
-			return <FillLayer
-				layer={this.props.layer}
-				onPaintChanged={this.onPaintChanged.bind(this)}
-				onLayoutChanged={this.onLayoutChanged.bind(this)}
-			/>
-		}
+  toggleLayer() {
+    this.setState({isOpened: !this.state.isOpened})
+  }
 
-		if (type === "background") {
-			return <BackgroundLayer
-				layer={this.props.layer}
-				onPaintChanged={this.onPaintChanged.bind(this)}
-				onLayoutChanged={this.onLayoutChanged.bind(this)}
-			/>
-		}
+  layerFromType(type) {
+    if (type === "fill") {
+      return <FillLayer
+        layer={this.props.layer}
+        onPaintChanged={this.onPaintChanged.bind(this)}
+        onLayoutChanged={this.onLayoutChanged.bind(this)}
+      />
+    }
 
-		if (type === "line") {
-			return <LineLayer
-				layer={this.props.layer}
-				onPaintChanged={this.onPaintChanged.bind(this)}
-				onLayoutChanged={this.onLayoutChanged.bind(this)}
-			/>
-		}
+    if (type === "background") {
+      return <BackgroundLayer
+        layer={this.props.layer}
+        onPaintChanged={this.onPaintChanged.bind(this)}
+        onLayoutChanged={this.onLayoutChanged.bind(this)}
+      />
+    }
 
-		if (type === "symbol") {
-			return <SymbolLayer
-				layer={this.props.layer}
-				onPaintChanged={this.onPaintChanged.bind(this)}
-				onLayoutChanged={this.onLayoutChanged.bind(this)}
-			/>
-		}
+    if (type === "line") {
+      return <LineLayer
+        layer={this.props.layer}
+        onPaintChanged={this.onPaintChanged.bind(this)}
+        onLayoutChanged={this.onLayoutChanged.bind(this)}
+      />
+    }
 
-		return <UnsupportedLayer />
-	}
+    if (type === "symbol") {
+      return <SymbolLayer
+        layer={this.props.layer}
+        onPaintChanged={this.onPaintChanged.bind(this)}
+        onLayoutChanged={this.onLayoutChanged.bind(this)}
+      />
+    }
 
-	toggleVisibility() {
-		if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
-			this.onLayoutChanged('visibility', 'visible')
-		} else {
-			this.onLayoutChanged('visibility', 'none')
-		}
-	}
+    return <UnsupportedLayer />
+  }
 
-	render() {
-		let visibleIcon = <MdVisibilityOff />
-		if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
-			visibleIcon = <MdVisibility />
-		}
+  toggleVisibility() {
+    if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
+      this.onLayoutChanged('visibility', 'visible')
+    } else {
+      this.onLayoutChanged('visibility', 'none')
+    }
+  }
 
-		return <div style={{
-				padding: theme.scale[0],
-				borderBottom: 1,
-				borderTop: 1,
-				borderLeft: 2,
-				borderRight: 0,
-				borderStyle: "solid",
-				borderColor: theme.borderColor,
-				borderLeftColor: this.props.layer.getIn(['metadata', 'maputnik:color'])
-			}}>
-			<Toolbar onClick={this.toggleLayer.bind(this)}>
-				<NavItem style={{fontWeight: 400}}>
-					#{this.props.layer.get('id')}
-				</NavItem>
-				<Space auto x={1} />
-				<NavItem onClick={this.toggleVisibility.bind(this)}>
-					{visibleIcon}
-				</NavItem>
-				<NavItem onClick={(e) => this.props.onLayerDestroyed(this.props.layer)}>
-					<MdDelete />
-				</NavItem>
-			</Toolbar>
-			<Collapse isOpened={this.state.isOpened}>
-				<div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
-				{this.layerFromType(this.props.layer.get('type'))}
-				</div>
-			</Collapse>
-		</div>
-	}
+  render() {
+    let visibleIcon = <MdVisibilityOff />
+    if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
+      visibleIcon = <MdVisibility />
+    }
+
+    return <div style={{
+        padding: theme.scale[0],
+        borderBottom: 1,
+        borderTop: 1,
+        borderLeft: 2,
+        borderRight: 0,
+        borderStyle: "solid",
+        borderColor: theme.borderColor,
+        borderLeftColor: this.props.layer.getIn(['metadata', 'maputnik:color'])
+      }}>
+      <Toolbar onClick={this.toggleLayer.bind(this)}>
+        <NavItem style={{fontWeight: 400}}>
+          #{this.props.layer.get('id')}
+        </NavItem>
+        <Space auto x={1} />
+        <NavItem onClick={this.toggleVisibility.bind(this)}>
+          {visibleIcon}
+        </NavItem>
+        <NavItem onClick={(e) => this.props.onLayerDestroyed(this.props.layer)}>
+          <MdDelete />
+        </NavItem>
+      </Toolbar>
+      <Collapse isOpened={this.state.isOpened}>
+        <div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
+        {this.layerFromType(this.props.layer.get('type'))}
+        </div>
+      </Collapse>
+    </div>
+  }
 }