diff --git a/components/navbar.html b/components/navbar.html
index 837a182..48be5b3 100644
--- a/components/navbar.html
+++ b/components/navbar.html
@@ -1 +1,4 @@
-<p>Saul Bon Monsieur</p>
\ No newline at end of file
+<nav id="navbar_component">
+    <p>Saul Bon Monsieur</p>
+</nav>
+<div id="navbar_padding"></div>
\ No newline at end of file
diff --git a/css/navbar.css b/css/navbar.css
new file mode 100644
index 0000000..52d0d54
--- /dev/null
+++ b/css/navbar.css
@@ -0,0 +1,14 @@
+#navbar_component {
+    align-items: center;
+    display: flex;
+    height: 5rem;
+    padding: 0 5rem;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    background-color: #f5a122;
+}
+
+#navbar_padding{
+    padding: 2.5rem;
+}
\ No newline at end of file
diff --git a/css/saoulbonmonsieur.css b/css/saoulbonmonsieur.css
index be652db..3081f9a 100644
--- a/css/saoulbonmonsieur.css
+++ b/css/saoulbonmonsieur.css
@@ -1,3 +1,10 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  scroll-behavior: smooth;
+}
+
 .test {
     width: 15%;
     height: 15%;
diff --git a/index.html b/index.html
index b91ac2b..5db3f7b 100644
--- a/index.html
+++ b/index.html
@@ -6,12 +6,16 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <script src="lib/anime.min.js"></script>
+
     <script src="js/componentloader.js"></script>
+    <link href="css/navbar.css" rel="stylesheet">
+
     <link href="css/saoulbonmonsieur.css" rel="stylesheet">
 </head>
 
 <body>
     <div id="navbar"></div>
+    <h1>Saul Bonmonsieur</h1>
     <img class="test" src="assets/saoul.png"></img>
     <button onclick="superAnim()">Animate !</button>
 </body>
