diff --git a/app.vue b/app.vue
index c75c62a..c0c5700 100644
--- a/app.vue
+++ b/app.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <link :href="'/themes/' + currentTheme + '.css'" rel="stylesheet" type="text/css"></link>
+    <link :href="'/themes/' + current_theme + '.css'" rel="stylesheet" type="text/css"></link>
     <Banner v-if="banner" />
     <NuxtPage :keepalive="true" />
   </div>
@@ -10,10 +10,10 @@
 
 const banner = useState("banner", () => false);
 
-let currentTheme = "dark" // default theme
-const savedTheme = localStorage.getItem("selectedTheme");
-if (savedTheme) {
-	currentTheme = savedTheme;
+let current_theme = "dark" // default theme
+const saved_theme = localStorage.getItem("selectedTheme");
+if (saved_theme) {
+	current_theme = saved_theme;
 }
 </script>
 
diff --git a/components/MemberEntry.vue b/components/MemberEntry.vue
index 3eed3c5..48c9242 100644
--- a/components/MemberEntry.vue
+++ b/components/MemberEntry.vue
@@ -19,8 +19,7 @@ const props = defineProps<{
 const isPopupVisible = ref(false);
 
 const togglePopup = () => {
-    isPopupVisible.value = false;
-    // isPopupVisible.value = !isPopupVisible.value;
+    isPopupVisible.value = !isPopupVisible.value;
 };
 
 const hidePopup = () => {
diff --git a/components/Message.vue b/components/Message.vue
index e8a91b5..b6b38cc 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -77,15 +77,18 @@ onMounted(async () => {
 //	showHover.value = !showHover.value;
 //}
 
-function getDayDifference(date1: Date, date2: Date) {
-    const midnight1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
-    const midnight2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+function getDayDifference(date_1: Date, date_2: Date) {
+// Normalize both dates to midnight
+    const midnight1 = new Date(date_1.getFullYear(), date_1.getMonth(), date_1.getDate());
+    const midnight2 = new Date(date_2.getFullYear(), date_2.getMonth(), date_2.getDate());
 
+    // Calculate the difference in time
     const timeDifference = midnight2.getTime() - midnight1.getTime();
 
+    // Convert time difference from milliseconds to days
     const dayDifference = timeDifference / (1000 * 60 * 60 * 24);
 
-    return Math.round(dayDifference);
+    return Math.round(dayDifference); // Round to the nearest whole number
 }
 
 </script>
diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
index 85589e7..4247c60 100644
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -1,16 +1,33 @@
 <template>
-  <div v-if="user">
-    <h1>Account</h1>
+  <div>
+    <h1>My Account</h1>
 
-    <p class="subtitle">E-MAIL</p>
-    <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.email" placeholder="john@example.org" />
-    <br>
-    <Button text="Submit" :callback=changeEmail style="margin-top: .4em"></Button>
+    <div class="profile-container">
+      <div class="user-data-fields" v-if="user">
+        <p class="subtitle">AVATAR</p>
+        <Button text="Change Avatar" :callback="changeAvatar" style="margin-right: 0.8dvw;"></Button>
+        <Button text="Remove Avatar" :callback="removeAvatar" variant="neutral"></Button>
+        
+        <label for="profile-display-name-input" class="subtitle">DISPLAY NAME</label>
+        <input id="profile-display-name-input" class="profile-data-input" type="text" v-model="user.display_name" placeholder="Enter display name" />
+        <label for="profile-username-input" class="subtitle">USERNAME</label>
+        <input id="profile-username-input" class="profile-data-input" type="text" v-model="user.username" placeholder="Enter username" />
+        <label for="profile-pronouns-input" class="subtitle">PRONOUNS</label>
+        <input id="profile-pronouns-input" class="profile-data-input" type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
+        <label for="profile-about-me-input" class="subtitle">ABOUT ME</label>
+        <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.about" placeholder="About me" />
+
+        <br>
+        <Button style="margin-top: 1dvh" text="Save Changes" :callback="saveChanges"></Button>
+      </div>
+
+      <UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
+    </div>
+
+    <h2 style="margin-top: 8duservh">Password (and eventually authenticator)</h2>
+    <Button text="Reset Password (tbd)" :callback=resetPassword></Button>
     
-    <p class="subtitle">PASSWORD</p>
-    <Button text="Reset Password" :callback=resetPassword></Button>
-    
-    <p class="subtitle">ACCOUNT DELETION</p>
+    <h2>Account Deletion</h2>
     <Button text="Delete Account (tbd)" :callback=deleteAccount variant="scary"></Button>
 
   </div>
@@ -27,13 +44,22 @@ if (!user) {
   alert("could not fetch user info, aborting :(")
 }
 
-async function changeEmail() {
+let newPfpFile: File;
+
+const saveChanges = async () => {
   if (!user) return;
-
-
+  
   const formData = new FormData()
+  
+  if (newPfpFile) {
+    formData.append("avatar", newPfpFile)
+  }
+  
   const bytes = new TextEncoder().encode(JSON.stringify({
-    email: user.email,
+    display_name: user.display_name,
+    username: user.username,
+    pronouns: user.pronouns,
+    about: user.about,
   }));
   formData.append('json', new Blob([bytes], { type: 'application/json' }));
   
@@ -52,29 +78,58 @@ async function changeEmail() {
 };
 
 
-async function resetPassword () {
-  await fetchWithApi("/auth/reset-password", {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    query: {
-      identifier: user?.username
-    }
-  });
+const removeAvatar = async () => {
+  alert("TBD")
+  // await fetchWithApi(`/auth/reset-password`);
 }
 
-async function deleteAccount() {
+const changeAvatar = async () => {
+  if (!user) return;
+
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = 'image/*';
+
+  input.addEventListener("change", (e: Event) => {
+    if (input.files?.length && input.files.length > 0) {
+      const file = input.files[0];
+      if (!file) return;
+
+      newPfpFile = file
+      
+      const reader = new FileReader();
+      reader.addEventListener("onload", () => {
+        if (reader.result && typeof reader.result === 'string') {
+          user.avatar = reader.result;
+        }
+      });
+      reader.readAsDataURL(file);
+    }
+  })
+
+  input.click()
+}
+
+const resetPassword = async () => {
+  alert("TBD")
+  // await fetchWithApi(`/auth/reset-password`);
+}
+
+const deleteAccount = async () => {
   alert("TBD")
 }
 </script>
 
 <style scoped>
+.profile-container {
+  display: flex;
+}
+
 .subtitle {
   display: block;
   font-size: 0.8em;
   font-weight: 800;
-  margin: 4dvh 0 0.5dvh 0.25dvw;
+  margin: 1.5dvh 0 0.5dvh 0.25dvw;
 }
 
 .user-data-fields {
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
deleted file mode 100644
index ed7da0a..0000000
--- a/components/Settings/UserSettings/Profile.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-  <div>
-    <h1>Profile</h1>
-
-    <div class="profile-container">
-      <div class="user-data-fields" v-if="user">
-        <p class="subtitle">AVATAR</p>
-        <Button text="Change Avatar" :callback="changeAvatar" style="margin-right: 0.8dvw;"></Button>
-        <Button text="Remove Avatar" :callback="removeAvatar" variant="neutral"></Button>
-        
-        <label for="profile-display-name-input" class="subtitle">DISPLAY NAME</label>
-        <input id="profile-display-name-input" class="profile-data-input" type="text" v-model="user.display_name" placeholder="Enter display name" />
-        <label for="profile-username-input" class="subtitle">USERNAME</label>
-        <input id="profile-username-input" class="profile-data-input" type="text" v-model="user.username" placeholder="Enter username" />
-        <label for="profile-pronouns-input" class="subtitle">PRONOUNS</label>
-        <input id="profile-pronouns-input" class="profile-data-input" type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
-        <label for="profile-about-me-input" class="subtitle">ABOUT ME</label>
-        <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.about" placeholder="About me" />
-
-        <Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
-      </div>
-
-      <UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import Button from '~/components/Button.vue';
-import type { UserResponse } from '~/types/interfaces';
-
-const { fetchUser } = useAuth();
-
-const user: UserResponse | undefined = await fetchUser()
-if (!user) {
-  alert("could not fetch user info, aborting :(")
-}
-
-let newPfpFile: File;
-
-async function saveChanges() {
-  if (!user) return;
-  
-  const formData = new FormData()
-  
-  if (newPfpFile) {
-    formData.append("avatar", newPfpFile)
-  }
-  
-  const bytes = new TextEncoder().encode(JSON.stringify({
-    display_name: user.display_name,
-    username: user.username,
-    pronouns: user.pronouns,
-    about: user.about,
-  }));
-  formData.append('json', new Blob([bytes], { type: 'application/json' }));
-  
-  try {
-    await fetchWithApi('/me', {
-      method: 'PATCH',
-      body: formData
-    })
-
-    alert('success!!')
-  } catch (error: any) {
-    if (error?.response?.status !== 200) {
-      alert(`error ${error?.response?.status} met whilst trying to update profile info`)
-    }
-  }
-};
-
-
-async function removeAvatar() {
-  alert("TBD")
-  // await fetchWithApi(`/auth/reset-password`);
-}
-
-async function changeAvatar() {
-  if (!user) return;
-
-  const input = document.createElement('input');
-  input.type = 'file';
-  input.accept = 'image/*';
-
-  input.addEventListener("change", (e: Event) => {
-    if (input.files?.length && input.files.length > 0) {
-      const file = input.files[0];
-      if (!file) return;
-
-      newPfpFile = file
-      
-      const reader = new FileReader();
-      reader.addEventListener("onload", () => {
-        if (reader.result && typeof reader.result === 'string') {
-          user.avatar = reader.result;
-        }
-      });
-      reader.readAsDataURL(file);
-    }
-  })
-
-  input.click()
-}
-</script>
-
-<style scoped>
-.profile-container {
-  display: flex;
-}
-
-.subtitle {
-  display: block;
-  font-size: 0.8em;
-  font-weight: 800;
-  margin: 1.5dvh 0 0.5dvh 0.25dvw;
-}
-
-.user-data-fields {
-  min-width: 35dvw;
-  max-width: 35dvw;
-}
-
-.profile-data-input {
-  min-width: 30dvw;
-  margin: 0.07dvh;
-  padding: 0.1dvh 0.7dvw;
-  height: 2.5em;
-  font-size: 1em;
-  border-radius: 8px;
-  border: none;
-  color: var(--text-color);
-  background-color: var(--accent-color);
-}
-
-.profile-popup {
-  margin-left: 2dvw;
-}
-</style>
\ No newline at end of file
diff --git a/pages/settings.vue b/pages/settings.vue
index 991d046..96944ba 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -39,7 +39,6 @@ interface Category {
   pages: Page[];
 }
 
-import Profile from '~/components/Settings/UserSettings/Profile.vue';
 import Account from '~/components/Settings/UserSettings/Account.vue';
 import Privacy from '~/components/Settings/UserSettings/Privacy.vue';
 import Devices from '~/components/Settings/UserSettings/Devices.vue';
@@ -54,8 +53,7 @@ const settingsCategories = {
   userSettings: {
     displayName: "User Settings",
     pages: [
-      { displayName: "Profile", pageData: Profile },
-      { displayName: "Account", pageData: Account },
+      { displayName: "My Account", pageData: Account },
       { displayName: "Privacy", pageData: Privacy },
       { displayName: "Devices", pageData: Devices },
       { displayName: "Connections", pageData: Connections },