diff --git a/app/templates/config.html b/app/templates/config.html
index ec72b7b8..fbeb0da0 100644
--- a/app/templates/config.html
+++ b/app/templates/config.html
@@ -2,6 +2,9 @@
 {% block content %}
 <script src="/inc/jquery-linenumbers.js"></script>
 <center>
+	{% if selects|length == 0 %}
+		{% include 'include/getstarted.html' %}
+	{% endif %}
 	<h3>Choose server</h3>
 	<p>
 		<form action="{{ action }}" method="post">
@@ -72,7 +75,7 @@
 		{% if stderr or error %}
 			{% include 'include/errors.html' %}
 		{% else %}
-			<div class="alert alert-success">Config is ok</div>
+			<div class="alert alert-success">The config is ok</div>
 			<a href="viewsttats.py?serv={{ serv }}" target="_blank" title="View stats">Go to view stats</a>
 		{% endif %}
 	{% endif %}
diff --git a/app/templates/delver.html b/app/templates/delver.html
index 9ac1fcd2..ddfc1cc8 100644
--- a/app/templates/delver.html
+++ b/app/templates/delver.html
@@ -1,5 +1,9 @@
 {% extends "base.html" %}
 {% block content %}
+
+{% if selects|length == 0 %}
+	{% include 'include/getstarted.html' %}
+{% else %}
 <center>
 	<h3>Choose server</h3>
 	<p>
@@ -47,5 +51,6 @@
 			</form> 
 		</center>	
 	{% endif %}
-	</center>
-{% endblock %}
\ No newline at end of file
+</center>
+{% endif %}
+{% endblock %}
diff --git a/app/templates/hapservers.html b/app/templates/hapservers.html
index bdd0b4cb..bf47f31b 100644
--- a/app/templates/hapservers.html
+++ b/app/templates/hapservers.html
@@ -32,6 +32,9 @@
 	{% endfor %}
 </script>
 <div id="up-pannel" class="sortable">
+	{% if servers|length == 0 %}
+		{% include 'include/getstarted.html' %}
+	{% endif %}
 	{% for s in servers %}
 		{% if serv %}
 			<link href="/inc/chart.min.css" rel="stylesheet">
@@ -50,7 +53,7 @@
 				showMetrics();
 			</script>
 		{% endif %}
-		<div id="div-server-{{s.0}}" class="div-server-hapwi" {% if service == 'nginx' %}style="height:138px;"{%endif%}>
+		<div id="div-server-{{s.0}}" class="div-server-hapwi" >
 			<div class="server-name">	
 				<input type="hidden" id="server-name-{{s.0}}" value="{{s.1}}" />
 				<input type="hidden" id="service" value="{{service}}" />
@@ -163,11 +166,9 @@
 			</div>
 		</div>
 		{% if serv %}
-			{% if service == 'haproxy' %}
+
 			<div id="ajax-server-{{s.0}}" class="ajax-server"></div>
-			{% else %}
-			<div id="ajax-server-{{s.0}}" class="ajax-server" style="height: 158px;"></div>
-			{% endif %}
+	
 			<div class="div-server div-backends">			
 				<div class="server-name backends">	
 					{% if service == 'haproxy' %}
diff --git a/app/templates/include/getstarted.html b/app/templates/include/getstarted.html
new file mode 100644
index 00000000..a18a8c7e
--- /dev/null
+++ b/app/templates/include/getstarted.html
@@ -0,0 +1,18 @@
+<center>
+	<h4 style="font-size: 25px">Welcome and let's get started!</h4>
+	<iframe width="760" height="415" src="https://www.youtube.com/embed/VU-LFTAQSiw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+	<br />
+	<br />
+	<h4>
+		You don't have any servers. 
+		Watch video how to add your first server 
+		{% if role == 2 %}
+			and go to the 
+			"<a href="servers.py#servers" title="Servers">Servers</a>"
+		{% elif role == 1 %}
+			and go to the 
+                        "<a href="users.py#servers" title="Servers">Admin area</a>"
+		{% endif %}
+		to add your first server
+	</h4>
+</center>
diff --git a/app/templates/metrics.html b/app/templates/metrics.html
index b247bcb1..7341ac0e 100644
--- a/app/templates/metrics.html
+++ b/app/templates/metrics.html
@@ -15,14 +15,18 @@ th, tr, td {
 <link href="/inc/chart.min.css" rel="stylesheet">
 <script src="/inc/metrics.js"></script>
 <script src="/inc/chart.min.js"></script>
-<div id="table_metrics"></div>
-<div id="refresh" style="text-align: right;margin-top: 20px;margin-right: 10px;" title="Refresh metrics" onclick="showMetrics()">
-	<span class="service-reload"></span>
-</div>
+{% if servers|length == 0 %}
+	{% include 'include/getstarted.html' %}
+{% else %}
+	<div id="table_metrics"></div>
+	<div id="refresh" style="text-align: right;margin-top: 20px;margin-right: 10px;" title="Refresh metrics" onclick="showMetrics()">
+		<span class="service-reload"></span>
+	</div>
+	<div id="sortable">
 {% for s in servers %}
-<div class="chart-container">
-	<canvas id="{{s.0}}" role="img"></canvas>
-</div>
+	<div class="chart-container">
+		<canvas id="{{s.0}}" role="img"></canvas>
+	</div>
 {% endfor %}
 
 <script>
@@ -38,4 +42,5 @@ function showMetrics() {
 }
 showMetrics()
  </script>
-{% endblock %}
\ No newline at end of file
+{% endif %}
+{% endblock %}
diff --git a/app/templates/viewstats.html b/app/templates/viewstats.html
index 425a5270..d813bc99 100644
--- a/app/templates/viewstats.html
+++ b/app/templates/viewstats.html
@@ -1,6 +1,9 @@
 {% extends "base.html" %}
 {% block content %}	
 <br />
+{% if selects|length == 0 %}
+	{% include 'include/getstarted.html' %}
+{% else %}
 <form style="padding-left: 5px;" action="viewsttats.py" method="post">
 	<input type="hidden" id="service" value="{{service}}" />
 	<select autofocus required name="serv" id="serv">
@@ -76,4 +79,5 @@
 	});		
 </script>
 <link href="/inc/style.css" rel="stylesheet">
+{% endif %}
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/waf.html b/app/templates/waf.html
index 48e54c3c..913bcca3 100644
--- a/app/templates/waf.html
+++ b/app/templates/waf.html
@@ -19,6 +19,9 @@
 		hostnamea.push(host)
 	{% endfor %}
 </script>
+{% if servers_all|length == 0 %}
+	{% include 'include/getstarted.html' %}
+{% else %}
 <table class="overview">
 	<tr class="overviewHead">
 		<td class="padding10 first-collumn">
@@ -69,4 +72,5 @@
 	showWafMetrics()
 	showOverviewWaf(ip, hostnamea)
 </script>
+{% endif %}
 {% endblock %}
\ No newline at end of file
diff --git a/image/haproxy-wi-overview.png b/image/haproxy-wi-overview.png
index 07343030..f83d9033 100644
Binary files a/image/haproxy-wi-overview.png and b/image/haproxy-wi-overview.png differ