diff --git a/app/styles/editor/level/component/edit.sass b/app/styles/editor/level/component/edit.sass
index c223c214f..ec43e912b 100644
--- a/app/styles/editor/level/component/edit.sass
+++ b/app/styles/editor/level/component/edit.sass
@@ -1 +1,12 @@
-//#editor-level-component-edit-view
\ No newline at end of file
+#editor-level-component-edit-view
+  .navbar-text
+    float: left
+    
+  #component-code-editor
+    position: absolute
+    left: 0
+    right: 0
+    bottom: 0
+    top: 50px
+    border: 2px solid black
+    border-top: none
\ No newline at end of file
diff --git a/app/styles/editor/level/edit.sass b/app/styles/editor/level/edit.sass
index 0830b7914..295a877c9 100644
--- a/app/styles/editor/level/edit.sass
+++ b/app/styles/editor/level/edit.sass
@@ -35,14 +35,14 @@
   
   // keeps the editor tabs a certain height
 
-  .tab-content
+  #level-editor-tabs
     margin-top: 108px
     // keeps the tab content at a specific ratio
     width: 100%
     padding-bottom: 45%
     position: relative
     
-  .tab-pane
+  .level-editor-tab-pane
     // makes sure the pane itself fills the whole ratio'd space
     position: absolute
     top: 0
diff --git a/app/templates/editor/level/component/edit.jade b/app/templates/editor/level/component/edit.jade
index fe63ed317..d04d03c33 100644
--- a/app/templates/editor/level/component/edit.jade
+++ b/app/templates/editor/level/component/edit.jade
@@ -1,7 +1,22 @@
-h3.edit-component-name
-  span(data-i18n="editor.level_component_edit_title")
-    | Edit Component
-  span : 
-    | "#{editTitle}"
+.navbar
+  .navbar-inner
+    p.navbar-text
+      span(data-i18n="editor.level_component_edit_title")
+        | Edit Component
+      span : 
+        | "#{editTitle}"
+    ul.nav.nav-pills
+      li
+        a(href="#code" data-toggle="tab") Code
+      li
+        a(href="#config-schema" data-toggle="tab") Config Schema
+      li
+        a(href="#settings" data-toggle="tab") Settings
 
-#edit-component-treema
+.tab-content
+  .tab-pane.active#code
+    #component-code-editor
+  .tab-pane#config-schema
+    #config-schema-treema
+  .tab-pane#settings
+    #edit-component-treema
diff --git a/app/templates/editor/level/edit.jade b/app/templates/editor/level/edit.jade
index c030430a7..9f7ec239e 100644
--- a/app/templates/editor/level/edit.jade
+++ b/app/templates/editor/level/edit.jade
@@ -41,15 +41,15 @@ block outer_content
         li
           a(href="#editor-level-systems-tab-view", data-toggle="tab", data-i18n="editor.level_tab_systems") Systems
   
-    div.tab-content
-      div.tab-pane.active#editor-level-thangs-tab-view
+    div.tab-content#level-editor-tabs
+      div.tab-pane.level-editor-tab-pane.active#editor-level-thangs-tab-view
         
-      div.tab-pane#editor-level-scripts-tab-view
+      div.tab-pane.level-editor-tab-pane#editor-level-scripts-tab-view
   
-      div.tab-pane#editor-level-settings-tab-view
+      div.tab-pane.level-editor-tab-pane#editor-level-settings-tab-view
 
-      div.tab-pane#editor-level-components-tab-view
+      div.tab-pane.level-editor-tab-pane#editor-level-components-tab-view
 
-      div.tab-pane#editor-level-systems-tab-view
+      div.tab-pane.level-editor-tab-pane#editor-level-systems-tab-view
 
 block footer
\ No newline at end of file
diff --git a/app/views/editor/level/component/edit.coffee b/app/views/editor/level/component/edit.coffee
index 0a1cbf405..bf81f9a6c 100644
--- a/app/views/editor/level/component/edit.coffee
+++ b/app/views/editor/level/component/edit.coffee
@@ -5,9 +5,11 @@ LevelComponent = require 'models/LevelComponent'
 module.exports = class LevelComponentEditView extends View
   id: "editor-level-component-edit-view"
   template: template
+  editableSettings: ['name', 'description', 'system', 'language', 'dependencies', 'propertyDocumentation', 'i18n']  # not thangs or scripts or 
 
   events:
     'click #done-editing-component-button': 'endEditing'
+    'click .nav a': (e) -> $(e.target).tab('show')
 
   constructor: (options) ->
     super options
@@ -21,30 +23,67 @@ module.exports = class LevelComponentEditView extends View
 
   afterRender: ->
     super()
-    @buildTreema()
+    @buildSettingsTreema()
+    @buildConfigSchemaTreema()
+    @buildCodeEditor()
+
+  buildSettingsTreema: ->
+    data = _.pick @levelComponent.attributes, (value, key) => key in @editableSettings
+    schema = _.cloneDeep LevelComponent.schema.attributes
+    schema.properties = _.pick schema.properties, (value, key) => key in @editableSettings
+    schema.required = _.intersection schema.required, @editableSettings
 
-  buildTreema: ->
-    data = $.extend(true, {}, @levelComponent.attributes)
     treemaOptions =
       supermodel: @supermodel
-      schema: LevelComponent.schema.attributes
+      schema: schema
       data: data
-      callbacks: {change: @onComponentEdited}
-    unless me.isAdmin()
-      treemaOptions.readOnly = true
-    @componentTreema = @$el.find('#edit-component-treema').treema treemaOptions
-    @componentTreema.build()
-    @componentTreema.open()
-    # TODO: schema is not loaded for the first one here?
-    @componentTreema.tv4.addSchema('metaschema', LevelComponent.schema.get('properties').configSchema)
+      callbacks: {change: @onComponentSettingsEdited}
+    treemaOptions.readOnly = true unless me.isAdmin()
+    @componentSettingsTreema = @$el.find('#edit-component-treema').treema treemaOptions
+    @componentSettingsTreema.build()
+    @componentSettingsTreema.open()
 
-  onComponentEdited: (e) =>
+  onComponentSettingsEdited: =>
     # Make sure it validates first?
-    for key, value of @componentTreema.data
+    for key, value of @componentSettingsTreema.data
       @levelComponent.set key, value unless key is 'js' # will compile code if needed
     Backbone.Mediator.publish 'level-component-edited', levelComponent: @levelComponent
     null
 
+  buildConfigSchemaTreema: ->
+    treemaOptions =
+      supermodel: @supermodel
+      schema: LevelComponent.schema.get('properties').configSchema
+      data: @levelComponent.get 'configSchema'
+      callbacks: {change: @onConfigSchemaEdited}
+    treemaOptions.readOnly = true unless me.isAdmin()
+    @configSchemaTreema = @$el.find('#config-schema-treema').treema treemaOptions
+    @configSchemaTreema.build()
+    @configSchemaTreema.open()
+    # TODO: schema is not loaded for the first one here?
+    @configSchemaTreema.tv4.addSchema('metaschema', LevelComponent.schema.get('properties').configSchema)
+
+  onConfigSchemaEdited: =>
+    @levelComponent.set 'configSchema', @configSchemaTreema.data
+    Backbone.Mediator.publish 'level-component-edited', levelComponent: @levelComponent
+
+  buildCodeEditor: ->
+    editorEl = @$el.find '#component-code-editor'
+    editorEl.text @levelComponent.get('code')
+    @editor = ace.edit(editorEl[0])
+    @editor.setReadOnly(not me.isAdmin())
+    session = @editor.getSession()
+    session.setMode 'ace/mode/coffee'
+    session.setTabSize 2
+    session.setNewLineMode = 'unix'
+    session.setUseSoftTabs true
+    @editor.on 'change', @onEditorChange
+    
+  onEditorChange: =>
+    @levelComponent.set 'code', @editor.getValue()
+    Backbone.Mediator.publish 'level-component-edited', levelComponent: @levelComponent
+    null
+
   endEditing: (e) ->
     Backbone.Mediator.publish 'level-component-editing-ended', levelComponent: @levelComponent
     null