diff --git a/client/tpk/sheetEditor/sheetEditor.jsx b/client/tpk/sheetEditor/sheetEditor.jsx
new file mode 100644
index 0000000..8918454
--- /dev/null
+++ b/client/tpk/sheetEditor/sheetEditor.jsx
@@ -0,0 +1,50 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
+
+var SheetEditor = React.createClass({
+	getDefaultProps: function() {
+		return {
+			value : "",
+			onChange : function(){}
+		};
+	},
+	cursorPosition : {
+		line : 0,
+		ch : 0
+	},
+
+	componentDidMount: function() {
+		var paneHeight = this.refs.main.parentNode.clientHeight;
+		paneHeight -= this.refs.snippetBar.clientHeight + 1;
+		this.refs.codeEditor.codeMirror.setSize(null, paneHeight);
+	},
+
+	handleTextChange : function(text){
+		this.props.onChange(text);
+	},
+	handleCursorActivty : function(curpos){
+		this.cursorPosition = curpos;
+	},
+
+	//Called when there are changes to the editor's dimensions
+	update : function(){
+		this.refs.codeEditor.updateSize();
+	},
+
+	render : function(){
+		return <div className='sheetEditor'>
+			<CodeEditor
+				ref='codeEditor'
+				wrap={true}
+				language='jsx'
+				value={this.props.value}
+				onChange={this.handleTextChange}
+				onCursorActivity={this.handleCursorActivty} />
+		</div>
+	}
+});
+
+module.exports = SheetEditor;
diff --git a/client/tpk/sheetEditor/sheetEditor.less b/client/tpk/sheetEditor/sheetEditor.less
new file mode 100644
index 0000000..6bb4bdf
--- /dev/null
+++ b/client/tpk/sheetEditor/sheetEditor.less
@@ -0,0 +1,3 @@
+.COM{
+
+}
\ No newline at end of file
diff --git a/client/tpk/tpk.jsx b/client/tpk/tpk.jsx
index bd4abba..8c52d7e 100644
--- a/client/tpk/tpk.jsx
+++ b/client/tpk/tpk.jsx
@@ -5,9 +5,29 @@ var cx = require('classnames');
 var Nav = require('naturalcrit/nav/nav.jsx');
 var Navbar = require('./navbar/navbar.jsx');
 
+var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
+var SheetEditor = require('./sheetEditor/sheetEditor.jsx');
+
 
 var TPK = React.createClass({
 
+
+	getInitialState: function() {
+		return {
+			sheetCode: ''
+		};
+	},
+
+	handleSplitMove : function(){
+		this.refs.editor.update();
+	},
+
+	handleCodeChange : function(code){
+		this.setState({
+			sheetCode : code
+		})
+	},
+
 	render : function(){
 		return <div className='tpk page'>
 			<Navbar>
@@ -18,9 +38,12 @@ var TPK = React.createClass({
 				</Nav.section>
 			</Navbar>
 			<div className='content'>
-
-				Holla y'all
-
+				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+					<SheetEditor value={this.state.sheetCode} onChange={this.handleCodeChange} ref='editor' />
+					<div>
+						{this.state.sheetCode}
+					</div>
+				</SplitPane>
 			</div>
 		</div>
 	}