diff --git a/README.md b/README.md
index b86a3a8..ecdb2d5 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # Nuxt Minimal Starter
 
+
+
 Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 
 ## Setup
diff --git a/components/Button.vue b/components/Button.vue
new file mode 100644
index 0000000..db8bb8e
--- /dev/null
+++ b/components/Button.vue
@@ -0,0 +1,44 @@
+<template>
+	<div @click="props.callback()" class="button" :class="props.variant + '-button'">
+		{{ props.text }}
+	</div>
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps<{
+	text: string,
+	callback: CallableFunction,
+	variant?: "normal" | "scary" | "neutral",
+}>();
+
+</script>
+
+<style scoped>
+.button {
+	cursor: pointer;
+
+	background-color: #b35719;
+	color: #ffffff;
+
+	padding: 0.7dvh 1.2dvw;
+	font-size: 1.1em;
+	transition: background-color 0.2s;
+
+	border-radius: 0.7rem;
+	text-decoration: none;
+	display: inline-block;
+}
+
+.scary-button {
+	background-color: red;
+}
+
+.neutral-button {
+	background-color: grey;
+}
+
+.button:hover {
+	background-color: #934410;
+}
+</style>
\ No newline at end of file
diff --git a/components/GuildOptionsMenu.vue b/components/GuildOptionsMenu.vue
deleted file mode 100644
index d024ec8..0000000
--- a/components/GuildOptionsMenu.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div id="guild-options-container">
-    <div v-for="setting of settings" class="guild-option" tabindex="0">
-      <button class="guild-option-button" @click="setting.action">{{ setting.name }}</button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { InvitePopup } from '#components';
-
-
-const showInviteModal = ref(false);
-
-const settings = [
-  { name: "Server Settings", icon: "lucide:cog" },
-  { name: "Invite", icon: "lucide:letter", action: openInviteModal }
-]
-
-function openInviteModal() {
-  //showInviteModal.value = !showInviteModal.value;
-  //const invitePopup = createApp(InvitePopup);
-  //invitePopup
-}
-
-</script>
-
-<style>
-
-#guild-options-container {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  background-color: rgb(20, 20, 20);
-  top: 8dvh;
-  z-index: 10;
-  width: 100%;
-  position: absolute;
-}
-
-.guild-option {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 5dvh;
-}
-
-.guild-option:hover {
-  border: var(--outline-border);
-}
-
-.guild-option-button {
-  border: 0;
-  background-color: transparent;
-  color: var(--main-text-color);
-}
-
-</style>
\ No newline at end of file
diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
new file mode 100644
index 0000000..135c0a1
--- /dev/null
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h1>hi</h1>
+    <h5>TEST</h5>
+    <h5>TEST</h5>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/Settings/AppSettings/Keybinds.vue b/components/Settings/AppSettings/Keybinds.vue
new file mode 100644
index 0000000..ea54137
--- /dev/null
+++ b/components/Settings/AppSettings/Keybinds.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Keybinds (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/Settings/AppSettings/Language.vue b/components/Settings/AppSettings/Language.vue
new file mode 100644
index 0000000..b1c3a8a
--- /dev/null
+++ b/components/Settings/AppSettings/Language.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Language (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/Settings/AppSettings/Notifications.vue b/components/Settings/AppSettings/Notifications.vue
new file mode 100644
index 0000000..2e6de9c
--- /dev/null
+++ b/components/Settings/AppSettings/Notifications.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Notifications (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
new file mode 100644
index 0000000..0fe5013
--- /dev/null
+++ b/components/Settings/UserSettings/Account.vue
@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <h1>My Account</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" />
+
+        <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>
+    
+    <h2>Account Deletion</h2>
+    <Button text="Delete Account (tbd)" :callback=deleteAccount variant="scary"></Button>
+
+  </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;
+
+const saveChanges = async () => {
+  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`)
+    }
+  }
+};
+
+
+const removeAvatar = async () => {
+  alert("TBD")
+  // await fetchWithApi(`/auth/reset-password`);
+}
+
+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: 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: white;
+  background-color: #54361b;
+}
+
+.profile-popup {
+  margin-left: 2dvw;
+}
+</style>
\ No newline at end of file
diff --git a/components/Settings/UserSettings/Connections.vue b/components/Settings/UserSettings/Connections.vue
new file mode 100644
index 0000000..97190ec
--- /dev/null
+++ b/components/Settings/UserSettings/Connections.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Connections (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/Settings/UserSettings/Devices.vue b/components/Settings/UserSettings/Devices.vue
new file mode 100644
index 0000000..7006a12
--- /dev/null
+++ b/components/Settings/UserSettings/Devices.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Devices (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/Settings/UserSettings/Privacy.vue b/components/Settings/UserSettings/Privacy.vue
new file mode 100644
index 0000000..0f1387d
--- /dev/null
+++ b/components/Settings/UserSettings/Privacy.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1>Privacy (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/Button.vue';
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/UserPopup.vue b/components/UserPopup.vue
new file mode 100644
index 0000000..092e7d5
--- /dev/null
+++ b/components/UserPopup.vue
@@ -0,0 +1,85 @@
+<template>
+  <div id="profile-popup">
+    <img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
+    <div id="cover-colour"></div>
+    <div id="main-body">
+      <p id="display-name">
+        <strong>{{ props.user.display_name }}</strong>
+      </p>
+      <p id="username-and-pronouns">
+        {{ props.user.username }}
+        <span v-if="props.user.pronouns"> - {{ props.user.pronouns }}</span>
+      </p>
+      <div id="about-me" v-if="props.user.about">
+        {{ props.user.about }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UserResponse } from '~/types/interfaces';
+
+const { fetchMembers } = useApi();
+
+const props = defineProps<{
+	user: UserResponse
+}>();
+
+</script>
+
+<style scoped>
+#profile-popup {
+  min-width: 300px;
+  max-width: 300px;
+  border-radius: 8px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+#cover-colour {
+  border-radius: 12px 12px 0 0;
+  min-height: 60px;
+  background-color: #442505;
+}
+
+#main-body {
+  border-radius: 0 0 12px 12px;
+  padding: 12px;
+  min-height: 280px;
+  background-color: #4b3018;
+  overflow-wrap: break-word;
+  hyphens: manual;
+}
+
+#avatar {
+  width: 96px;
+  height: 96px;
+  border: 5px solid #4b3018;
+  border-radius: 100%;
+  position: absolute;
+  left: 16px;
+  top: 16px;
+}
+
+#display-name {
+  margin-top: 60px;
+  margin-bottom: 0;
+  font-size: 28px;
+}
+
+#username-and-pronouns {
+  margin: 2px;
+  font-size: 16px;
+}
+
+#about-me {
+  background-color: #34200f;
+  border-radius: 12px;
+
+  margin-top: 32px;
+  padding: 16px;
+  font-size: 16px;
+}
+</style>
\ No newline at end of file
diff --git a/composables/auth.ts b/composables/auth.ts
index 19ac694..0ac2e8b 100644
--- a/composables/auth.ts
+++ b/composables/auth.ts
@@ -75,7 +75,7 @@ export const useAuth = () => {
   async function fetchUser() {
     if (!accessToken.value) return;
     console.log("fetchuser access token:", accessToken.value);
-    const res = await fetchWithApi("/users/me") as UserResponse;
+    const res = await fetchWithApi("/me") as UserResponse;
     user.value = res;
     return user.value;
   }
@@ -88,6 +88,20 @@ export const useAuth = () => {
     return user.value;
   }
 
+  
+  // as in email the password link
+  async function resetPassword() {
+    // ...
+  }
+
+  async function disableAccount() {
+    // ...
+  }
+
+  async function deleteAccount() {
+    // ...
+  }
+
   return {
     accessToken,
     register,
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index b3d492a..c9aa8d2 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -1,13 +1,21 @@
 <template>
 	<NuxtLayout name="client">
 		<div id="middle-left-column" class="main-grid-row">
-			<div id="server-name-container">
-				<span id="server-name">{{ server?.name }}</span>
-				<button id="server-settings-button" @click="toggleGuildSettings">
-					<Icon id="server-settings-icon" name="lucide:chevron-down" />
-				</button>
-				<GuildOptionsMenu v-if="showGuildSettings" />
-				<InvitePopup v-if="showInvitePopup" />
+			<div id="server-title">
+				<h3>
+					{{ server?.name }}
+					<span>
+						<button @click="showGuildSettings">
+							<Icon name="lucide:settings" />
+						</button>
+					</span>
+					<span>
+						<button @click="toggleInvitePopup">
+							<Icon name="lucide:share-2" />
+						</button>
+					</span>
+					<InvitePopup v-if="showInvitePopup" />
+				</h3>
 			</div>
 			<div id="channels-list">
 				<Channel v-for="channel of channels" :name="channel.name"
@@ -41,7 +49,6 @@ const channels = ref<ChannelResponse[] | undefined>();
 const channel = ref<ChannelResponse | undefined>();
 
 const showInvitePopup = ref(false);
-const showGuildSettings = ref(false);
 
 import type { ChannelResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
 
@@ -65,10 +72,7 @@ onMounted(async () => {
 	console.log("channelid: set loading to false");
 });
 
-function toggleGuildSettings(e: Event) {
-	e.preventDefault();
-	showGuildSettings.value = !showGuildSettings.value;
-}
+function showGuildSettings() { }
 
 function toggleInvitePopup(e: Event) {
 	e.preventDefault();
@@ -128,24 +132,4 @@ function toggleInvitePopup(e: Event) {
 	text-overflow: ellipsis;
 }
 
-#server-name-container {
-	padding-top: 3dvh;
-	padding-bottom: 3dvh;
-	display: flex;
-	justify-content: center;
-	position: relative;
-}
-
-#server-name {
-	font-size: 1.5em;
-}
-
-#server-settings-button {
-	background-color: transparent;
-	font-size: 1em;
-	color: white;
-	border: none;
-	padding: 0%;
-}
-
 </style>
\ No newline at end of file
diff --git a/pages/settings.vue b/pages/settings.vue
new file mode 100644
index 0000000..5db18fe
--- /dev/null
+++ b/pages/settings.vue
@@ -0,0 +1,159 @@
+<template>
+  <div id="settings-page-container">
+    <div id="settings-page">
+      <div id="sidebar">
+        <h4>(Search bar here)</h4>
+        <ul>
+          <div v-for="category in categories" :key="category.displayName">
+            <h2>{{ category.displayName }}</h2>
+            <li v-for="page in category.pages" :key="page.displayName" @click="selectCategory(page)"
+              :class="{ 'sidebar-focus': selectedPage === page.displayName }">
+              {{ page.displayName }}
+            </li>
+            <span class="spacer"></span>
+          </div>
+
+          <Button text="Log Out" :callback=logout variant="scary"></Button>
+        </ul>
+      </div>
+      <div id="sub-page">
+        <component :is="currentPage.pageData" />
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script lang="ts" setup>
+import Button from '~/components/Button.vue';
+
+const { logout } = useAuth()
+
+interface Page {
+  displayName: string;
+  pageData: any; // is actually Component but TS is yelling at me :(
+}
+  
+interface Category {
+  displayName: string;
+  pages: Page[];
+}
+
+import Account from '~/components/Settings/UserSettings/Account.vue';
+import Privacy from '~/components/Settings/UserSettings/Privacy.vue';
+import Devices from '~/components/Settings/UserSettings/Devices.vue';
+import Connections from '~/components/Settings/UserSettings/Connections.vue';
+
+import Appearance from '~/components/Settings/AppSettings/Appearance.vue';
+import Notifications from '~/components/Settings/AppSettings/Notifications.vue';
+import Keybinds from '~/components/Settings/AppSettings/Keybinds.vue';
+import Language from '~/components/Settings/AppSettings/Language.vue';
+
+const settingsCategories = {
+  userSettings: {
+    displayName: "User Settings",
+    pages: [
+      { displayName: "My Account", pageData: Account },
+      { displayName: "Privacy", pageData: Privacy },
+      { displayName: "Devices", pageData: Devices },
+      { displayName: "Connections", pageData: Connections },
+    ]
+  },
+  appSettings: {
+    displayName: "App Settings",
+    pages: [
+      { displayName: "Appearance", pageData: Appearance },
+      { displayName: "Notifications", pageData: Notifications },
+      { displayName: "Keybinds", pageData: Keybinds },
+      { displayName: "Language", pageData: Language },
+    ]
+  },
+};
+
+const categories = Object.values(settingsCategories);
+
+let currentPage = ref(categories[0].pages[0]);
+let selectedPage = ref(currentPage.value.displayName); // used to highlight the current channel
+
+function selectCategory(page: Page) {
+  currentPage.value = page;
+  selectedPage.value = page.displayName;
+};
+
+</script>
+
+<style scoped>
+#settings-page-container {
+  height: 100%;
+  align-content: center;
+  overflow-y: hidden;
+  margin: 0;
+}
+
+#settings-page {
+  height: 100vh;
+  display: flex;
+}
+
+#sidebar {
+  min-width: 25dvw;
+  max-width: 25dvw;
+  background-color: #2f3136;
+  color: white;
+  padding: 1dvh 1dvw;
+  margin-left: auto;
+
+  overflow-y: auto;
+  height: 100vh;
+}
+
+#sidebar h2 {
+  font-size: 0.95em;
+  padding: 0 0.8dvw;
+}
+
+#sidebar ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+#sidebar li {
+  border-radius: 8px;
+  padding: 0.8dvh 0.8dvw;
+  font-size: 1.4em;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.sidebar-focus {
+  background-color: #383B41;
+}
+
+#sidebar li:hover {
+  background-color: #40444b;
+}
+
+#sub-page {
+  flex-grow: 1;
+  min-width: 70dvw;
+  max-width: 70dvw;
+  padding-left: 1.5rem;
+  margin-right: auto;
+
+  overflow-y: auto;
+  height: 100vh;
+}
+
+.spacer {
+  height: 0.2dvh;
+  display: block;
+  margin: 0.8dvh 1dvw;
+  background-color: #2c2e32;
+}
+
+/* applies to child pages too */
+:deep(h5) {
+  color: red;
+}
+</style>
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
index 18993ad..b3d28fa 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/types/interfaces.ts b/types/interfaces.ts
index 1aba1bc..e451a4b 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -58,6 +58,8 @@ export interface UserResponse {
 	username: string,
 	display_name: string | null,
 	avatar: string | null,
+	pronouns: string | null,
+	about: string | null,
 	email?: string,
 	email_verified?: boolean
   }