diff --git a/components/Guild/MemberEntry.vue b/components/Guild/MemberEntry.vue
index ec5c418..4827cb4 100644
--- a/components/Guild/MemberEntry.vue
+++ b/components/Guild/MemberEntry.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="member-item" @click.prevent="showModalPopup" tabindex="0">
+    <div class="member-item" @click.prevent="toggleModalPopup" tabindex="0">
         <Avatar :profile="props.member" class="member-avatar"/>
         <span class="member-display-name">{{ getDisplayName(props.member) }}</span>
     </div>
-    <ModalProfilePopup v-if="modalPopupVisible" :profile="props.member"
-        :whendone="hideModalPopup"/>
+    <ModalProfilePopup v-if="modalPopupVisible"
+        :profile="props.member"/>
 </template>
 
 <script lang="ts" setup>
@@ -17,14 +17,8 @@ const props = defineProps<{
 
 const modalPopupVisible = ref<boolean>(false);
 
-function showModalPopup() {
-    console.log("hello there")
-    modalPopupVisible.value = true
-}
-
-function hideModalPopup() {
-    console.log("gone")
-    modalPopupVisible.value = false
+function toggleModalPopup() {
+    modalPopupVisible.value = !modalPopupVisible.value
 }
 </script>
 
diff --git a/components/Modal/Base.vue b/components/Modal/Base.vue
index a5d8ebd..b3d5ee3 100644
--- a/components/Modal/Base.vue
+++ b/components/Modal/Base.vue
@@ -1,7 +1,7 @@
 <template>
   <dialog ref="dialog" class="modal" :class="props.obscure ? 'modal-obscure' : 'modal-regular'">
 	<span class="modal-exit-button-container" style="position: absolute; right: 2em; top: .2em; width: .5em; height: .5em;">
-		<Button text="✕" variant="stealth" :callback="onCloseButton" />
+		<Button text="✕" variant="stealth" :callback="() => dialog?.remove()" />
 	</span>
 	<div class="modal-content">
 		<h1 class="modal-title">{{ title }}</h1>
@@ -17,6 +17,8 @@ import Button from '~/components/UserInterface/Button.vue';
 const props = defineProps<ModalProps>();
 const dialog = ref<HTMLDialogElement>();
 
+console.log("props:", props);
+
 onMounted(() => {
   if (dialog.value) {
     dialog.value.showModal();
@@ -29,15 +31,6 @@ onMounted(() => {
   }
 });
 
-function onCloseButton () {
-  if (dialog.value) {
-    if (props.onCloseButton) {
-      props.onCloseButton()
-    }
-    
-    dialog.value.remove
-  }
-}
 
 </script>
 
diff --git a/components/Modal/ProfilePopup.vue b/components/Modal/ProfilePopup.vue
index 0fbc54b..5f674fb 100644
--- a/components/Modal/ProfilePopup.vue
+++ b/components/Modal/ProfilePopup.vue
@@ -1,5 +1,5 @@
 <template>
-	<ModalBase :obscure="true" :onClose="props.whendone" :onCloseButton="props.whendone">
+	<ModalBase :obscure="true">
 		<div id="profile-container">
 			<div id="profile-header">
 				<div id="header-mask"></div>
@@ -15,7 +15,7 @@
 						{{ pronouns }}
 					</span>
 				</div>
-				<!-- <div id="status">Status goes here lorem ipsum or something</div> -->
+				<div id="status">Status goes here lorem ipsum or something</div>
 
 				<div v-if="me.uuid != uuid" id="action-buttons-container">
 					<Button text="Message" variant="normal" :callback="buttonSendMessage"></Button>
@@ -35,21 +35,21 @@
 					</div>
 				</div>
 			</div>
-			<VerticalSpacer v-if="aboutMe" />
+			<VerticalSpacer />
 
 			<div id="profile-footer">
 				<div id="dates">
 					<div v-if="registrationDate" class="date-entry">
-						<span class="date-entry-title">Registered at</span><br>
-						<span class="date-entry-value" :title="registrationDate.toLocaleTimeString()">{{ toDateString(registrationDate) }}</span>
+						<span class="date-entry-title">Registered At</span><br>
+						<span class="date-entry-value">{{ registrationDate }}</span>
 					</div>
 					<div v-if="joinDate" class="date-entry">
-						<span class="date-entry-title">Joined at</span><br>
-						<span class="date-entry-value" :title="joinDate.toLocaleTimeString()">{{ toDateString(joinDate) }}</span>
+						<span class="date-entry-title">Joined At</span><br>
+						<span class="date-entry-value">{{ joinDate }}</span>
 					</div>
 					<div v-if="friendsSince" class="date-entry">
 						<span class="date-entry-title">Friends Since</span><br>
-						<span class="date-entry-value" :title="friendsSince.toLocaleTimeString()">{{ toDateString(friendsSince) }}</span>
+						<span class="date-entry-value">{{ friendsSince }}</span>
 					</div>
 				</div>
 			</div>
@@ -65,28 +65,22 @@ import Button from '../UserInterface/Button.vue';
 const { addFriend, fetchMe } = useApi();
 
 const props = defineProps<ModalProps & {
-	profile: GuildMemberResponse,
-	whendone: any
+	profile: GuildMemberResponse
 }>();
 
 const friendsSinceRequest = await getFriendsSince(props.profile)
-const me = await fetchMe() as UserResponse
 
 const displayName = getDisplayName(props.profile)
 const username = getUsername(props.profile)
 const pronouns = getPronouns(props.profile)
 const aboutMe = getAboutMe(props.profile)
 
-const registrationDate = getRegistrationDate(props.profile)
-const joinDate = getGuildJoinDate(props.profile)
-const friendsSince = friendsSinceRequest
+const registrationDate = getRegistrationDate(props.profile)?.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })
+const joinDate = getGuildJoinDate(props.profile)?.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })
+const friendsSince = friendsSinceRequest?.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })
 
 const uuid = getUuid(props.profile)
-
-
-function toDateString(date: Date): string {
-	return date.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })
-}
+const me = await fetchMe() as UserResponse
 
 function buttonSendMessage() {
 	navigateTo(`/me/${uuid}`)
@@ -169,6 +163,7 @@ function buttonEditProfile() {
 }
 
 #username-and-pronouns {
+	margin-top: -0.2em;
 	font-size: .9em;
 	color: var(--secondary-text-color);
 }
diff --git a/components/UserInterface/HorizontalSpacer.vue b/components/UserInterface/HorizontalSpacer.vue
index cc95c92..9a72645 100644
--- a/components/UserInterface/HorizontalSpacer.vue
+++ b/components/UserInterface/HorizontalSpacer.vue
@@ -5,7 +5,7 @@
 <style scoped>
 .spacer {
   display: block;
-  min-width: 0.2dvh;
+  width: 0.2dvh;
   margin: 0.2dvh 0.8dvw;
   background-color: var(--padding-color);
 }
diff --git a/components/UserInterface/VerticalSpacer.vue b/components/UserInterface/VerticalSpacer.vue
index 9f0e304..e3a9322 100644
--- a/components/UserInterface/VerticalSpacer.vue
+++ b/components/UserInterface/VerticalSpacer.vue
@@ -4,8 +4,8 @@
 
 <style scoped>
 .vertical-spacer {
+  height: 0.2dvh;
   display: block;
-  min-height: 0.2dvh;
   margin: 0.8dvh 0.2dvw;
   background-color: var(--padding-color);
 }
diff --git a/types/interfaces.ts b/types/interfaces.ts
index 6fd9c96..2a05c38 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -96,8 +96,7 @@ export interface ModalProps {
 	title?: string,
 	obscure?: boolean,
 	onClose?: () => void,
-	onCancel?: () => void,
-	onCloseButton?: () => void,
+	onCancel?: () => void
 }
 
 export interface ContextMenuItem {