diff --git a/README.md b/README.md
index ecdb2d5..b86a3a8 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,5 @@
 # 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
deleted file mode 100644
index db8bb8e..0000000
--- a/components/Button.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<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
new file mode 100644
index 0000000..d024ec8
--- /dev/null
+++ b/components/GuildOptionsMenu.vue
@@ -0,0 +1,58 @@
+<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
deleted file mode 100644
index 135c0a1..0000000
--- a/components/Settings/AppSettings/Appearance.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<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
deleted file mode 100644
index ea54137..0000000
--- a/components/Settings/AppSettings/Keybinds.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<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
deleted file mode 100644
index b1c3a8a..0000000
--- a/components/Settings/AppSettings/Language.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<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
deleted file mode 100644
index 2e6de9c..0000000
--- a/components/Settings/AppSettings/Notifications.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<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
deleted file mode 100644
index 0fe5013..0000000
--- a/components/Settings/UserSettings/Account.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<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
deleted file mode 100644
index 97190ec..0000000
--- a/components/Settings/UserSettings/Connections.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<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
deleted file mode 100644
index 7006a12..0000000
--- a/components/Settings/UserSettings/Devices.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<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
deleted file mode 100644
index 0f1387d..0000000
--- a/components/Settings/UserSettings/Privacy.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<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
deleted file mode 100644
index 092e7d5..0000000
--- a/components/UserPopup.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<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 0ac2e8b..19ac694 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("/me") as UserResponse;
+    const res = await fetchWithApi("/users/me") as UserResponse;
     user.value = res;
     return user.value;
   }
@@ -88,20 +88,6 @@ 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 c9aa8d2..b3d492a 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -1,21 +1,13 @@
 <template>
 	<NuxtLayout name="client">
 		<div id="middle-left-column" class="main-grid-row">
-			<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 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>
 			<div id="channels-list">
 				<Channel v-for="channel of channels" :name="channel.name"
@@ -49,6 +41,7 @@ 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";
 
@@ -72,7 +65,10 @@ onMounted(async () => {
 	console.log("channelid: set loading to false");
 });
 
-function showGuildSettings() { }
+function toggleGuildSettings(e: Event) {
+	e.preventDefault();
+	showGuildSettings.value = !showGuildSettings.value;
+}
 
 function toggleInvitePopup(e: Event) {
 	e.preventDefault();
@@ -132,4 +128,24 @@ 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
deleted file mode 100644
index 5db18fe..0000000
--- a/pages/settings.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<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 b3d28fa..18993ad 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/types/interfaces.ts b/types/interfaces.ts
index e451a4b..1aba1bc 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -58,8 +58,6 @@ export interface UserResponse {
 	username: string,
 	display_name: string | null,
 	avatar: string | null,
-	pronouns: string | null,
-	about: string | null,
 	email?: string,
 	email_verified?: boolean
   }