diff --git a/src/components/CustomSelect.vue b/src/components/CustomSelect.vue
index 28da03a..d6b29c0 100644
--- a/src/components/CustomSelect.vue
+++ b/src/components/CustomSelect.vue
@@ -31,11 +31,10 @@ const normalizedOptions = computed(() => {
 
 const selectedLabel = computed(() => {
   const found = normalizedOptions.value.find(o => o.value === props.modelValue);
-  return found ? (found.label || found.value) : props.placeholder || '';
-});
-
-const toggle = () => {
-  isOpen.value = !isOpen.value;
+      return found ? (found.label || found.value) : (props.modelValue || props.placeholder || '');
+  });
+  
+  const toggle = () => {  isOpen.value = !isOpen.value;
 };
 
 const select = (value: string) => {
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 7852e41..1f9af24 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { useSettingsStore } from '../stores/settingsStore';
+import CustomSelect from './CustomSelect.vue';
 import { X } from 'lucide-vue-next';
+import { computed } from 'vue';
 
 const emit = defineEmits(['close']);
 const settings = useSettingsStore();
@@ -12,13 +14,20 @@ const fontOptions = [
   "Monaco, Menlo, 'Ubuntu Mono', monospace",
   "Arial, sans-serif"
 ];
+
+const displayFontOptions = computed(() => {
+  return fontOptions.map(font => ({
+    value: font,
+    label: font.split(',')[0].replace(/['"]/g, '')
+  }));
+});
 </script>
 
 <template>
   <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click.self="emit('close')">
-    <div class="bg-slate-900 border border-slate-700 rounded-xl shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in-95 duration-200">
+    <div class="bg-slate-900 border border-slate-700 rounded-xl shadow-2xl w-full max-w-md animate-in fade-in zoom-in-95 duration-200">
       <!-- Header -->
-      <div class="flex items-center justify-between px-6 py-4 border-b border-slate-800 bg-slate-950/50">
+      <div class="flex items-center justify-between px-6 py-4 border-b border-slate-800 bg-slate-950/50 rounded-t-xl">
         <h2 class="text-lg font-semibold text-slate-100">Editor Settings</h2>
         <button 
           @click="emit('close')" 
@@ -52,18 +61,14 @@ const fontOptions = [
         <div class="space-y-3">
           <label class="text-sm font-medium text-slate-300">Font Family</label>
           <div class="space-y-2">
-             <select 
+            <CustomSelect
               v-model="settings.editorFontFamily"
-              class="w-full bg-slate-950 border border-slate-700 text-slate-300 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block p-2.5"
-            >
-              <option v-for="font in fontOptions" :key="font" :value="font">
-                {{ font.split(',')[0].replace(/['"]/g, '') }}
-              </option>
-              <option value="custom">Custom...</option>
-            </select>
-
+              :options="displayFontOptions"
+              :full-width="true"
+              placeholder="Select or enter font family"
+            />
             <input 
-              v-if="settings.editorFontFamily === 'custom' || !fontOptions.includes(settings.editorFontFamily)"
+              v-if="!fontOptions.includes(settings.editorFontFamily)"
               type="text" 
               v-model="settings.editorFontFamily" 
               placeholder="e.g. 'JetBrains Mono', monospace"
@@ -74,7 +79,7 @@ const fontOptions = [
       </div>
 
       <!-- Footer -->
-      <div class="px-6 py-4 bg-slate-950/50 border-t border-slate-800 flex justify-end">
+      <div class="px-6 py-4 bg-slate-950/50 border-t border-slate-800 flex justify-end rounded-b-xl">
         <button 
           @click="emit('close')" 
           class="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-200 text-sm font-medium rounded-lg transition-colors border border-slate-700"