diff --git a/res/setup.html b/res/setup.html
new file mode 100644
index 0000000..ef3851e
--- /dev/null
+++ b/res/setup.html
@@ -0,0 +1,169 @@
+<html>
+	<head>
+		<title>CommonSense</title>
+    <style>
+		body {
+			margin: 0;
+			background-color: #022B3C;
+		}
+
+		#wrapper {
+			position: fixed;
+			width: 80%;
+			margin: 5% 10% 5% 10%;
+			background-color: #93A3B1;
+		}
+
+		#header {
+			background-color: #491D30;
+			text-align: center;
+			vertical-align: middle;
+			color: white;
+			font-weight: bold;
+			font-size: 15pt;
+			border-top-right-radius: 5px;
+			border-top-left-radius: 5px;
+		}
+
+		#header-text {
+			padding: 15px;
+		}
+		
+		#tab {
+			overflow: hidden;
+		}
+
+		#tab button {
+			background-color: inherit;
+			color: white;
+			float: left;
+			border: none;
+			outline: none;
+			cursor: pointer;
+			padding: 14px 16px;
+			transition: 0.3s;
+		}
+		
+		#tab button:hover {
+		  background-color: #DC7D6A;
+		}
+		
+		#tab button.active {
+			background-color: #93A3B1;
+			color: black;
+		}
+
+		.tabcontent {
+			display: none;
+			text-align: left;
+			margin: 20px 10% 20px 10%;
+		}
+
+		#container {
+		    padding: 50px 30% 20px 30%;
+			text-align: left;
+		}
+
+
+		#footer {
+			text-align: center;
+			padding: 10px;
+		}
+
+		.card {
+			box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+			transition: 0.3s;
+			border-radius: 11px 11px 5px 5px;
+		}
+
+		input[type=text], input[type=password] {
+			width: 100%;
+			padding: 12px 20px;
+			margin: 8px 0;
+			display: inline-block;
+			border: 1px solid #ccc;
+			box-sizing: border-box;
+		}
+
+		table tr th {
+			text-align: right;
+		}
+
+		th, td {
+			padding: 0 15px 0 15px;
+		}
+    </style>
+	<script>
+		function openTab(evt, tabName) {
+			// Declare all variables
+			var i, tabcontent, tablinks;
+			
+			// Get all elements with class="tabcontent" and hide them
+			tabcontent = document.getElementsByClassName("tabcontent");
+			for (i = 0; i < tabcontent.length; i++) {
+				tabcontent[i].style.display = "none";
+			}
+			
+			// Get all elements with class="tablinks" and remove the class "active"
+			tablinks = document.getElementsByClassName("tablink");
+			for (i = 0; i < tablinks.length; i++) {
+				tablinks[i].className = tablinks[i].className.replace(" active", "");
+			}
+			
+			// Show the current tab, and add an "active" class to the button that opened the tab
+			document.getElementById(tabName).style.display = "block";
+			evt.currentTarget.className += " active";
+		}
+	</script>
+	</head>
+	<body>
+		<div id="wrapper" class="card">
+			<div id="header">
+				<div id="header-text">
+					CommonSense
+				</div>
+
+				<div id="tab">
+					<button class="tablink" onclick="openTab(event, 'Setup')" id="defaultOpen">Setup</button>
+					<button class="tablink" onclick="openTab(event, 'Info')">Info</button>
+				</div>
+
+			</div>
+			<div id="Setup" class="tabcontent">
+				Please enter the WiFi network name and password below.
+				The device will restart and attempt to connect to the given network.
+				If the connection is unsuccessful, the setup access point will be activated again.
+
+				<form method="post">
+					<div id="container">
+					    <label for="uname"><b>Network</b></label>
+					    <input type="text" placeholder="Enter Network Name" name="uname" required>
+					
+					    <label for="psw"><b>Password</b></label>
+					    <input type="password" placeholder="Enter Password" name="psw" required>
+					        
+					    <button type="submit">Apply & Reboot</button>
+					</div>
+				</form>
+			</div>
+			<div id="Info" class="tabcontent">
+				<table>
+					<tr>
+						<th>Version</th>
+					</tr>
+					<tr>
+						<th>Commit Hash</th>
+					</tr>
+				</table>
+			</div>
+			<div id="footer">
+      			<hr />
+				Copyright &copy Andreas Tsouchlos 2023
+			</div>
+			
+			<script>
+				document.getElementById("defaultOpen").click();
+			</script>
+		</div>
+	</body>
+</html>
