diff --git a/app.js b/app.js
index c02bf00b94c5668e36ad339760b109db6579e27b..baff28bd58aec7769349962112ee2da52705143a 100644
--- a/app.js
+++ b/app.js
@@ -34,10 +34,10 @@ app.set('view engine', '.hbs');
 
 	
 	//TODO add spinner for telling user to wait until initialization is done
-	
+	//initGitRepos.initialize(downloadFiles);
 	//routes
 	app.get('/', function(req, res){
-		initGitRepos.initialize(downloadFiles);
+		
 		res.render('home', {downloadFiles: downloadNames});
 	});
 
@@ -46,7 +46,7 @@ app.set('view engine', '.hbs');
 		const checkedFiles = Object.keys(req.body);
 
 		if(typeof checkedFiles !== 'undefined' && checkedFiles.length > 0){
-			res.render('download', {checkedFiles: checkedFiles});
+			res.render('download', {checkedFiles: checkedFiles, downloadFiles: downloadNames});
 		}
 		else {
 			res.render('home', {downloadFiles: downloadNames});
@@ -67,7 +67,7 @@ app.set('view engine', '.hbs');
 		frontendChecked = checkedFiles.find(function(file){
 			return file === 'explorviz-ui-frontend';
 		});
-//the user is not allowed to check plugins without having checked frontend or backend
+//the user is not allowed to check plugins without having checked frontend or backend core
 if(!(backendChecked || frontendChecked)){
 	res.render('home', {downloadFiles: downloadNames});
 }
diff --git a/views/download.hbs b/views/download.hbs
index 65c2900f8eb7dc938c8ed21c97d454471cc25363..55fdfd957a1408589691b2d0ce96cef07d3f9580 100644
--- a/views/download.hbs
+++ b/views/download.hbs
@@ -1,156 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
-    <title>Downloading</title>
-<style type="text/css">
-.sk-circle {
-  margin: 40px auto;
-  width: 40px;
-  height: 40px;
-  position: relative; }
-  .sk-circle .sk-child {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0; }
-  .sk-circle .sk-child:before {
-    content: '';
-    display: block;
-    margin: 0 auto;
-    width: 15%;
-    height: 15%;
-    background-color: #333;
-    border-radius: 100%;
-    -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
-            animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; }
-  .sk-circle .sk-circle2 {
-    -webkit-transform: rotate(30deg);
-        -ms-transform: rotate(30deg);
-            transform: rotate(30deg); }
-  .sk-circle .sk-circle3 {
-    -webkit-transform: rotate(60deg);
-        -ms-transform: rotate(60deg);
-            transform: rotate(60deg); }
-  .sk-circle .sk-circle4 {
-    -webkit-transform: rotate(90deg);
-        -ms-transform: rotate(90deg);
-            transform: rotate(90deg); }
-  .sk-circle .sk-circle5 {
-    -webkit-transform: rotate(120deg);
-        -ms-transform: rotate(120deg);
-            transform: rotate(120deg); }
-  .sk-circle .sk-circle6 {
-    -webkit-transform: rotate(150deg);
-        -ms-transform: rotate(150deg);
-            transform: rotate(150deg); }
-  .sk-circle .sk-circle7 {
-    -webkit-transform: rotate(180deg);
-        -ms-transform: rotate(180deg);
-            transform: rotate(180deg); }
-  .sk-circle .sk-circle8 {
-    -webkit-transform: rotate(210deg);
-        -ms-transform: rotate(210deg);
-            transform: rotate(210deg); }
-  .sk-circle .sk-circle9 {
-    -webkit-transform: rotate(240deg);
-        -ms-transform: rotate(240deg);
-            transform: rotate(240deg); }
-  .sk-circle .sk-circle10 {
-    -webkit-transform: rotate(270deg);
-        -ms-transform: rotate(270deg);
-            transform: rotate(270deg); }
-  .sk-circle .sk-circle11 {
-    -webkit-transform: rotate(300deg);
-        -ms-transform: rotate(300deg);
-            transform: rotate(300deg); }
-  .sk-circle .sk-circle12 {
-    -webkit-transform: rotate(330deg);
-        -ms-transform: rotate(330deg);
-            transform: rotate(330deg); }
-  .sk-circle .sk-circle2:before {
-    -webkit-animation-delay: -1.1s;
-            animation-delay: -1.1s; }
-  .sk-circle .sk-circle3:before {
-    -webkit-animation-delay: -1s;
-            animation-delay: -1s; }
-  .sk-circle .sk-circle4:before {
-    -webkit-animation-delay: -0.9s;
-            animation-delay: -0.9s; }
-  .sk-circle .sk-circle5:before {
-    -webkit-animation-delay: -0.8s;
-            animation-delay: -0.8s; }
-  .sk-circle .sk-circle6:before {
-    -webkit-animation-delay: -0.7s;
-            animation-delay: -0.7s; }
-  .sk-circle .sk-circle7:before {
-    -webkit-animation-delay: -0.6s;
-            animation-delay: -0.6s; }
-  .sk-circle .sk-circle8:before {
-    -webkit-animation-delay: -0.5s;
-            animation-delay: -0.5s; }
-  .sk-circle .sk-circle9:before {
-    -webkit-animation-delay: -0.4s;
-            animation-delay: -0.4s; }
-  .sk-circle .sk-circle10:before {
-    -webkit-animation-delay: -0.3s;
-            animation-delay: -0.3s; }
-  .sk-circle .sk-circle11:before {
-    -webkit-animation-delay: -0.2s;
-            animation-delay: -0.2s; }
-  .sk-circle .sk-circle12:before {
-    -webkit-animation-delay: -0.1s;
-            animation-delay: -0.1s; }
-@-webkit-keyframes sk-circleBounceDelay {
-  0%, 80%, 100% {
-    -webkit-transform: scale(0);
-            transform: scale(0); }
-  40% {
-    -webkit-transform: scale(1);
-            transform: scale(1); } }
-@keyframes sk-circleBounceDelay {
-  0%, 80%, 100% {
-    -webkit-transform: scale(0);
-            transform: scale(0); }
-  40% {
-    -webkit-transform: scale(1);
-            transform: scale(1); } }
-	          </style>
-    <!-- Bootstrap -->
-    <!--<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">-->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-  </head>
-  <body>
-   	     <div class="container">
-	        <div class="sk-circle">
-	        <div class="sk-circle1 sk-child"></div>
-	        <div class="sk-circle2 sk-child"></div>
-	        <div class="sk-circle3 sk-child"></div>
-	        <div class="sk-circle4 sk-child"></div>
-	        <div class="sk-circle5 sk-child"></div>
-	        <div class="sk-circle6 sk-child"></div>
-	        <div class="sk-circle7 sk-child"></div>
-	        <div class="sk-circle8 sk-child"></div>
-	        <div class="sk-circle9 sk-child"></div>
-	        <div class="sk-circle10 sk-child"></div>
-	        <div class="sk-circle11 sk-child"></div>
-	        <div class="sk-circle12 sk-child"></div>
-	      </div>
-	      <div class="row">
-	      <div class="col-md-3"></div><div class="col-md-6"> Your download is being prepared. This may take a moment. Do not close the window.</div>
-	     </div>
-	{{#each checkedFiles as |file|}}
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+	<title>Download</title>
+
+	<!-- Bootstrap -->
+	<!--<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">-->
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+</head>
+<body>
+	<div class ="container">
+		<div class="row">
+			<div class="col-md-3"></div>
+			<div class="col-md-9">
+				<h3>Choose which files to compile into your custom build of ExplorViz:</h3>
+				<form action="/" method="post">
+					<div class ="form-group">
+						<div class="checkbox">
+							<label>
+								{{#each downloadFiles as |item|}}
+								<input type="checkbox" name={{item}} value={{item}}>{{item}}<br>
+								{{/each}}
+								<br>
+							</label>
+						</div>
+						<button type="submit" class="btn btn-primary">Create Build and Download Zip</button>
+					</div>
+				</form>
+			</div>	
+		</div>
+	     		<div class="row">
+			<div class="col-md-3"></div>
+			<div class="col-md-6">
+			<iframe id ="downloadFrame" src="" onload="onDownloadFinished(this)"></iframe>
+				<script type="text/javascript">
+					document.getElementById('downloadFrame').onload= function() {
+						//"Your download will start automatically."
+						       // Hier newDownload anzeigen und checkedFiles übergeben?!
+					};
+				</script>
+{{#each checkedFiles as |file|}}
 	{{/each}}
 	<script> location.href="/download?checkedFiles={{checkedFiles}}" </script> 
-    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-    <!-- Include all compiled plugins (below), or include individual files as needed -->
-   <!-- <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>-->
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
-  </body>
-</html>
+			</div>
+
+		</div>
 
+		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+		<!-- Include all compiled plugins (below), or include individual files as needed -->
+		<!-- <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>-->
+		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/views/home.hbs b/views/home.hbs
index ca8f69bd3490f28166bcc34040056320403127e8..75f82eb1634c76c76de203efe1c9abd27e4054b9 100644
--- a/views/home.hbs
+++ b/views/home.hbs
@@ -1,41 +1,43 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
-    <title>Download</title>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+	<title>Download</title>
 
-    <!-- Bootstrap -->
-    <!--<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">-->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-  </head>
-  <body>
-   	<div class="row">
-		<div class="col-md-3"></div>
-		<div class="container">
-			<h3>Choose which files to compile into your custom build of ExplorViz:</h3>
-			<form action="/" method="post">
-				<div class ="form-group">
-					<div class="checkbox">
-						<label>
-							{{#each downloadFiles as |item|}}
-							<input type="checkbox" name={{item}} value={{item}}>{{item}}<br>
-							{{/each}}
-							<br>
-						</label>
+	<!-- Bootstrap -->
+	<!--<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">-->
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+</head>
+<body>
+	<div class ="container">
+		<div class="row">
+			<div class="col-md-3"></div>
+			<div class="col-md-9">
+				<h3>Choose which files to compile into your custom build of ExplorViz:</h3>
+				<form action="/" method="post">
+					<div class ="form-group">
+						<div class="checkbox">
+							<label>
+								{{#each downloadFiles as |item|}}
+								<input type="checkbox" name={{item}} value={{item}}>{{item}}<br>
+								{{/each}}
+								<br>
+							</label>
+						</div>
+						<button type="submit" class="btn btn-primary">Create Build and Download Zip</button>
 					</div>
-					<button type="submit" class="btn btn-primary">Create Build and Download Zip</button>
-				</div>
-			</form>
-		</div>	
-	</div>
+				</form>
+			</div>	
+		</div>
 
-    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-    <!-- Include all compiled plugins (below), or include individual files as needed -->
-   <!-- <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>-->
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
-  </body>
-</html>
\ No newline at end of file
+
+		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+		<!-- Include all compiled plugins (below), or include individual files as needed -->
+		<!-- <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>-->
+		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+	</body>
+	</html>
\ No newline at end of file