chore(readMe): update link for demo ngx-admin (#6044 )

* fix(package-lock): update version in package-lock * fix(package-lock): update version in package-lock * chore(readMe): update link for demo ngx-admin
Update README.md
2025-09-22 05:50:48 +02:00 · 2024-09-25 11:40:43 +02:00 · 2024-01-05 15:18:00 +03:00 · 2023-10-29 15:06:39 +01:00 · 2023-10-29 14:50:21 +01:00 · 2023-10-25 14:09:02 +02:00
361 changed files with 17702 additions and 23327 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+IE 11
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -0,0 +1,57 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json",
+          "e2e/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/no-input-rename": [
+          "warn",
+          {
+            "allowedNames": ["name"]
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "prefix": "ngx",
+            "style": "kebab-case",
+            "type": "element"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "prefix": "ngx",
+            "style": "camelCase",
+            "type": "attribute"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}
--- a/.github/workflows/ACTION_TRIGGER_GUIDE.md
+++ b/.github/workflows/ACTION_TRIGGER_GUIDE.md
@ -0,0 +1,13 @@
+### Actions deploy guide
+
+In order to trigger workflow action you should execute the following curl:
+
+`curl -H "Accept: application/vnd.github.everest-preview+json" \`  
+`-H "Authorization: token <ACCESS_TOKEN>" \`  
+`--request POST \`  
+`--data '{"event_type": "<ACTION>"}' \`  
+`https://api.github.com/repos/akveo/ngx-admin/dispatches`
+
+This curl expects two input parameters:
+- `ACCESS_TOKEN`: A personal access token. Creating a [personal access token guide](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line)  
+- `ACTION`: action to trigger ('deploy-docs', 'deploy-to-demo')
--- a/.github/workflows/demoDeploy.yml
+++ b/.github/workflows/demoDeploy.yml
@ -0,0 +1,29 @@
+
+name: Deploy to demo
+
+on:
+  push:
+    branches:
+      - 'demo'
+    paths:
+      - 'src/**'
+  repository_dispatch:
+    types: deploy-to-demo
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install SSH key
+        uses: shimataro/ssh-key-action@v2
+        with:
+          key: ${{ secrets.SSH_KEY }}
+          known_hosts: ${{ secrets.KNOWN_HOSTS }}
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+      - uses: actions/checkout@v2
+        with:
+          ref: demo
+      - run: npm install
+      - run: npm run build:demo:prod
+      - run: rsync -r --delete-after dist/. "${{ secrets.REMOTE_URL }}":"${{ secrets.ADDRESS }}"
--- a/.github/workflows/docsDeploy.yml
+++ b/.github/workflows/docsDeploy.yml
@ -0,0 +1,28 @@
+name: Deploy docs
+on:
+  push:
+    branches:
+      - 'demo'
+    paths:
+      - 'docs/**'
+  repository_dispatch:
+    types: deploy-docs
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: '12'
+      - uses: actions/checkout@v2
+        with:
+          ref: demo
+      - name: Deploy
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+        run: |
+          npm install --silent
+          git config --global user.email "github-action@akveo.com"
+          git config --global user.name "Github Action"
+          npm run docs:gh-pages
--- a/.gitignore
+++ b/.gitignore
@ -23,6 +23,7 @@
 !.vscode/extensions.json

 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1 @@
+README.md
--- a/.travis.yml
+++ b/.travis.yml
@ -4,8 +4,6 @@ sudo: false
 dist: trusty

 node_js:
-  - '8'
-  - '9'
  - '10'

 branches:
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,167 @@
+<a name="11.0.0"></a>
+# [11.0.0](https://github.com/akveo/ngx-admin/compare/v10.0.0...v11.0.0) (2023-10-29)
+
+
+### Bug Fixes
+
+* **package-lock:** update version in package-lock ([#6002](https://github.com/akveo/ngx-admin/issues/6002)) ([e06d9bd](https://github.com/akveo/ngx-admin/commit/e06d9bd))
+
+### Features
+
+* update to Angular 15 ([aa91634](https://github.com/akveo/ngx-admin/commit/aa91634))
+
+### BREAKING CHANGES
+
+- Angular updated to version 14.
+- Nebular updated to version 10.
+
+
+<a name="10.0.0"></a>
+# [10.0.0](https://github.com/akveo/ngx-admin/compare/v9.0.0...v10.0.0) (2023-03-07)
+
+
+### Bug Fixes
+
+* **angular 13:** fix issues after updates to Angular 13 in rooms component and country orders component ([#5965](https://github.com/akveo/ngx-admin/issues/5965)) ([384b841](https://github.com/akveo/ngx-admin/commit/384b841))
+* fix issues after updates to Angular 13 in rooms component and country orders component ([1d78122](https://github.com/akveo/ngx-admin/commit/1d78122))
+
+
+### Features
+
+* update to Angular 14 ([#1](https://github.com/akveo/ngx-admin/issues/1)) ([2f98e08](https://github.com/akveo/ngx-admin/commit/2f98e08)), closes [#5965](https://github.com/akveo/ngx-admin/issues/5965)
+
+### BREAKING CHANGES
+
+- Angular updated to version 13.
+- Nebular updated to version 9.
+- Move from tslint to eslint
+
+
+<a name="9.0.0"></a>
+# [9.0.0](https://github.com/akveo/ngx-admin/compare/v8.0.0...v9.0.0) (2022-12-29)
+
+
+### Bug Fixes
+
+* update dependencies ([#5938](https://github.com/akveo/ngx-admin/issues/5938)) ([f1365e1](https://github.com/akveo/ngx-admin/commit/f1365e1))
+
+
+### Features
+
+* add installation notes ([fd95769](https://github.com/akveo/ngx-admin/commit/fd95769))
+* update dependencies ([#5937](https://github.com/akveo/ngx-admin/issues/5937)) ([237ea6b](https://github.com/akveo/ngx-admin/commit/237ea6b))
+* update README.md ([f5015ac](https://github.com/akveo/ngx-admin/commit/f5015ac))
+* update templates section in README ([570031d](https://github.com/akveo/ngx-admin/commit/570031d))
+* update to Angular 13, move from tslint to eslint ([#5957](https://github.com/akveo/ngx-admin/issues/5957)) ([ec68f5e](https://github.com/akveo/ngx-admin/commit/ec68f5e))
+
+### BREAKING CHANGES
+
+- Angular updated to version 13.
+- Nebular updated to version 9.
+- Move from tslint to eslint
+
+
+<a name="8.0.0"></a>
+# [8.0.0](https://github.com/akveo/ngx-admin/compare/v7.0.0...v8.0.0) (2021-10-08)
+
+
+### Features
+
+* update to Angular 12 ([#5868](https://github.com/akveo/ngx-admin/issues/5868)) ([080830a](https://github.com/akveo/ngx-admin/commit/080830a))
+
+
+
+<a name="7.0.0"></a>
+# [7.0.0](https://github.com/akveo/ngx-admin/compare/v6.0.0...v7.0.0) (2021-01-19)
+
+* feat: update to Angular 11 ([#5826](https://github.com/akveo/ngx-admin/issues/5826)) ([ebe1810](https://github.com/akveo/ngx-admin/commit/ebe1810))
+
+
+
+<a name="6.0.0"></a>
+# [6.0.0](https://github.com/akveo/ngx-admin/compare/v5.0.0...v6.0.0) (2020-08-19)
+
+
+### Bug Fixes
+
+* **echarts:** set merge input ([#5632](https://github.com/akveo/ngx-admin/issues/5632)) ([dfaa5cd](https://github.com/akveo/ngx-admin/commit/dfaa5cd))
+* **sidebar:** toggle performance issues ([#5658](https://github.com/akveo/ngx-admin/issues/5658)) ([9eaf0bb](https://github.com/akveo/ngx-admin/commit/9eaf0bb))
+
+
+### Features
+
+* update to Angular 10 ([#5747](https://github.com/akveo/ngx-admin/issues/5747)) ([ec3282c](https://github.com/akveo/ngx-admin/commit/ec3282c))
+
+### BREAKING CHANGES
+
+- Angular updated to version 10.
+- Nebular updated to version 6.
+
+
+<a name="5.0.0"></a>
+# [5.0.0](https://github.com/akveo/ngx-admin/compare/v4.0.1...v5.0.0) (2020-04-01)
+
+
+### Bug Fixes
+
+* **forms:** add missing forms module import ([#5530](https://github.com/akveo/ngx-admin/issues/5530)) ([1ff2a0d](https://github.com/akveo/ngx-admin/commit/1ff2a0d))
+* **tinymce:** set absolute path for skin url ([#5491](https://github.com/akveo/ngx-admin/issues/5491)) ([90125ab](https://github.com/akveo/ngx-admin/commit/90125ab))
+
+
+### Features
+
+* upgrade to Angular 9 and Nebular 5 ([#5628](https://github.com/akveo/ngx-admin/issues/5628)) ([fbbf944](https://github.com/akveo/ngx-admin/commit/fbbf944))
+* **seo:** add canonical tag ([#5578](https://github.com/akveo/ngx-admin/issues/5578)) ([76d31da](https://github.com/akveo/ngx-admin/commit/76d31da))
+* add calendar with week numbers example ([#5515](https://github.com/akveo/ngx-admin/issues/5515)) ([3242257](https://github.com/akveo/ngx-admin/commit/3242257))
+
+
+### BREAKING CHANGES
+
+- Angular updated to version 9.
+- Nebular updated to version 5.
+- `@agm/core` replaced with `@angular/google-maps`.
+- `ng2-completer` replaced with `@akveo/ng2-completer`, read details [here](https://github.com/akveo/ng2-smart-table/pull/1140#issue-392285957).
+
+
+
+<a name="4.0.1"></a>
+## [4.0.1](https://github.com/akveo/ngx-admin/compare/v4.0.0...v4.0.1) (2019-07-16)
+
+
+### Bug Fixes
+
+* **typography:** prevent bootstrap color override ([#2161](https://github.com/akveo/ngx-admin/issues/2161)) ([243390c](https://github.com/akveo/ngx-admin/commit/243390c))
+
+
+### Features
+
+* update Nebular to 4.1.2 ([#5451](https://github.com/akveo/ngx-admin/issues/5451)) ([a2e93f9](https://github.com/akveo/ngx-admin/commit/a2e93f9))
+
+
+
+<a name="4.0.0"></a>
+# [4.0.0](https://github.com/akveo/ngx-admin/compare/v3.2.0...v4.0.0) (2019-07-02)
+
+- Update to Nebular 4 based on Eva Design System
+- New Dark theme
+- Angular 8
+
+### Features
+
+* update to Angular 8, Nebular 4 ([#2114](https://github.com/akveo/ngx-admin/issues/2114)) ([e9600b4](https://github.com/akveo/ngx-admin/commit/e9600b4))
+
+
+
+<a name="3.2.1"></a>
+## [3.2.1](https://github.com/akveo/ngx-admin/compare/v3.2.0...v3.2.1) (2019-04-02)
+
+
+### Bug Fixes
+
+* update [@angular-devkit](https://github.com/angular-devkit)/build-angular to fix import aliases ([78695cd](https://github.com/akveo/ngx-admin/commit/78695cd))
+
+
+
 <a name="3.2.0"></a>
 # [3.2.0](https://github.com/akveo/ngx-admin/compare/v3.1.0...v3.2.0) (2019-04-02)

--- a/README.md
+++ b/README.md
@ -1,31 +1,31 @@
-[![Build Status](https://travis-ci.org/akveo/ngx-admin.svg?branch=master)](https://travis-ci.org/akveo/ngx-admin)
-[![Join the chat at https://gitter.im/ng2-admin/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ng2-admin/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-[![Dependency Status](https://david-dm.org/akveo/ngx-admin/status.svg)](https://david-dm.org/akveo/ng2-admin)
+# ngx-admin [<img src="https://i.imgur.com/oMcxwZ0.png" alt="Eva Design System" height="20px" />](https://eva.design?utm_campaign=eva_design%20-%20home%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=top_status_tile)

-[Who uses ngx-admin?](https://github.com/akveo/ngx-admin/issues/1645)| [Documentation](https://akveo.github.io/ngx-admin/?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes) | [Installation Guidelines](https://akveo.github.io/ngx-admin/docs/getting-started/what-is-ngxadmin?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes)
+[Live Demo](https://demo.akveo.com/ngx-admin/?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=live_demo_link) | [Who uses ngx-admin?](https://github.com/akveo/ngx-admin/issues/1645) | [Documentation](https://akveo.github.io/ngx-admin?utm_campaign=ngx_admin%20-%20home%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=github_readme_documentation_link) | [Installation Guidelines](https://akveo.github.io/ngx-admin/docs/getting-started/what-is-ngxadmin?utm_campaign=ngx_admin%20-%20home%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=github_readme_installation_guidelines) | [Angular templates](https://www.akveo.com/templates?utm_campaign=services%20-%20github%20-%20templates&utm_source=ngx_admin&utm_medium=referral&utm_content=github%20readme%20top%20angular%20templates%20link)

-# Admin template based on Angular 7+, Bootstrap 4 and <a href="https://github.com/akveo/nebular">Nebular</a>
-<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=main_pic"><img src="https://i.imgur.com/OIL7rt8.png"/></a>
+# Admin template based on Angular and <a href="https://github.com/akveo/nebular">Nebular</a>

-### Backend Integration Bundles
-Easy way to integrate ngx-admin with .NET, Node.js, Java or PHP. [Checkout our Store](https://store.akveo.com/?utm_source=github&utm_medium=ngx_admin_readme) for ready to use Backend Bundles.
+<a target="_blank" href="https://demo.akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=hero_banner_corporate"><img src="https://i.imgur.com/mFdqvgG.png"/></a>

+## Repository state and engagement with the community

-### With 3 stunning visual themes
+Repository is currently in a state of minimal maintenance. Our primary focus is on ensuring that the Angular version used in this project is kept up to date. Our capacity to engage in other aspects of repository management is currently limited.

-#### Cosmic
-<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=cosmic&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/tvAJJhW.png"/></a>
+We are not actively reviewing or merging pull requests, responding to or resolving issues at this time. We appreciate the effort and contributions from the community and we understand that issues are crucial for the community. But now our current focus is solely on maintaining Angular.

-#### Corporate
-<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/wbEtUX4.jpg"/></a>
+## Installation notes

-#### Light
+To install ngx-admin you have to use NodeJS version 14.14+ because of [node-sass](https://github.com/sass/node-sass) version utilized in the application.

-<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=default&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/cb9U34M.jpg"/></a>
+## Key features
+
+- The most popular and trusted Angular open source dashboard template is out there. Used by hundreds of thousands developers worldwide and Fortune 500 companies\*.
+- Over 40+ Angular Components and 60+ Usage Examples. Kick off your project and save money by using ngx-admin.
+- Already using ngx-admin and willing to switch to material theme? Material theme is backward-compatible. Check out the article describing how to do that.
+- ngx-admin material works perfectly with Angular Material and Nebular. Take the best from both!

 ### What's included:

- Angular 7+ & Typescript
+- Angular & Typescript
 - Bootstrap 4+ & SCSS
 - Responsive layout
 - RTL support
@ -35,42 +35,67 @@ Easy way to integrate ngx-admin with .NET, Node.js, Java or PHP. [Checkout our S
 - 40+ Angular Components
 - 60+ Usage Examples

-### Hot Themes Reload
+## Material theme for ngx-admin

-<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=demo"><img src="https://i.imgur.com/XoJtfvK.gif"/></a>
+Material admin theme is based on the most popular Angular dashboard template - [ngx-admin](https://akveo.github.io/ngx-admin?utm_campaign=ngx_admin%20-%20home%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin_material&utm_medium=referral&utm_content=github_readme)
+To use material theme checkout `feat/material-theme` branch.

-### Demo
+### Templates

-<a target="_blank" href="http://akveo.com/ngx-admin/">Live Demo</a>
+<a href="https://www.akveo.com/templates/fleet-management-dashboard?utm_campaign=services%20[…]x-admin%20&utm_medium=referral%20&utm_content=github_banner%20"><img src="https://i.imgur.com/Z8EwGfh.png"></a>
+
+### With 6 stunning visual themes
+
+| <a target="_blank" href="https://demo.akveo.com/ngx-admin/pages/dashboard?theme=material-dark&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_material_themes_material_dark"><img src="https://i.imgur.com/67YAlhf.png"/></a> | <a target="_blank" href="https://demo.akveo.com/ngx-admin/pages/dashboard?theme=material-light&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_material_themes_material_light"><img src="https://i.imgur.com/aQzw0hD.png"/></a> |
+| --- | --- |
+|  Material Dark | Material Light |
+
+| <a target="_blank" href="https://demo.akveo.com/ngx-admin/pages/dashboard?theme=dark&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=github_readme_theme_dark"><img src="https://i.imgur.com/9UkTGgr.png"/></a> | <a target="_blank" href="https://demo.akveo.com/ngx-admin/pages/dashboard?theme=default&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=github_readme_theme_default"><img src="https://i.imgur.com/Kn3xDKQ.png"/></a> |
+| --- | --- |
+|  Dark| Default |
+
+| <a target="_blank" href="https://demo.akveo.com/ngx-admin/pages/dashboard?theme=cosmic&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=github_readme_theme_cosmic"><img src="https://i.imgur.com/iJu2YDF.png"/></a> | <a target="_blank" href="https://demo.akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=github_readme_theme_corporate"><img src="https://i.imgur.com/GpUt6NW.png"/></a> |
+| --- | --- |
+| Cosmic  | Corporate |

 ## Documentation
-This template is using [Nebular](https://github.com/akveo/nebular) modules set, [here you can find documentation and other useful articles](https://akveo.github.io/nebular/docs/guides/install-based-on-starter-kit).
+
+This template is using [Nebular](https://github.com/akveo/nebular) modules set, [here you can find documentation and other useful articles](https://akveo.github.io/nebular/docs/guides/install-based-on-starter-kit?utm_campaign=nebular%20-%20docs%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=documentation_useful_articles).

 ### Empty starter kit
+
 Don't need all the pages and modules and just looking for an empty starter kit for your next project? Check out our [starter-kit branch](https://github.com/akveo/ngx-admin/tree/starter-kit).

-### AngularJS 1.x version
-Here you can find AngularJS 1.x based version: [Blur Admin](http://akveo.github.io/blur-admin/)
-
 ## BrowserStack
+
 This project runs its tests on multiple desktop and mobile browsers using [BrowserStack](http://www.browserstack.com).

 <img src="https://cloud.githubusercontent.com/assets/131406/22254249/534d889e-e254-11e6-8427-a759fb23b7bd.png" height="40" />

+## UI Bakery
+
+Need a visual admin dashboard builder? Check out [UI Bakery](https://uibakery.io).
+
+<a href="https://uibakery.io"><img src="https://storage.uibakery.io/video-assets/landing/Logo/UIB%20400x150.png" height="80" /></a>
+
 ## More from Akveo

 - [Eva Icons](https://github.com/akveo/eva-icons) - 480+ beautiful Open Source icons
 - [Nebular](https://github.com/akveo/nebular) - Angular Components, Auth and Security
+- [Akveo templates](https://www.akveo.com/templates?utm_campaign=services%20-%20github%20-%20templates&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin%20github%20readme%20more%20from%20akveo%20link) - 10+ Ready-to-use apps templates to speed up your apps developments
+
+## How can I support developers?

-### How can I support developers?
 - Star our GitHub repo :star:
 - Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
 - Follow us on [Twitter](https://twitter.com/akveo_inc) :feet:
 - Like our page on [Facebook](https://www.facebook.com/akveo/) :thumbsup:

-### Looking for engineering services? 
-Visit [our homepage](http://akveo.com/) or simply leave us a message to [contact@akveo.com](mailto:contact@akveo.com). We will be happy to work with you!
+## Looking for engineering services? 

-### From Developers
-Made with :heart: by [Akveo team](http://akveo.com/). Follow us on [Twitter](https://twitter.com/akveo_inc) to get the latest news first!
+Visit [our homepage](https://www.akveo.com?utm_campaign=services%20-%20akveo%20website%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=looking_for_engineering_services_visit_homepage) or simply leave us a message to [contact@akveo.com](mailto:contact@akveo.com). We will be happy to work with you!
+
+## From Developers
+
+Made with :heart: by [Akveo team](https://www.akveo.com?utm_campaign=services%20-%20akveo%20website%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=from_developers_made_by). Follow us on [Twitter](https://twitter.com/akveo_inc) to get the latest news first!
 We're always happy to receive your feedback!
--- a/angular.json
+++ b/angular.json
@ -35,7 +35,6 @@
              "node_modules/@fortawesome/fontawesome-free/css/all.css",
              "node_modules/socicon/css/socicon.css",
              "node_modules/nebular-icons/scss/nebular-icons.scss",
-              "node_modules/angular-tree-component/dist/angular-tree-component.css",
              "node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
              "node_modules/leaflet/dist/leaflet.css",
              "src/app/@theme/styles/styles.scss"
@ -50,16 +49,33 @@
              "node_modules/echarts/dist/echarts.min.js",
              "node_modules/echarts/dist/extension/bmap.min.js",
              "node_modules/chart.js/dist/Chart.min.js"
-            ]
+            ],
+            "allowedCommonJsDependencies": [
+              "angular2-chartjs",
+              "echarts",
+              "lodash",
+              "zrender/lib/svg/svg",
+              "zrender/lib/vml/vml"
+            ],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
          },
          "configurations": {
            "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
-              "extractCss": true,
              "namedChunks": false,
-              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
@ -70,7 +86,8 @@
                }
              ]
            }
-          }
+          },
+          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
@ -131,20 +148,18 @@
          }
        },
        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "typeCheck": true,
-            "exclude": []
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
          }
        }
      }
    },
    "ngx-admin-demo-e2e": {
-      "root": "",
+      "root": "e2e",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
@ -154,27 +169,23 @@
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "ngx-admin-demo:serve"
          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": []
-          }
        }
      }
    }
  },
-  "defaultProject": "ngx-admin-demo",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "ngx",
-      "styleext": "scss"
+      "style": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "ngx"
+    },
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
    }
  }
 }
--- a/e2e/.eslintrc.json
+++ b/e2e/.eslintrc.json
@ -0,0 +1,43 @@
+{
+  "extends": "../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "e2e/tsconfig.app.json",
+          "e2e/tsconfig.spec.json",
+          "e2e/e2e/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "ngx-admin",
-  "version": "3.2.0",
+  "version": "11.0.0",
  "license": "MIT",
  "repository": {
    "type": "git",
@ -9,17 +9,12 @@
  "bugs": {
    "url": "https://github.com/akveo/ngx-admin/issues"
  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "IE 11"
-  ],
  "scripts": {
    "ng": "ng",
    "conventional-changelog": "conventional-changelog",
    "start": "ng serve",
    "build": "ng build",
-    "build:prod": "npm run build -- --prod --aot",
+    "build:prod": "npm run build -- --configuration production --aot",
    "test": "ng test",
    "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
    "lint": "ng lint",
@ -31,88 +26,94 @@
    "docs": "compodoc -p src/tsconfig.app.json -d docs",
    "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
    "prepush": "npm run lint:ci",
-    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s"
+    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
+    "postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\""
  },
  "dependencies": {
-    "@agm/core": "^1.0.0-beta.5",
-    "@angular/animations": "^7.2.11",
-    "@angular/cdk": "^7.3.6",
-    "@angular/common": "^7.2.11",
-    "@angular/compiler": "^7.2.11",
-    "@angular/core": "^7.2.11",
-    "@angular/forms": "^7.2.11",
-    "@angular/http": "^7.2.11",
-    "@angular/platform-browser": "^7.2.11",
-    "@angular/platform-browser-dynamic": "^7.2.11",
-    "@angular/router": "^7.2.11",
+    "@angular/animations": "^15.2.10",
+    "@angular/cdk": "^15.2.9",
+    "@angular/common": "^15.2.10",
+    "@angular/compiler": "^15.2.10",
+    "@angular/core": "^15.2.10",
+    "@angular/forms": "^15.2.10",
+    "@angular/google-maps": "^12.2.13",
+    "@angular/platform-browser": "^15.2.10",
+    "@angular/platform-browser-dynamic": "^15.2.10",
+    "@angular/router": "^15.2.10",
    "@asymmetrik/ngx-leaflet": "3.0.1",
-    "@nebular/auth": "3.4.2",
-    "@nebular/bootstrap": "3.4.2",
-    "@nebular/security": "3.4.2",
-    "@nebular/theme": "3.4.2",
-    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
-    "@swimlane/ngx-charts": "^10.0.0",
-    "angular-tree-component": "7.2.0",
+    "@nebular/auth": "11.0.1",
+    "@nebular/eva-icons": "11.0.1",
+    "@nebular/security": "11.0.1",
+    "@nebular/theme": "11.0.1",
+    "@swimlane/ngx-charts": "^14.0.0",
    "angular2-chartjs": "0.4.1",
-    "angular2-toaster": "^7.0.0",
-    "bootstrap": "4.0.0",
+    "bootstrap": "4.3.1",
    "chart.js": "2.7.1",
    "ckeditor": "4.7.3",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.1",
-    "echarts": "^4.0.2",
-    "eva-icons": "^1.1.0",
+    "echarts": "^4.9.0",
+    "eva-icons": "^1.1.3",
    "intl": "1.2.5",
    "ionicons": "2.0.1",
    "leaflet": "1.2.0",
    "nebular-icons": "1.1.0",
-    "ng2-ckeditor": "^1.2.2",
-    "ng2-completer": "2.0.8",
-    "ng2-smart-table": "1.3.5",
-    "ngx-echarts": "^4.0.1",
+    "ng2-ckeditor": "~1.2.9",
+    "ng2-completer": "^9.0.1",
+    "ng2-smart-table": "^1.6.0",
+    "ngx-echarts": "^4.2.2",
+    "node-sass": "^4.14.1",
    "normalize.css": "6.0.0",
    "pace-js": "1.0.2",
    "roboto-fontface": "0.8.0",
-    "rxjs": "6.4.0",
+    "rxjs": "6.6.2",
    "rxjs-compat": "6.3.0",
    "socicon": "3.0.5",
+    "style-loader": "^1.3.0",
    "tinymce": "4.5.7",
-    "tslib": "^1.9.0",
+    "tslib": "^2.3.1",
    "typeface-exo": "0.0.22",
-    "web-animations-js": "2.2.5",
-    "zone.js": "^0.8.29"
+    "web-animations-js": "^2.3.2",
+    "zone.js": "~0.11.4"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "0.10.2",
-    "@angular/compiler-cli": "^7.2.11",
-    "@angular/cli": "^7.3.7",
-    "@angular/language-service": "7.2.11",
+    "@angular-devkit/build-angular": "^15.2.10",
+    "@angular-eslint/builder": "15.2.1",
+    "@angular-eslint/eslint-plugin": "15.2.1",
+    "@angular-eslint/eslint-plugin-template": "15.2.1",
+    "@angular-eslint/schematics": "15.2.1",
+    "@angular-eslint/template-parser": "15.2.1",
+    "@angular/cli": "^15.2.10",
+    "@angular/compiler-cli": "^15.2.10",
+    "@angular/language-service": "15.2.10",
    "@compodoc/compodoc": "1.0.1",
    "@fortawesome/fontawesome-free": "^5.2.0",
    "@types/d3-color": "1.0.5",
-    "@types/googlemaps": "^3.30.4",
-    "@types/jasmine": "2.5.54",
+    "@types/jasmine": "~3.3.0",
    "@types/jasminewd2": "2.0.3",
    "@types/leaflet": "1.2.3",
-    "@types/node": "6.0.90",
-    "codelyzer": "^4.5.0",
+    "@types/node": "^12.12.70",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
+    "codelyzer": "^6.0.2",
    "conventional-changelog-cli": "1.3.4",
+    "eslint": "^8.28.0",
    "husky": "0.13.3",
-    "jasmine-core": "2.6.4",
-    "jasmine-spec-reporter": "4.1.1",
-    "karma": "1.7.1",
-    "karma-chrome-launcher": "2.1.1",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~6.3.19",
+    "karma-chrome-launcher": "~3.1.1",
    "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.3.0",
-    "karma-jasmine": "1.1.0",
-    "karma-jasmine-html-reporter": "0.2.2",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.2",
+    "karma-jasmine-html-reporter": "^1.7.0",
    "npm-run-all": "4.0.2",
-    "protractor": "5.1.2",
+    "protractor": "~7.0.0",
    "rimraf": "2.6.1",
    "stylelint": "7.13.0",
    "ts-node": "3.2.2",
-    "tslint": "5.7.0",
+    "tslint": "~6.1.0",
    "tslint-language-service": "^0.9.9",
-    "typescript": "3.2.4"
+    "typescript": "~4.9.5"
  }
 }
--- a/src/app/@core/core.module.ts
+++ b/src/app/@core/core.module.ts
@ -9,6 +9,7 @@ import {
  AnalyticsService,
  LayoutService,
  PlayerService,
+  SeoService,
  StateService,
 } from './utils';
 import { UserData } from './data/users';
@ -56,17 +57,17 @@ const socialLinks = [
  {
    url: 'https://github.com/akveo/nebular',
    target: '_blank',
-    icon: 'socicon-github',
+    icon: 'github',
  },
  {
    url: 'https://www.facebook.com/akveo/',
    target: '_blank',
-    icon: 'socicon-facebook',
+    icon: 'facebook',
  },
  {
    url: 'https://twitter.com/akveo_inc',
    target: '_blank',
-    icon: 'socicon-twitter',
+    icon: 'twitter',
  },
 ];

@ -140,6 +141,7 @@ export const NB_CORE_PROVIDERS = [
  AnalyticsService,
  LayoutService,
  PlayerService,
+  SeoService,
  StateService,
 ];

@ -157,8 +159,8 @@ export class CoreModule {
    throwIfAlreadyLoaded(parentModule, 'CoreModule');
  }

-  static forRoot(): ModuleWithProviders {
-    return <ModuleWithProviders>{
+  static forRoot(): ModuleWithProviders<CoreModule> {
+    return {
      ngModule: CoreModule,
      providers: [
        ...NB_CORE_PROVIDERS,
--- a/src/app/@core/mock/mock-data.module.ts
+++ b/src/app/@core/mock/mock-data.module.ts
@ -54,8 +54,8 @@ const SERVICES = [
  ],
 })
 export class MockDataModule {
-  static forRoot(): ModuleWithProviders {
-    return <ModuleWithProviders>{
+  static forRoot(): ModuleWithProviders<MockDataModule> {
+    return {
      ngModule: MockDataModule,
      providers: [
        ...SERVICES,
--- a/src/app/@core/mock/traffic-list.service.ts
+++ b/src/app/@core/mock/traffic-list.service.ts
@ -31,10 +31,8 @@ export class TrafficListService extends TrafficListData {
  private getDataMonth(): TrafficList[] {
    const getFirstDateInPeriod = () => {
      const months = this.period.getMonths();
-      const date = new Date();
-      const prevYear = date.getFullYear() - 1;

-      return `${months[months.length - 1]}, ${prevYear}`;
+      return months[months.length - 1];
    };

    return this.reduceData(this.period.getMonths(), getFirstDateInPeriod);
--- a/src/app/@core/utils/index.ts
+++ b/src/app/@core/utils/index.ts
@ -2,10 +2,12 @@ import { LayoutService } from './layout.service';
 import { AnalyticsService } from './analytics.service';
 import { PlayerService } from './player.service';
 import { StateService } from './state.service';
+import { SeoService } from './seo.service';

 export {
  LayoutService,
  AnalyticsService,
  PlayerService,
+  SeoService,
  StateService,
 };
--- a/src/app/@core/utils/layout.service.ts
+++ b/src/app/@core/utils/layout.service.ts
@ -1,20 +1,26 @@
 import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
-import { delay, share } from 'rxjs/operators';
+import { delay, shareReplay, debounceTime } from 'rxjs/operators';

@Injectable()
 export class LayoutService {

  protected layoutSize$ = new Subject();
+  protected layoutSizeChange$ = this.layoutSize$.pipe(
+    shareReplay({ refCount: true }),
+  );

  changeLayoutSize() {
    this.layoutSize$.next();
  }

  onChangeLayoutSize(): Observable<any> {
-    return this.layoutSize$.pipe(
-      share(),
-      delay(1),
+    return this.layoutSizeChange$.pipe(delay(1));
+  }
+
+  onSafeChangeLayoutSize(): Observable<any> {
+    return this.layoutSizeChange$.pipe(
+      debounceTime(350),
    );
  }
 }
--- a/src/app/@core/utils/seo.service.ts
+++ b/src/app/@core/utils/seo.service.ts
@ -0,0 +1,58 @@
+import { Injectable, Inject, PLATFORM_ID, OnDestroy } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { NavigationEnd, Router } from '@angular/router';
+import { NB_DOCUMENT } from '@nebular/theme';
+import { filter, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class SeoService implements OnDestroy {
+
+  private readonly destroy$ = new Subject<void>();
+  private readonly dom: Document;
+  private readonly isBrowser: boolean;
+  private linkCanonical: HTMLLinkElement;
+
+  constructor(
+    private router: Router,
+    @Inject(NB_DOCUMENT) document,
+    @Inject(PLATFORM_ID) platformId,
+  ) {
+    this.isBrowser = isPlatformBrowser(platformId);
+    this.dom = document;
+
+    if (this.isBrowser) {
+      this.createCanonicalTag();
+    }
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  createCanonicalTag() {
+    this.linkCanonical = this.dom.createElement('link');
+    this.linkCanonical.setAttribute('rel', 'canonical');
+    this.dom.head.appendChild(this.linkCanonical);
+    this.linkCanonical.setAttribute('href', this.getCanonicalUrl());
+  }
+
+  trackCanonicalChanges() {
+    if (!this.isBrowser) {
+      return;
+    }
+
+    this.router.events.pipe(
+      filter((event) => event instanceof NavigationEnd),
+      takeUntil(this.destroy$),
+    )
+      .subscribe(() => {
+        this.linkCanonical.setAttribute('href', this.getCanonicalUrl());
+      });
+  }
+
+  private getCanonicalUrl(): string {
+    return this.dom.location.origin + this.dom.location.pathname;
+  }
+}
--- a/src/app/@theme/components/footer/footer.component.scss
+++ b/src/app/@theme/components/footer/footer.component.scss
@ -1,6 +1,6 @@
@import '../../styles/themes';
-@import '~@nebular/theme/styles/global/breakpoints';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';

@include nb-install-component() {
  width: 100%;
@ -13,11 +13,11 @@

    a {
      padding: 0.4rem;
-      color: nb-theme(color-fg);
+      color: nb-theme(text-hint-color);
      transition: color ease-out 0.1s;

      &:hover {
-        color: nb-theme(color-fg-heading);
+        color: nb-theme(text-basic-color);
      }
    }
  }
--- a/src/app/@theme/components/footer/footer.component.ts
+++ b/src/app/@theme/components/footer/footer.component.ts
@ -4,7 +4,9 @@ import { Component } from '@angular/core';
  selector: 'ngx-footer',
  styleUrls: ['./footer.component.scss'],
  template: `
-    <span class="created-by">Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2017</span>
+    <span class="created-by">
+      Created with ♥ by <b><a href="https://akveo.page.link/8V2f" target="_blank">Akveo</a></b> 2019
+    </span>
    <div class="socials">
      <a href="#" target="_blank" class="ion ion-social-github"></a>
      <a href="#" target="_blank" class="ion ion-social-facebook"></a>
--- a/src/app/@theme/components/header/header.component.html
+++ b/src/app/@theme/components/header/header.component.html
@ -1,26 +1,29 @@
-<div class="header-container"
-     [class.left]="position === 'normal'"
-     [class.right]="position === 'inverse'">
-  <div class="logo-containter">
-    <a (click)="toggleSidebar()" href="#" class="navigation"><i class="nb-menu"></i></a>
-    <div class="logo" (click)="goToHome()">ngx-<span>admin</span></div>
+<div class="header-container">
+  <div class="logo-container">
+    <a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
+      <nb-icon icon="menu-2-outline"></nb-icon>
+    </a>
+    <a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
  </div>
-  <ngx-theme-switcher></ngx-theme-switcher>
+  <nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
+    <nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
+  </nb-select>
 </div>

 <div class="header-container">
-  <ngx-layout-direction-switcher></ngx-layout-direction-switcher>
-  <nb-actions
-    size="medium"
-    [class.right]="position === 'normal'"
-    [class.left]="position === 'inverse'">
-    <nb-action *nbIsGranted="['view', 'user']" >
-      <nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
-    </nb-action>
-    <nb-action class="control-item" disabled icon="nb-notifications"></nb-action>
-    <nb-action class="control-item" icon="nb-email"></nb-action>
+  <nb-actions size="small">
+
    <nb-action class="control-item">
-      <nb-search type="rotate-layout" (click)="startSearch()"></nb-search>
+      <nb-search type="rotate-layout"></nb-search>
+    </nb-action>
+    <nb-action class="control-item" icon="email-outline"></nb-action>
+    <nb-action class="control-item" icon="bell-outline"></nb-action>
+    <nb-action class="user-action" *nbIsGranted="['view', 'user']" >
+      <nb-user [nbContextMenu]="userMenu"
+               [onlyPicture]="userPictureOnly"
+               [name]="user?.name"
+               [picture]="user?.picture">
+      </nb-user>
    </nb-action>
  </nb-actions>
 </div>
--- a/src/app/@theme/components/header/header.component.scss
+++ b/src/app/@theme/components/header/header.component.scss
@ -1,31 +1,30 @@
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
@import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
  display: flex;
  justify-content: space-between;
  width: 100%;

-  .left {
-    display: flex;
-    width: 100%;
-    order: 0;
-    flex-direction: row;
-  }
-  .right {
-    order: 1;
-    flex-direction: row-reverse;
-  }
-
-  .logo-containter {
+  .logo-container {
    display: flex;
    align-items: center;
    width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
  }

-  .control-item {
-    display: block;
+  nb-action {
+    height: auto;
+    display: flex;
+    align-content: center;
+  }
+
+  nb-user {
+    cursor: pointer;
+  }
+
+  ::ng-deep nb-search button {
+    padding: 0!important;
  }

  .header-container {
@ -33,179 +32,38 @@
    align-items: center;
    width: auto;

-    .navigation {
-      @include nb-ltr(padding-right, nb-theme(padding));
-      @include nb-rtl(padding-left, nb-theme(padding));
-      font-size: 2.5rem;
+    .sidebar-toggle {
+      @include nb-ltr(padding-right, 1.25rem);
+      @include nb-rtl(padding-left, 1.25rem);
      text-decoration: none;
-
-      i {
-        display: block;
+      color: nb-theme(text-hint-color);
+      nb-icon {
+        font-size: 1.75rem;
      }
-
    }

    .logo {
-      padding: 0 nb-theme(padding);
+      padding: 0 1.25rem;
      font-size: 1.75rem;
-      font-weight: nb-theme(font-weight-bolder);
-      @include nb-ltr(border-left, 1px solid nb-theme(separator));
-      @include nb-rtl(border-right, 1px solid nb-theme(separator));
+      @include nb-ltr(border-left, 1px solid nb-theme(divider-color));
+      @include nb-rtl(border-right, 1px solid nb-theme(divider-color));
      white-space: nowrap;
-
-      span {
-        font-weight: nb-theme(font-weight-normal);
-      }
-    }
-  }
-
-  @include nb-for-theme(corporate) {
-    $menu-action-separator-color: #3f4550;
-
-    nb-action {
-      @include nb-ltr(border-left-color, $menu-action-separator-color);
-      @include nb-rtl(border-right-color, $menu-action-separator-color);
-    }
-
-    .header-container .logo {
-      @include nb-ltr(border, none);
-      @include nb-rtl(border, none);
-    }
-
-    .header-container /deep/ ngx-theme-switcher .dropdown-toggle {
-      color: nb-theme(color-white);
-      background: transparent;
-    }
-  }
-
-  ngx-layout-direction-switcher {
-    margin: 0 1.5rem;
-  }
-
-  ngx-theme-switcher {
-    margin: nb-theme(layout-padding);
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  @include media-breakpoint-down(xl) {
-    ngx-layout-direction-switcher {
-      display: none;
-    }
-  }
-
-  .toggle-settings /deep/ a {
-    display: block;
-    text-decoration: none;
-    line-height: 1;
-
-    i {
-      color: nb-theme(color-fg-highlight);
-      font-size: 2.25rem;
-      border-radius: 50%;
-      position: relative;
-      animation-name: pulse-light;
-
-      &::after {
-        content: ' ';
-        // hack to be able to set border-radius
-        background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
-        border-radius: 50%;
-        pointer-events: none;
-
-        position: absolute;
-        top: 52.3%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 13%;
-        height: 13%;
-
-        animation: 3s linear infinite pulse;
-
-        @include nb-for-theme(default) {
-          animation-name: pulse-light;
-        }
-      }
-    }
-  }
-
-  @include keyframes(pulse) {
-    0% {
-      box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
-    }
-    20% {
-      box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
-    }
-    100% {
-      box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
-    }
-  }
-
-  @include keyframes(pulse-light) {
-    0% {
-      box-shadow: 0 0 1px 0 rgba(115, 255, 208, 0);
-    }
-    20% {
-      box-shadow: 0 0 3px 10px rgba(115, 255, 208, 0.4);
-    }
-    100% {
-      box-shadow: 0 0 5px 20px rgba(115, 255, 208, 0);
-    }
-  }
-
-  @include media-breakpoint-down(md) {
-
-    nb-action:not(.toggle-settings) {
-      border: none;
-    }
-
-    .control-item {
-      display: none;
-    }
-
-    .toggle-settings {
-      padding: 0;
-    }
-
-    ngx-layout-direction-switcher {
-      display: none;
-    }
-
-    ngx-theme-switcher {
-      margin: 0 0.5rem;
+      text-decoration: none;
    }
  }

  @include media-breakpoint-down(sm) {
-
-    nb-user /deep/ .user-name {
+    .control-item {
      display: none;
    }
-  }
-
-  @include media-breakpoint-down(is) {
-
-    .header-container {
-      .logo {
-        font-size: 1.25rem;
-      }
-    }
-
-    .toggle-settings {
-      display: none;
-    }
-
-    ngx-theme-switcher {
-      display: none;
-    }
-
-    nb-action:not(.toggle-settings) {
+    .user-action {
+      border: none;
      padding: 0;
    }
  }

-  @include media-breakpoint-down(xs) {
-    .right /deep/ {
+  @include media-breakpoint-down(is) {
+    nb-select {
      display: none;
    }
  }
--- a/src/app/@theme/components/header/header.component.ts
+++ b/src/app/@theme/components/header/header.component.ts
@ -1,33 +1,83 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';

-import { NbMenuService, NbSidebarService } from '@nebular/theme';
 import { UserData } from '../../../@core/data/users';
-import { AnalyticsService } from '../../../@core/utils';
 import { LayoutService } from '../../../@core/utils';
+import { map, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';

@Component({
  selector: 'ngx-header',
  styleUrls: ['./header.component.scss'],
  templateUrl: './header.component.html',
 })
-export class HeaderComponent implements OnInit {
-
-  @Input() position = 'normal';
+export class HeaderComponent implements OnInit, OnDestroy {

+  private destroy$: Subject<void> = new Subject<void>();
+  userPictureOnly: boolean = false;
  user: any;

-  userMenu = [{ title: 'Profile' }, { title: 'Log out' }];
+  themes = [
+    {
+      value: 'default',
+      name: 'Light',
+    },
+    {
+      value: 'dark',
+      name: 'Dark',
+    },
+    {
+      value: 'cosmic',
+      name: 'Cosmic',
+    },
+    {
+      value: 'corporate',
+      name: 'Corporate',
+    },
+  ];
+
+  currentTheme = 'default';
+
+  userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];

  constructor(private sidebarService: NbSidebarService,
              private menuService: NbMenuService,
+              private themeService: NbThemeService,
              private userService: UserData,
-              private analyticsService: AnalyticsService,
-              private layoutService: LayoutService) {
+              private layoutService: LayoutService,
+              private breakpointService: NbMediaBreakpointsService) {
  }

  ngOnInit() {
+    this.currentTheme = this.themeService.currentTheme;
+
    this.userService.getUsers()
+      .pipe(takeUntil(this.destroy$))
      .subscribe((users: any) => this.user = users.nick);
+
+    const { xl } = this.breakpointService.getBreakpointsMap();
+    this.themeService.onMediaQueryChange()
+      .pipe(
+        map(([, currentBreakpoint]) => currentBreakpoint.width < xl),
+        takeUntil(this.destroy$),
+      )
+      .subscribe((isLessThanXl: boolean) => this.userPictureOnly = isLessThanXl);
+
+    this.themeService.onThemeChange()
+      .pipe(
+        map(({ name }) => name),
+        takeUntil(this.destroy$),
+      )
+      .subscribe(themeName => this.currentTheme = themeName);
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  changeTheme(themeName: string) {
+    this.themeService.changeTheme(themeName);
  }

  toggleSidebar(): boolean {
@ -37,11 +87,8 @@ export class HeaderComponent implements OnInit {
    return false;
  }

-  goToHome() {
+  navigateHome() {
    this.menuService.navigateHome();
-  }
-
-  startSearch() {
-    this.analyticsService.trackEvent('startSearch');
+    return false;
  }
 }
--- a/src/app/@theme/components/index.ts
+++ b/src/app/@theme/components/index.ts
@ -2,9 +2,3 @@ export * from './header/header.component';
 export * from './footer/footer.component';
 export * from './search-input/search-input.component';
 export * from './tiny-mce/tiny-mce.component';
-export * from './theme-settings/theme-settings.component';
-export * from './theme-switcher/theme-switcher.component';
-export * from './switcher/switcher.component';
-export * from './layout-direction-switcher/layout-direction-switcher.component';
-export * from './theme-switcher/themes-switcher-list/themes-switcher-list.component';
-export * from './toggle-settings-button/toggle-settings-button.component';
--- a/src/app/@theme/components/layout-direction-switcher/layout-direction-switcher.component.ts
+++ b/src/app/@theme/components/layout-direction-switcher/layout-direction-switcher.component.ts
@ -1,42 +0,0 @@
-import { Component, OnDestroy, Input } from '@angular/core';
-import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
-
-@Component({
-  selector: 'ngx-layout-direction-switcher',
-  template: `
-    <ngx-switcher
-      [firstValue]="directions.RTL"
-      [secondValue]="directions.LTR"
-      [firstValueLabel]="'RTL'"
-      [secondValueLabel]="'LTR'"
-      [value]="currentDirection"
-      (valueChange)="toggleDirection($event)"
-      [vertical]="vertical"
-    >
-    </ngx-switcher>
-  `,
-})
-export class LayoutDirectionSwitcherComponent implements OnDestroy {
-  directions = NbLayoutDirection;
-  currentDirection: NbLayoutDirection;
-  alive = true;
-
-  @Input() vertical: boolean = false;
-
-  constructor(private directionService: NbLayoutDirectionService) {
-    this.currentDirection = this.directionService.getDirection();
-
-    this.directionService.onDirectionChange()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(newDirection => this.currentDirection = newDirection);
-  }
-
-  toggleDirection(newDirection) {
-    this.directionService.setDirection(newDirection);
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}
--- a/src/app/@theme/components/search-input/search-input.component.scss
+++ b/src/app/@theme/components/search-input/search-input.component.scss
@ -25,7 +25,7 @@
    }
  }

-  /deep/ search-input {
+  ::ng-deep search-input {
    input {
      background: transparent;
    }
--- a/src/app/@theme/components/search-input/search-input.component.ts
+++ b/src/app/@theme/components/search-input/search-input.component.ts
@ -14,7 +14,7 @@ import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular
  `,
 })
 export class SearchInputComponent {
-  @ViewChild('input') input: ElementRef;
+  @ViewChild('input', { static: true }) input: ElementRef;

  @Output() search: EventEmitter<string> = new EventEmitter<string>();

--- a/src/app/@theme/components/switcher/switcher.component.scss
+++ b/src/app/@theme/components/switcher/switcher.component.scss
@ -1,112 +0,0 @@
-@import '../../styles/themes';
-@import '~@nebular/bootstrap/styles/hero-buttons';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-  .switch-label {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    margin: 0;
-
-    &.vertical {
-      flex-direction: column;
-      align-items: flex-start;
-
-      .first,
-      .second {
-        padding: 0;
-      }
-
-      .switch {
-        margin-top: 0.5em;
-      }
-    }
-
-    & > span {
-      font-size: 1.125rem;
-      font-weight: nb-theme(font-weight-bold);
-      transition: opacity 0.3s ease;
-      color: nb-theme(color-fg);
-
-      &.first {
-        @include nb-ltr(padding-right, 10px);
-        @include nb-rtl(padding-left, 10px);
-      }
-
-      &.second {
-        @include nb-ltr(padding-left, 10px);
-        @include nb-rtl(padding-right, 10px);
-      }
-
-      &.active {
-        color: nb-theme(color-fg-text);
-      }
-
-      @include nb-for-theme(cosmic) {
-        color: nb-theme(color-fg);
-
-        &.active {
-          color: nb-theme(color-white);
-        }
-      }
-
-      &:active {
-        opacity: 0.78;
-      }
-    }
-  }
-
-  .switch {
-    position: relative;
-    display: inline-block;
-    width: 3rem;
-    height: 1.5rem;
-    margin: 0;
-
-    input {
-      display: none;
-
-      &:checked + .slider::before {
-        @include nb-ltr(transform, translateX(1.5rem));
-        @include nb-rtl(transform, translateX(-1.5rem));
-      }
-    }
-
-    .slider {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: 1.75rem;
-      background-color: nb-theme(layout-bg);
-    }
-
-    .slider::before {
-      position: absolute;
-      content: '';
-      height: 1.5rem;
-      width: 1.5rem;
-      border-radius: 50%;
-      background-color: nb-theme(color-success);
-      transition: 0.2s;
-
-      box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
-
-      @include nb-for-theme(cosmic) {
-        @include btn-hero-primary-gradient();
-      }
-
-      @include nb-for-theme(corporate) {
-        background-color: nb-theme(color-primary);
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    align-items: flex-end;
-  }
-}
--- a/src/app/@theme/components/switcher/switcher.component.ts
+++ b/src/app/@theme/components/switcher/switcher.component.ts
@ -1,60 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'ngx-switcher',
-  styleUrls: ['./switcher.component.scss'],
-  template: `
-    <label class="switch-label" [class.vertical]="vertical">
-      <span class="first" [class.active]="vertical || isFirstValue()">
-        {{vertical ? currentValueLabel() : firstValueLabel}}
-      </span>
-
-      <div class="switch">
-        <input type="checkbox" [checked]="isSecondValue()" (change)="changeValue()">
-        <span class="slider"></span>
-      </div>
-
-      <span
-        *ngIf="!vertical"
-        class="second"
-        [class.active]="isSecondValue()"
-      >
-          {{secondValueLabel}}
-      </span>
-    </label>
-  `,
-})
-export class SwitcherComponent {
-  @Input() firstValue: any;
-  @Input() secondValue: any;
-
-  @Input() firstValueLabel: string;
-  @Input() secondValueLabel: string;
-
-  @Input() vertical: boolean;
-
-  @Input() value: any;
-  @Output() valueChange = new EventEmitter<any>();
-
-  isFirstValue() {
-    return this.value === this.firstValue;
-  }
-
-  isSecondValue() {
-    return this.value === this.secondValue;
-  }
-
-  currentValueLabel() {
-    return this.isFirstValue()
-      ? this.firstValueLabel
-      : this.secondValueLabel;
-  }
-
-  changeValue() {
-    this.value = this.isFirstValue()
-      ? this.secondValue
-      : this.firstValue;
-
-    this.valueChange.emit(this.value);
-  }
-}
--- a/src/app/@theme/components/theme-settings/theme-settings.component.scss
+++ b/src/app/@theme/components/theme-settings/theme-settings.component.scss
@ -1,91 +0,0 @@
-@import '../../styles/themes';
-
-@include nb-install-component() {
-  h6 {
-    margin-bottom: 0.875rem;
-    text-align: center;
-    font-weight: bold;
-    text-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
-  }
-
-  .settings-row {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    width: 100%;
-    margin: 0 0 2.575rem;
-
-    a {
-      display: flex;
-      justify-content: center;
-      align-content: center;
-      align-items: center;
-      width: 4.15rem;
-      height: 4.15rem;
-      border-radius: nb-theme(radius);
-      background-color: nb-theme(color-white);
-      border: 2px solid transparent;
-      margin: 0.875rem;
-      text-decoration: none;
-      font-size: 2.25rem;
-      color: nb-theme(color-fg);
-
-      &.selected {
-        color: nb-theme(color-success);
-        border-color: nb-theme(color-success);
-      }
-
-      @include nb-for-theme(cosmic) {
-        box-shadow: 0 4px 14px 0 rgba(19, 19, 94, 0.4);
-        background-color: #3e367e;
-        border: 2px solid #3e367e;
-        &.selected {
-          color: nb-theme(link-color);
-        }
-      }
-    }
-  }
-
-  .settings {
-    margin-bottom: 1em;
-  }
-
-  .switcher {
-    margin-bottom: 1rem;
-    font-size: 1.524rem;
-    width: 12rem;
-
-    /deep/ ngx-switcher {
-      .switch-label span {
-        font-size: 1em;
-        font-weight: normal;
-        &.first, &.second {
-          font-size: 1rem;
-        }
-      }
-
-      .switch {
-        height: 1.5em;
-        width: 3em;
-
-        .slider::before {
-          height: 1.5em;
-          width: 1.5em;
-        }
-
-        input:checked + .slider::before {
-          @include nb-ltr(transform, translateX(1.5em)!important);
-          @include nb-rtl(transform, translateX(-1.5em)!important);
-        }
-      }
-
-      @include nb-for-theme(cosmic) {
-        .switch .slider {
-          background-color: nb-theme(color-bg);
-        }
-      }
-    }
-  }
-}
--- a/src/app/@theme/components/theme-settings/theme-settings.component.ts
+++ b/src/app/@theme/components/theme-settings/theme-settings.component.ts
@ -1,70 +0,0 @@
-import { Component } from '@angular/core';
-
-import { StateService } from '../../../@core/utils';
-
-@Component({
-  selector: 'ngx-theme-settings',
-  styleUrls: ['./theme-settings.component.scss'],
-  template: `
-    <h6>LAYOUTS</h6>
-    <div class="settings-row">
-      <a *ngFor="let layout of layouts"
-         href="#"
-         [class.selected]="layout.selected"
-         [attr.title]="layout.name"
-         (click)="layoutSelect(layout)">
-        <i [attr.class]="layout.icon"></i>
-      </a>
-    </div>
-    <h6>SIDEBAR</h6>
-    <div class="settings-row">
-      <a *ngFor="let sidebar of sidebars"
-         href="#"
-         [class.selected]="sidebar.selected"
-         [attr.title]="sidebar.name"
-         (click)="sidebarSelect(sidebar)">
-        <i [attr.class]="sidebar.icon"></i>
-      </a>
-    </div>
-    <div class="settings-row">
-      <div class="switcher">
-        <ngx-layout-direction-switcher></ngx-layout-direction-switcher>
-      </div>
-    </div>
-  `,
-})
-export class ThemeSettingsComponent {
-
-  layouts = [];
-  sidebars = [];
-
-  constructor(protected stateService: StateService) {
-    this.stateService.getLayoutStates()
-      .subscribe((layouts: any[]) => this.layouts = layouts);
-
-    this.stateService.getSidebarStates()
-      .subscribe((sidebars: any[]) => this.sidebars = sidebars);
-  }
-
-  layoutSelect(layout: any): boolean {
-    this.layouts = this.layouts.map((l: any) => {
-      l.selected = false;
-      return l;
-    });
-
-    layout.selected = true;
-    this.stateService.setLayoutState(layout);
-    return false;
-  }
-
-  sidebarSelect(sidebars: any): boolean {
-    this.sidebars = this.sidebars.map((s: any) => {
-      s.selected = false;
-      return s;
-    });
-
-    sidebars.selected = true;
-    this.stateService.setSidebarState(sidebars);
-    return false;
-  }
-}
--- a/src/app/@theme/components/theme-switcher/theme-switcher.component.html
+++ b/src/app/@theme/components/theme-switcher/theme-switcher.component.html
@ -1,7 +0,0 @@
-<div class="themes-switcher"
-     [nbPopover]="switcherListComponent"
-     nbPopoverPlacement="bottom"
-     [nbPopoverContext]="{popover: popover}">
-  <i class="nb-drops"></i>
-  <span *ngIf="showTitle">Themes</span>
-</div>
--- a/src/app/@theme/components/theme-switcher/theme-switcher.component.scss
+++ b/src/app/@theme/components/theme-switcher/theme-switcher.component.scss
@ -1,50 +0,0 @@
-@import '../../styles/themes';
-@import '~@nebular/theme/styles/core/mixins';
-@import '~@nebular/theme/styles/core/functions';
-
-@include nb-install-component() {
-  .themes-switcher {
-    display: flex;
-    font-size: 1.25rem;
-    padding: 0.8rem 1.25rem;
-    align-items: center;
-    cursor: pointer;
-    background-color: nb-theme(switcher-background);
-    border-radius: nb-theme(radius);
-
-    &:hover {
-      $color: nb-theme(switcher-background);
-      $percentage: nb-theme(switcher-background-percentage);
-
-      background-color: tint($color, $percentage);
-    }
-
-    span {
-      margin: 0 1.2rem;
-    }
-
-    i {
-      color: nb-theme(color-primary);
-      font-size: 1.8rem;
-      border-radius: 50%;
-      position: relative;
-
-      @include nb-for-theme(default) {
-        color: nb-theme(color-success);
-      }
-
-      @include nb-for-theme(corporate) {
-        color: nb-theme(color-fg-highlight);
-      }
-
-      &::before {
-        // Hack for IE11, IE11 should not set background
-        background: nb-theme(drops-icon-line-gadient);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-      }
-    }
-  }
-}
-
-
--- a/src/app/@theme/components/theme-switcher/theme-switcher.component.ts
+++ b/src/app/@theme/components/theme-switcher/theme-switcher.component.ts
@ -1,19 +0,0 @@
-import { Component, Input, ViewChild } from '@angular/core';
-import { NbPopoverDirective } from '@nebular/theme';
-import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
-
-import { ThemeSwitcherListComponent } from './themes-switcher-list/themes-switcher-list.component';
-
-@Component({
-  selector: 'ngx-theme-switcher',
-  templateUrl: './theme-switcher.component.html',
-  styleUrls: ['./theme-switcher.component.scss'],
-})
-export class ThemeSwitcherComponent {
-  @ViewChild(NbPopoverDirective) popover: NbPopoverDirective;
-
-  @Input() showTitle: boolean = true;
-
-  switcherListComponent = ThemeSwitcherListComponent;
-  theme: NbJSThemeOptions;
-}
--- a/src/app/@theme/components/theme-switcher/themes-switcher-list/theme-switcher-list.component.scss
+++ b/src/app/@theme/components/theme-switcher/themes-switcher-list/theme-switcher-list.component.scss
@ -1,76 +0,0 @@
-@import '../../../styles/themes';
-@import '~@nebular/theme/styles/core/mixins';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-$icon-color-default: #0bbb79;
-$icon-color-cosmic: #7958fa;
-$icon-color-corporate: #a7a2be;
-
-$icon-top-color-default: #01dbb5;
-$icon-top-color-cosmic: #a258fe;
-$icon-top-color-corporate: #e9e8eb;
-
-@include nb-install-component() {
-  /deep/ .themes-switcher-list {
-    padding: 1rem 2rem 1.25rem 0.5rem;
-    margin: 0;
-
-    @include nb-ltr(text-align, start);
-    @include nb-rtl(text-align, end);
-
-    .themes-switcher-item {
-      list-style: none;
-      cursor: pointer;
-
-      &:hover span {
-        opacity: 0.5;
-      }
-
-      i {
-        font-size: 2rem;
-
-        &.drop-icon-default {
-          color: $icon-color-default;
-
-          // Hack for IE11, IE11 should not set background
-          background: -webkit-linear-gradient($icon-top-color-default, $icon-color-default);
-        }
-
-        &.drop-icon-cosmic {
-          color: $icon-color-cosmic;
-
-          // Hack for IE11, IE11 should not set background
-          background: -webkit-linear-gradient($icon-top-color-cosmic, $icon-color-cosmic);
-        }
-
-        &.drop-icon-corporate {
-          color: $icon-color-corporate;
-
-          // Hack for IE11, IE11 should not set background
-          background: -webkit-linear-gradient($icon-top-color-corporate, $icon-color-corporate);
-        }
-
-        &.drop-icon-default,
-        &.drop-icon-cosmic,
-        &.drop-icon-corporate {
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-        }
-      }
-
-      span {
-        font-weight: 300;
-        vertical-align: super;
-        padding-left: 1rem;
-        color: nb-theme(color-fg-heading);
-      }
-    }
-  }
-
-  @include media-breakpoint-down(is) {
-    /deep/ .themes-switcher-list {
-      display: none;
-    }
-  }
-}
--- a/src/app/@theme/components/theme-switcher/themes-switcher-list/themes-switcher-list.component.ts
+++ b/src/app/@theme/components/theme-switcher/themes-switcher-list/themes-switcher-list.component.ts
@ -1,51 +0,0 @@
-import {Component, Input} from '@angular/core';
-import { NbThemeService, NbPopoverDirective } from '@nebular/theme';
-import { AnalyticsService } from '../../../../@core/utils/analytics.service';
-import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
-
-@Component({
-  selector: 'ngx-theme-switcher-list',
-  template: `
-    <ul class="themes-switcher-list">
-      <li class="themes-switcher-item"
-          *ngFor="let theme of themes"
-          (click)="onToggleTheme(theme.key)">
-        <i class="nb-drop" [ngClass]="'drop-icon-' + theme.key"></i>
-        <span>{{ theme.title }}</span>
-      </li>
-    </ul>
-  `,
-  styleUrls: ['./theme-switcher-list.component.scss'],
-})
-export class ThemeSwitcherListComponent {
-
-  @Input() popover: NbPopoverDirective;
-
-  theme: NbJSThemeOptions;
-
-  themes = [
-    {
-      title: 'Light',
-      key: 'default',
-    },
-    {
-      title: 'Cosmic',
-      key: 'cosmic',
-    },
-    {
-      title: 'Corporate',
-      key: 'corporate',
-    },
-  ];
-
-  constructor(
-    private themeService: NbThemeService,
-    private analyticsService: AnalyticsService,
-  ) {}
-
-  onToggleTheme(themeKey: string) {
-    this.themeService.changeTheme(themeKey);
-    this.analyticsService.trackEvent('switchTheme');
-    this.popover.hide();
-  }
-}
--- a/src/app/@theme/components/tiny-mce/tiny-mce.component.ts
+++ b/src/app/@theme/components/tiny-mce/tiny-mce.component.ts
@ -1,4 +1,5 @@
 import { Component, OnDestroy, AfterViewInit, Output, EventEmitter, ElementRef } from '@angular/core';
+import { LocationStrategy } from '@angular/common';

@Component({
  selector: 'ngx-tiny-mce',
@ -10,13 +11,16 @@ export class TinyMCEComponent implements OnDestroy, AfterViewInit {

  editor: any;

-  constructor(private host: ElementRef) { }
+  constructor(
+    private host: ElementRef,
+    private locationStrategy: LocationStrategy,
+  ) { }

  ngAfterViewInit() {
    tinymce.init({
      target: this.host.nativeElement,
      plugins: ['link', 'paste', 'table'],
-      skin_url: 'assets/skins/lightgray',
+      skin_url: `${this.locationStrategy.getBaseHref()}assets/skins/lightgray`,
      setup: editor => {
        this.editor = editor;
        editor.on('keyup', () => {
--- a/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss
+++ b/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss
@ -1,118 +0,0 @@
-@import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-@import '~@nebular/bootstrap/styles/hero-buttons';
-
-@include nb-install-component() {
-  .toggle-settings {
-    position: fixed;
-    top: 50%;
-    height: 3rem;
-    width: 3rem;
-    padding: 0;
-    text-align: center;
-    border: none;
-    transition: transform 0.3s ease, background-image 0.3s ease;
-    transform: translate(0, -50%);
-    z-index: 998;
-
-    @include nb-ltr() {
-      border-top-left-radius: nb-theme(radius);
-      border-bottom-left-radius: nb-theme(radius);
-      right: 0;
-
-      &.sidebar-end {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        right: auto;
-        border-top-right-radius: nb-theme(radius);
-        border-bottom-right-radius: nb-theme(radius);
-        left: 0;
-      }
-    }
-
-    @include nb-rtl() {
-      border-top-right-radius: nb-theme(radius);
-      border-bottom-right-radius: nb-theme(radius);
-      left: 0;
-
-      &.sidebar-end {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        left: auto;
-        border-top-left-radius: nb-theme(radius);
-        border-bottom-left-radius: nb-theme(radius);
-        right: 0;
-      }
-    }
-
-    &.expanded {
-      @include nb-ltr(transform, translate(-19rem, -50%));
-      @include nb-rtl(transform, translate(19rem, -50%));
-
-      &.sidebar-end {
-        @include nb-rtl(transform, translate(-19rem, -50%));
-        @include nb-ltr(transform, translate(19rem, -50%));
-      }
-    }
-
-    @include nb-for-theme(cosmic) {
-      box-shadow: 0 0 3.4285rem 0 rgba(19, 19, 94, 0.72);
-      @include btn-hero-success-gradient();
-    }
-
-    @include nb-for-theme(default) {
-      border: 1px solid #d5dbe0;
-      box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
-      background-color: #ffffff;
-    }
-
-    @include nb-for-theme(corporate) {
-      border: 1px solid #d5dbe0;
-      box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
-      color: nb-theme(color-danger);
-      background-color: #ffffff;
-    }
-
-    i {
-      font-size: 2.75rem;
-      color: #ffffff;
-      display: block;
-
-
-      @include nb-for-theme(default) {
-        color: nb-theme(color-danger);
-      }
-
-      @include nb-for-theme(corporate) {
-        color: nb-theme(color-warning);
-      }
-    }
-
-    &:not(.was-expanded) i {
-      animation-name: gear-pulse;
-      animation-duration: 1s;
-      animation-iteration-count: infinite;
-    }
-
-    @keyframes gear-pulse {
-      from {
-        transform: scale3d(1, 1, 1);
-      }
-
-      50% {
-        transform: scale3d(1.2, 1.2, 1.2);
-      }
-
-      to {
-        transform: scale3d(1, 1, 1);
-      }
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-    .toggle-settings {
-      display: none;
-    }
-  }
-}
--- a/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts
+++ b/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts
@ -1,37 +0,0 @@
-import { Component } from '@angular/core';
-import { NbSidebarService } from '@nebular/theme';
-import { StateService } from '../../../@core/utils';
-
-@Component({
-  selector: 'ngx-toggle-settings-button',
-  styleUrls: ['./toggle-settings-button.component.scss'],
-  template: `
-    <button class="toggle-settings"
-            (click)="toggleSettings()"
-            [class.expanded]="expanded"
-            [class.sidebar-end]="sidebarEnd"
-            [class.was-expanded]="wasExpanded"
-    >
-      <i class="nb-gear"></i>
-    </button>
-  `,
-})
-export class ToggleSettingsButtonComponent {
-
-  sidebarEnd = false;
-  expanded = false;
-  wasExpanded = false;
-
-  constructor(private sidebarService: NbSidebarService, protected stateService: StateService) {
-    this.stateService.onSidebarState()
-      .subscribe(({id}) => {
-        this.sidebarEnd = id === 'end';
-      });
-  }
-
-  toggleSettings() {
-    this.sidebarService.toggle(false, 'settings-sidebar');
-    this.expanded = !this.expanded;
-    this.wasExpanded = true;
-  }
-}
--- a/src/app/@theme/layouts/index.ts
+++ b/src/app/@theme/layouts/index.ts
@ -1,4 +1,3 @@
 export * from './one-column/one-column.layout';
 export * from './two-columns/two-columns.layout';
 export * from './three-columns/three-columns.layout';
-export * from './sample/sample.layout';
--- a/src/app/@theme/layouts/one-column/one-column.layout.scss
+++ b/src/app/@theme/layouts/one-column/one-column.layout.scss
@ -1,157 +1,9 @@
@import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
-  nb-layout-column.small {
-    flex: 0.15 !important;
-  }
-
-  nb-sidebar.settings-sidebar {
-    $sidebar-width: 7.5rem;
-
-    transition: width 0.3s ease;
-    width: $sidebar-width;
-    overflow: hidden;
-
-    &.collapsed {
-      width: 0;
-
-      /deep/ .main-container {
-        width: 0;
-
-        .scrollable {
-          width: $sidebar-width;
-          padding: 1.25rem;
-        }
-      }
-    }
-
-    /deep/ .main-container {
-      width: $sidebar-width;
-      background: nb-theme(color-bg);
-      transition: width 0.3s ease;
-      overflow: hidden;
-
-      .scrollable {
-        width: $sidebar-width;
-      }
-
-      @include nb-for-theme(cosmic) {
-        background: nb-theme(layout-bg);
-      }
-    }
-  }
-
-  nb-sidebar.menu-sidebar {
-
-    margin-top: nb-theme(sidebar-header-gap);
-
-    @include nb-for-theme(corporate) {
-      margin-top: 0;
-    }
-
-    /deep/ .main-container {
-      height:
-        calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
-      @include nb-ltr(border-top-right-radius, nb-theme(radius));
-      @include nb-rtl(border-top-left-radius, nb-theme(radius));
-
-      @include nb-for-theme(corporate) {
-        border: 1px solid nb-theme(separator);
-        height:
-          calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-      }
-    }
-
-    /deep/ .scrollable {
-      @include nb-for-theme(corporate) {
-        padding-top: 0;
-
-        .menu-item:first-child {
-          border-top: none;
-        }
-      }
-    }
-
-    /deep/ nb-sidebar-header {
-      padding-bottom: 0.5rem;
-      text-align: center;
-    }
-
-    background: transparent;
-
-    .main-btn {
-      padding: 0.75rem 2.5rem;
-      margin-top: -2rem;
-      font-weight: bold;
-      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
-
-      @include nb-for-theme(corporate) {
-        border-radius: nb-theme(radius);
-      }
-
-      i {
-        font-size: 2rem;
-        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-      }
-      span {
-        @include nb-ltr(padding-left, 0.25rem);
-        @include nb-rtl(padding-right, 0.25rem);
-      }
-
-      i, span {
-        vertical-align: middle;
-      }
-    }
-
-    &.compacted {
-
-      /deep/ nb-sidebar-header {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      .main-btn {
-        width: 46px;
-        height: 44px;
-        padding: 0.375rem;
-        border-radius: 5px;
-        transition: none;
-
-        span {
-          display: none;
-        }
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    .main-content {
-      padding: 0.75rem !important;
-
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-
-    nb-sidebar.menu-sidebar {
-
-      margin-top: 0;
-
-      /deep/ .main-container {
-        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-        @include nb-ltr(border-top-right-radius, 0);
-        @include nb-rtl(border-top-left-radius, 0);
-
-        .scrollable {
-          padding-top: 0;
-        }
-      }
-    }
-
-    .main-btn {
-      display: none;
-    }
+  .menu-sidebar ::ng-deep .scrollable {
+    padding-top: nb-theme(layout-padding-top);
  }
 }
--- a/src/app/@theme/layouts/one-column/one-column.layout.ts
+++ b/src/app/@theme/layouts/one-column/one-column.layout.ts
@ -1,23 +1,15 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
+import { Component } from '@angular/core';

-// TODO: move layouts into the framework
@Component({
  selector: 'ngx-one-column-layout',
  styleUrls: ['./one-column.layout.scss'],
  template: `
-    <nb-layout>
+    <nb-layout windowMode>
      <nb-layout-header fixed>
        <ngx-header></ngx-header>
      </nb-layout-header>

      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
-        <nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
-          <a href="#" class="btn btn-hero-success main-btn">
-            <i class="ion ion-social-github"></i> <span>Support Us</span>
-          </a>
-        </nb-sidebar-header>
        <ng-content select="nb-menu"></ng-content>
      </nb-sidebar>

@ -31,21 +23,4 @@ import { takeWhile } from 'rxjs/operators';
    </nb-layout>
  `,
 })
-export class OneColumnLayoutComponent implements OnDestroy {
-
-  private alive = true;
-
-  currentTheme: string;
-
-  constructor(protected themeService: NbThemeService) {
-    this.themeService.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(theme => {
-        this.currentTheme = theme.name;
-    });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}
+export class OneColumnLayoutComponent {}
--- a/src/app/@theme/layouts/sample/sample.layout.scss
+++ b/src/app/@theme/layouts/sample/sample.layout.scss
@ -1,182 +0,0 @@
-@import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-  nb-layout-column.small {
-    flex: 0.15 !important;
-  }
-
-  nb-sidebar.settings-sidebar {
-    $sidebar-width: 19rem;
-
-    transition: transform 0.3s ease;
-    width: $sidebar-width;
-    overflow: hidden;
-    @include nb-ltr(transform, translate3d(100%, 0, 0));
-    @include nb-rtl(transform, translate3d(-100%, 0, 0));
-    &.start {
-      @include nb-ltr(transform, translate3d(-100%, 0, 0));
-      @include nb-rtl(transform, translate3d(100%, 0, 0));
-    }
-
-    &.expanded, &.expanded.start {
-      transform: translate3d(0, 0, 0);
-    }
-
-    /deep/ .scrollable {
-      width: $sidebar-width;
-      padding: 3.4rem 0.25rem;
-    }
-
-    /deep/ .main-container {
-      width: $sidebar-width;
-      background: nb-theme(color-bg);
-      transition: transform 0.3s ease;
-      overflow: hidden;
-      position: relative;
-
-      .scrollable {
-        width: $sidebar-width;
-      }
-
-      @include nb-for-theme(cosmic) {
-        background: nb-theme(layout-bg);
-      }
-    }
-  }
-
-  nb-sidebar.menu-sidebar {
-
-    margin-top: nb-theme(sidebar-header-gap);
-
-    @include nb-for-theme(corporate) {
-      margin-top: 0;
-    }
-
-    /deep/ .main-container {
-      height:
-        calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
-      @include nb-ltr(border-top-right-radius, nb-theme(radius));
-      @include nb-rtl(border-top-left-radius, nb-theme(radius));
-
-      @include nb-for-theme(corporate) {
-        border: 1px solid nb-theme(separator);
-        height:
-          calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-      }
-    }
-
-    /deep/ .scrollable {
-      @include nb-for-theme(corporate) {
-        padding-top: 0;
-
-        .menu-item:first-child {
-          border-top: none;
-        }
-      }
-    }
-
-    /deep/ nb-sidebar-header {
-      padding-bottom: 0.5rem;
-      text-align: center;
-    }
-
-    background: transparent;
-
-    .main-btn {
-      padding: 0.75rem 2.5rem;
-      margin-top: -2rem;
-      font-weight: bold;
-      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
-
-      @include nb-for-theme(corporate) {
-        border-radius: nb-theme(radius);
-      }
-
-      i {
-        font-size: 2rem;
-        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-      }
-      span {
-        @include nb-ltr(padding-left, 0.25rem);
-        @include nb-rtl(padding-right, 0.25rem);
-      }
-
-      i, span {
-        vertical-align: middle;
-      }
-    }
-
-    /deep/ nb-menu {
-      & > .menu-items {
-        & > .menu-item:first-child {
-          .menu-title {
-            &::after {
-              content: 'new';
-              color: nb-theme(color-white);
-              margin-left: 1rem;
-              background: nb-theme(color-danger);
-              padding: 0 0.5rem;
-              border-radius: nb-theme(radius);
-              font-size: nb-theme(font-size-sm);
-            }
-          }
-        }
-      }
-
-      .nb-e-commerce {
-        font-size: 2rem;
-      }
-    }
-
-    &.compacted {
-
-      /deep/ nb-sidebar-header {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      .main-btn {
-        width: 46px;
-        height: 44px;
-        padding: 0.375rem;
-        border-radius: 5px;
-        transition: none;
-
-        span {
-          display: none;
-        }
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    .main-content {
-      padding: 0.75rem !important;
-
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-
-    nb-sidebar.menu-sidebar {
-
-      margin-top: 0;
-
-      /deep/ .main-container {
-        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-        @include nb-ltr(border-top-right-radius, 0);
-        @include nb-rtl(border-top-left-radius, 0);
-
-        .scrollable {
-          padding-top: 0;
-        }
-      }
-    }
-
-    .main-btn {
-      display: none;
-    }
-  }
-}
--- a/src/app/@theme/layouts/sample/sample.layout.ts
+++ b/src/app/@theme/layouts/sample/sample.layout.ts
@ -1,152 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { delay, withLatestFrom, takeWhile } from 'rxjs/operators';
-import {
-  NbMediaBreakpoint,
-  NbMediaBreakpointsService,
-  NbMenuItem,
-  NbMenuService,
-  NbSidebarService,
-  NbThemeService,
-} from '@nebular/theme';
-
-import { StateService } from '../../../@core/utils';
-
-// TODO: move layouts into the framework
-@Component({
-  selector: 'ngx-sample-layout',
-  styleUrls: ['./sample.layout.scss'],
-  template: `
-    <nb-layout [center]="layout.id === 'center-column'" windowMode>
-      <nb-layout-header fixed>
-        <ngx-header [position]="sidebar.id === 'start' ? 'normal': 'inverse'"></ngx-header>
-      </nb-layout-header>
-
-      <nb-sidebar class="menu-sidebar"
-                   tag="menu-sidebar"
-                   responsive
-                   [end]="sidebar.id === 'end'">
-        <nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
-          <a href="#" class="btn btn-hero-success main-btn">
-            <i class="ion ion-social-github"></i> <span>Support Us</span>
-          </a>
-        </nb-sidebar-header>
-        <ng-content select="nb-menu"></ng-content>
-      </nb-sidebar>
-
-      <nb-layout-column class="main-content">
-        <ng-content select="router-outlet"></ng-content>
-      </nb-layout-column>
-
-      <nb-layout-column start class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
-        <nb-menu [items]="subMenu"></nb-menu>
-      </nb-layout-column>
-
-      <nb-layout-column class="small" *ngIf="layout.id === 'three-column'">
-        <nb-menu [items]="subMenu"></nb-menu>
-      </nb-layout-column>
-
-      <nb-layout-footer fixed>
-        <ngx-footer></ngx-footer>
-      </nb-layout-footer>
-
-      <nb-sidebar class="settings-sidebar"
-                   tag="settings-sidebar"
-                   state="collapsed"
-                   fixed
-                   [end]="sidebar.id !== 'end'">
-        <ngx-theme-settings></ngx-theme-settings>
-      </nb-sidebar>
-    </nb-layout>
-    <ngx-toggle-settings-button></ngx-toggle-settings-button>
-  `,
-})
-export class SampleLayoutComponent implements OnDestroy {
-
-  subMenu: NbMenuItem[] = [
-    {
-      title: 'PAGE LEVEL MENU',
-      group: true,
-    },
-    {
-      title: 'Buttons',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/buttons',
-    },
-    {
-      title: 'Grid',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/grid',
-    },
-    {
-      title: 'Icons',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/icons',
-    },
-    {
-      title: 'Modals',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/modals',
-    },
-    {
-      title: 'Typography',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/typography',
-    },
-    {
-      title: 'Animated Searches',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/search-fields',
-    },
-    {
-      title: 'Tabs',
-      icon: 'ion ion-android-radio-button-off',
-      link: '/pages/ui-features/tabs',
-    },
-  ];
-  layout: any = {};
-  sidebar: any = {};
-
-  private alive = true;
-
-  currentTheme: string;
-
-  constructor(protected stateService: StateService,
-              protected menuService: NbMenuService,
-              protected themeService: NbThemeService,
-              protected bpService: NbMediaBreakpointsService,
-              protected sidebarService: NbSidebarService) {
-    this.stateService.onLayoutState()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe((layout: string) => this.layout = layout);
-
-    this.stateService.onSidebarState()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe((sidebar: string) => {
-        this.sidebar = sidebar;
-      });
-
-    const isBp = this.bpService.getByName('is');
-    this.menuService.onItemSelect()
-      .pipe(
-        takeWhile(() => this.alive),
-        withLatestFrom(this.themeService.onMediaQueryChange()),
-        delay(20),
-      )
-      .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
-
-        if (bpTo.width <= isBp.width) {
-          this.sidebarService.collapse('menu-sidebar');
-        }
-      });
-
-    this.themeService.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(theme => {
-        this.currentTheme = theme.name;
-    });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}
--- a/src/app/@theme/layouts/three-columns/three-columns.layout.scss
+++ b/src/app/@theme/layouts/three-columns/three-columns.layout.scss
@ -1,157 +1,9 @@
@import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
-  nb-layout-column.small {
-    flex: 0.15 !important;
-  }
-
-  nb-sidebar.settings-sidebar {
-    $sidebar-width: 7.5rem;
-
-    transition: width 0.3s ease;
-    width: $sidebar-width;
-    overflow: hidden;
-
-    &.collapsed {
-      width: 0;
-
-      /deep/ .main-container {
-        width: 0;
-
-        .scrollable {
-          width: $sidebar-width;
-          padding: 1.25rem;
-        }
-      }
-    }
-
-    /deep/ .main-container {
-      width: $sidebar-width;
-      background: nb-theme(color-bg);
-      transition: width 0.3s ease;
-      overflow: hidden;
-
-      .scrollable {
-        width: $sidebar-width;
-      }
-
-      @include nb-for-theme(cosmic) {
-        background: nb-theme(layout-bg);
-      }
-    }
-  }
-
-  nb-sidebar.menu-sidebar {
-
-    margin-top: nb-theme(sidebar-header-gap);
-
-    @include nb-for-theme(corporate) {
-      margin-top: 0;
-    }
-
-    /deep/ .main-container {
-      height:
-        calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
-      @include nb-ltr(border-top-right-radius, nb-theme(radius));
-      @include nb-rtl(border-top-left-radius, nb-theme(radius));
-
-      @include nb-for-theme(corporate) {
-        border: 1px solid nb-theme(separator);
-        height:
-          calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-      }
-    }
-
-    /deep/ .scrollable {
-      @include nb-for-theme(corporate) {
-        padding-top: 0;
-
-        .menu-item:first-child {
-          border-top: none;
-        }
-      }
-    }
-
-    /deep/ nb-sidebar-header {
-      padding-bottom: 0.5rem;
-      text-align: center;
-    }
-
-    background: transparent;
-
-    .main-btn {
-      padding: 0.75rem 2.5rem;
-      margin-top: -2rem;
-      font-weight: bold;
-      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
-
-      @include nb-for-theme(corporate) {
-        border-radius: nb-theme(radius);
-      }
-
-      i {
-        font-size: 2rem;
-        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-      }
-      span {
-        @include nb-ltr(padding-left, 0.25rem);
-        @include nb-rtl(padding-right, 0.25rem);
-      }
-
-      i, span {
-        vertical-align: middle;
-      }
-    }
-
-    &.compacted {
-
-      /deep/ nb-sidebar-header {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      .main-btn {
-        width: 46px;
-        height: 44px;
-        padding: 0.375rem;
-        border-radius: 5px;
-        transition: none;
-
-        span {
-          display: none;
-        }
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    .main-content {
-      padding: 0.75rem !important;
-
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-
-    nb-sidebar.menu-sidebar {
-
-      margin-top: 0;
-
-      /deep/ .main-container {
-        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-        @include nb-ltr(border-top-right-radius, 0);
-        @include nb-rtl(border-top-left-radius, 0);
-
-        .scrollable {
-          padding-top: 0;
-        }
-      }
-    }
-
-    .main-btn {
-      display: none;
-    }
+  .menu-sidebar ::ng-deep .scrollable {
+    padding-top: nb-theme(layout-padding-top);
  }
 }
--- a/src/app/@theme/layouts/three-columns/three-columns.layout.ts
+++ b/src/app/@theme/layouts/three-columns/three-columns.layout.ts
@ -1,23 +1,15 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
+import { Component } from '@angular/core';

-// TODO: move layouts into the framework
@Component({
  selector: 'ngx-three-columns-layout',
  styleUrls: ['./three-columns.layout.scss'],
  template: `
-    <nb-layout>
+    <nb-layout windowMode>
      <nb-layout-header fixed>
        <ngx-header></ngx-header>
      </nb-layout-header>

-      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
-        <nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
-          <a href="#" class="btn btn-hero-success main-btn">
-            <i class="ion ion-social-github"></i> <span>Support Us</span>
-          </a>
-        </nb-sidebar-header>
+      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
        <ng-content select="nb-menu"></ng-content>
      </nb-sidebar>

@ -37,21 +29,4 @@ import { takeWhile } from 'rxjs/operators';
    </nb-layout>
  `,
 })
-export class ThreeColumnsLayoutComponent implements OnDestroy {
-
-  private alive = true;
-
-  currentTheme: string;
-
-  constructor(protected themeService: NbThemeService) {
-    this.themeService.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(theme => {
-        this.currentTheme = theme.name;
-    });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}
+export class ThreeColumnsLayoutComponent {}
--- a/src/app/@theme/layouts/two-columns/two-columns.layout.scss
+++ b/src/app/@theme/layouts/two-columns/two-columns.layout.scss
@ -1,158 +1,9 @@
@import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
-  nb-layout-column.small {
-    flex: 0.15 !important;
-  }
-
-  nb-sidebar.settings-sidebar {
-    $sidebar-width: 7.5rem;
-
-    transition: width 0.3s ease;
-    width: $sidebar-width;
-    overflow: hidden;
-
-    &.collapsed {
-      width: 0;
-
-      /deep/ .main-container {
-        width: 0;
-
-        .scrollable {
-          width: $sidebar-width;
-          padding: 1.25rem;
-        }
-      }
-    }
-
-    /deep/ .main-container {
-      width: $sidebar-width;
-      background: nb-theme(color-bg);
-      transition: width 0.3s ease;
-      overflow: hidden;
-
-      .scrollable {
-        width: $sidebar-width;
-      }
-
-      @include nb-for-theme(cosmic) {
-        background: nb-theme(layout-bg);
-      }
-    }
-  }
-
-  nb-sidebar.menu-sidebar {
-
-    margin-top: nb-theme(sidebar-header-gap);
-
-    @include nb-for-theme(corporate) {
-      margin-top: 0;
-    }
-
-    /deep/ .main-container {
-      height:
-        calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
-      @include nb-ltr(border-top-right-radius, nb-theme(radius));
-      @include nb-rtl(border-top-left-radius, nb-theme(radius));
-
-      @include nb-for-theme(corporate) {
-        border: 1px solid nb-theme(separator);
-        height:
-          calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-
-      }
-    }
-
-    /deep/ .scrollable {
-      @include nb-for-theme(corporate) {
-        padding-top: 0;
-
-        .menu-item:first-child {
-          border-top: none;
-        }
-      }
-    }
-
-    /deep/ nb-sidebar-header {
-      padding-bottom: 0.5rem;
-      text-align: center;
-    }
-
-    background: transparent;
-
-    .main-btn {
-      padding: 0.75rem 2.5rem;
-      margin-top: -2rem;
-      font-weight: bold;
-      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
-
-      @include nb-for-theme(corporate) {
-        border-radius: nb-theme(radius);
-      }
-
-      i {
-        font-size: 2rem;
-        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-      }
-      span {
-        @include nb-ltr(padding-left, 0.25rem);
-        @include nb-rtl(padding-right, 0.25rem);
-      }
-
-      i, span {
-        vertical-align: middle;
-      }
-    }
-
-    &.compacted {
-
-      /deep/ nb-sidebar-header {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      .main-btn {
-        width: 46px;
-        height: 44px;
-        padding: 0.375rem;
-        border-radius: 5px;
-        transition: none;
-
-        span {
-          display: none;
-        }
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    .main-content {
-      padding: 0.75rem !important;
-
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-
-    nb-sidebar.menu-sidebar {
-
-      margin-top: 0;
-
-      /deep/ .main-container {
-        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-        @include nb-ltr(border-top-right-radius, 0);
-        @include nb-rtl(border-top-left-radius, 0);
-
-        .scrollable {
-          padding-top: 0;
-        }
-      }
-    }
-
-    .main-btn {
-      display: none;
-    }
+  .menu-sidebar ::ng-deep .scrollable {
+    padding-top: nb-theme(layout-padding-top);
  }
 }
--- a/src/app/@theme/layouts/two-columns/two-columns.layout.ts
+++ b/src/app/@theme/layouts/two-columns/two-columns.layout.ts
@ -1,23 +1,15 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
+import { Component } from '@angular/core';

-// TODO: move layouts into the framework
@Component({
  selector: 'ngx-two-columns-layout',
  styleUrls: ['./two-columns.layout.scss'],
  template: `
-    <nb-layout>
+    <nb-layout windowMode>
      <nb-layout-header fixed>
        <ngx-header></ngx-header>
      </nb-layout-header>

-      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
-        <nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
-          <a href="#" class="btn btn-hero-success main-btn">
-            <i class="ion ion-social-github"></i> <span>Support Us</span>
-          </a>
-        </nb-sidebar-header>
+      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
        <ng-content select="nb-menu"></ng-content>
      </nb-sidebar>

@ -35,21 +27,4 @@ import { takeWhile } from 'rxjs/operators';
    </nb-layout>
  `,
 })
-export class TwoColumnsLayoutComponent implements OnDestroy {
-
-  private alive = true;
-
-  currentTheme: string;
-
-  constructor(protected themeService: NbThemeService) {
-    this.themeService.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(theme => {
-        this.currentTheme = theme.name;
-    });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}
+export class TwoColumnsLayoutComponent {}
--- a/src/app/@theme/pipes/eva-icons.pipe.ts
+++ b/src/app/@theme/pipes/eva-icons.pipe.ts
@ -1,50 +0,0 @@
-/**
- * @license
- * Copyright Akveo. All Rights Reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- */
-
-import { DomSanitizer } from '@angular/platform-browser';
-import { Pipe, PipeTransform } from '@angular/core';
-import { icons } from 'eva-icons';
-
-@Pipe({ name: 'eva' })
-export class EvaIconsPipe implements PipeTransform {
-
-  private defaultOptions = {
-    height: 24,
-    width: 24,
-    fill: 'inherit',
-    animationHover: true,
-    animationInfinity: false,
-  };
-
-  constructor(private sanitizer: DomSanitizer) {}
-
-  transform(icon: string,
-            options: {
-              height: number;
-              width: number;
-              fill: string;
-              animationType?: string;
-              animationHover?: boolean;
-              animationInfinity?: boolean;
-            },
-  ) {
-    const mergedOptions = {
-      ...this.defaultOptions,
-      ...options,
-    };
-    const { width, height, fill, animationType, animationHover, animationInfinity } = mergedOptions;
-    const animation = animationType ?
-      { type: animationType, hover: animationHover, infinite: animationInfinity } :
-      null;
-
-    return this.sanitizer.bypassSecurityTrustHtml(icons[icon].toSvg({
-      width,
-      height,
-      fill,
-      animation,
-    }));
-  }
-}
--- a/src/app/@theme/pipes/index.ts
+++ b/src/app/@theme/pipes/index.ts
@ -3,4 +3,3 @@ export * from './plural.pipe';
 export * from './round.pipe';
 export * from './timing.pipe';
 export * from './number-with-commas.pipe';
-export * from './eva-icons.pipe';
--- a/src/app/@theme/styles/_layout.scss
+++ b/src/app/@theme/styles/_layout.scss
@ -0,0 +1,8 @@
+@mixin ngx-layout() {
+  @include media-breakpoint-down(is) {
+    .row {
+      margin-left: -10px;
+      margin-right: -10px;
+    }
+  }
+}
--- a/src/app/@theme/styles/_overrides.scss
+++ b/src/app/@theme/styles/_overrides.scss
@ -0,0 +1,11 @@
+@import './themes';
+
+@mixin nb-overrides() {
+  nb-select.size-medium button {
+    padding: 0.4375rem 2.2rem 0.4375rem 1.125rem !important;
+
+    nb-icon {
+      right: 0.41rem !important;
+    }
+  }
+}
--- a/src/app/@theme/styles/font-size.scss
+++ b/src/app/@theme/styles/font-size.scss
@ -1,3 +0,0 @@
-html {
-  font-size: 14px;
-}
--- a/src/app/@theme/styles/pace.theme.scss
+++ b/src/app/@theme/styles/pace.theme.scss
@ -7,16 +7,14 @@
 @mixin ngx-pace-theme() {

  .pace .pace-progress {
-    background: nb-theme(color-fg-highlight);
+    background: nb-theme(color-primary-default);
  }

  .pace .pace-progress-inner {
-    box-shadow: 0 0 10px nb-theme(color-fg-highlight), 0 0 5px nb-theme(color-fg-highlight);
+    box-shadow: 0 0 10px nb-theme(color-primary-default), 0 0 5px nb-theme(color-primary-default);
  }

  .pace .pace-activity {
    display: none;
-    // border-top-color: nb-theme(color-fg-highlight);
-    // border-left-color: nb-theme(color-fg-highlight);
  }
 }
--- a/src/app/@theme/styles/styles.scss
+++ b/src/app/@theme/styles/styles.scss
@ -1,26 +1,33 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
+
 // themes - our custom or/and out of the box themes
@import 'themes';

 // framework component themes (styles tied to theme variables)
-@import '~@nebular/theme/styles/globals';
-@import '~@nebular/auth/styles/all';
-@import '~@nebular/bootstrap/styles/globals';
-// ...
+@import '@nebular/theme/styles/globals';
+@import '@nebular/auth/styles/globals';

-// global app font size
-@import './font-size';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/grid';

 // loading progress bar theme
@import './pace.theme';

+@import './layout';
+@import './overrides';
+
 // install the framework and custom global styles
@include nb-install() {

  // framework global styles
  @include nb-theme-global();
  @include nb-auth-global();
-  @include nb-bootstrap-global();

+  @include ngx-layout();
  // loading progress bar
  @include ngx-pace-theme();
+
+  @include nb-overrides();
 };
--- a/src/app/@theme/styles/theme.corporate.ts
+++ b/src/app/@theme/styles/theme.corporate.ts
@ -1,179 +1,184 @@
+import { NbJSThemeOptions, CORPORATE_THEME as baseTheme } from '@nebular/theme';
+
+const baseThemeVariables = baseTheme.variables;
+
 export const CORPORATE_THEME = {
  name: 'corporate',
-  base: 'default',
+  base: 'corporate',
  variables: {
-    temperature: [
-      '#ffa36b',
-      '#ffa36b',
-      '#ff9e7a',
-      '#ff9888',
-      '#ff8ea0',
-    ],
+    temperature: {
+      arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: '#ffa36b',
+    },

    solar: {
-      gradientLeft: '#ff8ea0',
-      gradientRight: '#ffa36b',
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
      shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
      radius: ['80%', '90%'],
    },

    traffic: {
-      colorBlack: '#ffffff',
-      tooltipBg: '#eef2f5',
-      tooltipBorderColor: '#eef2f5',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: '400',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',

-      lineBg: '#cae6f3',
+      yAxisSplitLine: 'rgba(0, 0, 0, 0)',
+
+      lineBg: baseThemeVariables.primary,
      lineShadowBlur: '0',
-      itemColor: '#bcc3cc',
-      itemBorderColor: '#bcc3cc',
-      itemEmphasisBorderColor: '#74a2ff',
+      itemColor: baseThemeVariables.border4,
+      itemBorderColor: baseThemeVariables.border4,
+      itemEmphasisBorderColor: baseThemeVariables.primaryLight,
      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
      shadowLineShadow: 'rgba(0, 0, 0, 0)',
-      gradFrom: '#ffffff',
-      gradTo: '#ffffff',
+      gradFrom: baseThemeVariables.bg,
+      gradTo: baseThemeVariables.bg,
    },

    electricity: {
-      tooltipBg: '#edf0f4',
-      tooltipLineColor: '#bdc4cd',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: baseThemeVariables.fgText,
      tooltipLineWidth: '0',
-      tooltipBorderColor: '#ebeef2',
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: 'bolder',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',

-      axisLineColor: 'rgba(0, 0, 0, 0)',
-      xAxisTextColor: '#2a2a2a',
-      yAxisSplitLine: '#ebeef2',
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,

-      itemBorderColor: '#73a1ff',
+      itemBorderColor: baseThemeVariables.primary,
      lineStyle: 'solid',
      lineWidth: '4',
-      lineGradFrom: '#bdc4cd',
-      lineGradTo: '#c0c8d1',
+      lineGradFrom: baseThemeVariables.primary,
+      lineGradTo: baseThemeVariables.primary,
      lineShadow: 'rgba(0, 0, 0, 0)',

-      areaGradFrom: 'rgba(255, 255, 255, 0)',
-      areaGradTo: 'rgba(255, 255, 255, 0)',
-      shadowLineDarkBg: 'rgba(255, 255, 255, 0)',
+      areaGradFrom: 'rgba(0, 0, 0, 0)',
+      areaGradTo: 'rgba(0, 0, 0, 0)',
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
    },

    bubbleMap: {
-      titleColor: '#484848',
-      areaColor: '#dddddd',
-      areaHoverColor: '#cccccc',
-      areaBorderColor: '#ebeef2',
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
    },

    profitBarAnimationEchart: {
-      textColor: '#b2bac2',
+      textColor: baseThemeVariables.fgText,

-      firstAnimationBarColor: '#719efc',
-      secondAnimationBarColor: '#5dcfe3',
+      firstAnimationBarColor: baseThemeVariables.primary,
+      secondAnimationBarColor: baseThemeVariables.success,

-      splitLineStyleOpacity: '0.06',
+      splitLineStyleOpacity: '1',
      splitLineStyleWidth: '1',
-      splitLineStyleColor: '#000000',
+      splitLineStyleColor: baseThemeVariables.separator,

-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: '400',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
      tooltipFontSize: '16',
-      tooltipBg: '#eef2f5',
-      tooltipBorderColor: '#eef2f5',
-      tooltipBorderWidth: '3',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
    },

    trafficBarEchart: {
-      gradientFrom: '#ff8ea0',
-      gradientTo: '#ffa36b',
-      shadow: 'rgba(0, 0, 0, 0)',
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
      shadowBlur: '0',

-      axisTextColor: '#b2bac2',
+      axisTextColor: baseThemeVariables.fgText,
      axisFontSize: '12',

-      tooltipBg: '#edf0f4',
-      tooltipBorderColor: '#ebeef2',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: 'bolder',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
    },

    countryOrders: {
-      countryBorderColor: 'rgba(255, 255, 255, 1)',
-      countryFillColor: 'rgba(236, 242, 245, 1)',
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg4,
      countryBorderWidth: '1',
-      hoveredCountryBorderColor: 'rgba(113, 158, 252, 1)',
-      hoveredCountryFillColor: 'rgba(199, 216, 247, 1)',
-      hoveredCountryBorderWidth: '3',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
+      hoveredCountryBorderWidth: '1',

-      chartAxisLineColor: 'rgba(0, 0, 0, 0)',
-      chartAxisTextColor: '#b2bac2',
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
      chartAxisFontSize: '16',
-      chartGradientTo: 'rgba(113, 158, 252, 1)',
-      chartGradientFrom: 'rgba(113, 158, 252, 1)',
-      chartAxisSplitLine: '#ebeef2',
-      chartShadowLineColor: '#2f296b',
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,

-      chartLineBottomShadowColor: 'rgba(113, 158, 252, 1)',
+      chartLineBottomShadowColor: baseThemeVariables.primary,

-      chartInnerLineColor: '#eceff4',
+      chartInnerLineColor: baseThemeVariables.bg2,
    },

    echarts: {
-      bg: '#ffffff',
-      textColor: '#484848',
-      axisLineColor: '#bbbbbb',
-      splitLineColor: '#ebeef2',
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
-      tooltipBackgroundColor: '#6a7985',
+      tooltipBackgroundColor: baseThemeVariables.primary,
      areaOpacity: '0.7',
    },

    chartjs: {
-      axisLineColor: '#cccccc',
-      textColor: '#484848',
+      axisLineColor: baseThemeVariables.separator,
+      textColor: baseThemeVariables.fgText,
    },

    orders: {
-      tooltipBg: '#ffffff',
+      tooltipBg: baseThemeVariables.bg,
      tooltipLineColor: 'rgba(0, 0, 0, 0)',
      tooltipLineWidth: '0',
-      tooltipBorderColor: '#ebeef2',
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: 'bolder',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
      tooltipFontSize: '20',

-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: baseThemeVariables.border4,
      axisFontSize: '16',
-      axisTextColor: '#b2bac2',
-      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,

-      itemBorderColor: '#73a1ff',
+      itemBorderColor: baseThemeVariables.primary,
      lineStyle: 'solid',
      lineWidth: '4',

      // first line
-      firstAreaGradFrom: 'rgba(227, 236, 254, 0.7)',
-      firstAreaGradTo: 'rgba(227, 236, 254, 0.7)',
+      firstAreaGradFrom: baseThemeVariables.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
      firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',

      // second line
-      secondLineGradFrom: 'rgba(93, 207, 227, 1)',
-      secondLineGradTo: 'rgba(93, 207, 227, 1)',
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,

      secondAreaGradFrom: 'rgba(0, 0, 0, 0)',
      secondAreaGradTo: 'rgba(0, 0, 0, 0)',
      secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',

      // third line
-      thirdLineGradFrom: 'rgba(113, 158, 252, 1)',
-      thirdLineGradTo: 'rgba(113, 158, 252, 1)',
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,

      thirdAreaGradFrom: 'rgba(0, 0, 0, 0)',
      thirdAreaGradTo: 'rgba(0, 0, 0, 0)',
@ -181,92 +186,91 @@ export const CORPORATE_THEME = {
    },

    profit: {
-      bg: '#ffffff',
-      textColor: '#ffffff',
-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
-      splitLineColor: 'rgba(161, 161 ,229, 0.2)',
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
      areaOpacity: '1',

      axisFontSize: '16',
-      axisTextColor: '#b2bac2',
+      axisTextColor: baseThemeVariables.fg,

      // first bar
-      firstLineGradFrom: '#719efc',
-      firstLineGradTo: '#719efc',
-      firstLineShadow: 'rgba(14, 16, 48, 0.4)',
+      firstLineGradFrom: baseThemeVariables.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
+      firstLineShadow: 'rgba(0, 0, 0, 0)',

      // second bar
-      secondLineGradFrom: '#5dcfe3',
-      secondLineGradTo: '#5dcfe3',
-      secondLineShadow: 'rgba(14, 16, 48, 0.4)',
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+      secondLineShadow: 'rgba(0, 0, 0, 0)',

      // third bar
-      thirdLineGradFrom: '#e3ecfe',
-      thirdLineGradTo: '#e3ecfe',
-      thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.success,
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
    },

    orderProfitLegend: {
-      firstItem: '#719efc',
-      secondItem: '#5dcfe3',
-      thirdItem: '#e3ecfe',
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      thirdItem: baseThemeVariables.bg3,
    },

    visitors: {
-      tooltipBg: '#ffffff',
+      tooltipBg: baseThemeVariables.bg,
      tooltipLineColor: 'rgba(0, 0, 0, 0)',
-      tooltipLineWidth: '0',
-      tooltipBorderColor: '#ebeef2',
+      tooltipLineWidth: '1',
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: 'bolder',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
      tooltipFontSize: '20',

-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: baseThemeVariables.border4,
      axisFontSize: '16',
-      axisTextColor: '#b2bac2',
-      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,

-      itemBorderColor: '#73a1ff',
+      itemBorderColor: baseThemeVariables.primary,
      lineStyle: 'dotted',
      lineWidth: '6',
-      lineGradFrom: '#73a1ff',
-      lineGradTo: '#73a1ff',
+      lineGradFrom: '#ffffff',
+      lineGradTo: '#ffffff',
      lineShadow: 'rgba(0, 0, 0, 0)',

-      areaGradFrom: 'rgba(146, 181, 252, 1)',
-      areaGradTo: 'rgba(146, 181, 252, 1)',
-      shadowLineDarkBg: '#a695ff',
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,

      innerLineStyle: 'solid',
      innerLineWidth: '1',

-      innerAreaGradFrom: 'rgba(227, 236, 254, 1)',
-      innerAreaGradTo: 'rgba(227, 236, 254, 1)',
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
    },

    visitorsLegend: {
-      firstIcon: '#e3ecfe',
-      secondIcon: '#719efc',
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
    },

    visitorsPie: {
-      firstPieGradientLeft: '#94e2ed',
-      firstPieGradientRight: '#94e2ed',
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
      firstPieRadius: ['65%', '90%'],

-      secondPieGradientLeft: '#719efc',
-      secondPieGradientRight: '#719efc',
-      secondPieShadowColor: '#b2cafb',
+      secondPieGradientLeft: baseThemeVariables.warning,
+      secondPieGradientRight: baseThemeVariables.warningLight,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
      secondPieRadius: ['63%', '92%'],
      shadowOffsetX: '-4',
      shadowOffsetY: '-4',
    },

    visitorsPieLegend: {
-      firstSection: '#719efc',
-      secondSection: '#99e5ee',
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
    },

    earningPie: {
@ -275,30 +279,30 @@ export const CORPORATE_THEME = {

      fontSize: '22',

-      firstPieGradientLeft: '#719efc',
-      firstPieGradientRight: '#719efc',
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
      firstPieShadowColor: 'rgba(0, 0, 0, 0)',

-      secondPieGradientLeft: '#ff9f6f',
-      secondPieGradientRight: '#ff9f6f',
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
      secondPieShadowColor: 'rgba(0, 0, 0, 0)',

-      thirdPieGradientLeft: '#ff5e83',
-      thirdPieGradientRight: '#ff5e83',
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
    },

    earningLine: {
-      gradFrom: '#e3ecfe',
-      gradTo: '#e3ecfe',
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,

-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: '400',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
      tooltipFontSize: '16',
-      tooltipBg: '#eef2f5',
-      tooltipBorderColor: '#eef2f5',
-      tooltipBorderWidth: '3',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
    },
  },
-};
+} as NbJSThemeOptions;
--- a/src/app/@theme/styles/theme.cosmic.ts
+++ b/src/app/@theme/styles/theme.cosmic.ts
@ -1,272 +1,276 @@
+import { NbJSThemeOptions, COSMIC_THEME as baseTheme } from '@nebular/theme';
+
+const baseThemeVariables = baseTheme.variables;
+
 export const COSMIC_THEME = {
  name: 'cosmic',
-  base: 'default',
+  base: 'cosmic',
  variables: {
-
-    temperature: [
-      '#2ec7fe',
-      '#31ffad',
-      '#7bff24',
-      '#fff024',
-      '#f7bd59',
-    ],
+    temperature: {
+      arcFill: [ '#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59' ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: '#ffffff',
+      thumbBorder: '#ffffff',
+    },

    solar: {
-      gradientLeft: '#7bff24',
-      gradientRight: '#2ec7fe',
-      shadowColor: '#19977E',
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
      radius: ['70%', '90%'],
    },

    traffic: {
-      colorBlack: '#000000',
-      tooltipBg: 'rgba(0, 255, 170, 0.35)',
-      tooltipBorderColor: '#00d977',
-      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: '#ffffff',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(50, 50, 89); border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
      tooltipFontWeight: 'normal',

-      lineBg: '#d1d1ff',
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      lineBg: baseThemeVariables.border2,
      lineShadowBlur: '14',
-      itemColor: '#BEBBFF',
-      itemBorderColor: '#ffffff',
-      itemEmphasisBorderColor: '#ffffff',
-      shadowLineDarkBg: '#655ABD',
-      shadowLineShadow: 'rgba(33, 7, 77, 0.5)',
-      gradFrom: 'rgba(118, 89, 255, 0.4)',
-      gradTo: 'rgba(164, 84, 255, 0.5)',
+      itemColor: baseThemeVariables.border2,
+      itemBorderColor: baseThemeVariables.border2,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
+      shadowLineDarkBg: baseThemeVariables.border3,
+      shadowLineShadow: baseThemeVariables.border3,
+      gradFrom: baseThemeVariables.bg,
+      gradTo: baseThemeVariables.bg2,
    },

    electricity: {
-      tooltipBg: 'rgba(0, 255, 170, 0.35)',
-      tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
-      tooltipLineWidth: '1',
-      tooltipBorderColor: '#00d977',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: baseThemeVariables.fgText,
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#ffffff',
+      tooltipTextColor: baseThemeVariables.fgText,
      tooltipFontWeight: 'normal',

-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
-      xAxisTextColor: '#a1a1e5',
-      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,

-      itemBorderColor: '#ffffff',
+      itemBorderColor: baseThemeVariables.border2,
      lineStyle: 'dotted',
      lineWidth: '6',
-      lineGradFrom: '#00ffaa',
-      lineGradTo: '#fff835',
-      lineShadow: 'rgba(14, 16, 48, 0.4)',
+      lineGradFrom: baseThemeVariables.success,
+      lineGradTo: baseThemeVariables.warning,
+      lineShadow: baseThemeVariables.bg4,

-      areaGradFrom: 'rgba(188, 92, 255, 0.5)',
-      areaGradTo: 'rgba(188, 92, 255, 0)',
-      shadowLineDarkBg: '#a695ff',
+      areaGradFrom: baseThemeVariables.bg2,
+      areaGradTo: baseThemeVariables.bg3,
+      shadowLineDarkBg: baseThemeVariables.bg3,
    },

    bubbleMap: {
-      titleColor: '#ffffff',
-      areaColor: '#2c2961',
-      areaHoverColor: '#a1a1e5',
-      areaBorderColor: '#654ddb',
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
    },

    profitBarAnimationEchart: {
-      textColor: '#ffffff',
+      textColor: baseThemeVariables.fgText,

-      firstAnimationBarColor: '#0088ff',
-      secondAnimationBarColor: '#7659ff',
+      firstAnimationBarColor: baseThemeVariables.primary,
+      secondAnimationBarColor: baseThemeVariables.success,

-      splitLineStyleOpacity: '0.06',
+      splitLineStyleOpacity: '1',
      splitLineStyleWidth: '1',
-      splitLineStyleColor: '#000000',
+      splitLineStyleColor: baseThemeVariables.border2,

-      tooltipTextColor: '#ffffff',
+      tooltipTextColor: baseThemeVariables.fgText,
      tooltipFontWeight: 'normal',
      tooltipFontSize: '16',
-      tooltipBg: 'rgba(0, 255, 170, 0.35)',
-      tooltipBorderColor: '#00d977',
-      tooltipBorderWidth: '3',
-      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
    },

    trafficBarEchart: {
-      gradientFrom: '#fc0',
-      gradientTo: '#ffa100',
-      shadow: '#ffb600',
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
      shadowBlur: '5',

-      axisTextColor: '#a1a1e5',
+      axisTextColor: baseThemeVariables.fgText,
      axisFontSize: '12',

-      tooltipBg: 'rgba(0, 255, 170, 0.35)',
-      tooltipBorderColor: '#00d977',
-      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: '#ffffff',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
      tooltipFontWeight: 'normal',
    },

    countryOrders: {
-      countryBorderColor: '#525dbd',
-      countryFillColor: '#4f41a6',
-      countryBorderWidth: '2',
-      hoveredCountryBorderColor: '#00f9a6',
-      hoveredCountryFillColor: '#377aa7',
-      hoveredCountryBorderWidth: '3',
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg3,
+      countryBorderWidth: '1',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
+      hoveredCountryBorderWidth: '1',

-      chartAxisLineColor: 'rgba(161, 161 ,229, 0.3)',
-      chartAxisTextColor: '#a1a1e5',
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
      chartAxisFontSize: '16',
-      chartGradientTo: '#00c7c7',
-      chartGradientFrom: '#00d977',
-      chartAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
-      chartShadowBarColor: '#2f296b',
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,

-      chartLineBottomShadowColor: '#00977e',
+      chartLineBottomShadowColor: baseThemeVariables.primary,

-      chartInnerLineColor: '#2f296b',
+      chartInnerLineColor: baseThemeVariables.bg2,
    },

    echarts: {
-      bg: '#3d3780',
-      textColor: '#ffffff',
-      axisLineColor: '#a1a1e5',
-      splitLineColor: '#342e73',
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
-      tooltipBackgroundColor: '#6a7985',
+      tooltipBackgroundColor: baseThemeVariables.primary,
      areaOpacity: '1',
    },

    chartjs: {
-      axisLineColor: '#a1a1e5',
-      textColor: '#ffffff',
+      axisLineColor: baseThemeVariables.separator,
+      textColor: baseThemeVariables.fgText,
    },

    orders: {
-      tooltipBg: 'rgba(0, 255, 170, 0.35)',
-      tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
-      tooltipLineWidth: '1',
-      tooltipBorderColor: '#00d977',
-      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#ffffff',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
      tooltipFontWeight: 'normal',
      tooltipFontSize: '20',

-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: baseThemeVariables.border4,
      axisFontSize: '16',
-      axisTextColor: '#a1a1e5',
-      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,

-      itemBorderColor: '#ffffff',
+      itemBorderColor: baseThemeVariables.primary,
      lineStyle: 'solid',
      lineWidth: '4',

      // first line
-      firstAreaGradFrom: 'rgba(78, 64, 164, 1)',
-      firstAreaGradTo: 'rgba(78, 64, 164, 1)',
-      firstShadowLineDarkBg: '#018dff',
+      firstAreaGradFrom: baseThemeVariables.bg2,
+      firstAreaGradTo: baseThemeVariables.bg2,
+      firstShadowLineDarkBg: baseThemeVariables.bg2,

      // second line
-      secondLineGradFrom: '#00bece',
-      secondLineGradTo: '#00da78',
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,

-      secondAreaGradFrom: 'rgba(38, 139, 145, 0.8)',
-      secondAreaGradTo: 'rgba(38, 139, 145, 0.5)',
-      secondShadowLineDarkBg: '#2c5a85',
+      secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)',
+      secondAreaGradTo: 'rgba(161, 110, 255, 0.5)',
+      secondShadowLineDarkBg: baseThemeVariables.primary,

      // third line
-      thirdLineGradFrom: '#8069ff',
-      thirdLineGradTo: '#8357ff',
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,

-      thirdAreaGradFrom: 'rgba(118, 73, 208, 0.7)',
-      thirdAreaGradTo: 'rgba(188, 92, 255, 0.4)',
-      thirdShadowLineDarkBg: '#a695ff',
+      thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)',
+      thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)',
+      thirdShadowLineDarkBg: baseThemeVariables.success,
    },

    profit: {
-      bg: '#3d3780',
-      textColor: '#ffffff',
-      axisLineColor: '#a1a1e5',
-      splitLineColor: '#342e73',
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
      areaOpacity: '1',

      axisFontSize: '16',
-      axisTextColor: '#a1a1e5',
+      axisTextColor: baseThemeVariables.fg,

      // first bar
-      firstLineGradFrom: '#00bece',
-      firstLineGradTo: '#00da78',
-      firstLineShadow: 'rgba(14, 16, 48, 0.4)',
+      firstLineGradFrom: baseThemeVariables.bg2,
+      firstLineGradTo: baseThemeVariables.bg2,
+      firstLineShadow: 'rgba(0, 0, 0, 0)',

      // second bar
-      secondLineGradFrom: '#8069ff',
-      secondLineGradTo: '#8357ff',
-      secondLineShadow: 'rgba(14, 16, 48, 0.4)',
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+      secondLineShadow: 'rgba(0, 0, 0, 0)',

      // third bar
-      thirdLineGradFrom: '#4e40a4',
-      thirdLineGradTo: '#4e40a4',
-      thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
    },

    orderProfitLegend: {
-      firstItem: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)',
-      secondItem: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)',
-      thirdItem: '#4e40a4',
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      thirdItem: baseThemeVariables.bg2,
    },

    visitors: {
-      tooltipBg: 'rgba(0, 255, 170, 0.35)',
-      tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
      tooltipLineWidth: '1',
-      tooltipBorderColor: '#00d977',
-      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#ffffff',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',

-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: baseThemeVariables.border4,
      axisFontSize: '16',
-      axisTextColor: '#a1a1e5',
-      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,

-      itemBorderColor: '#ffffff',
+      itemBorderColor: baseThemeVariables.primary,
      lineStyle: 'dotted',
      lineWidth: '6',
      lineGradFrom: '#ffffff',
      lineGradTo: '#ffffff',
-      lineShadow: 'rgba(14, 16, 48, 0.4)',
+      lineShadow: 'rgba(0, 0, 0, 0)',

-      areaGradFrom: 'rgba(188, 92, 255, 1)',
-      areaGradTo: 'rgba(188, 92, 255, 0.5)',
-      shadowLineDarkBg: '#a695ff',
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,

      innerLineStyle: 'solid',
      innerLineWidth: '1',

-      innerAreaGradFrom: 'rgba(59, 165, 243, 1)',
-      innerAreaGradTo: 'rgba(4, 133, 243 , 1)',
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
    },

    visitorsLegend: {
-      firstIcon: 'linear-gradient(90deg, #0088ff 0%, #3dafff 100%)',
-      secondIcon: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)',
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
    },

    visitorsPie: {
-      firstPieGradientLeft: '#7bff24',
-      firstPieGradientRight: '#2ec7fe',
-      firstPieShadowColor: '#19977E',
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.successLight,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
      firstPieRadius: ['70%', '90%'],

-      secondPieGradientLeft: '#ff894a',
-      secondPieGradientRight: '#ffcc10',
-      secondPieShadowColor: '#cf7c1c',
+      secondPieGradientLeft: baseThemeVariables.warning,
+      secondPieGradientRight: baseThemeVariables.warningLight,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
      secondPieRadius: ['60%', '95%'],
      shadowOffsetX: '0',
      shadowOffsetY: '3',
    },

    visitorsPieLegend: {
-      firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)',
-      secondSection: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)',
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
    },

    earningPie: {
@ -275,30 +279,30 @@ export const COSMIC_THEME = {

      fontSize: '22',

-      firstPieGradientLeft: '#00d77f',
-      firstPieGradientRight: '#00d77f',
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
      firstPieShadowColor: 'rgba(0, 0, 0, 0)',

-      secondPieGradientLeft: '#7756f7',
-      secondPieGradientRight: '#7756f7',
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
      secondPieShadowColor: 'rgba(0, 0, 0, 0)',

-      thirdPieGradientLeft: '#ffca00',
-      thirdPieGradientRight: '#ffca00',
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
    },

    earningLine: {
-      gradFrom: 'rgba(118, 89, 255, 0.4)',
-      gradTo: 'rgba(164, 84, 255, 0.5)',
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,

-      tooltipTextColor: '#ffffff',
+      tooltipTextColor: baseThemeVariables.fgText,
      tooltipFontWeight: 'normal',
      tooltipFontSize: '16',
-      tooltipBg: 'rgba(0, 255, 170, 0.35)',
-      tooltipBorderColor: '#00d977',
-      tooltipBorderWidth: '3',
-      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
    },
  },
-};
+} as NbJSThemeOptions;
--- a/src/app/@theme/styles/theme.dark.ts
+++ b/src/app/@theme/styles/theme.dark.ts
@ -0,0 +1,314 @@
+import { NbJSThemeOptions, DARK_THEME as baseTheme } from '@nebular/theme';
+
+const baseThemeVariables = baseTheme.variables;
+
+export const DARK_THEME = {
+  name: 'dark',
+  base: 'dark',
+  variables: {
+    temperature: {
+      arcFill: [
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+      ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: baseThemeVariables.primary,
+    },
+
+    solar: {
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
+      radius: ['80%', '90%'],
+    },
+
+    traffic: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      lineBg: baseThemeVariables.border4,
+      lineShadowBlur: '1',
+      itemColor: baseThemeVariables.border4,
+      itemBorderColor: baseThemeVariables.border4,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+      shadowLineShadow: 'rgba(0, 0, 0, 0)',
+      gradFrom: baseThemeVariables.bg2,
+      gradTo: baseThemeVariables.bg2,
+    },
+
+    electricity: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: baseThemeVariables.fgText,
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+      lineGradFrom: baseThemeVariables.primary,
+      lineGradTo: baseThemeVariables.primary,
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.bg2,
+      areaGradTo: baseThemeVariables.bg2,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    bubbleMap: {
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
+    },
+
+    profitBarAnimationEchart: {
+      textColor: baseThemeVariables.fgText,
+
+      firstAnimationBarColor: baseThemeVariables.primary,
+      secondAnimationBarColor: baseThemeVariables.success,
+
+      splitLineStyleOpacity: '1',
+      splitLineStyleWidth: '1',
+      splitLineStyleColor: baseThemeVariables.separator,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+
+    trafficBarEchart: {
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
+      shadowBlur: '0',
+
+      axisTextColor: baseThemeVariables.fgText,
+      axisFontSize: '12',
+
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+    },
+
+    countryOrders: {
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg3,
+      countryBorderWidth: '1',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
+      hoveredCountryBorderWidth: '1',
+
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
+      chartAxisFontSize: '16',
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,
+
+      chartLineBottomShadowColor: baseThemeVariables.primary,
+
+      chartInnerLineColor: baseThemeVariables.bg2,
+    },
+
+    echarts: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
+      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
+      tooltipBackgroundColor: baseThemeVariables.primary,
+      areaOpacity: '0.7',
+    },
+
+    chartjs: {
+      axisLineColor: baseThemeVariables.separator,
+      textColor: baseThemeVariables.fgText,
+    },
+
+    orders: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+
+      // first line
+      firstAreaGradFrom: baseThemeVariables.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
+      firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // second line
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+
+      secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
+      secondAreaGradTo: 'rgba(51, 102, 255, 0)',
+      secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // third line
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+
+      thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
+      thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
+      thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    profit: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
+      areaOpacity: '1',
+
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+
+      // first bar
+      firstLineGradFrom: baseThemeVariables.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
+      firstLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // second bar
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+      secondLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // third bar
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
+    },
+
+    orderProfitLegend: {
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      thirdItem: baseThemeVariables.bg3,
+    },
+
+    visitors: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'dotted',
+      lineWidth: '6',
+      lineGradFrom: '#ffffff',
+      lineGradTo: '#ffffff',
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,
+
+      innerLineStyle: 'solid',
+      innerLineWidth: '1',
+
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
+    },
+
+    visitorsLegend: {
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
+    },
+
+    visitorsPie: {
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+      firstPieRadius: ['70%', '90%'],
+
+      secondPieGradientLeft: baseThemeVariables.warning,
+      secondPieGradientRight: baseThemeVariables.warningLight,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+      secondPieRadius: ['60%', '97%'],
+      shadowOffsetX: '0',
+      shadowOffsetY: '0',
+    },
+
+    visitorsPieLegend: {
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
+    },
+
+    earningPie: {
+      radius: ['65%', '100%'],
+      center: ['50%', '50%'],
+
+      fontSize: '22',
+
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
+      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
+    },
+
+    earningLine: {
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+  },
+} as NbJSThemeOptions;
--- a/src/app/@theme/styles/theme.default.ts
+++ b/src/app/@theme/styles/theme.default.ts
@ -1,266 +1,273 @@
+import { NbJSThemeOptions, DEFAULT_THEME as baseTheme } from '@nebular/theme';
+
+const baseThemeVariables = baseTheme.variables;
+
 export const DEFAULT_THEME = {
  name: 'default',
-  base: null,
+  base: 'default',
  variables: {
-
-    // Safari fix
-    temperature: [
-      '#42db7d',
-      '#42db7d',
-      '#42db7d',
-      '#42db7d',
-      '#42db7d',
-    ],
+    temperature: {
+      arcFill: [
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+      ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: baseThemeVariables.primary,
+    },

    solar: {
-      gradientLeft: '#42db7d',
-      gradientRight: '#42db7d',
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
      shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
      radius: ['80%', '90%'],
    },

    traffic: {
-      colorBlack: '#000000',
-      tooltipBg: '#ffffff',
-      tooltipBorderColor: '#c0c8d1',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: 'bolder',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',

-      lineBg: '#c0c8d1',
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      lineBg: baseThemeVariables.border4,
      lineShadowBlur: '1',
-      itemColor: '#bcc3cc',
-      itemBorderColor: '#bcc3cc',
-      itemEmphasisBorderColor: '#42db7d',
+      itemColor: baseThemeVariables.border4,
+      itemBorderColor: baseThemeVariables.border4,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
      shadowLineShadow: 'rgba(0, 0, 0, 0)',
-      gradFrom: '#ebeef2',
-      gradTo: '#ebeef2',
+      gradFrom: baseThemeVariables.bg2,
+      gradTo: baseThemeVariables.bg2,
    },

    electricity: {
-      tooltipBg: '#ffffff',
-      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: baseThemeVariables.fgText,
      tooltipLineWidth: '0',
-      tooltipBorderColor: '#ebeef2',
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: 'bolder',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',

-      axisLineColor: 'rgba(0, 0, 0, 0)',
-      xAxisTextColor: '#2a2a2a',
-      yAxisSplitLine: '#ebeef2',
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,

-      itemBorderColor: '#42db7d',
+      itemBorderColor: baseThemeVariables.primary,
      lineStyle: 'solid',
      lineWidth: '4',
-      lineGradFrom: '#42db7d',
-      lineGradTo: '#42db7d',
+      lineGradFrom: baseThemeVariables.primary,
+      lineGradTo: baseThemeVariables.primary,
      lineShadow: 'rgba(0, 0, 0, 0)',

-      areaGradFrom: 'rgba(235, 238, 242, 0.5)',
-      areaGradTo: 'rgba(235, 238, 242, 0.5)',
+      areaGradFrom: baseThemeVariables.bg2,
+      areaGradTo: baseThemeVariables.bg2,
      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
    },

    bubbleMap: {
-      titleColor: '#484848',
-      areaColor: '#dddddd',
-      areaHoverColor: '#cccccc',
-      areaBorderColor: '#ebeef2',
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
    },

    profitBarAnimationEchart: {
-      textColor: '#484848',
+      textColor: baseThemeVariables.fgText,

-      firstAnimationBarColor: '#3edd81',
-      secondAnimationBarColor: '#8d7fff',
+      firstAnimationBarColor: baseThemeVariables.primary,
+      secondAnimationBarColor: baseThemeVariables.success,

-      splitLineStyleOpacity: '0.06',
+      splitLineStyleOpacity: '1',
      splitLineStyleWidth: '1',
-      splitLineStyleColor: '#000000',
+      splitLineStyleColor: baseThemeVariables.separator,

-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: 'bolder',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
      tooltipFontSize: '16',
-      tooltipBg: '#ffffff',
-      tooltipBorderColor: '#c0c8d1',
-      tooltipBorderWidth: '3',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
    },

    trafficBarEchart: {
-      gradientFrom: '#fc0',
-      gradientTo: '#ffa100',
-      shadow: '#ffb600',
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
      shadowBlur: '0',

-      axisTextColor: '#b2bac2',
+      axisTextColor: baseThemeVariables.fgText,
      axisFontSize: '12',

-      tooltipBg: '#ffffff',
-      tooltipBorderColor: '#c0c8d1',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: 'bolder',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
    },

    countryOrders: {
-      countryBorderColor: 'rgba(255, 255, 255, 1)',
-      countryFillColor: 'rgba(236, 242, 245, 1)',
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg3,
      countryBorderWidth: '1',
-      hoveredCountryBorderColor: '#40dc7e',
-      hoveredCountryFillColor: '#c7f4d9',
-      hoveredCountryBorderWidth: '3',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
+      hoveredCountryBorderWidth: '1',

-      chartAxisLineColor: 'rgba(0, 0, 0, 0)',
-      chartAxisTextColor: '#b2bac2',
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
      chartAxisFontSize: '16',
-      chartGradientTo: '#3edd81',
-      chartGradientFrom: '#3bddaf',
-      chartAxisSplitLine: '#ebeef2',
-      chartShadowLineColor: '#2f296b',
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,

-      chartLineBottomShadowColor: '#eceff4',
+      chartLineBottomShadowColor: baseThemeVariables.primary,

-      chartInnerLineColor: '#eceff4',
+      chartInnerLineColor: baseThemeVariables.bg2,
    },

    echarts: {
-      bg: '#ffffff',
-      textColor: '#484848',
-      axisLineColor: '#bbbbbb',
-      splitLineColor: '#ebeef2',
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
-      tooltipBackgroundColor: '#6a7985',
+      tooltipBackgroundColor: baseThemeVariables.primary,
      areaOpacity: '0.7',
    },

    chartjs: {
-      axisLineColor: '#cccccc',
-      textColor: '#484848',
+      axisLineColor: baseThemeVariables.separator,
+      textColor: baseThemeVariables.fgText,
    },

    orders: {
-      tooltipBg: '#ffffff',
+      tooltipBg: baseThemeVariables.bg,
      tooltipLineColor: 'rgba(0, 0, 0, 0)',
      tooltipLineWidth: '0',
-      tooltipBorderColor: '#ebeef2',
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: 'bolder',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
      tooltipFontSize: '20',

-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: baseThemeVariables.border4,
      axisFontSize: '16',
-      axisTextColor: '#b2bac2',
-      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,

-      itemBorderColor: '#42db7d',
+      itemBorderColor: baseThemeVariables.primary,
      lineStyle: 'solid',
      lineWidth: '4',

      // first line
-      firstAreaGradFrom: 'rgba(236, 242, 245, 0.8)',
-      firstAreaGradTo: 'rgba(236, 242, 245, 0.8)',
+      firstAreaGradFrom: baseThemeVariables.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
      firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',

      // second line
-      secondLineGradFrom: 'rgba(164, 123, 255, 1)',
-      secondLineGradTo: 'rgba(164, 123, 255, 1)',
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,

-      secondAreaGradFrom: 'rgba(188, 92, 255, 0.2)',
-      secondAreaGradTo: 'rgba(188, 92, 255, 0)',
+      secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
+      secondAreaGradTo: 'rgba(51, 102, 255, 0)',
      secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',

      // third line
-      thirdLineGradFrom: 'rgba(55, 220, 136, 1)',
-      thirdLineGradTo: 'rgba(55, 220, 136, 1)',
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,

-      thirdAreaGradFrom: 'rgba(31 ,106, 124, 0.2)',
-      thirdAreaGradTo: 'rgba(4, 126, 230, 0)',
+      thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
+      thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
      thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
    },

-    // TODO: need design for default theme
    profit: {
-      bg: '#ffffff',
-      textColor: '#ffffff',
-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
-      splitLineColor: 'rgba(161, 161 ,229, 0.2)',
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
      areaOpacity: '1',

      axisFontSize: '16',
-      axisTextColor: '#b2bac2',
+      axisTextColor: baseThemeVariables.fg,

      // first bar
-      firstLineGradFrom: '#00bece',
-      firstLineGradTo: '#00da78',
-      firstLineShadow: 'rgba(14, 16, 48, 0.4)',
+      firstLineGradFrom: baseThemeVariables.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
+      firstLineShadow: 'rgba(0, 0, 0, 0)',

      // second bar
-      secondLineGradFrom: '#8069ff',
-      secondLineGradTo: '#8357ff',
-      secondLineShadow: 'rgba(14, 16, 48, 0.4)',
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+      secondLineShadow: 'rgba(0, 0, 0, 0)',

      // third bar
-      thirdLineGradFrom: 'rgba(236, 242, 245, 0.8)',
-      thirdLineGradTo: 'rgba(236, 242, 245, 0.8)',
-      thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
    },

    orderProfitLegend: {
-      firstItem: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)',
-      secondItem: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)',
-      thirdItem: 'rgba(236, 242, 245, 0.8)',
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      thirdItem: baseThemeVariables.bg3,
    },

    visitors: {
-      tooltipBg: '#ffffff',
+      tooltipBg: baseThemeVariables.bg,
      tooltipLineColor: 'rgba(0, 0, 0, 0)',
-      tooltipLineWidth: '0',
-      tooltipBorderColor: '#ebeef2',
+      tooltipLineWidth: '1',
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: 'bolder',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
      tooltipFontSize: '20',

-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: baseThemeVariables.border4,
      axisFontSize: '16',
-      axisTextColor: '#b2bac2',
-      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,

-      itemBorderColor: '#42db7d',
+      itemBorderColor: baseThemeVariables.primary,
      lineStyle: 'dotted',
      lineWidth: '6',
      lineGradFrom: '#ffffff',
      lineGradTo: '#ffffff',
-      lineShadow: 'rgba(14, 16, 48, 0)',
+      lineShadow: 'rgba(0, 0, 0, 0)',

-      areaGradFrom: 'rgba(188, 92, 255, 1)',
-      areaGradTo: 'rgba(188, 92, 255, 0.5)',
-      shadowLineDarkBg: '#a695ff',
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,

      innerLineStyle: 'solid',
      innerLineWidth: '1',

-      innerAreaGradFrom: 'rgba(60, 221, 156, 1)',
-      innerAreaGradTo: 'rgba(60, 221, 156, 1)',
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
    },

    visitorsLegend: {
-      firstIcon: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)',
-      secondIcon: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)',
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
    },

    visitorsPie: {
-      firstPieGradientLeft: '#8defbb',
-      firstPieGradientRight: '#8defbb',
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
      firstPieRadius: ['70%', '90%'],

-      secondPieGradientLeft: '#ff894a',
-      secondPieGradientRight: '#ffcc10',
+      secondPieGradientLeft: baseThemeVariables.warning,
+      secondPieGradientRight: baseThemeVariables.warningLight,
      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
      secondPieRadius: ['60%', '97%'],
      shadowOffsetX: '0',
@ -268,8 +275,8 @@ export const DEFAULT_THEME = {
    },

    visitorsPieLegend: {
-      firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)',
-      secondSection: '#8defbb',
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
    },

    earningPie: {
@ -278,30 +285,30 @@ export const DEFAULT_THEME = {

      fontSize: '22',

-      firstPieGradientLeft: '#00d77f',
-      firstPieGradientRight: '#00d77f',
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
      firstPieShadowColor: 'rgba(0, 0, 0, 0)',

-      secondPieGradientLeft: '#7756f7',
-      secondPieGradientRight: '#7756f7',
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
      secondPieShadowColor: 'rgba(0, 0, 0, 0)',

-      thirdPieGradientLeft: '#ffca00',
-      thirdPieGradientRight: '#ffca00',
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
    },

    earningLine: {
-      gradFrom: 'rgba(188, 92, 255, 0.5)',
-      gradTo: 'rgba(188, 92, 255, 0.5)',
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,

-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: 'bolder',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
      tooltipFontSize: '16',
-      tooltipBg: '#ffffff',
-      tooltipBorderColor: '#c0c8d1',
-      tooltipBorderWidth: '3',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
    },
  },
-};
+} as NbJSThemeOptions;
--- a/src/app/@theme/styles/themes.scss
+++ b/src/app/@theme/styles/themes.scss
@ -1,97 +1,88 @@
 // @nebular theming framework
-@import '~@nebular/theme/styles/theming';
+@import '@nebular/theme/styles/theming';
 // @nebular out of the box themes
-@import '~@nebular/theme/styles/themes';
-
-// which themes you what to enable (empty to enable all)
-$nb-enabled-themes: (default, cosmic, corporate);
+@import '@nebular/theme/styles/themes';

 $nb-themes: nb-register-theme((
- // app wise variables for each theme
-  sidebar-header-gap: 2rem,
-  sidebar-header-height: initial,
-  layout-content-width: 1400px,
+  layout-padding-top: 2.25rem,

-  font-main: Roboto,
-  font-secondary: Exo,
+  menu-item-icon-margin: 0 0.5rem 0 0,

-  switcher-background: #ebeff5,
-  switcher-background-percentage: 50%,
-  drops-icon-line-gadient: -webkit-linear-gradient(#01dbb5, #0bbb79),
+  card-height-tiny: 13.5rem,
+  card-height-small: 21.1875rem,
+  card-height-medium: 28.875rem,
+  card-height-large: 36.5625rem,
+  card-height-giant: 44.25rem,
+  card-margin-bottom: 1.875rem,
+  card-header-with-select-padding-top: 0.5rem,
+  card-header-with-select-padding-bottom: 0.5rem,

-  list-item-border-width: 1px,
+  select-min-width: 6rem,

-  slide-out-container-width: 30%,
-  slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
-  slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
-  slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
-
-  chart-panel-summary-box-shadow: none,
-  chart-panel-summary-background-color: #ecf2f5,
-  chart-panel-summary-border-color: #ebeff1,
-  chart-panel-summary-border-width: 1px,
-
-  ecommerce-card-border-width: 1px,
-
-  progress-bar-background: linear-gradient(90deg, #3edd81 0%, #3bddaf 100%),
+  slide-out-background: #f7f9fc,
+  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
 ), default, default);

 $nb-themes: nb-register-theme((
-  // app wise variables for each theme
-  sidebar-header-gap: 2rem,
-  sidebar-header-height: initial,
-  layout-content-width: 1400px,
+  layout-padding-top: 2.25rem,

-  font-main: Roboto,
-  font-secondary: Exo,
+  menu-item-icon-margin: 0 0.5rem 0 0,

-  switcher-background: #4e41a5,
-  switcher-background-percentage: 14%,
-  drops-icon-line-gadient: -webkit-linear-gradient(#a258fe, #7958fa),
+  card-height-tiny: 13.5rem,
+  card-height-small: 21.1875rem,
+  card-height-medium: 28.875rem,
+  card-height-large: 36.5625rem,
+  card-height-giant: 44.25rem,
+  card-margin-bottom: 1.875rem,
+  card-header-with-select-padding-top: 0.5rem,
+  card-header-with-select-padding-bottom: 0.5rem,

-  list-item-border-width: 1px,
+  select-min-width: 6rem,

-  slide-out-container-width: 30%,
-  slide-out-background: radial-gradient(circle, #302c6e 0%, #423f8c 100%),
-  slide-out-shadow-color: 2px 0 3px rgba(19, 19, 94, 0.9),
-  slide-out-shadow-color-rtl: -2px 0 3px rgba(19, 19, 94, 0.9),
-
-  chart-panel-summary-box-shadow: none,
-  chart-panel-summary-background-color: rgba(0, 0, 0, 0.1),
-  chart-panel-summary-border-color: #332e73,
-  chart-panel-summary-border-width: 1px,
-
-  ecommerce-card-border-width: 1px,
-
-  progress-bar-background: linear-gradient(90deg, #00c7c7 0%, #00d977 100%),
+  slide-out-background: #252547,
+  slide-out-shadow-color: 2px 0 3px #29157a,
+  slide-out-shadow-color-rtl: -2px 0 3px #29157a,
 ), cosmic, cosmic);

 $nb-themes: nb-register-theme((
-  // app wise variables for each theme
-  sidebar-header-gap: 2rem,
-  sidebar-header-height: initial,
-  layout-content-width: 1400px,
+  layout-padding-top: 2.25rem,

-  font-main: Roboto,
-  font-secondary: Exo,
+  menu-item-icon-margin: 0 0.5rem 0 0,

-  switcher-background: #2b2d34,
-  switcher-background-percentage: 14%,
-  drops-icon-line-gadient: -webkit-linear-gradient(#e9e8eb, #a7a2be),
+  card-height-tiny: 13.5rem,
+  card-height-small: 21.1875rem,
+  card-height-medium: 28.875rem,
+  card-height-large: 36.5625rem,
+  card-height-giant: 44.25rem,
+  card-margin-bottom: 1.875rem,
+  card-header-with-select-padding-top: 0.5rem,
+  card-header-with-select-padding-bottom: 0.5rem,

-  list-item-border-width: 1px,
+  select-min-width: 6rem,

-  slide-out-container-width: 30%,
-  slide-out-background: 	linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
-  slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
-  slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
-
-  chart-panel-summary-box-shadow: none,
-  chart-panel-summary-background-color: #f7fafb,
-  chart-panel-summary-border-color: #ebeff1,
-  chart-panel-summary-border-width: 1px,
-
-  ecommerce-card-border-width: 1px,
-
-  progress-bar-background: linear-gradient(90deg, #ff9f6f 0%, #ff8b97 100%),
+  slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
 ), corporate, corporate);
+
+$nb-themes: nb-register-theme((
+  layout-padding-top: 2.25rem,
+
+  menu-item-icon-margin: 0 0.5rem 0 0,
+
+  card-height-tiny: 13.5rem,
+  card-height-small: 21.1875rem,
+  card-height-medium: 28.875rem,
+  card-height-large: 36.5625rem,
+  card-height-giant: 44.25rem,
+  card-margin-bottom: 1.875rem,
+  card-header-with-select-padding-top: 0.5rem,
+  card-header-with-select-padding-bottom: 0.5rem,
+
+  select-min-width: 6rem,
+
+  slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
+), dark, dark);
--- a/src/app/@theme/theme.module.ts
+++ b/src/app/@theme/theme.module.ts
@ -1,56 +1,26 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-
 import {
  NbActionsModule,
-  NbCardModule,
  NbLayoutModule,
  NbMenuModule,
-  NbRouteTabsetModule,
  NbSearchModule,
  NbSidebarModule,
-  NbTabsetModule,
-  NbThemeModule,
  NbUserModule,
-  NbCheckboxModule,
-  NbPopoverModule,
  NbContextMenuModule,
-  NbProgressBarModule,
-  NbCalendarModule,
-  NbCalendarRangeModule,
-  NbStepperModule,
  NbButtonModule,
-  NbInputModule,
-  NbAccordionModule,
-  NbDatepickerModule,
-  NbDialogModule,
-  NbWindowModule,
-  NbListModule,
-  NbToastrModule,
-  NbAlertModule,
-  NbSpinnerModule,
-  NbRadioModule,
  NbSelectModule,
-  NbChatModule,
-  NbTooltipModule,
-  NbCalendarKitModule,
+  NbIconModule,
+  NbThemeModule,
 } from '@nebular/theme';
-
+import { NbEvaIconsModule } from '@nebular/eva-icons';
 import { NbSecurityModule } from '@nebular/security';

 import {
  FooterComponent,
  HeaderComponent,
  SearchInputComponent,
-  ThemeSettingsComponent,
-  SwitcherComponent,
-  LayoutDirectionSwitcherComponent,
-  ThemeSwitcherComponent,
  TinyMCEComponent,
-  ThemeSwitcherListComponent,
-  ToggleSettingsButtonComponent,
 } from './components';
 import {
  CapitalizePipe,
@ -58,115 +28,65 @@ import {
  RoundPipe,
  TimingPipe,
  NumberWithCommasPipe,
-  EvaIconsPipe,
 } from './pipes';
 import {
  OneColumnLayoutComponent,
-  SampleLayoutComponent,
  ThreeColumnsLayoutComponent,
  TwoColumnsLayoutComponent,
 } from './layouts';
 import { DEFAULT_THEME } from './styles/theme.default';
 import { COSMIC_THEME } from './styles/theme.cosmic';
 import { CORPORATE_THEME } from './styles/theme.corporate';
-
-const BASE_MODULES = [CommonModule, FormsModule, ReactiveFormsModule];
+import { DARK_THEME } from './styles/theme.dark';

 const NB_MODULES = [
-  NbCardModule,
  NbLayoutModule,
-  NbTabsetModule,
-  NbRouteTabsetModule,
  NbMenuModule,
  NbUserModule,
  NbActionsModule,
  NbSearchModule,
  NbSidebarModule,
-  NbCheckboxModule,
-  NbPopoverModule,
  NbContextMenuModule,
-  NgbModule,
-  NbSecurityModule, // *nbIsGranted directive,
-  NbProgressBarModule,
-  NbCalendarModule,
-  NbCalendarRangeModule,
-  NbStepperModule,
+  NbSecurityModule,
  NbButtonModule,
-  NbListModule,
-  NbToastrModule,
-  NbInputModule,
-  NbAccordionModule,
-  NbDatepickerModule,
-  NbDialogModule,
-  NbWindowModule,
-  NbAlertModule,
-  NbSpinnerModule,
-  NbRadioModule,
  NbSelectModule,
-  NbChatModule,
-  NbTooltipModule,
-  NbCalendarKitModule,
+  NbIconModule,
+  NbEvaIconsModule,
 ];
-
 const COMPONENTS = [
-  SwitcherComponent,
-  LayoutDirectionSwitcherComponent,
-  ThemeSwitcherComponent,
-  ThemeSwitcherListComponent,
  HeaderComponent,
  FooterComponent,
  SearchInputComponent,
-  ThemeSettingsComponent,
  TinyMCEComponent,
  OneColumnLayoutComponent,
-  SampleLayoutComponent,
  ThreeColumnsLayoutComponent,
  TwoColumnsLayoutComponent,
-  ToggleSettingsButtonComponent,
 ];
-
-const ENTRY_COMPONENTS = [
-  ThemeSwitcherListComponent,
-];
-
 const PIPES = [
  CapitalizePipe,
  PluralPipe,
  RoundPipe,
  TimingPipe,
  NumberWithCommasPipe,
-  EvaIconsPipe,
-];
-
-const NB_THEME_PROVIDERS = [
-  ...NbThemeModule.forRoot(
-    {
-      name: 'cosmic',
-    },
-    [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME ],
-  ).providers,
-  ...NbSidebarModule.forRoot().providers,
-  ...NbMenuModule.forRoot().providers,
-  ...NbDatepickerModule.forRoot().providers,
-  ...NbDialogModule.forRoot().providers,
-  ...NbWindowModule.forRoot().providers,
-  ...NbToastrModule.forRoot().providers,
-  ...NbChatModule.forRoot({
-    messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
-  }).providers,
 ];

@NgModule({
-  imports: [...BASE_MODULES, ...NB_MODULES],
-  exports: [...BASE_MODULES, ...NB_MODULES, ...COMPONENTS, ...PIPES],
+  imports: [CommonModule, ...NB_MODULES],
+  exports: [CommonModule, ...PIPES, ...COMPONENTS],
  declarations: [...COMPONENTS, ...PIPES],
-  entryComponents: [...ENTRY_COMPONENTS],
 })
 export class ThemeModule {
-  static forRoot(): ModuleWithProviders {
-    return <ModuleWithProviders>{
+  static forRoot(): ModuleWithProviders<ThemeModule> {
+    return {
      ngModule: ThemeModule,
-      providers: [...NB_THEME_PROVIDERS],
+      providers: [
+        ...NbThemeModule.forRoot(
+          {
+            name: 'default',
+          },
+          [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ],
+        ).providers,
+      ],
    };
  }
 }
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@ -9,8 +9,12 @@ import {
  NbResetPasswordComponent,
 } from '@nebular/auth';

-const routes: Routes = [
-  { path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule' },
+export const routes: Routes = [
+  {
+    path: 'pages',
+    loadChildren: () => import('./pages/pages.module')
+      .then(m => m.PagesModule),
+  },
  {
    path: 'auth',
    component: NbAuthComponent,
@ -46,7 +50,7 @@ const routes: Routes = [
 ];

 const config: ExtraOptions = {
-  useHash: true,
+  useHash: false,
 };

@NgModule({
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -5,6 +5,7 @@
 */
 import { Component, OnInit } from '@angular/core';
 import { AnalyticsService } from './@core/utils/analytics.service';
+import { SeoService } from './@core/utils/seo.service';

@Component({
  selector: 'ngx-app',
@ -12,10 +13,11 @@ import { AnalyticsService } from './@core/utils/analytics.service';
 })
 export class AppComponent implements OnInit {

-  constructor(private analytics: AnalyticsService) {
+  constructor(private analytics: AnalyticsService, private seoService: SeoService) {
  }

  ngOnInit(): void {
    this.analytics.trackPageViews();
+    this.seoService.trackCanonicalChanges();
  }
 }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -3,17 +3,23 @@
 * Copyright Akveo. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */
-import { APP_BASE_HREF } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { CoreModule } from './@core/core.module';
-
+import { ThemeModule } from './@theme/theme.module';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
-import { ThemeModule } from './@theme/theme.module';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import {
+  NbChatModule,
+  NbDatepickerModule,
+  NbDialogModule,
+  NbMenuModule,
+  NbSidebarModule,
+  NbToastrModule,
+  NbWindowModule,
+} from '@nebular/theme';

@NgModule({
  declarations: [AppComponent],
@ -22,15 +28,19 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
-
-    NgbModule.forRoot(),
-    ThemeModule.forRoot(),
+    NbSidebarModule.forRoot(),
+    NbMenuModule.forRoot(),
+    NbDatepickerModule.forRoot(),
+    NbDialogModule.forRoot(),
+    NbWindowModule.forRoot(),
+    NbToastrModule.forRoot(),
+    NbChatModule.forRoot({
+      messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
+    }),
    CoreModule.forRoot(),
+    ThemeModule.forRoot(),
  ],
  bootstrap: [AppComponent],
-  providers: [
-    { provide: APP_BASE_HREF, useValue: '/' },
-  ],
 })
 export class AppModule {
 }
--- a/src/app/pages/bootstrap/bootstrap-routing.module.ts
+++ b/src/app/pages/bootstrap/bootstrap-routing.module.ts
@ -1,33 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { BootstrapComponent } from './bootstrap.component';
-import { ModalsComponent } from './modals/modals.component';
-import { ButtonsComponent } from './buttons/buttons.component';
-import { FormInputsComponent } from './form-inputs/form-inputs.component';
-
-
-const routes: Routes = [{
-  path: '',
-  component: BootstrapComponent,
-  children: [
-    {
-      path: 'inputs',
-      component: FormInputsComponent,
-    },
-    {
-      path: 'buttons',
-      component: ButtonsComponent,
-    },
-    {
-      path: 'modal',
-      component: ModalsComponent,
-    },
-  ],
-}];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class BootstrapRoutingModule { }
--- a/src/app/pages/bootstrap/bootstrap.module.ts
+++ b/src/app/pages/bootstrap/bootstrap.module.ts
@ -1,36 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { ThemeModule } from '../../@theme/theme.module';
-
-import { BootstrapRoutingModule } from './bootstrap-routing.module';
-import { ModalsComponent } from './modals/modals.component';
-import { ModalComponent } from './modals/modal/modal.component';
-import { BootstrapComponent } from './bootstrap.component';
-import { ButtonsModule } from './buttons/buttons.module';
-import { FormInputsComponent } from './form-inputs/form-inputs.component';
-
-const COMPONENTS = [
-  BootstrapComponent,
-  ModalsComponent,
-  ModalComponent,
-  FormInputsComponent,
-];
-
-const ENTRY_COMPONENTS = [
-  ModalComponent,
-];
-
-@NgModule({
-  imports: [
-    ThemeModule,
-    BootstrapRoutingModule,
-    ButtonsModule,
-  ],
-  declarations: [
-    ...COMPONENTS,
-  ],
-  entryComponents: [
-    ...ENTRY_COMPONENTS,
-  ],
-})
-export class BootstrapModule { }
--- a/src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.html
+++ b/src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.html
@ -1,16 +0,0 @@
-<nb-card>
-  <nb-card-header>Block Level Buttons</nb-card-header>
-  <nb-card-body>
-    <div class="row block-level-buttons">
-      <div class="col-md-12">
-        <div class="btn-group btn-group-full-width" role="group">
-          <button type="button" class="btn btn-primary btn-group-icon btn-group-divider btn-fixed">
-            <i class="nb-home"></i>
-          </button>
-          <button type="button" class="btn btn-primary">Icon Block Button</button>
-        </div>
-        <button type="button" class="btn btn-outline-primary btn-block">Block Button</button>
-      </div>
-    </div>
-  </nb-card-body>
-</nb-card>
--- a/src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.ts
+++ b/src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.ts
@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-block-level-buttons',
-  templateUrl: './block-level-buttons.component.html',
-})
-export class BlockLevelButtonsComponent {
-}
--- a/src/app/pages/bootstrap/buttons/button-groups/button-groups.component.html
+++ b/src/app/pages/bootstrap/buttons/button-groups/button-groups.component.html
@ -1,144 +0,0 @@
-<nb-card>
-  <nb-card-header>Button Groups</nb-card-header>
-  <nb-card-body>
-    <div class="row">
-      <div class="col-md-12">
-        <div class="example-container toggle-types">
-          <div class="container-title">Toggle Types</div>
-          <div [(ngModel)]="radioModel" ngbRadioGroup
-               class="btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
-            <label ngbButtonLabel class="btn btn-outline-primary">
-              <input ngbButton type="radio" value="left"> Left
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-primary">
-              <input ngbButton type="radio" value="middle"> Middle
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-primary">
-              <input ngbButton type="radio" value="right"> Right
-            </label>
-          </div>
-          <div class="btn-group btn-group-toggle btn-group-full-width" data-toggle="buttons">
-            <label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.left">
-              <input ngbButton type="checkbox" [(ngModel)]="checkboxModel.left"> Left
-            </label>
-            <label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.middle">
-              <input ngbButton type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
-            </label>
-            <label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.right">
-              <input ngbButton type="checkbox" [(ngModel)]="checkboxModel.right"> Right
-            </label>
-          </div>
-        </div>
-        <div class="example-container toolbars-container">
-          <div class="pagination-container">
-            <div class="container-title">Pagination</div>
-            <div class="btn-group btn-group-toggle btn-outline-toggle-group" data-toggle="buttons"
-                 [(ngModel)]="paginationModel" ngbRadioGroup>
-              <label ngbButtonLabel class="btn btn-outline-success">
-                <input ngbButton type="radio" [value]="1"> 1
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-success">
-                <input ngbButton type="radio" [value]="2"> 2
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-success">
-                <input ngbButton type="radio" [value]="3"> 3
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-success">
-                <input ngbButton type="radio" [value]="4"> 4
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-success">
-                <input ngbButton type="radio" [value]="5"> 5
-              </label>
-            </div>
-          </div>
-
-          <div class="icon-toolbar-container">
-            <div class="container-title">Icon Toolbar</div>
-            <div class="btn-group btn-group-toggle" data-toggle="buttons">
-              <label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.one">
-                <input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
-              </label>
-              <label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.two">
-                <input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
-              </label>
-              <label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.three">
-                <input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
-              </label>
-              <label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.four">
-                <input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
-              </label>
-              <label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.five">
-                <input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
-              </label>
-            </div>
-          </div>
-        </div>
-        <div class="example-container">
-          <div class="container-title divided-button-group">Divided Button Group</div>
-          <div class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width btn-divided-checkbox-group "
-            data-toggle="buttons">
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i
-              class="nb-arrow-thin-down"></i>
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"> <i
-              class="nb-arrow-thin-up"></i>
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="nb-arrow-thin-left"></i>
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"> <i
-              class="nb-arrow-thin-right"></i>
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="nb-arrow-left"></i>
-            </label>
-            <label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"> <i
-              class="nb-arrow-right"></i>
-            </label>
-          </div>
-        </div>
-        <div class="example-container">
-          <div class="container-title">Divided Button Group</div>
-          <div class="row">
-            <div [(ngModel)]="dividedButtonGroupOne" ngbRadioGroup
-                 class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width col-md-12">
-              <label ngbButtonLabel class="btn btn-outline-primary">
-                <input ngbButton type="radio" value="left"> Left
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-primary">
-                <input ngbButton type="radio" value="middle"> Middle
-              </label>
-              <label ngbButtonLabel class="btn btn-outline-primary">
-                <input ngbButton type="radio" value="right"> Right
-              </label>
-            </div>
-          </div>
-          <div class="btn-group btn-group-toggle btn-divided-group btn-group-full-width" data-toggle="buttons">
-            <label ngbButtonLabel
-                   class="btn btn-primary"
-                   [class.active]="dividedButtonGroupTwo.left"
-                   [class.focus]="dividedButtonGroupTwo.left">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.left"> Left
-            </label>
-            <label ngbButtonLabel
-                   class="btn btn-primary"
-                   [class.active]="dividedButtonGroupTwo.middle"
-                   [class.focus]="dividedButtonGroupTwo.middle">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.middle"> Middle
-            </label>
-            <label ngbButtonLabel
-                   class="btn btn-primary"
-                   [class.active]="dividedButtonGroupTwo.right"
-                   [class.focus]="dividedButtonGroupTwo.right">
-              <input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.right"> Right
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-  </nb-card-body>
-</nb-card>
--- a/src/app/pages/bootstrap/buttons/button-groups/button-groups.component.scss
+++ b/src/app/pages/bootstrap/buttons/button-groups/button-groups.component.scss
@ -1,67 +0,0 @@
-@import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-
-  .toolbars-container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .pagination-container {
-    @include nb-ltr(margin-right, 1rem);
-    @include nb-rtl(margin-left, 1rem);
-
-    .btn-group > .btn {
-      padding-left: 1.125rem;
-      padding-right: 1.125rem;
-    }
-  }
-
-  .icon-toolbar-container {
-    .btn-group > .btn {
-      padding-left: 1.125rem;
-      padding-right: 1.125rem;
-    }
-  }
-
-  .toggle-types {
-    .btn-toggle-radio-group {
-      margin-bottom: 1rem;
-    }
-  }
-
-  .divided-button-group {
-    .btn-divided-checkbox-group {
-      margin-bottom: 1rem;
-      flex-wrap: wrap;
-    }
-  }
-
-  .example-container:not(:last-child) {
-    margin-bottom: 1.5rem;
-  }
-
-  .example-container > div {
-    &:not(:last-child) {
-      margin-bottom: 1rem;
-    }
-  }
-
-  .example-container > .btn-divided-checkbox-group {
-    flex-wrap: wrap;
-
-    > label {
-      flex-basis: 10%;
-      @include nb-ltr(margin, 0 0.25rem 0.5rem 0);
-      @include nb-rtl(margin, 0 0 0.5rem 0.25rem);
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-    .btn {
-      padding: 0.75rem 0.7rem;
-    }
-  }
-}
--- a/src/app/pages/bootstrap/buttons/button-groups/button-groups.component.ts
+++ b/src/app/pages/bootstrap/buttons/button-groups/button-groups.component.ts
@ -1,44 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-button-groups',
-  styleUrls: ['./button-groups.component.scss'],
-  templateUrl: './button-groups.component.html',
-})
-export class ButtonGroupsComponent {
-
-  radioModel = 'left';
-
-  checkboxModel = {
-    left: false,
-    middle: false,
-    right: false,
-  };
-
-  dividedCheckboxModel = {
-    monday: true,
-    tuesday: true,
-    wednesday: false,
-    thursday: false,
-    friday: false,
-    saturday: false,
-  };
-
-  paginationModel = 1;
-
-  iconToolbarModel = {
-    one: false,
-    two: false,
-    three: true,
-    four: false,
-    five: false,
-  };
-
-  dividedButtonGroupOne = 'left';
-
-  dividedButtonGroupTwo = {
-    left: false,
-    middle: false,
-    right: false,
-  };
-}
--- a/src/app/pages/bootstrap/buttons/buttons.component.html
+++ b/src/app/pages/bootstrap/buttons/buttons.component.html
@ -1,23 +0,0 @@
-<div class="row">
-  <div class="col-lg-12">
-    <ngx-hero-buttons></ngx-hero-buttons>
-  </div>
-  <div class="col-md-12 col-lg-12 col-xxxl-6">
-    <ngx-shape-buttons></ngx-shape-buttons>
-
-    <div class="row">
-      <div class="col-lg-5">
-        <ngx-dropdown-buttons></ngx-dropdown-buttons>
-        <ngx-icon-buttons></ngx-icon-buttons>
-      </div>
-      <div class="col-lg-7">
-        <ngx-button-groups></ngx-button-groups>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-12 col-lg-12 col-xxxl-6">
-    <ngx-size-buttons></ngx-size-buttons>
-    <ngx-default-buttons></ngx-default-buttons>
-    <ngx-block-level-buttons></ngx-block-level-buttons>
-  </div>
-</div>
--- a/src/app/pages/bootstrap/buttons/buttons.component.scss
+++ b/src/app/pages/bootstrap/buttons/buttons.component.scss
@ -1,103 +0,0 @@
-@import '../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/buttons';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-  /deep/ {
-    $button-size: 50px;
-
-    .container-title {
-      color: nb-theme(color-fg);
-      font-family: nb-theme(font-secondary);
-      margin-bottom: 0.5rem;
-    }
-
-    .header {
-      color: nb-theme(color-fg-header);
-      font-size: 0.875rem;
-    }
-
-    .subheader {
-      font-size: 0.75rem;
-      font-weight: nb-theme(font-weight-light);
-      color: nb-theme(color-fg);
-    }
-
-    .btn-demo {
-      width: 180px;
-    }
-
-    .state-container {
-      display: flex;
-
-      &:not(:last-child) {
-        margin-bottom: 1rem;
-      }
-
-      .state-value {
-        width: $button-size;
-        height: $button-size;
-        border-radius: nb-theme(btn-border-radius);
-
-        @include nb-for-theme(corporate) {
-          border-radius: nb-theme(btn-semi-round-border-radius);
-        }
-      }
-
-      .state-details {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin-left: 1rem;
-        margin-right: 1rem;
-        height: $button-size;
-      }
-    }
-
-    .example-container {
-      @include nb-ltr(padding-right, 0);
-      @include nb-rtl(padding-left, 0);
-    }
-
-    .example-container .container-btn {
-      margin-bottom: 1.5rem;
-    }
-
-    .block-level-buttons .btn-group {
-      margin-bottom: 1rem;
-    }
-  }
-
-  @include media-breakpoint-down(is) {
-    ngx-default-buttons /deep/ nb-card-header {
-      flex-direction: column;
-      align-items: left;
-
-      span {
-        margin-bottom: 1rem;
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-
-    /deep/.icon-buttons .icon-button-examples {
-      button {
-        @include nb-ltr(margin-right, 1rem);
-        @include nb-rtl(margin-left, 1rem);
-      }
-    }
-
-    ngx-default-buttons /deep/ nb-card-header {
-      flex-direction: column;
-      margin-bottom: 0.5rem;
-    }
-
-    ngx-block-level-buttons /deep/ {
-      .btn-primary {
-        padding: 0.75rem 1rem;
-      }
-    }
-  }
-}
--- a/src/app/pages/bootstrap/buttons/buttons.component.ts
+++ b/src/app/pages/bootstrap/buttons/buttons.component.ts
@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-buttons',
-  styleUrls: ['./buttons.component.scss'],
-  templateUrl: './buttons.component.html',
-})
-export class ButtonsComponent {
-}
--- a/src/app/pages/bootstrap/buttons/buttons.module.ts
+++ b/src/app/pages/bootstrap/buttons/buttons.module.ts
@ -1,38 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { ThemeModule } from '../../../@theme/theme.module';
-import { DefaultButtonsComponent } from './default-buttons/default-buttons.component';
-import { HeroButtonComponent } from './hero-buttons/hero-buttons.component';
-import { ShapeButtonsComponent } from './shape-buttons/shape-buttons.component';
-import { SizeButtonsComponent } from './size-buttons/size-buttons.component';
-import { ButtonsComponent } from './buttons.component';
-import { DropdownButtonsComponent } from './dropdown-buttons/dropdown-button.component';
-import { BlockLevelButtonsComponent } from './block-level-buttons/block-level-buttons.component';
-import { ButtonGroupsComponent } from './button-groups/button-groups.component';
-import { IconButtonsComponent } from './icon-buttons/icon-buttons.component';
-
-const components = [
-  ButtonsComponent,
-  DefaultButtonsComponent,
-  HeroButtonComponent,
-  ShapeButtonsComponent,
-  SizeButtonsComponent,
-  DropdownButtonsComponent,
-  BlockLevelButtonsComponent,
-  ButtonGroupsComponent,
-  IconButtonsComponent,
-];
-
-@NgModule({
-  imports: [
-    ThemeModule,
-  ],
-  exports: [
-    ...components,
-  ],
-  declarations: [
-    ...components,
-  ],
-  providers: [],
-})
-export class ButtonsModule { }
--- a/src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.html
+++ b/src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.html
@ -1,48 +0,0 @@
-<nb-card>
-  <nb-card-header>
-    <span>Default Buttons</span>
-    <div class="dropdown" ngbDropdown>
-      <button class="btn btn-primary" type="button" ngbDropdownToggle>
-        {{ selectedView.title }}
-      </button>
-      <ul class="dropdown-menu" ngbDropdownMenu>
-        <li class="dropdown-item" *ngFor="let v of buttonsViews" (click)="this.selectedView = v">{{ v.title }}</li>
-      </ul>
-    </div>
-  </nb-card-header>
-  <nb-card-body>
-    <div class="row">
-      <div class="example-container col-md-4" *ngFor="let b of buttons[selectedView.key]">
-        <div class="container-title">
-          <span>{{ b.containerTitle }}</span>
-        </div>
-        <div class="container-btn">
-          <button class="btn {{ b.class }} btn-demo">{{ b.title }}</button>
-        </div>
-        <div class="{{ b.container }}">
-          <div class="state-container">
-            <div class="state-value original"></div>
-            <div class="state-details">
-              <span class="header">Default</span>
-              <span class="subheader">{{ b.default }}</span>
-            </div>
-          </div>
-          <div class="state-container">
-            <div class="state-value hover"></div>
-            <div class="state-details">
-              <span class="header">Hover</span>
-              <span class="subheader">14% white</span>
-            </div>
-          </div>
-          <div class="state-container">
-            <div class="state-value active"></div>
-            <div class="state-details">
-              <span class="header">Active</span>
-              <span class="subheader">14% black</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </nb-card-body>
-</nb-card>
--- a/src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.scss
+++ b/src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.scss
@ -1,126 +0,0 @@
-@import '../../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/buttons';
-
-@include nb-install-component() {
-
-  nb-card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .dropdown {
-      flex-basis: 30%;
-      min-width: 220px;
-    }
-  }
-
-  nb-card-body {
-    padding-bottom: 0;
-  }
-
-  .example-container {
-    margin-bottom: 1.5rem;
-  }
-
-  .primary-container {
-    .original {
-      background-color: nb-theme(btn-primary-bg);
-    }
-    .hover {
-      @include btn-primary-hover();
-    }
-    .active {
-      @include btn-primary-active();
-    }
-  }
-
-  .primary-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-primary-bg);
-  }
-
-  .success-container {
-    .original {
-      background-color: nb-theme(btn-success-bg);
-    }
-    .hover {
-      @include btn-success-hover();
-    }
-    .active {
-      @include btn-success-active();
-    }
-  }
-
-  .success-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-success-bg);
-  }
-
-  .warning-container {
-    .original {
-      background-color: nb-theme(btn-warning-bg);
-    }
-    .hover {
-      @include btn-warning-hover();
-    }
-    .active {
-      @include btn-warning-active();
-    }
-  }
-
-  .warning-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-warning-bg);
-  }
-
-  .info-container {
-    .original {
-      background-color: nb-theme(btn-info-bg);
-    }
-    .hover {
-      @include btn-info-hover();
-    }
-    .active {
-      @include btn-info-active();
-    }
-  }
-
-  .info-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-info-bg);
-  }
-
-  .danger-container {
-    .original {
-      background-color: nb-theme(btn-danger-bg);
-    }
-    .hover {
-      @include btn-danger-hover();
-    }
-    .active {
-      @include btn-danger-active();
-    }
-  }
-
-  .danger-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-danger-bg);
-  }
-
-  .secondary-container {
-    .original {
-      border: 2px solid nb-theme(btn-secondary-border);
-    }
-    .hover {
-      @include btn-secondary-hover();
-    }
-    .active {
-      @include btn-secondary-active();
-    }
-  }
-
-  .secondary-container.outline .original {
-    background-color: transparent;
-    border: 2px solid nb-theme(btn-secondary-border);
-  }
-}
--- a/src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.ts
+++ b/src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.ts
@ -1,101 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-default-buttons',
-  styleUrls: ['./default-buttons.component.scss'],
-  templateUrl: './default-buttons.component.html',
-})
-export class DefaultButtonsComponent {
-
-  buttonsViews = [{
-    title: 'Default Buttons',
-    key: 'default',
-  }, {
-    title: 'Outline Buttons',
-    key: 'outline',
-  }];
-
-  selectedView = this.buttonsViews[0];
-
-  buttons = {
-    'default': [
-      {
-        class: 'btn-primary',
-        container: 'primary-container',
-        containerTitle: 'Primary Button',
-        title: 'Primary',
-        default: '#7659ff',
-      }, {
-        class: 'btn-warning',
-        container: 'warning-container',
-        containerTitle: 'Warning Button',
-        title: 'Warning',
-        default: '#ffcb17',
-      }, {
-        class: 'btn-success',
-        container: 'success-container',
-        containerTitle: 'Success Button',
-        title: 'Success',
-        default: '#00d977',
-      }, {
-        class: 'btn-info',
-        container: 'info-container',
-        containerTitle: 'Info Button',
-        title: 'Info',
-        default: '#0088ff',
-      }, {
-        class: 'btn-danger',
-        container: 'danger-container',
-        containerTitle: 'Danger Button',
-        title: 'Danger',
-        default: '#ff386a',
-      }, {
-        class: 'btn-secondary',
-        container: 'secondary-container',
-        containerTitle: 'Default Button',
-        title: 'Default',
-        default: '#bdbaff',
-      },
-    ],
-
-    'outline': [
-      {
-        class: 'btn-outline-primary',
-        container: 'primary-container outline',
-        containerTitle: 'Primary Button',
-        title: 'Primary',
-        default: '#7659ff',
-      }, {
-        class: 'btn-outline-warning',
-        container: 'warning-container outline',
-        containerTitle: 'Warning Button',
-        title: 'Warning',
-        default: '#ffcb17',
-      }, {
-        class: 'btn-outline-success',
-        container: 'success-container outline',
-        containerTitle: 'Success Button',
-        title: 'Success',
-        default: '#00d977',
-      }, {
-        class: 'btn-outline-info',
-        container: 'info-container',
-        containerTitle: 'Info Button',
-        title: 'Info',
-        default: '#0088ff',
-      }, {
-        class: 'btn-outline-danger',
-        container: 'danger-container outline',
-        containerTitle: 'Danger Button',
-        title: 'Danger',
-        default: '#ff386a',
-      }, {
-        class: 'btn-outline-secondary',
-        container: 'secondary-container outline',
-        containerTitle: 'Default Button',
-        title: 'Default',
-        default: '#bdbaff',
-      },
-    ],
-  };
-}
--- a/src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.html
+++ b/src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.html
@ -1,44 +0,0 @@
-<nb-card>
-  <nb-card-header>Button Dropdowns</nb-card-header>
-  <nb-card-body>
-    <div class="dropdown btn-group" ngbDropdown>
-      <button type="button" class="btn btn-primary">Dropdown</button>
-      <button type="button" class="btn btn-primary" ngbDropdownToggle></button>
-      <ul class="dropdown-menu" ngbDropdownMenu>
-        <li class="dropdown-item">Icon Button</li>
-        <li class="dropdown-item">Hero Button</li>
-        <li class="dropdown-item">Default</li>
-      </ul>
-    </div>
-    <div class="dropdown" ngbDropdown>
-      <button class="btn btn-primary" type="button" ngbDropdownToggle>
-        Dropdown
-      </button>
-      <ul class="dropdown-menu" ngbDropdownMenu>
-        <li class="dropdown-item">Icon Button</li>
-        <li class="dropdown-item">Hero Button</li>
-        <li class="dropdown-item">Default</li>
-      </ul>
-    </div>
-    <div class="dropdown" placement="top" ngbDropdown>
-      <button class="btn btn-outline-primary" type="button" ngbDropdownToggle>
-        Dropup
-      </button>
-      <ul class="dropdown-menu" ngbDropdownMenu>
-        <li class="dropdown-item">Icon Button</li>
-        <li class="dropdown-item">Hero Button</li>
-        <li class="dropdown-item">Default</li>
-      </ul>
-    </div>
-    <div class="dropdown ghost-dropdown" ngbDropdown>
-      <button class="btn btn-primary" type="button" ngbDropdownToggle>
-        Dropdown
-      </button>
-      <ul class="dropdown-menu" ngbDropdownMenu>
-        <li class="dropdown-item">Icon Button</li>
-        <li class="dropdown-item">Hero Button</li>
-        <li class="dropdown-item">Default</li>
-      </ul>
-    </div>
-  </nb-card-body>
-</nb-card>
--- a/src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.scss
+++ b/src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.scss
@ -1,13 +0,0 @@
-@import '../../../../@theme/styles/themes';
-
-@include nb-install-component() {
-  text-align: center;
-
-  .dropdown, .dropup, .btn-group {
-    margin-bottom: 1rem;
-  }
-
-  nb-card-body {
-    overflow: visible;
-  }
-}
--- a/src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.ts
+++ b/src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.ts
@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-dropdown-buttons',
-  styleUrls: ['./dropdown-button.component.scss'],
-  templateUrl: './dropdown-button.component.html',
-})
-
-export class DropdownButtonsComponent {
-}
--- a/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.html
+++ b/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.html
@ -1,72 +0,0 @@
-<nb-card>
-  <nb-card-header>Hero Buttons</nb-card-header>
-  <nb-card-body>
-    <div class="row">
-      <div class="example-container col-sm-6 col-md-4 col-xl-3 col-xxxl-2" *ngFor="let hb of settings">
-        <div class="container-title">
-          <span>{{ hb.title }}</span>
-        </div>
-        <div class="container-btn">
-          <button class="btn {{ hb.class }} btn-demo">{{ hb.buttonTitle }}</button>
-        </div>
-        <div class="{{ hb.container }}">
-          <div class="state-container" *ngIf="hb[themeName].border">
-            <div class="state-value border"></div>
-            <div class="state-details">
-              <span class="header">Border</span>
-              <span class="subheader">{{ hb[themeName].border }}</span>
-            </div>
-          </div>
-          <div class="state-container" *ngIf="hb[themeName].color">
-            <div class="state-value color"></div>
-            <div class="state-details">
-              <span class="header">Color</span>
-              <span class="subheader">{{ hb[themeName].color }}</span>
-            </div>
-          </div>
-          <div class="state-container" *ngIf="hb[themeName].gradientLeft">
-            <div class="state-value gradient"></div>
-            <div class="state-details">
-              <span class="header">Linear Gradient</span>
-              <span class="subheader">{{ hb[themeName].gradientLeft }}</span>
-              <span class="subheader">{{ hb[themeName].gradientRight }}</span>
-            </div>
-          </div>
-          <div class="state-container">
-            <div class="state-value bevel" [ngClass]="{ 'none': !hb[themeName].bevel }"></div>
-            <div class="state-details" *ngIf="hb[themeName].bevel">
-              <span class="header">Bevel</span>
-              <span class="subheader">0 3px 0 0</span>
-              <span class="subheader">{{ hb[themeName].bevel }}</span>
-            </div>
-            <div class="state-details" *ngIf="!hb[themeName].bevel">
-              <span class="header">No Bevel</span>
-            </div>
-          </div>
-          <div class="state-container">
-            <div class="state-value shadow" [ngClass]="{ 'none': !hb[themeName].shadow }"></div>
-            <div class="state-details" *ngIf="hb[themeName].shadow">
-              <span class="header">Shadow</span>
-              <span class="subheader">0 4px 10px 0</span>
-              <span class="subheader">{{ hb[themeName].shadow }}</span>
-            </div>
-            <div class="state-details" *ngIf="!hb[themeName].shadow">
-              <span class="header">No Shadow</span>
-            </div>
-          </div>
-          <div class="state-container">
-            <div class="state-value glow" [ngClass]="{ 'none': !hb[themeName].glow }"></div>
-            <div class="state-details" *ngIf="hb[themeName].glow">
-              <span class="header">Glow</span>
-              <span class="subheader">{{ hb[themeName].glow.params }}</span>
-              <span class="subheader">{{ hb[themeName].glow.color }}</span>
-            </div>
-            <div class="state-details" *ngIf="!hb[themeName].glow">
-              <span class="header">No Glow</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </nb-card-body>
-</nb-card>
--- a/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.scss
+++ b/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.scss
@ -1,135 +0,0 @@
-@import '../../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/buttons';
-
-@include nb-install-component() {
-
-  nb-card-body {
-    padding-bottom: 0;
-  }
-
-  .none {
-    position: relative;
-    transform: rotate(45deg);
-
-    &::before, &::after {
-      position: absolute;
-      content: '';
-      background: nb-theme(form-control-border-color);
-    }
-
-    &::before {
-      left: 50%;
-      top: 10%;
-      transform: translateX(-50%);
-      width: 1px;
-      height: 80%;
-    }
-
-    &::after {
-      top: 50%;
-      left: 10%;
-      transform: translateY(-50%);
-      height: 1px;
-      width: 80%;
-    }
-  }
-
-  .shadow {
-    box-shadow: nb-theme(btn-hero-shadow);
-  }
-
-  .primary-container {
-    .color {
-      background-color: nb-theme(color-primary);
-    }
-    .gradient {
-      @include btn-hero-primary-gradient();
-    }
-    .glow {
-      box-shadow: btn-hero-primary-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-primary-bevel();
-    }
-  }
-
-  .warning-container {
-    .color {
-      background-color: nb-theme(color-warning);
-    }
-    .gradient {
-      @include btn-hero-warning-gradient();
-    }
-    .glow {
-      box-shadow: btn-hero-warning-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-warning-bevel();
-    }
-  }
-
-  .success-container {
-    .color {
-      background-color: nb-theme(color-success);
-    }
-    .gradient {
-      @include btn-hero-success-gradient();
-    }
-    .glow {
-      box-shadow: btn-hero-success-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-success-bevel();
-    }
-  }
-
-  .info-container {
-    .color {
-      background-color: nb-theme(color-info);
-    }
-    .gradient {
-      @include btn-hero-info-gradient();
-    }
-    .glow {
-      box-shadow: btn-hero-info-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-info-bevel();
-    }
-  }
-
-  .danger-container {
-    .color {
-      background-color: nb-theme(color-danger);
-    }
-    .gradient {
-      @include btn-hero-danger-gradient();
-    }
-    .glow {
-      box-shadow: btn-hero-danger-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-danger-bevel();
-    }
-  }
-
-  .secondary-container {
-    .color {
-      background-color: nb-theme(btn-secondary-bg);
-    }
-    .border {
-      color: nb-theme(btn-secondary-color);
-      border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border);
-    }
-    .glow {
-      box-shadow: btn-hero-secondary-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-secondary-bevel();
-    }
-  }
-
-  .example-container {
-    margin-bottom: 1.5rem;
-  }
-}
--- a/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.ts
+++ b/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.ts
@ -1,180 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { Subscription } from 'rxjs';
-
-@Component({
-  selector: 'ngx-hero-buttons',
-  styleUrls: ['./hero-buttons.component.scss'],
-  templateUrl: './hero-buttons.component.html',
-})
-export class HeroButtonComponent implements OnDestroy {
-
-  themeName = 'default';
-  settings: Array<any>;
-  themeSubscription: Subscription;
-
-  constructor(private themeService: NbThemeService) {
-    this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
-      this.themeName = theme.name;
-      this.init(theme.variables);
-    });
-  }
-
-  init(colors: any) {
-    this.settings = [{
-      class: 'btn-hero-primary',
-      container: 'primary-container',
-      title: 'Primary Button',
-      buttonTitle: 'Primary',
-      default: {
-        gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
-        gradientRight: colors.primary,
-      },
-      corporate: {
-        color: colors.primary,
-        glow: {
-          params: '0 0 20px 0',
-          color: 'rgba (115, 161, 255, 0.5)',
-        },
-      },
-      cosmic: {
-        gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
-        gradientRight: colors.primary,
-        bevel: `shade(${colors.primary}, 14%)`,
-        shadow: 'rgba (6, 7, 64, 0.5)',
-        glow: {
-          params: '0 2px 12px 0',
-          color: `adjust-hue(${colors.primary}, 10deg)`,
-        },
-      },
-    }, {
-      class: 'btn-hero-warning',
-      container: 'warning-container',
-      title: 'Warning Button',
-      buttonTitle: 'Warning',
-      default: {
-        gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
-        gradientRight: colors.warning,
-      },
-      corporate: {
-        color: colors.warning,
-        glow: {
-          params: '0 0 20px 0',
-          color: 'rgba (256, 163, 107, 0.5)',
-        },
-      },
-      cosmic: {
-        gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
-        gradientRight: colors.warning,
-        bevel: `shade(${colors.warning}, 14%)`,
-        shadow: 'rgba (33, 7, 77, 0.5)',
-        glow: {
-          params: '0 2px 12px 0',
-          color: `adjust-hue(${colors.warning}, 5deg)`,
-        },
-      },
-    }, {
-      class: 'btn-hero-success',
-      container: 'success-container',
-      title: 'Success Button',
-      buttonTitle: 'Success',
-      default: {
-        gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
-        gradientRight: colors.success,
-      },
-      corporate: {
-        color: colors.success,
-        glow: {
-          params: '0 0 20px 0',
-          color: 'rgba (93, 207, 227, 0.5)',
-        },
-      },
-      cosmic: {
-        gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
-        gradientRight: colors.success,
-        bevel: `shade(${colors.success}, 14%)`,
-        shadow: 'rgba (33, 7, 77, 0.5)',
-        glow: {
-          params: '0 2px 12px 0',
-          color: `adjust-hue(${colors.success}, 10deg)`,
-        },
-      },
-    }, {
-      class: 'btn-hero-info',
-      container: 'info-container',
-      title: 'Info Button',
-      buttonTitle: 'Info',
-      default: {
-        gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
-        gradientRight: colors.info,
-      },
-      corporate: {
-        color: colors.info,
-        glow: {
-          params: '0 0 20px 0',
-          color: 'rgba (186, 127, 236, 0.5)',
-        },
-      },
-      cosmic: {
-        gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
-        gradientRight: colors.info,
-        bevel: `shade(${colors.info}, 14%)`,
-        shadow: 'rgba (33, 7, 77, 0.5)',
-        glow: {
-          params: '0 2px 12px 0',
-          color: `adjust-hue(${colors.info}, -5deg)`,
-        },
-      },
-    }, {
-      class: 'btn-hero-danger',
-      container: 'danger-container',
-      title: 'Danger Button',
-      buttonTitle: 'Danger',
-      default: {
-        gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
-        gradientRight: colors.danger,
-      },
-      corporate: {
-        color: colors.danger,
-        glow: {
-          params: '0 0 20px 0',
-          color: 'rgba (255, 107, 131, 0.5)',
-        },
-      },
-      cosmic: {
-        gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
-        gradientRight: colors.danger,
-        bevel: `shade(${colors.danger}, 14%)`,
-        shadow: 'rgba (33, 7, 77, 0.5)',
-        glow: {
-          params: '0 2px 12px 0',
-          color: `adjust-hue(${colors.danger}, -10deg)`,
-        },
-      },
-    }, {
-      class: 'btn-hero-secondary',
-      container: 'secondary-container',
-      title: 'Ghost Button',
-      buttonTitle: 'Ghost',
-      default: {
-        border: '#dadfe6',
-      },
-      corporate: {
-        color: '#edf2f5',
-      },
-      cosmic: {
-        border: colors.primary,
-        bevel: '#665ebd',
-        shadow: 'rgba (33, 7, 77, 0.5)',
-        glow: {
-          params: '0 2px 12px 0',
-          color: 'rgba (146, 141, 255, 1)',
-        },
-      },
-    }];
-  }
-
-  ngOnDestroy() {
-    this.themeSubscription.unsubscribe();
-  }
-}
--- a/src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.html
+++ b/src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.html
@ -1,43 +0,0 @@
-<nb-card>
-  <nb-card-header>Icon buttons</nb-card-header>
-  <nb-card-body>
-    <div class="row icon-buttons">
-      <div class="col-md-12">
-        <div class="btn-group">
-          <button type="button" class="btn btn-primary btn-group-icon btn-group-divider">
-            <i class="nb-home"></i>
-          </button>
-          <button type="button" class="btn btn-primary">Icon Button</button>
-        </div>
-        <div class="btn-with-icon-example">
-          <button type="button" class="btn btn-primary btn-with-icon">
-            <i class="nb-home"></i>
-            <span>Icon Button</span>
-          </button>
-        </div>
-        <div class="icon-button-examples">
-          <button type="button" class="btn btn-outline-primary btn-icon">
-            <i class="nb-layout-centre"></i>
-          </button>
-          <button type="button" class="btn btn-outline-success btn-icon">
-            <i class="nb-layout-default"></i>
-          </button>
-          <button type="button" class="btn btn-outline-danger btn-icon">
-            <i class="nb-layout-one-column"></i>
-          </button>
-        </div>
-        <div class="icon-button-examples">
-          <button type="button" class="btn btn-primary btn-icon">
-            <i class="nb-shuffle"></i>
-          </button>
-          <button type="button" class="btn btn-success btn-icon">
-            <i class="nb-skip-backward-outline"></i>
-          </button>
-          <button type="button" class="btn btn-danger btn-icon">
-            <i class="nb-skip-forward-outline"></i>
-          </button>
-        </div>
-      </div>
-    </div>
-  </nb-card-body>
-</nb-card>
--- a/src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.scss
+++ b/src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.scss
@ -1,30 +0,0 @@
-nb-card-body {
-  div:not(:last-child) {
-    margin-bottom: 1rem;
-  }
-}
-
-.btn-with-icon-example {
-  width: 100%;
-
-  .btn {
-    width: 100%;
-  }
-}
-
-.btn-group:not(:last-child) {
-  margin-bottom: 1rem;
-}
-
-.icon-button-examples {
-  display: flex;
-  justify-content: space-between;
-
-  button {
-    min-width: 4rem;
-  }
-}
-
-.icon-button-examples:not(:last-child) {
-  margin-bottom: 1rem;
-}
--- a/src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.ts
+++ b/src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.ts
@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-icon-buttons',
-  styleUrls: ['./icon-buttons.component.scss'],
-  templateUrl: './icon-buttons.component.html',
-})
-export class IconButtonsComponent {
-}
--- a/src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.html
+++ b/src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.html
@ -1,43 +0,0 @@
-<nb-card>
-  <nb-card-header>Button Shapes</nb-card-header>
-  <nb-card-body>
-    <div class="shape-container">
-      <div class="container-title">
-        <span>Rectangle Button</span>
-      </div>
-      <div class="subheader">
-        <span>Border radius:</span>
-        <span>4px</span>
-      </div>
-      <div>
-        <button class="btn btn-success btn-rectangle btn-demo">Rectangle</button>
-      </div>
-    </div>
-
-    <div class="shape-container">
-      <div class="container-title">
-        <span>Semi-round Button</span>
-      </div>
-      <div class="subheader">
-        <span>Border radius:</span>
-        <span>12px</span>
-      </div>
-      <div>
-        <button class="btn btn-success btn-semi-round btn-demo">Semi-round</button>
-      </div>
-    </div>
-
-    <div class="shape-container">
-      <div class="container-title">
-        <span>Rounded Button</span>
-      </div>
-      <div class="subheader">
-        <span>Border radius:</span>
-        <span>round</span>
-      </div>
-      <div>
-        <button class="btn btn-success btn-round btn-demo">Round</button>
-      </div>
-    </div>
-  </nb-card-body>
-</nb-card>
--- a/src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.scss
+++ b/src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.scss
@ -1,30 +0,0 @@
-@import '../../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/buttons';
-
-@include nb-install-component() {
-
-  nb-card-body {
-    padding: 0 0 29px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-  }
-
-  .shape-container {
-    margin: 1.25rem 1.25rem 0;
-  }
-
-  .container-title {
-    margin-bottom: 0.25rem;
-  }
-
-  .subheader {
-    margin-bottom: 1rem;
-    font-size: 0.875rem;
-
-    span:nth-child(2) {
-      color: nb-theme(color-fg-heading);
-      font-weight: nb-theme(font-weight-bold);
-    }
-  }
-}
--- a/src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.ts
+++ b/src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.ts
@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-shape-buttons',
-  styleUrls: ['./shape-buttons.component.scss'],
-  templateUrl: './shape-buttons.component.html',
-})
-export class ShapeButtonsComponent {
-}
--- a/src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.html
+++ b/src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.html
@ -1,50 +0,0 @@
-<nb-card>
-  <nb-card-header>Button Sizes</nb-card-header>
-
-  <nb-card-body>
-    <div class="size-container">
-      <div class="container-title">
-        <span>Large Button</span>
-      </div>
-      <div class="subheader">
-        <span>0.875rem 1.75rem</span>
-      </div>
-      <div>
-        <button class="btn btn-primary btn-lg">Large Button</button>
-      </div>
-    </div>
-    <div class="size-container">
-      <div class="container-title">
-        <span>Medium Button</span>
-      </div>
-      <div class="subheader">
-        <span>0.75rem 1.5rem</span>
-      </div>
-      <div>
-        <button class="btn btn-primary btn-md">Medium Button</button>
-      </div>
-    </div>
-    <div class="size-container">
-      <div class="container-title">
-        <span>Small Button</span>
-      </div>
-      <div class="subheader">
-        <span>0.675rem 1.5rem</span>
-      </div>
-      <div>
-        <button class="btn btn-primary btn-sm">Small Button</button>
-      </div>
-    </div>
-    <div class="size-container">
-      <div class="container-title">
-        <span>X-Small Button</span>
-      </div>
-      <div class="subheader">
-        <span>0.5rem 1.25rem</span>
-      </div>
-      <div>
-        <button class="btn btn-primary btn-xs">X-Small Button</button>
-      </div>
-    </div>
-  </nb-card-body>
-</nb-card>
--- a/src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.scss
+++ b/src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.scss
@ -1,26 +0,0 @@
-@import '../../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/buttons';
-
-@include nb-install-component() {
-
-  nb-card-body {
-    padding: 0 1.25rem 1.25rem 0;
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .container-title {
-    margin-bottom: 0.25rem;
-  }
-
-  .size-container {
-    margin: 1.25rem 0 0 1.25rem;
-  }
-
-  .subheader {
-    margin-bottom: 0.75rem;
-    font-size: 0.875rem;
-    font-weight: nb-theme(font-weight-bolder);
-    color: nb-theme(color-fg-heading);
-  }
-}
--- a/src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.ts
+++ b/src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.ts
@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-size-buttons',
-  styleUrls: ['./size-buttons.component.scss'],
-  templateUrl: './size-buttons.component.html',
-})
-export class SizeButtonsComponent {
-}
--- a/src/app/pages/bootstrap/form-inputs/form-inputs.component.html
+++ b/src/app/pages/bootstrap/form-inputs/form-inputs.component.html
@ -1,235 +0,0 @@
-<div class="row">
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Default Inputs</nb-card-header>
-      <nb-card-body>
-        <div class="input-group">
-          <input type="text" placeholder="Project" class="form-control"/>
-        </div>
-        <div class="row full-name-inputs">
-          <div class="col-sm-6 input-group">
-            <input type="text" placeholder="Nick" class="form-control"/>
-          </div>
-          <div class="col-sm-6 input-group">
-            <input type="text" placeholder="Last Name" class="form-control"/>
-          </div>
-        </div>
-        <div class="input-group">
-          <input type="password" placeholder="Password" class="form-control"/>
-        </div>
-        <div class="input-group has-person-icon">
-          <input type="text" placeholder="With Icon" class="form-control"/>
-        </div>
-        <div class="input-group input-group-rounded">
-          <input type="text" placeholder="Rounded border" class="form-control"/>
-        </div>
-        <div class="form-group">
-          <input type="text" placeholder="Project" class="form-control"/>
-          <small class="form-text">A block of help text that breaks into a new line and may extend beyond one line.
-          </small>
-        </div>
-        <div class="input-group">
-          <input type="text" placeholder="Disabled input" class="form-control" disabled/>
-        </div>
-        <div class="input-group">
-          <textarea rows="5" placeholder="Text Area" class="form-control"></textarea>
-        </div>
-        <div class="input-group input-group-sm">
-          <input type="text" placeholder="Small Input" class="form-control"/>
-        </div>
-        <div class="input-group input-group-lg">
-          <input type="text" placeholder="Large Input" class="form-control"/>
-        </div>
-      </nb-card-body>
-    </nb-card>
-
-    <nb-card>
-      <nb-card-header>Input Groups</nb-card-header>
-      <nb-card-body>
-        <div class="input-group">
-          <span class="input-group-addon success">@</span>
-          <input type="text" class="form-control" placeholder="Username"/>
-        </div>
-
-        <div class="input-group mail-btn-group">
-          <span class="input-group-prepend">
-            <button class="btn btn-primary btn-icon input-group-text">
-              <i class="ion-ios-email-outline"></i>
-            </button>
-          </span>
-          <input type="text" class="form-control" placeholder="Recipient's username">
-          <span class="input-group-append">
-            <button class="btn btn-primary input-group-text">
-              @example.com
-            </button>
-          </span>
-        </div>
-        <div class="input-group">
-          <input type="text" class="form-control" placeholder="Search for...">
-          <span class="input-group-append">
-            <button class="btn btn-danger input-group-text">
-              Search
-            </button>
-          </span>
-        </div>
-        <div class="input-group">
-          <div class="dropdown input-group-prepend input-group-btn" ngbDropdown>
-            <button type="button" class="btn btn-success dropdown-toggle" ngbDropdownToggle>
-              Action
-            </button>
-            <ul class="dropdown-menu" ngbDropdownMenu>
-              <li class="dropdown-item">Action</li>
-              <li class="dropdown-item">Another action</li>
-              <li class="dropdown-item">Something else here</li>
-              <div role="separator" class="dropdown-divider"></div>
-              <li class="dropdown-item">Separated link</li>
-            </ul>
-          </div>
-          <input type="text" class="form-control">
-        </div>
-      </nb-card-body>
-    </nb-card>
-
-    <nb-card>
-      <nb-card-header>Selects</nb-card-header>
-      <nb-card-body>
-        <div class="form-group">
-          <label>Simple Select</label>
-          <select class="form-control">
-            <option>Minsk</option>
-            <option>Gomel</option>
-            <option>Brest</option>
-            <option>Grodno</option>
-            <option>Mogilev</option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label>Multiple Select</label>
-          <select multiple class="form-control">
-            <option>Item 1</option>
-            <option>Item 2</option>
-            <option>Item 3</option>
-            <option>Item 4</option>
-            <option>Item 5</option>
-          </select>
-        </div>
-      </nb-card-body>
-    </nb-card>
-  </div>
-
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Input Styles</nb-card-header>
-      <nb-card-body>
-        <div class="input-group input-group-border-only">
-          <input type="text" placeholder="Border Only" class="form-control"/>
-        </div>
-        <div class="input-group">
-          <input type="text" placeholder="Default Input" class="form-control">
-        </div>
-        <div class="input-group input-group-fill-only">
-          <input type="text" placeholder="Fill Only" class="form-control">
-        </div>
-      </nb-card-body>
-    </nb-card>
-
-    <nb-card>
-      <nb-card-header>Validation States</nb-card-header>
-      <nb-card-body>
-        <div class="form-group">
-          <input type="text" placeholder="Input with Success" class="form-control form-control-success">
-        </div>
-        <div class="form-group">
-          <input type="text" placeholder="Input with Warning" class="form-control form-control-warning">
-        </div>
-        <div class="form-group">
-          <input type="text" placeholder="Input with Danger" class="form-control form-control-danger">
-        </div>
-        <div class="form-group validation-checkboxes row">
-          <nb-checkbox status="success" class="col-sm-4">Checkbox with Success</nb-checkbox>
-          <nb-checkbox status="warning" class="col-sm-4">Checkbox with Warning</nb-checkbox>
-          <nb-checkbox status="danger" class="col-sm-4">Checkbox with Danger</nb-checkbox>
-        </div>
-        <div class="form-group has-success">
-          <input type="text" placeholder="Input with Success Icon" class="form-control form-control-success">
-        </div>
-        <div class="form-group has-warning">
-          <input type="text" placeholder="Input with Warning Icon" class="form-control form-control-warning">
-        </div>
-        <div class="form-group has-danger">
-          <input type="text" placeholder="Input with Danger Icon" class="form-control form-control-danger">
-        </div>
-      </nb-card-body>
-    </nb-card>
-
-    <nb-card>
-      <nb-card-header>Checkboxes & Radios</nb-card-header>
-      <nb-card-body>
-        <div class="row demo-checkboxes-radio">
-          <div class="demo-checkboxes col-sm-4">
-            <nb-checkbox>Checkbox 1</nb-checkbox>
-            <nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
-
-            <div class="custom-control custom-checkbox">
-              <input type="checkbox" class="custom-control-input" id="b-checkbox">
-              <label class="custom-control-label" for="b-checkbox">Bootstrap Checkbox</label>
-            </div>
-          </div>
-          <div class="demo-radio col-sm-4">
-            <label class="custom-control custom-radio">
-              <input type="radio" class="custom-control-input" name="customRadio">
-              <span class="custom-control-indicator"></span>
-              <span class="custom-control-description">Radio 1</span>
-            </label>
-            <label class="custom-control custom-radio">
-              <input type="radio" class="custom-control-input" name="customRadio" checked>
-              <span class="custom-control-indicator"></span>
-              <span class="custom-control-description">Radio 2</span>
-            </label>
-            <label class="custom-control custom-radio">
-              <input type="radio" class="custom-control-input" name="customRadio">
-              <span class="custom-control-indicator"></span>
-              <span class="custom-control-description">Radio 3</span>
-            </label>
-          </div>
-          <div class="demo-disabled-checkbox-radio col-sm-4">
-            <nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
-            <label class="custom-control custom-radio">
-              <input type="radio" class="custom-control-input" disabled>
-              <span class="custom-control-indicator"></span>
-              <span class="custom-control-description">Disabled Radio</span>
-            </label>
-          </div>
-        </div>
-      </nb-card-body>
-    </nb-card>
-
-    <nb-card>
-      <nb-card-body class="demo-rating">
-        <span class="rating-header">Rating</span>
-        <div>
-          <ngb-rating [(rate)]="starRate" max=5>
-            <ng-template let-fill="fill">
-              <span class="star fill" [class.filled]="fill === 100">
-                <i class="ion-android-star" *ngIf="fill === 100"></i>
-                <i class="ion-android-star-outline" *ngIf="fill !== 100"></i>
-              </span>
-            </ng-template>
-          </ngb-rating>
-          <span class="current-rate">{{ starRate }}</span>
-        </div>
-        <div>
-          <ngb-rating [(rate)]="heartRate" max=5>
-            <ng-template let-fill="fill">
-              <span class="star fill" [class.filled]="fill === 100">
-                <i class="ion-ios-heart" *ngIf="fill === 100"></i>
-                <i class="ion-ios-heart-outline" *ngIf="fill !== 100"></i>
-              </span>
-            </ng-template>
-          </ngb-rating>
-          <span class="current-rate">{{ heartRate }}</span>
-        </div>
-      </nb-card-body>
-    </nb-card>
-  </div>
-</div>
--- a/src/app/pages/bootstrap/form-inputs/form-inputs.component.scss
+++ b/src/app/pages/bootstrap/form-inputs/form-inputs.component.scss
@ -1,130 +0,0 @@
-@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-
-  nb-card-body {
-    overflow: visible;
-  }
-
-  .input-group {
-    margin-bottom: 1rem;
-  }
-
-  .validation-checkboxes {
-    display: flex;
-    justify-content: space-between;
-
-    .custom-control {
-      margin-left: 1rem;
-    }
-  }
-
-  .demo-checkboxes {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 1rem;
-  }
-
-  .demo-radio {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 1rem;
-  }
-
-  .demo-disabled-checkbox-radio {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 1rem;
-  }
-
-  .demo-checkboxes-radio {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .demo-rating {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-  }
-
-  .star {
-    font-size: 1.5rem;
-    color: nb-theme(color-fg);
-  }
-
-  .filled {
-    color: nb-theme(color-fg);
-  }
-
-  // TODO: Replace with the card header styles mixin
-  .rating-header {
-    line-height: 2rem;
-    font-size: 1.25rem;
-    font-family: nb-theme(font-secondary);
-    font-weight: nb-theme(font-weight-bolder);
-    color: nb-theme(color-fg-heading);
-  }
-
-  .current-rate {
-    font-size: 1.5rem;
-    @include nb-ltr(padding-left, 1rem);
-    @include nb-rtl(padding-right, 1rem);
-    color: nb-theme(color-fg-heading);
-  }
-
-  .full-name-inputs {
-    display: flex;
-  }
-
-  .input-group.has-person-icon {
-    position: relative;
-
-    .form-control {
-
-      padding-left: 3rem;
-    }
-
-    &::before {
-      content: '\F47D';
-      font-family: 'Ionicons';
-      font-size: 2rem;
-      position: absolute;
-      z-index: 100;
-      left: 1rem;
-      top: 0.25rem;
-    }
-  }
-
-  .dropdown {
-    min-width: 7rem;
-  }
-
-  .dropdown-menu {
-    width: auto;
-  }
-
-  .form-group label {
-    padding: 0 0 0.75rem;
-  }
-
-  ngb-rating {
-    outline: none;
-  }
-
-  ngb-rating i {
-    color: nb-theme(color-success);
-    @include nb-for-theme(cosmic) {
-      color: nb-theme(color-primary);
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    button:not(.btn-icon) {
-      padding: 0.75rem 1rem;
-      font-size: 0.75rem;
-    }
-  }
-}
--- a/src/app/pages/bootstrap/form-inputs/form-inputs.component.ts
+++ b/src/app/pages/bootstrap/form-inputs/form-inputs.component.ts
@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-form-inputs',
-  styleUrls: ['./form-inputs.component.scss'],
-  templateUrl: './form-inputs.component.html',
-})
-export class FormInputsComponent {
-
-  starRate = 2;
-  heartRate = 4;
-}
--- a/src/app/pages/bootstrap/modals/modal/modal.component.html
+++ b/src/app/pages/bootstrap/modals/modal/modal.component.html
@ -1 +0,0 @@
-
--- a/src/app/pages/bootstrap/modals/modal/modal.component.ts
+++ b/src/app/pages/bootstrap/modals/modal/modal.component.ts
@ -1,33 +0,0 @@
-import { Component } from '@angular/core';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-
-@Component({
-  selector: 'ngx-modal',
-  template: `
-    <div class="modal-header">
-      <span>{{ modalHeader }}</span>
-      <button class="close" aria-label="Close" (click)="closeModal()">
-        <span aria-hidden="true">&times;</span>
-      </button>
-    </div>
-    <div class="modal-body">
-      {{ modalContent }}
-    </div>
-    <div class="modal-footer">
-      <button class="btn btn-md btn-primary" (click)="closeModal()">Save changes</button>
-    </div>
-  `,
-})
-export class ModalComponent {
-
-  modalHeader: string;
-  modalContent = `Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
-    nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.`;
-
-  constructor(private activeModal: NgbActiveModal) { }
-
-  closeModal() {
-    this.activeModal.close();
-  }
-}
--- a/Show more
+++ b/Show more
Author	SHA1	Message	Date
Denis Strigo	dc6a442704	chore(readMe): update link for demo ngx-admin (#6044 ) * fix(package-lock): update version in package-lock * fix(package-lock): update version in package-lock * chore(readMe): update link for demo ngx-admin	2024-09-25 11:40:43 +02:00
Evgeny Lupanov	06776d15c4	Update README.md	2024-01-05 15:18:00 +03:00
Denis Strigo	651dadee33	release: 11.0.0 (#6006 )	2023-10-29 15:06:39 +01:00
Denis Strigo	aa91634dab	chore(angular-15): update to angular 15 (#6005 ) * fix(package-lock): update version in package-lock * fix(package-lock): update version in package-lock * chore(angular-15): update to angular 15 * chore(nebular-11): update to angular/cdk to 15, update nebular * chore(eslint): update @angular-eslint to v15	2023-10-29 14:50:21 +01:00
Denis Strigo	e06d9bd02d	fix(package-lock): update version in package-lock (#6002 ) * fix(package-lock): update version in package-lock	2023-10-25 14:09:02 +02:00
Evgeny Lupanov	f930de9b43	Update readme	2023-10-18 16:53:28 +03:00
Denis Strigo	6363d5171d	release: 10.0.0 (#5975 )	2023-03-07 19:41:22 +01:00
Denis Strigo	b1a9a682b8	feat: update to Angular 14 (#5973 ) * fix: fix issues after updates to Angular 13 in rooms component and country orders component * feat: update to Angular 14 (#1) * fix(angular 13): fix issues after updates to Angular 13 in rooms component and country orders component (#5965) * feat: update to Angular 14 * feat: update angular eslint packages eslint * feat: update nebular to 10 version * feat: update style import, remove ~	2023-03-07 19:26:27 +01:00
Denis Strigo	384b841cc0	fix(angular 13): fix issues after updates to Angular 13 in rooms component and country orders component (#5965 )	2023-02-09 17:00:28 +01:00
Denis Strigo	0ea69519c0	release: 9.0.0 (#5958 ) * release: 9.0.0 * release: 9.0.0, update angular version in README	2023-01-09 17:03:29 +01:00
Denis Strigo	ec68f5e84a	feat: update to Angular 13, move from tslint to eslint (#5957 ) * feat: update to Angular 13 * feat: update to Angular 13, move from tslint to eslint	2022-12-29 13:12:53 +03:00
Evgeny Lupanov	fd95769478	feat: add installation notes	2022-05-20 14:39:06 +03:00
Max	2588f30d10	typescript ~4.2 or ~4.3 version (#5894 )	2022-05-20 12:09:49 +03:00
Max	fbab9e5214	lock ng2-ckeditor and @types/jasmine minor versions (#5898 )	2022-05-20 12:06:43 +03:00
Max	0f4156d783	remove @akveo/ng2-completer and ng2-completer (#5896 )	2022-05-20 11:52:10 +03:00
Kate	f1365e1810	fix: update dependencies (#5938 ) fix for 5930 issue	2022-05-12 13:23:55 +03:00
Kate	237ea6bc69	feat: update dependencies (#5937 )	2022-05-11 16:34:11 +03:00
Evgeny Lupanov	f5015ac0d7	feat: update README.md	2022-04-27 15:39:08 +03:00
Evgeny Lupanov	570031d2be	feat: update templates section in README	2022-01-26 14:48:35 +03:00
Sergey Andrievskiy	0e0caa1ea6	chore(docs deploy): lock node version (#5909 )	2021-12-01 20:15:12 +03:00
Sergey Andrievskiy	cabe4bd71a	release: 8.0.0 (#5892 )	2021-10-08 12:14:18 +03:00
Sergey Andrievskiy	5e44070239	chore(readme): add bakery banner (#5871 )	2021-07-09 14:44:03 +03:00
Sergey Andrievskiy	080830a2fd	feat: update to Angular 12 (#5868 )	2021-06-27 21:06:28 +03:00
Dmitry Nehaychik	7b2be34873	chore: update readme (#5833 )	2021-02-08 18:24:30 +03:00
Sergey Andrievskiy	c2141efb67	release: 7.0.0 (#5827 )	2021-01-19 14:24:28 +03:00
Sergey Andrievskiy	ebe181085b	feat: update to Angular 11 (#5826 )	2021-01-19 13:52:09 +03:00
Vladimir Lugovsky	98166c5274	chore(readme): change utm params for akveo templates link	2020-11-02 11:06:12 +03:00
Vladimir Lugovsky	7ad3fff370	chore(readme): change UTM tags for templates link	2020-10-18 00:46:35 +03:00
Sergey Andrievskiy	3c6c643127	chore(readme): add templates link (#5779 )	2020-09-26 18:19:26 +03:00
Vladimir Lugovsky	017ba9188f	chore(docs): revert docs external links back to long variants (#5765 )	2020-09-08 14:12:59 +03:00
Sergey Andrievskiy	9e340ae905	fix: downgrade Angular CDK (#5757 )	2020-08-28 19:27:59 +03:00
Sergey Andrievskiy	36ac431a4e	chore(readme): update Angular version (#5750 )	2020-08-20 11:11:42 +03:00
Sergey Andrievskiy	73461e8972	release: 6.0.0 (#5748 )	2020-08-19 18:39:56 +03:00
Sergey Andrievskiy	ec3282cac5	feat: update to Angular 10 (#5747 )	2020-08-19 18:31:26 +03:00
Denis Strigo	c2ce881c41	docs(readme): update link to free banner in readme (#5715 ) Co-authored-by: d.strigo <d.strigo@akveo.com>	2020-06-17 21:41:04 +03:00
Denis Strigo	14149647eb	docs(readme): add banner to readme with free bundle (#5713 ) Co-authored-by: d.strigo <d.strigo@akveo.com>	2020-06-17 18:09:51 +03:00
Dmitry Nehaychik	3cd55786f2	docs: update readme (#5695 )	2020-05-27 15:01:55 +03:00
maksim-karatkevich	ca3504e11a	feat: update banner links in readme (#5692 ) Co-authored-by: Maksim Karatkevich <m.karatkevich@akveo.com>	2020-05-20 10:41:39 +03:00
maksim-karatkevich	f1d9c7b952	fix: deploy script (#5688 ) Co-authored-by: Maksim Karatkevich <m.karatkevich@akveo.com>	2020-05-19 10:34:32 +03:00
maksim-karatkevich	ceb45c49c0	chore: update deploy docs script (#5686 ) Co-authored-by: Maksim Karatkevich <m.karatkevich@akveo.com>	2020-05-18 17:15:12 +03:00
maksim-karatkevich	6bda4a1912	fix: deploy docs script (#5684 )	2020-05-15 17:11:32 +03:00
maksim-karatkevich	c3738563e0	fix: deploy docs script (#5683 )	2020-05-15 16:50:10 +03:00
maksim-karatkevich	ef650ae1cf	chore: add docs deploy script (#5682 ) Co-authored-by: Maksim Karatkevich <m.karatkevich@akveo.com>	2020-05-15 16:32:37 +03:00
Evgeny Lupanov	a48cb2b0bf	fix: actions readme formatting	2020-05-14 18:53:22 +03:00
maksim-karatkevich	c06bd0885a	fix: deploy demo script (#5680 ) Co-authored-by: Maksim Karatkevich <m.karatkevich@akveo.com>	2020-05-14 18:10:53 +03:00
maksim-karatkevich	7b84933f7c	chore: deploy demo action * create deploy demo script * action trigger guide added	2020-05-14 15:28:52 +03:00
Sasha Verbilo	9eaf0bb005	fix(sidebar): toggle performance issues (#5658 ) * refactor: improve observable layout change sharing * feat: add safe delayed event of layout change * fix: replace change layout with safe change * fix: limit front card width to prevent map overflow before repaint	2020-04-15 16:18:29 +03:00
Evgeny Lupanov	5cc4c19cee	chore(readme): reduce image size (#5638 ) * chore(readme): reduce image size * fix(readme): store link	2020-04-02 17:05:06 +03:00
Alex Kurbako	dfaa5cdb1f	fix(echarts): set merge input (#5632 )	2020-04-01 21:05:48 +03:00
Evgeny Lupanov	87a3759da1	chore(readme): Angular 9 and Material theme info (#5629 )	2020-04-01 21:03:17 +03:00
Sergey Andrievskiy	6c28c55a2b	release: 5.0.0 (#5633 )	2020-04-01 20:52:52 +03:00
Evgeny Lupanov	fbbf94448b	feat: upgrade to Angular 9 and Nebular 5 (#5628 ) BREAKING CHANGE: Angular updated to version 9. Nebular updated to version 5. `@agm/core` replaced with `@angular/google-maps`. `ng2-completer` replaced with `@akveo/ng2-completer`, read details [here](https://github.com/akveo/ng2-smart-table/pull/1140#issue-392285957).	2020-03-30 12:06:51 +03:00
Vladimir Lugovsky	df3bc2a60d	chore(analytics): add proper analytics tracking URLs (#5604 )	2020-02-28 17:33:24 +03:00
Vladimir Lugovsky	76d31dadbc	feat(seo): add canonical tag (#5578 )	2019-12-20 11:09:37 +03:00
Sergey Andrievskiy	6837d1f3c2	chore(readme): update bundles image (#5575 )	2019-12-11 14:09:30 +03:00
Sergey Andrievskiy	53e4ab0db2	chore(readme): remove bundles discounts image (#5574 )	2019-12-09 15:17:51 +03:00
Sergey Andrievskiy	390eaab7bd	chore(readme): update black friday 2019 image (#5570 )	2019-11-28 11:53:31 +03:00
Sergey Andrievskiy	a08795bff7	chore: add bundles black friday deal (#5569 )	2019-11-27 14:28:30 +03:00
Sergey Andrievskiy	5a552d7167	chore(readme): update bundles image (#5565 )	2019-11-15 18:22:24 +03:00
Sergey Andrievskiy	06cda13fd0	feat: update Nebular to 4.4.0 (#5533 )	2019-10-08 15:46:04 +03:00
Leon Lafayette	1ff2a0d9cb	fix(forms): add missing forms module import (#5530 )	2019-10-07 17:35:35 +03:00
Sergey Andrievskiy	2b700c3e39	chore(readme): update bundles section text	2019-10-04 19:03:24 +03:00
Sergey Andrievskiy	32422579d9	feat: add calendar with week numbers example (#5515 )	2019-09-20 16:14:25 +03:00
Sergey Andrievskiy	90125abf92	fix(tinymce): set absolute path for skin url (#5491 )	2019-08-23 19:55:54 +03:00
David Henley	ede1b074f0	chore: update README for extra theme (#5466 )	2019-07-19 10:51:06 +03:00
Sergey Andrievskiy	4ff3d938e4	release: 4.0.1 (#5460 )	2019-07-16 12:26:35 +03:00
Sergey Andrievskiy	a39e9ee858	chore(readme): update Angular version to 8 (#5459 )	2019-07-16 12:00:52 +03:00
Sergey Andrievskiy	d15ee3a333	chore: change dark image readme image (#5458 )	2019-07-15 19:23:05 +03:00
Sergey Andrievskiy	a2e93f9376	feat: update Nebular to 4.1.2 (#5451 )	2019-07-15 14:14:04 +03:00
Sergey Andrievskiy	4febf1902c	refactor(traffic card): remove unused styling (#2168 )	2019-07-09 18:21:38 +03:00
Sergey Andrievskiy	243390c10f	fix(typography): prevent bootstrap color override (#2161 )	2019-07-08 11:16:38 +03:00
Sergey Andrievskiy	8f09ddda95	chore: update readme images (#2151 )	2019-07-03 22:15:46 +03:00
Sergey Andrievskiy	6925fd5e3a	release: 4.0.0 (#2150 )	2019-07-02 16:57:16 +03:00
Dmitry Nehaychik	e9600b4a07	feat: update to Angular 8, Nebular 4 (#2114 )	2019-07-02 16:18:09 +03:00
Sergey Andrievskiy	537e6a77b0	chore: update readme images (#2143 )	2019-06-25 16:24:28 +03:00
Dmitry Nehaychik	b11ccb78ff	release: 3.2.1	2019-04-02 16:32:38 +03:00
Dmitry Nehaychik	78695cda9a	fix: update @angular-devkit/build-angular to fix import aliases	2019-04-02 16:12:42 +03:00