diff --git a/doc.md b/doc.md
index 03a94592a..714c8f5b6 100755
--- a/doc.md
+++ b/doc.md
@@ -108,11 +108,11 @@ A basic front-end for visualizing and searching tests by ID is available in `res
 A login is required to access the interface. __Important__: change the default password in `results/telemetry_settings.php`.
 
 #### The end
-Now that the test is installed, the default page uses telemetry and results sharing. If you want another index page, rename one of the examples to `index.html` and delete the other examples. The best starting point for most people is `example-singleServer-gauges.html`.
+Now that the test is installed, the default page uses telemetry and results sharing. If you want another UI, you can easily customize `index.html` or one of the examples in the `examples` folder (the best starting point for most people is `example-singleServer-gauges.html`).
 
 If you're not using telemetry and results sharing, you can delete the `results` folder too.
 
-Details about the examples and how to make custom UIs will be discussed later. If you don't want to make a custom UI, feel free to modify the example and replace "LibreSpeed Example" with the name of your test.
+Details about the examples and how to make custom UIs will be discussed later.
 
 #### Privacy
 Telemetry contains personal information (according to GDPR definition), therefore it is important to treat this data respectfully of national and international laws, especially if you plan to offer the service in the European Union.
@@ -145,30 +145,30 @@ To install the speed test frontend, copy the following files to your web server:
 * `speedtest.js`
 * `speedtest_worker.js`
 * Optionally, the `results` folder
-* One of the `multipleServers` examples (the best starting points are `example-multipleServers-pretty.html` if you don't want to use telemetry and results sharing, `example-multipleServers-full.html` if you want to use them). Rename the example you choose to `index.html`
+* `index.html` (or one of the example UIs in the `examples` folder)
 
 __Important:__ The speed test needs write permissions in the installation folder!
 
 ##### Server list
-Edit `index.html`, you will see a list of servers:
+Edit `index.html` and uncomment the list of servers:
 ```js
 var SPEEDTEST_SERVERS=[
-	{
-		"name":"Speed test Demo Server 1", //user friendly name for the server
-		"server":"//mpotdemo.fdossena.com/", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
-		"dlURL":"garbage.php",  //path to download test on this server (garbage.php or replacement)
-		"ulURL":"empty.php",  //path to upload test on this server (empty.php or replacement)
-		"pingURL":"empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
-		"getIpURL":"getIP.php"  //path to getIP on this server (getIP.php or replacement)
+	/*{
+		name:"Example Server 1", //user friendly name for the server
+		server:"//test1.mydomain.com/", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
+		dlURL:"backend/garbage.php",  //path to download test on this server (garbage.php or replacement)
+		ulURL:"backend/empty.php",  //path to upload test on this server (empty.php or replacement)
+		pingURL:"backend/empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
+		getIpURL:"backend/getIP.php"  //path to getIP on this server (getIP.php or replacement)
 	},
 	{
-		"name":"Speed test Demo Server 2",
-		"server":"//mpotdemo2.fdossena.com/",
-		"dlURL":"garbage.php",
-		"ulURL":"empty.php",
-		"pingURL":"empty.php",
-		"getIpURL":"getIP.php"
-	}
+		name:"Example Server 2", //user friendly name for the server
+		server:"//test2.example.com/", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
+		dlURL:"garbage.php",  //path to download test on this server (garbage.php or replacement)
+		ulURL:"empty.php",  //path to upload test on this server (empty.php or replacement)
+		pingURL:"empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
+		getIpURL:"getIP.php"  //path to getIP on this server (getIP.php or replacement)
+	}*/
 	//add other servers here, comma separated
 ];
 ```
@@ -185,11 +185,9 @@ None of these parameters can be omitted.
 
 __Important__: You can't mix HTTP with HTTPS; if the frontend uses HTTP, you won't be able to connect to HTTPS backends, and viceversa.
 
-__Important__: For HTTPS, all your servers must have valid certificates or the browser will refuse to connect
-
-__Important__: Don't use my demo servers, they're slow!
+__Important__: For HTTPS, all your servers must have valid certificates or the browser will refuse to connect.
 
-If your list of servers changes often, you might not want to have it hardcoded in the HTML file. LibreSpeed can load the server list from a JSON file. To do this, edit `index.html` and replace the list of servers with this:
+If your list of servers changes often, you might not want to have it hardcoded in the HTML file. LibreSpeed can load the server list from a JSON file. To do this, remove the server list and replace it with the URL to your server list, like this:
 ```js
 var SPEEDTEST_SERVERS="your URL here";
 ```
@@ -238,7 +236,7 @@ __Single server:__
 * `example-singleServer-customSettings.html`: Same as `example-singleServer-pretty.html` but configures the test so that it only performs download and upload tests, and with a fixed length instead of automatic
 * `example-singleServer-gauges.html`: The most sophisticated example, with the same functionality as `example-singleServer-pretty.html` but adds gauges. This is also a good starting point, but the gauges may slow down underpowered devices
 * `example-singleServer-chart.html`: Shows how to use the test with the Chart.js library
-* default `index.html`: The most complete example. Based on `example-singleServer-gauges.html`, also enables telemetry and results sharing
+* default `index.html`: A full UI that supports both single server and multiple servers installations and even has a dark theme
 
 __Multiple servers:__
 * `example-multipleServers-pretty.html`: Same as `example-singleServer-pretty.html` but with multiple test points. Server selection is fully automatic
diff --git a/index.html b/index.html
index 262761581..191723a35 100755
--- a/index.html
+++ b/index.html
@@ -1,15 +1,88 @@
 <!DOCTYPE html>
 <html>
 <head>
+<link rel="shortcut icon" href="favicon.ico">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
 <meta charset="UTF-8" />
-<link rel="shortcut icon" href="favicon.ico">
 <script type="text/javascript" src="speedtest.js"></script>
 <script type="text/javascript">
 function I(i){return document.getElementById(i);}
+
+//LIST OF TEST SERVERS. Leave empty if you're doing a standalone installation. See documentation for details
+var SPEEDTEST_SERVERS=[
+	/*{	//this server doesn't actually exist, remove it
+		name:"Example Server 1", //user friendly name for the server
+		server:"//test1.mydomain.com/", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
+		dlURL:"backend/garbage.php",  //path to download test on this server (garbage.php or replacement)
+		ulURL:"backend/empty.php",  //path to upload test on this server (empty.php or replacement)
+		pingURL:"backend/empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
+		getIpURL:"backend/getIP.php"  //path to getIP on this server (getIP.php or replacement)
+	},
+	{	//this server doesn't actually exist, remove it
+		name:"Example Server 2", //user friendly name for the server
+		server:"//test2.example.com/", //URL to the server. // at the beginning will be replaced with http:// or https:// automatically
+		dlURL:"garbage.php",  //path to download test on this server (garbage.php or replacement)
+		ulURL:"empty.php",  //path to upload test on this server (empty.php or replacement)
+		pingURL:"empty.php",  //path to ping/jitter test on this server (empty.php or replacement)
+		getIpURL:"getIP.php"  //path to getIP on this server (getIP.php or replacement)
+	}*/
+	//add other servers here, comma separated
+];
+
 //INITIALIZE SPEEDTEST
-var s=new Speedtest(); //create speedtest object
-s.setParameter("telemetry_level","basic"); //enable telemetry
+var s=new Speedtest(); //create speed test object
+s.setParameter("telemetry_level","basic"); //enable basic telemetry (for results sharing)
+
+//SERVER AUTO SELECTION
+function initServers(){
+	if(SPEEDTEST_SERVERS.length==0){ //standalone installation
+		//just make the UI visible
+		I("loading").className="hidden";
+		I("serverArea").style.display="none";
+		I("testWrapper").className="visible";
+		initUI();
+	}else{ //multiple servers
+		var noServersAvailable=function(){
+			I("message").innerHTML="No servers available";
+		}
+		var runServerSelect=function(){
+			s.selectServer(function(server){
+				if(server!=null){ //at least 1 server is available
+					I("loading").className="hidden"; //hide loading message
+					//populate server list for manual selection
+					for(var i=0;i<SPEEDTEST_SERVERS.length;i++){
+						if(SPEEDTEST_SERVERS[i].pingT==-1) continue;
+						var option=document.createElement("option");
+						option.value=i;
+						option.textContent=SPEEDTEST_SERVERS[i].name;
+						if(SPEEDTEST_SERVERS[i]===server) option.selected=true;
+						I("server").appendChild(option);
+					}
+					//show test UI
+					I("testWrapper").className="visible";
+					initUI();
+				}else{ //no servers are available, the test cannot proceed
+					noServersAvailable();
+				}
+			});
+		}
+		if(typeof SPEEDTEST_SERVERS === "string"){
+			//need to fetch list of servers from specified URL
+			s.loadServerList(SPEEDTEST_SERVERS,function(servers){
+				if(servers==null){ //failed to load server list
+					noServersAvailable();
+				}else{ //server list loaded
+					SPEEDTEST_SERVERS=servers;
+					runServerSelect();
+				}
+			});
+		}else{
+			//hardcoded server list
+			s.addTestPoints(SPEEDTEST_SERVERS);
+			runServerSelect();
+		}
+	}
+}
 
 var meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#80808040";
 var dlColor="#6060AA",
@@ -57,20 +130,23 @@
 var uiData=null;
 function startStop(){
     if(s.getState()==3){
-		//speedtest is running, abort
+		//speed test is running, abort
 		s.abort();
 		data=null;
 		I("startStopBtn").className="";
+		I("server").disabled=false;
 		initUI();
 	}else{
 		//test is not running, begin
 		I("startStopBtn").className="running";
 		I("shareArea").style.display="none";
+		I("server").disabled=true;
 		s.onupdate=function(data){
             uiData=data;
 		};
 		s.onend=function(aborted){
             I("startStopBtn").className="";
+            I("server").disabled=false;
             updateUI(true);
             if(!aborted){
                 //if testId is present, show sharing panel, otherwise do nothing
@@ -136,6 +212,25 @@
 	h1{
 		color:#404040;
 	}
+	#loading{
+		background-color:#FFFFFF;
+		color:#404040;
+		text-align:center;
+	}
+	span.loadCircle{
+		display:inline-block;
+		width:2em;
+		height:2em;
+		vertical-align:middle;
+		background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAP1BMVEUAAAB2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZyFzwnAAAAFHRSTlMAEvRFvX406baecwbf0casimhSHyiwmqgAAADpSURBVHja7dbJbQMxAENRahnN5lkc//5rDRAkDeRgHszXgACJoKiIiIiIiIiIiIiIiIiIiIj4HHspsrpAVhdVVguzrA4OWc10WcEqpwKbnBo0OU1Q5NSpsoJFTgOecrrdEag85DRgktNqfoEdTjnd7hrEHMEJvmRUYJbTYk5Agy6nau6Abp5Cm7mDBtRdPi9gyKdU7w4p1fsLvyqs8hl4z9/w3n/Hmr9WoQ65lAU4d7lMYOz//QboRR5jBZibLMZdAR6O/Vfa1PlxNr3XdS3HzK/HVPRu/KnLs8iAOh993VpRRERERMT/fAN60wwWaVyWwAAAAABJRU5ErkJggg==');
+		background-size:2em 2em;
+		margin-right:0.5em;
+		animation: spin 0.6s linear infinite;
+	}
+	@keyframes spin{
+		0%{transform:rotate(0deg);}
+		100%{transform:rotate(359deg);}
+	}
 	#startStopBtn{
 		display:inline-block;
 		margin:0 auto;
@@ -164,6 +259,13 @@
 	#startStopBtn.running:before{
 		content:"Abort";
 	}
+	#serverArea{
+		margin-top:1em;
+	}
+	#server{
+		font-size:1em;
+		padding:0.2em;
+	}
 	#test{
 		margin-top:2em;
 		margin-bottom:12em;
@@ -259,7 +361,7 @@
         font-size:0.8em;
         color:#808080;
         padding: 0 3em;
-    }
+	}
     div.closePrivacyPolicy {
         width: 100%;
         text-align: center;
@@ -272,17 +374,67 @@
 			font-size:0.8em;
 		}
 	}
+	div.visible{
+		animation: fadeIn 0.4s;
+		display:block;
+	}
+	div.hidden{
+		animation: fadeOut 0.4s;
+		display:none;
+	}
+	@keyframes fadeIn{
+		0%{
+			opacity:0;
+		}
+		100%{
+			opacity:1;
+		}
+	}
+	@keyframes fadeOut{
+		0%{
+			display:block;
+			opacity:1;
+		}
+		100%{
+			display:block;
+			opacity:0;
+		}
+	}
+	@media all and (prefers-color-scheme: dark){
+		html,body,#loading{
+			background:#202020;
+			color:#F4F4F4;
+		}
+		h1{
+			color:#E0E0E0;
+		}
+		a{
+			color:#9090FF;
+		}
+		#privacyPolicy{
+			background:#000000;
+		}
+		#resultsImg{
+			filter: invert(1);
+		}
+	}
 </style>
-<title>LibreSpeed Example</title>
+<title>LibreSpeed</title>
 </head>
-<body>
-<h1>LibreSpeed Example</h1>
-<div id="testWrapper">
+<body onload="initServers()">
+<h1>LibreSpeed</h1>
+<div id="loading" class="visible">
+	<p id="message"><span class="loadCircle"></span>Selecting a server...</p>
+</div>
+<div id="testWrapper" class="hidden">
 	<div id="startStopBtn" onclick="startStop()"></div><br/>
 	<a class="privacy" href="#" onclick="I('privacyPolicy').style.display=''">Privacy</a>
+	<div id="serverArea">
+		Server: <select id="server" onchange="s.setSelectedServer(SPEEDTEST_SERVERS[this.value])"></select>
+	</div>
 	<div id="test">
 		<div class="testGroup">
-			<div class="testArea2">
+            <div class="testArea2">
 				<div class="testName">Ping</div>
 				<div id="pingText" class="meterText" style="color:#AA6060"></div>
 				<div class="unit">ms</div>
@@ -360,6 +512,5 @@ <h4>Data removal</h4>
     </div>
     <br/>
 </div>
-<script type="text/javascript">setTimeout(function(){initUI()},100);</script>
 </body>
 </html>