Bug 568236 - User interface improvement for APP4MC Cloud

The user interface for the web service on the cloud could use a better
look. This should be a change to the look of all the pages (index,
workflow, administration, login etc...) It also adds an about page.

Change-Id: I5d050a57809c95c6b19fa2382441dffb73e3d724
Signed-off-by: Philip Okonkwo <philipcokonkwo@yahoo.com>

18 files changed, 568 insertions, 304 deletions

diff --git a/manager/pom.xml b/manager/pom.xml
index 64f0ad7..43a6362 100644
--- a/manager/pom.xml
+++ b/manager/pom.xml
@@ -80,6 +80,16 @@
 		    <artifactId>bootstrap</artifactId>
 		    <version>4.5.2</version>
 		</dependency>
+		
+		<dependency>
+		    <groupId>org.webjars</groupId>
+		    <artifactId>font-awesome</artifactId>
+		    <version>5.13.0</version>
+		</dependency>
+		<dependency>
+		    <groupId>org.thymeleaf.extras</groupId>
+		    <artifactId>thymeleaf-extras-springsecurity5</artifactId>
+		</dependency>
 	</dependencies>
 
 	<build>
diff --git a/manager/src/main/java/org/eclipse/app4mc/cloud/manager/AboutPageController.java b/manager/src/main/java/org/eclipse/app4mc/cloud/manager/AboutPageController.java
new file mode 100644
index 0000000..054f389
--- /dev/null
+++ b/manager/src/main/java/org/eclipse/app4mc/cloud/manager/AboutPageController.java
@@ -0,0 +1,29 @@
+/*********************************************************************************
+ * Copyright (c) 2020 Robert Bosch GmbH and others.
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Robert Bosch GmbH - initial API and implementation
+ ********************************************************************************
+ */
+package org.eclipse.app4mc.cloud.manager;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class AboutPageController {
+
+	@GetMapping("/about")
+	public String workflow(Model model) {
+		// render the form view
+		return "about";
+	}
+
+}
\ No newline at end of file
diff --git a/manager/src/main/resources/static/css/styles.css b/manager/src/main/resources/static/css/styles.css
new file mode 100644
index 0000000..dbeec43
--- /dev/null
+++ b/manager/src/main/resources/static/css/styles.css
@@ -0,0 +1,146 @@
+html, body{
+	height:100%;
+}
+
+h1{
+	color: black;
+}
+
+.custom-file-label{
+	border-radius : 40px;
+	-moz-border-radius:40px;
+    -webkit-border-radius:40px;
+}
+
+.custom-file-label::after{
+	border-radius : 40px;
+	-moz-border-radius:40px;
+    -webkit-border-radius:40px;
+}
+
+.form-control{
+	border-radius : 40px;
+	-moz-border-radius:40px;
+    -webkit-border-radius:40px;
+}
+
+#wf-fm-group{
+	padding:0;	
+}
+
+.hero{
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	background-image: linear-gradient(rgba(220, 220, 220, 0.9) 50%, rgba(220, 220, 220, 0.9) 50%), url("../images/bg-header2.jpg");
+	background-color: #cccccc;
+	background-size: cover;
+}
+
+.left-btn, .right-btn{
+  	border-radius: 40px;
+  	padding-left: 30px;
+  	padding-right: 30px;
+}
+.list-group{
+	border-radius : 40px;
+}
+
+.banner{
+	margin: 0;
+	padding: 0;
+	background-image: linear-gradient(rgba(220, 220, 220, 0.9) 50%, rgba(220, 220, 220, 0.9) 50%), url("../images/bg-header2.jpg");
+	background-color: #cccccc;
+	background-size: cover;
+	height: 300px;
+	width:100%;
+	z-index: -1;
+	position: absolute;
+	top: 0;
+    right: 0;
+}
+
+.list-group-item{
+	border-radius : 40px;
+	-moz-border-radius:40px;
+    -webkit-border-radius:40px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-right: 5px;
+}
+
+.btn-rmv{
+	background-color: Black;
+    border: none;
+    color: white;
+    padding: 10px 14px;
+    font-size: 16px;
+    cursor: pointer;
+    border-radius : 50%;
+}
+
+.navcon{
+	margin: 0;
+	padding: 0;
+}
+
+.nav-item{
+	margin-left: 30px;
+}
+
+.nav-brand{
+	width: 150px;
+	display: block;
+}
+
+.plist {
+  margin: auto 0;
+}
+
+.fm-ctrl-left{
+	border-radius : 40px 0px 0px 40px;
+	-moz-border-radius:40px 0px 0px 40px;
+    -webkit-border-radius:40px 0px 0px 40px;
+}
+
+.fm-ctrl-center{
+	border-radius : 0;
+	-moz-border-radius:0;
+    -webkit-border-radius:0;
+}
+
+.fm-ctrl-right{
+	border-radius : 0px 40px 40px 0px;
+	-moz-border-radius:0px 40px 40px 0px;
+    -webkit-border-radius:0px 40px 40px 0px;
+}
+
+.btn-save{
+    border: none;
+    color: white;
+    padding: 10px 14px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.half-btn{
+	width: 100px
+}
+
+/* Scroll Bar */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1; 
+}
+ 
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555; 
+}
\ No newline at end of file
diff --git a/manager/src/main/resources/static/images/Logo_Panorama_small.png b/manager/src/main/resources/static/images/Logo_Panorama_small.png
new file mode 100644
index 0000000..c89af0d
--- /dev/null
+++ b/manager/src/main/resources/static/images/Logo_Panorama_small.png
diff --git a/manager/src/main/resources/static/images/app4mc-logo_small.png b/manager/src/main/resources/static/images/app4mc-logo_small.png
new file mode 100644
index 0000000..2b3992e
--- /dev/null
+++ b/manager/src/main/resources/static/images/app4mc-logo_small.png
diff --git a/manager/src/main/resources/static/images/bg-header2.jpg b/manager/src/main/resources/static/images/bg-header2.jpg
new file mode 100644
index 0000000..3ef6259
--- /dev/null
+++ b/manager/src/main/resources/static/images/bg-header2.jpg
diff --git a/manager/src/main/resources/static/index.html b/manager/src/main/resources/static/index.html
deleted file mode 100644
index feeebf7..0000000
--- a/manager/src/main/resources/static/index.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE HTML>
-<html xmlns:th="https://www.thymeleaf.org">
-<head> 
-<title>APP4MC Cloud Manager</title> 
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<link href="webjars/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-<script src="webjars/jquery/3.5.1/jquery.min.js"></script>
-<script type="module" src="webjars/popper.js/1.16.0/popper.min.js"></script>
-<script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-</head>
-<body>
-	<div class="container">
-		<div class="row justify-content-center">
-			<div class="col text-center" style="height:200px">
-				<img class="img-fluid" style="height:100%" src="/images/Logo_Panorama.png"/>
-			</div>
-		</div>
-		<div class="row align-items-end">
-			<div class="col" style="height:100px">
-			    <img class="img-fluid float-right" style="height:100%; margin-right:10px;" src="/images/app4mc-logo.png"/>
-			</div>
-			<div class="col">
-			    <div class="content-heading"><h1>Cloud Manager</h1></div>
-			</div>
-		</div>
-		<div class="row mt-3">
-		    <div class="col text-center text-danger"><h2><em>(under development)</em></h2></div>
-		</div>
-		<div class="row mt-3">
-			<div class="col">
-		    	<a class="btn btn-primary float-right" href="/workflow">Start Workflow</a>
-			</div>
-			<div class="col">
-			    <a class="btn btn-secondary" href="/admin">Administration</a>
-			</div>
-		</div>
-    </div>
-</body>
-</html>
diff --git a/manager/src/main/resources/static/js/admin.js b/manager/src/main/resources/static/js/admin.js
new file mode 100644
index 0000000..0ece8dc
--- /dev/null
+++ b/manager/src/main/resources/static/js/admin.js
@@ -0,0 +1,11 @@
+function removeService(service) {
+	var token = $('#_csrf').attr('content');
+	var header = $('#_csrf_header').attr('content');
+	$.ajax({
+		type: 'POST',
+		url: '/admin/remove/' + service,
+		success: function(result) {
+			location.reload();
+		}
+	});
+}
\ No newline at end of file
diff --git a/manager/src/main/resources/static/js/workflow.js b/manager/src/main/resources/static/js/workflow.js
new file mode 100644
index 0000000..45eee51
--- /dev/null
+++ b/manager/src/main/resources/static/js/workflow.js
@@ -0,0 +1,39 @@
+function clearWorkflow() {
+		$.ajax({
+			type : 'POST',
+			url : '/clear',
+			success : function(result) {
+				$('#selectedServicesBlock').load('/selectedServices');
+				$('#messagesBlock').load('/messages');
+				$('#errorsBlock').load('/errors');
+				$('#resultsBlock').load('/results');
+			}
+		});
+	}
+
+	function updateSelectedServices(service) {
+		$.ajax({
+			type : 'POST',
+			url : '/select/' + service,
+			success : function(result) {
+				$('#selectedServicesBlock').load('/selectedServices');
+			}
+		});
+	}
+
+	function removeSelectedServices(service) {
+		$.ajax({
+			type : 'POST',
+			url : '/remove/' + service,
+			success : function(result) {
+				$('#selectedServicesBlock').load('/selectedServices');
+			}
+		});
+	}
+
+	$(document).ready(function() {
+		$('#selectedServicesBlock').load('/selectedServices');
+		$('#messagesBlock').load('/messages');
+		$('#errorsBlock').load('/errors');
+		$('#resultsBlock').load('/results');
+	});
diff --git a/manager/src/main/resources/templates/about.html b/manager/src/main/resources/templates/about.html
new file mode 100644
index 0000000..c1e1dd2
--- /dev/null
+++ b/manager/src/main/resources/templates/about.html
@@ -0,0 +1,113 @@
+<html xmlns:th="https://www.thymeleaf.org">
+<head th:include="fragment :: fragment_head">
+</head>
+<body>
+	<div th:replace="fragment :: fragment_nav"></div>
+	<div class="banner"></div>
+	<div class="container col-md-7">
+		<div class="row" style="margin-top: 100px">
+			<div class="col text-center">
+				<div class="content-heading">
+					<h1>About Eclipse APP4MC</h1>
+				</div>
+			</div>
+		</div>
+		<div class="col-md-18 padding-bottom-30" style="margin-top: 130px; margin-bottom:100px">
+			<p>
+				<br>
+			</p>
+
+			<p>
+				<strong>Eclipse APP4MC</strong> is a platform for engineering
+				embedded multi- and many-core software systems. The platform enables
+				the creation and management of complex tool chains including
+				simulation and validation. As an open platform, proven in the
+				automotive sector by Bosch and their partners, it supports
+				interoperability and extensibility and unifies data exchange in
+				cross-organizational projects.<span id="dots">...</span>
+			</p>
+
+			<div id="more" style="display: none;">
+				<p>
+					<img src="https://www.eclipse.org/app4mc/images/system-model.png"
+						class="img-responsive" style="width: 100%">
+				</p>
+
+				<p>
+					<strong><em>Multi- and Many-Core Development Process
+							Support</em></strong>
+				</p>
+
+				<p>The Amalthea platform allows users to distribute data and
+					tasks to the target hardware platforms, with the focus on
+					optimization of timing and scheduling. It addresses the need for
+					new tools and techniques to make effective use of the level of
+					parallelism in this environment.</p>
+
+				<p>
+					<strong><em>Common Data Exchange and Simulation</em></strong>
+				</p>
+
+				<p>The System Model contains the information required to
+					simulate, analyze and optimize performance. It contains extensive
+					information about software, hardware, timing behavior, and
+					constraints for the system under development.</p>
+
+				<p>
+					Based on the <a href="http://www.eclipse.org/modeling/emf/">Eclipse
+						Modeling Framework</a>, its capabilities not only include hardware and
+					software modelling but in addition, tools for visualization and
+					processing. The unified data model enables tool interoperability
+					and data exchange with other systems such as <a
+						href="http://www.autosar.org">Autosar</a> and simplifies the
+					exchange and storage of data.
+				</p>
+
+				<p>
+					<strong><em>Event Tracing</em></strong>
+				</p>
+
+				<p>The AMALTHEA definitions of task states and transitions
+					provides the basis for evaluating systems with tracing tools,
+					identifying problems and discovering improvements. These
+					definitions are already in use in both commercial and open source
+					tools.</p>
+
+				<p>
+					<strong><em>Customizable Workflow</em></strong>
+				</p>
+
+				<p>
+					The AMALTHEA workflow engine supports a continuous development
+					workflow, allowing data exchange along the entire toolchain.
+					Workflow elements can be customized and extended according to user
+					needs. As a basis, a standard workflow developed with <a
+						href="http://www.eclipse.org/Xtext/documentation/306_mwe2.html">Eclipse
+						Xtext(MWE2)</a> is included.
+				</p>
+
+			</div>
+			<button onclick="readMoreOrLess()" id="myBtn" class= "btn btn-secondary" style="border-radius: 40px">Read more</button>
+		</div>
+
+	</div>
+	<script>
+		function readMoreOrLess() {
+			var dots = document.getElementById("dots");
+			var moreText = document.getElementById("more");
+			var btnText = document.getElementById("myBtn");
+
+			if (dots.style.display === "none") {
+				dots.style.display = "inline";
+				btnText.innerHTML = "Read more";
+				moreText.style.display = "none";
+			} else {
+				dots.style.display = "none";
+				btnText.innerHTML = "Read less";
+				moreText.style.display = "inline";
+			}
+		}
+	</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/manager/src/main/resources/templates/admin.html b/manager/src/main/resources/templates/admin.html
index 107c8a6..e2461b1 100644
--- a/manager/src/main/resources/templates/admin.html
+++ b/manager/src/main/resources/templates/admin.html
@@ -1,138 +1,122 @@
-<html xmlns:th="https://www.thymeleaf.org"
-      xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
-<head> 
-<title>APP4MC Cloud Manager - Administration</title> 
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<link href="webjars/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-<script src="webjars/jquery/3.5.1/jquery.min.js"></script>
-<script type="module" src="webjars/popper.js/1.16.0/popper.min.js"></script>
-<script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-<script type="text/javascript">
-function removeService(service) {
-	var token = $('#_csrf').attr('content');
-	var header = $('#_csrf_header').attr('content');
-	$.ajax({
-		type: 'POST',
-		url: '/admin/remove/' + service,
-		success: function(result) {
-			location.reload();
-		}
-	});
-}
-</script>
+<html xmlns:th="https://www.thymeleaf.org">
+<head th:include="fragment :: fragment_head">
 </head>
 <body>
-	<div class="container">
-		<div class="row justify-content-center">
-			<div class="col text-center" style="height:200px">
-				<img class="img-fluid" style="height:100%" src="/images/Logo_Panorama.png"/>
-			</div>
-		</div>
-		<div class="row">
+	<div th:replace="fragment :: fragment_nav"></div>
+	<div class="banner"></div>
+	<div class="container col-md-7">
+		<div class="row" style="margin-top: 100px">
 			<div class="col text-center">
-			    <div class="content-heading"><h2>Configure available cloud services</h2></div>
+				<div class="content-heading">
+					<h1>Configure Available Services</h1>
+				</div>
 			</div>
 		</div>
 
-		<form action="#" th:action="@{/admin/save}" th:object="${dto}" method="POST">
-		    <fieldset>
+		<form action="#" th:action="@{/admin/save}" th:object="${dto}"
+			method="POST">
+			<fieldset>
 
-				<div class="row mt-3">
+				<div class="row" style="margin-top: 100px">
 					<div class="col text-center">
-				        <table class="table table-sm">
-				            <thead>
-				                <tr>
-				                    <th>Service Name</th>
-				                    <th>Service Base URL</th>
-				                    <th>Service Description</th>
-				                    <th></th>
-				                </tr>
-				            </thead>
-				            <tbody>
-				                <tr th:each="service, stat : *{services}">
-				                    <td><input th:field="*{services[__${stat.index}__].name}" class="form-control"/></td>
-				                    <td><input th:field="*{services[__${stat.index}__].baseUrl}" class="form-control"/></td>
-				                    <td><input th:field="*{services[__${stat.index}__].description}" class="form-control"/></td>
-				                    <td>
-				                    	<a th:if="*{services[__${stat.index}__].name != null}"
-				                    		th:attr="onclick=|removeService('*{services[__${stat.index}__].name}')|" 
-				                    		class="btn btn-secondary btn-sm">remove</a>
-				                    </td>
-				                </tr>
-				            </tbody>
-				        </table>
+						<table class="table table-sm">
+							<thead>
+								<tr>
+									<th>Service Name</th>
+									<th>Service Base URL</th>
+									<th>Service Description</th>
+									<th></th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr th:each="service, stat : *{services}">
+									<td><input th:field="*{services[__${stat.index}__].name}"
+										class="form-control fm-ctrl-left" /></td>
+									<td><input
+										th:field="*{services[__${stat.index}__].baseUrl}"
+										class="form-control fm-ctrl-center" /></td>
+									<td><input
+										th:field="*{services[__${stat.index}__].description}"
+										class="form-control fm-ctrl-right" /></td>
+									<td><a th:if="*{services[__${stat.index}__].name != null}"
+										th:attr="onclick=|removeService('*{services[__${stat.index}__].name}')|"
+										class="btn btn-secondary btn-sm btn-rmv"><i
+											class="fas fa-times"></i></a>
+										<button
+											th:unless="*{services[__${stat.index}__].name != null}"
+											type="submit" id="submitServicesButton" th:value="Save"
+											class="btn btn-primary btn-save">
+											<i class="fas fa-save"></i>
+										</button></td>
+								</tr>
+							</tbody>
+						</table>
 					</div>
 				</div>
 				<div class="row">
-					<div class="col text-right" style="padding-right:2px">
-				        <input type="submit" id="submitServicesButton" th:value="Save" class="btn btn-primary"/>
-					</div>
-					<div class="col" style="padding-left:2px">
-				        <input type="reset" id="resetServicesButton" name="reset" th:value="Reset" class="btn btn-secondary"/>
+					<div class="col text-center" style="padding-left: 2px">
+						<input type="reset" id="resetServicesButton" name="reset"
+							th:value="Reset" class="btn btn-secondary" />
 					</div>
 				</div>
 
-		    </fieldset>
+			</fieldset>
 		</form>
 
 		<div class="row mb-3 mt-5">
 			<div class="col text-center">
-			    <div class="content-heading"><h2>Configure Proxy</h2></div>
+				<div class="content-heading">
+					<h2>Configure Proxy</h2>
+				</div>
 			</div>
 		</div>
 
 		<form action="/admin/saveProxy" method="POST">
-		    <fieldset>
+			<fieldset>
 
 				<div class="form-row">
 					<div class="form-group col">
-						<label for="proxy_host">Host</label>
-						<input type="text" id="proxy_host" name="proxy_host" th:value="${proxy_host}" class="form-control"/>
+						<label for="proxy_host">Host</label> <input type="text"
+							id="proxy_host" name="proxy_host" th:value="${proxy_host}"
+							class="form-control" />
 					</div>
 				</div>
 				<div class="form-row">
 					<div class="form-group col">
-						<label for="proxy_port">Port</label>
-						<input type="text" id="proxy_port" name="proxy_port" th:value="${proxy_port}" class="form-control"/>
+						<label for="proxy_port">Port</label> <input type="text"
+							id="proxy_port" name="proxy_port" th:value="${proxy_port}"
+							class="form-control" />
 					</div>
 				</div>
 				<div class="form-row">
 					<div class="form-group col">
-						<label for="proxy_user">User</label>
-						<input type="text" id="proxy_user" name="proxy_user" th:value="${proxy_user}" class="form-control"/>
+						<label for="proxy_user">User</label> <input type="text"
+							id="proxy_user" name="proxy_user" th:value="${proxy_user}"
+							class="form-control" />
 					</div>
 				</div>
 				<div class="form-row">
 					<div class="form-group col">
-						<label for="proxy_pwd">Password</label>
-						<input type="password" id="proxy_pwd" name="proxy_pwd" th:value="${proxy_pwd}" class="form-control"/>
+						<label for="proxy_pwd">Password</label> <input type="password"
+							id="proxy_pwd" name="proxy_pwd" th:value="${proxy_pwd}"
+							class="form-control" />
 					</div>
 				</div>
-				<div class="row">
-					<div class="col text-right" style="padding-right:2px">
-				        <input type="submit" id="submitProxyButton" th:value="Save" class="btn btn-primary mt-2"/>
+				<div class="row" style="margin-top: 20px; margin-bottom: 100px">
+					<div class="col text-right" style="padding-right: 2px">
+						<input type="reset" id="resetProxyButton" name="reset"
+							th:value="Reset"
+							class="btn btn-secondary mt-2 fm-ctrl-left half-btn" />
 					</div>
-					<div class="col" style="padding-left:2px">
-				        <input type="reset" id="resetProxyButton" name="reset" th:value="Reset" class="btn btn-secondary mt-2"/>
+					<div class="col" style="padding-left: 2px">
+						<input type="submit" id="submitProxyButton" th:value="Save"
+							class="btn btn-primary mt-2 fm-ctrl-right half-btn" />
 					</div>
 				</div>
 
-		    </fieldset>
+			</fieldset>
 		</form>
-	
-		<div class="row">
-			<div class="col">
-				<form th:action="@{/logout}" method="post">
-					<input class="btn btn-secondary mb-1" type="submit" value="Sign Out"/>
-				</form>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col">
-				<a th:href="@{/}" class="btn btn-dark mb-5">Go back</a>
-			</div>
-		</div>
-    </div>
-
+	</div>
+	<script type="text/javascript" src="js/admin.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/manager/src/main/resources/templates/error.html b/manager/src/main/resources/templates/error.html
index c968adf..7484746 100644
--- a/manager/src/main/resources/templates/error.html
+++ b/manager/src/main/resources/templates/error.html
@@ -1,86 +1,60 @@
 <!DOCTYPE HTML>
 <html xmlns:th="https://www.thymeleaf.org">
-<head> 
-<title>APP4MC Cloud Manager - Error</title> 
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<link href="webjars/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-<script src="webjars/jquery/3.5.1/jquery.min.js"></script>
-<script type="module" src="webjars/popper.js/1.16.0/popper.min.js"></script>
-<script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+<head th:include="fragment :: fragment_head">
 </head>
 <body>
-	<div class="container">
-		<div class="row justify-content-center">
-			<div class="col text-center" style="height:200px">
-				<img class="img-fluid" style="height:100%" src="/images/Logo_Panorama.png"/>
-			</div>
-		</div>
-		<div class="row align-items-end">
+	<div th:replace="fragment :: fragment_nav"></div>
+	<div class="banner"></div>
+	<div class="container" style="margin-bottom: 100px">
+		<div class="row align-items-end" style="margin-top: 230px">
 			<div class="col">
-			    <div class="content-heading"><h1>An error occured</h1></div>
+				<div class="content-heading">
+					<h1>An error occured</h1>
+				</div>
 			</div>
 		</div>
 		<div class="row mt-3">
-			<div class="col-2">
-				Date
-			</div>
+			<div class="col-2">Date</div>
 			<div class="col">
 				<span th:text="${timestamp}"></span>
 			</div>
 		</div>
 		<div class="row mt-3">
-			<div class="col-2">
-				Path
-			</div>
+			<div class="col-2">Path</div>
 			<div class="col">
 				<span th:text="${path}"></span>
 			</div>
 		</div>
 		<div class="row mt-3">
-			<div class="col-2">
-				Error
-			</div>
+			<div class="col-2">Error</div>
 			<div class="col">
 				<span th:text="${error}"></span>
 			</div>
 		</div>
 		<div class="row mt-3">
-			<div class="col-2">
-				Status
-			</div>
+			<div class="col-2">Status</div>
 			<div class="col">
 				<span th:text="${status}"></span>
 			</div>
 		</div>
 		<div class="row mt-3">
-			<div class="col-2">
-				Message
-			</div>
+			<div class="col-2">Message</div>
 			<div class="col">
 				<span th:text="${message}"></span>
 			</div>
 		</div>
 		<div class="row mt-3">
-			<div class="col-2">
-				Exception
-			</div>
+			<div class="col-2">Exception</div>
 			<div class="col">
 				<span th:text="${exception}"></span>
 			</div>
 		</div>
 		<div class="row mt-3">
-			<div class="col-2">
-				Trace
-			</div>
+			<div class="col-2">Trace</div>
 			<div class="col">
 				<pre th:text="${trace}"></pre>
 			</div>
 		</div>
-		<div class="row">
-			<div class="col">
-				<a th:href="@{/}" class="btn btn-dark mt-5 mb-5">Go back</a>
-			</div>
-		</div>
-    </div>
+	</div>
 </body>
 </html>
diff --git a/manager/src/main/resources/templates/fragment.html b/manager/src/main/resources/templates/fragment.html
new file mode 100644
index 0000000..e15a340
--- /dev/null
+++ b/manager/src/main/resources/templates/fragment.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html xmlns:th="https://www.thymeleaf.org"
+	  xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
+<head th:fragment="fragment_head">
+<title>APP4MC Cloud Manager</title>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<link href="webjars/bootstrap/4.5.2/css/bootstrap.min.css"
+	rel="stylesheet">
+<link href="css/styles.css" rel="stylesheet" />
+<script src="webjars/jquery/3.5.1/jquery.min.js"></script>
+<script type="module" src="webjars/popper.js/1.16.0/popper.min.js"></script>
+<script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+<script src="webjars/font-awesome/5.13.0/js/all.min.js"></script>
+</head>
+<body>
+	<div class="container-fluid navcon" th:fragment="fragment_nav">
+		<nav class="navbar navbar-expand-sm bg-light">
+			<a class="nav-brand" th:href="@{/}"><img style="width: 100%"
+				src="/images/Logo_Panorama_small.png" /></a>
+			<ul class="navbar-nav col-md-10 justify-content-end">
+				<li class="nav-item"><a class="nav-link" th:href="@{/}">Home</a></li>
+				<li class="nav-item"><a class="nav-link" th:href="@{/admin}">Admin</a></li>
+				<li class="nav-item" sec:authorize="isAuthenticated()"><a class="nav-link" th:href="@{/logout}">Logout</a></li>
+				<li class="nav-item" sec:authorize="isAnonymous()"><a class="nav-link" th:href="@{/login}">Login</a></li>
+				<li class="nav-item"><a class="nav-link" th:href="@{/about}">About</a></li>
+			</ul>
+		</nav>
+	</div>
+</body>
+</html>
diff --git a/manager/src/main/resources/templates/index.html b/manager/src/main/resources/templates/index.html
new file mode 100644
index 0000000..7750e6e
--- /dev/null
+++ b/manager/src/main/resources/templates/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html xmlns:th="https://www.thymeleaf.org"
+	  xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
+<head th:replace="fragment :: fragment_head">
+</head>
+<body>
+	<div class="container-fluid hero">
+		<div th:replace="fragment :: fragment_nav"></div>
+		<div class="container cta">
+			<div class="row justify-content-center"
+				style="height: 100px; margin-top: 150px">
+				<img class="img-fluid" style="height: 100%; margin-right: 10px;"
+					src="/images/app4mc-logo.png" />
+			</div>
+			<div class="row justify-content-center">
+				<div class="content-heading">
+					<h1>Cloud Manager</h1>
+				</div>
+			</div>
+			<div class="row" style="margin-top: 30px">
+				<div class="col text-center">
+					<a class="btn btn-primary left-btn" href="/workflow">Start
+						Workflow</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/manager/src/main/resources/templates/login.html b/manager/src/main/resources/templates/login.html
index 0ac12f1..0a6f60b 100644
--- a/manager/src/main/resources/templates/login.html
+++ b/manager/src/main/resources/templates/login.html
@@ -1,65 +1,58 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org"
-      xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
-<head>
-<title>APP4MC Cloud Manager - Login</title>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<link href="webjars/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-<script src="webjars/jquery/3.5.1/jquery.min.js"></script>
-<script type="module" src="webjars/popper.js/1.16.0/popper.min.js"></script>
-<script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+<html xmlns="http://www.w3.org/1999/xhtml"
+	xmlns:th="https://www.thymeleaf.org"
+	xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
+<head th:include="fragment :: fragment_head">
 </head>
 <body>
-	<div class="container">
-		<div class="row justify-content-center">
-			<div class="col text-center" style="height:200px">
-				<img class="img-fluid" style="height:100%" src="/images/Logo_Panorama.png"/>
-			</div>
-		</div>
-		<div class="row">
+	<div th:replace="fragment :: fragment_nav"></div>
+	<div class="banner"></div>
+	<div class="container col-md-7">
+		<div class="row" style="margin-top: 100px">
 			<div class="col text-center">
-			    <div class="content-heading"><h1>Login</h1></div>
+				<div class="content-heading">
+					<h1>Login</h1>
+				</div>
 			</div>
 		</div>
-		<div class="row mt-3 mb-3">
+		<div class="row" style="margin: 130px 0px 0px 0px;">
 			<div th:if="${param.error}">
-			    <div class="content-heading"><h2>Invalid username and password.</h2></div>
+				<div class="content-heading">
+					<h3>Invalid username and password.</h3>
+				</div>
 			</div>
 		</div>
 		<div class="row mt-3 mb-3">
-	        <div th:if="${param.logout}">
-			    <div class="content-heading"><h2>You have been logged out.</h2></div>
-	        </div>
+			<div th:if="${param.logout}">
+				<div class="content-heading">
+					<h3>You have been logged out.</h3>
+				</div>
+			</div>
 		</div>
-		
-	    <form th:action="@{/login}" method="post">
-		    <fieldset>
+
+		<form th:action="@{/login}" method="post">
+			<fieldset>
 
 				<div class="form-row">
 					<div class="form-group col">
-						<label for="username">User Name</label>
-						<input type="text" id="username" name="username"class="form-control"/>
+						<label for="username">User Name</label> <input type="text"
+							id="username" name="username" class="form-control" />
 					</div>
 				</div>
 				<div class="form-row">
 					<div class="form-group col">
-						<label for="password">Password</label>
-						<input type="password" id="password" name="password" class="form-control"/>
+						<label for="password">Password</label> <input type="password"
+							id="password" name="password" class="form-control" />
 					</div>
 				</div>
 				<div class="form-row">
 					<div class="col text-center">
-						<input type="submit" value="Sign In" class="btn btn-primary mt-2"/>
+						<input type="submit" value="Sign In"
+							class="btn btn-primary mt-2 left-btn" />
 					</div>
 				</div>
 			</fieldset>
-        </form>
-
-		<div class="row">
-			<div class="col">
-				<a th:href="@{/}" class="btn btn-dark">Go back</a>
-			</div>
-		</div>
-    </div>
+		</form>
+	</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/manager/src/main/resources/templates/selectedServices.html b/manager/src/main/resources/templates/selectedServices.html
index 66a5b11..ca71761 100644
--- a/manager/src/main/resources/templates/selectedServices.html
+++ b/manager/src/main/resources/templates/selectedServices.html
@@ -8,8 +8,8 @@
     <div th:fragment="servicesList" id="selectedServices" th:object="${workflowStatus}">
 		<ul class="list-group"> 
 			<li th:each="selected : ${workflowStatus.selectedServices}" class="list-group-item d-flex justify-content-between">
-				<p class="p-0 m-0 flex-grow-1" th:text="${selected}">Service</p> 
-				<a th:attr="onclick=|removeSelectedServices('${selected}')|" class="btn btn-secondary btn-sm">remove</a>
+				<p class="p-0 flex-grow-1 plist" th:text="${selected}">Service</p> 
+				<a th:attr="onclick=|removeSelectedServices('${selected}')|" class="btn btn-primary btn-sm btn-rmv"><i class="fas fa-times"></i></a>
 			</li>
 		</ul>
 		<select name="services" id="services" onchange="updateSelectedServices(this.value)" class="form-control">
diff --git a/manager/src/main/resources/templates/status.html b/manager/src/main/resources/templates/status.html
index 537c584..0626bf5 100644
--- a/manager/src/main/resources/templates/status.html
+++ b/manager/src/main/resources/templates/status.html
@@ -26,8 +26,8 @@
 			<ul class="list-group">
 				<li th:each="result : ${workflowStatus.results}" class="list-group-item d-flex justify-content-between">
 					<p class="p-0 m-0 flex-grow-1" th:text="${result.key}">Result</p> 
-					<a class="btn btn-primary btn-sm mr-1" th:href="${result.value}">View</a>
-					<a class="btn btn-secondary btn-sm" th:href="${result.value + '?download=true'}">Download</a>
+					<a class="btn btn-primary btn-sm mr-1 btn-save" th:href="${result.value}"><i class="fas fa-eye"></i></a>
+					<a class="btn btn-secondary btn-sm btn-rmv" th:href="${result.value + '?download=true'}"><i class="fas fa-download"></i></a>
 				</li>
 			</ul>
 			<a th:href="@{/{uuid}/delete(uuid=${workflowStatus.uuid})}" class="btn btn-danger mt-4 mb-4">Delete</a>
diff --git a/manager/src/main/resources/templates/workflow.html b/manager/src/main/resources/templates/workflow.html
index de9203f..77ca235 100644
--- a/manager/src/main/resources/templates/workflow.html
+++ b/manager/src/main/resources/templates/workflow.html
@@ -1,115 +1,60 @@
 <html xmlns:th="https://www.thymeleaf.org">
-<head> 
-<title>APP4MC Cloud Manager - Workflow</title> 
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<link href="webjars/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-<script src="webjars/jquery/3.5.1/jquery.min.js"></script>
-<script type="module" src="webjars/popper.js/1.16.0/popper.min.js"></script>
-<script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-<script type="text/javascript">
-function clearWorkflow() {
-	$.ajax({
-		type: 'POST',
-		url: '/clear',
-		success: function(result) {
-			$('#selectedServicesBlock').load('/selectedServices');
-			$('#messagesBlock').load('/messages');
-			$('#errorsBlock').load('/errors');
-			$('#resultsBlock').load('/results');
-		}
-	});
-}
-
-function updateSelectedServices(service) {
-	$.ajax({
-		type: 'POST',
-		url: '/select/' + service,
-		success: function(result) {
-			$('#selectedServicesBlock').load('/selectedServices');
-		}
-	});
-}
-
-function removeSelectedServices(service) {
-	$.ajax({
-		type: 'POST',
-		url: '/remove/' + service,
-		success: function(result) {
-			$('#selectedServicesBlock').load('/selectedServices');
-		}
-	});
-}
-
-$(document).ready(function(){
-	$('#selectedServicesBlock').load('/selectedServices');
-	$('#messagesBlock').load('/messages');
-	$('#errorsBlock').load('/errors');
-	$('#resultsBlock').load('/results');
-});
-</script>
+<head th:include="fragment :: fragment_head">
 </head>
 <body>
-	<div class="container">
-		<div class="row justify-content-center">
-			<div class="col text-center" style="height:200px">
-				<img class="img-fluid" style="height:100%" src="/images/Logo_Panorama.png"/>
-			</div>
-		</div>
-		<div class="row mb-4">
+	<div th:replace="fragment :: fragment_nav"></div>
+	<div class="banner"></div>
+	<div class="container col-md-7">
+		<div class="row mb-4" style="margin-top: 100px">
 			<div class="col text-center">
-			    <div class="content-heading"><h1>Cloud Service Workflow</h1></div>
+				<div class="content-heading">
+					<h1>Cloud Service Workflow</h1>
+				</div>
 			</div>
 		</div>
 
-		<form method="POST" enctype="multipart/form-data" action="/workflow" th:object="${workflowStatus}">
-			<div class="form-row mb-3">
+		<form method="POST" enctype="multipart/form-data" action="/workflow"
+			th:object="${workflowStatus}">
+			<div class="form-row mb-3" style="margin-top: 130px">
 				<div class="custom-file">
-					<input type="file" class="custom-file-input" id="customFile" name="file">
-					<label class="custom-file-label" for="customFile">Select input file to process</label>
+					<input type="file" class="custom-file-input" id="customFile"
+						name="file"> <label class="custom-file-label"
+						for="customFile">Select input file to process</label>
 					<script>
-			            $('#customFile').on('change',function(){
-			                //get the file name
-			                var fileName = $(this).val().split('\\').pop();
-			                //replace the "Choose a file" label
-			                $(this).next('.custom-file-label').html(fileName);
-			                clearWorkflow();
-			            })
-			        </script>
+						$('#customFile').on('change', function() {
+							//get the file name
+							var fileName = $(this).val().split('\\').pop();
+							//replace the "Choose a file" label
+							$(this).next('.custom-file-label').html(fileName);
+							clearWorkflow();
+						})
+					</script>
 				</div>
 			</div>
 			<div class="form-row">
-				<div class="form-group col">
-					<label >Select service(s) to process</label>
-					<div id="selectedServicesBlock">
-
-					</div>
+				<div class="form-group col" id="wf-fm-group">
+					<label>Select service(s) to process</label>
+					<div id="selectedServicesBlock"></div>
 				</div>
 			</div>
-			<div class="form-row">
+			<div class="form-row" style="margin-top: 20px; margin-bottom: 100px">
 				<div class="col text-center">
-					<input type="submit" value="Start workflow" class="btn btn-primary mt-2" onClick="this.form.submit(); this.disabled=true; this.value='Processing…'; "/>
+					<input type="submit" value="Start workflow"
+						class="btn btn-primary mt-2 left-btn"
+						onClick="this.form.submit(); this.disabled=true; this.value='Processing…'; " />
 				</div>
 			</div>
 		</form>
 
-	<div id="messagesBlock">
+		<div id="messagesBlock"></div>
 
-	</div>
+		<div id="errorsBlock"></div>
 
-	<div id="errorsBlock">
+		<div id="resultsBlock"></div>
 
 	</div>
+	<script type="text/javascript" src="js/workflow.js"></script>
+</body>
 
-	<div id="resultsBlock">
-
-	</div>
-	
-		<div class="row">
-			<div class="col">
-				<a th:href="@{/}" class="btn btn-dark mb-5">Go back</a>
-			</div>
-		</div>
 
-	</div>
-</body>
 </html>
\ No newline at end of file