diff --git a/packages/app-desktop/src/features/settings/language-select.tsx b/packages/app-desktop/src/features/settings/language-select.tsx
new file mode 100644
index 0000000..8e6fd7a
--- /dev/null
+++ b/packages/app-desktop/src/features/settings/language-select.tsx
@@ -0,0 +1,16 @@
+import { Select, SelectContent, SelectItem, SelectTrigger } from "@renderer/components/ui/select";
+import { Language, LanguageNameMap } from "@renderer/types/lang";
+
+export default function LanguageSelect({lang, onValueChange}: {lang: Language, onValueChange?: (val: Language)=>void}) {
+  return (
+    <Select value={lang} onValueChange={onValueChange}>
+      <SelectTrigger>
+        {LanguageNameMap[lang]}
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="tr">Türkçe</SelectItem>
+        <SelectItem value="en">English</SelectItem>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/packages/app-desktop/src/features/settings/workspace.tsx b/packages/app-desktop/src/features/settings/workspace.tsx
index 0962a11..ea2df08 100644
--- a/packages/app-desktop/src/features/settings/workspace.tsx
+++ b/packages/app-desktop/src/features/settings/workspace.tsx
@@ -5,6 +5,8 @@ import { useLocalStore } from "@renderer/context/local-state";
 import { useBackup, useWorkspaceExport } from "@renderer/hooks/query";
 import { Languages } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import LanguageSelect from "./language-select";
+import { Language } from "@renderer/types/lang";
 //import { StartupBehvaiourSelect } from "./startup-behaviour-select";
 // import { updateUserSettings, useSettingsStore } from "@renderer/context/settings-store";
 // import { produce } from "immer";
@@ -55,20 +57,7 @@ export function WorkspaceSettings() {
         <Languages size={18} className="inline" /> {t("languageText")}
       </span>
       <div className="flex gap-2 place-self-end">
-        <Button
-          onClick={() => i18n.changeLanguage("tr")}
-          variant={i18n.resolvedLanguage == "tr" ? "default" : "secondary"}
-          className="flex-shrink-0 w-fit"
-        >
-          Türkçe
-        </Button>
-        <Button
-          onClick={() => i18n.changeLanguage("en")}
-          variant={i18n.resolvedLanguage == "en" ? "default" : "secondary"}
-          className="flex-shrink-0 w-fit"
-        >
-          English
-        </Button>
+        <LanguageSelect lang={i18n.resolvedLanguage as Language ?? "en"} onValueChange={(lang)=>i18n.changeLanguage(lang)}/>
       </div>
       {/* <span>{t("startupBehaviourText")}</span>
       <StartupBehvaiourSelect value={startup} onValueCahnge={startupChange}/> */}
diff --git a/packages/app-desktop/src/lib/utils.tsx b/packages/app-desktop/src/lib/utils.tsx
index b06e907..d470854 100644
--- a/packages/app-desktop/src/lib/utils.tsx
+++ b/packages/app-desktop/src/lib/utils.tsx
@@ -31,3 +31,5 @@ export function hexToHslVariable(hexstr: string) {
   const hsl = hex.hsl(sanitized);
   return `${hsl[0]} ${hsl[1]}% ${hsl[2]}%`;
 }
+
+
diff --git a/packages/app-desktop/src/types/lang.ts b/packages/app-desktop/src/types/lang.ts
new file mode 100644
index 0000000..20e6a57
--- /dev/null
+++ b/packages/app-desktop/src/types/lang.ts
@@ -0,0 +1,7 @@
+
+export const LanguageNameMap = {
+  "tr": "Türkçe",
+  "en": "English"
+};
+
+export type Language = keyof typeof LanguageNameMap;
\ No newline at end of file