diff --git a/css/Style.css b/css/Style.css
index ae8b57b..df36820 100644
--- a/css/Style.css
+++ b/css/Style.css
@@ -9,6 +9,56 @@ html, body {
     padding: 0;
 }
 
+#nav-ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
+
+.nav-li {
+    display: block;
+    float: right;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    list-style-type: none;
+    margin: 0 30px 0 0;
+}
+
+.nav-li a {
+    padding: 10px 15px;
+    color: #333; 
+    color: rgba(255,255,255, 0.8);
+    text-decoration: none;
+    font-weight: bold;
+    text-shadow: 0 1px 1px rgba(0,0,0, 0.3);
+    -webkit-transition: all 0.75s ease-in-out;
+    -moz-transition: all 0.75s ease-in-out;
+    -o-transition: all 0.75s ease-in-out;
+    transition: all 0.75s ease-in-out;
+}
+
+.nav-li a:hover, a:focus {
+    color: #fff;
+    background: #fff; 
+    background: rgba(255,255,255, 0.2);
+    -webkit-border-radius: 4px; 
+    -moz-border-radius: 4px; 
+    border-radius: 4px; 
+  }
+
+#logo{
+    float: left;
+    font-weight: bold;
+    margin: 0  0 0 30px;
+}
+
 .container{
     padding: 0;
     margin: 0;
diff --git a/index.html b/index.html
index 619503a..fbff216 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <link href="css/Style.css" rel="stylesheet" type="text/css">
     <title>Chemistry 101 - 3 stages of matter</title>
@@ -7,23 +8,40 @@
     <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 </head>
 <embed name="levelup" src="mp3/levelup.mp3" loop="false" hidden="true" autostart="true">
+
 <body>
+
+
+
     <div class="container">
+
+        <header id="header">
+            <nav id="nav-container">
+                <ul id="nav-ul">
+                    <li class="nav-li" id="logo"><a href="">X-Solid</a></li>
+                    <li class="nav-li"><a href="news.asp">News</a></li>
+                    <li class="nav-li"><a href="contact.asp">Contact</a></li>
+                    <li class="nav-li"><a href="about.asp">About</a></li>
+                </ul>
+            </nav>
+        </header>
+
         <h1>Water (H2O) ∞ Steam (🔥)</h1>
         <div class="image-container">
             <div class="image-caption-container">
-                <img src="img/water.png" alt="water image"> 
-                <p>You must be shapeless, formless, like water</p>               
+                <img src="img/water.png" alt="water image">
+                <p>You must be shapeless, formless, like water</p>
             </div>
             <div id="infinity">&infin;</div>
             <div class="image-caption-container">
                 <img src="img/steam.png" alt="steam image">
                 <p>There is a force more powerful than steam and electricity: the will</p>
-            </div>      
+            </div>
         </div>
         <div class="footer">
             Designed by <a href=" https://github.com/adlyloukil/x-solid">contributers</a> during Hacktoberfest 2019
         </div>
     </div>
 </body>
-</html>
+
+</html>
\ No newline at end of file
