diff --git a/events.html b/events.html
index 3974e72..34b768d 100644
--- a/events.html
+++ b/events.html
@@ -14,6 +14,10 @@
     <link rel="icon" href="renders/logo.png">
     <link rel="stylesheet" href="preloader.css">
     <!-- <link rel="stylesheet" href="team.css"> -->
+    <link href="https://fonts.googleapis.com/css?family=Permanent+Marker|Rock+Salt|Ubuntu+Condensed&display=swap" rel="stylesheet">
+    
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="navigation.css">
     <title>Exodia - This time for tropical</title>
 </head>
 
@@ -30,7 +34,7 @@
             x.remove();
         }
        </script>
-    <div class="pos-f-t fixed-top" id="navigation">
+   <!--  <div class="pos-f-t fixed-top" id="navigation">
         <div class="collapse" id="navbarToggleExternalContent">
           <div class="bg-dark p-4">
             <a href="index.html"><h4 class="text-white">Home</h4></a>
@@ -53,8 +57,34 @@
             <span class="navbar-toggler-icon"></span>
           </button>
         </nav>
-      </div>
+      </div> -->
+<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-light">
+      <a class="navbar-brand testnav" href="#">Exodia</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
 
+      <div class="collapse navbar-collapse " id="navbarSupportedContent">
+        <ul class="navbar-nav ml-auto ">
+          <li class="nav-item active">
+            <a class="nav-link slide-middle-out" href="index.html">Home <span class="sr-only">(current)</span></a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link slide-middle-out" href="events.html">Events</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link slide-middle-out" href="team.html">Team</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link slide-middle-out" href="workshopevents.html">Workshops</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link slide-middle-out" href="register.html">Register</a>
+          </li>
+        </ul>
+        
+      </div>
+    </nav>
 
 
     <div class="text-center" id="heading_of_page" style="padding-bottom: 5%;padding-top:15%; background-image: url(renders/events); background-attachment: fixed; background-repeat: no-repeat;background-size: cover;">
diff --git a/index.html b/index.html
index b608d88..28d735f 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,7 @@
     <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
     <link rel="icon" href="renders/logo.png">
     <link rel="stylesheet" href="preloader.css">
+
     <script src='scroll.js'></script>
 
     <title>Exodia - This time for tropical</title>
@@ -43,7 +44,7 @@
     <div class="pos-f-t fixed-top hidden" id="navigation">
         <div class="collapse" id="navbarToggleExternalContent">
           <div class="bg-dark p-4">
-            <a href="index.html"><h4 class="text-white">Home</h4></a>
+            <a href="index.html"><h4 class="text-white slide-middle-out">Home</h4></a>
           </div>
           <div class="bg-dark p-4">
             <a href="events.html"><h4 class="text-white">Events</h4></a>
diff --git a/navigation.css b/navigation.css
new file mode 100644
index 0000000..7fb57d4
--- /dev/null
+++ b/navigation.css
@@ -0,0 +1,69 @@
+.bg-dark{
+	background-color:#0b0b0c!important;
+}
+.navbar-dark .navbar-toggler {
+    color: rgba(21, 19, 19, 0.5);
+    border-color: #f8f9fa;
+}
+.text-white{
+color: #fff;
+    font-family: 'Permanent Marker', cursive!important;
+}
+.exodiatext{
+	    font-family: 'Rock Salt', cursive;
+    font-weight: 900;
+    font-size: 18px;
+    letter-spacing: 3px;
+    color: #fff !important;
+    }
+.testnav{
+	font-family: 'Rock Salt', cursive;
+	font-weight: 900;
+	font-size: 20px;
+	letter-spacing: 3px;
+	color:#fff !important;
+}
+.bg-light {
+    background-color: #000!important;
+}
+.nav-link{
+	color:#fff !important;
+	font-size:16px!important;
+	padding-right:15px!important;
+}
+.nav-item{
+
+	color:#fff;
+	font-family: 'Permanent Marker', cursive!important
+	font-size:30px;
+
+	color:#fff !important;
+}
+.nav-bar .fa-bars {
+    font-size: 35px;
+    color: #fff;
+}
+.navbar-toggler{
+	background-color:#fff;
+}
+ .slide-middle-out {
+    display: inline-block;
+    border-radius: 24px;
+    position: relative;
+    padding-bottom: 3px;
+}
+.slide-middle-out:after {
+    content: '';
+    display: block;
+    margin: auto;
+    border-radius: 24px;
+    margin-top: 0px;
+    height: 2px;
+    width: 0px;
+    background: transparent;
+    transition: width .5s ease, background-color .5s ease;
+}
+.slide-middle-out:hover:after {
+    width: 100%;
+    background: #0e88e8;
+}
diff --git a/register.html b/register.html
index a5f2d12..442347f 100644
--- a/register.html
+++ b/register.html
@@ -14,6 +14,10 @@
     <link rel="icon" href="renders/logo.png">
     <link rel="stylesheet" href="preloader.css">
     <link rel="stylesheet" type="text/css" href="new.css">
+    <link href="https://fonts.googleapis.com/css?family=Permanent+Marker|Rock+Salt|Ubuntu+Condensed&display=swap" rel="stylesheet">
+    
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="navigation.css">
     <title>Exodia - This time for tropical</title>
 </head>
 
@@ -30,41 +34,34 @@
         }
     </script>
     <div class="pos-f-t fixed-top" id="navigation">
-        <div class="collapse" id="navbarToggleExternalContent">
-            <div class="bg-dark p-4">
-                <a href="index.html">
-                    <h4 class="text-white">Home</h4>
-                </a>
-            </div>
-            <div class="bg-dark p-4">
-                <a href="events.html">
-                    <h4 class="text-white">Events</h4>
-                </a>
-            </div>
-            <div class="bg-dark p-4">
-                <a href="team.html">
-                    <h4 class="text-white">Team</h4>
-                </a>
-            </div>
-            <div class="bg-dark p-4">
-                <a href="workshopevents.html">
-                    <h4 class="text-white">Workshops</h4>
-                </a>
-            </div>
-            <div class="bg-dark p-4">
-                <a href="register.html">
-                    <h4 class="text-white">Register</h4>
-                </a>
-            </div>
-        </div>
-        <nav class="navbar navbar-dark bg-dark">
-            <button class="navbar-toggler" type="button" data-toggle="collapse"
-                data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent"
-                aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-        </nav>
-    </div>
+   <nav class="navbar navbar-expand-lg sticky-top navbar-light bg-light">
+      <a class="navbar-brand testnav" >Exodia</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse " id="navbarSupportedContent">
+        <ul class="navbar-nav ml-auto ">
+          <li class="nav-item active">
+            <a class="nav-link slide-middle-out" href="index.html">Home <span class="sr-only">(current)</span></a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link slide-middle-out" href="events.html">Events</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link slide-middle-out" href="team.html">Team</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link slide-middle-out" href="workshopevents.html">Workshops</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link slide-middle-out" href="register.html">Register</a>
+          </li>
+        </ul>
+        
+      </div>
+    </nav>
+
 
     <!-- register page -->
     <div class="text-center" id="heading_of_page" style="padding-bottom: 5%;padding-top:15%;margin-bottom: 5%; background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url(Registration.jpg); background-attachment: fixed; background-repeat: no-repeat;background-size: cover;">
diff --git a/team.html b/team.html
index 1812d7a..0a2668c 100644
--- a/team.html
+++ b/team.html
@@ -15,6 +15,10 @@
     <link rel="stylesheet" href="preloader.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <!-- <link rel="stylesheet" href="team.css"> -->
+    <link href="https://fonts.googleapis.com/css?family=Permanent+Marker|Rock+Salt|Ubuntu+Condensed&display=swap" rel="stylesheet">
+    
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="navigation.css">
     <title>Exodia - This time for tropical</title>
 </head>
 
@@ -30,7 +34,7 @@
             x.remove();
         }
        </script>
-    <div class="pos-f-t fixed-top" id="navigation">
+    <!-- <div class="pos-f-t fixed-top" id="navigation">
         <div class="collapse" id="navbarToggleExternalContent">
           <div class="bg-dark p-4">
             <a href="index.html"><h4 class="text-white">Home</h4></a>
@@ -53,7 +57,34 @@
             <span class="navbar-toggler-icon"></span>
           </button>
         </nav>
+      </div> -->
+      <nav class="navbar navbar-expand-lg sticky-top navbar-light bg-light">
+      <a class="navbar-brand testnav" href="#">Exodia</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse " id="navbarSupportedContent">
+        <ul class="navbar-nav ml-auto ">
+          <li class="nav-item active">
+            <a class="nav-link slide-middle-out" href="index.html">Home <span class="sr-only">(current)</span></a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link slide-middle-out" href="events.html">Events</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link slide-middle-out" href="team.html">Team</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link slide-middle-out" href="workshopevents.html">Workshops</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link slide-middle-out" href="register.html">Register</a>
+          </li>
+        </ul>
+        
       </div>
+    </nav>
 
 <div class="text-center " id="heading_of_page" style="padding-bottom: 5%;padding-top:15%; background:linear-gradient(rgba(10,10,0,0.4),rgba(0,0,0,0.6)), url(renders/teamphotu.png); background-attachment: fixed; background-repeat: no-repeat;background-size: cover;">
         <h1 style="color: rgb(255, 111, 105);" class="sliding-middle-out">Team</h1>
diff --git a/workshopevents.html b/workshopevents.html
index 9b127a1..65a3c0c 100644
--- a/workshopevents.html
+++ b/workshopevents.html
@@ -12,8 +12,13 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
     <link rel="icon" href="renders/logo.png">
+    
     <link rel="stylesheet" href="preloader.css">
-    <!-- <link rel="stylesheet" href="team.css"> -->
+   <!-- <link rel="stylesheet" href="team.css"> -->
+    <link href="https://fonts.googleapis.com/css?family=Permanent+Marker|Rock+Salt|Ubuntu+Condensed&display=swap" rel="stylesheet">
+    
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="navigation.css">
     <title>Exodia - This time for tropical</title>
 </head>
 
@@ -30,7 +35,7 @@
             x.remove();
         }
        </script>
-    <div class="pos-f-t fixed-top" id="navigation">
+  <!--   <div class="pos-f-t fixed-top" id="navigation">
         <div class="collapse bg-danger" id="navbarToggleExternalContent">
           <div class="bg-dark p-4">
             <a href="index.html"><h4 class="text-white">Home</h4></a>
@@ -49,12 +54,39 @@
            </div>
         </div>
         <nav class="navbar navbar-dark bg-dark">
+            <a class="navbar-brand testnav exodiatext" href="#">Exodia</a>
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
         </nav>
-      </div>
+      </div>  -->
+<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-light">
+      <a class="navbar-brand testnav" href="#">Exodia</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
 
+      <div class="collapse navbar-collapse " id="navbarSupportedContent">
+        <ul class="navbar-nav ml-auto ">
+          <li class="nav-item active">
+            <a class="nav-link slide-middle-out" href="index.html">Home <span class="sr-only">(current)</span></a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link slide-middle-out" href="events.html">Events</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link slide-middle-out" href="team.html">Team</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link slide-middle-out" href="workshopevents.html">Workshops</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link slide-middle-out" href="register.html">Register</a>
+          </li>
+        </ul>
+        
+      </div>
+    </nav>
 
 
     <div class="text-center" id="heading_of_page" style="padding-bottom: 5%;padding-top:15%; background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url(workshop1.jpeg); background-attachment: fixed; background-repeat: no-repeat;background-size: cover;">
@@ -174,6 +206,9 @@ <h2 class="text-center" style="width: 100%;">Bionic Hand</h2>
     </div>
     <!--footer start -->
     <script src="./script.js"></script>
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 </body>
 
 </html>
\ No newline at end of file