diff --git a/examples/index.js b/examples/index.js
index f657276..7a3a4e3 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -17,7 +17,6 @@ function foo () {
 }
 
 http.createServer((req, res) => {
-
   let youch = null
   try {
     foo ()
diff --git a/package.json b/package.json
index da04bec..84bcbfd 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "mustache": "^2.3.0",
-    "stackman": "^1.2.7"
+    "stack-trace": "0.0.9"
   },
   "repository": {
     "type": "git",
diff --git a/src/Youch/index.js b/src/Youch/index.js
index b8064e4..b8db29c 100644
--- a/src/Youch/index.js
+++ b/src/Youch/index.js
@@ -11,23 +11,47 @@
 
 const Mustache = require('mustache')
 const path = require('path')
+const stackTrace = require('stack-trace')
 const fs = require('fs')
 const VIEW_PATH = '../resources/error.mustache'
+const startingSlashRegex = new RegExp(`^${path.sep}`)
 
 const viewTemplate = fs.readFileSync(path.join(__dirname, VIEW_PATH), 'utf-8')
 
 class Youch {
   constructor (error, request) {
-    const options = {
-      context: 5
-    }
-
+    this.codeContext = 5
     this._filterHeaders = ['cookie', 'connection']
-    this.stackman = require('stackman')(options)
     this.error = error
     this.request = request
   }
 
+  /**
+   * Returns the source code for a given file. It unable to
+   * read file it resolves the promise with a null.
+   *
+   * @param  {Object} frame
+   * @return {Promise}
+   */
+  _getFrameSource (frame) {
+    return new Promise((resolve, reject) => {
+      fs.readFile(frame.getFileName(), 'utf-8', (error, contents) => {
+        if (error) {
+          resolve(null)
+        }
+
+        const lines = contents.split(/\r?\n/)
+        const lineNumber = frame.getLineNumber()
+
+        resolve({
+          pre: lines.slice(Math.max(0, lineNumber - (this.codeContext + 1)), lineNumber - 1),
+          line: lines[lineNumber - 1],
+          post: lines.slice(lineNumber, lineNumber + this.codeContext)
+        })
+      })
+    })
+  }
+
   /**
    * Parses the error stack and returns serialized
    * frames out of it.
@@ -35,10 +59,17 @@ class Youch {
    * @return {Object}
    */
   _parseError () {
-    return new Promise((resolve) => {
-      this.stackman(this.error, (stack) => {
-        resolve(stack)
-      })
+    return new Promise((resolve, reject) => {
+      const stack = stackTrace.parse(this.error)
+      Promise.all(stack.map((frame) => {
+        if (this._isNode(frame)) {
+          return Promise.resolve(frame)
+        }
+        return this._getFrameSource(frame).then((context) => {
+          frame.context = context
+          return frame
+        })
+      })).then(resolve).catch(reject)
     })
   }
 
@@ -77,7 +108,7 @@ class Youch {
       classes.push('active')
     }
 
-    if (!frame.isApp()) {
+    if (!this._isApp(frame)) {
       classes.push('native-frame')
     }
 
@@ -104,15 +135,47 @@ class Youch {
    * @return {Object}
    */
   _serializeFrame (frame) {
+    const relativeFileName = frame.getFileName().indexOf(process.cwd()) > -1 ?
+      frame.getFileName().replace(process.cwd(), '').replace(startingSlashRegex, '') :
+      frame.getFileName()
+
     return {
-      file: frame.getRelativeFileName(),
-      method: frame.getFunctionNameSanitized(),
+      file: relativeFileName,
+      method: frame.getFunctionName(),
       line: frame.getLineNumber(),
       column: frame.getColumnNumber(),
       context: this._getContext(frame)
     }
   }
 
+  /**
+   * Returns whether frame belongs to nodejs
+   * or not.
+   *
+   * @return {Boolean} [description]
+   */
+  _isNode (frame) {
+    if (frame.isNative()) {
+      return true
+    }
+
+    const filename = frame.getFileName() || ''
+    return !path.isAbsolute(filename) && filename[0] !== '.'
+  }
+
+  /**
+   * Returns whether code belongs to the app
+   * or not.
+   *
+   * @return {Boolean} [description]
+   */
+  _isApp (frame) {
+    if (this._isNode(frame)) {
+      return false
+    }
+    return !~(frame.getFileName() || '').indexOf('node_modules' + path.sep)
+  }
+
   /**
    * Serializes stack to Mustache friendly object to
    * be used within the view. Optionally can pass
@@ -129,7 +192,7 @@ class Youch {
       message: this.error.message,
       name: this.error.name,
       status: this.error.status,
-      frames: stack.frames instanceof Array === true ? stack.frames.map(callback).filter((frame) => frame.file) : []
+      frames: stack instanceof Array === true ? stack.filter((frame) => frame.getFileName()).map(callback) : []
     }
   }
 
diff --git a/src/resources/error.mustache b/src/resources/error.mustache
index 50634d4..36f2b4c 100644
--- a/src/resources/error.mustache
+++ b/src/resources/error.mustache
@@ -288,6 +288,120 @@
     }
   </style>
 
+  <style>
+    @keyframes hover-color {
+      from {
+        border-color: #c0c0c0; }
+      to {
+        border-color: #3e97eb; } }
+
+    .magic-radio,
+    .magic-checkbox {
+      position: absolute;
+      display: none; }
+
+    .magic-radio[disabled],
+    .magic-checkbox[disabled] {
+      cursor: not-allowed; }
+
+    .magic-radio + label,
+    .magic-checkbox + label {
+      position: relative;
+      display: block;
+      padding-left: 30px;
+      cursor: pointer;
+      vertical-align: middle; }
+      .magic-radio + label:hover:before,
+      .magic-checkbox + label:hover:before {
+        animation-duration: 0.4s;
+        animation-fill-mode: both;
+        animation-name: hover-color; }
+      .magic-radio + label:before,
+      .magic-checkbox + label:before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        content: '';
+        border: 1px solid #c0c0c0; }
+      .magic-radio + label:after,
+      .magic-checkbox + label:after {
+        position: absolute;
+        display: none;
+        content: ''; }
+
+    .magic-radio[disabled] + label,
+    .magic-checkbox[disabled] + label {
+      cursor: not-allowed;
+      color: #e4e4e4; }
+      .magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
+      .magic-checkbox[disabled] + label:hover,
+      .magic-checkbox[disabled] + label:before,
+      .magic-checkbox[disabled] + label:after {
+        cursor: not-allowed; }
+      .magic-radio[disabled] + label:hover:before,
+      .magic-checkbox[disabled] + label:hover:before {
+        border: 1px solid #e4e4e4;
+        animation-name: none; }
+      .magic-radio[disabled] + label:before,
+      .magic-checkbox[disabled] + label:before {
+        border-color: #e4e4e4; }
+
+    .magic-radio:checked + label:before,
+    .magic-checkbox:checked + label:before {
+      animation-name: none; }
+
+    .magic-radio:checked + label:after,
+    .magic-checkbox:checked + label:after {
+      display: block; }
+
+    .magic-radio + label:before {
+      border-radius: 50%; }
+
+    .magic-radio + label:after {
+      top: 6px;
+      left: 6px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #3e97eb; }
+
+    .magic-radio:checked + label:before {
+      border: 1px solid #3e97eb; }
+
+    .magic-radio:checked[disabled] + label:before {
+      border: 1px solid #c9e2f9; }
+
+    .magic-radio:checked[disabled] + label:after {
+      background: #c9e2f9; }
+
+    .magic-checkbox + label:before {
+      border-radius: 3px; }
+
+    .magic-checkbox + label:after {
+      top: 2px;
+      left: 7px;
+      box-sizing: border-box;
+      width: 6px;
+      height: 12px;
+      transform: rotate(45deg);
+      border-width: 2px;
+      border-style: solid;
+      border-color: #fff;
+      border-top: 0;
+      border-left: 0; }
+
+    .magic-checkbox:checked + label:before {
+      border: #3e97eb;
+      background: #3e97eb; }
+
+    .magic-checkbox:checked[disabled] + label:before {
+      border: #c9e2f9;
+      background: #c9e2f9; }
+  </style>
+
   <style>
     html, body {
       height: 100%;
@@ -296,7 +410,7 @@
 
     body {
       font-family: 'Source Sans Pro', sans-serif;
-      font-size: 16px;
+      font-size: 14px;
       line-height: 24px;
       color: #444;
     }
@@ -332,8 +446,9 @@
     }
 
     .error-name {
-      color: #744d82;
+      color: #db5461;
       font-size: 18px;
+      font-family: menlo, 'sans-serif';
       font-weight: 600;
       margin-bottom: 15px;
     }
@@ -363,15 +478,23 @@
       overflow: auto;
     }
 
-    .frame-list {
+    .frame-stack {
       margin-right: 40px;
       flex: 1;
-      height: 334px;
-      padding: 40px 0;
-      overflow: auto;
+      padding: 10px 0;
       box-sizing: border-box;
     }
 
+    .frames-list {
+      overflow: auto;
+      max-height: 334px;
+    }
+
+    .frames-filter-selector {
+      margin-bottom: 30px;
+      margin-left: 8px;
+    }
+
     .request-details {
       padding: 50px 80px;
     }
@@ -392,7 +515,7 @@
 
     .request-details table td {
       padding: 6px 5px;
-      font-size: 16px;
+      font-size: 14px;
       letter-spacing: 0.4px;
       color: #455275;
       border-bottom: 1px solid #e8e8e8;
@@ -427,18 +550,23 @@
     }
 
     .frame-row.native-frame {
+      display: none;
       opacity: 0.4;
     }
 
+    .frame-row.native-frame.force-show {
+      display: flex;
+    }
+
     .frame-row:after {
       content: "";
-      background: #744d82;
+      background: #db5461;
       position: absolute;
       top: 50%;
       right: 10px;
       transform: translateY(-50%);
-      height: 12px;
-      width: 12px;
+      height: 10px;
+      width: 10px;
       border-radius: 24px;
     }
 
@@ -477,6 +605,10 @@
       border-top: 1px solid #e8e8e8;
       padding: 10px 22px;
     }
+
+    .is-hidden {
+      display: none;
+    }
 </style>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
@@ -492,34 +624,41 @@
       </div>
 
       <div class="error-frames">
-        <div class="frame-preview">
+        <div class="frame-preview is-hidden">
           <div id="frame-file"></div>
           <div id="frame-code"><pre class="line-numbers"><code class="language-js" id="code-drop"></code></pre></div>
           <div id="frame-method"></div>
         </div>
 
-        <div class="frame-list">
-          {{#frames}}
-            {{index}}
-            <div class="frame-row {{classes}}">
-              <div class="frame-row-filepath">
-                {{ file }}:{{ line }}:{{ column }}
-              </div>
-              <div class="frame-row-code">
-                {{ method }}
-              </div>
-              <div class="frame-context"
-                data-start="{{context.start}}"
-                data-line="{{line}}"
-                data-file="{{file}}"
-                data-method="{{method}}"
-                data-line-column="{{line}}:{{column}}"
-                >{{ context.pre }}
+        <div class="frame-stack">
+          <div class="frames-filter-selector">
+            <input type="checkbox" class="magic-checkbox" name="frames-filter" id="frames-filter">
+            <label for="frames-filter">Show all frames</label>
+          </div>
+
+          <div class="frames-list">
+            {{#frames}}
+              {{index}}
+              <div class="frame-row {{classes}}">
+                <div class="frame-row-filepath">
+                  {{ file }}:{{ line }}:{{ column }}
+                </div>
+                <div class="frame-row-code">
+                  {{ method }}
+                </div>
+                <div class="frame-context"
+                  data-start="{{context.start}}"
+                  data-line="{{line}}"
+                  data-file="{{file}}"
+                  data-method="{{method}}"
+                  data-line-column="{{line}}:{{column}}"
+                  >{{ context.pre }}
 {{ context.line }}
 {{ context.post }}
+                </div>
               </div>
-            </div>
-          {{/frames}}
+            {{/frames}}
+          </div>
         </div>
       </div>
     </section>
@@ -585,6 +724,25 @@ Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|
     <script src="http://zeptojs.com/zepto.min.js"></script>
     <script>
       Zepto(function ($) {
+        var nativeFramesLength = $('.frame-row.native-frame').length
+        var allFramesLength = $('.frame-row').length
+
+        function filterFrames () {
+          $('.frame-preview').removeClass('is-hidden')
+          var isSelected = $('#frames-filter').prop('checked')
+          if (isSelected) {
+            $('.frame-row.native-frame').addClass('force-show')
+          } else {
+            $('.frame-row.native-frame').removeClass('force-show')
+          }
+        }
+
+        function displayFirstView () {
+          if (nativeFramesLength !== allFramesLength) {
+            $('.frame-preview').removeClass('is-hidden')
+          }
+        }
+
         function showFrameContext (frame) {
           $frameContext = $(frame).find('.frame-context')
           var $context = $frameContext.html()
@@ -602,17 +760,21 @@ Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|
           $('#code-drop').html($context)
           $('#frame-file').html($file)
           $('#frame-method').html($method + '' + $lineColumn)
-
           Prism.highlightAll()
         }
 
-        showFrameContext($('.frame-row.active')[0])
-
         $('.frame-row').click(function () {
           $('.frame-row').removeClass('active')
           $(this).addClass('active')
           showFrameContext(this)
         })
+
+        $('#frames-filter').click(function () {
+          filterFrames()
+        })
+
+        displayFirstView()
+        showFrameContext($('.frame-row.active')[0])
       })
     </script>
   </section>