diff --git a/dist/eruda.js b/dist/eruda.js
index c2f6b1b..157c9f1 100644
--- a/dist/eruda.js
+++ b/dist/eruda.js
@@ -71,9 +71,9 @@ var eruda =
 
 	var _Elements2 = _interopRequireDefault(_Elements);
 
-	var _Sinppets = __webpack_require__(53);
+	var _Snippets = __webpack_require__(76);
 
-	var _Sinppets2 = _interopRequireDefault(_Sinppets);
+	var _Snippets2 = _interopRequireDefault(_Snippets);
 
 	var _Resources = __webpack_require__(54);
 
@@ -114,7 +114,7 @@ var eruda =
 	        return devTools.toggle();
 	    });
 
-	    devTools.add(new _Console2.default()).add(new _Network2.default()).add(new _Elements2.default()).add(new _Sinppets2.default()).add(new _Resources2.default()).add(new _Info2.default()).add(new _Features2.default()).add(new _Settings2.default()).showTool('console').show();
+	    devTools.add(new _Console2.default()).add(new _Network2.default()).add(new _Elements2.default()).add(new _Snippets2.default()).add(new _Resources2.default()).add(new _Info2.default()).add(new _Features2.default()).add(new _Settings2.default()).showTool('elements').show();
 	}
 
 	function appendContainer() {
@@ -6086,6 +6086,10 @@ var eruda =
 
 	var _Tool3 = _interopRequireDefault(_Tool2);
 
+	var _util = __webpack_require__(2);
+
+	var _util2 = _interopRequireDefault(_util);
+
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -6094,6 +6098,8 @@ var eruda =
 
 	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+	__webpack_require__(72);
+
 	var Network = function (_Tool) {
 	    _inherits(Network, _Tool);
 
@@ -6103,13 +6109,102 @@ var eruda =
 	        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Network).call(this));
 
 	        _this.name = 'network';
+	        _this._performanceTimingData = [];
+
+	        _this._tpl = __webpack_require__(74);
 	        return _this;
 	    }
 
 	    _createClass(Network, [{
 	        key: 'init',
 	        value: function init($el) {
+	            var _this2 = this;
+
 	            _get(Object.getPrototypeOf(Network.prototype), 'init', this).call(this, $el);
+
+	            window.addEventListener('load', function () {
+	                // SetTimeout is required to make sure timing data is initialized.
+	                setTimeout(function () {
+	                    _this2._getPerformanceTimingData();
+	                }, 3000);
+	            }, false);
+	        }
+	    }, {
+	        key: '_getPerformanceTimingData',
+	        value: function _getPerformanceTimingData() {
+	            var performance = window.webkitPerformance || window.performance,
+	                timing = performance.timing;
+
+	            var data = [];
+
+	            var navigationStart = timing.navigationStart;
+	            var unloadEventStart = timing.unloadEventStart;
+	            var unloadEventEnd = timing.unloadEventEnd;
+	            var redirectStart = timing.redirectStart;
+	            var redirectEnd = timing.redirectEnd;
+	            var fetchStart = timing.fetchStart;
+	            var domainLookupStart = timing.domainLookupStart;
+	            var domainLookupEnd = timing.domainLookupEnd;
+	            var connectStart = timing.connectStart;
+	            var connectEnd = timing.connectEnd;
+	            var secureConnectionStart = timing.secureConnectionStart;
+	            var requestStart = timing.requestStart;
+	            var responseStart = timing.responseStart;
+	            var responseEnd = timing.responseEnd;
+	            var domLoading = timing.domLoading;
+	            var domInteractive = timing.domInteractive;
+	            var domContentLoadedEventStart = timing.domContentLoadedEventStart;
+	            var domContentLoadedEventEnd = timing.domContentLoadedEventEnd;
+	            var domComplete = timing.domComplete;
+	            var loadEventStart = timing.loadEventStart;
+	            var loadEventEnd = timing.loadEventEnd;
+
+
+	            var start = navigationStart,
+	                end = loadEventEnd,
+	                total = end - start;
+
+	            function getData(name, startTime, endTime) {
+	                var duration = endTime - startTime;
+
+	                return {
+	                    name: name,
+	                    start: (startTime - start) / total * 100,
+	                    duration: duration,
+	                    len: duration / total * 100
+	                };
+	            }
+
+	            data.push(getData('Total', navigationStart, loadEventEnd));
+	            data.push(getData('Network/Server', navigationStart, responseStart));
+	            data.push(getData('App cache', fetchStart, domainLookupStart));
+	            data.push(getData('DNS', domainLookupStart, domainLookupEnd));
+	            data.push(getData('TCP', connectStart, connectEnd));
+	            data.push(getData('Time to First Byte', requestStart, responseStart));
+	            data.push(getData('Response', responseStart, responseEnd));
+	            data.push(getData('Unload', unloadEventStart, unloadEventEnd));
+	            data.push(getData('DOM Processing', domLoading, domComplete));
+	            data.push(getData('DOM Construction', domLoading, domInteractive));
+	            data.push(getData('DOM Content Loaded Event', domContentLoadedEventStart, domContentLoadedEventEnd));
+	            data.push(getData('Load Event', loadEventStart, loadEventEnd));
+
+	            this._performanceTimingData = data;
+
+	            var performanceTiming = {};
+	            ['navigationStart', 'unloadEventStart', 'unloadEventEnd', 'redirectStart', 'redirectEnd', 'fetchStart', 'domainLookupStart', 'domainLookupEnd', 'connectStart', 'connectEnd', 'secureConnectionStart', 'requestStart', 'responseStart', 'responseEnd', 'domLoading', 'domInteractive', 'domContentLoadedEventStart', 'domContentLoadedEventEnd', 'domComplete', 'loadEventStart', 'loadEventEnd'].forEach(function (val) {
+	                performanceTiming[val] = timing[val] === 0 ? 0 : timing[val] - start;
+	            });
+	            this._performanceTiming = performanceTiming;
+
+	            this._render();
+	        }
+	    }, {
+	        key: '_render',
+	        value: function _render() {
+	            this._$el.html(this._tpl({
+	                data: this._performanceTimingData,
+	                timing: this._performanceTiming
+	            }));
 	        }
 	    }]);
 
@@ -6136,6 +6231,10 @@ var eruda =
 
 	var _Tool3 = _interopRequireDefault(_Tool2);
 
+	var _util = __webpack_require__(2);
+
+	var _util2 = _interopRequireDefault(_util);
+
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -6144,6 +6243,8 @@ var eruda =
 
 	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+	__webpack_require__(80);
+
 	var Elements = function (_Tool) {
 	    _inherits(Elements, _Tool);
 
@@ -6153,6 +6254,7 @@ var eruda =
 	        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Elements).call(this));
 
 	        _this.name = 'elements';
+	        _this._tpl = __webpack_require__(82);
 	        return _this;
 	    }
 
@@ -6160,6 +6262,26 @@ var eruda =
 	        key: 'init',
 	        value: function init($el) {
 	            _get(Object.getPrototypeOf(Elements.prototype), 'init', this).call(this, $el);
+
+	            this._curEl = document.getElementsByTagName('html')[0];
+
+	            this._render();
+	        }
+	    }, {
+	        key: '_getData',
+	        value: function _getData() {
+	            var el = this._curEl;
+
+	            console.dir(el);
+
+	            return {
+	                classList: el.classList
+	            };
+	        }
+	    }, {
+	        key: '_render',
+	        value: function _render() {
+	            this._$el.html(this._tpl(this._getData()));
 	        }
 	    }]);
 
@@ -6169,56 +6291,7 @@ var eruda =
 	exports.default = Elements;
 
 /***/ },
-/* 53 */
-/***/ function(module, exports, __webpack_require__) {
-
-	'use strict';
-
-	Object.defineProperty(exports, "__esModule", {
-	    value: true
-	});
-
-	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-	var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
-
-	var _Tool2 = __webpack_require__(47);
-
-	var _Tool3 = _interopRequireDefault(_Tool2);
-
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-	var Snippets = function (_Tool) {
-	    _inherits(Snippets, _Tool);
-
-	    function Snippets() {
-	        _classCallCheck(this, Snippets);
-
-	        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Snippets).call(this));
-
-	        _this.name = 'Snippets';
-	        return _this;
-	    }
-
-	    _createClass(Snippets, [{
-	        key: 'init',
-	        value: function init($el) {
-	            _get(Object.getPrototypeOf(Snippets.prototype), 'init', this).call(this, $el);
-	        }
-	    }]);
-
-	    return Snippets;
-	}(_Tool3.default);
-
-	exports.default = Snippets;
-
-/***/ },
+/* 53 */,
 /* 54 */
 /***/ function(module, exports, __webpack_require__) {
 
@@ -6511,7 +6584,7 @@ var eruda =
 
 
 	// module
-	exports.push([module.id, ".eruda-dev-tools .eruda-tools .eruda-resources {\n  padding: 10px;\n  font-size: 14px;\n  overflow-y: auto; }\n  .eruda-dev-tools .eruda-tools .eruda-resources .eruda-section {\n    margin-bottom: 10px; }\n  .eruda-dev-tools .eruda-tools .eruda-resources .eruda-title {\n    padding: 10px;\n    color: #fff;\n    background: #76a2ee;\n    font-size: 14px; }\n    .eruda-dev-tools .eruda-tools .eruda-resources .eruda-title.eruda-ok {\n      background: #8de191; }\n    .eruda-dev-tools .eruda-tools .eruda-resources .eruda-title.eruda-warn {\n      background: #fff5c2; }\n    .eruda-dev-tools .eruda-tools .eruda-resources .eruda-title.eruda-danger {\n      background: #eda29b; }\n    .eruda-dev-tools .eruda-tools .eruda-resources .eruda-title .eruda-btn {\n      float: right;\n      display: inline-block;\n      background: #fff;\n      color: #b4b4b4;\n      text-align: center;\n      width: 18px;\n      height: 18px;\n      line-height: 18px;\n      border-radius: 50%; }\n  .eruda-dev-tools .eruda-tools .eruda-resources .eruda-link-list li {\n    padding: 10px;\n    background: #fff;\n    word-break: break-all; }\n    .eruda-dev-tools .eruda-tools .eruda-resources .eruda-link-list li a {\n      color: #76a2ee !important; }\n  .eruda-dev-tools .eruda-tools .eruda-resources .eruda-image-list {\n    background: #fff; }\n    .eruda-dev-tools .eruda-tools .eruda-resources .eruda-image-list li {\n      width: 25%;\n      float: left;\n      overflow-y: hidden; }\n      .eruda-dev-tools .eruda-tools .eruda-resources .eruda-image-list li img {\n        width: 100%; }\n      .eruda-dev-tools .eruda-tools .eruda-resources .eruda-image-list li.eruda-empty {\n        padding: 10px;\n        width: 100%; }\n    .eruda-dev-tools .eruda-tools .eruda-resources .eruda-image-list::after {\n      display: block;\n      content: '';\n      clear: both; }\n  .eruda-dev-tools .eruda-tools .eruda-resources table {\n    border-collapse: collapse;\n    width: 100%;\n    background: #fff; }\n    .eruda-dev-tools .eruda-tools .eruda-resources table td {\n      padding: 10px;\n      word-break: break-all; }\n      .eruda-dev-tools .eruda-tools .eruda-resources table td .eruda-delete {\n        color: #fff;\n        width: 20px;\n        height: 20px;\n        display: inline-block;\n        text-align: center;\n        border-radius: 50%;\n        background: #f73c37;\n        line-height: 20px; }\n      .eruda-dev-tools .eruda-tools .eruda-resources table td.eruda-key {\n        white-space: nowrap; }\n      .eruda-dev-tools .eruda-tools .eruda-resources table td.eruda-control {\n        width: 40px; }\n", ""]);
+	exports.push([module.id, ".eruda-dev-tools .eruda-tools .eruda-resources {\n  padding: 10px;\n  font-size: 14px;\n  overflow-y: auto; }\n  .eruda-dev-tools .eruda-tools .eruda-resources .eruda-section {\n    margin-bottom: 10px;\n    border-radius: 4px;\n    overflow: hidden; }\n  .eruda-dev-tools .eruda-tools .eruda-resources .eruda-title {\n    padding: 10px;\n    color: #fff;\n    background: #76a2ee;\n    font-size: 14px; }\n    .eruda-dev-tools .eruda-tools .eruda-resources .eruda-title.eruda-ok {\n      background: #8de191; }\n    .eruda-dev-tools .eruda-tools .eruda-resources .eruda-title.eruda-warn {\n      background: #fff5c2; }\n    .eruda-dev-tools .eruda-tools .eruda-resources .eruda-title.eruda-danger {\n      background: #eda29b; }\n    .eruda-dev-tools .eruda-tools .eruda-resources .eruda-title .eruda-btn {\n      float: right;\n      display: inline-block;\n      background: #fff;\n      color: #b4b4b4;\n      text-align: center;\n      width: 18px;\n      height: 18px;\n      line-height: 18px;\n      border-radius: 50%; }\n  .eruda-dev-tools .eruda-tools .eruda-resources .eruda-link-list li {\n    padding: 10px;\n    background: #fff;\n    word-break: break-all; }\n    .eruda-dev-tools .eruda-tools .eruda-resources .eruda-link-list li a {\n      color: #76a2ee !important; }\n  .eruda-dev-tools .eruda-tools .eruda-resources .eruda-image-list {\n    background: #fff;\n    padding: 10px !important; }\n    .eruda-dev-tools .eruda-tools .eruda-resources .eruda-image-list li {\n      width: 25%;\n      float: left;\n      overflow-y: hidden; }\n      .eruda-dev-tools .eruda-tools .eruda-resources .eruda-image-list li img {\n        width: 100%; }\n      .eruda-dev-tools .eruda-tools .eruda-resources .eruda-image-list li.eruda-empty {\n        padding: 10px;\n        width: 100%; }\n    .eruda-dev-tools .eruda-tools .eruda-resources .eruda-image-list::after {\n      display: block;\n      content: '';\n      clear: both; }\n  .eruda-dev-tools .eruda-tools .eruda-resources table {\n    border-collapse: collapse;\n    width: 100%;\n    background: #fff; }\n    .eruda-dev-tools .eruda-tools .eruda-resources table td {\n      padding: 10px;\n      word-break: break-all; }\n      .eruda-dev-tools .eruda-tools .eruda-resources table td .eruda-delete {\n        color: #fff;\n        width: 20px;\n        height: 20px;\n        display: inline-block;\n        text-align: center;\n        border-radius: 50%;\n        background: #f73c37;\n        line-height: 20px; }\n      .eruda-dev-tools .eruda-tools .eruda-resources table td.eruda-key {\n        white-space: nowrap; }\n      .eruda-dev-tools .eruda-tools .eruda-resources table td.eruda-control {\n        width: 40px; }\n", ""]);
 
 	// exports
 
@@ -9772,7 +9845,7 @@ var eruda =
 
 
 	// module
-	exports.push([module.id, ".eruda-dev-tools .eruda-tools .eruda-features {\n  overflow-y: auto; }\n  .eruda-dev-tools .eruda-tools .eruda-features ul li {\n    width: 50%;\n    float: left;\n    padding: 10px; }\n    .eruda-dev-tools .eruda-tools .eruda-features ul li .eruda-inner-wrapper {\n      font-size: 14px;\n      color: #fff;\n      display: block;\n      padding: 10px;\n      border-radius: 4px;\n      text-align: center;\n      background: #eda29b; }\n      .eruda-dev-tools .eruda-tools .eruda-features ul li .eruda-inner-wrapper a {\n        text-decoration: underline; }\n      .eruda-dev-tools .eruda-tools .eruda-features ul li .eruda-inner-wrapper.eruda-ok {\n        background: #fff;\n        color: #b4b4b4; }\n  .eruda-dev-tools .eruda-tools .eruda-features ul::after {\n    display: block;\n    content: '';\n    clear: both; }\n  .eruda-dev-tools .eruda-tools .eruda-features .eruda-html5test {\n    color: #fff;\n    background: #76a2ee;\n    display: block;\n    padding: 10px;\n    text-decoration: none;\n    text-align: center;\n    margin-top: 10px; }\n", ""]);
+	exports.push([module.id, ".eruda-dev-tools .eruda-tools .eruda-features {\n  overflow-y: auto; }\n  .eruda-dev-tools .eruda-tools .eruda-features ul li {\n    width: 50%;\n    float: left;\n    padding: 10px; }\n    .eruda-dev-tools .eruda-tools .eruda-features ul li .eruda-inner-wrapper {\n      font-size: 14px;\n      text-decoration: underline;\n      color: #fff;\n      display: block;\n      padding: 10px;\n      border-radius: 4px;\n      text-align: center;\n      background: #eda29b; }\n      .eruda-dev-tools .eruda-tools .eruda-features ul li .eruda-inner-wrapper.eruda-ok {\n        background: #fff;\n        color: #b4b4b4; }\n  .eruda-dev-tools .eruda-tools .eruda-features ul::after {\n    display: block;\n    content: '';\n    clear: both; }\n  .eruda-dev-tools .eruda-tools .eruda-features .eruda-html5test {\n    color: #fff;\n    background: #76a2ee;\n    display: block;\n    padding: 10px;\n    text-decoration: none;\n    text-align: center;\n    margin-top: 10px; }\n", ""]);
 
 	// exports
 
@@ -9903,6 +9976,8 @@ var eruda =
 
 	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+	__webpack_require__(83);
+
 	var Settings = function (_Tool) {
 	    _inherits(Settings, _Tool);
 
@@ -9912,6 +9987,8 @@ var eruda =
 	        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Settings).call(this));
 
 	        _this.name = 'settings';
+
+	        _this._tpl = __webpack_require__(85);
 	        return _this;
 	    }
 
@@ -9967,5 +10044,299 @@ var eruda =
 	// exports
 
 
+/***/ },
+/* 72 */
+/***/ function(module, exports, __webpack_require__) {
+
+	// style-loader: Adds some css to the DOM by adding a <style> tag
+
+	// load the styles
+	var content = __webpack_require__(73);
+	if(typeof content === 'string') content = [[module.id, content, '']];
+	// add the styles to the DOM
+	var update = __webpack_require__(11)(content, {});
+	if(content.locals) module.exports = content.locals;
+	// Hot Module Replacement
+	if(false) {
+		// When the styles change, update the <style> tags
+		if(!content.locals) {
+			module.hot.accept("!!./../../node_modules/css-loader/index.js!./../../node_modules/postcss-loader/index.js!./../../node_modules/sass-loader/index.js!./Network.scss", function() {
+				var newContent = require("!!./../../node_modules/css-loader/index.js!./../../node_modules/postcss-loader/index.js!./../../node_modules/sass-loader/index.js!./Network.scss");
+				if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+				update(newContent);
+			});
+		}
+		// When the module is disposed, remove the <style> tags
+		module.hot.dispose(function() { update(); });
+	}
+
+/***/ },
+/* 73 */
+/***/ function(module, exports, __webpack_require__) {
+
+	exports = module.exports = __webpack_require__(10)();
+	// imports
+
+
+	// module
+	exports.push([module.id, ".eruda-dev-tools .eruda-tools .eruda-network {\n  overflow-y: auto; }\n  .eruda-dev-tools .eruda-tools .eruda-network .eruda-performance-timing {\n    padding: 10px; }\n    .eruda-dev-tools .eruda-tools .eruda-network .eruda-performance-timing .eruda-inner-wrapper {\n      background: #76a2ee; }\n      .eruda-dev-tools .eruda-tools .eruda-network .eruda-performance-timing .eruda-inner-wrapper .eruda-bar {\n        border-bottom: 1px solid #fff;\n        overflow-x: auto; }\n        .eruda-dev-tools .eruda-tools .eruda-network .eruda-performance-timing .eruda-inner-wrapper .eruda-bar span {\n          font-size: 14px;\n          white-space: nowrap;\n          color: #fff;\n          padding: 5px 0;\n          background: #f73c37;\n          display: inline-block; }\n        .eruda-dev-tools .eruda-tools .eruda-network .eruda-performance-timing .eruda-inner-wrapper .eruda-bar.eruda-last {\n          border-bottom: none; }\n  .eruda-dev-tools .eruda-tools .eruda-network .eruda-performance-timing-data {\n    padding: 0 10px 10px; }\n    .eruda-dev-tools .eruda-tools .eruda-network .eruda-performance-timing-data table {\n      width: 100%;\n      background: #fff;\n      border-collapse: collapse; }\n      .eruda-dev-tools .eruda-tools .eruda-network .eruda-performance-timing-data table th {\n        background: #b4b4b4;\n        text-align: left;\n        color: #fff; }\n      .eruda-dev-tools .eruda-tools .eruda-network .eruda-performance-timing-data table th, .eruda-dev-tools .eruda-tools .eruda-network .eruda-performance-timing-data table td {\n        padding: 10px;\n        font-size: 14px; }\n", ""]);
+
+	// exports
+
+
+/***/ },
+/* 74 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var Handlebars = __webpack_require__(13);
+	module.exports = (Handlebars["default"] || Handlebars).template({"1":function(container,depth0,helpers,partials,data) {
+	    var stack1, helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+	  return "            <div class=\"eruda-bar "
+	    + ((stack1 = helpers["if"].call(alias1,(data && data.last),{"name":"if","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+	    + "\">\r\n                <span style=\"position:relative;left:"
+	    + alias4(((helper = (helper = helpers.start || (depth0 != null ? depth0.start : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"start","hash":{},"data":data}) : helper)))
+	    + "%;width:"
+	    + alias4(((helper = (helper = helpers.len || (depth0 != null ? depth0.len : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"len","hash":{},"data":data}) : helper)))
+	    + "%\">"
+	    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+	    + "("
+	    + alias4(((helper = (helper = helpers.duration || (depth0 != null ? depth0.duration : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"duration","hash":{},"data":data}) : helper)))
+	    + "ms)</span>\r\n            </div>\r\n";
+	},"2":function(container,depth0,helpers,partials,data) {
+	    return "eruda-last";
+	},"4":function(container,depth0,helpers,partials,data) {
+	    var helper, alias1=container.escapeExpression;
+
+	  return "                <tr>\r\n                    <td>"
+	    + alias1(((helper = (helper = helpers.key || (data && data.key)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"key","hash":{},"data":data}) : helper)))
+	    + "</td>\r\n                    <td>"
+	    + alias1(container.lambda(depth0, depth0))
+	    + "</td>\r\n                </tr>\r\n";
+	},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+	    var stack1, alias1=depth0 != null ? depth0 : {};
+
+	  return "<div class=\"eruda-performance-timing\">\r\n    <div class=\"eruda-inner-wrapper\">\r\n"
+	    + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.data : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+	    + "    </div>\r\n</div>\r\n\r\n<div class=\"eruda-performance-timing-data\">\r\n    <table>\r\n        <thead>\r\n            <tr>\r\n                <th>Name</th>\r\n                <th>Time(ms)</th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n"
+	    + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.timing : depth0),{"name":"each","hash":{},"fn":container.program(4, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+	    + "        </tbody>\r\n    </table>\r\n</div>";
+	},"useData":true});
+
+/***/ },
+/* 75 */,
+/* 76 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+	var _Tool2 = __webpack_require__(47);
+
+	var _Tool3 = _interopRequireDefault(_Tool2);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+	__webpack_require__(77);
+
+	var Snippets = function (_Tool) {
+	    _inherits(Snippets, _Tool);
+
+	    function Snippets() {
+	        _classCallCheck(this, Snippets);
+
+	        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Snippets).call(this));
+
+	        _this.name = 'Snippets';
+
+	        _this._snippets = [];
+	        _this._tpl = __webpack_require__(79);
+	        return _this;
+	    }
+
+	    _createClass(Snippets, [{
+	        key: 'init',
+	        value: function init($el) {
+	            _get(Object.getPrototypeOf(Snippets.prototype), 'init', this).call(this, $el);
+
+	            this._render();
+	        }
+	    }, {
+	        key: 'add',
+	        value: function add(name, fn) {
+	            this._snippets.push({
+	                name: name,
+	                fn: fn,
+	                result: ''
+	            });
+
+	            this._render();
+	        }
+	    }, {
+	        key: '_render',
+	        value: function _render() {
+	            this._$el.html(this._tpl());
+	        }
+	    }]);
+
+	    return Snippets;
+	}(_Tool3.default);
+
+	exports.default = Snippets;
+
+/***/ },
+/* 77 */
+/***/ function(module, exports, __webpack_require__) {
+
+	// style-loader: Adds some css to the DOM by adding a <style> tag
+
+	// load the styles
+	var content = __webpack_require__(78);
+	if(typeof content === 'string') content = [[module.id, content, '']];
+	// add the styles to the DOM
+	var update = __webpack_require__(11)(content, {});
+	if(content.locals) module.exports = content.locals;
+	// Hot Module Replacement
+	if(false) {
+		// When the styles change, update the <style> tags
+		if(!content.locals) {
+			module.hot.accept("!!./../../node_modules/css-loader/index.js!./../../node_modules/postcss-loader/index.js!./../../node_modules/sass-loader/index.js!./Snippets.scss", function() {
+				var newContent = require("!!./../../node_modules/css-loader/index.js!./../../node_modules/postcss-loader/index.js!./../../node_modules/sass-loader/index.js!./Snippets.scss");
+				if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+				update(newContent);
+			});
+		}
+		// When the module is disposed, remove the <style> tags
+		module.hot.dispose(function() { update(); });
+	}
+
+/***/ },
+/* 78 */
+/***/ function(module, exports, __webpack_require__) {
+
+	exports = module.exports = __webpack_require__(10)();
+	// imports
+
+
+	// module
+	exports.push([module.id, "", ""]);
+
+	// exports
+
+
+/***/ },
+/* 79 */
+/***/ function(module, exports) {
+
+	module.exports = function(){return "";};
+
+/***/ },
+/* 80 */
+/***/ function(module, exports, __webpack_require__) {
+
+	// style-loader: Adds some css to the DOM by adding a <style> tag
+
+	// load the styles
+	var content = __webpack_require__(81);
+	if(typeof content === 'string') content = [[module.id, content, '']];
+	// add the styles to the DOM
+	var update = __webpack_require__(11)(content, {});
+	if(content.locals) module.exports = content.locals;
+	// Hot Module Replacement
+	if(false) {
+		// When the styles change, update the <style> tags
+		if(!content.locals) {
+			module.hot.accept("!!./../../node_modules/css-loader/index.js!./../../node_modules/postcss-loader/index.js!./../../node_modules/sass-loader/index.js!./Elements.scss", function() {
+				var newContent = require("!!./../../node_modules/css-loader/index.js!./../../node_modules/postcss-loader/index.js!./../../node_modules/sass-loader/index.js!./Elements.scss");
+				if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+				update(newContent);
+			});
+		}
+		// When the module is disposed, remove the <style> tags
+		module.hot.dispose(function() { update(); });
+	}
+
+/***/ },
+/* 81 */
+/***/ function(module, exports, __webpack_require__) {
+
+	exports = module.exports = __webpack_require__(10)();
+	// imports
+
+
+	// module
+	exports.push([module.id, "", ""]);
+
+	// exports
+
+
+/***/ },
+/* 82 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var Handlebars = __webpack_require__(13);
+	module.exports = (Handlebars["default"] || Handlebars).template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+	    return "<div>Test</div>";
+	},"useData":true});
+
+/***/ },
+/* 83 */
+/***/ function(module, exports, __webpack_require__) {
+
+	// style-loader: Adds some css to the DOM by adding a <style> tag
+
+	// load the styles
+	var content = __webpack_require__(84);
+	if(typeof content === 'string') content = [[module.id, content, '']];
+	// add the styles to the DOM
+	var update = __webpack_require__(11)(content, {});
+	if(content.locals) module.exports = content.locals;
+	// Hot Module Replacement
+	if(false) {
+		// When the styles change, update the <style> tags
+		if(!content.locals) {
+			module.hot.accept("!!./../../node_modules/css-loader/index.js!./../../node_modules/postcss-loader/index.js!./../../node_modules/sass-loader/index.js!./Settings.scss", function() {
+				var newContent = require("!!./../../node_modules/css-loader/index.js!./../../node_modules/postcss-loader/index.js!./../../node_modules/sass-loader/index.js!./Settings.scss");
+				if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+				update(newContent);
+			});
+		}
+		// When the module is disposed, remove the <style> tags
+		module.hot.dispose(function() { update(); });
+	}
+
+/***/ },
+/* 84 */
+/***/ function(module, exports, __webpack_require__) {
+
+	exports = module.exports = __webpack_require__(10)();
+	// imports
+
+
+	// module
+	exports.push([module.id, "", ""]);
+
+	// exports
+
+
+/***/ },
+/* 85 */
+/***/ function(module, exports) {
+
+	module.exports = function(){return "";};
+
 /***/ }
 /******/ ]);
\ No newline at end of file
diff --git a/src/Elements/Elements.es6 b/src/Elements/Elements.es6
index fce7aa4..3769f96 100644
--- a/src/Elements/Elements.es6
+++ b/src/Elements/Elements.es6
@@ -1,4 +1,7 @@
 import Tool from '../DevTools/Tool.es6'
+import util from '../util'
+
+require('./Elements.scss');
 
 export default class Elements extends Tool
 {
@@ -6,9 +9,28 @@ export default class Elements extends Tool
     {
         super();
         this.name = 'elements';
+        this._tpl = require('./Elements.hbs');
     }
     init($el)
     {
         super.init($el);
+
+        this._curEl = document.getElementsByTagName('html')[0];
+
+        this._render();
+    }
+    _getData()
+    {
+        var el = this._curEl;
+
+        console.dir(el);
+
+        return {
+            classList: el.classList
+        };
+    }
+    _render()
+    {
+        this._$el.html(this._tpl(this._getData()));
     }
 }
\ No newline at end of file
diff --git a/src/Elements/Elements.hbs b/src/Elements/Elements.hbs
new file mode 100644
index 0000000..96b8e50
--- /dev/null
+++ b/src/Elements/Elements.hbs
@@ -0,0 +1 @@
+<div>Test</div>
\ No newline at end of file
diff --git a/src/Elements/Elements.scss b/src/Elements/Elements.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/Features/Features.scss b/src/Features/Features.scss
index dd47f17..be65e1f 100644
--- a/src/Features/Features.scss
+++ b/src/Features/Features.scss
@@ -10,9 +10,7 @@
                 padding: 10px;
                 .inner-wrapper {
                     font-size: 14px;
-                    a {
-                        text-decoration: underline;
-                    }
+                    text-decoration: underline;
                     color: #fff;
                     display: block;
                     padding: 10px;
diff --git a/src/Info/info.hbs b/src/Info/info.hbs
index ef9dd2e..dfd01fd 100644
--- a/src/Info/info.hbs
+++ b/src/Info/info.hbs
@@ -1,8 +1,8 @@
 <ul>
     {{#each messages}}
         <li>
-            <h2 class="title">{{name}}</h2>
-            <p class="content">{{val}}</p>
+            <h2 class="eruda-title">{{name}}</h2>
+            <p class="eruda-content">{{val}}</p>
         </li>
     {{/each}}
 </ul>
\ No newline at end of file
diff --git a/src/Network/Network.es6 b/src/Network/Network.es6
index 8f59583..13f37a6 100644
--- a/src/Network/Network.es6
+++ b/src/Network/Network.es6
@@ -1,4 +1,7 @@
 import Tool from '../DevTools/Tool.es6'
+import util from '../util'
+
+require('./Network.scss');
 
 export default class Network extends Tool
 {
@@ -6,9 +9,121 @@ export default class Network extends Tool
     {
         super();
         this.name = 'network';
+        this._performanceTimingData = [];
+
+        this._tpl = require('./Network.hbs');
     }
     init($el)
     {
         super.init($el);
+
+        window.addEventListener('load', () =>
+        {
+            // SetTimeout is required to make sure timing data is initialized.
+            setTimeout(() =>
+            {
+                this._getPerformanceTimingData()
+            }, 3000);
+        }, false);
+    }
+    _getPerformanceTimingData()
+    {
+        var performance = window.webkitPerformance || window.performance,
+            timing = performance.timing;
+
+        var data = [];
+
+        var {
+                navigationStart,
+                unloadEventStart,
+                unloadEventEnd,
+                redirectStart,
+                redirectEnd,
+                fetchStart,
+                domainLookupStart,
+                domainLookupEnd,
+                connectStart,
+                connectEnd,
+                secureConnectionStart,
+                requestStart,
+                responseStart,
+                responseEnd,
+                domLoading,
+                domInteractive,
+                domContentLoadedEventStart,
+                domContentLoadedEventEnd,
+                domComplete,
+                loadEventStart,
+                loadEventEnd
+            } = timing;
+
+        var start = navigationStart,
+            end = loadEventEnd,
+            total = end - start;
+
+        function getData(name, startTime, endTime)
+        {
+            var duration = endTime - startTime;
+
+            return {
+                name: name,
+                start: (startTime - start) / total * 100,
+                duration: duration,
+                len: duration / total * 100
+            };
+        }
+
+        data.push(getData('Total', navigationStart, loadEventEnd));
+        data.push(getData('Network/Server', navigationStart, responseStart));
+        data.push(getData('App cache', fetchStart, domainLookupStart));
+        data.push(getData('DNS', domainLookupStart, domainLookupEnd));
+        data.push(getData('TCP', connectStart, connectEnd));
+        data.push(getData('Time to First Byte', requestStart, responseStart));
+        data.push(getData('Response', responseStart, responseEnd));
+        data.push(getData('Unload', unloadEventStart, unloadEventEnd));
+        data.push(getData('DOM Processing', domLoading, domComplete));
+        data.push(getData('DOM Construction', domLoading, domInteractive));
+        data.push(getData('DOM Content Loaded Event', domContentLoadedEventStart, domContentLoadedEventEnd));
+        data.push(getData('Load Event', loadEventStart, loadEventEnd));
+
+        this._performanceTimingData = data;
+
+        var performanceTiming = {};
+        [
+            'navigationStart',
+            'unloadEventStart',
+            'unloadEventEnd',
+            'redirectStart',
+            'redirectEnd',
+            'fetchStart',
+            'domainLookupStart',
+            'domainLookupEnd',
+            'connectStart',
+            'connectEnd',
+            'secureConnectionStart',
+            'requestStart',
+            'responseStart',
+            'responseEnd',
+            'domLoading',
+            'domInteractive',
+            'domContentLoadedEventStart',
+            'domContentLoadedEventEnd',
+            'domComplete',
+            'loadEventStart',
+            'loadEventEnd'
+        ].forEach((val) =>
+        {
+            performanceTiming[val] = timing[val] === 0 ? 0 : timing[val] - start;
+        });
+        this._performanceTiming = performanceTiming;
+
+        this._render();
+    }
+    _render()
+    {
+        this._$el.html(this._tpl({
+            data: this._performanceTimingData,
+            timing: this._performanceTiming
+        }));
     }
 }
\ No newline at end of file
diff --git a/src/Network/Network.hbs b/src/Network/Network.hbs
new file mode 100644
index 0000000..d7c60ea
--- /dev/null
+++ b/src/Network/Network.hbs
@@ -0,0 +1,28 @@
+<div class="eruda-performance-timing">
+    <div class="eruda-inner-wrapper">
+        {{#each data}}
+            <div class="eruda-bar {{#if @last}}eruda-last{{/if}}">
+                <span style="position:relative;left:{{start}}%;width:{{len}}%">{{name}}({{duration}}ms)</span>
+            </div>
+        {{/each}}
+    </div>
+</div>
+
+<div class="eruda-performance-timing-data">
+    <table>
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Time(ms)</th>
+            </tr>
+        </thead>
+        <tbody>
+            {{#each timing}}
+                <tr>
+                    <td>{{@key}}</td>
+                    <td>{{this}}</td>
+                </tr>
+            {{/each}}
+        </tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/src/Network/Network.scss b/src/Network/Network.scss
new file mode 100644
index 0000000..d7ecb50
--- /dev/null
+++ b/src/Network/Network.scss
@@ -0,0 +1,46 @@
+@import "../color";
+
+.dev-tools { .tools {
+    .network {
+        overflow-y: auto;
+        .performance-timing {
+            padding: 10px;
+            .inner-wrapper {
+                background: $blue;
+                .bar {
+                    border-bottom: 1px solid #fff;
+                    overflow-x: auto;
+                    span {
+                        font-size: 14px;
+                        white-space: nowrap;
+                        color: #fff;
+                        padding: 5px 0;
+                        background: $red-dark;
+                        display: inline-block;
+                    }
+                    &.last {
+                        border-bottom: none;
+                    }
+                }
+            }
+        }
+        .performance-timing-data {
+            padding: 0 10px 10px;
+
+            table {
+                width: 100%;
+                background: #fff;
+                border-collapse: collapse;
+                th {
+                    background: $gray;
+                    text-align: left;
+                    color: #fff;
+                }
+                th, td {
+                    padding: 10px;
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+} }
\ No newline at end of file
diff --git a/src/Resources/Resources.scss b/src/Resources/Resources.scss
index cfb8105..a663777 100644
--- a/src/Resources/Resources.scss
+++ b/src/Resources/Resources.scss
@@ -7,6 +7,8 @@
         overflow-y: auto;
         .section {
             margin-bottom: 10px;
+            border-radius: 4px;
+            overflow: hidden;
         }
         .title {
             padding: 10px;
@@ -46,6 +48,7 @@
         }
         .image-list {
             background: #fff;
+            padding: 10px !important;
             li {
                 width: 25%;
                 float: left;
diff --git a/src/Settings/Settings.es6 b/src/Settings/Settings.es6
index f9cc634..bdbc710 100644
--- a/src/Settings/Settings.es6
+++ b/src/Settings/Settings.es6
@@ -1,11 +1,15 @@
 import Tool from '../DevTools/Tool.es6'
 
+require('./Settings.scss');
+
 export default class Settings extends Tool
 {
     constructor()
     {
         super();
         this.name = 'settings';
+
+        this._tpl = require('./Settings.hbs');
     }
     init($el)
     {
diff --git a/src/Settings/Settings.hbs b/src/Settings/Settings.hbs
new file mode 100644
index 0000000..e69de29
diff --git a/src/Settings/Settings.scss b/src/Settings/Settings.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/Snippets/Sinppets.es6 b/src/Snippets/Sinppets.es6
deleted file mode 100644
index 3c7c4e2..0000000
--- a/src/Snippets/Sinppets.es6
+++ /dev/null
@@ -1,14 +0,0 @@
-import Tool from '../DevTools/Tool.es6'
-
-export default class Snippets extends Tool
-{
-    constructor()
-    {
-        super();
-        this.name = 'Snippets';
-    }
-    init($el)
-    {
-        super.init($el);
-    }
-}
\ No newline at end of file
diff --git a/src/Snippets/Snippets.es6 b/src/Snippets/Snippets.es6
new file mode 100644
index 0000000..bf02ed5
--- /dev/null
+++ b/src/Snippets/Snippets.es6
@@ -0,0 +1,35 @@
+import Tool from '../DevTools/Tool.es6'
+
+require('./Snippets.scss');
+
+export default class Snippets extends Tool
+{
+    constructor()
+    {
+        super();
+        this.name = 'Snippets';
+
+        this._snippets = [];
+        this._tpl = require('./Snippets.hbs');
+    }
+    init($el)
+    {
+        super.init($el);
+
+        this._render();
+    }
+    add(name, fn)
+    {
+        this._snippets.push({
+            name: name,
+            fn: fn,
+            result: ''
+        });
+
+        this._render();
+    }
+    _render()
+    {
+        this._$el.html(this._tpl());
+    }
+}
\ No newline at end of file
diff --git a/src/Snippets/Snippets.hbs b/src/Snippets/Snippets.hbs
new file mode 100644
index 0000000..e69de29
diff --git a/src/Snippets/Snippets.scss b/src/Snippets/Snippets.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/index.es6 b/src/index.es6
index 441026e..c040866 100644
--- a/src/index.es6
+++ b/src/index.es6
@@ -3,7 +3,7 @@ import DevTools from './DevTools/DevTools.es6'
 import Console from './Console/Console.es6'
 import Network from './Network/Network.es6'
 import Elements from './Elements/Elements.es6'
-import Snippets from './Snippets/Sinppets.es6'
+import Snippets from './Snippets/Snippets.es6'
 import Resources from './Resources/Resources.es6'
 import Info from './Info/Info.es6'
 import Features from './Features/Features.es6'
@@ -34,7 +34,7 @@ if (isDebugMode)
             .add(new Info())
             .add(new Features())
             .add(new Settings())
-            .showTool('console')
+            .showTool('elements')
             .show();
 }
 
diff --git a/src/style.scss b/src/style.scss
index c458e46..05bd1ef 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,3 +1,5 @@
+@import "color";
+
 #eruda {
     pointer-events: none;
     position: fixed;
@@ -20,4 +22,4 @@
     h1, h2, h3, h4 {
         margin: 0;
     }
-}
\ No newline at end of file
+}