diff --git a/webapp/components/flow-design-system/fds-demo.html b/webapp/components/flow-design-system/fds-demo.html
index 3966ed7..d6fd212 100644
--- a/webapp/components/flow-design-system/fds-demo.html
+++ b/webapp/components/flow-design-system/fds-demo.html
@@ -111,7 +111,7 @@
             <mat-divider></mat-divider>
             <mat-card-content>
                 <p>Tip: Use UPPERCASE text for 1-2 words, and Titlecase text for 3+ words.</p>
-                <button mat-raised-button color="primary">Primary</button>
+                <button mat-raised-button color="primary" i18n="Primary Raised Button|A raised button for the primary use of a card, dialog, or perspective.@@primary-button">Primary</button>
                 <button mat-raised-button color="accent">Accent</button>
                 <button mat-raised-button color="warn">Warn</button>
                 <button mat-raised-button color="fds-primary">FDS Primary</button>
diff --git a/webapp/fds-bootstrap.js b/webapp/fds-bootstrap.js
index eb04914..499ae7e 100644
--- a/webapp/fds-bootstrap.js
+++ b/webapp/fds-bootstrap.js
@@ -32,18 +32,19 @@
 enableProdMode();
 
 // Get the locale id from the global
-var locale = navigator.language;
+var locale = navigator.language.toLowerCase();
 
 var providers = [];
 
 // No locale or U.S. English: no translation providers so go ahead and bootstrap the app
-if (!locale || locale === 'en-US') {
+if (!locale || locale === 'en-us') {
     platformBrowserDynamic().bootstrapModule(FdsModule, {providers: providers});
 } else { //load the translation providers and bootstrap the module
-    var translationFile = '/locale/messages.' + locale + '.xlf';
+    var translationFile = './webapp/locale/messages.' + locale + '.xlf';
 
     $.ajax({
-        url: translationFile
+        url: translationFile,
+        dataType: 'text'
     }).done(function (translations) {
         // add providers if translation file for locale is loaded
         if (translations) {
diff --git a/webapp/fds.routes.js b/webapp/fds.routes.js
index baed473..556edb9 100644
--- a/webapp/fds.routes.js
+++ b/webapp/fds.routes.js
@@ -21,6 +21,6 @@
 const FdsRoutes = RouterModule.forRoot([{
     path: '',
     component: FdsDemo
-}]);
+}], { useHash: true });
 
 export default FdsRoutes;
diff --git a/webapp/locale/messages.es.xlf b/webapp/locale/messages.es.xlf
new file mode 100644
index 0000000..509c452
--- /dev/null
+++ b/webapp/locale/messages.es.xlf
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+      http://www.apache.org/licenses/LICENSE-2.0
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="es" datatype="plaintext" original="ng2.template">
+    <body>
+      <trans-unit id="primary-button" datatype="html">
+         <source>Primary</source>
+         <target state="new">Primario</target>
+        <note priority="1" from="description">A raised button for the primary use of a card, dialog, or perspective.</note>
+        <note priority="1" from="meaning">Primary Raised Button</note>
+       </trans-unit>
+    </body>
+  </file>
+</xliff>