diff --git a/index.html b/index.html
index 94d2ac9..85ad435 100644
--- a/index.html
+++ b/index.html
@@ -10,11 +10,22 @@
 			<h1>Romain de Laage</h1>
 		</header><nav>
 			<ul>
-				<li>test</li>
-				<li>test</li>
+				<a href="https://cloud.rdelaage.ovh"><li>Cloud</li></a>
+				<a href="https://dev.rdelaage.ovh"><li>Développement</li></a>
+				<a href="https://rdelaage.ovh/cv"><li>CV</li></a>
 			</ul>
 		</nav><section>
-			Lorem ipsum dolor sit amet
+			<div class="logo">
+				<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="225" width="225">
+					<g transform="translate(55,37)" id="content">
+						<rect id="yellow" ry="5" rx="5" y="0" x="0" height="150" width="50" fill="white" />
+						<rect id="blue" ry="5" rx="5" y="0" x="65" height="90" width="50" fill="white" />
+						<circle id="red" r="25" cy="125" cx="90" fill="white" />
+					</g>
+				</svg>
+			</div>
+			<p>Bienvenue sur mon espace personnel.</p>
+			<p>Vous pouvez retrouver mes hébérgements perso sur <a href="#">https://pi.rdelaage.ovh</a> et mon CV <a href="https://rdelaage.ovh/cv">ici</a></p>
 		</section><footer>
 			Made with ❤ by <a href="#">Romain de Laage</a>
 		</footer>
diff --git a/logo.svg b/logo.svg
new file mode 100644
index 0000000..ab06049
--- /dev/null
+++ b/logo.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="225" width="225">
+  <g transform="translate(55,37)" id="content">
+    <rect ry="5" rx="5" y="0" x="0" height="150" width="50" fill="white" />
+    <rect ry="5" rx="5" y="0" x="65" height="90" width="50" fill="white" />
+    <circle r="25" cy="125" cx="90" fill="white" />
+  </g>
+</svg>
diff --git a/style.css b/style.css
index d5a8734..6c76797 100644
--- a/style.css
+++ b/style.css
@@ -2,6 +2,7 @@
 	box-sizing: border-box;
 	margin: 0;
 	font-family: sans-serif;
+	box-sizing: border-box;
 }
 html, body{
 	height: 100%;
@@ -18,12 +19,23 @@ nav{
 	height: calc(100% - 150px);
 	width: 200px;
 	vertical-align:top;
+	background-color: #34495e;
+	color: #D0D0D0;
+	padding: 15px;
+}
+nav ul{
+	list-style-type: none;
+	padding: 0;
 }
 section{
 	display: inline-block;
 	height: calc(100% - 150px);
 	width: calc(100% - 200px);
 	vertical-align:top;
+	background-color: #2c3e50;
+	vertical-align:middle;
+	color: #D0D0D0;
+	padding: 15px;
 }
 footer{
 	background-color: #16a085;
@@ -32,3 +44,29 @@ footer{
 	line-height: 50px;
 	color: #ecf0f1;
 }
+rect, circle{
+	transition: 0.3s;
+	fill: #D0D0D0;
+}
+#yellow:hover{
+	fill: #f6b93b;
+}
+#blue:hover{
+	fill: #1e3799;
+}
+#red:hover{
+	fill: #eb2f06;
+}
+nav li{
+	transition: 0.3s;
+	line-height: 1.5em;
+}
+nav li:hover{
+	background-color: rgba(255, 255, 255, 0.3);
+}
+section .logo{
+	text-align: center;
+}
+a{
+	color: #C0C0C0;
+}