diff --git a/src/components/quick-settings-panel/view/QuickSettingsContent.tsx b/src/components/quick-settings-panel/view/QuickSettingsContent.tsx
index 3075716b..98cd708b 100644
--- a/src/components/quick-settings-panel/view/QuickSettingsContent.tsx
+++ b/src/components/quick-settings-panel/view/QuickSettingsContent.tsx
@@ -1,7 +1,7 @@
 import { Moon, Sun } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { DarkModeToggle } from '../../../shared/view/ui';
-import LanguageSelector from '../../LanguageSelector.jsx';
+import LanguageSelector from '../../../shared/view/ui/LanguageSelector';
 import {
   INPUT_SETTING_TOGGLES,
   SETTING_ROW_CLASS,
diff --git a/src/components/settings/view/tabs/AppearanceSettingsTab.tsx b/src/components/settings/view/tabs/AppearanceSettingsTab.tsx
index 2a5e4769..8017ac81 100644
--- a/src/components/settings/view/tabs/AppearanceSettingsTab.tsx
+++ b/src/components/settings/view/tabs/AppearanceSettingsTab.tsx
@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DarkModeToggle } from '../../../../shared/view/ui';
-import LanguageSelector from '../../../LanguageSelector';
 import type { CodeEditorSettingsState, ProjectSortOrder } from '../../types/types';
+import LanguageSelector from '../../../../shared/view/ui/LanguageSelector';
 
 type AppearanceSettingsTabProps = {
   projectSortOrder: ProjectSortOrder;
diff --git a/src/components/LanguageSelector.jsx b/src/shared/view/ui/LanguageSelector.tsx
similarity index 90%
rename from src/components/LanguageSelector.jsx
rename to src/shared/view/ui/LanguageSelector.tsx
index bef7cf9f..a6efcdae 100644
--- a/src/components/LanguageSelector.jsx
+++ b/src/shared/view/ui/LanguageSelector.tsx
@@ -1,3 +1,13 @@
+
+
+import { useTranslation } from 'react-i18next';
+import { Languages } from 'lucide-react';
+import { languages } from '../../../i18n/languages';
+
+type LanguageSelectorProps = {
+  compact?: boolean;
+};
+
 /**
  * Language Selector Component
  *
@@ -7,15 +17,10 @@
  * Props:
  * @param {boolean} compact - If true, uses compact style (default: false)
  */
-
-import { useTranslation } from 'react-i18next';
-import { Languages } from 'lucide-react';
-import { languages } from '../i18n/languages';
-
-function LanguageSelector({ compact = false }) {
+export default function LanguageSelector({ compact = false }: LanguageSelectorProps) {
   const { i18n, t } = useTranslation('settings');
 
-  const handleLanguageChange = (event) => {
+  const handleLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const newLanguage = event.target.value;
     i18n.changeLanguage(newLanguage);
   };
@@ -70,5 +75,3 @@ function LanguageSelector({ compact = false }) {
     </div>
   );
 }
-
-export default LanguageSelector;