diff --git a/footer.html b/footer.html
new file mode 100644
index 0000000..f3f09d2
--- /dev/null
+++ b/footer.html
@@ -0,0 +1,49 @@
+<footer>
+    <link id="style-footer" rel="stylesheet" href="/css/footer.css">
+    <link id="style-assets" rel="stylesheet" href="/css/assets.css">
+    <div id="footer">
+      <div id="innerFooterBox">
+        <div>
+          <a class="contactIcon" href="https://youtube.com/c/JonasJonesJonasJones/">
+              <div class="contactIconDiv">
+                  <img height="25px" src="youtube_icon.png">
+              </div>
+          </a>
+          <a class="contactIcon" href="https://github.com/J-onasJones/">
+              <div class="contactIconDiv">
+                  <img height="25px" src="github_icon.png">
+              </div>
+          </a>
+          <a class="contactIcon" href="https://discord.gg/V2EsuUVmWh/">
+              <div class="contactIconDiv">
+                  <img height="25px" src="discord_icon.png">
+              </div>
+          </a>
+          <a class="contactIcon" href="https://www.instagram.com/_jonas_jones_/">
+              <div class="contactIconDiv">
+                  <img height="25px" src="instagram_icon.png">
+              </div>
+          </a>
+          <a class="contactIcon" href="https://twitter.com/Jonas_Jones_/">
+              <div class="contactIconDiv">
+                  <img height="25px" src="twitter_icon.png">
+              </div>
+          </a>
+        </div>
+        <div class="vl"></div>
+        <div id="topLinks">
+          <h1>Quick Access</h1>
+          <div><a href="/news/"><img src="/src/iconsnews.png" height="23px" style="padding-right: 10px;">NEWS<i class="arrow right" style="border-color: white;"></i></a></div>
+          <div><a href="/projects/"><img src="/src/icons/projects.png" height="23px" style="padding-right: 10px;">PROJECTS<i class="arrow right" style="border-color: white;"></i></a></div>
+          <div><a href="/youtube/"><img src="/src/icons/youtube.png" height="23px" style="padding-right: 10px;">YOUTUBE<i class="arrow right" style="border-color: white;"></i></a></div>
+          <div><a href="/downloads/"><img src="/src/icons/downloads.svg" height="23px" style="padding-right: 10px;">DOWNLOADS<i class="arrow right" style="border-color: white;"></i></a></div>
+          <div><a></a></div>
+          <div><a href="/about/"><img src="/src/icons/contact.png" height="23px" style="padding-right: 10px;">CONTACT<i class="arrow right" style="border-color: white;"></i></a></div>
+          <div><a href="/license/"><img src="/src/icons/license.png" height="23px" style="padding-right: 10px;">LICENSE <i class="arrow right" style="border-color: white;"></i></a></div>
+        </div>
+      </div>
+    </div>
+    <div class="footer-bar">
+      <a>Website by Jonas_Jones, hosted on <a style="color: white;" href="https://github.com/J-onasJones/J-onasJones.github.io">GitHub</a> - 2022</a>
+    </div>
+</footer>
\ No newline at end of file
diff --git a/header.html b/header.html
new file mode 100644
index 0000000..eb4dd49
--- /dev/null
+++ b/header.html
@@ -0,0 +1,70 @@
+<base target="_parent">
+<header>
+    <link id="style-topnav" rel="stylesheet" href=".src/css/topnav.css">
+    <link id="style-header" rel="stylesheet" href=".src/css/header.css">
+
+    <div class="navbar">
+        <a href="" style="padding: 3px;padding-bottom: 0px;"><img src="/.src/assets/logos/logo_icon.png" height="39px"></a>
+        <a href="/news">News</a>
+        <div class="dropmenu">
+          <button class="dropmenubtn navbarbtn" >Projects<i class="fa fa-caret-down"></i></button>
+          <div class="dropmenu-content">
+            <div class="dropmenu-content-content">
+              <div class="header-mega">
+                <h1>Project Overview</h1>
+                <p><a href="/projects/" style="font-size: 15px;padding: 0px;margin-top: -15px;">View all projects</a></p>
+              </div>   
+              <div class="row">
+                <div class="column">
+                  <h3>Minecraft Mods</h3>
+                  <a href="/projects/microcontrollermc/">MicrocontrollerMC</a>
+                  <a href="/projects/consolemc/">ConsoleMC</a>
+                  <a href="/projects/spotifymc/">SpotifyMC</a>
+                  <a href="/projects/syncmod/">SyncMod</a>
+                  <a href="/projects/mysterymod/">MysteryMod</a>
+                </div>
+                <div class="column">
+                  <h3>Rust/Python</h3>
+                  <a href="/projects/windowsbloatwareremover/">Windows Bloatware Removal Tool</a>
+                  <a href="/projects/bashcommandaliaseditor/">Bash Command Alias Editor</a>
+                  <a href="/projects/pi-mc-watcher/">PI-MC-WATCHER</a>
+                  <a href="/projects/streamdeckui-pluginloader/">StreamDeck UI Pluginloader</a>
+                  <a href="/projects/resourcepack-editor/">Resourcepack Editor</a>
+                </div>
+                <div class="column">
+                  <h3>Miscellaneous</h3>
+                  <a href="/projects/website/">Homepage</a>
+                </div>
+                <div id="header-mega-all">
+                  <a href="/projects/">View all projects</a>
+                </div>
+              </div>
+            </div>
+          </div>
+      </div>
+      <div class="dropdown">
+        <button class="dropbtn navbarbtn">Youtube<i class="fa fa-caret-down"></i></button>
+        <div class="dropdown-content">
+          <div class="dropdown-content-content">
+            <a href="/youtube/">Info</a>
+            <a href="http://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg">Visit channel</a>
+            <a href="http://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg?sub_confirmation=1">Subscribe</a>
+          </div>
+          
+        </div>
+      </div>
+      <a href="/about/">About</a>
+      <a href="/contact/">Contact</a>
+      <a style="background-color: orange;color: #333333;" href="/construction/"><img style="padding-top: 5px;" src="/.src/assets/warning-symbolic-dark.png" height="17px"> Website under construction</a>
+      <div class="expandonhover">
+        <a href="/account/" ><img src="/.src/assets/account.png" height="18px"></a>
+        <a id="floatinright" href="/signup/" >Sign Up</a>
+        <a id="floatinright" href="/login/" >Login</a>
+      </div>
+      <a style="float: right;" onclick="toggleDarkMode();"><img src="/.src/assets/dark-mode.png" height="18px"></a>
+  
+      <div id="header">
+        
+      </div>
+    </div>
+  </header>
\ No newline at end of file