diff --git a/libretranslate/templates/app.js.template b/libretranslate/templates/app.js.template
index 0b66d61..e96907f 100644
--- a/libretranslate/templates/app.js.template
+++ b/libretranslate/templates/app.js.template
@@ -155,6 +155,13 @@ document.addEventListener('DOMContentLoaded', function(){
             canSendSuggestion: function(){
                 return this.translatedText.trim() !== "" && this.translatedText !== this.savedTanslatedText;
             },
+            sourceLangs: function(){
+                var srcLangs = JSON.parse(JSON.stringify(this.langs));
+                srcLangs.sort(function(a, b){
+                    return a.name.localeCompare(b.name);
+                });
+                return srcLangs;
+            },
             targetLangs: function(){
                 if (!this.sourceLang) return this.langs;
                 else{
diff --git a/libretranslate/templates/index.html b/libretranslate/templates/index.html
index d0df3ec..518d24f 100644
--- a/libretranslate/templates/index.html
+++ b/libretranslate/templates/index.html
@@ -195,7 +195,7 @@
 								<span id="sourceLangLabel">{{ _h("Translate from") }}</span>
 								<span v-if="detectedLangText !== ''">[[ detectedLangText ]]</span>
 								<select aria-labelledby="sourceLangLabel" class="browser-default" v-model="sourceLang" ref="sourceLangDropdown" @change="handleInput">
-									<template v-for="option in langs">
+									<template v-for="option in sourceLangs">
 										<option :value="option.code">[[ option.name ]]</option>
 									</template>
 								</select>