diff --git a/plugins/project/project.coffee b/plugins/project/project.coffee
index c0a9bd0c8..77b0ac00f 100644
--- a/plugins/project/project.coffee
+++ b/plugins/project/project.coffee
@@ -1,5 +1,7 @@
 $ = require 'jquery'
 _ = require 'underscore'
+{Chrome, File, Dir} = require 'osx'
+Editor = require 'editor'
 
 {Chrome, Dir, File, Process} = require 'osx'
 {bindKey} = require 'editor'
@@ -10,6 +12,11 @@ exports.init = ->
   bindKey 'toggleProjectDrawer', 'Command-Ctrl-N', (env) =>
     @toggle()
 
+  $('#project .file').live 'click', (event) =>
+    el = $(event.currentTarget)
+    path =  decodeURIComponent el.attr('path')
+    Editor.open(path)
+
 exports.toggle = ->
   if @showing
     $('#project').parent().remove()
@@ -24,8 +31,9 @@ exports.reload = ->
   $('#project .cwd').text(dir)
 
   files = Dir.list(dir)
-  listItems = _.map files, (file) ->
-    file = file.replace(dir, "")
-    "<li>#{file}</li>"
+  listItems = _.map files, (path) ->
+    filename = path.replace(dir, "").substring(1)
+    type = if Dir.isDir(path) then 'dir' else 'file'
+    "<li class='#{type}' path='#{encodeURIComponent path}'>#{filename}</li>"
 
   $('#project .files').append(listItems.join('\n'))
diff --git a/plugins/project/project.html b/plugins/project/project.html
index 0b787fcf5..6521e09d1 100644
--- a/plugins/project/project.html
+++ b/plugins/project/project.html
@@ -1,4 +1,10 @@
 <style>
+  #project {
+    min-width: 200px;
+    height: 100%;
+    background-color: white;
+  }
+
   ul {
     margin: 0;
     padding: 0;
@@ -8,6 +14,14 @@
     list-style-type: none;
   }
 
+  li.file {
+    color: red;
+  }
+
+  li.dir {
+    color: blue;
+  }
+
   li:hover {
     background-color: grey;
   }