4 files changed, 14 insertions, 12 deletions
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index d329dff5..249e2826 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -2,18 +2,14 @@
 	// we will want to dynamically use the users avatar on this screen if they have uploaded one
 
 	import { goto } from '$app/navigation';
-	import { Icon } from '$comp';
+	import { Icon, LocaleSelector } from '$comp';
 
   import { locale, locales } from 'svelte-i18n';
 </script>
 
 <header class="bg-gradient-to-r from-primary to-gradient h-[20vh] w-full relative">
 	<nav class="flex justify-end items-center space-x-4 p-5">
-    <select bind:value={$locale}>
-      {#each $locales as locale}
-        <option value={locale}>{locale}</option>
-      {/each}
-    </select>
+    <LocaleSelector />
 
 		<button class="bg-white p-2 rounded-full w-12 h-12" on:click={() => goto('/receive')}
 			><Icon icon="numpad" style="mx-auto" /></button
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index 5faebb59..ca9d431e 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { goto } from '$app/navigation';
 	import { scroll } from '$lib/utils';
-	import { Icon } from '$comp';
+	import { Icon, LocaleSelector } from '$comp';
 
   import { _, locale, locales } from 'svelte-i18n';
 
@@ -15,11 +15,7 @@
 			<Icon icon="logo" style="mx-auto mb-5 xl:mb-0" />
 		</a>
 
-    <select bind:value={$locale}>
-      {#each $locales as locale}
-        <option value={locale}>{locale}</option>
-      {/each}
-    </select>
+    <LocaleSelector />
 
 		<div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
 			<button on:click={() => scroll(howItWorks)}>{$_('howItWorks')}</button>
diff --git a/src/components/LocaleSelector.svelte b/src/components/LocaleSelector.svelte
new file mode 100644
index 00000000..39d1791f
--- /dev/null
+++ b/src/components/LocaleSelector.svelte
@@ -0,0 +1,9 @@
+<script>
+  import { _, dictionary, locale, locales } from 'svelte-i18n';
+</script>
+
+<select bind:value={$locale}>
+  {#each $locales as locale}
+      <option value={locale}>{locale}</option>
+  {/each}
+</select>
diff --git a/src/components/index.js b/src/components/index.js
index febf8dac..f0e86183 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -7,3 +7,4 @@ export { default as Icon } from './Icon.svelte';
 export { default as Image } from './Image.svelte';
 export { default as RegisterOrLogin } from './RegisterOrLogin.svelte';
 export { default as AppHeader } from './AppHeader.svelte';
+export { default as LocaleSelector } from './LocaleSelector.svelte';