diff --git a/conf/app/README.md b/conf/app/README.md
new file mode 100644
index 0000000..bdc361a
--- /dev/null
+++ b/conf/app/README.md
@@ -0,0 +1,47 @@
+# XOS-GUI Config
+
+### Note that the configurations defined in this folder are for development only, they are most likely to be overrided by a volume mount defined in `service-profile`
+
+## App Config
+
+This configuration will specifiy the rest API base url and the Websocket address.
+Here is it's structure:
+
+```
+angular.module('app')
+  .constant('AppConfig', {
+    apiEndpoint: '/spa/api',
+    websocketClient: '/'
+  });
+
+```
+
+## Style Config
+
+This configuration will contain branding information, such as title, logo and navigation items.
+Here is it's structure:
+
+```
+angular.module('app')
+  .constant('StyleConfig', {
+    projectName: 'CORD',
+    favicon: 'cord-favicon.png',
+    background: 'cord-bg.jpg',
+    payoff: 'Your VNF orchestrator',
+    logo: 'cord-logo.png',
+    routes: [
+        {
+            label: 'Slices',
+            state: 'xos.core.slices'
+        },
+        {
+            label: 'Instances',
+            state: 'xos.core.instances'
+        },
+        {
+            label: 'Nodes',
+            state: 'xos.core.nodes'
+        }
+    ]
+});
+```
\ No newline at end of file
diff --git a/conf/app/app.config.dev.js b/conf/app/app.config.dev.js
new file mode 100644
index 0000000..5c620d7
--- /dev/null
+++ b/conf/app/app.config.dev.js
@@ -0,0 +1,5 @@
+angular.module('app')
+  .constant('AppConfig', {
+    apiEndpoint: 'http://xos.dev:3000/api',
+    websocketClient: 'http://xos.dev:3000'
+  });
diff --git a/conf/app/app.config.dev.ts b/conf/app/app.config.dev.ts
deleted file mode 100644
index 50570d7..0000000
--- a/conf/app/app.config.dev.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {IAppConfig} from './interfaces';
-export const AppConfig: IAppConfig = {
-    apiEndpoint: 'http://xos.dev:3000/api',
-    websocketClient: 'http://xos.dev:3000'
-};
diff --git a/conf/app/app.config.production.js b/conf/app/app.config.production.js
new file mode 100644
index 0000000..8f5bd5a
--- /dev/null
+++ b/conf/app/app.config.production.js
@@ -0,0 +1,5 @@
+angular.module('app')
+  .constant('AppConfig', {
+    apiEndpoint: '/spa/api',
+    websocketClient: '/'
+  });
diff --git a/conf/app/app.config.production.ts b/conf/app/app.config.production.ts
deleted file mode 100644
index 63c19f3..0000000
--- a/conf/app/app.config.production.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {IAppConfig} from './interfaces';
-export const AppConfig: IAppConfig = {
-    apiEndpoint: '/spa/api',
-    websocketClient: '/'
-};
diff --git a/conf/app/app.config.remote.ts b/conf/app/app.config.remote.ts
deleted file mode 100644
index 24aa42d..0000000
--- a/conf/app/app.config.remote.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {IAppConfig} from './interfaces';
-export const AppConfig: IAppConfig = {
-    apiEndpoint: 'http://clnode031.clemson.cloudlab.us:8080/api',
-    websocketClient: 'http://clnode031.clemson.cloudlab.us:8080'
-};
diff --git a/conf/app/app.config.test.js b/conf/app/app.config.test.js
new file mode 100644
index 0000000..86cfcb1
--- /dev/null
+++ b/conf/app/app.config.test.js
@@ -0,0 +1,5 @@
+angular.module('app')
+  .constant('AppConfig', {
+      apiEndpoint: 'http://xos-test:3000/api',
+      websocketClient: 'http://xos-test:3000'
+  });
diff --git a/conf/app/app.config.test.ts b/conf/app/app.config.test.ts
deleted file mode 100644
index 109776c..0000000
--- a/conf/app/app.config.test.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {IAppConfig} from './interfaces';
-export const AppConfig: IAppConfig = {
-    apiEndpoint: 'http://xos-test:3000/api',
-    websocketClient: 'http://xos-test:3000'
-};
diff --git a/conf/app/interfaces.ts b/conf/app/interfaces.ts
deleted file mode 100644
index 39f085d..0000000
--- a/conf/app/interfaces.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {IXosNavigationRoute} from '../../src/app/core/services/navigation';
-export interface IStyleConfig {
-  projectName: string;
-  payoff: string;
-  favicon: string;
-  background: string;
-  logo: string;
-  routes: IXosNavigationRoute[];
-}
-
-export interface IAppConfig {
-  apiEndpoint: string;
-  websocketClient: string;
-}
diff --git a/conf/app/style.config.cord.ts b/conf/app/style.config.cord.js
similarity index 82%
rename from conf/app/style.config.cord.ts
rename to conf/app/style.config.cord.js
index c43cac8..6f7ebab 100644
--- a/conf/app/style.config.cord.ts
+++ b/conf/app/style.config.cord.js
@@ -1,5 +1,5 @@
-import {IStyleConfig} from './interfaces';
-export const StyleConfig: IStyleConfig = {
+angular.module('app')
+  .constant('StyleConfig', {
     projectName: 'CORD',
     favicon: 'cord-favicon.png',
     background: 'cord-bg.jpg',
@@ -19,4 +19,4 @@
             state: 'xos.core.nodes'
         }
     ]
-};
+});
diff --git a/conf/app/style.config.opencloud.ts b/conf/app/style.config.opencloud.js
similarity index 75%
rename from conf/app/style.config.opencloud.ts
rename to conf/app/style.config.opencloud.js
index c001344..9693c5d 100644
--- a/conf/app/style.config.opencloud.ts
+++ b/conf/app/style.config.opencloud.js
@@ -1,5 +1,5 @@
-import {IStyleConfig} from './interfaces';
-export const StyleConfig: IStyleConfig = {
+angular.module('app')
+  .constant('StyleConfig', {
     projectName: 'OpenCloud',
     favicon: 'opencloud-favicon.png',
     background: 'opencloud-bg.jpg',
@@ -11,4 +11,4 @@
             state: 'xos.core.slices'
         }
     ]
-};
+});
diff --git a/conf/webpack-dist.conf.js b/conf/webpack-dist.conf.js
index 21f8ce3..85ec542 100644
--- a/conf/webpack-dist.conf.js
+++ b/conf/webpack-dist.conf.js
@@ -7,6 +7,9 @@
 const pkg = require('../package.json');
 const autoprefixer = require('autoprefixer');
 const BaseHrefWebpackPlugin = require('base-href-webpack-plugin').BaseHrefWebpackPlugin;
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const env = process.env.NODE_ENV || 'production';
+const brand = process.env.BRAND || 'cord';
 
 module.exports = {
   module: {
@@ -47,9 +50,14 @@
     ]
   },
   plugins: [
+    new CopyWebpackPlugin([
+      { from: `./conf/app/app.config.${env}.js`, to: `app.config.js` },
+      { from: `./conf/app/style.config.${brand}.js`, to: `style.config.js` },
+    ]),
     new webpack.optimize.OccurrenceOrderPlugin(),
     new webpack.NoErrorsPlugin(),
     new HtmlWebpackPlugin({
+      inject: true,
       template: conf.path.src('index.html')
     }),
     new webpack.optimize.UglifyJsPlugin({
@@ -64,7 +72,7 @@
     }),
     new BaseHrefWebpackPlugin({
       baseHref: '/spa/'
-    })
+    }),
   ],
   postcss: () => [autoprefixer],
   output: {
diff --git a/conf/webpack.conf.js b/conf/webpack.conf.js
index 7991b97..544b2c5 100644
--- a/conf/webpack.conf.js
+++ b/conf/webpack.conf.js
@@ -4,6 +4,9 @@
 
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const autoprefixer = require('autoprefixer');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const env = process.env.NODE_ENV || 'production';
+const brand = process.env.BRAND || 'cord';
 
 module.exports = {
   module: {
@@ -54,6 +57,10 @@
     ]
   },
   plugins: [
+    new CopyWebpackPlugin([
+      { from: `./conf/app/app.config.${env}.js`, to: `app.config.js` },
+      { from: `./conf/app/style.config.${brand}.js`, to: `style.config.js` },
+    ]),
     new webpack.optimize.OccurrenceOrderPlugin(),
     new webpack.NoErrorsPlugin(),
     new HtmlWebpackPlugin({