diff --git a/js/settings.js b/js/settings.js
index 8997344..9a2adab 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -106,3 +106,33 @@ async function bioChanger() {
 async function sendBio(str) {
   return await post("/api/setBio",{"Bio":str})
 }
+
+
+async function changePW() {
+  if(window.confirm("Are you sure that you want to change your Password?")){
+    let re = await (await post("/api/changePW",{"currentPW":document.getElementById("currentPW_pw").value,"newPW":document.getElementById("newPW").value})).json()
+    document.getElementById("response_pw").innerText = re["error"] || re["success"]
+    document.getElementById("response_pw").style="color:green"
+    if(re["error"]) {
+      document.getElementById("response_pw").style="color:red"
+    }
+    document.getElementById("currentPW").value = ""
+    document.getElementById("newPW").value = ""
+
+    setuser()
+  }
+}
+
+async function changeUsername() {
+  if(window.confirm("Are you sure that you want to change your Username?")){
+    let re = await (await post("/api/changeUsername",{"currentPW":document.getElementById("currentPW_us").value.toString(),"newUsername":document.getElementById("newUsername").value})).json()
+    document.getElementById("response_us").innerText = re["error"] || re["success"]
+    document.getElementById("response_us").style="color:green"
+    if(re["error"]) {
+      document.getElementById("response_us").style="color:red"
+    }
+    document.getElementById("currentPW").value = ""
+    document.getElementById("newUsername").value = ""
+    setuser()
+  }
+}
diff --git a/views/settings.html b/views/settings.html
index 9992e69..60b1c19 100644
--- a/views/settings.html
+++ b/views/settings.html
@@ -30,9 +30,36 @@
       <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>
+        <h3>Change your password</h3>
+        <label for="currentPW_pw">Current Password:</label>
+        <input id="currentPW_pw" placeholder="Current Password" type="password">
+        <br>
+        <br>
+        <label for="newPW">New Password:</label>
+        <input id="newPW" placeholder="New Password" type="password">
+        <br>
+        <br>
+        <button onclick="changePW()">Change Password</button>
+        <br> 
+        <span id="response_pw"></span>
+      </div>
+      <div>
+        <h3>Change your Username</h3>
+        <br>
+        <h1 id="username">Current User: USER</h1>
+        <label for="currentPW_us">Password:</label>
+        <input id="currentPW_us" placeholder="Current Password" type="password">
+        <br>
+        <br>
+        <label for="newUsername">New Username:</label>
+        <input id="newUsername" placeholder="New Username" type="text">
+        <br>
+        <br>
+        <button onclick="changeUsername()">Change Username</button>
+        <br>
+        <span id="response_us"></span>
+      </div>
     </div>
   </main>
   <footer>