diff --git a/app.vue b/app.vue
index 686a15e..beab80b 100644
--- a/app.vue
+++ b/app.vue
@@ -8,6 +8,7 @@
 <script lang="ts" setup>
 import ContextMenu from '~/components/ContextMenu.vue';
 import { render } from 'vue';
+import settingLoad from './utils/settingLoad';
 
 const banner = useState("banner", () => false);
 
@@ -43,7 +44,7 @@ function contextMenuHandler(e: MouseEvent) {
 	//]);
 }
 
-const currentTheme = settingsLoad().selectedThemeId ?? "dark"
+const currentTheme = settingLoad("selectedThemeUrl") ?? "dark"
 const baseURL = useRuntimeConfig().app.baseURL;
 
 useHead({
diff --git a/components/Message.vue b/components/Message.vue
index 15d656f..db08258 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -47,7 +47,7 @@
 					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
 					<span v-else-if="getDayDifference(date, currentDate) > 1 ">{{ date.toLocaleDateString(undefined) }},</span>
 
-					{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
+					{{ date.toLocaleTimeString(undefined, { hour12: props.format=="12", timeStyle: "short" }) }}
 				</span>
 			</div>
 			<div class="message-text" v-html="sanitized" tabindex="0"></div>
diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 922a3ec..30e15d1 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -24,14 +24,14 @@
     <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>
+          :default-button-index="settingLoad('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 VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
 import settingSave from '~/utils/settingSave';
 
 const runtimeConfig = useRuntimeConfig()
@@ -79,18 +79,7 @@ async function fetchThemes() {
 await fetchThemes()
 
 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)
+  settingSave("timeFormat", {index, timeFormat: timeFormatTextStrings[index].toLowerCase()})
 }
 </script>
 
diff --git a/components/UserInterface/RadioButtons.vue b/components/UserInterface/RadioButtons.vue
index c36b5d0..a43a80a 100644
--- a/components/UserInterface/RadioButtons.vue
+++ b/components/UserInterface/RadioButtons.vue
@@ -1,6 +1,6 @@
 <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="index in incidies" :key="index" class="radio-button" @click="onClick(index)">
 			<span class="radio-button-radio"></span>
 			<span class="radio-button-text">{{ textStrings[index] }}</span>
 		</div>
@@ -19,7 +19,7 @@ const props = defineProps<{
 }>();
 
 // makes an array from 0 to buttonCount - 1
-const indices = Array.from({ length: props.buttonCount }, (_, i) => i) 
+const incidies = Array.from({ length: props.buttonCount }, (_, i) => i) 
 
 // select default selected button
 onMounted(async () => {
diff --git a/types/settings.ts b/types/settings.ts
deleted file mode 100644
index 28e3bfc..0000000
--- a/types/settings.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface ClientSettings {
-	selectedThemeId?: string, // the ID of the theme, not the URL, for example "dark"
-	timeFormat?: TimeFormat
-}
-
-export interface TimeFormat {
-	index: number,
-	format: "auto" | "12" | "24"
-}
\ No newline at end of file
diff --git a/utils/getPreferredTimeFormat.ts b/utils/getPreferredTimeFormat.ts
index 86b9635..4cf03e0 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 = settingLoad("timeFormat").timeFormat ?? "auto"
 
-	if (format == "12") {
+	if (format == "12-hour") {
 		return "12"
-	} else if (format == "24") {
+	} else if (format == "24-hour") {
 		return "24"
 	}
 
diff --git a/utils/settingsLoad.ts b/utils/settingLoad.ts
similarity index 66%
rename from utils/settingsLoad.ts
rename to utils/settingLoad.ts
index e7fdfaf..d0f315c 100644
--- a/utils/settingsLoad.ts
+++ b/utils/settingLoad.ts
@@ -1,12 +1,10 @@
-import type { ClientSettings } from "~/types/settings"
-
-export default (): ClientSettings => {
+export default (key: string): any => {
 	let clientSettingsItem: string | null = localStorage.getItem("clientSettings")
 	if (typeof clientSettingsItem != "string") {
 		clientSettingsItem = "{}"
 	}
 
-	let clientSettings: ClientSettings = {}
+	let clientSettings: { [key: string]: any } = {}
 	try {
 		clientSettings = JSON.parse(clientSettingsItem)
 	} catch {
@@ -17,5 +15,5 @@ export default (): ClientSettings => {
 		clientSettings = {}
 	}
 
-	return clientSettings
+	return clientSettings[key]
 }
\ No newline at end of file