diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index bddd444..215b0ea 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/SettingsDialog.tsx
@@ -14,6 +14,7 @@ import { Switch } from "./ui/switch";
 import { Label } from "./ui/label";
 import { Input } from "./ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "./ui/select";
+import { capitalize } from "../lib/utils";
 
 interface Props {
   settings: Settings;
@@ -115,7 +116,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
               onValueChange={(value) => handleThemeChange(value as EditorTheme)}
             >
               <SelectTrigger className="w-[180px]">
-                {settings.editorTheme}
+                {capitalize(settings.editorTheme)}
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="cobalt">Cobalt</SelectItem>
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index ec79801..deaefb5 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1,6 +1,10 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
- 
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
+}
+
+export function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
 }