diff --git a/browser/lib/i18n.js b/browser/lib/i18n.js
index 0b51ea54..56c0da71 100644
--- a/browser/lib/i18n.js
+++ b/browser/lib/i18n.js
@@ -1,7 +1,8 @@
-//load package for localization
+// load package for localization
 const i18n = new (require('i18n-2'))({
-    // setup some locales - other locales default to the first locale
-    locales: ['en', 'de', 'fr']
-});
+  // setup some locales - other locales default to the first locale
+  locales: ['en', 'de', 'fr'],
+  extension: '.json'
+})
 
-export default i18n;
\ No newline at end of file
+export default i18n
diff --git a/browser/main/Main.js b/browser/main/Main.js
index f05ad52d..50596615 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -156,7 +156,7 @@ class Main extends React.Component {
     } else {
       i18n.setLocale('fr')
     }
-    
+
     // Reload all data
     dataApi.init()
       .then((data) => {
diff --git a/browser/main/modals/PreferencesModal/FolderItem.js b/browser/main/modals/PreferencesModal/FolderItem.js
index 779ad0be..50d28013 100644
--- a/browser/main/modals/PreferencesModal/FolderItem.js
+++ b/browser/main/modals/PreferencesModal/FolderItem.js
@@ -180,7 +180,7 @@ class FolderItem extends React.Component {
     return (
       <div styleName='folderItem'>
         <div styleName='folderItem-left'>
-        {i18n.__('Are you sure to ')} <span styleName='folderItem-left-danger'>{i18n.__(' delete')}</span> {i18n.__('this folder?')}
+          {i18n.__('Are you sure to ')} <span styleName='folderItem-left-danger'>{i18n.__(' delete')}</span> {i18n.__('this folder?')}
         </div>
         <div styleName='folderItem-right'>
           <button styleName='folderItem-right-dangerButton'
diff --git a/browser/main/modals/PreferencesModal/StoragesTab.js b/browser/main/modals/PreferencesModal/StoragesTab.js
index a6be9555..d666b02a 100644
--- a/browser/main/modals/PreferencesModal/StoragesTab.js
+++ b/browser/main/modals/PreferencesModal/StoragesTab.js
@@ -147,7 +147,7 @@ class StoragesTab extends React.Component {
 
           <div styleName='addStorage-body-section'>
             <div styleName='addStorage-body-section-label'>
-            {i18n.__('Name')}
+              {i18n.__('Name')}
             </div>
             <div styleName='addStorage-body-section-name'>
               <input styleName='addStorage-body-section-name-input'
@@ -168,7 +168,7 @@ class StoragesTab extends React.Component {
                 <option value='FILESYSTEM'>{i18n.__('File System')}</option>
               </select>
               <div styleName='addStorage-body-section-type-description'>
-              {i18n.__('Setting up 3rd-party cloud storage integration:')}{' '}
+                {i18n.__('Setting up 3rd-party cloud storage integration:')}{' '}
                 <a href='https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup'
                   onClick={(e) => this.handleLinkClick(e)}
                 >{i18n.__('Cloud-Syncing-and-Backup')}</a>
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index f2132bdf..1939e0a9 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -156,7 +156,7 @@ class UiTab extends React.Component {
           <div styleName='group-header'>{i18n.__('Interface')}</div>
 
           <div styleName='group-section'>
-          {i18n.__('Interface Theme')}
+            {i18n.__('Interface Theme')}
             <div styleName='group-section-control'>
               <select value={config.ui.theme}
                 onChange={(e) => this.handleUIChange(e)}
@@ -171,7 +171,7 @@ class UiTab extends React.Component {
           </div>
 
           <div styleName='group-section'>
-          {i18n.__('Language')}
+            {i18n.__('Language')}
             <div styleName='group-section-control'>
               <select value={config.ui.language}
                 onChange={(e) => this.handleUIChange(e)}
@@ -223,7 +223,7 @@ class UiTab extends React.Component {
 
           <div styleName='group-section'>
             <div styleName='group-section-label'>
-            {i18n.__('Editor Theme')}
+              {i18n.__('Editor Theme')}
             </div>
             <div styleName='group-section-control'>
               <select value={config.editor.theme}
@@ -243,7 +243,7 @@ class UiTab extends React.Component {
           </div>
           <div styleName='group-section'>
             <div styleName='group-section-label'>
-            {i18n.__('Editor Font Size')}
+              {i18n.__('Editor Font Size')}
             </div>
             <div styleName='group-section-control'>
               <input styleName='group-section-control-input'
@@ -256,7 +256,7 @@ class UiTab extends React.Component {
           </div>
           <div styleName='group-section'>
             <div styleName='group-section-label'>
-            {i18n.__('Editor Font Family')}
+              {i18n.__('Editor Font Family')}
             </div>
             <div styleName='group-section-control'>
               <input styleName='group-section-control-input'
@@ -269,7 +269,7 @@ class UiTab extends React.Component {
           </div>
           <div styleName='group-section'>
             <div styleName='group-section-label'>
-            {i18n.__('Editor Indent Style')}
+              {i18n.__('Editor Indent Style')}
             </div>
             <div styleName='group-section-control'>
               <select value={config.editor.indentSize}
diff --git a/locales/de.js b/locales/de.json
similarity index 100%
rename from locales/de.js
rename to locales/de.json
diff --git a/locales/en.js b/locales/en.json
similarity index 100%
rename from locales/en.js
rename to locales/en.json
diff --git a/locales/fr.js b/locales/fr.json
similarity index 100%
rename from locales/fr.js
rename to locales/fr.json