diff --git a/example/messages/default.json b/example/messages/default.json
index fb80aae..16f8ce0 100644
--- a/example/messages/default.json
+++ b/example/messages/default.json
@@ -2,6 +2,11 @@
   "title": {
     "index": "Sapper project template!"
   },
+  "nav": {
+    "home": "",
+    "about": "",
+    "blog": ""
+  },
   "messages": {
     "success": "Great success!",
     "high_five": "High five",
diff --git a/example/messages/en-US.json b/example/messages/en-US.json
deleted file mode 100644
index fb80aae..0000000
--- a/example/messages/en-US.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "title": {
-    "index": "Sapper project template!"
-  },
-  "messages": {
-    "success": "Great success!",
-    "high_five": "High five",
-    "try_editing": "Try editing this file (src/routes/index.svelte) to test live reloading."
-  }
-}
diff --git a/example/messages/en.json b/example/messages/en.json
index fb80aae..11c0d65 100644
--- a/example/messages/en.json
+++ b/example/messages/en.json
@@ -2,6 +2,11 @@
   "title": {
     "index": "Sapper project template!"
   },
+  "nav": {
+    "home": "Home",
+    "about": "About",
+    "blog": "Blog"
+  },
   "messages": {
     "success": "Great success!",
     "high_five": "High five",
diff --git a/example/messages/es-ES.json b/example/messages/es-ES.json
index bdab2c7..0d15ff4 100644
--- a/example/messages/es-ES.json
+++ b/example/messages/es-ES.json
@@ -2,6 +2,11 @@
   "title": {
     "index": " Plantilla de proyecto Sapper!"
   },
+  "nav": {
+    "home": "Inicio",
+    "about": "Acerca",
+    "blog": "Blog"
+  },
   "messages": {
     "success": "Gran éxito!",
     "high_five": "Cinco altos",
diff --git a/example/messages/pt-BR.json b/example/messages/pt-BR.json
index f329c42..b1f3f29 100644
--- a/example/messages/pt-BR.json
+++ b/example/messages/pt-BR.json
@@ -2,6 +2,11 @@
   "title": {
     "index": "Modelo de projeto em Sapper!"
   },
+  "nav": {
+    "home": "Home",
+    "about": "Sobre",
+    "blog": "Blog"
+  },
   "messages": {
     "success": "Suuuucesso!",
     "high_five": "Toca aqui",
diff --git a/example/src/components/Nav.svelte b/example/src/components/Nav.svelte
index 1892864..eb4c82f 100644
--- a/example/src/components/Nav.svelte
+++ b/example/src/components/Nav.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { _ } from 'svelte-i18n'
+
 	export let segment;
 </script>
 
@@ -50,11 +52,11 @@
 
 <nav>
 	<ul>
-		<li><a class:selected='{segment === undefined}' href='.'>home</a></li>
-		<li><a class:selected='{segment === "about"}' href='about'>about</a></li>
+		<li><a class:selected='{segment === undefined}' href='.'>{$_('nav.home')}</a></li>
+		<li><a class:selected='{segment === "about"}' href='about'>{$_('nav.about')}</a></li>
 
 		<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
 		     the blog data when we hover over the link or tap it on a touchscreen -->
-		<li><a rel=prefetch class:selected='{segment === "blog"}' href='blog'>blog</a></li>
+		<li><a rel=prefetch class:selected='{segment === "blog"}' href='blog'>{$_('nav.blog')}</a></li>
 	</ul>
 </nav>
diff --git a/example/src/i18n.js b/example/src/i18n.js
index b745f1f..87da174 100644
--- a/example/src/i18n.js
+++ b/example/src/i18n.js
@@ -1,6 +1,5 @@
-import { register } from 'svelte-i18n'
+import { register, getClientLocale, locale } from 'svelte-i18n'
 
 register('en', () => import('../messages/en.json'))
 register('pt-BR', () => import('../messages/pt-BR.json'))
-register('en-US', () => import('../messages/en-US.json'))
 register('es-ES', () => import('../messages/es-ES.json'))
diff --git a/example/src/routes/_layout.svelte b/example/src/routes/_layout.svelte
index 01d1f8c..649fa7f 100644
--- a/example/src/routes/_layout.svelte
+++ b/example/src/routes/_layout.svelte
@@ -1,9 +1,13 @@
 <script context="module">
-  import { locale, locales, getClientLocale, waitLocale } from 'svelte-i18n'
+  import { locales, locale, waitLocale,getClientLocale } from 'svelte-i18n'
   import Lang from 'svelte-i18n/Lang.svelte'
 
   export async function preload() {
-    return locale.set(getClientLocale({ default: 'pt-BR', navigator: true }))
+    const initialLocale = getClientLocale({
+      default: 'pt-BR',
+      navigator: true
+    })
+    return locale.set(initialLocale)
   }
 </script>
 
@@ -12,7 +16,8 @@
 
   const localeLabels = {
     'pt-BR': 'Português',
-    'en-US': 'English',
+    'en': 'English',
+    'en-US': 'English US',
     'es-ES': 'Espanõl',
   }
 
diff --git a/example/src/routes/about/_locales/en-US.json b/example/src/routes/about/_locales/en.json
similarity index 100%
rename from example/src/routes/about/_locales/en-US.json
rename to example/src/routes/about/_locales/en.json
diff --git a/example/src/routes/about/index.svelte b/example/src/routes/about/index.svelte
index 40674cb..776c47a 100644
--- a/example/src/routes/about/index.svelte
+++ b/example/src/routes/about/index.svelte
@@ -1,7 +1,7 @@
 <script context="module">
   import { register, waitLocale } from 'svelte-i18n'
 
-  register('en-US', () => import('./_locales/en-US.json'))
+  register('en', () => import('./_locales/en.json'))
   register('pt-BR', () => import('./_locales/pt-BR.json'))
   register('es-ES', () => import('./_locales/es-ES.json'))
 
diff --git a/test/client/index.test.ts b/test/client/index.test.ts
index bf503e0..ecae6d0 100644
--- a/test/client/index.test.ts
+++ b/test/client/index.test.ts
@@ -147,7 +147,7 @@ describe('utilities', () => {
 
     it('should get the fallback locale', () => {
       window.location.hostname = 'pt.example.com'
-      expect(getClientLocale({ hostname: /^.*?\./ })).toBe('pt')
+      expect(getClientLocale({ hostname: /^(.*?)\./ })).toBe('pt')
     })
   })