diff --git a/eustia/pxToNum.js b/eustia/pxToNum.js
deleted file mode 100644
index 158cc12..0000000
--- a/eustia/pxToNum.js
+++ /dev/null
@@ -1,6 +0,0 @@
-_('toNum');
-
-function exports(str)
-{
-    return toNum(str.replace('px', ''));
-}
\ No newline at end of file
diff --git a/package.json b/package.json
index 6618dd6..3c72e32 100644
--- a/package.json
+++ b/package.json
@@ -29,8 +29,10 @@
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.6.0",
     "css-loader": "^0.23.1",
+    "draggabilly": "^2.1.0",
     "handlebars": "^4.0.5",
     "handlebars-loader": "^1.1.4",
+    "js-beautify": "^1.6.2",
     "json-loader": "^0.5.4",
     "modernizr": "^3.3.1",
     "node-sass": "^3.4.2",
@@ -38,7 +40,6 @@
     "postcss-loader": "^0.8.1",
     "sass-loader": "^3.1.2",
     "style-loader": "^0.13.0",
-    "webpack": "^1.12.14",
-    "draggabilly": "^2.1.0"
+    "webpack": "^1.12.14"
   }
 }
diff --git a/src/Console/Log.es6 b/src/Console/Log.es6
index 8de8f96..7e5a096 100644
--- a/src/Console/Log.es6
+++ b/src/Console/Log.es6
@@ -182,6 +182,8 @@ export default class Log extends util.Emitter
             times: 1
         });
 
+        if (!log.isCode) log.val = txtToHtml(log.val);
+
         var lastLog = this._lastLog;
 
         if (lastLog.type === log.type && lastLog.val === log.val)
@@ -322,3 +324,10 @@ function transCode(code)
 {
     return code.replace(/\n/g, '<br/>').replace(/ /g, '&nbsp;');
 }
+
+function txtToHtml(str)
+{
+    return str.replace(/\n/g, '<br/>')
+              .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;')
+              .replace(/ /g, '&nbsp;&nbsp;');
+}
diff --git a/src/Elements/Elements.es6 b/src/Elements/Elements.es6
index 873832f..8ae3c22 100644
--- a/src/Elements/Elements.es6
+++ b/src/Elements/Elements.es6
@@ -138,7 +138,7 @@ export default class Elements extends Tool
 
 function formatElName(tagName, id, className, attributes)
 {
-    var ret = '<span class="eruda-red">' + tagName.toLowerCase() + '</span>';
+    var ret = '<span class="eruda-blue">' + tagName.toLowerCase() + '</span>';
 
     if (id !== '') ret += '#' + id;
 
diff --git a/src/Elements/Highlight.es6 b/src/Elements/Highlight.es6
index d94491a..da30b44 100644
--- a/src/Elements/Highlight.es6
+++ b/src/Elements/Highlight.es6
@@ -44,7 +44,7 @@ export default class Highlight
 
         function getNumStyle(name)
         {
-            return util.pxToNum(computedStyle.getPropertyValue(name));
+            return pxToNum(computedStyle.getPropertyValue(name));
         }
 
         var ml = getNumStyle('margin-left'),
@@ -95,4 +95,9 @@ export default class Highlight
         this._$padding = this._$el.find('.eruda-padding');
         this._$content = this._$el.find('.eruda-content');
     }
+}
+
+function pxToNum(str)
+{
+    return util.toNum(str.replace('px', ''));
 }
\ No newline at end of file
diff --git a/src/Sources/Sources.es6 b/src/Sources/Sources.es6
index 0c2fef1..3de2482 100644
--- a/src/Sources/Sources.es6
+++ b/src/Sources/Sources.es6
@@ -1,6 +1,7 @@
 import Tool from '../DevTools/Tool.es6'
-import TreeView from './TreeView.es6'
 import util from '../lib/util'
+import beautify from 'js-beautify'
+import highlight from './highlight.es6'
 
 require('./Sources.scss');
 
@@ -10,54 +11,104 @@ export default class Sources extends Tool
     {
         super();
         this.name = 'sources';
+        this._isInit = false;
 
         this._loadTpl();
-        this._reset();
     }
     init($el)
     {
         super.init($el);
-
-        this._render();
     }
     set(data)
     {
         this._data = data;
+
+        this._render();
+    }
+    show()
+    {
+        super.show();
+
+        if (!this._isInit) this._reset();
     }
     _reset()
     {
-        this._data = {
-            type: 'html',
-            val: document.documentElement
-        };
+        if (this._html)
+        {
+            this._data = {
+                type: 'html',
+                val: this._html
+            };
+
+            return this._render();
+        }
+        get(location.href, (err, data) =>
+        {
+            if (err) return;
+
+            this._html = data;
+            this._reset();
+        });
     }
     _loadTpl()
     {
-        this._htmlTpl = require('./html.hbs');
+        this._codeTpl = require('./code.hbs');
     }
     _render()
     {
+        this._isInit = true;
+
         var data = this._data;
 
         switch (data.type)
         {
-            case 'html': return this._renderHtml();
+            case 'html':
+            case 'js':
+            case 'css':
+                return this._renderCode();
         }
     }
-    _renderHtml()
+    _renderCode()
     {
         var data = this._data;
 
-        var rootNode = data.val;
+        var code = '';
 
-        this._$el.html(this._htmlTpl);
-        new TreeView(this._$el.find('.eruda-tree'), getNodeChildren(rootNode));
+        switch (data.type)
+        {
+            case 'html':
+                code = beautify.html(data.val);
+                break;
+            case 'css':
+                code = beautify.css(data.val);
+                break;
+            case 'js':
+                code = beautify(data.val);
+                break;
+        }
+
+        code = highlight(code, data.type);
+
+        this._$el.html(this._codeTpl({code: code}));
     }
 }
 
-function getNodeChildren(rootNode)
+function get(url, cb)
 {
-    var ret = [];
+    var xhr = new window.XMLHttpRequest();
 
-    var children = rootNode.childNodes;
+    xhr.onload = function ()
+    {
+        var status = xhr.status;
+
+        if ((status >= 200 && status < 300) || status === 304)
+        {
+            cb(null, xhr.responseText);
+        }
+    };
+
+    xhr.onerror = function () { cb(xhr) };
+
+    xhr.open('GET', url);
+    xhr.send();
 }
\ No newline at end of file
diff --git a/src/Sources/Sources.scss b/src/Sources/Sources.scss
index c9fe349..160b1e7 100644
--- a/src/Sources/Sources.scss
+++ b/src/Sources/Sources.scss
@@ -2,17 +2,10 @@
 
 .dev-tools { .tools {
     .sources {
-        .empty {
-            width: 100%;
-            height: 100%;
-            .content {
-                position: absolute;
-                top: 50%;
-                left: 0;
-                width: 100%;
-                text-align: center;
-                transform: translate3d(0, -50%, 0);
-            }
+        .code {
+            padding: $common-padding;
+            overflow-x: scroll;
+            min-height: 100%;
         }
     }
 } }
\ No newline at end of file
diff --git a/src/Sources/Sourees.hbs b/src/Sources/Sourees.hbs
deleted file mode 100644
index e69de29..0000000
diff --git a/src/Sources/TreeView.es6 b/src/Sources/TreeView.es6
deleted file mode 100644
index 7f9e5ad..0000000
--- a/src/Sources/TreeView.es6
+++ /dev/null
@@ -1,10 +0,0 @@
-require('./TreeView.scss');
-
-export default class TreeView
-{
-    constructor($parent, initialData)
-    {
-        this._$parent = $parent;
-        this._data = initialData;
-    }
-}
\ No newline at end of file
diff --git a/src/Sources/TreeView.scss b/src/Sources/TreeView.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/Sources/code.hbs b/src/Sources/code.hbs
new file mode 100644
index 0000000..c07fca8
--- /dev/null
+++ b/src/Sources/code.hbs
@@ -0,0 +1 @@
+<pre class="eruda-code">{{{code}}}</pre>
\ No newline at end of file
diff --git a/src/Sources/highlight.es6 b/src/Sources/highlight.es6
new file mode 100644
index 0000000..9047b03
--- /dev/null
+++ b/src/Sources/highlight.es6
@@ -0,0 +1,110 @@
+import util from '../lib/util'
+
+// https://github.com/trentrichardson/jQuery-Litelighter
+
+export default function highlight(str, lang)
+{
+    str = str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+    lang = language[lang];
+
+    var subLangSi = 0,
+        subLangs = [];
+
+    util.each(lang, (val) =>
+    {
+        if (!val.language) return;
+
+        str = str.replace(val.re, function($1, $2, $3)
+        {
+            subLangs[subLangSi++] = highlight($2, val.language);
+            return $1.replace($2, '___subtmpl'+ (subLangSi - 1) +'___');
+        });
+    });
+
+    util.each(lang, (val, key) =>
+    {
+        if (language[val.language]) return;
+
+        str = str.replace(val.re, "___"+ key +"___$1___end"+ key +"___");
+    });
+
+    var lvls = [];
+
+    str = str.replace(/___(?!subtmpl)\w+?___/g, function($0)
+    {
+        var end = $0.substr(3, 3) ==='end',
+            tag = (!end? $0.substr(3) : $0.substr(6)).replace(/_/g,''),
+            lastTag = lvls.length > 0 ? lvls[lvls.length - 1] : null;
+
+        if(!end && (lastTag == null || tag == lastTag || (lastTag != null && lang[lastTag].embed != undefined && lang[lastTag].embed.indexOf(tag) > -1)))
+        {
+            lvls.push(tag);
+
+            return $0;
+        } else if(end && tag == lastTag)
+        {
+            lvls.pop();
+
+            return $0;
+        }
+
+        return "";
+    });
+
+    util.each(lang, (val, key) =>
+    {
+        str = str.replace(new RegExp("___end"+ key +"___","g"), "</span>")
+                 .replace(new RegExp("___"+ key +"___","g"), "<span class='litelighterstyle' style='"+ style[val.style] +"'>");
+    });
+
+    util.each(lang, (val) =>
+    {
+        if (!val.language) return;
+
+        str = str.replace(/___subtmpl\d+___/g, function($tmpl)
+        {
+            var i = parseInt($tmpl.replace(/___subtmpl(\d+)___/, "$1"), 10);
+            return subLangs[i];
+        });
+    });
+
+    return str;
+};
+
+var style = {
+    code: 'background-color:#ffffff;color:#555;',
+    comment: 'color:#969896',
+    string: 'color:#183691',
+    number: 'color:#0086b3;',
+    keyword: 'color:#a71d5d;',
+    operators: 'color:#a71d5d;'
+};
+
+var language = {};
+
+language.js = {
+    comment: {re: /(\/\/.*|\/\*([\s\S]*?)\*\/)/g, style: 'comment'},
+    string: {re: /(('.*?')|(".*?"))/g, style: 'string'},
+    numbers: {re: /(\-?(\d+|\d+\.\d+|\.\d+))/g, style: 'number'},
+    regex: {re: /([^\/]\/[^\/].+\/(g|i|m)*)/g, style: 'number'},
+    keywords: {re: /(?:\b)(function|for|foreach|while|if|else|elseif|switch|break|as|return|this|class|self|default|var|false|true|null|undefined)(?:\b)/gi, style: 'keyword'},
+    operators: {re: /(\+|\-|\/|\*|%|=|&lt;|&gt;|\||\?|\.)/g, style: 'operators'}
+};
+
+language.html = {
+    comment: {re: /(&lt;!\-\-([\s\S]*?)\-\-&gt;)/g, style: 'comment'},
+    tag: {re: /(&lt;\/?\w(.|\n)*?\/?&gt;)/g, style: 'keyword', embed: ['string']},
+    string: language.js.string,
+    css: {re: /(?:&lt;style.*?&gt;)([\s\S]+?)(?:&lt;\/style&gt;)/gi, language: 'css'},
+    script: {re: /(?:&lt;script.*?&gt;)([\s\S]+?)(?:&lt;\/script&gt;)/gi, language: 'js'}
+};
+
+language.css = {
+    comment: language.js.comment,
+    string: language.js.string,
+    numbers: {re: /((\-?(\d+|\d+\.\d+|\.\d+)(%|px|em|pt|in)?)|#[0-9a-fA-F]{3}[0-9a-fA-F]{3})/g, style: 'number'},
+    keywords: {re: /(@\w+|:?:\w+|[a-z\-]+:)/g, style: 'keyword'}
+};
+
+
diff --git a/src/Sources/html.hbs b/src/Sources/html.hbs
deleted file mode 100644
index 7eeba48..0000000
--- a/src/Sources/html.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="eruda-html">
-    <div class="eruda-tree"></div>
-</div>
\ No newline at end of file
diff --git a/src/lib/util.js b/src/lib/util.js
index 51f959f..441254a 100644
--- a/src/lib/util.js
+++ b/src/lib/util.js
@@ -2268,52 +2268,6 @@ module.exports = (function ()
         return exports;
     })({});
 
-    /* ------------------------------ toNum ------------------------------ */
-
-    var toNum = _.toNum = (function (exports)
-    {
-        /* Convert value to a number.
-         *
-         * |Name  |Type  |Desc            |
-         * |------------------------------|
-         * |val   |*     |Value to process|
-         * |return|number|Resulted number |
-         *
-         * ```javascript
-         * toNum('5'); // -> 5
-         * ```
-         */
-
-        exports = function (val)
-        {
-            if (isNum(val)) return val;
-
-            if (isObj(val))
-            {
-                var temp = isFn(val.valueOf) ? val.valueOf() : val;
-                val = isObj(temp) ? (temp + '') : temp;
-            }
-
-            if (!isStr(val)) return val === 0 ? val : +val;
-
-            return +val;
-        };
-
-        return exports;
-    })({});
-
-    /* ------------------------------ pxToNum ------------------------------ */
-
-    var pxToNum = _.pxToNum = (function (exports)
-    {
-        function exports(str)
-        {
-            return toNum(str.replace('px', ''));
-        }
-
-        return exports;
-    })({});
-
     /* ------------------------------ rtrim ------------------------------ */
 
     var rtrim = _.rtrim = (function (exports)
@@ -2392,6 +2346,40 @@ module.exports = (function ()
         return exports;
     })({});
 
+    /* ------------------------------ toNum ------------------------------ */
+
+    var toNum = _.toNum = (function (exports)
+    {
+        /* Convert value to a number.
+         *
+         * |Name  |Type  |Desc            |
+         * |------------------------------|
+         * |val   |*     |Value to process|
+         * |return|number|Resulted number |
+         *
+         * ```javascript
+         * toNum('5'); // -> 5
+         * ```
+         */
+
+        exports = function (val)
+        {
+            if (isNum(val)) return val;
+
+            if (isObj(val))
+            {
+                var temp = isFn(val.valueOf) ? val.valueOf() : val;
+                val = isObj(temp) ? (temp + '') : temp;
+            }
+
+            if (!isStr(val)) return val === 0 ? val : +val;
+
+            return +val;
+        };
+
+        return exports;
+    })({});
+
     /* ------------------------------ trim ------------------------------ */
 
     var trim = _.trim = (function (exports)
diff --git a/src/style.scss b/src/style.scss
index 30d4d08..feb43ee 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,6 +1,6 @@
 @import "variable";
 
-#eruda {
+.container {
     pointer-events: none;
     position: fixed;
     left: 0;
@@ -19,10 +19,6 @@
         padding: 0;
         margin: 0;
     }
-    pre {
-        padding: 0;
-        margin: 0;
-    }
     h1, h2, h3, h4 {
         margin: 0;
     }