diff --git a/css/nav.css b/css/nav.css
index 98dc2ba..978fa98 100755
--- a/css/nav.css
+++ b/css/nav.css
@@ -15,7 +15,7 @@
 .nav:hover{
 	text-shadow:
     1px 1px 0 #ffffff,
-  	transition; all .5s;
+  	transition all .5s;
 }
 .nav::before{
 	content:"";
diff --git a/css/waves.css b/css/waves.css
index e6d21ac..04a3fff 100755
--- a/css/waves.css
+++ b/css/waves.css
@@ -57,7 +57,7 @@ p {
 
 .content {
   position:relative;
-  height:14vh;
+  height:5vh;
   text-align:center;
   background-color: white;
 }
@@ -98,7 +98,7 @@ p {
     min-height:40px;
   }
   .content {
-    height:18vh;
+    height:8vh;
   }
   h1 {
     font-size:24px;
diff --git a/index.html b/index.html
index 43da7fe..6265e6f 100644
--- a/index.html
+++ b/index.html
@@ -8,25 +8,40 @@
   <link rel="stylesheet" href="css/nav.css">
   <link rel="stylesheet" href="css/scaler.css">
   <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Quicksand&display=swap" rel="stylesheet">
+  <style>
+    .content-div {
+      opacity: 0;
+      transition: opacity 0.5s ease;
+      display: none; /* Apply only to content divs */
+    }
+    #page-title {
+      /* Initial state should be visible */
+      opacity: 1;
+      transition: opacity 0.5s ease;
+    }
+    .active {
+      display: block;
+      opacity: 1;
+    }
+
+    .footer {
+    text-align: center;
+}
+  </style>
+  
 </head>
 <body>
-<!-- Yea this is ductaped together spaghetti code dont judge me im a sysadmin not a programmer or designer -->
-
 <div class="header">
   <div class="nav-bar" style="font-family: 'Quicksand'">
     <div id="links">
-      <a href="#" class="nav">Home</a>
-      <a href="#" class="nav">Services</a>
-      <a href="#" class="nav">About</a>
-      <a href="#" class="nav">Contact</a>
+      <a href="javascript:void(0);" class="nav" onclick="changeContent('Adastra7')">Home</a>
+      <a href="javascript:void(0);" class="nav" onclick="changeContent('Services')">Services</a>
+      <a href="javascript:void(0);" class="nav" onclick="changeContent('About')">About</a>
+      <a href="javascript:void(0);" class="nav" onclick="changeContent('Contact')">Contact</a>
     </div>
   </div>
-
-<!--stuff here is before da waeves-->
 <div class="inner-header flex">
-
-<!--adaster oder so-->
-<h1 style="font-family: 'Quicksand'">Adastra7</h1>
+<h1 id="page-title" style="font-family: 'Quicksand'">Adastra7</h1>
 </div>
 
 <!--Waves Container thingy i stole-->
@@ -50,11 +65,57 @@ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
 <!--Header ends-->
 
 <!--Content starts-->
-<div class="content flex">
-  <p style="font-family: 'Quicksand'">Adastra7 | 2017-2024</p>
+<div id="Adastra7" class="content content-div active">
+<!-- nothing here lmeo just clean landing page -->
+<p></p>
 </div>
-<!--Content ends-->
-<!-- partial -->
+<div id="Services" class="content content-div">
+  <p style="font-family: 'Quicksand'">Services content here</p>
+</div>
+<div id="About" class="content content-div">
+  <p style="font-family: 'Quicksand'">About content here</p>
+</div>
+<div id="Contact" class="content content-div">
+  <p style="font-family: 'Quicksand'">Contact content here</p>
+</div>
+<!-- Content ends -->
+<div class="footer"><p style="font-family: 'Quicksand'">Adastra7 | 2017-2014</p></div>
+
+<script>
+  function changeContent(pageName) {
+    // Fade out all elements first (they will ignore if already hidden)
+    var contentDivs = document.getElementsByClassName("content-div");
+    for (var i = 0; i < contentDivs.length; i++) {
+      contentDivs[i].style.opacity = '0'; // Start fade out
+    }
+    document.getElementById("page-title").style.opacity = '0'; // Fade out title
   
+    // Wait for the fade out to finish
+    setTimeout(function() {
+      // Hide all content divs after fade out
+      for (var i = 0; i < contentDivs.length; i++) {
+        contentDivs[i].style.display = 'none';
+      }
+  
+      // Change the title and prepare to fade in
+      var title = document.getElementById("page-title");
+      title.innerHTML = pageName;
+      title.style.display = "block"; // Make sure title is ready for fading in
+  
+      // Show and fade in the new active content
+      var activeDiv = document.getElementById(pageName);
+      activeDiv.style.display = 'block';
+      setTimeout(function() { // Start fade in
+        activeDiv.style.opacity = '1';
+        title.style.opacity = '1';
+      }, 10); // Short delay for display changes
+    }, 500); // Match fade effect duration
+  }
+  </script>
+  
+  <script>
+  // Initialize the page with default content
+  window.onload = initPage;
+  </script>
 </body>
 </html>
\ No newline at end of file
