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