diff --git a/Template.md b/Template.md
new file mode 100644
index 0000000..5c3632e
--- /dev/null
+++ b/Template.md
@@ -0,0 +1,108 @@
+## TileServer-PHP: Custom look&feel with a template
+
+TileServer-PHP project uses TileViewer for the frontend. TileViewer shows several sample web viewers for the most popular JavaScript libraries such as Google Maps API, OpenLayers or Leaflet. In TileViewer there are also tutorials, embed links, guides for the GIS software on desktop, etc. 
+
+The user of the TileServer-PHP project can replace this default frontend with a different one - using a custom template.
+The tileserver may then get a completely different branding and look&feel for the online visitors.
+
+The custom template is a separate HTML or PHP file - linked from the main tileserver.php script.
+
+There are several PHP variables available for use in the template:
+  - `$baseUrls` - array with URLs to server
+  - `$serverTitle` - string with name of server from config
+  - `$maps` - array with metadata about each layer
+
+To start to use the template user should uncomment [line 13](https://github.com/klokantech/tileserver-php/blob/master/tileserver.php#L13) in the tileserver.php file and set a correct template filename e.g. `$config['template'] = 'template.php'`. If server runs in docker, the path to the environment variable could be used instead.
+
+A sample template file showing Leaflet application with a layer switcher listing all layers in TileServer-PHP is available at:
+``` php
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
+    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
+    <style type="text/css">
+      html, body { height: 100%; margin: 0; padding: 0; position: fixed; font-family: Verdana, Geneva, sans-serif; font-size: 12pt; color: #666666;}
+      h1{margin: 0; padding: 0; font-size: 24pt;}
+      label{font-size: 11pt; cursor: pointer;}
+      header{position: fixed; top: 10px; right: 10px; z-index: 1000;}
+      #map{position: fixed; width: 100%; height: 100%; margin: 0; padding: 0;}
+      #sliders{position: fixed; bottom: 10px; left: 10px; z-index: 1000;}
+      .bg{background-color: #fff; opacity: 0.9; padding: 10px 15px}
+    </style>
+    <title><?php echo $serverTitle ?></title>
+  </head>
+  <body>
+    <div id="page">
+      <div id="map"></div>
+      <script type="text/javascript">
+         <?php foreach ($maps as $map) { ?>
+         var <?php echo $map['basename'] ?>Bounds = new L.LatLngBounds(
+                  new L.LatLng(<?php echo $map['bounds'][1] . ',' . $map['bounds'][0] ?>),
+                  new L.LatLng(<?php echo $map['bounds'][3] . ',' . $map['bounds'][2] ?>));
+
+         var <?php echo $map['basename'] ?> = L.tileLayer(
+                  '<?php echo 'http://' . $baseUrls[0] . '/' . $map['basename'] . '/{z}/{x}/{y}.' . $map['format'] ?>', {
+                    minZoom: <?php echo $map['minzoom']; ?>,
+                    maxZoom: <?php echo $map['maxzoom']; ?>,
+                    opacity: 1,
+                    bounds: <?php echo $map['basename'] ?>Bounds,
+                    zIndex: 1
+                  });
+        <?php } ?>
+        var OSM = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'
+        });
+
+        var layers = [OSM
+        <?php
+          foreach ($maps as $map) {
+              echo ','.$map['basename'];
+          }
+        ?>
+        ];
+        var map = L.map('map', {
+          center: [50.2311, 17.24],
+          zoom: 12,
+          layers: layers
+        });
+
+        function updateOpacity(layer, value) {
+          layer.setOpacity(value);
+        }
+
+        function updateVisibility(layer, zIndex, checked) {
+          if (checked) {
+            layer.addTo(map);
+            layer.setZIndex(zIndex);
+          } else {
+            map.removeLayer(layer);
+          }
+        }
+
+        function fitBounds(layer) {
+          map.fitBounds(layer.options.bounds);
+          layer.bringToFront();
+        }
+      </script>
+      <div id="control">
+        <header class="bg">
+          <h1><?php echo $serverTitle ?></h1>
+        </header>
+        <div id="sliders" class="bg">
+          <?php foreach ($maps as $map) { ?>
+            <input type="checkbox" name="layerchecker" 
+                   onclick="updateVisibility(<?php echo $map['basename'] ?>, 1, this.checked);" checked>
+            <label onclick="fitBounds(<?php echo $map['basename'] ?>)"><?php echo $map['name'] ?></label><br>
+            <input id="slide" type="range" min="0" max="1" step="0.1" value="1" 
+                   onchange="updateOpacity(<?php echo $map['basename'] ?>, this.value)">
+            <br>
+          <?php } ?>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+Gist: https://gist.github.com/klokan/09fb9981b5c3ca3407a1b07839f0653b
diff --git a/TileServer-php.md b/TileServer-php.md
deleted file mode 100644
index 5b9b23a..0000000
--- a/TileServer-php.md
+++ /dev/null
@@ -1,9 +0,0 @@
-## Custom templates
-TileServer in default uses Klokantech's TileViewer. TileViewer is constructed as viewer/example base. You can find there pre-generated viewers from most used JavaScript libraries such as google Maps API, OpenLayers or Leaflet. In TileViewer is also tutorials, embed links, links to GIS web services provided by TileServer and more.
-
-In TileServer is possible to define a custom template which will be served on a root instead of TileViewer. The template is meant as single HTML or PHP file which will be included into a script. To define a template and turn on this functionality is necessary to uncomment variable on [line 13](https://github.com/klokantech/tileserver-php/blob/master/tileserver.php#L13) in a tileserver.php file and set a right string name of template e.g. `$config['template'] = 'template.php'`. If you are running it in docker you can set template variables as environment variable.
-
-In this file could be used variables from PHP with information about layers. TileServer puts those variables into PHP template. Flowing variables are provided:
-  `$baseUrls` - array with URLs to server
-  `$serverTitle` - string with name of server from config
-  `$maps` - array with metadata about each layer
\ No newline at end of file
