diff --git a/components/Avatar.vue b/components/Avatar.vue
index 06d36ad..dcb3b7e 100644
--- a/components/Avatar.vue
+++ b/components/Avatar.vue
@@ -6,7 +6,7 @@
 	<DefaultIcon v-else
 		class="display-avatar"
 		:name="displayName"
-		:seed="user.uuid"
+		:seed="getUserUuid(props.profile)"
 		:alt="displayName" />
 </template>
 
@@ -14,25 +14,14 @@
 import { NuxtImg } from '#components';
 import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
 
-const { getDisplayName } = useProfile()
+const { getDisplayName, getAvatarUrl, getUserUuid } = useProfile()
 
 const props = defineProps<{
 	profile: UserResponse | GuildMemberResponse,
 }>();
 
 const displayName = getDisplayName(props.profile)
-let user: UserResponse
-let displayAvatar: string | null
-
-if ("username" in props.profile) {
-	// assume it's a UserResponse
-	displayAvatar = props.profile.avatar
-	user = props.profile
-} else {
-	// assume it's a GuildMemberResponse
-	displayAvatar = props.profile.user.avatar
-	user = props.profile.user
-}
+const displayAvatar = getAvatarUrl(props.profile)
 
 </script>
 
diff --git a/components/DefaultIcon.vue b/components/DefaultIcon.vue
index 6fc6891..c374ab9 100644
--- a/components/DefaultIcon.vue
+++ b/components/DefaultIcon.vue
@@ -17,6 +17,7 @@ const props = defineProps<{
 }>();
 
 let previewName = "";
+// include the entire name if it's 3 chars or less, use the first char of the first 3 words otherwise
 if (props.name.length > 3) {
 	let guildName: string[] = props.name.split(' ')
 	for (let i = 0; i < 3; i ++) {
diff --git a/components/Modal/ProfilePopup.vue b/components/Modal/ProfilePopup.vue
index b99a9ea..3c769cc 100644
--- a/components/Modal/ProfilePopup.vue
+++ b/components/Modal/ProfilePopup.vue
@@ -27,15 +27,17 @@
 			</div>
 			<VerticalSpacer />
 
-			<div v-if="aboutMe" id="profile-body">
-				<div v-if="aboutMe" id="about-me-container">
-					<div><Icon name="lucide:info" size="1.1em"/></div>
-					<div id="about-me-text">
-						{{ " " + aboutMe }}
+			<div v-if="aboutMe">
+				<div id="profile-body">
+					<div id="about-me-container">
+						<div><Icon name="lucide:info" size="1.1em"/></div>
+						<div id="about-me-text">
+							{{ " " + aboutMe }}
+						</div>
 					</div>
 				</div>
+				<VerticalSpacer />
 			</div>
-			<VerticalSpacer v-if="aboutMe" />
 
 			<div id="profile-footer">
 				<div id="dates">
@@ -62,7 +64,7 @@ import type { GuildMemberResponse, ModalProps, UserResponse } from '~/types/inte
 import VerticalSpacer from '../UserInterface/VerticalSpacer.vue';
 import Button from '../UserInterface/Button.vue';
 
-const { getDisplayName, getUsername, getPronouns, getAboutMe, getRegistrationDate, getGuildJoinDate, getFriendsSince, getUuid } = useProfile()
+const { getDisplayName, getUsername, getPronouns, getAboutMe, getRegistrationDate, getGuildJoinDate, getFriendsSince, getUserUuid } = useProfile()
 const { addFriend, fetchMe } = useApi();
 
 const props = defineProps<ModalProps & {
@@ -81,7 +83,7 @@ const registrationDate = getRegistrationDate(props.profile)
 const joinDate = getGuildJoinDate(props.profile)
 const friendsSince = await getFriendsSince(props.profile)
 
-const uuid = getUuid(props.profile)
+const uuid = getUserUuid(props.profile)
 
 
 function toDateString(date: Date): string {
diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index f6f40f4..9b31663 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -45,26 +45,15 @@
     <!-- <p class="subtitle">Icons</p>
     <div class="icons">
     </div> -->
-
-    <p class="subtitle">TIME FORMAT</p>
-    <div class="icons">
-      <RadioButtons :button-count="3" :text-strings="timeFormatTextStrings"
-          :default-button-index="settingsLoad().timeFormat?.index ?? 0" :callback="onTimeFormatClicked"></RadioButtons>
-    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
-import type { TimeFormat } from '~/types/settings';
-import { settingSave, settingsLoad } from '#imports';
-
 const runtimeConfig = useRuntimeConfig()
 const baseURL = runtimeConfig.app.baseURL;
-const styleFolder = `${baseURL}/themes/style`
-const layoutFolder = `${baseURL}/themes/layout`
 
-const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"]
+const styleFolder = `${baseURL}themes/style`
+const layoutFolder = `${baseURL}themes/layout`
 
 enum StyleLayout {
   Style,
@@ -171,21 +160,6 @@ function changeTheme(themeType: StyleLayout, theme: Theme) {
   }
   loadPreferredThemes()
 }
-
-async function onTimeFormatClicked(index: number) {
-  let format: "auto" | "12" | "24" = "auto"
-
-  if (index == 0) {
-    format = "auto"
-  } else if (index == 1) {
-    format = "12"
-  } else if (index == 2) {
-    format = "24"
-  }
-
-  const timeFormat: TimeFormat = {index, format}
-  settingSave("timeFormat", timeFormat)
-}
 </script>
 
 <style scoped>
diff --git a/components/Settings/AppSettings/Language.vue b/components/Settings/AppSettings/Language.vue
index b1c3a8a..1466873 100644
--- a/components/Settings/AppSettings/Language.vue
+++ b/components/Settings/AppSettings/Language.vue
@@ -1,10 +1,25 @@
 <template>
   <div>
-    <h1>Language (TBA)</h1>
+    <h1>Language</h1>
+
+    <p class="subtitle">TIME FORMAT</p>
+    <div class="icons">
+      <RadioButtons
+        :text-strings="timeFormatTextStrings"
+        :default-button-key='settingsLoad().timeFormat ?? "Auto"'
+        :callback="(index: number) => {settingSave('timeFormat', timeFormatTextStrings[index])}"
+      />
+    </div>
+
   </div>
 </template>
 
 <script lang="ts" setup>
+import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
+import type { TimeFormat } from '~/types/settings';
+
+const timeFormatTextStrings: TimeFormat[] = ["Auto", "4:18 PM", "16:18"]
+
 </script>
 
 <style scoped>
diff --git a/components/UserInterface/RadioButtons.vue b/components/UserInterface/RadioButtons.vue
index c36b5d0..eb72da2 100644
--- a/components/UserInterface/RadioButtons.vue
+++ b/components/UserInterface/RadioButtons.vue
@@ -1,8 +1,10 @@
 <template>
 	<div class="radio-buttons-container" ref="radioButtonsContainer">
-		<div v-for="index in indices" :key="index" class="radio-button" @click="onClick(index)">
+		<div v-for="(textString, index) in props.textStrings"
+				class="radio-button"
+				@click="onClick(index)">
 			<span class="radio-button-radio"></span>
-			<span class="radio-button-text">{{ textStrings[index] }}</span>
+			<span class="radio-button-text">{{ textString }}</span>
 		</div>
 	</div>
 </template>
@@ -13,42 +15,65 @@ const radioButtonsContainer = ref<HTMLDivElement>()
 
 const props = defineProps<{
 	textStrings: string[],
-	buttonCount: number,
-	defaultButtonIndex: number,
+	defaultButtonKey?: string,
+	defaultButtonIndex?: number,
 	callback: CallableFunction,
 }>();
 
-// makes an array from 0 to buttonCount - 1
-const indices = Array.from({ length: props.buttonCount }, (_, i) => i) 
-
-// select default selected button
 onMounted(async () => {
 	await nextTick()
 	
-	if (props.defaultButtonIndex != undefined && radioButtonsContainer.value) {
+	// select default selected button
+	if (radioButtonsContainer.value) {
 		const children = radioButtonsContainer.value.children
-		const defaultButton = children.item(props.defaultButtonIndex)
-		defaultButton?.classList.add("selected-radio-button")
-		defaultButton?.children.item(0)?.classList.add("selected-radio-button-radio")
+
+		// set the button based on key
+		if (props.defaultButtonKey != undefined) {
+			const newIndex = props.textStrings.indexOf(props.defaultButtonKey)
+			const defaultButton = children.item(newIndex)
+			if (defaultButton) {
+				selectButton(defaultButton)
+				return // note the return if you're extending this
+			}
+		}
+		// if that fails, set it based on index, defaulting to 0
+		const defaultButton = children.item(props.defaultButtonIndex ?? 0)
+		if (defaultButton) {
+			selectButton(defaultButton)
+		}
 	}
 })
 
 
 function onClick(clickedIndex: number) {
-	// remove selected-radio-button class from all buttons except the clicked one	
 	if (radioButtonsContainer.value) {
+		// remove selected-radio-button class from all buttons except the clicked one	
 		const children = radioButtonsContainer.value.children
 		for (let i = 0; i < children.length; i++) {
-			children.item(i)?.classList.remove("selected-radio-button")
-			children.item(i)?.children.item(0)?.classList.remove("selected-radio-button-radio")
+			const button = children.item(i)
+			if (button) {
+				unSelectButton(button)
+			}
 		}
 
-		children.item(clickedIndex)?.classList.add("selected-radio-button")
-		children.item(clickedIndex)?.children.item(0)?.classList.add("selected-radio-button-radio")
+		const button = children.item(clickedIndex)
+		if (button) {
+			selectButton(button)
+		}
 	}
 	
 	props.callback(clickedIndex)
 }
+
+function unSelectButton(button: Element) {
+	button.classList.remove("selected-radio-button")
+	button.children.item(0)?.classList.remove("selected-radio-button-radio")	
+}
+
+function selectButton(button: Element) {
+	button.classList.add("selected-radio-button")
+	button.children.item(0)?.classList.add("selected-radio-button-radio")
+}
 </script>
 
 <style scoped>
diff --git a/composables/profile.ts b/composables/profile.ts
index f3515e6..25b18c2 100644
--- a/composables/profile.ts
+++ b/composables/profile.ts
@@ -3,7 +3,7 @@ import type { GuildMemberResponse, UserResponse } from "~/types/interfaces"
 const { fetchFriends } = useApi();
 
 export const useProfile = () => {
-	function getAboutMe (profile: UserResponse | GuildMemberResponse): string | null {
+	function getAboutMe(profile: UserResponse | GuildMemberResponse): string | null {
 		if ("username" in profile) {
 			return profile.about
 		} else {
@@ -11,7 +11,7 @@ export const useProfile = () => {
 		}
 	}
 
-	function getDisplayName (profile: UserResponse | GuildMemberResponse): string  {
+	function getDisplayName(profile: UserResponse | GuildMemberResponse): string  {
 		if ("username" in profile) {
 			// assume it's a UserResponse
 			if (profile.display_name) return profile.display_name
@@ -24,7 +24,15 @@ export const useProfile = () => {
 		}
 	}
 
-	async function getFriendsSince (profile: UserResponse | GuildMemberResponse): Promise<Date | null> {
+	function getAvatarUrl(profile: UserResponse | GuildMemberResponse): string | null {
+		if ("username" in profile) {
+			return profile.avatar
+		} else {
+			return profile.user.avatar
+		}
+	}
+
+	async function getFriendsSince(profile: UserResponse | GuildMemberResponse): Promise<Date | null> {
 		let user_uuid: string;
 
 		if ("username" in profile) {
@@ -42,15 +50,15 @@ export const useProfile = () => {
 		return null
 	}
 
-	function getGuildJoinDate (profile: UserResponse | GuildMemberResponse): Date | null {
+	function getGuildJoinDate(profile: UserResponse | GuildMemberResponse): Date | undefined {
 		if ("username" in profile) {
-			return null
+			return undefined
 		} else {
 			return uuidToDate(profile.uuid)
 		}
 	}
 
-	function getPronouns (profile: UserResponse | GuildMemberResponse): string | null  {
+	function getPronouns(profile: UserResponse | GuildMemberResponse): string | null {
 		if ("username" in profile) {
 			return profile.pronouns
 		} else {
@@ -58,7 +66,7 @@ export const useProfile = () => {
 		}
 	}
 
-	function getRegistrationDate (profile: UserResponse | GuildMemberResponse): Date | null {
+	function getRegistrationDate(profile: UserResponse | GuildMemberResponse): Date {
 		if ("username" in profile) {
 			return uuidToDate(profile.uuid)
 		} else {
@@ -66,7 +74,7 @@ export const useProfile = () => {
 		}
 	}
 
-	function getUsername (profile: UserResponse | GuildMemberResponse): string {
+	function getUsername(profile: UserResponse | GuildMemberResponse): string {
 		if ("username" in profile) {
 			return profile.username
 		} else {
@@ -74,22 +82,32 @@ export const useProfile = () => {
 		}
 	}
 
-	function getUuid (profile: UserResponse | GuildMemberResponse): string | null {
+	function getUserUuid(profile: UserResponse | GuildMemberResponse): string {
 		if ("username" in profile) {
 			return profile.uuid
 		} else {
 			return profile.user.uuid
 		}
 	}
+
+	function getUser(profile: UserResponse | GuildMemberResponse): UserResponse {
+		if ("username" in profile) {
+			return profile
+		} else {
+			return profile.user
+		}
+	}
 	
 	return {
 		getAboutMe,
 		getDisplayName,
+		getAvatarUrl,
 		getFriendsSince,
 		getGuildJoinDate,
 		getRegistrationDate,
 		getPronouns,
 		getUsername,
-		getUuid		
+		getUserUuid,
+		getUser
 	}
 }
diff --git a/types/settings.ts b/types/settings.ts
index 8d24904..0e80dca 100644
--- a/types/settings.ts
+++ b/types/settings.ts
@@ -4,7 +4,4 @@ export interface ClientSettings {
 	selectedThemeLayout?: string // URL
 }
 
-export interface TimeFormat {
-	index: number,
-	format: "auto" | "12" | "24"
-}
\ No newline at end of file
+export type TimeFormat = "Auto" | "4:18 PM" | "16:18"
\ No newline at end of file
diff --git a/utils/getPreferredTimeFormat.ts b/utils/getPreferredTimeFormat.ts
index 86b9635..2f9a4b0 100644
--- a/utils/getPreferredTimeFormat.ts
+++ b/utils/getPreferredTimeFormat.ts
@@ -1,9 +1,9 @@
 export default (): "12" | "24" => {
-	const format = settingsLoad().timeFormat?.format ?? "auto"
+	const format = settingsLoad().timeFormat ?? "Auto"
 
-	if (format == "12") {
+	if (format == "4:18 PM") {
 		return "12"
-	} else if (format == "24") {
+	} else if (format == "16:18") {
 		return "24"
 	}
 
diff --git a/utils/loadPreferredThemes.ts b/utils/loadPreferredThemes.ts
index 00a4d1b..33d2a68 100644
--- a/utils/loadPreferredThemes.ts
+++ b/utils/loadPreferredThemes.ts
@@ -2,20 +2,17 @@ let styleLinkElement: HTMLLinkElement | null;
 let layoutLinkElement: HTMLLinkElement | null;
 
 
-export default () => {
+export default () => {  
   const runtimeConfig = useRuntimeConfig()
   const baseURL = runtimeConfig.app.baseURL;
-  
-  let currentStyle = settingsLoad().selectedThemeStyle ?? undefined
-  let currentLayout = settingsLoad().selectedThemeLayout ?? `${baseURL}themes/layout/gorb.css`
 
-  if (!currentStyle) {
-    if (prefersLight()) {
-      currentStyle = `${baseURL}themes/style/light.css`
-    } else {
-      currentStyle = `${baseURL}themes/style/dark.css`
-    }
-  }
+  let currentStyle = settingsLoad().selectedThemeStyle ?? (
+    prefersLight()
+      ? `${baseURL}themes/style/light.css`
+      : `${baseURL}themes/style/dark.css`
+  );
+
+  let currentLayout = settingsLoad().selectedThemeLayout ?? `${baseURL}themes/layout/gorb.css`
 
   if (styleLinkElement) {
     styleLinkElement.href = currentStyle;