diff --git a/src/app/@theme/layouts/one-column/one-column.layout.scss b/src/app/@theme/layouts/one-column/one-column.layout.scss
index 9c4610e1..f1ad0b6b 100644
--- a/src/app/@theme/layouts/one-column/one-column.layout.scss
+++ b/src/app/@theme/layouts/one-column/one-column.layout.scss
@@ -1,4 +1,4 @@
-@import '~@nga/theme/styles/component';
+@import '../../styles/variables';
 
 // TODO move colors to theme
 @include nga-install-component() {
diff --git a/src/app/@theme/styles/global.scss b/src/app/@theme/styles/global.scss
new file mode 100644
index 00000000..94c44a58
--- /dev/null
+++ b/src/app/@theme/styles/global.scss
@@ -0,0 +1,3 @@
+@mixin ngx-global-theme() {
+  // any global, non-component styles go here
+}
diff --git a/src/app/@theme/styles/styles.scss b/src/app/@theme/styles/styles.scss
new file mode 100644
index 00000000..852ee3e8
--- /dev/null
+++ b/src/app/@theme/styles/styles.scss
@@ -0,0 +1,16 @@
+// themes - our custom or/and out of the box themes
+@import 'variables';
+
+// framework component themes (styles tied to theme variables)
+@import '~@nga/theme/styles/globals';
+@import '~@nga/auth/styles/all';
+
+// custom global styles
+@import 'global';
+
+// install the framework and custom global styles
+@include nga-install() {
+  @include nga-theme-global();
+  @include nga-auth-global();
+  @include ngx-global-theme();
+};
diff --git a/src/app/@theme/styles/themes.scss b/src/app/@theme/styles/themes.scss
index e2ef5c64..e69de29b 100644
--- a/src/app/@theme/styles/themes.scss
+++ b/src/app/@theme/styles/themes.scss
@@ -1,7 +0,0 @@
-@import '~@nga/theme/styles/all';
-@include nga-themes-install() {
-  // write global styles here
-}
-
-@import '~@nga/auth/styles/all';
-@include nga-auth-install();
diff --git a/src/app/@theme/styles/variables.scss b/src/app/@theme/styles/variables.scss
new file mode 100644
index 00000000..f44d994c
--- /dev/null
+++ b/src/app/@theme/styles/variables.scss
@@ -0,0 +1,19 @@
+// nga theming framework
+@import '~@nga/theme/styles/theming';
+// nga our of the box themes
+@import '~@nga/theme/styles/themes';
+
+// which themes you what to enable (empty to enable all - not recommended)
+$nga-enabled-themes: (default, light, cosmic);
+
+$nga-themes: nga-register-theme((
+ // app wise variables for each theme
+), default, default);
+
+$nga-themes: nga-register-theme((
+  // app wise variables for each theme
+), cosmic, cosmic);
+
+$nga-themes: nga-register-theme((
+  // app wise variables for each theme
+), light, light);
diff --git a/src/app/pages/charts/echarts/echarts.component.scss b/src/app/pages/charts/echarts/echarts.component.scss
index a02fccbf..58cfba02 100644
--- a/src/app/pages/charts/echarts/echarts.component.scss
+++ b/src/app/pages/charts/echarts/echarts.component.scss
@@ -1,4 +1,4 @@
-@import '~@nga/theme/styles/component';
+@import '../../../@theme/styles/variables';
 
 @include nga-install-component() {
   display: block;
diff --git a/src/app/pages/dashboard/dashboard.component.scss b/src/app/pages/dashboard/dashboard.component.scss
index d9844473..4fc61182 100644
--- a/src/app/pages/dashboard/dashboard.component.scss
+++ b/src/app/pages/dashboard/dashboard.component.scss
@@ -1,4 +1,4 @@
-@import '~@nga/theme/styles/component';
+@import '../../@theme/styles/variables';
 @import '~@nga/theme/styles/global/bootstrap/hero-buttons';
 
 @include nga-install-component() {
diff --git a/src/app/pages/dashboard/status-cards/status-cards.component.scss b/src/app/pages/dashboard/status-cards/status-cards.component.scss
index fc87958a..2515dce7 100644
--- a/src/app/pages/dashboard/status-cards/status-cards.component.scss
+++ b/src/app/pages/dashboard/status-cards/status-cards.component.scss
@@ -1,4 +1,4 @@
-@import '~@nga/theme/styles/component';
+@import '../../../@theme/styles/variables';
 @import '~@nga/theme/styles/global/bootstrap/hero-buttons';
 
 @include nga-install-component() {
diff --git a/src/app/pages/maps/gmaps/gmaps.component.scss b/src/app/pages/maps/gmaps/gmaps.component.scss
index f4e1d497..93100117 100644
--- a/src/app/pages/maps/gmaps/gmaps.component.scss
+++ b/src/app/pages/maps/gmaps/gmaps.component.scss
@@ -1,4 +1,4 @@
-@import '~@nga/theme/styles/component';
+@import '../../../@theme/styles/variables';
 
 @include nga-install-component() {
   /deep/ agm-map .agm-map-container-inner {
diff --git a/src/app/pages/maps/leaflet/leaflet.component.scss b/src/app/pages/maps/leaflet/leaflet.component.scss
index 65865985..b0aaa762 100644
--- a/src/app/pages/maps/leaflet/leaflet.component.scss
+++ b/src/app/pages/maps/leaflet/leaflet.component.scss
@@ -1,4 +1,4 @@
-@import '~@nga/theme/styles/component';
+@import '../../../@theme/styles/variables';
 
 @include nga-install-component() {
   display: block;
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index e34545c5..e156b5cc 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import 'style-loader!../@theme/styles/themes.scss';
+import 'style-loader!../@theme/styles/styles.scss';
 
 @Component({
   selector: 'ngx-pages',
diff --git a/src/app/pages/ui-features/buttons/buttons.component.scss b/src/app/pages/ui-features/buttons/buttons.component.scss
index c81179cd..0b553aef 100644
--- a/src/app/pages/ui-features/buttons/buttons.component.scss
+++ b/src/app/pages/ui-features/buttons/buttons.component.scss
@@ -1,4 +1,4 @@
-@import '~@nga/theme/styles/component';
+@import '../../../@theme/styles/variables';
 @import '~@nga/theme/styles/global/bootstrap/buttons';
 
 @mixin btn-bg($background) {