diff --git a/docs/css/style.css b/docs/css/style.css
index 5addab9c..e8db5f80 100644
--- a/docs/css/style.css
+++ b/docs/css/style.css
@@ -22,12 +22,18 @@ body, td, th {
 }
 
 h1 {
-    font-size: 180%;
+    font-size: 220%;
     font-weight: bold;
     padding: 0;
     margin: 1em 0 1em 0;
 }
 
+h1 .subtitle {
+    color: lightgray;
+    font-size: 11pt;
+    text-transform: uppercase;
+}
+
 h2 {
     padding-top: 20px;
     padding-bottom: 10px;
diff --git a/examples/graph/17_network_info.html b/examples/graph/17_network_info.html
new file mode 100644
index 00000000..ebec84f8
--- /dev/null
+++ b/examples/graph/17_network_info.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<!-- saved from url=(0046)http://visjs.org/examples/graph/03_images.html -->
+<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+    <title>Graph | Images</title>
+
+    <style type="text/css">
+        body {
+            font: 10pt arial;
+            padding: 0;
+            margin: 0;
+            overflow: hidden;
+        }
+        #mygraph {
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+        }
+    </style>
+
+    <script type="text/javascript" src="../../vis.min.js"></script>
+
+    <script type="text/javascript">
+        var nodes = null;
+        var edges = null;
+        var graph = null;
+
+        var DIR = 'img/refresh-cl/',
+            SWITCH = DIR + 'Network-Pipe-icon.png',
+            COMPUTER = DIR + 'Hardware-My-Computer-3-icon.png',
+            PRINTER = DIR + 'Hardware-Printer-Blue-icon.png',
+            LENGTH_MAIN = 350,
+            LENGTH_SERVER = 150,
+            LENGTH_SUB = 50,
+            GREEN = 'green',
+            RED = '#FA0A10',
+            ORANGE = 'orange',
+            GRAY = 'gray',
+            BLACK = '#2B1B17';
+
+        // Called when the Visualization API is loaded.
+        function draw() {
+            // Create a data table with nodes.
+            nodes = [];
+
+            // Create a data table with links.
+            edges = [];
+
+            nodes.push({id: 1, label: '192.168.0.1', group: 'switch', value: 10});
+            nodes.push({id: 2, label: '192.168.0.2', group: 'switch', value: 8});
+            nodes.push({id: 3, label: '192.168.0.3', group: 'switch', value: 6});
+            edges.push({from: 1, to: 2, length: LENGTH_MAIN, width: 6, label: '0.71 mbps'});
+            edges.push({from: 1, to: 3, length: LENGTH_MAIN, width: 4, label: '0.55 mbps'});
+
+            // group around 2
+            for (var i = 100; i <= 104; i++) {
+                var value = 1;
+                var width = 1;
+                var color = GRAY;
+                var label = null;
+
+                if (i === 103) {
+                    value = 5;
+                    width = 3;
+                }
+                if (i === 102) {
+                    color = RED;
+                    label = 'error';
+                }
+
+                nodes.push({id: i, label: '192.168.0.' + i, group: 'desktop', value: value});
+                edges.push({from: 2, to: i, length: LENGTH_SUB, color: color, fontColor: color, width: width, label: label});
+            }
+            nodes.push({id: 201, label: '192.168.0.201', group: 'desktop', value: 1});
+            edges.push({from: 2, to: 201, length: LENGTH_SUB, color: GRAY});
+
+            // group around 3
+            nodes.push({id: 202, label: '192.168.0.202', group: 'desktop', value: 4});
+            edges.push({from: 3, to: 202, length: LENGTH_SUB, color: GRAY, width: 2});
+            for (var i = 230; i <= 231; i++ ) {
+                nodes.push({id: i, label: '192.168.0.' + i, group: 'mobile', value: 2});
+                edges.push({from: 3, to: i, length: LENGTH_SUB, color: GRAY, fontColor: GRAY, width: 1});
+            }
+
+            // group around 1
+            nodes.push({id: 10, label: '192.168.0.10', group: 'server', value: 10});
+            edges.push({from: 1, to: 10, length: LENGTH_SERVER, color: GRAY, width: 6, label: '0.92 mbps'});
+            nodes.push({id: 11, label: '192.168.0.11', group: 'server', value: 7});
+            edges.push({from: 1, to: 11, length: LENGTH_SERVER, color: GRAY, width: 3, label: '0.68 mbps'});
+            nodes.push({id: 12, label: '192.168.0.12', group: 'server', value: 3});
+            edges.push({from: 1, to: 12, length: LENGTH_SERVER, color: GRAY, label: '0.3 mbps'});
+
+            nodes.push({id: 204, label: 'Internet', group: 'internet', value: 10});
+            edges.push({from: 1, to: 204, length: 200, width: 3, label: '0.63 mbps'});
+
+
+            // legend
+            var mygraph = document.getElementById('mygraph');
+            var x = - mygraph.clientWidth / 2 + 50;
+            var y = - mygraph.clientHeight / 2 + 20;
+            nodes.push({id: 1000, x: x, y: y +  0, label: 'Internet', group: 'internet'});
+            nodes.push({id: 1001, x: x, y: y + 50, label: 'Switch', group: 'switch'});
+            nodes.push({id: 1002, x: x, y: y + 100, label: 'Server', group: 'server'});
+            nodes.push({id: 1003, x: x, y: y + 150, label: 'Computer', group: 'desktop'});
+            nodes.push({id: 1004, x: x, y: y + 200, label: 'Smartphone', group: 'mobile'});
+
+            // create a graph
+            var container = document.getElementById('mygraph');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+            var options = {
+                stabilize: false,   // stabilize positions before displaying
+                nodes: {
+                    widthMin: 24,
+                    maxWidth: 64,
+                    fontColor: BLACK
+                },
+                edges: {
+                    color: GRAY
+                },
+                groups: {
+                    'switch': {
+                        shape: 'triangle',
+                        color: vis.graph.Groups.DEFAULT[1] // yellow
+                    },
+                    desktop: {
+                        shape: 'dot',
+                        color: vis.graph.Groups.DEFAULT[0] // blue
+                    },
+                    mobile: {
+                        shape: 'dot',
+                        color: vis.graph.Groups.DEFAULT[4] // purple
+                    },
+                    server: {
+                        shape: 'square',
+                        color: vis.graph.Groups.DEFAULT[2] // red
+                    },
+                    internet: {
+                        shape: 'square',
+                        color: vis.graph.Groups.DEFAULT[3] // green
+                    }
+                }
+            };
+            graph = new vis.Graph(container, data, options);
+        }
+    </script>
+</head>
+
+<body onload="draw()">
+
+<div id="mygraph"><div class="graph-frame" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><canvas style="position: relative; width: 100%; height: 100%;"></canvas></div></div>
+
+
+
+</body></html>
\ No newline at end of file
diff --git a/examples/graph/index.html b/examples/graph/index.html
index 04691215..0fd44cfb 100644
--- a/examples/graph/index.html
+++ b/examples/graph/index.html
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-    <title>vis.js | examples</title>
+    <title>vis.js | graph examples</title>
 
     <link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
 </head>
@@ -10,7 +10,7 @@
 <body>
 <div id="container">
 
-    <h1>vis.js examples</h1>
+    <h1>vis.js graph examples</h1>
 
     <p><a href="01_basic_usage.html">01_basic_usage.html</a></p>
     <p><a href="02_random_nodes.html">02_random_nodes.html</a></p>
@@ -28,6 +28,7 @@
     <p><a href="14_dot_language.html">14_dot_language.html</a></p>
     <p><a href="15_dot_language_playground.html">15_dot_language_playground.html</a></p>
     <p><a href="16_dynamic_data.html">16_dynamic_data.html</a></p>
+    <p><a href="17_network_info.html">17_network_info.html</a></p>
     <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
 
 </div>
diff --git a/img/external-link-icons/external-link-icon.png b/img/external-link-icons/external-link-icon.png
new file mode 100644
index 00000000..29b21e95
Binary files /dev/null and b/img/external-link-icons/external-link-icon.png differ
diff --git a/img/external-link-icons/license.txt b/img/external-link-icons/license.txt
new file mode 100644
index 00000000..0e528935
--- /dev/null
+++ b/img/external-link-icons/license.txt
@@ -0,0 +1,40 @@
+/**************************************\
+Shapes4FREE License
+http://www.shapes4free.com/ - visit us to get free photoshop shapes, read our easy-to-understand shapes tutorials and tips, and view beautiful examples of using shapes in all kinds of design
+More about the license: http://www.shapes4free.com/license/
+\**************************************/
+
+This resource was created by Oksana Khristenko
+
+This resource has been downloaded from Shapes4FREE.com and is free for personal or commercial projects. You may use it for web and print design.
+
+No attribution or backlinks are required, but we would certainly appreciate it if you bookmarked www.shapes4free.com and shared the link to it with your friends:
+
+www.shapes4free.com - free photoshop shapes
+
+You may not resell or distribute this resource. Uploading it to another website 
+or offering them for download on another website is not allowed. If you would like to feature this resource on 
+your website or share them with friends, do not link directly to the resource files, 
+please link to the appropriate page on Shapes4FREE.com where it is possible to download the freebie.
+
+/**************************************\
+Shapes4FREE Ëèöåíçèÿ
+http://www.shapes4free.com/ - áåñïëàòíûå ôèãóðû äëÿ Ôîòîøîïà, óðîêè è ïîäñêàçêè, à òàêæå êðàñèâûå ïðèìåðû èñïîëüçîâàíèÿ ôèãóð âî âñåõ âèäàõ äèçàéíà
+Ëèöåíçèÿ: http://www.shapes4free.com/license-ru/
+\**************************************/
+
+Àâòîð: Îêñàíà Õðèñòåíêî 
+
+Âñå áåñïëàòíûå ðåñóðñû êîòîðûå ìîæíî ñêà÷àòü íà Shapes4FREE.com, âêëþ÷àÿ ïðîèçâîëüíûå ôèãóðû äëÿ Ôîòîøîïà 
+(photoshop custom shapes) áåñïëàòíû äëÿ èñïîëüçîâàíèÿ â ëè÷íûõ è êîììåð÷åñêèõ ïðîåêòàõ. Ðàçðåøåíî èñïîëüçîâàòü
+áåñïëàòíûå ðåñóðñû Shapes4FREE â âåá äèçàéíå è ïå÷àòíûõ ìàòåðèàëàõ.
+
+Ññûëêà íà ñàéò Shapes4FREE.com íå òðåáóåòñÿ íî ïðèâåòñòâóåòñÿ. Ìû áóäåì ðàäû åñëè âû ðàññêàæåòå î íàñ äðóçüÿì:
+
+www.shapes4free.com - áåñïëàòíûå ôèãóðû äëÿ Ôîòîøîïà
+
+Çàïðåùåíî ïðîäàâàòü èëè ðàñïðîñòðàíÿòü áåñïëàòíûå ðåñóðñû ñîçäàííûå Shapes4FREE.
+Çàïðåùåíî çàãðóæàòü èõ íà äðóãèå ñàéòû è ïîçâîëÿòü ïîëüçîâàòåëÿì èõ ñêà÷èâàòü. Åñëè âû õîòèòå ðàññêàçàòü î íàøåì
+áåñïëàòíîì ðåñóðñå íà ñàéòå èëè ïîäåëèòüñÿ ñ äðóçüÿìè, íå ñîçäàâàéòå ïðÿìûõ ññûëîê íà ôàéë, ñîçäàéòå ññûëêó íà
+ñîîòâåòñòâóþùóþ ñòðàíèöó ñàéòà Shapes4FREE.com ãäå ìîæíî áóäåò ñêà÷àòü ýòîò ðåñóðñ.
+
diff --git a/img/gallery/graph/17_network_info.png b/img/gallery/graph/17_network_info.png
new file mode 100644
index 00000000..1d0ee70b
Binary files /dev/null and b/img/gallery/graph/17_network_info.png differ
diff --git a/index.html b/index.html
index 479b818a..167ebbeb 100644
--- a/index.html
+++ b/index.html
@@ -28,22 +28,31 @@
                 <li><a href="#install">Install</a></li>
                 <li><a href="#example">Example</a></li>
                 <li><a href="#gallery">Gallery</a></li>
-                <li><a href="docs/index.html" target="_blank">Docs</a></li>
+                <li>
+                    <a href="docs/index.html" target="_blank">
+                        Docs
+                        <img src="img/external-link-icons/external-link-icon.png" style="vertical-align: text-top;" title="Docs will open in a new window">
+                    </a>
+                </li>
                 <li><a href="#license">License</a></li>
             </ul>
         </div>
     </div>
 
-    <h1>vis.js</h1>
+    <h1>
+        vis.js<br>
+        <span class="subtitle">a visual interaction system</span>
+    </h1>
 
     <p>
         Vis.js is a dynamic, browser based visualization library.
         The library is designed to be easy to use, to handle large amounts
-        of dynamic data, and to enable manipulation of the data.
+        of dynamic data, and to enable manipulation of and interaction with the data.
         The library consists of the components DataSet, Timeline, and Graph.
     </p>
     <p>
-        The vis.js library is developed by <a href="http://almende.com" target="_blank">Almende B.V</a>.
+        The vis.js library is developed by <a href="http://almende.com" target="_blank">Almende B.V</a>,
+        as part of the <a href="http://chap.almende.com/" target="_blank">CHAP</a>.
     </p>
 
 
@@ -270,6 +279,12 @@ bower install vis
                 <div>dynamic data</div>
             </a>
         </div>
+        <div class="thumb">
+            <a href="examples/graph/17_network_info.html">
+                <img src="img/gallery/graph/17_network_info.png">
+                <div>network info</div>
+            </a>
+        </div>
         <div class="thumb">
             <a href="examples/graph/graphviz/graphviz_gallery.html">
                 <img src="img/gallery/graph/graphviz_gallery.png">
