diff --git a/templates/index.html b/templates/index.html
index f4524f0..9e21291 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,23 +1,291 @@
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+<!-- Get jquery files from google -->
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+
+<!-- Got idea and code from https://stackoverflow.com/questions/21566649/flask-button-run-python-without-refreshing-page-->
+<!-- JS script to turn on red LED-->
+<script type=text/javascript>
+	$(function() {
+	  $('a#toggle-red-led').bind('click', function() {
+			console.log("test")
+			return false;
+		});
+	});
+</script>
+
+<!-- JS script to turn on green LED-->
+<script type=text/javascript>
+	function toggleRedLED() {
+  		console.log("toggling Red LED")
+		
+		var xmlHttp = new XMLHttpRequest();
+    	xmlHttp.open( "GET", "http://81.105.156.15:6969/toggle_red_led", false );
+    	xmlHttp.send( null );
+	}
+
+	function toggleGreenLED() {
+		console.log("toggling Red LED")
+
+		var xmlHttp = new XMLHttpRequest();
+		xmlHttp.open( "GET", "http://81.105.156.15:6969/toggle_green_led", false );
+		xmlHttp.send( null );
+	}
+</script>
+
+<!-- JS script to turn off red LED-->
+<script type=text/javascript>
+	$(function() {
+	  $('a#red-led-off').bind('click', function() {
+		$.getJSON('http://81.105.156.15:6969/turn_off_red_led',
+			function(data) {
+		  //do nothing
+		});
+	return false;
+  });
+});
+</script>
+
+<!-- JS script to turn off green LED-->
+<script type=text/javascript>
+	$(function() {
+	  $('a#green-led-off').bind('click', function() {
+		$.getJSON('http://81.105.156.15:6969/turn_off_green_led',
+			function(data) {
+		  //do nothing
+		});
+		return false;
+  });
+});
+</script>
+
 <html>
+	<head>
+		<title>GUI Cam V2</title>
+	</head>
 
-<head>
-	<title>GUI Cam V2</title>
-</head>
+	<body class="page-background">
+		<div class="card-header text-white">
 
-<body style="background-color:#474747;">
-	<h1>GUI Cam V2</h1>
-	<h2>Say hi to everybody's favourite crested gecko!</h2>
-	<div>Temperature = {{ temperature }}°C </div>
-	<div>Humidity = {{ humidity }}% </div>
+			<button class="btn btn-secondary btn-nav-gecko" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+				<img width="40" height="40" class="gecko-icon" src="https://www.flaticon.com/svg/static/icons/svg/47/47371.svg"></img>
 
-	<img src="{{ url_for('video_feed') }}">
-</body>
+				<div class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton">
+					<a class="dropdown-item text-white" href="{{ url_for('old') }}">Legacy website</a>
+					<div class="dropdown-divider"></div>
+					<a class="dropdown-item disabled text-muted">A Flask website by David and Jacques Saunders</a>
+				</div>
+			</button>
 
-<div style="position: absolute; bottom: 5px;">
-	<hr>
-	A Flask website by David Saunders
-	<hr>
-	<a href="{{ url_for('old') }}">Legacy website</a>
-</div>
+			<h1 class="page-title" >GUI Cam V2</h1>
+		</div>
+
+		<div class="d-flex flex-row">
+			<div class="card text-white bg-dark gui-cam-card">
+				<div class="card-header">
+					<img width="20" height="20" class="header-icon" src="https://www.flaticon.com/svg/static/icons/svg/1160/1160041.svg"></img>
+					<b>Live stream</b>
+				</div>
+				<div class="card-body">
+					<p class="card-text">Say hi to everybody's favourite crested gecko!</p>
+					<img class="gui-cam-stream" src="http://81.105.156.15:6969/video_feed"></img>
+				</div>
+			</div>
+
+			<div class="card text-white bg-dark stats-card">
+				<div class="card-header">
+					<img width="25" height="25" class="header-icon" src="https://www.flaticon.com/svg/static/icons/svg/992/992668.svg"></img>
+					<b>Controls</b>
+				</div>
+				<div class="card-body">
+					<table class="table table-dark stats-table">
+						<tbody>
+						  <tr>
+							<td>Red LED</td>
+							<td>
+								<label class="switch">
+									<input type="checkbox" onclick="toggleRedLED()">
+									<span class="slider round"></span>
+								</label>
+							</td>
+						  </tr>
+						  <tr>
+							<td>Green LED</td>
+							<td>
+								<label class="switch">
+									<input type="checkbox" onclick="toggleGreenLED()">
+									<span class="slider round"></span>
+								</label>
+							</td>
+						  </tr>
+						  <tr>
+							<td>Heat Lamp</td>
+							<td>
+								<label class="switch">
+									<input type="checkbox">
+									<span class="slider round"></span>
+								</label>
+							</td>
+						  </tr>
+						</tbody>
+					</table>
+				</div>
+			</div>
+
+			<div class="card text-white bg-dark stats-card">
+				<div class="card-header">
+					<img width="25" height="25" class="header-icon" src="https://www.flaticon.com/svg/static/icons/svg/808/808602.svg"></img>
+					<b>Stats</b>
+				</div>
+				<div class="card-body">
+					<table class="table table-dark stats-table">
+						<tbody>
+						  <tr>
+							<td>Temperature</td>
+							<td>20.4°C</td>
+						  </tr>
+						  <tr>
+							<td>Humidity</td>
+							<td>47%</td>
+						  </tr>
+						  <tr>
+							<td>CPU Temperature</td>
+							<td>60°C</td>
+						  </tr>
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</div>
+	</body>
 
 </html>
+
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+	.btn-nav-gecko {
+		margin-top: 3px;
+		height:45px; 
+		width:50px; 
+		padding-top: 2px;
+		padding-left: 5px;
+		position: absolute;
+		left: 20px;
+	}
+
+	.gecko-icon {
+		left:0%;
+	}
+
+	.header-icon {
+		filter: invert(100%);
+	}
+
+	.page-title {
+		margin-left: 70px;
+		height: 40px;
+	}
+
+	.page-background {
+		background-color:#222;
+	}
+
+	.card-header {
+		background-color:rgba(0,0,0,.2);
+	}
+
+	.gui-cam-card {
+		width:70%;
+		max-height: 50%;
+		margin: 10px;
+		text-align: center;
+	}
+
+	.gui-cam-stream {
+		margin:auto;
+		display:block;
+		height:inherit;
+    	max-width: 95%;
+	}
+
+	.stats-card {
+		margin: 10px;
+		height: fit-content;
+		min-width: fit-content;
+	}
+
+	.stats-table {
+		text-align: center;
+		margin: auto;
+    	margin-top: 10px;
+    	width: 50%;
+	}
+
+	/* The switch - the box around the slider */
+	.switch {
+	  position: relative;
+	  display: inline-block;
+	  width: 60px;
+	  height: 34px;
+	}
+
+	/* Hide default HTML checkbox */
+	.switch input {
+	  opacity: 0;
+	  width: 0;
+	  height: 0;
+	}
+
+	/* The slider */
+	.slider {
+	  position: absolute;
+	  cursor: pointer;
+	  top: 0;
+	  left: 0;
+	  right: 0;
+	  bottom: 0;
+	  background-color: #ccc;
+	  -webkit-transition: .4s;
+	  transition: .4s;
+	}
+
+	.slider:before {
+	  position: absolute;
+	  content: "";
+	  height: 26px;
+	  width: 26px;
+	  left: 4px;
+	  bottom: 4px;
+	  background-color: white;
+	  -webkit-transition: .4s;
+	  transition: .4s;
+	}
+
+	input:checked + .slider {
+	  background-color: #2196F3;
+	}
+
+	input:focus + .slider {
+	  box-shadow: 0 0 1px #2196F3;
+	}
+
+	input:checked + .slider:before {
+	  -webkit-transform: translateX(26px);
+	  -ms-transform: translateX(26px);
+	  transform: translateX(26px);
+	}
+
+	/* Rounded sliders */
+	.slider.round {
+	  border-radius: 34px;
+	}
+
+	.slider.round:before {
+	  border-radius: 50%;
+	}
+	
+</style>
\ No newline at end of file
