diff --git a/css/style.css b/css/style.css
index 9de2e5d..9519b47 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,21 +1,21 @@
-nav.main-nav ul li.btn-nav1{
-	list-style-type: none;
-	display: inline-block;
+body {
+  font-family: 'Noto Sans', sans-serif;
+  background-color: #333;
+  color: #fff;
 }
-
-nav.main-nav ul li.btn-nav1 a{
-	color: white;
-	background-color: #4C33FF;
-	text-decoration: none;
-	padding: 10px;
-	font-size: 30px;
+.container {
+  width: 80%;
+  margin: auto;
+  border: 2px solid #fff;
+  border-radius: 25px;
+  padding: 20px;
+  background-color: #444;
 }
-
-nav.main-nav ul li.btn-nav1:hover a{
-	background-color: #301D74;
-	transition: 0.5s all;
-}
-
-body{
-	background-color: #101010;
+.nav a {
+  text-decoration: none;
+  color: #fff;
+  padding: 10px 20px;
+  border: 2px solid #fff;
+  border-radius: 25px;
+  background-color: #333;
 }
\ No newline at end of file
diff --git a/img/logo.png b/img/logo.png
new file mode 100644
index 0000000..1e8a593
Binary files /dev/null and b/img/logo.png differ
diff --git a/index.html b/index.html
deleted file mode 100644
index 416a808..0000000
--- a/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<link rel="icon" type="image/png" sizes="16x16" href="img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="css/style.css">
-	<title>Whykioh</title>
-</head>
-<body>
-
-	<nav class="main-nav">
-		<ul>
-			<li class="btn-nav1">
-				<a href="#">
-					Accueil
-				</a>
-			</li>
-			<li class="btn-nav1">
-				<a href="youtube/index.html">
-					Youtube & Twitch
-				</a>
-			</li>
-			<li class="btn-nav1">
-				<a href="swordariastudios/index.html">
-					Swordaria Studios
-				</a>
-			</li>
-			<li class="btn-nav1">
-				<a href="tools/index.html">
-					Outils
-				</a>
-			</li>
-		</ul>
-	</nav>
-
-
-	<h1>
-		Bienvenue sur le site de Whykioh !
-	</h1>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..3d2bdc9
--- /dev/null
+++ b/index.php
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+  <head>
+	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
+	<style>
+body {
+  font-family: 'Noto Sans', sans-serif;
+  background-color: #333;
+  color: #fff;
+}
+.container {
+  width: 80%;
+  margin: auto;
+  border: 2px solid #2ecc71;
+  border-radius: 25px;
+  padding: 20px;
+  background-color: #444;
+}
+.nav a {
+  text-decoration: none;
+  color: #fff;
+  padding: 10px 20px;
+  border: 2px solid #2ecc71;
+  border-radius: 25px;
+  background-color: #333;
+  transition: all 0.3s ease-in-out;
+}
+.nav a:hover {
+  background-color: #2ecc71;
+  color: #333;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+
+.video-container {
+  width: 80%;
+  margin: 20px auto;
+  border: 2px solid #2ecc71;
+  border-radius: 25px;
+  overflow: hidden;
+  padding-bottom: 56.25%;
+  position: relative;
+}
+.video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+header {
+  text-align: left;
+}
+.logo {
+  height: 60px;
+  width: 60px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+}
+.title {
+  display: inline-block;
+  font-size: 48px;
+  line-height: 60px;
+  vertical-align: middle;
+}
+
+      div.footer {
+  width: 80%;
+  margin: auto;
+  border: 2px solid #2ecc71;
+  border-radius: 25px;
+  padding: 20px;
+  background-color: #444;
+          display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    </style>
+	<title>WhyKorp</title>
+  </head>
+  <body>
+    <div class="container">
+<header>
+  <a href="https://www.youtube.com/@whykioh" target="_blank">
+    <img class="logo" src="img/logo.png" alt="Logo">
+  </a>
+  <h1 class="title">WhyKorp</h1>
+</header>
+<style>
+  header {
+    opacity: 0;
+    transition: opacity 1s;
+  }
+  .show {
+    opacity: 1;
+  }
+</style>
+
+<script>
+  window.addEventListener("load", function() {
+    document.querySelector("header").classList.add("show");
+  });
+</script>
+      <div class="nav">
+        <a href="#">Accueil</a>
+        <a href="#">Infos</a>
+		<a href="https://artists.magroove.com/en/lt/whykioh/" target="_blank">Link Tree</a>
+		<a href="#">Outils</a>
+		<a href="#">Ruty</a>
+		<a href="#">LoLivator</a>
+		<a href="#">SNT</a>
+		<a href="#">Archives</a>
+      </div>
+      <div class="video-container">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/N0UmI6L86YY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+      </div>
+    </div>
+	<div class="footer">
+        Copyright | Whykorp® 2021-2024
+      </div>
+  </body>
+</html>
