diff --git a/images/settings.png b/images/settings.png
new file mode 100644
index 0000000..9138955
Binary files /dev/null and b/images/settings.png differ
diff --git a/js/addnavbar.js b/js/addnavbar.js
index 4a17148..dca931b 100644
--- a/js/addnavbar.js
+++ b/js/addnavbar.js
@@ -3,6 +3,7 @@ const navbar = `<ul class="navbar noselect">
   <li><a href="/user" id="hide_user">Profile</a></li>
   <li><a href="/posts" id="hide_posts">Posts</a></li>
   <li><a href="/search" id="hide_search">Search</a></li>
+  <li><a href="/settings" id="hide_settings"><img src="/images/settings.png"></a></li>
 </ul>`
 
 function addnavbar() {
diff --git a/js/settings.js b/js/settings.js
new file mode 100644
index 0000000..8997344
--- /dev/null
+++ b/js/settings.js
@@ -0,0 +1,108 @@
+async function uploadFile() {
+  let file = document.getElementById("avatarUpl").files[0];
+  console.log(file);
+  let formdata = new FormData();
+  formdata.append("avatar", file);
+  let ajax = new XMLHttpRequest();
+  ajax.upload.addEventListener("progress", progressHandler, false);
+  ajax.addEventListener("load", completeHandler, false);
+  ajax.addEventListener("error", errorHandler, false);
+  ajax.addEventListener("abort", errorHandler, false);
+  ajax.open("POST", "/api/setavatar");
+  ajax.send(formdata);
+
+  document.getElementById("avatarUplButton").style = "display:none;";
+}
+
+function completeHandler(event) {
+  console.log("completed upload");
+  console.log(event.target.responseText);
+  setuser()
+}
+
+function errorHandler(event) {
+  console.log("error during upload");
+  console.log(event.target.responseText);
+}
+
+function progressHandler(event) {
+  console.log("progressing upload");
+  console.log("Uploaded " + event.loaded + " bytes of " + event.total);
+  console.log(event.target.responseText);
+}
+
+function getCookie(cname) {
+  let name = cname + "=";
+  let decodedCookie = decodeURIComponent(document.cookie);
+  let ca = decodedCookie.split(';');
+  for(let i = 0; i <ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) == ' ') {
+      c = c.substring(1);
+    }
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+  return "";
+}
+
+function setCookie(cname, cvalue, exdays) {
+  const d = new Date();
+  d.setTime(d.getTime() + (exdays*24*60*60*1000));
+  let expires = "expires="+ d.toUTCString();
+  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+}
+
+function logout() {
+  localStorage.setItem("priv_key","")
+  localStorage.setItem("decryption_key","")
+  location.assign('/logout')
+}
+
+async function setuser() {
+  if(getCookie("priv_key") != "") {
+    localStorage.setItem("priv_key",getCookie("priv_key"))
+    setCookie("priv_key","",0)
+  }
+  let user = await (await fetch("/api/getuser")).json();
+  let username
+  let bio
+  let avatar
+  username = user["username"];
+  bio = user["bio"]
+  avatar = user["avatar"]
+  if(user["error"])username=user["error"];
+  if(user["error"])bio=user["error"];
+  if(!bio)bio="wow such empty"
+  if(avatar) {
+    avatar = "/avatars/"+avatar
+  } else {
+    avatar = "/images/default_avatar.png"
+  }
+  document.getElementById("user").innerText = `User: ${username}`;
+  document.getElementById("bio").placeholder = decodeURIComponent(bio);
+  document.getElementById("avatarimg").src = avatar;
+  document.getElementById("avatarUpl").addEventListener("change", function(){
+    document.getElementById("avatarUplButton").style = "";
+  })
+  document.getElementById("avatarUplButton").addEventListener("click",uploadFile);
+}
+
+async function bioChanger() {
+  document.getElementById("bio").disabled = !document.getElementById("bio").disabled
+  document.getElementById("changeBio").innerText = (document.getElementById("bio").disabled && "Change Bio") || "Submit"
+  if(document.getElementById("bio").disabled) {
+    let response = await sendBio(document.getElementById("bio").value)
+    console.log(response);
+    document.getElementById("userstyle").innerHTML = '::placeholder {color: white;} #bio {border: 0px solid black; color:white;}'
+  }
+  else
+  {
+    document.getElementById("userstyle").innerHTML = '::placeholder {color: white;} #bio {border: 2px solid gray; color:white;}'
+  }
+}
+
+async function sendBio(str) {
+  return await post("/api/setBio",{"Bio":str})
+}
diff --git a/js/user.js b/js/user.js
index 8997344..60676ee 100644
--- a/js/user.js
+++ b/js/user.js
@@ -1,36 +1,3 @@
-async function uploadFile() {
-  let file = document.getElementById("avatarUpl").files[0];
-  console.log(file);
-  let formdata = new FormData();
-  formdata.append("avatar", file);
-  let ajax = new XMLHttpRequest();
-  ajax.upload.addEventListener("progress", progressHandler, false);
-  ajax.addEventListener("load", completeHandler, false);
-  ajax.addEventListener("error", errorHandler, false);
-  ajax.addEventListener("abort", errorHandler, false);
-  ajax.open("POST", "/api/setavatar");
-  ajax.send(formdata);
-
-  document.getElementById("avatarUplButton").style = "display:none;";
-}
-
-function completeHandler(event) {
-  console.log("completed upload");
-  console.log(event.target.responseText);
-  setuser()
-}
-
-function errorHandler(event) {
-  console.log("error during upload");
-  console.log(event.target.responseText);
-}
-
-function progressHandler(event) {
-  console.log("progressing upload");
-  console.log("Uploaded " + event.loaded + " bytes of " + event.total);
-  console.log(event.target.responseText);
-}
-
 function getCookie(cname) {
   let name = cname + "=";
   let decodedCookie = decodeURIComponent(document.cookie);
@@ -83,26 +50,4 @@ async function setuser() {
   document.getElementById("user").innerText = `User: ${username}`;
   document.getElementById("bio").placeholder = decodeURIComponent(bio);
   document.getElementById("avatarimg").src = avatar;
-  document.getElementById("avatarUpl").addEventListener("change", function(){
-    document.getElementById("avatarUplButton").style = "";
-  })
-  document.getElementById("avatarUplButton").addEventListener("click",uploadFile);
-}
-
-async function bioChanger() {
-  document.getElementById("bio").disabled = !document.getElementById("bio").disabled
-  document.getElementById("changeBio").innerText = (document.getElementById("bio").disabled && "Change Bio") || "Submit"
-  if(document.getElementById("bio").disabled) {
-    let response = await sendBio(document.getElementById("bio").value)
-    console.log(response);
-    document.getElementById("userstyle").innerHTML = '::placeholder {color: white;} #bio {border: 0px solid black; color:white;}'
-  }
-  else
-  {
-    document.getElementById("userstyle").innerHTML = '::placeholder {color: white;} #bio {border: 2px solid gray; color:white;}'
-  }
-}
-
-async function sendBio(str) {
-  return await post("/api/setBio",{"Bio":str})
 }
diff --git a/views/settings.html b/views/settings.html
index 6355198..9992e69 100644
--- a/views/settings.html
+++ b/views/settings.html
@@ -1,12 +1,45 @@
 <!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="utf-8">
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>IPost | User settings</title>
+    <link rel="stylesheet" href="/css/style.css">
     <link rel="stylesheet" href="/css/global.css">
+    <script src="/js/addnavbar.js" charset="utf-8"></script>
     <script src="/js/warn_message.js" charset="utf-8"></script>
-  </head>
-  <body>
-
-  </body>
+    <script src="/js/httppost.js" charset="utf-8"></script>
+    <script src="/js/settings.js" charset="utf-8"></script>
+</head>
+<body onload="setuser()">
+  <header>
+      <h1>Welcome Back!</h1>
+  </header>
+  <main>
+    <div class="form_class info_div">
+      <h2 id="user">User: USER</h2>
+      <br>
+      <img id="avatarimg" width=100 height=100>
+      <br>
+      <input name="avatar" class="avatar" id="avatarUpl" type="file" accept="image/png, image/jpeg">
+      <br>
+      <button type="submit" style="display:none;" id="avatarUplButton">Save avatar</button>
+      <br>
+      <br>
+      <span class="bio">Bio: <input type="text" id="bio" disabled placeholder="wow such empty"></span>
+      <button id="changeBio" onclick="bioChanger()">Change Bio</button>
+      <br>
+      <button onclick="location.assign('/changePW')">Want to change your password?</button>
+      <br>
+      <button onclick="location.assign('/changeUsername')">Want to change your username?</button>
+    </div>
+  </main>
+  <footer>
+    Are you a developer that wants to work with our API? You can find the documentation &nbsp <a href="/api/documentation/">here</a> <br>
+    <a href="/PrivacyPolicy">Our PrivacyPolicy</a> <br>
+    <a href="/ToS">Our Terms of Service</a> <br>
+  </footer>
+  <style media="screen" id="userstyle"></style>
+</body>
 </html>
diff --git a/views/user.html b/views/user.html
index 296289c..0efa72c 100644
--- a/views/user.html
+++ b/views/user.html
@@ -22,20 +22,6 @@
       <br>
       <img id="avatarimg" width=100 height=100>
       <br>
-      <input name="avatar" class="avatar" id="avatarUpl" type="file" accept="image/png, image/jpeg">
-      <br>
-      <button type="submit" style="display:none;" id="avatarUplButton">Save avatar</button>
-      <br>
-      <br>
-      <span class="bio">Bio: <input type="text" id="bio" disabled placeholder="wow such empty"></span>
-      <button id="changeBio" onclick="bioChanger()">Change Bio</button>
-      <br>
-      <button onclick="location.assign('/changePW')">Want to change your password?</button>
-      <br>
-      <button onclick="location.assign('/changeUsername')">Want to change your username?</button>
-      <br>
-      <button onclick="location.assign('/posts')">Want to chat with some cool fellas?</button>
-      <br>
       <button onclick="logout()">Logout</button>
     </div>
   </main>