diff --git a/Gruntfile.js b/Gruntfile.js
index c08c6ba..d3935ec 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -62,8 +62,9 @@ module.exports = function(grunt) {
           'app/controllers/controller.js',
           'app/controllers/config.controller.js',
           'app/directives/archetypeproperty.js',
-          'app/resources/propertyeditor.js',
-          'app/filters/locale.js'
+          'app/directives/localize.js',
+          'app/services/localization.js',
+          'app/resources/propertyeditor.js'
         ],
         dest: '<%= dest %>/js/archetype.js'
       }
@@ -107,9 +108,7 @@ module.exports = function(grunt) {
         {expand: true, cwd: 'app/', src: ['package.manifest'], dest: '<%= dest %>', flatten: true},
         {expand: true, cwd: 'app/views/', src: ['archetype.html', 'archetype.config.html'], dest: '<%= dest %>/views', flatten: true},
         {expand: true, cwd: 'app/config/', src: ['propertyEditors.views.js'], dest: '<%= dest %>/js', flatten: true},
-        {expand: true, cwd: 'app/config/', src: ['en-gb.js'], dest: '<%= dest %>/js', flatten: true},
-        {expand: true, cwd: 'app/config/', src: ['en-us.js'], dest: '<%= dest %>/js', flatten: true},
-        {expand: true, cwd: 'app/config/', src: ['fr-fr.js'], dest: '<%= dest %>/js', flatten: true},
+        {expand: true, cwd: 'app/langs/', src: ['**'], dest: '<%= dest %>/langs', flatten: true},
         {expand: true, cwd: 'app/Umbraco/Umbraco.Archetype/bin/Debug/', src: ['Archetype.dll'], dest: '<%= dest %>/bin', flatten: true} 
         ]
       },
diff --git a/app/controllers/config.controller.js b/app/controllers/config.controller.js
index 26c760b..9ad4d38 100644
--- a/app/controllers/config.controller.js
+++ b/app/controllers/config.controller.js
@@ -1,4 +1,4 @@
-angular.module("umbraco").controller("Imulus.ArchetypeConfigController", function ($scope, $http, assetsService, dialogService, archetypePropertyEditorResource, userService) {
+angular.module("umbraco").controller("Imulus.ArchetypeConfigController", function ($scope, $http, assetsService, dialogService, archetypePropertyEditorResource) {
     
     //$scope.model.value = ""; 
     //console.log($scope.model.value); 
@@ -10,7 +10,6 @@ angular.module("umbraco").controller("Imulus.ArchetypeConfigController", functio
 
     //ini the model
     $scope.model.value = $scope.model.value || defaultFieldsetConfigModel;
-    $scope.locales = {}
     
     //ini the render model
     initConfigRenderModel();
@@ -20,32 +19,6 @@ angular.module("umbraco").controller("Imulus.ArchetypeConfigController", functio
         $scope.availableDataTypes = data;
     });
 
-    archetypePropertyEditorResource.getDefaultLocale().then(function(defaultLocale){
-        $scope.locales.defaultLocale = defaultLocale;
-    });
-
-    //load the localization info
-    userService.getCurrentUser()
-        .then(function (user) {
-            return user.locale;
-        })
-        .then(function(langIso){
-            archetypePropertyEditorResource.getLocale(langIso)
-                .then(function(locale){
-                    $scope.locales.locale = locale;  
-                });
-    });
-
-    $scope.getLocales = function(){
-        if($scope.locales){
-
-            if(!$scope.locales.locale)
-                $scope.locales.locale = $scope.locales.defaultLocale;
-
-            return $scope.locales;
-        }
-    }
-
     //iconPicker
     $scope.selectIcon = function(fieldset){
         var dialog = dialogService.iconPicker({
@@ -53,7 +26,6 @@ angular.module("umbraco").controller("Imulus.ArchetypeConfigController", functio
                 fieldset.icon = data;
             }
         });
-
     }
 
     //config for the sorting
diff --git a/app/directives/archetypeproperty.js b/app/directives/archetypeproperty.js
index 60c21b9..8355696 100644
--- a/app/directives/archetypeproperty.js
+++ b/app/directives/archetypeproperty.js
@@ -1,4 +1,4 @@
-angular.module("umbraco").directive('archetypeProperty', function ($compile, $http, archetypePropertyEditorResource, umbPropEditorHelper) {
+angular.module("umbraco.directives").directive('archetypeProperty', function ($compile, $http, archetypePropertyEditorResource, umbPropEditorHelper) {
     
     function getFieldsetByAlias(fieldsets, alias)
     {
diff --git a/app/directives/localize.js b/app/directives/localize.js
new file mode 100644
index 0000000..9eae6b6
--- /dev/null
+++ b/app/directives/localize.js
@@ -0,0 +1,21 @@
+angular.module("umbraco.directives").directive('archetypeLocalize', function (archetypeLocalizationService) {
+	var linker = function (scope, element, attrs){
+
+		var key = scope.key;
+        
+        archetypeLocalizationService.localize(key).then(function(value){
+        	if(value){
+        		element.html(value);
+        	}
+        });
+	}   
+
+	return {
+	    restrict: "E",
+	    rep1ace: true,
+	    link: linker,
+	    scope: {
+	    	key: '@'
+	    }
+	}
+});
\ No newline at end of file
diff --git a/app/config/en-GB.js b/app/langs/en-gb.js
similarity index 100%
rename from app/config/en-GB.js
rename to app/langs/en-gb.js
diff --git a/app/config/en-us.js b/app/langs/en-us.js
similarity index 100%
rename from app/config/en-us.js
rename to app/langs/en-us.js
diff --git a/app/config/fr-fr.js b/app/langs/fr-fr.js
similarity index 100%
rename from app/config/fr-fr.js
rename to app/langs/fr-fr.js
diff --git a/app/resources/propertyeditor.js b/app/resources/propertyeditor.js
index a55d7dc..b26d8bb 100644
--- a/app/resources/propertyeditor.js
+++ b/app/resources/propertyeditor.js
@@ -7,7 +7,7 @@ angular.module('umbraco.resources').factory('archetypePropertyEditorResource', f
             ).then(function (data) {
                 return data.map(function(d) {
                     return { "id": d.id, "name": d.name }
-                });
+                }); 
             });
         },
         getDataType: function(id) {
@@ -28,16 +28,6 @@ angular.module('umbraco.resources').factory('archetypePropertyEditorResource', f
 
                 return "";
             });
-        },
-        getLocale: function(langIso) {
-            return umbRequestHelper.resourcePromise(
-                $http.get("/App_plugins/Archetype/js/" + langIso.toLowerCase() + ".js"), 'Failed to retrieve locale'
-            );
-        },
-        getDefaultLocale: function() {
-            return umbRequestHelper.resourcePromise(
-                $http.get("/App_plugins/Archetype/js/en-us.js"), 'Failed to retrieve default locale'
-            );
         }
-    };
-});
+    }
+}); 
\ No newline at end of file
diff --git a/app/services/localization.js b/app/services/localization.js
new file mode 100644
index 0000000..1f4fc51
--- /dev/null
+++ b/app/services/localization.js
@@ -0,0 +1,42 @@
+angular.module('umbraco.services').factory('archetypeLocalizationService', function($http, $q, userService){
+    var service = {
+        resourceFileLoaded: false,
+        dictionary: {},
+        localize: function(key) {
+            var deferred = $q.defer();
+
+            if(service.resourceFileLoaded){
+                var value = service._lookup(key);
+                deferred.resolve(value);
+            }
+            else{
+                service.initLocalizedResources().then(function(dictionary){
+                   var value = service._lookup(key);
+                   deferred.resolve(value); 
+                });
+            } 
+
+            return deferred.promise;
+        },
+        _lookup: function(key){
+            return service.dictionary[key];
+        },
+        initLocalizedResources:function () {
+            var deferred = $q.defer();
+            userService.getCurrentUser().then(function(user){
+                $http.get("/App_plugins/Archetype/langs/" + user.locale + ".js") 
+                    .then(function(response){
+                        service.resourceFileLoaded = true;
+                        service.dictionary = response.data;
+
+                        return deferred.resolve(service.dictionary);
+                    }, function(err){
+                        return deferred.reject("Lang file missing");
+                    });
+            });
+            return deferred.promise;
+        }
+    }
+
+    return service;
+});
\ No newline at end of file
diff --git a/app/views/archetype.config.html b/app/views/archetype.config.html
index d2b7bba..187e5bb 100644
--- a/app/views/archetype.config.html
+++ b/app/views/archetype.config.html
@@ -10,23 +10,23 @@
                 <div class="archetypeFieldsetTitle" ng-click="focusFieldset(fieldset)">{{fieldset.label}}</div>
                 <div class="archetypeFieldsetCollapser" ng-hide="fieldset.collapse && fieldset.label">
                     <div class="archetypeFieldsetOption">
-                        <label for="archetypeFieldLabel_{{$index}}">{{'label' | archetypeLocale:getLocales()}}</label>
+                        <label for="archetypeFieldLabel_{{$index}}"><archetype-localize key="label">Label</archetype-localize></label>
                         <input type="text" id="archetypeFieldLabel_{{$index}}" ng-model="fieldset.label" />
                     </div>
                     <div class="archetypeFieldsetOption">
-                        <label for="archetypeFieldAlias_{{$index}}">{{'alias' | archetypeLocale:getLocales()}}</label>
+                        <label for="archetypeFieldAlias_{{$index}}"><archetype-localize key="alias">Alias</archetype-localize></label>
                         <input type="text" id="archetypeFieldAlias_{{$index}}" ng-model="fieldset.alias" required/>
                     </div>
                     <div class="archetypeFieldsetOption">
-                        <label for="archetypeFieldLabelTemplate_{{$index}}">{{'labelTemplate' | archetypeLocale:getLocales()}}</label>
+                        <label for="archetypeFieldLabelTemplate_{{$index}}"><archetype-localize key="labelTemplate">Alias</archetype-localize></label>
                         <input type="text" id="archetypeFieldLabelTemplate_{{$index}}" ng-model="fieldset.labelTemplate" />
                     </div>
                     <div class="archetypeFieldsetOption" ng-show="archetypeConfigRenderModel.enableMultipleFieldsets">
-                        <label for="archetypeFieldIcon_{{$index}}">{{'icon' | archetypeLocale:getLocales()}}</label>
-                        <i class="fieldsetIcon icon ng-class:fieldset.icon"></i><a ng-click="selectIcon(fieldset)">{{'select' | archetypeLocale:getLocales()}}…</a>
+                        <label for="archetypeFieldIcon_{{$index}}"><archetype-localize key="icon">Alias</archetype-localize></label>
+                        <i class="fieldsetIcon icon ng-class:fieldset.icon"></i><a ng-click="selectIcon(fieldset)"><archetype-localize key="select">Alias</archetype-localize>…</a>
                     </div>
                     <div class="archetypeFieldsetOption">
-                        <label>{{'properties' | archetypeLocale:getLocales()}}</label>
+                        <label>{{'properties'}}</label>
                     </div> 
                     <div class="archetypePropertiesWrapper">
                         <ul ui-sortable="sortableOptions" ng-model="fieldset.properties">
@@ -41,27 +41,27 @@
                                 </div>
                                 <div class="archetypePropertyCollapser" ng-hide="property.collapse && property.label">
                                     <div>
-                                        <label for="archetypePropertyLabel_{{$parent.$index}}_{{$index}}">{{'label' | archetypeLocale:getLocales()}}</label>
+                                        <label for="archetypePropertyLabel_{{$parent.$index}}_{{$index}}"><archetype-localize key="label">Alias</archetype-localize></label>
                                         <input type="text" id="archetypePropertyLabel_{{$parent.$index}}_{{$index}}" ng-model="property.label" />
                                     </div>
                                     <div>
-                                        <label for="archetypePropertyAlias_{{$parent.$index}}_{{$index}}">{{'alias' | archetypeLocale:getLocales()}}</label>
+                                        <label for="archetypePropertyAlias_{{$parent.$index}}_{{$index}}"><archetype-localize key="alias">Alias</archetype-localize></label>
                                         <input type="text" id="archetypePropertyAlias_{{$parent.$index}}_{{$index}}" ng-model="property.alias" required/>
                                     </div>
                                     <div>
-                                        <label for="archetypePropertyHelpText_{{$parent.$index}}_{{$index}}">{{'helpText' | archetypeLocale:getLocales()}}</label>
+                                        <label for="archetypePropertyHelpText_{{$parent.$index}}_{{$index}}"><archetype-localize key="helpText">Alias</archetype-localize></label>
                                         <input type="text" id="archetypePropertyHelpText_{{$parent.$index}}_{{$index}}" ng-model="property.helpText" />
                                     </div>
                                     <div>
-                                        <label for="archetypePropertyDataType_{{$parent.$index}}_{{$index}}">{{'dataType' | archetypeLocale:getLocales()}}</label>
+                                        <label for="archetypePropertyDataType_{{$parent.$index}}_{{$index}}"><archetype-localize key="dataType">Alias</archetype-localize></label>
                                         <select id="archetypePropertyDataType_{{$parent.$index}}_{{$index}}" ng-model="property.dataTypeId" ng-options="datatype.id as datatype.name for datatype in availableDataTypes"></select>
                                     </div>
                                     <div>
-                                        <label for="archetypePropertyDefaultValue_{{$parent.$index}}_{{$index}}">{{'defaultValue' | archetypeLocale:getLocales()}}</label>
+                                        <label for="archetypePropertyDefaultValue_{{$parent.$index}}_{{$index}}"><archetype-localize key="defaultValue">Alias</archetype-localize></label>
                                         <input type="text" id="archetypePropertyDefaultValue_{{$parent.$index}}_{{$index}}" ng-model="property.value" />
                                     </div>
                                     <div>
-                                        <label for="archetypePropertyRequired_{{$parent.$index}}_{{$index}}">{{'required' | archetypeLocale:getLocales()}}</label>
+                                        <label for="archetypePropertyRequired_{{$parent.$index}}_{{$index}}"><archetype-localize key="required">Alias</archetype-localize></label>
                                         <input type="checkbox" id="archetypePropertyRequired_{{$parent.$index}}_{{$index}}" ng-model="property.required" />
                                     </div>
                                 </div>
@@ -75,50 +75,50 @@
 
     <div class="archetypeOptions">
         <div>
-            <label for="archetypeOptionsToggle">{{'toggleAdvanced' | archetypeLocale:getLocales()}}<small>{{'toggleAdvancedDescription' | archetypeLocale:getLocales()}}</small></label>
+            <label for="archetypeOptionsToggle"><archetype-localize key="toggleAdvanced">Alias</archetype-localize><small><archetype-localize key="toggleAdvancedDescription">Alias</archetype-localize></small></label>
             <input type="checkbox" id="archetypeOptionsToggle" ng-model="archetypeConfigRenderModel.showAdvancedOptions"/>
         </div>
     </div>
 
     <div class="archetypeAdvancedOptions" ng-show="archetypeConfigRenderModel.showAdvancedOptions">
         <div>
-            <label for="archetypeAdvancedOptionsHideControls">{{'hideFieldsetControls' | archetypeLocale:getLocales()}}<small>{{'hideFieldsetControlsDescription' | archetypeLocale:getLocales()}}</small></label>
+            <label for="archetypeAdvancedOptionsHideControls"><archetype-localize key="hideFieldsetControls">hideFieldsetControls</archetype-localize><small><archetype-localize key="hideFieldsetControlsDescription">Alias</archetype-localize></small></label>
             <input type="checkbox" id="archetypeAdvancedOptionsHideControls" ng-model="archetypeConfigRenderModel.hideFieldsetControls"/>
         </div>
         <div>
-            <label for="archetypeAdvancedOptionsHideLabels">{{'hidePropertyLabels' | archetypeLocale:getLocales()}}<small>{{'hidePropertyLabelsDescription' | archetypeLocale:getLocales()}}</small></label>
+            <label for="archetypeAdvancedOptionsHideLabels"><archetype-localize key="hidePropertyLabels">hidePropertyLabels</archetype-localize><small><archetype-localize key="hidePropertyLabelsDescription">Alias</archetype-localize></small></label>
             <input type="checkbox" id="archetypeAdvancedOptionsHideLabels" ng-model="archetypeConfigRenderModel.hidePropertyLabels"/>
         </div>
         <div>
-            <label for="archetypeAdvancedOptionsMaxFieldsets">{{'maxFieldsets' | archetypeLocale:getLocales()}}<small>{{'maxFieldsetsDescription' | archetypeLocale:getLocales()}}</small></label>
+            <label for="archetypeAdvancedOptionsMaxFieldsets"><archetype-localize key="maxFieldsets">Alias</archetype-localize><small><archetype-localize key="maxFieldsetsDescription">Alias</archetype-localize></small></label>
             <input type="number" id="archetypeAdvancedOptionsMaxFieldsets" class="archetypeMaxFieldsets" ng-model="archetypeConfigRenderModel.maxFieldsets"/>
         </div>
         <div>
-            <label for="archetypeAdvancedOptionsMultipleFieldsets">{{'enableMultipleFieldsets' | archetypeLocale:getLocales()}}<small>{{'enableMultipleFieldsetsDescription' | archetypeLocale:getLocales()}}</small></label>
+            <label for="archetypeAdvancedOptionsMultipleFieldsets"><archetype-localize key="enableMultipleFieldsets">Alias</archetype-localize><small><archetype-localize key="enableMultipleFieldsetsDescription">Alias</archetype-localize></small></label>
             <input type="checkbox" id="archetypeAdvancedOptionsMultipleFieldsets" ng-model="archetypeConfigRenderModel.enableMultipleFieldsets"/>
         </div> 
         <div>
-            <label for="archetypeAdvancedOptionsFieldsetToolbar">{{'hideFieldsetToolbar' | archetypeLocale:getLocales()}}<small>{{'hideFieldsetToolbarDescription' | archetypeLocale:getLocales()}}</small></label>
+            <label for="archetypeAdvancedOptionsFieldsetToolbar"><archetype-localize key="hideFieldsetToolbar">Alias</archetype-localize><small><archetype-localize key="hideFieldsetToolbarDescription">Alias</archetype-localize></small></label>
             <input type="checkbox" id="archetypeAdvancedOptionsFieldsetToolbar" ng-model="archetypeConfigRenderModel.hideFieldsetToolbar"/>
         </div>
         <div>
-            <label for="archetypeAdvancedOptionsCustomClass">{{'customWrapperClass' | archetypeLocale:getLocales()}}<small>{{'customWrapperClass' | archetypeLocale:getLocales()}}</small></label>
+            <label for="archetypeAdvancedOptionsCustomClass"><archetype-localize key="customWrapperClass">Alias</archetype-localize><small><archetype-localize key="customWrapperClassDescription">Alias</archetype-localize></small></label>
             <input type="text" id="archetypeAdvancedOptionsCustomClass" ng-model="archetypeConfigRenderModel.customCssClass"/>
         </div>
         <div>
-            <label for="archetypeAdvancedOptionsCustomCss">{{'cssFile' | archetypeLocale:getLocales()}}<small>{{'cssFileDescription' | archetypeLocale:getLocales()}}</small></label>
+            <label for="archetypeAdvancedOptionsCustomCss"><archetype-localize key="cssFile">Alias</archetype-localize><small><archetype-localize key="cssFileDescription">Alias</archetype-localize></small></label>
             <input type="text" id="archetypeAdvancedOptionsCustomCss" ng-model="archetypeConfigRenderModel.customCssPath"/>
         </div>
         <div>
-            <label for="archetypeAdvancedOptionsCustomJs">{{'jsFile' | archetypeLocale:getLocales()}}<small>{{'jsFileDescription' | archetypeLocale:getLocales()}}</small></label>
+            <label for="archetypeAdvancedOptionsCustomJs"><archetype-localize key="jsFile">Alias</archetype-localize><small><archetype-localize key="jsFileDescription">Alias</archetype-localize></small></label>
             <input type="text" id="archetypeAdvancedOptionsCustomJs" ng-model="archetypeConfigRenderModel.customJsPath"/>
         </div>
         <div>
-            <label for="archetypeAdvancedOptionsDeveloperMode">{{'toggleDeveloperMode' | archetypeLocale:getLocales()}}<small>{{'toggleDeveloperModeDescription' | archetypeLocale:getLocales()}}</small></label>
+            <label for="archetypeAdvancedOptionsDeveloperMode"><archetype-localize key="toggleDeveloperMode">Alias</archetype-localize><small><archetype-localize key="toggleDeveloperModeDescription">Alias</archetype-localize></small></label>
             <input type="checkbox" id="archetypeAdvancedOptionsDeveloperMode" ng-model="archetypeConfigRenderModel.developerMode"/>
         </div>
         <div>
-            <label for="archetypeAdvancedOptionsConfigModel">{{'configModel' | archetypeLocale:getLocales()}}<small>{{'configModelDescription' | archetypeLocale:getLocales()}}</small></label>
+            <label for="archetypeAdvancedOptionsConfigModel"><archetype-localize key="configModel">Alias</archetype-localize><small><archetype-localize key="configModelDescription">Alias</archetype-localize></small></label>
             <textarea class="archetypeDeveloperModel" id="archetypeAdvancedOptionsConfigModel" ng-model="archetypeConfigRenderModel"></textarea>
         </div>
     </div>