diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade
index 76321558b8..9ffbb93922 100644
--- a/public/docs/ts/latest/quickstart.jade
+++ b/public/docs/ts/latest/quickstart.jade
@@ -23,14 +23,15 @@ figure.image-display
   img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of quickstart app")
 :marked
   Here is the file structure:
-
-code-example(format="").
-  angular2-quickstart
-  ├─ app
-  │   ├── app.component.ts
-  │   └── boot.ts
-  ├─ index.htm  
-  └─ license.md
+.filetree
+  .file angular2-quickstart
+  .children
+    .file app
+    .children
+      .file app.component.ts
+      .file boot.ts
+    .file index.htm
+    .file license.md
 :marked
   Functionally, it's an `index.html` and two TypeScript files in an `app/` folder.
   We can handle that!
diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss
index bdb4d27988..cf74704075 100644
--- a/public/resources/css/main.scss
+++ b/public/resources/css/main.scss
@@ -45,6 +45,7 @@
 @import 'module/example-title';
 @import 'module/api';
 @import 'module/cheatsheet';
+@import 'module/filetree';
 
 
 /*
diff --git a/public/resources/css/module/_filetree.scss b/public/resources/css/module/_filetree.scss
new file mode 100644
index 0000000000..10b95f2db7
--- /dev/null
+++ b/public/resources/css/module/_filetree.scss
@@ -0,0 +1,37 @@
+.filetree {
+  padding: 12px 24px;
+  background: $mist;
+  .file {
+    display: block;
+    font-family: $mono-font;
+    line-height: 32px;
+    color: $platinum;
+  }
+  .children {
+    padding-left: 24px;
+    position: relative;
+    &:before {
+      content: '';
+      left: 6px;
+      width: 2px;
+      background: $grey;
+      bottom: 16px;
+      top: 0;
+      position: absolute;
+      transform: scaleX(0.75);
+    }
+    .file {
+      position: relative;
+      &:before {
+        content: '';
+        left: -18px;
+        top: 16px;
+        width: 12px;
+        height: 2px;
+        background: $grey;
+        position: absolute;
+        transform: scaleY(0.75);
+      }
+    }
+  }
+}