diff --git a/README.md b/README.md
index 16bcda30..ad7d19b4 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,8 @@ use Awesomite\ErrorDumper\Handlers\ErrorHandler;
 use Awesomite\ErrorDumper\Listeners\OnExceptionCallable;
 use Awesomite\ErrorDumper\Listeners\OnExceptionDevView;
 use Awesomite\ErrorDumper\Views\ViewFactory;
+use Awesomite\ErrorDumper\Views\ViewHtml;
+use Awesomite\ErrorDumper\Views\ViewCli;
 
 /**
  * Create new error handler.
@@ -56,9 +58,12 @@ $handler = new ErrorHandler(/* optional $mode = null */);
 /**
  * Create and push new error listener,
  * this handler will print programmer-friendly stack trace.
+ * 
+ * You can use ViewCli for displaying error in cli mode.
+ * ViewFactory::create() creates ViewCli or ViewHtml depending on php_sapi_name().
  */
-$devViewListener = new OnExceptionDevView(ViewFactory::create());
-$handler->pushListener($devViewListener);
+$htmlView = new OnExceptionDevView(new ViewHtml());
+$handler->pushListener($htmlView);
 
 /**
  * Create and push new custom error listener.
@@ -112,8 +117,8 @@ To run example in terminal, execute `bin/test.php`.
 
 ## Content Security Policy
 
-This library uses *.js files hosted on `maxcdn.bootstrapcdn.com` and `code.jquery.com`
-(`@see \Awesomite\ErrorDumper\Views\ViewHtml::getResources`).
+This library uses *.js files hosted on `maxcdn.bootstrapcdn.com`, `code.jquery.com`
+and `cdnjs.cloudflare.com` (`@see \Awesomite\ErrorDumper\Views\ViewHtml::getResources`).
 Add those domains to your `Content-Security-Policy` header during display errors.
 
 ## Symfony integration
diff --git a/bin/scripts/exceptionChain.php b/bin/scripts/exceptionChain.php
index 4e8bd388..c60049e2 100644
--- a/bin/scripts/exceptionChain.php
+++ b/bin/scripts/exceptionChain.php
@@ -9,8 +9,11 @@
  * file that was distributed with this source code.
  */
 
+use Awesomite\ErrorDumper\Serializable\ContextVarsFactory;
 use Awesomite\ErrorDumper\Serializable\SerializableException;
 use Awesomite\ErrorDumper\Views\ViewHtml;
+use Awesomite\StackTrace\StackTraceFactory;
+use Awesomite\VarDumper\LightVarDumper;
 
 /**
  * @internal
@@ -56,6 +59,14 @@ public function execute($callable, $arguments)
     $executor->execute(array(new Calculator(), 'divide'), array(5, 0));
 } catch (\Exception $exception) {
     $view = new ViewHtml();
-    $view->display(new SerializableException($exception));
+
+    $varDumper = new LightVarDumper();
+    $varDumper
+        ->setMaxChildren(100)
+        ->setMaxDepth(100);
+    $stackTraceFactory = new StackTraceFactory($varDumper);
+    $contextFactory = new ContextVarsFactory($varDumper);
+
+    $view->display(new SerializableException($exception, 0, false, true, true, $stackTraceFactory, $contextFactory));
     exit;
 }
diff --git a/bin/scripts/symfonyVarDumper.php b/bin/scripts/symfonyVarDumper.php
index 7ee0a67a..98927354 100644
--- a/bin/scripts/symfonyVarDumper.php
+++ b/bin/scripts/symfonyVarDumper.php
@@ -11,6 +11,7 @@
 
 use Awesomite\ErrorDumper\Handlers\ErrorHandler;
 use Awesomite\ErrorDumper\Listeners\OnExceptionCallable;
+use Awesomite\ErrorDumper\Serializable\ContextVarsFactory;
 use Awesomite\ErrorDumper\Serializable\SerializableException;
 use Awesomite\ErrorDumper\Views\ViewHtml;
 use Awesomite\StackTrace\StackTraceFactory;
@@ -20,8 +21,10 @@
 $handler = new ErrorHandler();
 
 $handler->pushListener(new OnExceptionCallable(function ($exception) {
-    $stackTraceFactory = new StackTraceFactory(new SymfonyVarDumper(new CliDumper()));
-    $serializable = new SerializableException($exception, 0, false, true, true, $stackTraceFactory);
+    $varDumper = new SymfonyVarDumper(new CliDumper());
+    $stackTraceFactory = new StackTraceFactory($varDumper);
+    $contextVarsFactory = new ContextVarsFactory($varDumper);
+    $serializable = new SerializableException($exception, 0, false, true, true, $stackTraceFactory, $contextVarsFactory);
 
     $view = new ViewHtml();
     $view->display($serializable);
diff --git a/optimizer/OptimizerCommand.php b/optimizer/OptimizerCommand.php
index 8db1a82a..c8c90056 100644
--- a/optimizer/OptimizerCommand.php
+++ b/optimizer/OptimizerCommand.php
@@ -61,6 +61,8 @@ private function optimize($input)
         $output = $this->removeWhiteSpacesBetween('}}', '{%', $output);
         $output = $this->removeWhiteSpacesBetween('"', '>', $output);
         $output = $this->removeWhiteSpacesBetween('"', '/>', $output);
+        $output = $this->removeWhiteSpacesBetween('}}()', '{%', $output);
+        $output = $this->removeWhiteSpacesBetween('>', '#{{', $output);
 
         // '<script   src' => '<script src'
         $output = \preg_replace_callback(
@@ -71,6 +73,26 @@ function ($match) {
             $output
         );
 
+        $output = \preg_replace_callback(
+            '/(?<start>\<script.*?\>)(?<script>.*?)\<\/script\>/s',
+            function ($match) {
+                if ('' === $match['script']) {
+                    return $match[0];
+                }
+
+                $parts = \array_map(
+                    function ($part) {
+                        return \preg_replace('/\s/', '', $part);
+                    },
+                    \explode('var ', $match['script'])
+                );
+                $script = \implode('var ', $parts);
+
+                return $match['start'] . $script . '</script>';
+            },
+            $output
+        );
+
         // "{{ '   ' }}" => '   '
         $output = \preg_replace_callback(
             '/\{\{\s*\'(?<spaces>\s+)\'\s*\}\}/',
diff --git a/src/Views/ViewHtml.php b/src/Views/ViewHtml.php
index 68312e04..2039e855 100644
--- a/src/Views/ViewHtml.php
+++ b/src/Views/ViewHtml.php
@@ -16,8 +16,8 @@
 
 class ViewHtml implements ViewInterface
 {
-    const TAG_HTML        = '<!-- @ErrorDumper -->';
-    const TAG_UNDER_TITLE = '<!-- @ErrorDumper under title -->';
+    const TAG_HTML       = '<!-- @ErrorDumper -->';
+    const TAG_UNDER_MENU = '<!-- @ErrorDumper under menu -->';
 
     private static $headers
         = array(
@@ -31,7 +31,7 @@ class ViewHtml implements ViewInterface
      */
     private $editor;
 
-    private $contentUnderTitle;
+    private $contentUnderMenu;
 
     private $cacheDirectory;
 
@@ -77,19 +77,19 @@ public function display(SerializableExceptionInterface $exception)
             'resources'         => $this->getResources(),
             'editor'            => $this->editor,
             'hasEditor'         => !\is_null($this->editor),
-            'contentUnderTitle' => $this->contentUnderTitle,
+            'contentUnderMenu'  => $this->contentUnderMenu,
             'appendToBody'      => $this->appendToBody,
         ));
     }
 
     /**
-     * @param object|string $string
+     * @param object|string $stringable
      *
      * @return $this
      */
-    public function setContentUnderTitle($string)
+    public function setContentUnderMenu($stringable)
     {
-        $this->contentUnderTitle = $string;
+        $this->contentUnderMenu = $stringable;
 
         return $this;
     }
@@ -109,13 +109,13 @@ public function setEditor(EditorInterface $editor = null)
     }
 
     /**
-     * @param object|string $string
+     * @param object|string $stringable
      *
      * @return $this
      */
-    public function appendToBody($string)
+    public function appendToBody($stringable)
     {
-        $this->appendToBody[] = $string;
+        $this->appendToBody[] = $stringable;
 
         return $this;
     }
@@ -198,18 +198,22 @@ private function getResources()
         return array(
             'css' => array(
                 array(
-                    'link'      => '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css',
-                    'integrity' => 'sha384-pdapHxIh7EYuwy6K7iE41uXVxGCXY0sAjBzaElYGJUrzwodck3Lx6IE2lA0rFREo',
+                    'link'      => 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
+                    'integrity' => 'sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm',
                 ),
             ),
             'js'  => array(
                 array(
-                    'link'      => '//code.jquery.com/jquery-2.1.4.min.js',
-                    'integrity' => 'sha384-R4/ztc4ZlRqWjqIuvf6RX5yb/v90qNGx6fS48N0tRxiGkqveZETq72KgDVJCp2TC',
+                    'link'      => 'https://code.jquery.com/jquery-3.2.1.slim.min.js',
+                    'integrity' => 'sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN',
                 ),
                 array(
-                    'link'      => '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js',
-                    'integrity' => 'sha384-pPttEvTHTuUJ9L2kCoMnNqCRcaMPMVMsWVO+RLaaaYDmfSP5//dP6eKRusbPcqhZ',
+                    'link'      => 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js',
+                    'integrity' => 'sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q',
+                ),
+                array(
+                    'link'      => 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js',
+                    'integrity' => 'sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl',
                 ),
             ),
         );
diff --git a/templates/exception-context.twig b/templates/exception-context.twig
deleted file mode 100644
index ed09da97..00000000
--- a/templates/exception-context.twig
+++ /dev/null
@@ -1,27 +0,0 @@
-{% if exception.getContext|length > 0 %}
-    <h2>Context</h2>
-
-    <div class="panel panel-default">
-        {% for var in exception.getContext %}
-            {% set showFull = loop.index0 < 10 %}
-            {% set varId = 'context-variable-' ~ loop.index %}
-
-            <div class="panel-heading">
-                <a
-                        data-toggle="collapse"
-                        data-target="#{{ varId }}"
-                        class="var-header {{ showFull ? '' : 'collapsed' }}">
-                    {{ var.getName() }}
-                </a>
-            </div>
-            <div
-                    id="{{ varId }}"
-                    class="panel-collapse collapse {{ showFull ? 'in' }}"
-            >
-                <div class="panel-body">
-                    <pre class="max-height">{{ var.dumpAsString() }}</pre>
-                </div>
-            </div>
-        {% endfor %}
-    </div>
-{% endif %}
diff --git a/templates/exception-context_vars.twig b/templates/exception-context_vars.twig
new file mode 100644
index 00000000..ad8ef23f
--- /dev/null
+++ b/templates/exception-context_vars.twig
@@ -0,0 +1,19 @@
+ <h2>Context variables</h2>
+
+<div>
+    {% for var in exception.getContext %}
+        {% set showFull = loop.index0 < 10 %}
+        {% set varId = 'context-variable-' ~ loop.index %}
+
+        <div class="card">
+            <div class="card-header">
+                <a data-toggle="collapse" class="var-header" data-target="#{{ varId }}">{{ var.getName }}</a>
+            </div>
+            <div id="{{ varId }}" class="collapse max-height{{ showFull ? ' show' }}">
+                <div class="card-body">
+                    <pre>{{ var.dumpAsString }}</pre>
+                </div>
+            </div>
+        </div>
+    {% endfor %}
+</div>
diff --git a/templates/exception-css.twig b/templates/exception-css.twig
index f9b9f4ba..425739d5 100644
--- a/templates/exception-css.twig
+++ b/templates/exception-css.twig
@@ -11,12 +11,22 @@
     {% endfor %}
 {% endautoescape %}
 <style type="text/css">
-    .error-line
+    .collapse
+    {
+        filter: rotateZ(0);
+    }
+    body.night-mode
+    {
+        filter: invert(85%);
+        background-color: #262626;
+    }
+    pre > pre
+    {
+        padding: 0;
+    }
+    a
     {
-        font-weight: bold;
-        color: red;
-        font-style: italic;
-        background-color: #fefefe;
+        cursor: pointer;
     }
     a.var-header
     {
@@ -24,14 +34,34 @@
     }
     a.var-header:after
     {
-        font-family: 'Glyphicons Halflings';
-        content: "\e114";
+        content: "\21E9";
         float: right;
         color: grey;
     }
     a.var-header.collapsed:after
     {
-        content:"\e080";
+        content:"\21E8";
+    }
+    pre, pre *
+    {
+        word-wrap: normal !important;
+    }
+    pre > pre
+    {
+        padding: 0;
+    }
+    pre
+    {
+        margin-bottom: 0;
+    }
+    pre:last-child
+    {
+        margin-bottom: 0;
+    }
+    .max-height
+    {
+        max-height: 400px;
+        overflow: auto;
     }
     .code-box
     {
@@ -43,56 +73,70 @@
         font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
         font-size: 13px;
     }
-    .code-box:not(.rounded)
-    {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
     .code-box > span
     {
         white-space: pre;
         display: block;
     }
-    .max-height
+    .code-box:not(.rounded), .top-border-0
     {
-        max-height: 400px;
-        overflow: auto;
+        border-top: 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
     }
-    .panel-group:last-child
+    .error-line
     {
-        margin-bottom: 0;
+         font-weight: bold;
+         color: red;
+         font-style: italic;
+         background-color: #fefefe;
     }
-    a
-    {
-        cursor: pointer;
+    .short-stack-trace {
+        font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+        margin: 0;
+        padding: 0;
     }
-    pre, pre *
-    {
-        word-wrap: normal !important;
+    .short-stack-trace > li {
+        list-style: none;
     }
-    pre > pre
-    {
-        padding: 0;
+    h2 {
+        margin-bottom: .3em;
+        margin-top: .6em;
     }
-    pre
-    {
-        margin-bottom: 0;
+    .view-tab > div {
+        margin-bottom: 1em;
     }
-    pre:last-child
-    {
+    p.code-box {
         margin-bottom: 0;
     }
-    .nav-tabs
-    {
-        border-bottom: 0;
+    :target {
+        -webkit-animation: target-fade 1s;
+        -moz-animation: target-fade 1s;
+        -o-animation: target-fade 1s;
+        animation: target-fade 1s;
     }
-    .panel-collapse > .panel-body
-    {
-        padding: 0;
+    @-webkit-keyframes target-fade {
+        from { background-color: #888; }
+        to { background-color: transparent; }
+    }
+
+    @-moz-keyframes target-fade {
+        from { background-color: #888; }
+        to { background-color: transparent; }
+    }
+
+    @-o-keyframes target-fade {
+        from { background-color: #888; }
+        to { background-color: transparent; }
+    }
+
+    @keyframes target-fade {
+        from { background-color: #888; } /* [1] */
+        to { background-color: transparent; }
     }
-    .panel-collapse pre
+    h1
     {
-        border: 0;
-        background: #fff;
+        font-size: 130%;
+        margin: 0;
     }
 </style>
diff --git a/templates/exception-js.twig b/templates/exception-js.twig
new file mode 100644
index 00000000..743bb8f2
--- /dev/null
+++ b/templates/exception-js.twig
@@ -0,0 +1,54 @@
+{% autoescape 'html_attr' %}
+    {% for js in resources.js %}
+        <script
+                type="text/javascript"
+                src="{{ js.link }}"
+                integrity="{{ js.integrity }}"
+                crossorigin="anonymous"
+        ></script>
+    {% endfor %}
+{% endautoescape %}
+
+<script type="text/javascript">
+    (function ($, w) {
+        if (!w.localStorage) {
+            return;
+        }
+
+        $(function () {
+            var $btn = $('#btn-night-mode');
+            var $body = $('body');
+            var SETTINGS_NAME = '__awesomite_error_dumper_night_mode_enabled';
+            var NIGHT_MODE_CLASS = 'night-mode';
+
+            var isEnabledNightMode = function () {
+                if (null === w.localStorage.getItem(SETTINGS_NAME)) {
+                    return false;
+                }
+
+                return '1' === w.localStorage.getItem(SETTINGS_NAME);
+            };
+
+            var updateState = function () {
+                isEnabledNightMode()
+                    ? $body.addClass(NIGHT_MODE_CLASS)
+                    : $body.removeClass(NIGHT_MODE_CLASS);
+            };
+
+            var toggleSettings = function () {
+                w.localStorage.setItem(
+                    SETTINGS_NAME,
+                    isEnabledNightMode() ? '0' : '1'
+                );
+            };
+
+            $btn.click(function (e) {
+                e.preventDefault();
+                toggleSettings();
+                updateState();
+            });
+
+            updateState();
+        });
+    })(jQuery, window);
+</script>
diff --git a/templates/exception-menu.twig b/templates/exception-menu.twig
new file mode 100644
index 00000000..813d0cbb
--- /dev/null
+++ b/templates/exception-menu.twig
@@ -0,0 +1,19 @@
+{% import 'macros.twig' as functions %}
+
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <h1 class="navbar-brand">Error &#9888;</h1>
+
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="nav navbar-nav">
+            {{ functions.exceptionChainPills(exception) }}
+            {% if hasContext %}
+                <li class="nav-item"><a class="nav-link" href="#main-context" data-toggle="tab">Context variables</a></li>
+            {% endif %}
+            <li class="pull-right nav-item"><a href="#" id="btn-night-mode" class="nav-link">Night mode &#9790;</a></li>
+        </ul>
+    </div>
+</nav>
diff --git a/templates/exception-step-body-arguments.twig b/templates/exception-step-body-arguments.twig
index ae83834b..1e8a0795 100644
--- a/templates/exception-step-body-arguments.twig
+++ b/templates/exception-step-body-arguments.twig
@@ -1,12 +1,12 @@
 {% set unknownCounter = 0 %}
 {% set argIndex = -1 %}
-<div class="tab-pane fade {{ argumentsTab ? 'active in' }}" id="params-{{ stepKey }}">
-    <div class="panel-group">
+<div class="tab-pane fade {{ argumentsTab ? 'show active' }}" id="params-{{ stepKey }}">
+    <div>
         {% for keyParam, param in arguments %}
             {% set argIndex = argIndex + 1 %}
             {% set showFull = argIndex < 5 %}
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="card top-border-0">
+                <div class="card-header">
                     {% if param.hasDeclaration() %}
                         {% set declaration = param.getDeclaration() %}
 
@@ -46,9 +46,9 @@
                 </div>
                 <div
                         id="param-{{ stepKey }}-{{ keyParam }}"
-                        class="panel-collapse collapse {{ showFull ? 'in' }}"
+                        class="panel-collapse collapse {{ showFull ? 'show active' }}"
                 >
-                    <div class="panel-body">
+                    <div class="card-body">
                         {% if param.hasValue() %}
                             <pre class="max-height">{{ param.getValue().dumpAsString() }}</pre>
                         {% else %}
diff --git a/templates/exception-step-body-source_code.twig b/templates/exception-step-body-source_code.twig
index 132e2eec..329c97e8 100644
--- a/templates/exception-step-body-source_code.twig
+++ b/templates/exception-step-body-source_code.twig
@@ -1,4 +1,4 @@
-<div class="tab-pane fade {{ argumentsTab ? '' : 'active in' }}" id="source-{{ stepKey }}">
+<div class="tab-pane fade {{ not argumentsTab ? 'show active' }}" id="source-{{ stepKey }}">
     {% if step.hasPlaceInCode() %}
         {% set placeInCode = step.getPlaceInCode() %}
         {% set lines = placeInCode.getAdjacentCode(15) %}
@@ -20,6 +20,6 @@
             {% endfor %}
         </div>
     {% else %}
-        <p class="code-box max-height">Source code does not exist for this step.</p>
+        <p class="code-box max-height {{ arguments|length == 0 ? 'rounded' }}">Source code does not exist for this step.</p>
     {% endif %}
 </div>
diff --git a/templates/exception-step-body.twig b/templates/exception-step-body.twig
index 19bb7585..38128fc6 100644
--- a/templates/exception-step-body.twig
+++ b/templates/exception-step-body.twig
@@ -1,18 +1,16 @@
 {% set arguments = step.getArguments() %}
 
-<div class="panel-body">
+<div class="card-body">
     {% set argumentsTab = arguments|length > 0 and not step.hasPlaceInCode() %}
     {% if arguments|length > 0 %}
-        <div class="padding-menu">
-            <ul class="nav nav-tabs" >
-                <li class="{{ argumentsTab ? '' : 'active' }}">
-                    <a href="#source-{{ stepKey }}" data-toggle="tab">Source</a>
-                </li>
-                <li class="{{ argumentsTab ? 'active' }}">
-                    <a href="#params-{{ stepKey }}" data-toggle="tab">Arguments</a>
-                </li>
-            </ul>
-        </div>
+        <ul class="nav nav-tabs" >
+            <li class="nav-item">
+                <a class="nav-link{{ argumentsTab ? '' : ' active' }}" href="#source-{{ stepKey }}" data-toggle="tab">Source</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link{{ argumentsTab ? ' active' }}" href="#params-{{ stepKey }}" data-toggle="tab">Arguments</a>
+            </li>
+        </ul>
     {% endif %}
     <div>
         <div class="tab-content">
diff --git a/templates/exception-step.twig b/templates/exception-step.twig
index 0982fbee..4f9720d8 100644
--- a/templates/exception-step.twig
+++ b/templates/exception-step.twig
@@ -1,5 +1,5 @@
-<div class="panel panel-default">
-    <div class="panel-heading">
+<div class="card" id="step-{{ stepKey }}">
+    <div class="card-header">
         {% if step.hasPlaceInCode() %}
 
             {% set placeInCode = step.getPlaceInCode() %}
diff --git a/templates/exception.twig b/templates/exception.twig
index e9934d07..97f5914b 100644
--- a/templates/exception.twig
+++ b/templates/exception.twig
@@ -9,33 +9,25 @@
 </head>
 <body>
 <div class="container">
-    <h1>Error!</h1>
+    {{ constant('Awesomite\\ErrorDumper\\Views\\ViewHtml::TAG_UNDER_MENU')|raw }}
 
-    {{ constant('Awesomite\\ErrorDumper\\Views\\ViewHtml::TAG_UNDER_TITLE')|raw }}
-
-    {{ contentUnderTitle|raw }}
+    {{ contentUnderMenu|raw }}
 
     {% set hasContext = exception.getContext|length > 0 %}
 
-    <div class="padding-menu">
-        <ul class="nav nav-pills" data-tabs="main-tabs">
-            {{ functions.exceptionChainPills(exception) }}
-            {% if hasContext %}
-                <li><a href="#main-context" data-toggle="tab">Context</a></li>
-            {% endif %}
-        </ul>
-        <div class="tab-content">
-            {{ functions.exceptionChain(exception, editor, hasEditor) }}
-            {% if hasContext %}
-                <div class="tab-pane fade" id="main-context">
-                    {% include 'exception-context.twig' %}
-                </div>
-            {% endif %}
-        </div>
+    {% include 'exception-menu.twig' %}
+
+    <div class="tab-content">
+        {{ functions.exceptionChain(exception, editor, hasEditor) }}
+        {% if hasContext %}
+            <div class="tab-pane fade view-tab" id="main-context">
+                {% include 'exception-context_vars.twig' %}
+            </div>
+        {% endif %}
     </div>
 
     <footer>
-        <p class="pull-right small">
+        <p class="text-right small">
             Generated by <a href="https://github.com/awesomite/error-dumper" target="_blank" rel="noopener noreferrer">ErrorDumper</a>
             &bull; PHP {{ constant('PHP_VERSION') }}
             &bull; {{ memoryUsage() }}
@@ -43,21 +35,13 @@
     </footer>
 </div>
 
-{% autoescape 'html_attr' %}
-    {% for js in resources.js %}
-        <script
-                type="text/javascript"
-                src="{{ js.link }}"
-                integrity="{{ js.integrity }}"
-                crossorigin="anonymous"
-        ></script>
-    {% endfor %}
-{% endautoescape %}
-
 {{ constant('Awesomite\\ErrorDumper\\Views\\ViewHtml::TAG_HTML')|raw }}
 
 {% for part in appendToBody %}
     {{ part|raw }}
 {% endfor %}
+
+{% include 'exception-js.twig' %}
+
 </body>
 </html>
diff --git a/templates/macros.twig b/templates/macros.twig
index dfa5b87a..79e57b12 100644
--- a/templates/macros.twig
+++ b/templates/macros.twig
@@ -1,10 +1,11 @@
 {% macro exceptionChainPills(exception, _no) %}
     {% import _self as functions %}
+
     {% set no = _no|default(1) %}
 
-    <li {{ (1 == no ? 'class="active"')|raw }}>
-        <a href="#main-exception-{{ no }}" data-toggle="tab">
-            {{ exception.getOriginalClass() }}
+    <li class="nav-item">
+        <a href="#main-exception-{{ no }}" class="nav-link{{ (1 == no ? ' active')|raw }}" data-toggle="tab">
+            {{ exception.getOriginalClass()|split('\\')|slice(-1)[0] }}
             {% if no > 1 or exception.hasPrevious() %}
                 {{ ' ' }}#{{ no }}
             {% endif %}
@@ -20,13 +21,53 @@
     <h2>Exception</h2>
     {% set class = exception.getOriginalClass() %}
     {% set message = exception.getMessage() %}
-    <pre><strong>{{ class }} (code {{ exception.getCode() }})</strong>{{ message != '' ? ' ' ~ message }}</pre>
+
+    <div class="card">
+        <div class="card-header">
+            <strong>{{ class }} (code {{ exception.getCode() }})</strong>{{ message != '' ? ' ' ~ message }}
+        </div>
+        <div class="card-body">
+            <ul class="short-stack-trace">
+                {% set ds = constant('DIRECTORY_SEPARATOR') %}
+                {% for step in exception.getStackTrace() %}
+
+                    {% set stepIndex = loop.index0 %}
+                    {% set stepKey = 'e' ~ no ~ '-s' ~ stepIndex %}
+
+                    <li>
+                        <a href="#step-{{ stepKey }}">
+                            #{{ loop.index0 }}
+
+                            {% if step.hasCalledFunction %}
+                                {% set calledFunction = step.getCalledFunction() %}
+                                {% set isDeprecated = calledFunction.isDeprecated() %}
+                                {% if isDeprecated %}<s>{% endif %}
+                                {{ ' ' }}{{ calledFunction.getName() }}()
+                                {% if isDeprecated %}</s>{% endif %}
+                            {% endif %}
+
+                            {% if step.hasPlaceInCode %}
+
+                                {% if step.hasCalledFunction %} at{% endif %}
+
+                                {% set placeInCode = step.getPlaceInCode() %}
+                                {% set fileName = placeInCode.getFileName()|split(ds)|slice(-3)|join(ds) %}
+                                {% if fileName != placeInCode.getFileName() %}
+                                    {% set fileName = '(...)' ~ ds ~ fileName %}
+                                {% endif %}
+                                {{ ' ' }}{{ fileName }}:{{ placeInCode.getLineNumber() }}
+                            {% endif %}
+                        </a>
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
 
     <h2>Stack trace</h2>
 
-    {% set stepIndex = -1 %}
     {% for step in exception.getStackTrace() %}
-        {% set stepIndex = stepIndex + 1 %}
+        {% set stepIndex = loop.index0 %}
         {% set stepKey = 'e' ~ no ~ '-s' ~ stepIndex %}
         {% include 'exception-step.twig' %}
     {% endfor %}
@@ -34,9 +75,10 @@
 
 {% macro exceptionChain(exception, editor, hasEditor, _no) %}
     {% import _self as functions %}
+
     {% set no = _no|default(1) %}
 
-    <div class="tab-pane fade{{ 1 == no ? ' active in' }}" id="main-exception-{{ no }}">
+    <div class="tab-pane fade{{ 1 == no ? ' show active' }} view-tab" id="main-exception-{{ no }}">
         {{ functions.exception(exception, editor, hasEditor, no) }}
     </div>
 
diff --git a/templates_dist/exception-context.twig b/templates_dist/exception-context.twig
deleted file mode 100644
index 6c42b6f4..00000000
--- a/templates_dist/exception-context.twig
+++ /dev/null
@@ -1 +0,0 @@
-{% if exception.getContext|length > 0 %}<h2>Context</h2><div class="panel panel-default">{% for var in exception.getContext %}{% set showFull = loop.index0 < 10 %}{% set varId = 'context-variable-' ~ loop.index %}<div class="panel-heading"><a data-toggle="collapse" data-target="#{{ varId }}" class="var-header {{ showFull ? '' : 'collapsed' }}">{{ var.getName() }}</a></div><div id="{{ varId }}" class="panel-collapse collapse {{ showFull ? 'in' }}"><div class="panel-body"><pre class="max-height">{{ var.dumpAsString() }}</pre></div></div>{% endfor %}</div>{% endif %}
diff --git a/templates_dist/exception-context_vars.twig b/templates_dist/exception-context_vars.twig
new file mode 100644
index 00000000..194d16e8
--- /dev/null
+++ b/templates_dist/exception-context_vars.twig
@@ -0,0 +1 @@
+<h2>Context variables</h2><div>{% for var in exception.getContext %}{% set showFull = loop.index0 < 10 %}{% set varId = 'context-variable-' ~ loop.index %}<div class="card"><div class="card-header"><a data-toggle="collapse" class="var-header" data-target="#{{ varId }}">{{ var.getName }}</a></div><div id="{{ varId }}" class="collapse max-height{{ showFull ? ' show' }}"><div class="card-body"><pre>{{ var.dumpAsString }}</pre></div></div></div>{% endfor %}</div>
diff --git a/templates_dist/exception-css.twig b/templates_dist/exception-css.twig
index d6a95ddf..15bfc39b 100644
--- a/templates_dist/exception-css.twig
+++ b/templates_dist/exception-css.twig
@@ -1 +1 @@
-<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAVFFOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEAABEAAAABEAAAARAAAAEQAAABEAAAARAAAAEQAAABEAAAARAAABEAAAAAEQABEAAAAAABEAEQAAAAAAEQABEAAAAAEQAAARAAAAEQAAABEAAAARAAAAEQAAABEAAAARAAAAEQAAAAEQAAEQAAAAAAAAAAAAD//wAA888AAOfnAADn5wAA5+cAAOfnAADP8wAAn/kAAJ/5AADP8wAA5+cAAOfnAADn5wAA5+cAAPPPAAD//wAA" rel="icon" type="image/x-icon"/>{% autoescape 'html_attr' %}{% for css in resources.css %}<link rel="stylesheet" type="text/css" href="{{ css.link }}" integrity="{{ css.integrity }}" crossorigin="anonymous"/>{% endfor %}{% endautoescape %}<style type="text/css"> .error-line { font-weight: bold; color: red; font-style: italic; background-color: #fefefe; } a.var-header { display: block; } a.var-header:after { font-family: 'Glyphicons Halflings'; content: "\e114"; float: right; color: grey; } a.var-header.collapsed:after { content:"\e080"; } .code-box { overflow: auto; background-color: #f5f5f5; border: 1px solid #ccc; padding: 10px; border-radius: 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; } .code-box:not(.rounded) { border-top-left-radius: 0; border-top-right-radius: 0; } .code-box > span { white-space: pre; display: block; } .max-height { max-height: 400px; overflow: auto; } .panel-group:last-child { margin-bottom: 0; } a { cursor: pointer; } pre, pre * { word-wrap: normal !important; } pre > pre { padding: 0; } pre { margin-bottom: 0; } pre:last-child { margin-bottom: 0; } .nav-tabs { border-bottom: 0; } .panel-collapse > .panel-body { padding: 0; } .panel-collapse pre { border: 0; background: #fff; }</style>
+<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAVFFOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEAABEAAAABEAAAARAAAAEQAAABEAAAARAAAAEQAAABEAAAARAAABEAAAAAEQABEAAAAAABEAEQAAAAAAEQABEAAAAAEQAAARAAAAEQAAABEAAAARAAAAEQAAABEAAAARAAAAEQAAAAEQAAEQAAAAAAAAAAAAD//wAA888AAOfnAADn5wAA5+cAAOfnAADP8wAAn/kAAJ/5AADP8wAA5+cAAOfnAADn5wAA5+cAAPPPAAD//wAA" rel="icon" type="image/x-icon"/>{% autoescape 'html_attr' %}{% for css in resources.css %}<link rel="stylesheet" type="text/css" href="{{ css.link }}" integrity="{{ css.integrity }}" crossorigin="anonymous"/>{% endfor %}{% endautoescape %}<style type="text/css"> .collapse { filter: rotateZ(0); } body.night-mode { filter: invert(85%); background-color: #262626; } pre > pre { padding: 0; } a { cursor: pointer; } a.var-header { display: block; } a.var-header:after { content: "\21E9"; float: right; color: grey; } a.var-header.collapsed:after { content:"\21E8"; } pre, pre * { word-wrap: normal !important; } pre > pre { padding: 0; } pre { margin-bottom: 0; } pre:last-child { margin-bottom: 0; } .max-height { max-height: 400px; overflow: auto; } .code-box { overflow: auto; background-color: #f5f5f5; border: 1px solid #ccc; padding: 10px; border-radius: 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; } .code-box > span { white-space: pre; display: block; } .code-box:not(.rounded), .top-border-0 { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .error-line { font-weight: bold; color: red; font-style: italic; background-color: #fefefe; } .short-stack-trace { font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; margin: 0; padding: 0; } .short-stack-trace > li { list-style: none; } h2 { margin-bottom: .3em; margin-top: .6em; } .view-tab > div { margin-bottom: 1em; } p.code-box { margin-bottom: 0; } :target { -webkit-animation: target-fade 1s; -moz-animation: target-fade 1s; -o-animation: target-fade 1s; animation: target-fade 1s; } @-webkit-keyframes target-fade { from { background-color: #888; } to { background-color: transparent; } } @-moz-keyframes target-fade { from { background-color: #888; } to { background-color: transparent; } } @-o-keyframes target-fade { from { background-color: #888; } to { background-color: transparent; } } @keyframes target-fade { from { background-color: #888; } /* [1] */ to { background-color: transparent; } } h1 { font-size: 130%; margin: 0; }</style>
diff --git a/templates_dist/exception-js.twig b/templates_dist/exception-js.twig
new file mode 100644
index 00000000..a0d6efe5
--- /dev/null
+++ b/templates_dist/exception-js.twig
@@ -0,0 +1 @@
+{% autoescape 'html_attr' %}{% for js in resources.js %}<script type="text/javascript" src="{{ js.link }}" integrity="{{ js.integrity }}" crossorigin="anonymous"></script>{% endfor %}{% endautoescape %}<script type="text/javascript">(function($,w){if(!w.localStorage){return;}$(function(){var $btn=$('#btn-night-mode');var $body=$('body');var SETTINGS_NAME='__awesomite_error_dumper_night_mode_enabled';var NIGHT_MODE_CLASS='night-mode';var isEnabledNightMode=function(){if(null===w.localStorage.getItem(SETTINGS_NAME)){returnfalse;}return'1'===w.localStorage.getItem(SETTINGS_NAME);};var updateState=function(){isEnabledNightMode()?$body.addClass(NIGHT_MODE_CLASS):$body.removeClass(NIGHT_MODE_CLASS);};var toggleSettings=function(){w.localStorage.setItem(SETTINGS_NAME,isEnabledNightMode()?'0':'1');};$btn.click(function(e){e.preventDefault();toggleSettings();updateState();});updateState();});})(jQuery,window);</script>
diff --git a/templates_dist/exception-menu.twig b/templates_dist/exception-menu.twig
new file mode 100644
index 00000000..1f737d7b
--- /dev/null
+++ b/templates_dist/exception-menu.twig
@@ -0,0 +1 @@
+{% import 'macros.twig' as functions %}<nav class="navbar navbar-expand-lg navbar-light bg-light"><h1 class="navbar-brand">Error &#9888;</h1><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="nav navbar-nav">{{ functions.exceptionChainPills(exception) }}{% if hasContext %}<li class="nav-item"><a class="nav-link" href="#main-context" data-toggle="tab">Context variables</a></li>{% endif %}<li class="pull-right nav-item"><a href="#" id="btn-night-mode" class="nav-link">Night mode &#9790;</a></li></ul></div></nav>
diff --git a/templates_dist/exception-step-body-arguments.twig b/templates_dist/exception-step-body-arguments.twig
index 78903a03..8bf54319 100644
--- a/templates_dist/exception-step-body-arguments.twig
+++ b/templates_dist/exception-step-body-arguments.twig
@@ -1 +1 @@
-{% set unknownCounter = 0 %}{% set argIndex = -1 %}<div class="tab-pane fade {{ argumentsTab ? 'active in' }}" id="params-{{ stepKey }}"><div class="panel-group">{% for keyParam, param in arguments %}{% set argIndex = argIndex + 1 %}{% set showFull = argIndex < 5 %}<div class="panel panel-default"><div class="panel-heading">{% if param.hasDeclaration() %}{% set declaration = param.getDeclaration() %}{% set prefixName = '' %}{% if declaration.isPassedByReference() %}{% set prefixName = '&' %}{% endif %}{% if declaration.isVariadic() %}{% set prefixName = '...' %}{% endif %}{% if declaration.hasType() %}{% set prefixName = declaration.getType() ~ ': ' ~ prefixName %}{% endif %}{% set argumentName = prefixName ~ '$' ~ declaration.getName() %}{% else %}{% set argumentName = 'unknown' ~ unknownCounter %}{% set unknownCounter = unknownCounter + 1 %}{% endif %}<a data-toggle="collapse" data-target="#param-{{ stepKey }}-{{ keyParam }}" class="var-header {{ showFull ? '' : 'collapsed' }}">{{ argumentName }}{% if param.hasDeclaration() %}{% set declaration = param.getDeclaration() %}{% if declaration.hasDefaultValue() %}{% if declaration.hasDefaultValueConstantName() %} = <strong>{{ declaration.getDefaultValueConstantName() }}</strong>{% elseif declaration.hasDefaultValue() %} = <strong>{{ exportDeclaredValue(declaration.getDefaultValue()) }}</strong>{% endif %}{% endif %}{% endif %}</a></div><div id="param-{{ stepKey }}-{{ keyParam }}" class="panel-collapse collapse {{ showFull ? 'in' }}"><div class="panel-body">{% if param.hasValue() %}<pre class="max-height">{{ param.getValue().dumpAsString() }}</pre>{% else %}<pre>undefined</pre>{% endif %}</div></div></div>{% endfor %}</div></div>
+{% set unknownCounter = 0 %}{% set argIndex = -1 %}<div class="tab-pane fade {{ argumentsTab ? 'show active' }}" id="params-{{ stepKey }}"><div>{% for keyParam, param in arguments %}{% set argIndex = argIndex + 1 %}{% set showFull = argIndex < 5 %}<div class="card top-border-0"><div class="card-header">{% if param.hasDeclaration() %}{% set declaration = param.getDeclaration() %}{% set prefixName = '' %}{% if declaration.isPassedByReference() %}{% set prefixName = '&' %}{% endif %}{% if declaration.isVariadic() %}{% set prefixName = '...' %}{% endif %}{% if declaration.hasType() %}{% set prefixName = declaration.getType() ~ ': ' ~ prefixName %}{% endif %}{% set argumentName = prefixName ~ '$' ~ declaration.getName() %}{% else %}{% set argumentName = 'unknown' ~ unknownCounter %}{% set unknownCounter = unknownCounter + 1 %}{% endif %}<a data-toggle="collapse" data-target="#param-{{ stepKey }}-{{ keyParam }}" class="var-header {{ showFull ? '' : 'collapsed' }}">{{ argumentName }}{% if param.hasDeclaration() %}{% set declaration = param.getDeclaration() %}{% if declaration.hasDefaultValue() %}{% if declaration.hasDefaultValueConstantName() %} = <strong>{{ declaration.getDefaultValueConstantName() }}</strong>{% elseif declaration.hasDefaultValue() %} = <strong>{{ exportDeclaredValue(declaration.getDefaultValue()) }}</strong>{% endif %}{% endif %}{% endif %}</a></div><div id="param-{{ stepKey }}-{{ keyParam }}" class="panel-collapse collapse {{ showFull ? 'show active' }}"><div class="card-body">{% if param.hasValue() %}<pre class="max-height">{{ param.getValue().dumpAsString() }}</pre>{% else %}<pre>undefined</pre>{% endif %}</div></div></div>{% endfor %}</div></div>
diff --git a/templates_dist/exception-step-body-source_code.twig b/templates_dist/exception-step-body-source_code.twig
index 156c1057..2d60470c 100644
--- a/templates_dist/exception-step-body-source_code.twig
+++ b/templates_dist/exception-step-body-source_code.twig
@@ -1 +1 @@
-<div class="tab-pane fade {{ argumentsTab ? '' : 'active in' }}" id="source-{{ stepKey }}">{% if step.hasPlaceInCode() %}{% set placeInCode = step.getPlaceInCode() %}{% set lines = placeInCode.getAdjacentCode(15) %}<div class="code-box max-height {{ arguments|length == 0 ? 'rounded' }}">{% for line in lines %}{% set lineNumber = line.getLineNumber()|strpad(lines.getLastLineIndex()|length) %}{% set lineClasses = line.getLineNumber() == placeInCode.getLineNumber() ? 'error-line' %}{% set lineToDisplay = line|replace({"\t": '    '}) %}{% if hasEditor %}{% set tmpUrl = editor.getLinkToFile(line.getFileName(), line.getLineNumber()) %}{% autoescape false %}<span{{ lineClasses ? ' class="' ~ lineClasses ~ '"' }}><a href="{{ tmpUrl|e('html_attr') }}">{{ lineNumber|e }}</a>    {{ lineToDisplay|e }}</span>{% endautoescape %}{% else %}<span{{ (lineClasses ? ' class="' ~ lineClasses ~ '"')|raw }}>{{ lineNumber }}    {{ lineToDisplay }}</span>{% endif %}{% endfor %}</div>{% else %}<p class="code-box max-height">Source code does not exist for this step.</p>{% endif %}</div>
+<div class="tab-pane fade {{ not argumentsTab ? 'show active' }}" id="source-{{ stepKey }}">{% if step.hasPlaceInCode() %}{% set placeInCode = step.getPlaceInCode() %}{% set lines = placeInCode.getAdjacentCode(15) %}<div class="code-box max-height {{ arguments|length == 0 ? 'rounded' }}">{% for line in lines %}{% set lineNumber = line.getLineNumber()|strpad(lines.getLastLineIndex()|length) %}{% set lineClasses = line.getLineNumber() == placeInCode.getLineNumber() ? 'error-line' %}{% set lineToDisplay = line|replace({"\t": '    '}) %}{% if hasEditor %}{% set tmpUrl = editor.getLinkToFile(line.getFileName(), line.getLineNumber()) %}{% autoescape false %}<span{{ lineClasses ? ' class="' ~ lineClasses ~ '"' }}><a href="{{ tmpUrl|e('html_attr') }}">{{ lineNumber|e }}</a>    {{ lineToDisplay|e }}</span>{% endautoescape %}{% else %}<span{{ (lineClasses ? ' class="' ~ lineClasses ~ '"')|raw }}>{{ lineNumber }}    {{ lineToDisplay }}</span>{% endif %}{% endfor %}</div>{% else %}<p class="code-box max-height {{ arguments|length == 0 ? 'rounded' }}">Source code does not exist for this step.</p>{% endif %}</div>
diff --git a/templates_dist/exception-step-body.twig b/templates_dist/exception-step-body.twig
index 59ed3d81..57880d3b 100644
--- a/templates_dist/exception-step-body.twig
+++ b/templates_dist/exception-step-body.twig
@@ -1 +1 @@
-{% set arguments = step.getArguments() %}<div class="panel-body">{% set argumentsTab = arguments|length > 0 and not step.hasPlaceInCode() %}{% if arguments|length > 0 %}<div class="padding-menu"><ul class="nav nav-tabs"><li class="{{ argumentsTab ? '' : 'active' }}"><a href="#source-{{ stepKey }}" data-toggle="tab">Source</a></li><li class="{{ argumentsTab ? 'active' }}"><a href="#params-{{ stepKey }}" data-toggle="tab">Arguments</a></li></ul></div>{% endif %}<div><div class="tab-content">{% include 'exception-step-body-source_code.twig' %}{% if arguments|length > 0 %}{% include 'exception-step-body-arguments.twig' %}{% endif %}</div></div></div>
+{% set arguments = step.getArguments() %}<div class="card-body">{% set argumentsTab = arguments|length > 0 and not step.hasPlaceInCode() %}{% if arguments|length > 0 %}<ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link{{ argumentsTab ? '' : ' active' }}" href="#source-{{ stepKey }}" data-toggle="tab">Source</a></li><li class="nav-item"><a class="nav-link{{ argumentsTab ? ' active' }}" href="#params-{{ stepKey }}" data-toggle="tab">Arguments</a></li></ul>{% endif %}<div><div class="tab-content">{% include 'exception-step-body-source_code.twig' %}{% if arguments|length > 0 %}{% include 'exception-step-body-arguments.twig' %}{% endif %}</div></div></div>
diff --git a/templates_dist/exception-step.twig b/templates_dist/exception-step.twig
index e379e4c8..89bbf3a2 100644
--- a/templates_dist/exception-step.twig
+++ b/templates_dist/exception-step.twig
@@ -1 +1 @@
-<div class="panel panel-default"><div class="panel-heading">{% if step.hasPlaceInCode() %}{% set placeInCode = step.getPlaceInCode() %}{% if hasEditor %}{% set tmpUrl = editor.getLinkToFile(placeInCode.getFileName(), placeInCode.getLineNumber()) %}{% autoescape false %}<a href="{{ tmpUrl|e('html_attr') }}">{% endautoescape %}{% endif %}{% set ds = constant('DIRECTORY_SEPARATOR') %}{% set fileName = placeInCode.getFileName()|split(ds)|slice(-3)|join(ds) %}{% if fileName != placeInCode.getFileName() %}{% set fileName = '(...)' ~ ds ~ fileName %}{% endif %}{{ fileName }}:{{ placeInCode.getLineNumber() }}{% if hasEditor %}</a>{% endif %}{% endif %}{% if step.hasCalledFunction() %}{% set calledFunction = step.getCalledFunction() %}{% set isDeprecated = calledFunction.isDeprecated() %}{% if isDeprecated %}<s>{% endif %} <strong>{{ calledFunction.getName() }}()</strong>{% if isDeprecated %}</s>{% endif %}{% endif %}</div>{% include'exception-step-body.twig' %}</div>
+<div class="card" id="step-{{ stepKey }}"><div class="card-header">{% if step.hasPlaceInCode() %}{% set placeInCode = step.getPlaceInCode() %}{% if hasEditor %}{% set tmpUrl = editor.getLinkToFile(placeInCode.getFileName(), placeInCode.getLineNumber()) %}{% autoescape false %}<a href="{{ tmpUrl|e('html_attr') }}">{% endautoescape %}{% endif %}{% set ds = constant('DIRECTORY_SEPARATOR') %}{% set fileName = placeInCode.getFileName()|split(ds)|slice(-3)|join(ds) %}{% if fileName != placeInCode.getFileName() %}{% set fileName = '(...)' ~ ds ~ fileName %}{% endif %}{{ fileName }}:{{ placeInCode.getLineNumber() }}{% if hasEditor %}</a>{% endif %}{% endif %}{% if step.hasCalledFunction() %}{% set calledFunction = step.getCalledFunction() %}{% set isDeprecated = calledFunction.isDeprecated() %}{% if isDeprecated %}<s>{% endif %} <strong>{{ calledFunction.getName() }}()</strong>{% if isDeprecated %}</s>{% endif %}{% endif %}</div>{% include'exception-step-body.twig' %}</div>
diff --git a/templates_dist/exception.twig b/templates_dist/exception.twig
index 7dd0a7ff..adbc7286 100644
--- a/templates_dist/exception.twig
+++ b/templates_dist/exception.twig
@@ -1 +1 @@
-{% import 'macros.twig' as functions %}<!doctype html><html><head><meta charset="UTF-8"/><title>Error dumper</title>{% include 'exception-css.twig' %}</head><body><div class="container"><h1>Error!</h1>{{ constant('Awesomite\\ErrorDumper\\Views\\ViewHtml::TAG_UNDER_TITLE')|raw }}{{ contentUnderTitle|raw }}{% set hasContext = exception.getContext|length > 0 %}<div class="padding-menu"><ul class="nav nav-pills" data-tabs="main-tabs">{{ functions.exceptionChainPills(exception) }}{% if hasContext %}<li><a href="#main-context" data-toggle="tab">Context</a></li>{% endif %}</ul><div class="tab-content">{{ functions.exceptionChain(exception, editor, hasEditor) }}{% if hasContext %}<div class="tab-pane fade" id="main-context">{% include 'exception-context.twig' %}</div>{% endif %}</div></div><footer><p class="pull-right small">Generated by <a href="https://github.com/awesomite/error-dumper" target="_blank" rel="noopener noreferrer">ErrorDumper</a> &bull; PHP {{ constant('PHP_VERSION') }} &bull; {{ memoryUsage() }}</p></footer></div>{% autoescape 'html_attr' %}{% for js in resources.js %}<script type="text/javascript" src="{{ js.link }}" integrity="{{ js.integrity }}" crossorigin="anonymous"></script>{% endfor %}{% endautoescape %}{{ constant('Awesomite\\ErrorDumper\\Views\\ViewHtml::TAG_HTML')|raw }}{% for part in appendToBody %}{{ part|raw }}{% endfor %}</body></html>
+{% import 'macros.twig' as functions %}<!doctype html><html><head><meta charset="UTF-8"/><title>Error dumper</title>{% include 'exception-css.twig' %}</head><body><div class="container">{{ constant('Awesomite\\ErrorDumper\\Views\\ViewHtml::TAG_UNDER_MENU')|raw }}{{ contentUnderMenu|raw }}{% set hasContext = exception.getContext|length > 0 %}{% include 'exception-menu.twig' %}<div class="tab-content">{{ functions.exceptionChain(exception, editor, hasEditor) }}{% if hasContext %}<div class="tab-pane fade view-tab" id="main-context">{% include 'exception-context_vars.twig' %}</div>{% endif %}</div><footer><p class="text-right small">Generated by <a href="https://github.com/awesomite/error-dumper" target="_blank" rel="noopener noreferrer">ErrorDumper</a> &bull; PHP {{ constant('PHP_VERSION') }} &bull; {{ memoryUsage() }}</p></footer></div>{{ constant('Awesomite\\ErrorDumper\\Views\\ViewHtml::TAG_HTML')|raw }}{% for part in appendToBody %}{{ part|raw }}{% endfor %}{% include 'exception-js.twig' %}</body></html>
diff --git a/templates_dist/macros.twig b/templates_dist/macros.twig
index 2f53d528..10274840 100644
--- a/templates_dist/macros.twig
+++ b/templates_dist/macros.twig
@@ -1 +1 @@
-{% macro exceptionChainPills(exception, _no) %}{% import _self as functions %}{% set no = _no|default(1) %}<li {{ (1 == no ? 'class="active"')|raw }}><a href="#main-exception-{{ no }}" data-toggle="tab">{{ exception.getOriginalClass() }}{% if no > 1 or exception.hasPrevious() %} #{{ no }}{% endif %}</a></li>{% if exception.hasPrevious() %}{{ functions.exceptionChainPills(exception.getPrevious(), no+1) }}{% endif %}{% endmacro %}{% macro exception(exception, editor, hasEditor, no) %}<h2>Exception</h2>{% set class = exception.getOriginalClass() %}{% set message = exception.getMessage() %}<pre><strong>{{ class }} (code {{ exception.getCode() }})</strong>{{ message != '' ? ' ' ~ message }}</pre><h2>Stack trace</h2>{% set stepIndex = -1 %}{% for step in exception.getStackTrace() %}{% set stepIndex = stepIndex + 1 %}{% set stepKey = 'e' ~ no ~ '-s' ~ stepIndex %}{% include 'exception-step.twig' %}{% endfor %}{% endmacro %}{% macro exceptionChain(exception, editor, hasEditor, _no) %}{% import _self as functions %}{% set no = _no|default(1) %}<div class="tab-pane fade{{ 1 == no ? ' active in' }}" id="main-exception-{{ no }}">{{ functions.exception(exception, editor, hasEditor, no) }}</div>{% if exception.hasPrevious() %}{{ functions.exceptionChain(exception.getPrevious(), editor, hasEditor, no+1) }}{% endif %}{% endmacro %}
+{% macro exceptionChainPills(exception, _no) %}{% import _self as functions %}{% set no = _no|default(1) %}<li class="nav-item"><a href="#main-exception-{{ no }}" class="nav-link{{ (1 == no ? ' active')|raw }}" data-toggle="tab">{{ exception.getOriginalClass()|split('\\')|slice(-1)[0] }}{% if no > 1 or exception.hasPrevious() %} #{{ no }}{% endif %}</a></li>{% if exception.hasPrevious() %}{{ functions.exceptionChainPills(exception.getPrevious(), no+1) }}{% endif %}{% endmacro %}{% macro exception(exception, editor, hasEditor, no) %}<h2>Exception</h2>{% set class = exception.getOriginalClass() %}{% set message = exception.getMessage() %}<div class="card"><div class="card-header"><strong>{{ class }} (code {{ exception.getCode() }})</strong>{{ message != '' ? ' ' ~ message }}</div><div class="card-body"><ul class="short-stack-trace">{% set ds = constant('DIRECTORY_SEPARATOR') %}{% for step in exception.getStackTrace() %}{% set stepIndex = loop.index0 %}{% set stepKey = 'e' ~ no ~ '-s' ~ stepIndex %}<li><a href="#step-{{ stepKey }}">#{{ loop.index0 }}{% if step.hasCalledFunction %}{% set calledFunction = step.getCalledFunction() %}{% set isDeprecated = calledFunction.isDeprecated() %}{% if isDeprecated %}<s>{% endif %} {{ calledFunction.getName() }}(){% if isDeprecated %}</s>{% endif %}{% endif %}{% if step.hasPlaceInCode %}{% if step.hasCalledFunction %} at{% endif %}{% set placeInCode = step.getPlaceInCode() %}{% set fileName = placeInCode.getFileName()|split(ds)|slice(-3)|join(ds) %}{% if fileName != placeInCode.getFileName() %}{% set fileName = '(...)' ~ ds ~ fileName %}{% endif %} {{ fileName }}:{{ placeInCode.getLineNumber() }}{% endif %}</a></li>{% endfor %}</ul></div></div><h2>Stack trace</h2>{% for step in exception.getStackTrace() %}{% set stepIndex = loop.index0 %}{% set stepKey = 'e' ~ no ~ '-s' ~ stepIndex %}{% include 'exception-step.twig' %}{% endfor %}{% endmacro %}{% macro exceptionChain(exception, editor, hasEditor, _no) %}{% import _self as functions %}{% set no = _no|default(1) %}<div class="tab-pane fade{{ 1 == no ? ' show active' }} view-tab" id="main-exception-{{ no }}">{{ functions.exception(exception, editor, hasEditor, no) }}</div>{% if exception.hasPrevious() %}{{ functions.exceptionChain(exception.getPrevious(), editor, hasEditor, no+1) }}{% endif %}{% endmacro %}
diff --git a/tests/TemplatesTest.php b/tests/TemplatesTest.php
index a92995c1..0e954c2d 100644
--- a/tests/TemplatesTest.php
+++ b/tests/TemplatesTest.php
@@ -27,7 +27,7 @@ public function testSingleLine()
 
         $this->assertGreaterThan(0, \count($finder));
         foreach ($finder as $file) {
-            $this->assertSame(1, \mb_substr_count($file->getContents(), "\n"));
+            $this->assertSame(1, \mb_substr_count($file->getContents(), "\n"), $file->getFilename());
         }
     }
 }
diff --git a/tests/Views/ViewHtmlTest.php b/tests/Views/ViewHtmlTest.php
index bf1210ce..720dd534 100644
--- a/tests/Views/ViewHtmlTest.php
+++ b/tests/Views/ViewHtmlTest.php
@@ -99,25 +99,30 @@ public function providerDisplay()
     }
 
     /**
-     * @dataProvider providerContentUnderTitle
+     * @dataProvider providerContentUnderMenu
      *
      * @param string $content
      */
-    public function testContentUnderTitle($content)
+    public function testContentUnderMenu($content)
     {
         $view = new ViewHtml();
-        $this->assertSame($view, $view->setContentUnderTitle($content));
+        $this->assertSame($view, $view->setContentUnderMenu($content));
         \ob_start();
         $view->display(new SerializableException(new \Exception(), 1));
         $output = \ob_get_contents();
         \ob_end_clean();
-        $this->assertContains($content, $output);
+        $this->assertContains((string)$content, $output);
     }
 
-    public function providerContentUnderTitle()
+    public function providerContentUnderMenu()
     {
         return array(
             array('<a href="http://localhost:8001">Test</a>'),
+            array(
+                new Stringable(function () {
+                    return '<a href="http://localhost:8001">Test</a>';
+                }),
+            ),
             array('Test'),
         );
     }