diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
index e2cf130..56235ab 100644
--- a/frontend/src/app.d.ts
+++ b/frontend/src/app.d.ts
@@ -109,6 +109,10 @@ declare global {
 			}
 		}
 	}
+	interface String {
+		removeUnderscores(): string
+		capitalize(): string
+	}
 }
 
 export {}
diff --git a/frontend/src/lib/components/ui/select/select-item.svelte b/frontend/src/lib/components/ui/select/select-item.svelte
index 2cd00a7..a1ee270 100644
--- a/frontend/src/lib/components/ui/select/select-item.svelte
+++ b/frontend/src/lib/components/ui/select/select-item.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import Check from "lucide-svelte/icons/check";
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import Check from 'lucide-svelte/icons/check'
+	import { Select as SelectPrimitive } from 'bits-ui'
+	import { cn } from '$lib/utils.js'
 
-	type $$Props = SelectPrimitive.ItemProps;
-	type $$Events = SelectPrimitive.ItemEvents;
+	type $$Props = SelectPrimitive.ItemProps
+	type $$Events = SelectPrimitive.ItemEvents
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export let label: $$Props["label"] = undefined;
-	export let disabled: $$Props["disabled"] = undefined;
-	export { className as class };
+	let className: $$Props['class'] = undefined
+	export let value: $$Props['value']
+	export let label: $$Props['label'] = undefined
+	export let disabled: $$Props['disabled'] = undefined
+	export { className as class }
 </script>
 
 <SelectPrimitive.Item
@@ -18,8 +18,8 @@
 	{disabled}
 	{label}
 	class={cn(
-		"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
-		className
+		'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
+		className,
 	)}
 	{...$$restProps}
 	on:click
@@ -27,14 +27,12 @@
 	on:focusin
 	on:focusout
 	on:pointerleave
-	on:pointermove
->
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+	on:pointermove>
+	<span
+		class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 		<SelectPrimitive.ItemIndicator>
 			<Check class="h-4 w-4" />
 		</SelectPrimitive.ItemIndicator>
 	</span>
-	<slot>
-		{label || value}
-	</slot>
+	<slot />
 </SelectPrimitive.Item>
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index aee0a8c..159b301 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -69,3 +69,12 @@ export const flyAndScale = (
 		easing: cubicOut,
 	}
 }
+
+// this works because its imported in the root layout by other components
+String.prototype.removeUnderscores = function () {
+	return this.replace(/_/g, ' ')
+}
+
+String.prototype.capitalize = function () {
+	return this.charAt(0).toUpperCase() + this.slice(1)
+}