diff --git a/css/style.css b/css/style.css
index 4e14f8a..85267a7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -12,3 +12,20 @@ button {
     font-size: 18px;
     margin: 10px;
 }
+
+::placeholder{
+  color: white;
+}
+
+#bio  {
+  color:white;
+  font-size: 20px;
+  background-color: black;
+  border: 0px solid black;
+  border-radius: 7px;
+}
+
+.bio {
+  color:white;
+  font-size: 20px;
+}
diff --git a/views/otheruser.html b/views/otheruser.html
new file mode 100644
index 0000000..2a4a62d
--- /dev/null
+++ b/views/otheruser.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<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>USERS Page</title>
+      <link rel="stylesheet" href="/css/style.css">
+  </head>
+  <body>
+    <h3 id="userName">USER</h3>
+    <h4 id="userBio">Bio: </h4>
+    <button id="mentionClick" onclick="mention()">Mention this User in Posts!</button>
+
+
+    <script type="text/javascript">
+      let other_username = window.location.pathname.split("/")[2]
+      console.log(other_username.search("@"),other_username);
+      if(other_username.search("@")==0)other_username=other_username.split("@")[1]
+      console.log(other_username);
+      async function getuser() {
+        let user = await (await fetch("/api/getotheruser?user="+other_username)).json()
+        document.getElementById('userName').innerText = `${(!user["error"] && "User: "+user.username) || "Error: "+user["error"]}`
+        document.getElementById('userBio').innerText = `${(!user["error"] && "Bio: "+user.bio) || ""}`
+        document.title = `${(!user["error"] && user.username+"'s Page") || "No such User!"}`
+        if(user["error"]) {
+          document.body.removeChild(document.getElementById("mentionClick"))
+        }
+      }
+      getuser()
+
+      function mention() {
+        window.location.href = `/posts?mention=${other_username}`
+      }
+    </script>
+  </body>
+</html>
diff --git a/views/user.html b/views/user.html
index ab3f696..bc55943 100644
--- a/views/user.html
+++ b/views/user.html
@@ -6,10 +6,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Logged In</title>
     <link rel="stylesheet" href="/css/style.css">
+    <script src="/js/httppost.js" charset="utf-8"></script>
 </head>
 <body onload="setuser()">
     <h1>Welcome Back!</h1>
     <h2 id="user">User: USER</h2>
+    <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('/login')">To Login Page</button><button onclick="location.assign('/register')">To Register Page</button>
     <br>
     <button onclick="location.assign('/changePW')">Want to change your password?</button>
@@ -19,9 +24,35 @@
       async function setuser() {
         let user = await (await fetch("/api/getuser")).json();
         let username
+        let bio
         username = user["username"];
+        bio = user["bio"]
         if(user["error"])username=user["error"];
+        if(user["error"])bio=user["error"];
+        if(!bio)bio="wow such empty"
         document.getElementById("user").innerText = `User: ${username}`;
+        document.getElementById("bio").placeholder = bio;
+
+      }
+
+      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) {
+          document.querySelector('style').innerHTML = '::placeholder {color: white;} #bio {border: 0px solid black}'
+        }
+        else
+        {
+          document.querySelector('style').innerHTML = '::placeholder {color: black;} #bio {border: 2px solid gray}'
+        }
+        if(document.getElementById("bio").disabled) {
+          let response = await sendBio(document.getElementById("bio").value)
+          console.log(response);
+        }
+      }
+
+      async function sendBio(str) {
+        return await post("/api/setBio",{"Bio":str})
       }
 
     </script>
