diff --git a/CrabbyHome-web/krabbySite/Icon2.ico b/CrabbyHome-web/krabbySite/Icon2.ico
new file mode 100644
index 0000000..7761faf
Binary files /dev/null and b/CrabbyHome-web/krabbySite/Icon2.ico differ
diff --git a/CrabbyHome-web/krabbySite/Krabbysite.html b/CrabbyHome-web/krabbySite/Krabbysite.html
new file mode 100644
index 0000000..4a49349
--- /dev/null
+++ b/CrabbyHome-web/krabbySite/Krabbysite.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>KrabbyHome</title>
+	<link rel="shortcut icon" href="Icon2.ico"/>
+	<link rel="stylesheet" href="Styles.css"/>
+	
+	<div class="logo-row"> 
+		<img src="kksign.png" alt="logo" class="logo">
+	</div>
+	
+</head>
+
+<!--Hier kan je alles aan en uit zetten-->
+<body>
+<div class="grid-container">
+	<div class="box a">
+		<h1 class="name" >Karen</h1>
+		
+		<div class="button">Ambient lights</div>
+
+		
+	</div>
+	
+<!--Deze laat informatie zien als temperatuur enzo-->
+	<div class="box b">
+		<h1 class="name" >Secret formula</h1>
+		
+		<ul class="text">
+			<li>Time: 1:17am</li>
+			<li>Temperature: 19.9 C</li>
+			<li>No Motion Detected</li>
+		</ul>
+		
+	</div>
+	
+<!--Taken voor je dag-->
+	<div class="box c">
+		<h1 class="name" >To-do list</h1>
+		
+		<ul class="text">
+			<li>Coffee</li>
+			<li>Tea</li>
+			<li>Milk</li>
+			<li>Milk</li>
+			<li>Milk</li>
+			<li>Milk</li>
+		</ul>
+		
+	</div>
+</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/CrabbyHome-web/krabbySite/Styles.css b/CrabbyHome-web/krabbySite/Styles.css
new file mode 100644
index 0000000..a6b0099
--- /dev/null
+++ b/CrabbyHome-web/krabbySite/Styles.css
@@ -0,0 +1,75 @@
+body {
+    background-image: url("background.jpg");
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: 100% 100%;
+}
+
+.logo-row, .name {
+	text-align: center;
+}
+
+.logo {
+	width: 190px;
+	height: 190px;
+	text-align: center;
+}
+
+.grid-container {
+	margin-left: 2vw;
+	margin-right: 2vw;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-auto-rows: 1fr 1fr;
+	grid-gap: 2vw; 
+}
+li {
+	list-style-type: none;
+	font-size: 18px;
+	font-weight: bold;
+}
+.box {
+	background-color: rgba(177, 97, 39, 0.7);
+	border-radius: 15px;
+	float: left;
+
+	border: 5px solid rgb(119, 63, 22);
+	padding: 10px;
+	box-shadow: 5px 10px rgb(51, 27, 9, 0.8);
+
+}
+
+.button {
+	padding: 15px 25px;
+	font-size: 24px;
+	text-align: center;
+	cursor: pointer;
+	outline: none;
+	color: #fff;
+	background-color: #4CAF50;
+	border: none;
+	border-radius: 15px;
+	box-shadow: 0 9px #999;
+  }
+  
+  .button:hover {background-color: #941414}
+  
+  .button:active {
+	background-color: #3e8e41;
+	box-shadow: 0 5px #666;
+	transform: translateY(4px);
+  }
+
+.name {
+	color: #a9322c ;
+	text-shadow: 2px 2px black;
+}
+
+.text {
+	color: black;
+	padding: 30px;
+}
+
+.c {
+	grid-column: 1 / 3;
+}
diff --git a/CrabbyHome-web/krabbySite/background.jpg b/CrabbyHome-web/krabbySite/background.jpg
new file mode 100644
index 0000000..26d62bc
Binary files /dev/null and b/CrabbyHome-web/krabbySite/background.jpg differ
diff --git a/CrabbyHome-web/krabbySite/kksign.png b/CrabbyHome-web/krabbySite/kksign.png
new file mode 100644
index 0000000..4e89a0d
Binary files /dev/null and b/CrabbyHome-web/krabbySite/kksign.png differ
