Release v1.0.5 - Bump Codebase

Codebase Update
CleanUp before Update
2023-06-06 11:03:51 +03:00 · 2023-06-06 11:03:31 +03:00 · 2023-06-06 10:56:09 +03:00
68 changed files with 3840 additions and 3411 deletions
--- a/.env
+++ b/.env
@ -1,8 +1,14 @@
+# True for development, False for production
 DEBUG=True
-SECRET_KEY=S3cr3t_K#Key
-DB_ENGINE=postgresql
-DB_NAME=appseed-flask
-DB_HOST=localhost
-DB_PORT=5432
-DB_USERNAME=appseed
-DB_PASS=pass
+
+# Flask ENV
+FLASK_APP=run.py
+FLASK_ENV=development
+
+# Used for CDN (in production)
+# No Slash at the end
+ASSETS_ROOT=/static/assets
+
+# LOCAL 5001 FLask
+# GITHUB_ID = <YOUR_GITHUB_ID>
+# GITHUB_SECRET = <YOUR_GITHUB_SECRET>
--- a/.gitignore
+++ b/.gitignore
@ -31,3 +31,6 @@ apps/static/assets/node_modules
 apps/static/assets/yarn.lock
 apps/static/assets/.temp

+migrations
+node_modules
+yarn.lock
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,13 @@
 # Change Log

+## [1.0.5] 2023-06-06
+### Changes
+
+- Codebase Update
+- Added OAuth via Github
+- Improved Auth Pages
+  - UI/UX updates (minor)
+
 ## [1.0.4] 2021-11-10
 ### Improvements

--- a/14
+++ b/14
@ -1,14 +1,24 @@
 FROM python:3.9

-COPY . .
-
 # set environment variables
 ENV PYTHONDONTWRITEBYTECODE 1
 ENV PYTHONUNBUFFERED 1
+ENV FLASK_APP run.py
+ENV DEBUG True
+
+COPY requirements.txt .

 # install python dependencies
 RUN pip install --upgrade pip
 RUN pip install --no-cache-dir -r requirements.txt

+COPY env.sample .env
+
+COPY . .
+
+RUN flask db init
+RUN flask db migrate
+RUN flask db upgrade
+
 # gunicorn
 CMD ["gunicorn", "--config", "gunicorn-cfg.py", "run:app"]
--- a/1
+++ b/1
@ -1 +0,0 @@
-web: gunicorn run:app --log-file=- 
--- a/README.md
+++ b/README.md
@ -6,18 +6,14 @@

 <br />

-> Free product - **Flask Dashboard** starter project - Features:
+> Features:

- Up-to-date [dependencies](./requirements.txt): **Flask 2.0.1**
- [SCSS compilation](#recompile-css) via **Gulp**
- UI Kit: **Black Dashboard** (Free Version) provided by **[Creative-Tim](https://www.creative-tim.com/)**
- Flask Codebase - provided by **[AppSeed](https://appseed.us/)**
- SQLite, PostgreSQL, SQLAlchemy ORM
- Alembic (DB schema migrations)
- Modular design with **Blueprints**
- Session-Based authentication (via **flask_login**)
- Forms validation
- Deployment scripts: Docker, Gunicorn / Nginx, Heroku
+- ✅ `Up-to-date dependencies`
+- ✅ Black Dashboard, BS4 Design
+- ✅ `DB Tools`: SQLAlchemy ORM, `Flask-Migrate` (schema migrations)
+- ✅ `Persistence`: SQLite (dev), MySql (prod)
+- ✅ `Authentication`: Session Based, `OAuth` via Github
+- ✅ `Deployment`: Docker, Page Compression (Flask-Minify) 

 <br />

@ -57,66 +53,137 @@ $ cd black-dashboard-flask
 > Start the app in Docker

 ```bash
-$ docker-compose pull   # download dependencies 
-$ docker-compose build  # local set up
-$ docker-compose up -d  # start the app 
+$ docker-compose up --build 
 ```

-Visit `http://localhost:85` in your browser. The app should be up & running.
+Visit `http://localhost:5085` in your browser. The app should be up & running.

 <br />

-## Quick start
+## Create/Edit `.env` file
+
+The meaning of each variable can be found below: 
+
+- `DEBUG`: if `True` the app runs in develoment mode
+  - For production value `False` should be used
+- `ASSETS_ROOT`: used in assets management
+  - default value: `/static/assets`
+- `OAuth` via Github
+  - `GITHUB_ID`=<GITHUB_ID_HERE>
+  - `GITHUB_SECRET`=<GITHUB_SECRET_HERE> 
+
+<br />
+
+## Manual Build

 > UNZIP the sources or clone the private repository. After getting the code, open a terminal and navigate to the working directory, with product source code.

+### 👉 Set Up for `Unix`, `MacOS` 
+
+> Install modules via `VENV`  
+
 ```bash
-$ # Get the code
-$ git clone https://github.com/creativetimofficial/black-dashboard-flask.git
-$ cd black-dashboard-flask
-$
-$ # Virtualenv modules installation (Unix based systems)
 $ virtualenv env
 $ source env/bin/activate
-$
-$ # Virtualenv modules installation (Windows based systems)
-$ # virtualenv env
-$ # .\env\Scripts\activate
-$
-$ # Install modules - SQLite Database
 $ pip3 install -r requirements.txt
-$
-$ # OR with PostgreSQL connector
-$ # pip install -r requirements-pgsql.txt
-$
-$ # Set the FLASK_APP environment variable
-$ (Unix/Mac) export FLASK_APP=run.py
-$ (Windows) set FLASK_APP=run.py
-$ (Powershell) $env:FLASK_APP = ".\run.py"
-$
-$ # Set up the DEBUG environment
-$ # (Unix/Mac) export FLASK_ENV=development
-$ # (Windows) set FLASK_ENV=development
-$ # (Powershell) $env:FLASK_ENV = "development"
-$
-$ # Start the application (development mode)
-$ # --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1)
-$ # --port=5000    - specify the app port (default 5000)  
-$ flask run --host=0.0.0.0 --port=5000
-$
-$ # Access the dashboard in browser: http://127.0.0.1:5000/
 ```

-> Note: To use the app, please access the registration page and create a new user. After authentication, the app will unlock the private pages.
+<br />
+
+> Set Up Flask Environment
+
+```bash
+$ export FLASK_APP=run.py
+$ export FLASK_ENV=development
+```
+
+<br />
+
+> Start the app
+
+```bash
+$ flask run
+// OR
+$ flask run --cert=adhoc # For HTTPS server
+```
+
+At this point, the app runs at `http://127.0.0.1:5000/`. 
+
+<br />
+
+### 👉 Set Up for `Windows` 
+
+> Install modules via `VENV` (windows) 
+
+```
+$ virtualenv env
+$ .\env\Scripts\activate
+$ pip3 install -r requirements.txt
+```
+
+<br />
+
+> Set Up Flask Environment
+
+```bash
+$ # CMD 
+$ set FLASK_APP=run.py
+$ set FLASK_ENV=development
+$
+$ # Powershell
+$ $env:FLASK_APP = ".\run.py"
+$ $env:FLASK_ENV = "development"
+```
+
+<br />
+
+> Start the app
+
+```bash
+$ flask run
+// OR
+$ flask run --cert=adhoc # For HTTPS server
+```
+
+At this point, the app runs at `http://127.0.0.1:5000/`. 
+
+<br />
+
+## Recompile SCSS  
+
+The SCSS/CSS files used to style the Ui are saved in the `apps/static/assets` directory. 
+In order to update the Ui colors (primary, secondary) this procedure needs to be followed. 
+
+```bash
+$ yarn # install modules
+$ # # edit variables 
+$ vi apps/static/assets/scss/black-dashboard/custom/_variables.scss 
+$ gulp # SCSS to CSS translation
+```
+
+The `_variables.scss` content defines the `primary` and `secondary` colors: 
+
+```scss
+$default:       #344675 !default; // EDIT for customization
+$primary:       #e14eca !default; // EDIT for customization
+$secondary:     #f4f5f7 !default; // EDIT for customization
+$success:       #00f2c3 !default; // EDIT for customization
+$info:          #1d8cf8 !default; // EDIT for customization
+$warning:       #ff8d72 !default; // EDIT for customization
+$danger:        #fd5d93 !default; // EDIT for customization
+$black:         #222a42 !default; // EDIT for customization
+```

 <br />

 ## Documentation
+
 The documentation for the **Black Dashboard Flask** is hosted at our [website](https://demos.creative-tim.com/black-dashboard-flask/docs/1.0/getting-started/getting-started-flask.html).

 <br />

 ## File Structure
+
 Within the download you'll find the following directories and files:

 ```bash
@ -124,23 +191,23 @@ Within the download you'll find the following directories and files:
   |
   |-- apps/
   |    |
-   |    |-- home/                          # A simple app that serve HTML files
-   |    |    |-- routes.py                 # Define app routes
+   |    |-- home/                           # A simple app that serve HTML files
+   |    |    |-- routes.py                  # Define app routes
   |    |
-   |    |-- authentication/                # Handles auth routes (login and register)
-   |    |    |-- routes.py                 # Define authentication routes  
-   |    |    |-- models.py                 # Defines models  
-   |    |    |-- forms.py                  # Define auth forms (login and register) 
+   |    |-- authentication/                 # Handles auth routes (login and register)
+   |    |    |-- routes.py                  # Define authentication routes  
+   |    |    |-- models.py                  # Defines models  
+   |    |    |-- forms.py                   # Define auth forms (login and register) 
   |    |
   |    |-- static/
-   |    |    |-- <css, JS, images>         # CSS files, Javascripts files
+   |    |    |-- <css, JS, images>          # CSS files, Javascripts files
   |    |
-   |    |-- templates/                     # Templates used to render pages
-   |    |    |-- includes/                 # HTML chunks and components
-   |    |    |    |-- navigation.html      # Top menu component
-   |    |    |    |-- sidebar.html         # Sidebar component
-   |    |    |    |-- footer.html          # App Footer
-   |    |    |    |-- scripts.html         # Scripts common to all pages
+   |    |-- templates/                      # Templates used to render pages
+   |    |    |-- includes/                  # HTML chunks and components
+   |    |    |    |-- navigation.html       # Top menu component
+   |    |    |    |-- sidebar.html          # Sidebar component
+   |    |    |    |-- footer.html           # App Footer
+   |    |    |    |-- scripts.html          # Scripts common to all pages
   |    |    |
   |    |    |-- layouts/                   # Master pages
   |    |    |    |-- base-fullscreen.html  # Used by Authentication pages
@ -158,15 +225,7 @@ Within the download you'll find the following directories and files:
   |  config.py                             # Set up the app
   |    __init__.py                         # Initialize the app
   |
-   |-- requirements.txt                     # Development modules - SQLite storage
-   |-- requirements-mysql.txt               # Production modules  - Mysql DMBS
-   |-- requirements-pqsql.txt               # Production modules  - PostgreSql DMBS
-   |
-   |-- Dockerfile                           # Deployment
-   |-- docker-compose.yml                   # Deployment
-   |-- gunicorn-cfg.py                      # Deployment   
-   |-- nginx                                # Deployment
-   |    |-- appseed-app.conf                # Deployment 
+   |-- requirements.txt                     # App Dependencies
   |
   |-- .env                                 # Inject Configuration via Environment
   |-- run.py                               # Start the app - WSGI gateway
@ -176,61 +235,6 @@ Within the download you'll find the following directories and files:

 <br />

-> The bootstrap flow
-
- `run.py` loads the `.env` file
- Initialize the app using the specified profile: *Debug* or *Production*
-  - If env.DEBUG is set to *True* the SQLite storage is used
-  - If env.DEBUG is set to *False* the specified DB driver is used (MySql, PostgreSQL)
- Call the app factory method `create_app` defined in app/__init__.py
- Redirect the guest users to Login page
- Unlock the pages served by *home* blueprint for authenticated users
-
-<br />
-
-## Recompile CSS
-
-To recompile SCSS files, follow this setup:
-
-<br />
-
-**Step #1** - Install tools
-
- [NodeJS](https://nodejs.org/en/) 12.x or higher
- [Gulp](https://gulpjs.com/) - globally 
-    - `npm install -g gulp-cli`
- [Yarn](https://yarnpkg.com/) (optional) 
-
-<br />
-
-**Step #2** - Change the working directory to `assets` folder
-
-```bash
-$ cd apps/static/assets
-```
-
-<br />
-
-**Step #3** - Install modules (this will create a classic `node_modules` directory)
-
-```bash
-$ npm install
-// OR
-$ yarn
-```
-
-<br />
-
-**Step #4** - Edit & Recompile SCSS files 
-
-```bash
-$ gulp scss
-```
-
-The generated file is saved in `static/assets/css` directory.
-
-<br />
-
 ## Browser Support

 At present, we officially aim to support the last two versions of the following browsers:
--- a/apps/init.py
+++ b/apps/init.py
@ -34,11 +34,15 @@ def configure_database(app):
    def shutdown_session(exception=None):
        db.session.remove()

+from apps.authentication.oauth import github_blueprint

 def create_app(config):
    app = Flask(__name__)
    app.config.from_object(config)
    register_extensions(app)
+
+    app.register_blueprint(github_blueprint, url_prefix="/login")
+    
    register_blueprints(app)
    configure_database(app)
    return app
--- a/apps/authentication/forms.py
+++ b/apps/authentication/forms.py
@ -4,14 +4,14 @@ Copyright (c) 2019 - present AppSeed.us
 """

 from flask_wtf import FlaskForm
-from wtforms import TextField, PasswordField
+from wtforms import StringField, PasswordField
 from wtforms.validators import Email, DataRequired

 # login and registration


 class LoginForm(FlaskForm):
-    username = TextField('Username',
+    username = StringField('Username',
                         id='username_login',
                         validators=[DataRequired()])
    password = PasswordField('Password',
@ -20,10 +20,10 @@ class LoginForm(FlaskForm):


 class CreateAccountForm(FlaskForm):
-    username = TextField('Username',
+    username = StringField('Username',
                         id='username_create',
                         validators=[DataRequired()])
-    email = TextField('Email',
+    email = StringField('Email',
                      id='email_create',
                      validators=[DataRequired(), Email()])
    password = PasswordField('Password',
--- a/apps/authentication/models.py
+++ b/apps/authentication/models.py
@ -5,6 +5,9 @@ Copyright (c) 2019 - present AppSeed.us

 from flask_login import UserMixin

+from sqlalchemy.orm import relationship
+from flask_dance.consumer.storage.sqla import OAuthConsumerMixin
+
 from apps import db, login_manager

 from apps.authentication.util import hash_pass
@ -13,10 +16,12 @@ class Users(db.Model, UserMixin):

    __tablename__ = 'Users'

-    id = db.Column(db.Integer, primary_key=True)
-    username = db.Column(db.String(64), unique=True)
-    email = db.Column(db.String(64), unique=True)
-    password = db.Column(db.LargeBinary)
+    id            = db.Column(db.Integer, primary_key=True)
+    username      = db.Column(db.String(64), unique=True)
+    email         = db.Column(db.String(64), unique=True)
+    password      = db.Column(db.LargeBinary)
+
+    oauth_github  = db.Column(db.String(100), nullable=True)

    def __init__(self, **kwargs):
        for property, value in kwargs.items():
@ -46,3 +51,7 @@ def request_loader(request):
    username = request.form.get('username')
    user = Users.query.filter_by(username=username).first()
    return user if user else None
+
+class OAuth(OAuthConsumerMixin, db.Model):
+    user_id = db.Column(db.Integer, db.ForeignKey("Users.id", ondelete="cascade"), nullable=False)
+    user = db.relationship(Users)
--- a/apps/authentication/oauth.py
+++ b/apps/authentication/oauth.py
@ -0,0 +1,58 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+import os
+from flask import current_app as app 
+from flask_login import current_user, login_user
+from flask_dance.consumer import oauth_authorized
+from flask_dance.contrib.github import github, make_github_blueprint
+from flask_dance.consumer.storage.sqla import SQLAlchemyStorage
+from flask_dance.contrib.twitter import twitter, make_twitter_blueprint
+from sqlalchemy.orm.exc import NoResultFound
+from apps.config import Config
+from .models import Users, db, OAuth
+from flask import redirect, url_for
+from flask import flash
+
+github_blueprint = make_github_blueprint(
+    client_id=Config.GITHUB_ID,
+    client_secret=Config.GITHUB_SECRET,
+    scope = 'user',
+    storage=SQLAlchemyStorage(
+        OAuth,
+        db.session,
+        user=current_user,
+        user_required=False,        
+    ),   
+)
+
+@oauth_authorized.connect_via(github_blueprint)
+def github_logged_in(blueprint, token):
+    info = github.get("/user")
+
+    if info.ok:
+
+        account_info = info.json()
+        username     = account_info["login"]
+
+        query = Users.query.filter_by(oauth_github=username)
+        try:
+
+            user = query.one()
+            login_user(user)
+
+        except NoResultFound:
+
+            # Save to db
+            user              = Users()
+            user.username     = '(gh)' + username
+            user.oauth_github = username
+
+            # Save current user
+            db.session.add(user)
+            db.session.commit()
+
+            login_user(user)
+
--- a/apps/authentication/routes.py
+++ b/apps/authentication/routes.py
@ -10,6 +10,8 @@ from flask_login import (
    logout_user
 )

+from flask_dance.contrib.github import github
+
 from apps import db, login_manager
 from apps.authentication import blueprint
 from apps.authentication.forms import LoginForm, CreateAccountForm
@ -22,9 +24,17 @@ from apps.authentication.util import verify_pass
 def route_default():
    return redirect(url_for('authentication_blueprint.login'))

-
 # Login & Registration

+@blueprint.route("/github")
+def login_github():
+    """ Github login """
+    if not github.authorized:
+        return redirect(url_for("github.login"))
+
+    res = github.get("/user")
+    return redirect(url_for('home_blueprint.index'))
+    
@blueprint.route('/login', methods=['GET', 'POST'])
 def login():
    login_form = LoginForm(request.form)
@ -45,13 +55,11 @@ def login():

        # Something (user or pass) is not ok
        return render_template('accounts/login.html',
-                               segment = 'login',     
                               msg='Wrong user or password',
                               form=login_form)

    if not current_user.is_authenticated:
        return render_template('accounts/login.html',
-                               segment = 'login', 
                               form=login_form)
    return redirect(url_for('home_blueprint.index'))

@ -69,7 +77,6 @@ def register():
        if user:
            return render_template('accounts/register.html',
                                   msg='Username already registered',
-                                   segment = 'register',
                                   success=False,
                                   form=create_account_form)

@ -78,7 +85,6 @@ def register():
        if user:
            return render_template('accounts/register.html',
                                   msg='Email already registered',
-                                   segment = 'register', 
                                   success=False,
                                   form=create_account_form)

@ -87,16 +93,16 @@ def register():
        db.session.add(user)
        db.session.commit()

+        # Delete user from session
+        logout_user()
+        
        return render_template('accounts/register.html',
-                               msg='User created please <a href="/login">login</a>',
-                               segment = 'register', 
+                               msg='Account created successfully.',
                               success=True,
                               form=create_account_form)

    else:
-        return render_template( 'accounts/register.html',
-                                segment = 'register', 
-                                form=create_account_form)
+        return render_template('accounts/register.html', form=create_account_form)


@blueprint.route('/logout')
--- a/apps/config.py
+++ b/apps/config.py
@ -4,19 +4,30 @@ Copyright (c) 2019 - present AppSeed.us
 """

 import os
-from decouple import config

 class Config(object):

    basedir = os.path.abspath(os.path.dirname(__file__))

    # Set up the App SECRET_KEY
-    SECRET_KEY = config('SECRET_KEY', default='S#perS3crEt_007')
+    # SECRET_KEY = config('SECRET_KEY'  , default='S#perS3crEt_007')
+    SECRET_KEY = os.getenv('SECRET_KEY', 'S#perS3crEt_007')

    # This will create a file in <app> FOLDER
    SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(basedir, 'db.sqlite3')
    SQLALCHEMY_TRACK_MODIFICATIONS = False 

+    # Assets Management
+    ASSETS_ROOT = os.getenv('ASSETS_ROOT', '/static/assets')    
+    
+    SOCIAL_AUTH_GITHUB  = False
+
+    GITHUB_ID      = os.getenv('GITHUB_ID')
+    GITHUB_SECRET  = os.getenv('GITHUB_SECRET')
+
+    # Enable/Disable Github Social Login    
+    if GITHUB_ID and GITHUB_SECRET:
+         SOCIAL_AUTH_GITHUB  = True

 class ProductionConfig(Config):
    DEBUG = False
@ -28,12 +39,12 @@ class ProductionConfig(Config):

    # PostgreSQL database
    SQLALCHEMY_DATABASE_URI = '{}://{}:{}@{}:{}/{}'.format(
-        config('DB_ENGINE', default='postgresql'),
-        config('DB_USERNAME', default='appseed'),
-        config('DB_PASS', default='pass'),
-        config('DB_HOST', default='localhost'),
-        config('DB_PORT', default=5432),
-        config('DB_NAME', default='appseed-flask')
+        os.getenv('DB_ENGINE'   , 'mysql'),
+        os.getenv('DB_USERNAME' , 'appseed_db_usr'),
+        os.getenv('DB_PASS'     , 'pass'),
+        os.getenv('DB_HOST'     , 'localhost'),
+        os.getenv('DB_PORT'     , 3306),
+        os.getenv('DB_NAME'     , 'appseed_db')
    )


@ -44,5 +55,5 @@ class DebugConfig(Config):
 # Load all possible configurations
 config_dict = {
    'Production': ProductionConfig,
-    'Debug': DebugConfig
+    'Debug'     : DebugConfig
 }
--- a/apps/home/routes.py
+++ b/apps/home/routes.py
@ -15,6 +15,7 @@ def index():

    return render_template('home/index.html', segment='index')

+
@blueprint.route('/<template>')
@login_required
 def route_template(template):
@ -22,7 +23,7 @@ def route_template(template):
    try:

        if not template.endswith('.html'):
-            pass
+            template += '.html'

        # Detect the current page
        segment = get_segment(request)
--- a/apps/static/assets/css/black-dashboard.css
+++ b/apps/static/assets/css/black-dashboard.css
@ -12842,16 +12842,7 @@ Copyright (c) 2015 Daniel Eden
      color: rgba(255, 255, 255, 0.8); }
  .white-content .main-panel {
    background: #f5f6fa; }
-  .white-content h1,
-  .white-content h2,
-  .white-content h3,
-  .white-content h4,
-  .white-content h5,
-  .white-content h6,
-  .white-content p,
-  .white-content ol li,
-  .white-content ul li,
-  .white-content pre {
+  .white-content h1, .white-content h2, .white-content h3, .white-content h4, .white-content h5, .white-content h6, .white-content p, .white-content ol li, .white-content ul li, .white-content pre {
    color: #1d253b; }
  .white-content .font-icon-detail i {
    color: #222a42; }
@ -12875,8 +12866,7 @@ Copyright (c) 2015 Daniel Eden
    color: rgba(34, 42, 66, 0.4);
    opacity: 1;
    filter: alpha(opacity=100); }
-  .white-content .has-danger .form-control,
-  .white-content .has-danger .input-group-prepend .input-group-text {
+  .white-content .has-danger .form-control, .white-content .has-danger .input-group-prepend .input-group-text {
    border-color: #ec250d; }
  .white-content .input-group-prepend .input-group-text {
    border-color: rgba(29, 37, 59, 0.5);
@ -12934,9 +12924,7 @@ Copyright (c) 2015 Daniel Eden
  .white-content .input-group[disabled] .input-group-prepend .input-group-text,
  .white-content .input-group[disabled] .input-group-append .input-group-text {
    background-color: #222a42; }
-  .white-content .form-control[disabled],
-  .white-content .form-control[readonly],
-  .white-content fieldset[disabled] .form-control {
+  .white-content .form-control[disabled], .white-content .form-control[readonly], .white-content fieldset[disabled] .form-control {
    background: #E3E3E3;
    border-color: rgba(29, 37, 59, 0.3); }
  .white-content .input-group-focus .input-group-prepend .input-group-text,
@ -12950,13 +12938,9 @@ Copyright (c) 2015 Daniel Eden
    border-right: none; }
  .white-content .input-group-append .input-group-text {
    border-left: none; }
-  .white-content .has-danger .form-control:focus,
-  .white-content .has-success.input-group-focus .input-group-append .input-group-text,
-  .white-content .has-success.input-group-focus .input-group-prepend .input-group-text {
+  .white-content .has-danger .form-control:focus, .white-content .has-success.input-group-focus .input-group-append .input-group-text, .white-content .has-success.input-group-focus .input-group-prepend .input-group-text {
    border-color: #ec250d; }
-  .white-content .has-success .form-control:focus,
-  .white-content .has-success.input-group-focus .input-group-append .input-group-text,
-  .white-content .has-success.input-group-focus .input-group-prepend .input-group-text {
+  .white-content .has-success .form-control:focus, .white-content .has-success.input-group-focus .input-group-append .input-group-text, .white-content .has-success.input-group-focus .input-group-prepend .input-group-text {
    border-color: #00bf9a; }
  .white-content .btn.btn-link:hover, .white-content .btn.btn-link:active, .white-content .btn.btn-link:focus {
    color: #9A9A9A !important; }
@ -12969,11 +12953,9 @@ Copyright (c) 2015 Daniel Eden
      color: #222a42; }
      .white-content .card:not(.card-white) .card-header a[data-toggle="collapse"] {
        color: #222a42; }
-    .white-content .card:not(.card-white) .card-header .card-title,
-    .white-content .card:not(.card-white) .card-body .card-title {
+    .white-content .card:not(.card-white) .card-header .card-title, .white-content .card:not(.card-white) .card-body .card-title {
      color: #1d253b; }
-    .white-content .card:not(.card-white) .card-body .card-category,
-    .white-content .card:not(.card-white) .card-body .card-description {
+    .white-content .card:not(.card-white) .card-body .card-category, .white-content .card:not(.card-white) .card-body .card-description {
      color: #1d253b; }
    .white-content .card:not(.card-white) label:not(.btn) {
      color: #344675; }
@ -13006,35 +12988,22 @@ Copyright (c) 2015 Daniel Eden
    border-color: rgba(34, 42, 66, 0.2);
    padding: 12px 7px;
    vertical-align: middle; }
-  .white-content .table > thead > tr > th,
-  .white-content .table button.btn-neutral.btn-link {
+  .white-content .table > thead > tr > th, .white-content .table button.btn-neutral.btn-link {
    color: rgba(34, 42, 66, 0.7); }
  .white-content .footer ul li a {
    color: #1d253b; }
  .white-content .footer .copyright {
    color: #1d253b; }
-  .white-content .progress-container .progress,
-  .white-content .progress-container.progress.sm .progress {
+  .white-content .progress-container .progress, .white-content .progress-container.progress.sm .progress {
    background: rgba(34, 42, 66, 0.1);
    box-shadow: 0 0 0 3px rgba(34, 42, 66, 0.1); }
-    .white-content .progress-container .progress .progress-value,
-    .white-content .progress-container.progress.sm .progress .progress-value {
+    .white-content .progress-container .progress .progress-value, .white-content .progress-container.progress.sm .progress .progress-value {
      color: #344675; }
-  .white-content .progress-container .progress-badge,
-  .white-content .progress-container.progress.sm .progress-badge {
+  .white-content .progress-container .progress-badge, .white-content .progress-container.progress.sm .progress-badge {
    color: #1d253b; }
  .white-content .full-page {
    background: #f5f6fa; }
-    .white-content .full-page h1,
-    .white-content .full-page h2,
-    .white-content .full-page h3,
-    .white-content .full-page h4,
-    .white-content .full-page h5,
-    .white-content .full-page h6,
-    .white-content .full-page p,
-    .white-content .full-page ol li,
-    .white-content .full-page ul li,
-    .white-content .full-page pre {
+    .white-content .full-page h1, .white-content .full-page h2, .white-content .full-page h3, .white-content .full-page h4, .white-content .full-page h5, .white-content .full-page h6, .white-content .full-page p, .white-content .full-page ol li, .white-content .full-page ul li, .white-content .full-page pre {
      color: #1d253b; }
    .white-content .full-page .description {
      color: #9A9A9A; }
--- a/apps/static/assets/css/black-dashboard.css.map
+++ b/apps/static/assets/css/black-dashboard.css.map
--- a/apps/static/assets/css/theme-switcher.css
+++ b/apps/static/assets/css/theme-switcher.css
@ -0,0 +1,58 @@
+/* The switch - the box around the slider */
+.switch {
+    --width-of-switch: 3.5em;
+    --height-of-switch: 2em;
+    /* size of sliding icon -- sun and moon */
+    --size-of-icon: 1.4em;
+    /* it is like a inline-padding of switch */
+    --slider-offset: 0.3em;
+    position: relative;
+    width: var(--width-of-switch);
+    height: var(--height-of-switch);
+    margin-bottom: 0;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+/* The slider */
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #eaeaea;
+    transition: .4s;
+    border-radius: 30px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: var(--size-of-icon,1.4em);
+    width: var(--size-of-icon,1.4em);
+    border-radius: 20px;
+    left: var(--slider-offset,0.3em);
+    top: 50%;
+    transform: translateY(-50%);
+    background: linear-gradient(40deg,#ff0080,#ff8c00 70%);
+;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #303136;
+}
+
+input:checked + .slider:before {
+    left: calc(100% - (var(--size-of-icon,1.4em) + var(--slider-offset,0.3em)));
+    background: #303136;
+    /* change the value of second inset in box-shadow to change the angle and direction of the moon  */
+    box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
+}
--- a/apps/static/assets/js/black-dashboard.js.map
+++ b/apps/static/assets/js/black-dashboard.js.map
@ -0,0 +1 @@
+{"version":3,"sources":["_site_dashboard_free/assets/js/dashboard-free.js"],"names":["transparent","transparentDemo","fixedTop","navbar_initialized","backgroundOrange","sidebar_mini_active","toggle_initialized","$html","$","$body","$navbar_minimize_fixed","$collapse","$navbar","$tagsinput","$selectpicker","$navbar_color","$full_screen_map","$datetimepicker","$datepicker","$timepicker","seq","delays","durations","seq2","delays2","durations2","hexToRGB","hex","alpha","r","parseInt","slice","g","b","navigator","platform","indexOf","length","PerfectScrollbar","wheelSpeed","wheelPropagation","minScrollbarLength","suppressScrollX","each","this","addClass","document","ready","offset","window","scroll","scrollTop","css","top","on","closest","removeClass","blackDashboard","initMinimizeSidebar","scroll_distance","attr","checkScrollForTransparentNavbar","parent","$this","data_on_label","data","data_off_label","bootstrapSwitch","onText","offText","$toggle","misc","navbar_menu_visible","setTimeout","remove","appendTo","click","resize","isExpanded","find","hasClass","width","showSidebarMessage","simulateWindowResize","setInterval","dispatchEvent","Event","clearInterval","message","notify","icon","type","timer","placement","from","align","e","console","log"],"mappings":"AAkBA,IAAIA,aAAc,EACdC,iBAAkB,EAClBC,UAAW,EAEXC,oBAAqB,EACrBC,kBAAmB,EACnBC,qBAAsB,EACtBC,oBAAqB,EAErBC,MAAQC,EAAE,QACVC,MAAQD,EAAE,QACVE,uBAAyBF,EAAE,0BAC3BG,UAAYH,EAAE,aACdI,QAAUJ,EAAE,WACZK,WAAaL,EAAE,cACfM,cAAgBN,EAAE,iBAClBO,cAAgBP,EAAE,4BAClBQ,iBAAmBR,EAAE,oBACrBS,gBAAkBT,EAAE,mBACpBU,YAAcV,EAAE,eAChBW,YAAcX,EAAE,eAEhBY,IAAM,EAAGC,OAAS,GAAIC,UAAY,IAClCC,KAAO,EAAGC,QAAU,GAAIC,WAAa,IAuMzC,SAASC,SAASC,EAAKC,GACnB,IAAIC,EAAIC,SAASH,EAAII,MAAM,EAAG,GAAI,IAC9BC,EAAIF,SAASH,EAAII,MAAM,EAAG,GAAI,IAC9BE,EAAIH,SAASH,EAAII,MAAM,EAAG,GAAI,IAElC,OAAIH,EACO,QAAUC,EAAI,KAAOG,EAAI,KAAOC,EAAI,KAAOL,EAAQ,IAEnD,OAASC,EAAI,KAAOG,EAAI,KAAOC,EAAI,KA7MlD,WAGI,IAFqD,EAArCC,UAAUC,SAASC,QAAQ,OAE7B,CAEX,GAA8B,GAA3B5B,EAAE,eAAe6B,OACX,IAAIC,iBAAiB,cAAc,CAC1CC,WAAY,EACZC,kBAAkB,EAClBC,mBAAoB,GACpBC,iBAAiB,IAIrB,GAA4C,GAAzClC,EAAE,6BAA6B6B,OAAY,CAElC,IAAIC,iBAAiB,6BAC/B9B,EAAE,qBAAqBmC,KAAK,WAChB,IAAIL,iBAAiB9B,EAAEoC,MAAM,MAMzCrC,MAAMsC,SAAS,6BAEftC,MAAMsC,SAAS,yBA1BtB,GA8BArC,EAAEsC,UAAUC,MAAM,WAEhB,IAEIC,EADYxC,EAAE,QACOwC,WACgC,EAArCd,UAAUC,SAASC,QAAQ,OAAc5B,EAAE,OAAOA,EAAEyC,SAC1DC,OAAO,WAID,GAFH1C,EAAEoC,MAAMO,YAGrB3C,EAAE,0BAA0B4C,IAAI,UAAW,KAE3C5C,EAAE,0BAA0B4C,IAAI,UAAW,OAK/C5C,EAAEsC,UAAUI,OAAO,WACF1C,EAAEoC,MAAMO,YACLH,EAAOK,IACvB7C,EAAE,0BAA0B4C,IAAI,UAAW,KAE3C5C,EAAE,0BAA0B4C,IAAI,UAAW,OAIX,GAAhC5C,EAAE,oBAAoB6B,QAAuC,GAAxB7B,EAAE,YAAY6B,QAErD7B,EAAE,aAAa8C,GAAG,mBAAoB,WAClC9C,EAAEoC,MAAMW,QAAQ,WAAWC,YAAY,sBAAsBX,SAAS,cACvES,GAAG,mBAAoB,WACtB9C,EAAEoC,MAAMW,QAAQ,WAAWV,SAAS,sBAAsBW,YAAY,cAI5EC,eAAeC,sBAEf9C,QAAUJ,EAAE,4BACZmD,gBAAkB/C,QAAQgD,KAAK,oBAAsB,IAGV,GAAxCpD,EAAE,4BAA4B6B,SAC7BoB,eAAeI,kCACfrD,EAAEyC,QAAQK,GAAG,SAAUG,eAAeI,kCAG1CrD,EAAE,iBAAiB8C,GAAG,QAAS,WAC3B9C,EAAEoC,MAAMkB,OAAO,gBAAgBjB,SAAS,uBACzCS,GAAG,OAAQ,WACV9C,EAAEoC,MAAMkB,OAAO,gBAAgBN,YAAY,uBAI/ChD,EAAE,qBAAqBmC,KAAK,WACxBoB,MAAQvD,EAAEoC,MACVoB,cAAgBD,MAAME,KAAK,aAAe,GAC1CC,eAAiBH,MAAME,KAAK,cAAgB,GAE5CF,MAAMI,gBAAgB,CAClBC,OAAQJ,cACRK,QAASH,qBAKnB1D,EAAEsC,UAAUQ,GAAG,QAAS,iBAAkB,WACtC,IAAIgB,EAAU9D,EAAEoC,MAEhB,GAA8C,GAA3Ca,eAAec,KAAKC,oBACnBjE,MAAMiD,YAAY,YAClBC,eAAec,KAAKC,oBAAsB,EAC1CC,WAAW,WACPH,EAAQd,YAAY,WACpBhD,EAAE,cAAckE,UACjB,SAEA,CACHD,WAAW,WACPH,EAAQzB,SAAS,YAClB,KAGHrC,EADU,iCACHmE,SAAS,QAAQC,MAAM,WAC1BrE,MAAMiD,YAAY,YAClBC,eAAec,KAAKC,oBAAsB,EACtCC,WAAW,WACPH,EAAQd,YAAY,WACpBhD,EAAE,cAAckE,UAClB,OAGVnE,MAAMsC,SAAS,YACfY,eAAec,KAAKC,oBAAsB,KAIlDhE,EAAEyC,QAAQ4B,OAAO,WAIb,GAFAzD,IAAMG,KAAO,EAEiB,GAA3BP,iBAAiBqB,QAAuC,GAAxB7B,EAAE,YAAY6B,OAAY,CAC3D,IAAIyC,EAAalE,QAAQmE,KAAK,4BAA4BnB,KAAK,iBAC3DhD,QAAQoE,SAAS,aAAmC,IAApBxE,EAAEyC,QAAQgC,QAC5CrE,QAAQ4C,YAAY,YAAYX,SAAS,sBAChCjC,QAAQoE,SAAS,uBAAyBxE,EAAEyC,QAAQgC,QAAU,KAAqB,SAAdH,GAC9ElE,QAAQiC,SAAS,YAAYW,YAAY,yBAKjDC,eAAiB,CACfc,KAAK,CACDC,oBAAqB,GAGzBd,oBAAoB,WACgB,GAA7BlD,EAAE,iBAAiB6B,SACpBhC,qBAAsB,GAGxBG,EAAE,oBAAoBoE,MAAM,WACbpE,EAAEoC,MAEa,GAAvBvC,qBACCG,EAAE,QAAQgD,YAAY,gBACtBnD,qBAAsB,EACtBoD,eAAeyB,mBAAmB,iCAElC1E,EAAE,QAAQqC,SAAS,gBACnBxC,qBAAsB,EACtBoD,eAAeyB,mBAAmB,8BAItC,IAAIC,EAAuBC,YAAY,WACnCnC,OAAOoC,cAAc,IAAIC,MAAM,YACjC,KAGFb,WAAW,WACPc,cAAcJ,IAChB,QAIVD,mBAAoB,SAASM,GAC3B,IACEhF,EAAEiF,OAAO,CACLC,KAAM,yBACNF,QAASA,GACT,CACEG,KAAM,OACNC,MAAO,IACPC,UAAW,CACPC,KAAM,MACNC,MAAO,WAGjB,MAAOC,GACPC,QAAQC,IAAI"}
--- a/apps/static/assets/js/black-dashboard.min.js
+++ b/apps/static/assets/js/black-dashboard.min.js
@ -1 +1,2 @@
 var transparent=!0,transparentDemo=!0,fixedTop=!1,navbar_initialized=!1,backgroundOrange=!1,sidebar_mini_active=!1,toggle_initialized=!1,$html=$("html"),$body=$("body"),$navbar_minimize_fixed=$(".navbar-minimize-fixed"),$collapse=$(".collapse"),$navbar=$(".navbar"),$tagsinput=$(".tagsinput"),$selectpicker=$(".selectpicker"),$navbar_color=$(".navbar[color-on-scroll]"),$full_screen_map=$(".full-screen-map"),$datetimepicker=$(".datetimepicker"),$datepicker=$(".datepicker"),$timepicker=$(".timepicker"),seq=0,delays=80,durations=500,seq2=0,delays2=80,durations2=500;function hexToRGB(a,e){var i=parseInt(a.slice(1,3),16),n=parseInt(a.slice(3,5),16),s=parseInt(a.slice(5,7),16);return e?"rgba("+i+", "+n+", "+s+", "+e+")":"rgb("+i+", "+n+", "+s+")"}!function(){if(-1<navigator.platform.indexOf("Win")){if(0!=$(".main-panel").length)new PerfectScrollbar(".main-panel",{wheelSpeed:2,wheelPropagation:!0,minScrollbarLength:20,suppressScrollX:!0});if(0!=$(".sidebar .sidebar-wrapper").length){new PerfectScrollbar(".sidebar .sidebar-wrapper");$(".table-responsive").each(function(){new PerfectScrollbar($(this)[0])})}$html.addClass("perfect-scrollbar-on")}else $html.addClass("perfect-scrollbar-off")}(),$(document).ready(function(){var a=$(".row").offset();(-1<navigator.platform.indexOf("Win")?$(".ps"):$(window)).scroll(function(){50<$(this).scrollTop()?$(".navbar-minimize-fixed").css("opacity","1"):$(".navbar-minimize-fixed").css("opacity","0")}),$(document).scroll(function(){$(this).scrollTop()>a.top?$(".navbar-minimize-fixed").css("opacity","1"):$(".navbar-minimize-fixed").css("opacity","0")}),0==$(".full-screen-map").length&&0==$(".bd-docs").length&&$(".collapse").on("show.bs.collapse",function(){$(this).closest(".navbar").removeClass("navbar-transparent").addClass("bg-white")}).on("hide.bs.collapse",function(){$(this).closest(".navbar").addClass("navbar-transparent").removeClass("bg-white")}),blackDashboard.initMinimizeSidebar(),$navbar=$(".navbar[color-on-scroll]"),scroll_distance=$navbar.attr("color-on-scroll")||500,0!=$(".navbar[color-on-scroll]").length&&(blackDashboard.checkScrollForTransparentNavbar(),$(window).on("scroll",blackDashboard.checkScrollForTransparentNavbar)),$(".form-control").on("focus",function(){$(this).parent(".input-group").addClass("input-group-focus")}).on("blur",function(){$(this).parent(".input-group").removeClass("input-group-focus")}),$(".bootstrap-switch").each(function(){$this=$(this),data_on_label=$this.data("on-label")||"",data_off_label=$this.data("off-label")||"",$this.bootstrapSwitch({onText:data_on_label,offText:data_off_label})})}),$(document).on("click",".navbar-toggle",function(){var a=$(this);if(1==blackDashboard.misc.navbar_menu_visible)$html.removeClass("nav-open"),blackDashboard.misc.navbar_menu_visible=0,setTimeout(function(){a.removeClass("toggled"),$(".bodyClick").remove()},550);else{setTimeout(function(){a.addClass("toggled")},580);$('<div class="bodyClick"></div>').appendTo("body").click(function(){$html.removeClass("nav-open"),blackDashboard.misc.navbar_menu_visible=0,setTimeout(function(){a.removeClass("toggled"),$(".bodyClick").remove()},550)}),$html.addClass("nav-open"),blackDashboard.misc.navbar_menu_visible=1}}),$(window).resize(function(){if(seq=seq2=0,0==$full_screen_map.length&&0==$(".bd-docs").length){var a=$navbar.find('[data-toggle="collapse"]').attr("aria-expanded");$navbar.hasClass("bg-white")&&991<$(window).width()?$navbar.removeClass("bg-white").addClass("navbar-transparent"):$navbar.hasClass("navbar-transparent")&&$(window).width()<991&&"false"!=a&&$navbar.addClass("bg-white").removeClass("navbar-transparent")}}),blackDashboard={misc:{navbar_menu_visible:0},initMinimizeSidebar:function(){0!=$(".sidebar-mini").length&&(sidebar_mini_active=!0),$("#minimizeSidebar").click(function(){$(this);1==sidebar_mini_active?($("body").removeClass("sidebar-mini"),sidebar_mini_active=!1,blackDashboard.showSidebarMessage("Sidebar mini deactivated...")):($("body").addClass("sidebar-mini"),sidebar_mini_active=!0,blackDashboard.showSidebarMessage("Sidebar mini activated..."));var a=setInterval(function(){window.dispatchEvent(new Event("resize"))},180);setTimeout(function(){clearInterval(a)},1e3)})},showSidebarMessage:function(a){try{$.notify({icon:"tim-icons ui-1_bell-53",message:a},{type:"info",timer:4e3,placement:{from:"top",align:"right"}})}catch(a){console.log("Notify library is missing, please make sure you have the notifications library added.")}}};
+//# sourceMappingURL=_site_dashboard_free/assets/js/dashboard-free.js.map
--- a/apps/static/assets/js/themeSettings.js
+++ b/apps/static/assets/js/themeSettings.js
@ -0,0 +1,148 @@
+$(document).ready(function() {
+    $().ready(function() {
+        $sidebar = $('.sidebar');
+        $navbar = $('.navbar');
+        $main_panel = $('.main-panel');
+
+        $full_page = $('.full-page');
+
+        $sidebar_responsive = $('body > .navbar-collapse');
+        sidebar_mini_active = true;
+        white_color = false;
+
+        window_width = $(window).width();
+
+        fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
+
+
+
+        $('.fixed-plugin a').click(function(event) {
+            if ($(this).hasClass('switch-trigger')) {
+                if (event.stopPropagation) {
+                    event.stopPropagation();
+                } else if (window.event) {
+                    window.event.cancelBubble = true;
+                }
+            }
+        });
+
+        $('.fixed-plugin .background-color span').click(function() {
+            $(this).siblings().removeClass('active');
+            $(this).addClass('active');
+
+            var new_color = $(this).data('color');
+
+            if ($sidebar.length != 0) {
+                $sidebar.attr('data', new_color);
+            }
+
+            if ($main_panel.length != 0) {
+                $main_panel.attr('data', new_color);
+            }
+
+            if ($full_page.length != 0) {
+                $full_page.attr('filter-color', new_color);
+            }
+
+            if ($sidebar_responsive.length != 0) {
+                $sidebar_responsive.attr('data', new_color);
+            }
+        });
+
+        $('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function() {
+            var $btn = $(this);
+
+            if (sidebar_mini_active == true) {
+                $('body').removeClass('sidebar-mini');
+                sidebar_mini_active = false;
+                blackDashboard.showSidebarMessage('Sidebar mini deactivated...');
+            } else {
+                $('body').addClass('sidebar-mini');
+                sidebar_mini_active = true;
+                blackDashboard.showSidebarMessage('Sidebar mini activated...');
+            }
+
+            // we simulate the window Resize so the charts will get updated in realtime.
+            var simulateWindowResize = setInterval(function() {
+                window.dispatchEvent(new Event('resize'));
+            }, 180);
+
+            // we stop the simulation of Window Resize after the animations are completed
+            setTimeout(function() {
+                clearInterval(simulateWindowResize);
+            }, 1000);
+        });
+
+        $('.switch-change-color input').on("switchChange.bootstrapSwitch", function() {
+            var $btn = $(this);
+
+            if (white_color == true) {
+
+                $('body').addClass('change-background');
+                setTimeout(function() {
+                    $('body').removeClass('change-background');
+                    $('body').removeClass('white-content');
+                }, 900);
+                white_color = false;
+            } else {
+
+                $('body').addClass('change-background');
+                setTimeout(function() {
+                    $('body').removeClass('change-background');
+                    $('body').addClass('white-content');
+                }, 900);
+
+                white_color = true;
+            }
+
+
+        });
+
+        $('.light-badge').click(function() {
+            $('body').addClass('white-content');
+            localStorage.setItem("light_color", "true");
+            $('.switch input').prop("checked", false)
+        });
+
+        $('.dark-badge').click(function() {
+            $('body').removeClass('white-content');
+            localStorage.setItem("light_color", "false");
+            $('.switch input').prop("checked", true)
+        });
+    });
+});
+
+$(document).ready(function () {
+    let light_color = localStorage.getItem("light_color");
+
+    if (light_color === "true") {
+        $('body').addClass('white-content');
+        $('.switch input').prop("checked", false)
+    } else {
+        $('.switch input').prop("checked", true)
+    }
+
+
+    $('.switch input').on("change", function () {
+        light_color = localStorage.getItem("light_color");
+
+        if (light_color === "true") {
+            localStorage.setItem("light_color", "false");
+
+            $('body').addClass('change-background');
+            setTimeout(function () {
+                $('body').removeClass('change-background');
+                $('body').removeClass('white-content');
+            }, 400);
+
+        } else {
+            localStorage.setItem("light_color", "true");
+
+            $('body').addClass('change-background');
+            setTimeout(function () {
+                $('body').removeClass('change-background');
+                $('body').addClass('white-content');
+            }, 400);
+        }
+    });
+})
--- a/apps/static/assets/package.json
+++ b/apps/static/assets/package.json
@ -1,42 +0,0 @@
-{
-    "name": "generic-compilation-script",
-    "version": "1.0.0",
-    "description": "Generic Builder",
-    "main": "gulpfile.js",
-    "author": "AppSeed",
-    "keywords": [
-        "css",
-        "sass",
-        "gulp",
-        "web"
-    ],
-    "homepage": "https://appseed.us",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/app-generator"
-    },
-    "bugs": {
-        "email": "support@appseed.us"
-    },
-    "license": "MIT License",
-    "devDependencies": {
-        "browser-sync": "^2.27.4",
-        "del": "^6.0.0",
-        "gulp": "^4.0.2",
-        "gulp-autoprefixer": "^8.0.0",
-        "gulp-clean-css": "^4.3.0",
-        "gulp-cssbeautify": "^3.0.0",
-        "node-sass": "^6.0.1",
-        "gulp-file-include": "^2.3.0",
-        "gulp-header": "^2.0.9",
-        "gulp-htmlmin": "^5.0.1",
-        "gulp-npm-dist": "^1.0.3",
-        "gulp-plumber": "^1.2.1",
-        "gulp-rename": "^2.0.0",
-        "gulp-sass": "^5.0.0",
-        "gulp-sourcemaps": "^3.0.0",
-        "gulp-uglify": "^3.0.2",
-        "gulp-wait": "^0.0.2",
-        "merge-stream": "^2.0.0"
-    }
-}
--- a/apps/static/assets/scss/black-dashboard/custom/_variables.scss
+++ b/apps/static/assets/scss/black-dashboard/custom/_variables.scss
@ -96,14 +96,14 @@ $colors: map-merge((
 $default-color-opacity:      rgba(182, 182, 182, .6) !default;
 $orange-color:               #f96332 !default;

-$default:       #344675 !default;
-$primary:       #e14eca !default;
-$secondary:     #f4f5f7 !default;
-$success:       #00f2c3 !default;
-$info:          #1d8cf8 !default;
-$warning:       #ff8d72 !default;
-$danger:        #fd5d93 !default;
-$black:         #222a42 !default;
+$default:       #344675 !default; // EDIT for customization
+$primary:       #e14eca !default; // EDIT for customization
+$secondary:     #f4f5f7 !default; // EDIT for customization
+$success:       #00f2c3 !default; // EDIT for customization
+$info:          #1d8cf8 !default; // EDIT for customization
+$warning:       #ff8d72 !default; // EDIT for customization
+$danger:        #fd5d93 !default; // EDIT for customization
+$black:         #222a42 !default; // EDIT for customization


 // gradient
--- a/apps/static/assets/scss/black-dashboard/custom/_white-content.scss
+++ b/apps/static/assets/scss/black-dashboard/custom/_white-content.scss
@ -1,272 +1,299 @@
-.white-content {
+.white-content{
+
+  background: $light-bg;
+
+  .navbar.navbar-transparent .navbar-brand{
+    color: $black-states;
+  }
+
+  .navbar.navbar-transparent .navbar-toggler-bar{
+    background: $black-states;
+  }
+  .navbar.navbar-transparent .navbar-nav li a:not(.dropdown-item){
+      color: $black-states;
+      & i{
+        color: $black-states;
+      }
+  }
+
+  .navbar.navbar-transparent .navbar-minimize button i{
+    color: $black-states;
+  }
+
+  .navbar.navbar-transparent .search-bar.input-group i{
+    color: $black-states;
+  }
+  .navbar.navbar-transparent .search-bar.input-group .form-control{
+    color: $default;
+    &::placeholder{
+      color: $dark-gray;
+    }
+  }
+
+  .sidebar{
+    box-shadow: 0 2px 22px 0 rgba(0,0,0,.1), 0 4px 20px 0 rgba(0,0,0,.15);
+    p{
+      color: $opacity-8;
+    }
+  }
+
+  .main-panel{
    background: $light-bg;
-    .navbar.navbar-transparent .navbar-brand {
-        color: $black-states;
-    }
-    .navbar.navbar-transparent .navbar-toggler-bar {
-        background: $black-states;
-    }
-    .navbar.navbar-transparent .navbar-nav li a:not(.dropdown-item) {
-        color: $black-states;
-        & i {
-            color: $black-states;
-        }
-    }
-    .navbar.navbar-transparent .navbar-minimize button i {
-        color: $black-states;
-    }
-    .navbar.navbar-transparent .search-bar.input-group i {
-        color: $black-states;
-    }
-    .navbar.navbar-transparent .search-bar.input-group .form-control {
-        color: $default;
-        &::placeholder {
-            color: $dark-gray;
-        }
-    }
-    .sidebar {
-        box-shadow: 0 2px 22px 0 rgba(0, 0, 0, .1), 0 4px 20px 0 rgba(0, 0, 0, .15);
-        p {
-            color: $opacity-8;
-        }
-    }
-    .main-panel {
-        background: $light-bg;
-    }
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    p,
-    ol li,
-    ul li,
-    pre {
-        color: $black-states;
-    }
-    .font-icon-detail i {
-        color: $black;
-    }
-    .btn:not([data-action]):hover {
-        box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
-    }
-    .btn-neutral.btn-link {
-        color: rgba($black, 0.7);
-    }
-    //style for inputs
-    @include form-control-placeholder(rgba($black, 0.4), 1);
-    .has-danger {
-        .form-control,
-        .input-group-prepend .input-group-text {
-            border-color: $danger-states;
-        }
-    }
-    .input-group-prepend .input-group-text {
-        border-color: rgba($black-states, 0.5);
-        color: $black-states;
-    }
-    .form-control {
-        color: $black;
-        border-color: rgba($black-states, 0.5);
-        &:focus {
-            border-color: $primary;
-        }
-    }
-    .form-group.no-border,
-    .input-group.no-border {
-        .form-control,
-        .form-control+.input-group-prepend .input-group-text,
-        .form-control+.input-group-append .input-group-text,
-        .input-group-prepend .input-group-text,
-        .input-group-append .input-group-text {
-            background-color: $opacity-gray-3;
-            &:focus,
-            &:active,
-            &:active {
-                background-color: $opacity-gray-5;
-            }
-        }
-        .form-control {
-            &:focus {
-                &+.input-group-prepend .input-group-text,
-                &+.input-group-append .input-group-text {
-                    background-color: $transparent-bg;
-                }
-            }
-        }
-    }
-    .input-group[disabled] {
-        .input-group-prepend .input-group-text,
-        .input-group-append .input-group-text {
-            background-color: $black;
-        }
-    }
-    .form-control[disabled],
-    .form-control[readonly],
-    fieldset[disabled] .form-control {
-        background: $light-gray;
-        border-color: rgba($black-states, 0.3);
-    }
-    .input-group-focus {
-        .input-group-prepend .input-group-text,
-        .input-group-append .input-group-text,
-        .form-control {
-            border-color: $primary;
-        }
-        &.no-border {
-            .input-group-prepend .input-group-text,
-            .input-group-append .input-group-text {
-                background-color: $opacity-gray-5;
-            }
-        }
-    }
-    .input-group-prepend .input-group-text {
-        border-right: none;
-    }
-    .input-group-append .input-group-text {
-        border-left: none;
-    }
-    .has-danger .form-control:focus,
-    .has-success.input-group-focus .input-group-append .input-group-text,
-    .has-success.input-group-focus .input-group-prepend .input-group-text {
+  }
+
+  h1, h2, h3, h4, h5, h6, p, ol li, ul li, pre {
+    color: $black-states;
+  }
+
+  .font-icon-detail i{
+    color: $black;
+  }
+
+  .btn:not([data-action]):hover{
+    box-shadow:  0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+  }
+
+  .btn-neutral.btn-link{
+    color: rgba($black, 0.7);
+  }
+
+  //style for inputs
+
+  @include form-control-placeholder(rgba($black,0.4), 1);
+    .has-danger{
+      .form-control, .input-group-prepend .input-group-text{
        border-color: $danger-states;
+      }
    }
-    .has-success .form-control:focus,
-    .has-success.input-group-focus .input-group-append .input-group-text,
-    .has-success.input-group-focus .input-group-prepend .input-group-text {
-        border-color: darken($success, 10%);
+
+    .input-group-prepend .input-group-text{
+      border-color: rgba($black-states,0.5);
+      color: $black-states;
    }
-    .btn.btn-link {
-        &:hover,
-        &:active,
-        &:focus {
-            color: $dark-gray !important;
+
+    .form-control{
+      color: $black;
+      border-color: rgba($black-states,0.5);
+      &:focus{
+        border-color: $primary;
+      }
+    }
+
+  .form-group.no-border,
+  .input-group.no-border{
+      .form-control,
+      .form-control + .input-group-prepend .input-group-text,
+      .form-control + .input-group-append .input-group-text,
+      .input-group-prepend .input-group-text,
+      .input-group-append .input-group-text{
+          background-color: $opacity-gray-3;
+          &:focus,
+          &:active,
+          &:active{
+              background-color: $opacity-gray-5;
+          }
+      }
+
+      .form-control{
+          &:focus{
+              & + .input-group-prepend .input-group-text,
+              & + .input-group-append .input-group-text{
+
+                  background-color: $transparent-bg;
+              }
+          }
+      }
+
+
+  }
+
+  .input-group[disabled]{
+      .input-group-prepend .input-group-text,
+      .input-group-append .input-group-text{
+          background-color: $black;
+      }
+  }
+
+  .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{
+    background: $light-gray;
+    border-color: rgba($black-states,0.3);
+  }
+
+  .input-group-focus{
+      .input-group-prepend .input-group-text,
+      .input-group-append .input-group-text,
+      .form-control{
+        border-color: $primary;
+      }
+
+      &.no-border{
+          .input-group-prepend .input-group-text,
+          .input-group-append .input-group-text{
+
+              background-color: $opacity-gray-5;
+          }
+      }
+  }
+  .input-group-prepend .input-group-text {
+      border-right: none;
+  }
+
+  .input-group-append .input-group-text {
+      border-left: none;
+  }
+
+  .has-danger .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
+    border-color: $danger-states;
+  }
+
+  .has-success .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
+    border-color: darken($success, 10%);
+  }
+
+  .btn.btn-link{
+    &:hover,&:active, &:focus{
+      color: $dark-gray !important;
+    }
+  }
+
+  .btn-group .btn.active{
+    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+  }
+
+  .card:not(.card-white){
+    background: $white;
+    box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.05);
+    .card-header{
+      color: $black;
+      a[data-toggle="collapse"]{
+        color: $black;
+      }
+    }
+    .card-header .card-title, .card-body .card-title{
+      color: $black-states;
+    }
+
+    .card-body{
+      .card-category, .card-description{
+        color: $black-states;
+      }
+    }
+
+
+    label:not(.btn){
+      color: $default;
+    }
+
+
+     &.nav-pills .nav-item .nav-link {
+        color: $nav-gray;
+        background-color: hsla(0,0%,87%,.3);
+        &:not(.active):hover{
+          background: hsla(0,0%,87%,.5);
+        }
+        &.active{
+          color: $white;
+
        }
    }
-    .btn-group .btn.active {
-        box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
+
+    .tab-content .tab-pane {
+        color: $nav-gray;
    }
-    .card:not(.card-white) {
-        background: $white;
-        box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.05);
-        .card-header {
+
+
+    .card{
+      box-shadow: none;
+    }
+
+    &.card-plain{
+      background: $transparent-bg;
+      box-shadow: none;
+    }
+
+    &.card-tasks{
+      .card-body{
+        i{
+          color: rgba(34,42,66,0.7);
+          &:hover{
            color: $black;
-            a[data-toggle="collapse"] {
-                color: $black;
-            }
-        }
-        .card-header .card-title,
-        .card-body .card-title {
-            color: $black-states;
-        }
-        .card-body {
-            .card-category,
-            .card-description {
-                color: $black-states;
-            }
-        }
-        label:not(.btn) {
-            color: $default;
-        }
-        &.nav-pills .nav-item .nav-link {
-            color: $nav-gray;
-            background-color: hsla(0, 0%, 87%, .3);
-            &:not(.active):hover {
-                background: hsla(0, 0%, 87%, .5);
-            }
-            &.active {
-                color: $white;
-            }
-        }
-        .tab-content .tab-pane {
-            color: $nav-gray;
-        }
-        .card {
-            box-shadow: none;
-        }
-        &.card-plain {
-            background: $transparent-bg;
-            box-shadow: none;
-        }
-        &.card-tasks {
-            .card-body {
-                i {
-                    color: rgba(34, 42, 66, 0.7);
-                    &:hover {
-                        color: $black;
-                    }
-                }
-            }
+          }
        }
+      }
    }
-    .table {
-        >tbody>tr>td {
-            color: rgba($black, 0.7) !important;
-        }
-        >thead>tr>th,
-        >tbody>tr>th,
-        >tfoot>tr>th,
-        >thead>tr>td,
-        >tbody>tr>td,
-        >tfoot>tr>td {
-            border-color: rgba($black, 0.2);
-            padding: 12px 7px;
-            vertical-align: middle;
-        }
-        >thead>tr>th,
-        button.btn-neutral.btn-link {
-            color: rgba($black, 0.7);
-        }
+  }
+
+  .table{
+
+      > tbody > tr > td {
+        color: rgba($black, 0.7) !important;
+
    }
-    .footer ul li a {
+
+    > thead > tr > th,
+    > tbody > tr > th,
+    > tfoot > tr > th,
+    > thead > tr > td,
+    > tbody > tr > td,
+    > tfoot > tr > td{
+        border-color: rgba($black, 0.2);
+        padding: 12px 7px;
+        vertical-align: middle;
+    }
+
+    > thead > tr > th, button.btn-neutral.btn-link{
+      color: rgba($black, 0.7);
+    }
+  }
+
+  .footer ul li a{
+    color: $black-states;
+  }
+
+  .footer .copyright{
+    color: $black-states;
+  }
+
+  .progress-container, .progress-container.progress.sm{
+      .progress{
+        background: rgba($black,0.1);
+        box-shadow: 0 0 0 3px rgba($black,0.1);
+        .progress-value{
+          color: $default;
+        }
+      }
+
+      .progress-badge{
        color: $black-states;
-    }
-    .footer .copyright {
-        color: $black-states;
-    }
-    .progress-container,
-    .progress-container.progress.sm {
-        .progress {
-            background: rgba($black, 0.1);
-            box-shadow: 0 0 0 3px rgba($black, 0.1);
-            .progress-value {
-                color: $default;
-            }
-        }
-        .progress-badge {
-            color: $black-states;
-        }
-    }
-    .full-page {
-        background: $light-bg;
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6,
-        p,
-        ol li,
-        ul li,
-        pre {
-            color: $black-states;
-        }
-        .description {
-            color: $dark-gray;
-        }
-        .footer ul li a {
-            color: $black-states;
-        }
-        .footer .copyright {
-            color: $black-states;
-        }
-    }
-    .nav-pills .nav-item .nav-link:not(.active) {
-        background: darken($light-bg, 10%);
-        color: $black-states;
-        &:hover {
-            background: darken($white, 20%);
-        }
-    }
+      }
+  }
+
+   .full-page{
+     background: $light-bg;
+
+     h1, h2, h3, h4, h5, h6, p, ol li, ul li, pre {
+       color: $black-states;
+     }
+
+     .description{
+       color: $dark-gray;
+     }
+
+     .footer ul li a{
+       color: $black-states;
+     }
+
+     .footer .copyright{
+       color: $black-states;
+     }
+   }
+
+   .nav-pills .nav-item .nav-link:not(.active){
+     background: darken($light-bg,10%);
+     color: $black-states;
+     &:hover{
+       background: darken($white,20%);
+
+     }
+   }
 }
--- a/apps/templates/.gitkeep
+++ b/apps/templates/.gitkeep
--- a/apps/templates/accounts/login.html
+++ b/apps/templates/accounts/login.html
@ -1,4 +1,4 @@
-{% extends "layouts/base.html" %}
+{% extends "layouts/base-fullscreen.html" %}

 {% block title %} Login {% endblock %} 

@ -7,63 +7,100 @@

 {% block content %}

-  <div class="row">
-    <div class="col-md-8">
-      <div class="card">
+    <div class="content">
+        <div class="container">
+            <div class="row pt-5">
+                <div class="col-md-6 mt-5 offset-md-3 pt-5 mt-5">
+                    <div class="card">
                        
-        <form role="form" method="post" action="">
+                        <div class="card-header text-center py-4">
+                            <h4 class="title">
+                                Sign IN
+                            </h4>

-          {{ form.hidden_tag() }} 
+                            <h6 class="card-category">
+                                {% if msg %}
+                                  <span class="text-danger">{{ msg | safe }}</span>
+                                {% else %}
+                                <span>
+                                  Add your credentials
+                                </span>
+                                {% endif %}  
+                            </h6>
+                        </div>

-          <div class="card-header">
-            <h5 class="title">Login</h5>
+                        <form role="form" method="post" action="">
                                
-            <h6 class="card-category">
-                {% if msg %}
-                  <span class="text-danger">{{ msg | safe }}</span>
-                {% else %}
-                <span>
-                  Add your credentials
-                </span>
-                {% endif %}  
-            </h6>
-          </div>
+                            {{ form.hidden_tag() }} 

-          <div class="card-body">
+                            <div class="card-body px-5 py-3"> 

-              <div class="row">
+                                <div class="row">
+                                    <div class="col-md-12 px-md-1">
+                                        <div class="form-group">
+                                            <label>Username</label>
+                                            {{ form.username(class="form-control") }}
+                                        </div>
+                                    </div>

-                <div class="col-md-3 px-md-1">
-                  <div class="form-group">
-                    <label>Username</label>
-                    {{ form.username(class="form-control") }}
-                  </div>
+                                    <div class="col-md-12 px-md-1">
+                                        <div class="form-group">
+                                            <label>Password</label>
+                                            {{ form.password(class="form-control", type="password") }}
+                                        </div>
+                                    </div>
+                                </div>
+
+                                
+                            </div>
+                            
+                            <div class="card-footer text-center">
+                                <button type="submit" name="login" class="btn btn-fill btn-primary">Login</button>
+                                
+                                <br /><br />
+
+                                <p>
+                                    Don't have an account? <a href="{{ url_for('authentication_blueprint.register') }}" class="text-primary">Register</a>                            
+                                </p>
+                            </div>
+
+                            {% if config.SOCIAL_AUTH_GITHUB %}
+
+                                <div class="text-center">
+            
+                                <span class="text-muted">or Sign IN with</span> 
+                                    
+                                    <br />
+                                    <br />
+                                    
+                                    <div class="text-center mx-auto">
+            
+                                    {% if config.SOCIAL_AUTH_GITHUB %}
+                                        <a href="{{url_for('authentication_blueprint.login_github')}}" class="btn btn-github btn-sm">
+                                        <i class="fab fa-github"></i>
+                                        </a>
+                                    {% endif %}
+            
+                                    </div>
+            
+                                </div>  
+
+                                <br />
+        
+                            {% endif %}
+
+
+                        </form>
+
+                    </div>
                </div>

-              </div>
-              <div class="row">
+            </div>
+        </div>

-                <div class="col-md-3 px-md-1">
-                  <div class="form-group">
-                    <label>Password</label>
-                    {{ form.password(class="form-control", type="password") }}
-                  </div>
-                </div>
-
-              </div>
-              
-          </div>
-          <div class="card-footer">
-            <button type="submit" name="login" class="btn btn-fill btn-primary">Login</button>
-            &nbsp; &nbsp;
-            Don't have an account? <a href="{{ url_for('authentication_blueprint.register') }}" class="text-primary">Create</a>
-          </div>
-
-        </form>
-
-      </div>
    </div>
-  </div>
+
+    <br />

 {% endblock content %}

--- a/apps/templates/accounts/register.html
+++ b/apps/templates/accounts/register.html
@ -1,4 +1,4 @@
-{% extends "layouts/base.html" %}
+{% extends "layouts/base-fullscreen.html" %}

 {% block title %} Register {% endblock %} 

@ -7,67 +7,89 @@

 {% block content %}

-  <div class="row">
-    <div class="col-md-8">
-      <div class="card">
+    <div class="content">
+        <div class="container">
+            <div class="row pt-5">
+                <div class="col-md-6 mt-5 offset-md-3 pt-5 mt-5">
+                    <div class="card">
+                        <div class="card-header text-center py-4">
+                            <h4 class="title">
+                                Sign UP
+                            </h4>

-        <form role="form" method="post" action="">
+                            <h6 class="card-category">
+                                {% if msg %}
+                                    <span class="text-danger">{{ msg | safe }}</span>
+                                {% else %}
+                                    <span>
+                                        Add your credentials
+                                    </span>
+                                {% endif %}  
+                            </h6>     

-          {{ form.hidden_tag() }} 
+                        </div>

-          <div class="card-header">
-            <h5 class="title">Register</h5>
+                        {% if success %}

-            <h6 class="card-category">
-                {% if msg %}
-                  <span class="text-danger">{{ msg | safe }}</span>
-                {% else %}
-                  Complete your credentials
-                {% endif %}  
-            </h6>
-          </div>
+                            <div class="card-footer text-center">
+                                <a href="{{ url_for('authentication_blueprint.login') }}" 
+                                   class="btn btn-fill btn-primary">Login</a>
+                            </div>

-          <div class="card-body">
+                        {% else %}

-              <div class="row">
-                <div class="col-md-3 px-md-1">
-                  <div class="form-group">
-                    <label>Username</label>
-                    {{ form.username(class="form-control") }}
-                  </div>
+                            <form role="form" method="post" action="">
+            
+                                {{ form.hidden_tag() }} 
+
+                                <div class="card-body px-5 py-3">
+
+                                    <div class="row">
+                                        <div class="col-md-12 px-md-1">
+                                            <div class="form-group">
+                                                <label>Username</label>
+                                                {{ form.username(class="form-control") }}
+                                            </div>
+                                        </div>
+
+                                        <div class="col-md-12 px-md-1">
+                                            <div class="form-group">
+                                                <label>Email</label>
+                                                {{ form.email(class="form-control", type="email") }}
+                                            </div>
+                                        </div>
+
+                                        <div class="col-md-12 px-md-1">
+                                            <div class="form-group">
+                                                <label>Password</label>
+                                                {{ form.password(class="form-control", type="password") }}
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    
+                                </div>
+                                <div class="card-footer text-center">
+                                    <button type="submit" name="register" class="btn btn-fill btn-primary">Register</button>
+
+                                    <br /><br />
+                                    
+                                    <p>
+                                        Have an account? <a href="{{ url_for('authentication_blueprint.login') }}" class="text-primary">Login</a>
+                                    </p> 
+                                </div>
+                            
+                            </form>
+
+                        {% endif %} 
+
+                    </div>
                </div>
-              </div>

-              <div class="row">
-                <div class="col-md-3 px-md-1">
-                  <div class="form-group">
-                    <label>Email</label>
-                    {{ form.email(class="form-control", type="email") }}
-                  </div>
-                </div>
-              </div>
+            </div>
+        </div>

-              <div class="row">
-                <div class="col-md-3 px-md-1">
-                  <div class="form-group">
-                    <label>Password</label>
-                    {{ form.password(class="form-control", type="password") }}
-                  </div>
-                </div>
-              </div>
-              
-          </div>
-          <div class="card-footer">
-            <button type="submit" name="register" class="btn btn-fill btn-primary">Register</button>
-            &nbsp; &nbsp;
-            Have an account? <a href="{{ url_for('authentication_blueprint.login') }}" class="text-primary">Login</a>
-          </div>
-
-        </form>
-
-      </div>
    </div>
-  </div>

 {% endblock content %}

--- a/apps/templates/home/icons.html
+++ b/apps/templates/home/icons.html
@ -0,0 +1,630 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} UI Icons {% endblock %} 
+
+<!-- Specific Page CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+  <div class="content">
+    <div class="row">
+      <div class="col-md-12">
+        <div class="card">
+          <div class="card-header">
+            <h5 class="title">100 Awesome Nucleo Icons</h5>
+            <p class="category">Handcrafted by our friends from <a href="https://nucleoapp.com/?ref=1712">NucleoApp</a></p>
+          </div>
+          <div class="card-body all-icons">
+            <div class="row">
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-alert-circle-exc"></i>
+                  <p>icon-alert-circle-exc</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-align-center"></i>
+                  <p>icon-align-center</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-align-left-2"></i>
+                  <p>icon-align-left-2</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-app"></i>
+                  <p>icon-app</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-atom"></i>
+                  <p>icon-atom</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-attach-87"></i>
+                  <p>icon-attach-87</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-badge"></i>
+                  <p>icon-badge</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-bag-16"></i>
+                  <p>icon-bag-16</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-bank"></i>
+                  <p>icon-bank</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-basket-simple"></i>
+                  <p>icon-basket-simple</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-bell-55"></i>
+                  <p>icon-bell-55</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-bold"></i>
+                  <p>icon-bold</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-book-bookmark"></i>
+                  <p>icon-book-bookmark</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-double-right"></i>
+                  <p>icon-double-right</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-bulb-63"></i>
+                  <p>icon-bulb-63</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-bullet-list-67"></i>
+                  <p>icon-bullet-list-67</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-bus-front-12"></i>
+                  <p>icon-bus-front-12</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-button-power"></i>
+                  <p>icon-button-power</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-camera-18"></i>
+                  <p>icon-camera-18</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-calendar-60"></i>
+                  <p>icon-calendar-60</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-caps-small"></i>
+                  <p>icon-caps-small</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-cart"></i>
+                  <p>icon-cart</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-chart-bar-32"></i>
+                  <p>icon-chart-bar-32</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-chart-pie-36"></i>
+                  <p>icon-chart-pie-36</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-chat-33"></i>
+                  <p>icon-chat-33</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-check-2"></i>
+                  <p>icon-check-2</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-cloud-download-93"></i>
+                  <p>icon-cloud-download-93</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-cloud-upload-94"></i>
+                  <p>icon-cloud-upload-94</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-coins"></i>
+                  <p>icon-coins</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-compass-05"></i>
+                  <p>icon-compass-05</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-controller"></i>
+                  <p>icon-controller</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-credit-card"></i>
+                  <p>icon-credit-card</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-delivery-fast"></i>
+                  <p>icon-delivery-fast</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-email-85"></i>
+                  <p>icon-email-85</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-gift-2"></i>
+                  <p>icon-gift-2</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-globe-2"></i>
+                  <p>icon-globe-2</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-headphones"></i>
+                  <p>icon-headphones</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-heart-2"></i>
+                  <p>icon-heart-2</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-html5"></i>
+                  <p>icon-html5</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-double-left"></i>
+                  <p>icon-double-left</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-image-02"></i>
+                  <p>icon-image-02</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-istanbul"></i>
+                  <p>icon-istanbul</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-key-25"></i>
+                  <p>icon-key-25</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-laptop"></i>
+                  <p>icon-laptop</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-light-3"></i>
+                  <p>icon-light-3</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-link-72"></i>
+                  <p>icon-link-72</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-lock-circle"></i>
+                  <p>icon-lock-circle</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-map-big"></i>
+                  <p>icon-map-big</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-minimal-down"></i>
+                  <p>icon-minimal-down</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-minimal-left"></i>
+                  <p>icon-minimal-left</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-minimal-right"></i>
+                  <p>icon-minimal-right</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-minimal-up"></i>
+                  <p>icon-minimal-up</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-mobile"></i>
+                  <p>icon-mobile</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-molecule-40"></i>
+                  <p>icon-molecule-40</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-money-coins"></i>
+                  <p>icon-money-coins</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-notes"></i>
+                  <p>icon-notes</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-palette"></i>
+                  <p>icon-palette</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-paper"></i>
+                  <p>icon-paper</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-pin"></i>
+                  <p>icon-pin</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-planet"></i>
+                  <p>icon-planet</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-puzzle-10"></i>
+                  <p>icon-puzzle-10</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-pencil"></i>
+                  <p>icon-pencil</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-satisfied"></i>
+                  <p>icon-satisfied</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-scissors"></i>
+                  <p>icon-scissors</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-send"></i>
+                  <p>icon-send</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-settings-gear-63"></i>
+                  <p>icon-settings-gear-63</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-settings"></i>
+                  <p>icon-settings</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-wifi"></i>
+                  <p>icon-wifi</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-single-02"></i>
+                  <p>icon-single-02</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-single-copy-04"></i>
+                  <p>icon-single-copy-04</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-sound-wave"></i>
+                  <p>icon-sound-wave</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-spaceship"></i>
+                  <p>icon-spaceship</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-square-pin"></i>
+                  <p>icon-square-pin</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-support-17"></i>
+                  <p>icon-support-17</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-tablet-2"></i>
+                  <p>icon-tablet-2</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-tag"></i>
+                  <p>icon-tag</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-tap-02"></i>
+                  <p>icon-tap-02</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-tie-bow"></i>
+                  <p>icon-tie-bow</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-time-alarm"></i>
+                  <p>icon-time-alarm</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-trash-simple"></i>
+                  <p>icon-trash-simple</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-trophy"></i>
+                  <p>icon-trophy</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-tv-2"></i>
+                  <p>icon-tv-2</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-upload"></i>
+                  <p>icon-upload</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-user-run"></i>
+                  <p>icon-user-run</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-vector"></i>
+                  <p>icon-vector</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-video-66"></i>
+                  <p>icon-video-66</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-wallet-43"></i>
+                  <p>icon-wallet-43</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-volume-98"></i>
+                  <p>icon-volume-98</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-watch-time"></i>
+                  <p>icon-watch-time</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-world"></i>
+                  <p>icon-world</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-zoom-split"></i>
+                  <p>icon-zoom-split</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-refresh-01"></i>
+                  <p>icon-refresh-01</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-refresh-02"></i>
+                  <p>icon-refresh-02</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-shape-star"></i>
+                  <p>icon-shape-star</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-components"></i>
+                  <p>icon-components</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-triangle-right-17"></i>
+                  <p>icon-triangle-right-17</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-button-pause"></i>
+                  <p>icon-button-pause</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-simple-remove"></i>
+                  <p>icon-simple-remove</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-simple-add"></i>
+                  <p>icon-simple-add</p>
+                </div>
+              </div>
+              <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
+                <div class="font-icon-detail">
+                  <i class="tim-icons icon-simple-delete"></i>
+                  <p>icon-simple-delete</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/index.html
+++ b/apps/templates/home/index.html
@ -7,375 +7,387 @@

 {% block content %}

-    <div class="row">
-
-      <div class="col-12">
-        <div class="card card-chart">
-          <div class="card-header ">
-            <div class="row">
-              <div class="col-sm-6 text-left">
-                <h5 class="card-category">Total Shipments</h5>
-                <h2 class="card-title">Performance</h2>
-              </div>
-              <div class="col-sm-6">
-                <div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
-                  <label class="btn btn-sm btn-primary btn-simple active" id="0">
-                    <input type="radio" name="options" checked>
-                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Accounts</span>
-                    <span class="d-block d-sm-none">
-                      <i class="tim-icons icon-single-02"></i>
+    <div class="content">
+        <div class="row">
+            <div class="col-12">
+                <div class="card card-chart">
+                    <div class="card-header ">
+                        <div class="row">
+                            <div class="col-sm-6 text-left">
+                                <h5 class="card-category">Total Shipments</h5>
+                                <h2 class="card-title">Performance</h2>
+                            </div>
+                            <div class="col-sm-6">
+                                <div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
+                                    <label class="btn btn-sm btn-primary btn-simple active" id="0">
+                                        <input type="radio" name="options" checked>
+                                        <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Accounts</span>
+                                        <span class="d-block d-sm-none">
+                        <i class="tim-icons icon-single-02"></i>
                    </span>
-                  </label>
-                  <label class="btn btn-sm btn-primary btn-simple" id="1">
-                    <input type="radio" class="d-none d-sm-none" name="options">
-                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Purchases</span>
-                    <span class="d-block d-sm-none">
-                      <i class="tim-icons icon-gift-2"></i>
+                                    </label>
+                                    <label class="btn btn-sm btn-primary btn-simple" id="1">
+                                        <input type="radio" class="d-none d-sm-none" name="options">
+                                        <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Purchases</span>
+                                        <span class="d-block d-sm-none">
+                        <i class="tim-icons icon-gift-2"></i>
                    </span>
-                  </label>
-                  <label class="btn btn-sm btn-primary btn-simple" id="2">
-                    <input type="radio" class="d-none" name="options">
-                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Sessions</span>
-                    <span class="d-block d-sm-none">
-                      <i class="tim-icons icon-tap-02"></i>
+                                    </label>
+                                    <label class="btn btn-sm btn-primary btn-simple" id="2">
+                                        <input type="radio" class="d-none" name="options">
+                                        <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Sessions</span>
+                                        <span class="d-block d-sm-none">
+                        <i class="tim-icons icon-tap-02"></i>
                    </span>
-                  </label>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <div class="chart-area">
+                            <canvas id="chartBig1"></canvas>
+                        </div>
+                    </div>
                </div>
-              </div>
            </div>
-          </div>
-          <div class="card-body">
-            <div class="chart-area">
-              <canvas id="chartBig1"></canvas>
-            </div>
-          </div>
        </div>
-      </div>
-
-    </div>
-    <div class="row">
-      <div class="col-lg-4">
-        <div class="card card-chart">
-          <div class="card-header">
-            <h5 class="card-category">Total Shipments</h5>
-            <h3 class="card-title"><i class="tim-icons icon-bell-55 text-primary"></i> 763,215</h3>
-          </div>
-          <div class="card-body">
-            <div class="chart-area">
-              <canvas id="chartLinePurple"></canvas>
+        <div class="row">
+            <div class="col-lg-4">
+                <div class="card card-chart">
+                    <div class="card-header">
+                        <h5 class="card-category">Total Shipments</h5>
+                        <h3 class="card-title"><i class="tim-icons icon-bell-55 text-primary"></i> 763,215</h3>
+                    </div>
+                    <div class="card-body">
+                        <div class="chart-area">
+                            <canvas id="chartLinePurple"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-4">
+                <div class="card card-chart">
+                    <div class="card-header">
+                        <h5 class="card-category">Daily Sales</h5>
+                        <h3 class="card-title"><i class="tim-icons icon-delivery-fast text-info"></i> 3,500€</h3>
+                    </div>
+                    <div class="card-body">
+                        <div class="chart-area">
+                            <canvas id="CountryChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-4">
+                <div class="card card-chart">
+                    <div class="card-header">
+                        <h5 class="card-category">Completed Tasks</h5>
+                        <h3 class="card-title"><i class="tim-icons icon-send text-success"></i> 12,100K</h3>
+                    </div>
+                    <div class="card-body">
+                        <div class="chart-area">
+                            <canvas id="chartLineGreen"></canvas>
+                        </div>
+                    </div>
+                </div>
            </div>
-          </div>
        </div>
-      </div>
-      <div class="col-lg-4">
-        <div class="card card-chart">
-          <div class="card-header">
-            <h5 class="card-category">Daily Sales</h5>
-            <h3 class="card-title"><i class="tim-icons icon-delivery-fast text-info"></i> 3,500€</h3>
-          </div>
-          <div class="card-body">
-            <div class="chart-area">
-              <canvas id="CountryChart"></canvas>
+        <div class="row">
+            <div class="col-lg-6 col-md-12">
+                <div class="card card-tasks">
+                    <div class="card-header ">
+                        <h6 class="title d-inline">Tasks(5)</h6>
+                        <p class="card-category d-inline">today</p>
+                        <div class="dropdown">
+                            <button type="button" class="btn btn-link dropdown-toggle btn-icon"
+                                    data-toggle="dropdown">
+                                <i class="tim-icons icon-settings-gear-63"></i>
+                            </button>
+                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
+                                <a class="dropdown-item" href="#pablo">Action</a>
+                                <a class="dropdown-item" href="#pablo">Another action</a>
+                                <a class="dropdown-item" href="#pablo">Something else</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-body ">
+                        <div class="table-full-width table-responsive">
+                            <table class="table">
+                                <tbody>
+                                <tr>
+                                    <td>
+                                        <div class="form-check">
+                                            <label class="form-check-label">
+                                                <input class="form-check-input" type="checkbox" value="">
+                                                <span class="form-check-sign">
+                            <span class="check"></span>
+                            </span>
+                                            </label>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <p class="title">Update the Documentation</p>
+                                        <p class="text-muted">Dwuamish Head, Seattle, WA 8:47 AM</p>
+                                    </td>
+                                    <td class="td-actions text-right">
+                                        <button type="button" rel="tooltip" title="" class="btn btn-link"
+                                                data-original-title="Edit Task">
+                                            <i class="tim-icons icon-pencil"></i>
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <div class="form-check">
+                                            <label class="form-check-label">
+                                                <input class="form-check-input" type="checkbox" value="" checked="">
+                                                <span class="form-check-sign">
+                            <span class="check"></span>
+                            </span>
+                                            </label>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <p class="title">GDPR Compliance</p>
+                                        <p class="text-muted">The GDPR is a regulation that requires businesses to
+                                            protect the personal data and privacy of Europe citizens for
+                                            transactions that occur within EU member states.</p>
+                                    </td>
+                                    <td class="td-actions text-right">
+                                        <button type="button" rel="tooltip" title="" class="btn btn-link"
+                                                data-original-title="Edit Task">
+                                            <i class="tim-icons icon-pencil"></i>
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <div class="form-check">
+                                            <label class="form-check-label">
+                                                <input class="form-check-input" type="checkbox" value="">
+                                                <span class="form-check-sign">
+                            <span class="check"></span>
+                            </span>
+                                            </label>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <p class="title">Solve the issues</p>
+                                        <p class="text-muted">Fifty percent of all respondents said they would be
+                                            more likely to shop at a company </p>
+                                    </td>
+                                    <td class="td-actions text-right">
+                                        <button type="button" rel="tooltip" title="" class="btn btn-link"
+                                                data-original-title="Edit Task">
+                                            <i class="tim-icons icon-pencil"></i>
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <div class="form-check">
+                                            <label class="form-check-label">
+                                                <input class="form-check-input" type="checkbox" value="">
+                                                <span class="form-check-sign">
+                            <span class="check"></span>
+                            </span>
+                                            </label>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <p class="title">Release v2.0.0</p>
+                                        <p class="text-muted">Ra Ave SW, Seattle, WA 98116, SUA 11:19 AM</p>
+                                    </td>
+                                    <td class="td-actions text-right">
+                                        <button type="button" rel="tooltip" title="" class="btn btn-link"
+                                                data-original-title="Edit Task">
+                                            <i class="tim-icons icon-pencil"></i>
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <div class="form-check">
+                                            <label class="form-check-label">
+                                                <input class="form-check-input" type="checkbox" value="">
+                                                <span class="form-check-sign">
+                            <span class="check"></span>
+                            </span>
+                                            </label>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <p class="title">Export the processed files</p>
+                                        <p class="text-muted">The report also shows that consumers will not easily
+                                            forgive a company once a breach exposing their personal data
+                                            occurs. </p>
+                                    </td>
+                                    <td class="td-actions text-right">
+                                        <button type="button" rel="tooltip" title="" class="btn btn-link"
+                                                data-original-title="Edit Task">
+                                            <i class="tim-icons icon-pencil"></i>
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <div class="form-check">
+                                            <label class="form-check-label">
+                                                <input class="form-check-input" type="checkbox" value="">
+                                                <span class="form-check-sign">
+                            <span class="check"></span>
+                            </span>
+                                            </label>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <p class="title">Arival at export process</p>
+                                        <p class="text-muted">Capitol Hill, Seattle, WA 12:34 AM</p>
+                                    </td>
+                                    <td class="td-actions text-right">
+                                        <button type="button" rel="tooltip" title="" class="btn btn-link"
+                                                data-original-title="Edit Task">
+                                            <i class="tim-icons icon-pencil"></i>
+                                        </button>
+                                    </td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-6 col-md-12">
+                <div class="card ">
+                    <div class="card-header">
+                        <h4 class="card-title"> Simple Table</h4>
+                    </div>
+                    <div class="card-body">
+                        <div class="table-responsive">
+                            <table class="table tablesorter " id="">
+                                <thead class=" text-primary">
+                                <tr>
+                                    <th>
+                                        Name
+                                    </th>
+                                    <th>
+                                        Country
+                                    </th>
+                                    <th>
+                                        City
+                                    </th>
+                                    <th class="text-center">
+                                        Salary
+                                    </th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr>
+                                    <td>
+                                        Dakota Rice
+                                    </td>
+                                    <td>
+                                        Niger
+                                    </td>
+                                    <td>
+                                        Oud-Turnhout
+                                    </td>
+                                    <td class="text-center">
+                                        $36,738
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Minerva Hooper
+                                    </td>
+                                    <td>
+                                        Curaçao
+                                    </td>
+                                    <td>
+                                        Sinaai-Waas
+                                    </td>
+                                    <td class="text-center">
+                                        $23,789
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Sage Rodriguez
+                                    </td>
+                                    <td>
+                                        Netherlands
+                                    </td>
+                                    <td>
+                                        Baileux
+                                    </td>
+                                    <td class="text-center">
+                                        $56,142
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Philip Chaney
+                                    </td>
+                                    <td>
+                                        Korea, South
+                                    </td>
+                                    <td>
+                                        Overland Park
+                                    </td>
+                                    <td class="text-center">
+                                        $38,735
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Doris Greene
+                                    </td>
+                                    <td>
+                                        Malawi
+                                    </td>
+                                    <td>
+                                        Feldkirchen in Kärnten
+                                    </td>
+                                    <td class="text-center">
+                                        $63,542
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Mason Porter
+                                    </td>
+                                    <td>
+                                        Chile
+                                    </td>
+                                    <td>
+                                        Gloucester
+                                    </td>
+                                    <td class="text-center">
+                                        $78,615
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        Jon Porter
+                                    </td>
+                                    <td>
+                                        Portugal
+                                    </td>
+                                    <td>
+                                        Gloucester
+                                    </td>
+                                    <td class="text-center">
+                                        $98,615
+                                    </td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
            </div>
-          </div>
        </div>
-      </div>
-      <div class="col-lg-4">
-        <div class="card card-chart">
-          <div class="card-header">
-            <h5 class="card-category">Completed Tasks</h5>
-            <h3 class="card-title"><i class="tim-icons icon-send text-success"></i> 12,100K</h3>
-          </div>
-          <div class="card-body">
-            <div class="chart-area">
-              <canvas id="chartLineGreen"></canvas>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-lg-6 col-md-12">
-        <div class="card card-tasks">
-          <div class="card-header ">
-            <h6 class="title d-inline">Tasks(5)</h6>
-            <p class="card-category d-inline">today</p>
-            <div class="dropdown">
-              <button type="button" class="btn btn-link dropdown-toggle btn-icon" data-toggle="dropdown">
-                <i class="tim-icons icon-settings-gear-63"></i>
-              </button>
-              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
-                <a class="dropdown-item" href="#pablo">Action</a>
-                <a class="dropdown-item" href="#pablo">Another action</a>
-                <a class="dropdown-item" href="#pablo">Something else</a>
-              </div>
-            </div>
-          </div>
-          <div class="card-body ">
-            <div class="table-full-width table-responsive">
-              <table class="table">
-                <tbody>
-                  <tr>
-                    <td>
-                      <div class="form-check">
-                        <label class="form-check-label">
-                          <input class="form-check-input" type="checkbox" value="">
-                          <span class="form-check-sign">
-                            <span class="check"></span>
-                          </span>
-                        </label>
-                      </div>
-                    </td>
-                    <td>
-                      <p class="title">Update the Documentation</p>
-                      <p class="text-muted">Dwuamish Head, Seattle, WA 8:47 AM</p>
-                    </td>
-                    <td class="td-actions text-right">
-                      <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
-                        <i class="tim-icons icon-pencil"></i>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <div class="form-check">
-                        <label class="form-check-label">
-                          <input class="form-check-input" type="checkbox" value="" checked="">
-                          <span class="form-check-sign">
-                            <span class="check"></span>
-                          </span>
-                        </label>
-                      </div>
-                    </td>
-                    <td>
-                      <p class="title">GDPR Compliance</p>
-                      <p class="text-muted">The GDPR is a regulation that requires businesses to protect the personal data and privacy of Europe citizens for transactions that occur within EU member states.</p>
-                    </td>
-                    <td class="td-actions text-right">
-                      <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
-                        <i class="tim-icons icon-pencil"></i>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <div class="form-check">
-                        <label class="form-check-label">
-                          <input class="form-check-input" type="checkbox" value="">
-                          <span class="form-check-sign">
-                            <span class="check"></span>
-                          </span>
-                        </label>
-                      </div>
-                    </td>
-                    <td>
-                      <p class="title">Solve the issues</p>
-                      <p class="text-muted">Fifty percent of all respondents said they would be more likely to shop at a company </p>
-                    </td>
-                    <td class="td-actions text-right">
-                      <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
-                        <i class="tim-icons icon-pencil"></i>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <div class="form-check">
-                        <label class="form-check-label">
-                          <input class="form-check-input" type="checkbox" value="">
-                          <span class="form-check-sign">
-                            <span class="check"></span>
-                          </span>
-                        </label>
-                      </div>
-                    </td>
-                    <td>
-                      <p class="title">Release v2.0.0</p>
-                      <p class="text-muted">Ra Ave SW, Seattle, WA 98116, SUA 11:19 AM</p>
-                    </td>
-                    <td class="td-actions text-right">
-                      <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
-                        <i class="tim-icons icon-pencil"></i>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <div class="form-check">
-                        <label class="form-check-label">
-                          <input class="form-check-input" type="checkbox" value="">
-                          <span class="form-check-sign">
-                            <span class="check"></span>
-                          </span>
-                        </label>
-                      </div>
-                    </td>
-                    <td>
-                      <p class="title">Export the processed files</p>
-                      <p class="text-muted">The report also shows that consumers will not easily forgive a company once a breach exposing their personal data occurs. </p>
-                    </td>
-                    <td class="td-actions text-right">
-                      <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
-                        <i class="tim-icons icon-pencil"></i>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <div class="form-check">
-                        <label class="form-check-label">
-                          <input class="form-check-input" type="checkbox" value="">
-                          <span class="form-check-sign">
-                            <span class="check"></span>
-                          </span>
-                        </label>
-                      </div>
-                    </td>
-                    <td>
-                      <p class="title">Arival at export process</p>
-                      <p class="text-muted">Capitol Hill, Seattle, WA 12:34 AM</p>
-                    </td>
-                    <td class="td-actions text-right">
-                      <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
-                        <i class="tim-icons icon-pencil"></i>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="col-lg-6 col-md-12">
-        <div class="card ">
-          <div class="card-header">
-            <h4 class="card-title"> Simple Table</h4>
-          </div>
-          <div class="card-body">
-            <div class="table-responsive">
-              <table class="table tablesorter " id="">
-                <thead class=" text-primary">
-                  <tr>
-                    <th>
-                      Name
-                    </th>
-                    <th>
-                      Country
-                    </th>
-                    <th>
-                      City
-                    </th>
-                    <th class="text-center">
-                      Salary
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td>
-                      Dakota Rice
-                    </td>
-                    <td>
-                      Niger
-                    </td>
-                    <td>
-                      Oud-Turnhout
-                    </td>
-                    <td class="text-center">
-                      $36,738
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      Minerva Hooper
-                    </td>
-                    <td>
-                      Curaçao
-                    </td>
-                    <td>
-                      Sinaai-Waas
-                    </td>
-                    <td class="text-center">
-                      $23,789
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      Sage Rodriguez
-                    </td>
-                    <td>
-                      Netherlands
-                    </td>
-                    <td>
-                      Baileux
-                    </td>
-                    <td class="text-center">
-                      $56,142
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      Philip Chaney
-                    </td>
-                    <td>
-                      Korea, South
-                    </td>
-                    <td>
-                      Overland Park
-                    </td>
-                    <td class="text-center">
-                      $38,735
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      Doris Greene
-                    </td>
-                    <td>
-                      Malawi
-                    </td>
-                    <td>
-                      Feldkirchen in Kärnten
-                    </td>
-                    <td class="text-center">
-                      $63,542
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      Mason Porter
-                    </td>
-                    <td>
-                      Chile
-                    </td>
-                    <td>
-                      Gloucester
-                    </td>
-                    <td class="text-center">
-                      $78,615
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      Jon Porter
-                    </td>
-                    <td>
-                      Portugal
-                    </td>
-                    <td>
-                      Gloucester
-                    </td>
-                    <td class="text-center">
-                      $98,615
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
    </div>

 {% endblock content %}
@ -383,12 +395,12 @@
 <!-- Specific Page JS goes HERE  -->
 {% block javascripts %}

-  <script>
-    $(document).ready(function() {
-      // Javascript method's body can be found in assets/js/demos.js
-      demo.initDashboardPageCharts();
+<script>
+    $(document).ready(function () {
+        // Javascript method's body can be found in assets/js/demos.js
+        demo.initDashboardPageCharts();

    });
-  </script>
+</script>

 {% endblock javascripts %}
--- a/apps/templates/home/login.html
+++ b/apps/templates/home/login.html
@ -1,4 +1,4 @@
-{% extends "layouts/base.html" %}
+{% extends "layouts/base-fullscreen.html" %}

 {% block title %} Login {% endblock %} 

@ -7,56 +7,52 @@

 {% block content %}

-        <div class="row">
-          <div class="col-md-8">
-            <div class="card">
-
-              <form role="form" method="post" action="">
-              
-                <div class="card-header">
-                  <h5 class="title">Login</h5>
-
-                  <h6 class="card-category">
-                      Add your credentials
-                  </h6>
-                </div>
-
-                <div class="card-body">
-
-                    <div class="row">
-
-                      <div class="col-md-3 px-md-1">
-                        <div class="form-group">
-                          <label>Username</label>
-                          <input class="form-control" id="username_login" name="username" required="" type="text" value="">
+    <div class="content">
+        <div class="container">
+            <div class="row pt-5">
+                <div class="col-md-6 mt-5 offset-md-3 pt-5 mt-5">
+                    <div class="card">
+                        <div class="card-header text-center py-4">
+                            <h4 class="title">Login to CT ADMIN</h4>
                        </div>
-                      </div>
+                        <div class="card-body px-5 py-3">
+                            <form>
+                                <div class="row">
+                                    <div class="col-md-12 px-md-1">
+                                        <div class="form-group">
+                                            <label>Username</label>
+                                            <input type="text" class="form-control" placeholder="Username"
+                                                    value="michael23">
+                                        </div>
+                                    </div>

-                    </div>
-                    <div class="row">
+                                    <div class="col-md-12 px-md-1">
+                                        <div class="form-group">
+                                            <label>Password</label>
+                                            <input type="password" class="form-control" placeholder="password"
+                                                    value="example@gmail.com">
+                                        </div>
+                                    </div>
+                                </div>

-                      <div class="col-md-3 px-md-1">
-                        <div class="form-group">
-                          <label>Password</label>
-                          <input class="form-control" id="pwd_login" name="password" required="" type="password" value="">
+                            </form>
                        </div>
-                      </div>
+                        <div class="card-footer text-center">
+                            <button type="submit" class="btn btn-fill btn-primary">Login</button>
                            
+                            <br /><br />
+
+                            <p>
+                                Don't have an account? <a href="/register.html" class="text-primary">Register</a>                            
+                            </p>
+                        </div>
                    </div>
-                    
                </div>
-                <div class="card-footer">
-                  <button type="submit" name="login" class="btn btn-fill btn-primary">Login</button>
-                  &nbsp; &nbsp;
-                  Don't have an account? <a href="/register.html" class="text-primary">Create</a>
-                </div>
-
-              </form>

            </div>
-          </div>
-      </div>
+        </div>

+    </div>

 {% endblock content %}

--- a/apps/templates/home/ui-maps.html
+++ b/apps/templates/home/ui-maps.html
@ -7,28 +7,26 @@

 {% block content %}

-<div class="row">
-  <div class="col-md-12">
-    <div class="card card-plain">
-      <div class="card-header">
-        Google Maps
-      </div>
-      <div class="card-body">
-        <div id="map" class="map"></div>
+  <div class="content">
+    <div class="row">
+      <div class="col-md-12">
+        <div class="card card-plain">
+          <div class="card-header">
+            Google Maps
+          </div>
+          <div class="card-body">
+            <div id="map" class="map"></div>
+          </div>
+        </div>
      </div>
    </div>
  </div>
-</div>

 {% endblock content %}

 <!-- Specific Page JS goes HERE  -->
 {% block javascripts %}

-  <!--  Google Maps Plugin    -->
-  <!-- Place this tag in your head or just before your close body tag. -->
-  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
-
  <script>
    $(document).ready(function() {
      // Javascript method's body can be found in assets/js/demos.js
--- a/apps/templates/home/notifications.html
+++ b/apps/templates/home/notifications.html
@ -0,0 +1,135 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Notifications {% endblock %} 
+
+<!-- Specific Page CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+  <div class="content">
+    <div class="row">
+      <div class="col-md-6">
+        <div class="card">
+          <div class="card-header">
+            <h4 class="card-title">Notifications Style</h4>
+          </div>
+          <div class="card-body">
+            <div class="alert alert-info">
+              <span>This is a plain notification</span>
+            </div>
+            <div class="alert alert-info">
+              <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+                <i class="tim-icons icon-simple-remove"></i>
+              </button>
+              <span>This is a notification with close button.</span>
+            </div>
+            <div class="alert alert-info alert-with-icon" data-notify="container">
+              <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+                <i class="tim-icons icon-simple-remove"></i>
+              </button>
+              <span data-notify="icon" class="tim-icons icon-bell-55"></span>
+              <span data-notify="message">This is a notification with close button and icon.</span>
+            </div>
+            <div class="alert alert-info alert-with-icon" data-notify="container">
+              <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+                <i class="tim-icons icon-simple-remove"></i>
+              </button>
+              <span data-notify="icon" class="tim-icons icon-bell-55"></span>
+              <span data-notify="message">This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-6">
+        <div class="card">
+          <div class="card-header">
+            <h4 class="card-title">Notification states</h4>
+          </div>
+          <div class="card-body">
+            <div class="alert alert-primary">
+              <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+                <i class="tim-icons icon-simple-remove"></i>
+              </button>
+              <span><b> Primary - </b> This is a regular notification made with ".alert-primary"</span>
+            </div>
+            <div class="alert alert-info">
+              <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+                <i class="tim-icons icon-simple-remove"></i>
+              </button>
+              <span><b> Info - </b> This is a regular notification made with ".alert-info"</span>
+            </div>
+            <div class="alert alert-success">
+              <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+                <i class="tim-icons icon-simple-remove"></i>
+              </button>
+              <span><b> Success - </b> This is a regular notification made with ".alert-success"</span>
+            </div>
+            <div class="alert alert-warning">
+              <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+                <i class="tim-icons icon-simple-remove"></i>
+              </button>
+              <span><b> Warning - </b> This is a regular notification made with ".alert-warning"</span>
+            </div>
+            <div class="alert alert-danger">
+              <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+                <i class="tim-icons icon-simple-remove"></i>
+              </button>
+              <span><b> Danger - </b> This is a regular notification made with ".alert-danger"</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-12">
+        <div class="card">
+          <div class="card-body">
+            <div class="places-buttons">
+              <div class="row">
+                <div class="col-md-6 ml-auto mr-auto text-center">
+                  <h4 class="card-title">
+                    Notifications Places
+                    <p class="category">Click to view notifications</p>
+                  </h4>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-lg-8 ml-auto mr-auto">
+                  <div class="row">
+                    <div class="col-md-4">
+                      <button class="btn btn-primary btn-block" onclick="demo.showNotification('top','left')">Top Left</button>
+                    </div>
+                    <div class="col-md-4">
+                      <button class="btn btn-primary btn-block" onclick="demo.showNotification('top','center')">Top Center</button>
+                    </div>
+                    <div class="col-md-4">
+                      <button class="btn btn-primary btn-block" onclick="demo.showNotification('top','right')">Top Right</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-lg-8 ml-auto mr-auto">
+                  <div class="row">
+                    <div class="col-md-4">
+                      <button class="btn btn-primary btn-block" onclick="demo.showNotification('bottom','left')">Bottom Left</button>
+                    </div>
+                    <div class="col-md-4">
+                      <button class="btn btn-primary btn-block" onclick="demo.showNotification('bottom','center')">Bottom Center</button>
+                    </div>
+                    <div class="col-md-4">
+                      <button class="btn btn-primary btn-block" onclick="demo.showNotification('bottom','right')">Bottom Right</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/page-403.html
+++ b/apps/templates/home/page-403.html
@ -1,26 +1,45 @@
-{% extends "layouts/base.html" %}
+{% extends "layouts/base-fullscreen.html" %}

-{% block title %} Page 404 {% endblock %} 
+{% block title %} Error 403 {% endblock %} 

 <!-- Specific Page CSS goes HERE  -->
 {% block stylesheets %}{% endblock stylesheets %}

 {% block content %}

-    <div class="row">
-        <div class="col-md-12">
-            <div class="card card-profile">
-                <div class="card-body">
-                    <h6 class="card-category text-gray">Error 403</h6>
-                    <h4 class="card-title">
-                        Access Denied - please authenticate
-                    </h4>
-                    <a href="/login.html" class="btn btn-primary btn-round">Login</a>
+    <div class="content">
+        <div class="container">
+            <div class="row pt-5">
+                <div class="col-md-6 mt-5 offset-md-3 pt-5 mt-5">
+                    <div class="card">
+                        <div class="card-header text-center py-4">
+                            <h3 class="title">
+                                Error 403
+                            </h3>
+                        </div>
+                        <div class="card-body px-2 py-2">
+
+                            <p class="text-center">
+                                Access denied - Please contact support.
+                            </p>
+
+                        </div>
+                        <div class="card-footer text-center">
+                            <a href="/" class="btn btn-fill btn-primary">HOME</a>
+                            
+                            <br /><br />
+
+                            <p>
+                                Get <a href="#" class="text-primary">Support</a>                            
+                            </p>
+                        </div>
+                    </div>
                </div>
+
            </div>
        </div>
-    </div>

+    </div>

 {% endblock content %}

--- a/apps/templates/home/page-404.html
+++ b/apps/templates/home/page-404.html
@ -1,26 +1,45 @@
-{% extends "layouts/base.html" %}
+{% extends "layouts/base-fullscreen.html" %}

-{% block title %} Page 404 {% endblock %} 
+{% block title %} Error 404 {% endblock %} 

 <!-- Specific Page CSS goes HERE  -->
 {% block stylesheets %}{% endblock stylesheets %}

 {% block content %}

-    <div class="row">
-        <div class="col-md-12">
-            <div class="card card-profile">
-                <div class="card-body">
-                    <h6 class="card-category text-gray">Error 404</h6>
-                    <h4 class="card-title">
-                        Page not found
-                    </h4>
-                    <a href="/" class="btn btn-primary btn-round">Home</a>
+    <div class="content">
+        <div class="container">
+            <div class="row pt-5">
+                <div class="col-md-6 mt-5 offset-md-3 pt-5 mt-5">
+                    <div class="card">
+                        <div class="card-header text-center py-4">
+                            <h3 class="title">
+                                Error 404
+                            </h3>
+                        </div>
+                        <div class="card-body px-2 py-2">
+
+                            <p class="text-center">
+                                Page not found - Please contact support.
+                            </p>
+
+                        </div>
+                        <div class="card-footer text-center">
+                            <a href="/" class="btn btn-fill btn-primary">HOME</a>
+                            
+                            <br /><br />
+
+                            <p>
+                                Get <a href="#" class="text-primary">Support</a>                            
+                            </p>
+                        </div>
+                    </div>
                </div>
+
            </div>
        </div>
-    </div>

+    </div>

 {% endblock content %}

--- a/apps/templates/home/page-500.html
+++ b/apps/templates/home/page-500.html
@ -1,26 +1,45 @@
-{% extends "layouts/base.html" %}
+{% extends "layouts/base-fullscreen.html" %}

-{% block title %} Page 404 {% endblock %} 
+{% block title %} Error 500 {% endblock %} 

 <!-- Specific Page CSS goes HERE  -->
 {% block stylesheets %}{% endblock stylesheets %}

 {% block content %}

-    <div class="row">
-        <div class="col-md-12">
-            <div class="card card-profile">
-                <div class="card-body">
-                    <h6 class="card-category text-gray">Error 500</h6>
-                    <h4 class="card-title">
-                        Internal Server Error
-                    </h4>
-                    <a href="/" class="btn btn-primary btn-round">Home</a>
+    <div class="content">
+        <div class="container">
+            <div class="row pt-5">
+                <div class="col-md-6 mt-5 offset-md-3 pt-5 mt-5">
+                    <div class="card">
+                        <div class="card-header text-center py-4">
+                            <h3 class="title">
+                                Error 500
+                            </h3>
+                        </div>
+                        <div class="card-body px-2 py-2">
+
+                            <p class="text-center">
+                                Server ERROR - Please contact support.
+                            </p>
+
+                        </div>
+                        <div class="card-footer text-center">
+                            <a href="/" class="btn btn-fill btn-primary">HOME</a>
+                            
+                            <br /><br />
+
+                            <p>
+                                Get <a href="#" class="text-primary">Support</a>                            
+                            </p>
+                        </div>
+                    </div>
                </div>
+
            </div>
        </div>
-    </div>

+    </div>

 {% endblock content %}

--- a/apps/templates/home/page-blank.html
+++ b/apps/templates/home/page-blank.html
@ -1,27 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} Page Blank {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-    <div class="row">
-        <div class="col-md-12">
-            <div class="card card-profile">
-                <div class="card-body">
-                    <h6 class="card-category text-gray">Page Blank</h6>
-                    <h4 class="card-title">
-                        Add your content 
-                    </h4>
-                    <a href="/" class="btn btn-primary btn-round">Home</a>
-                </div>
-            </div>
-        </div>
-    </div>
-    
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/page-rtl-support.html
+++ b/apps/templates/home/page-rtl-support.html
@ -1,392 +0,0 @@
-{% extends "layouts/base-rtl.html" %}
-
-{% block title %} داشبورد متریال توسط تیم خلاق {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-<div class="row">
-  <div class="col-12">
-    <div class="card card-chart">
-      <div class="card-header ">
-        <div class="row">
-          <div class="col-sm-6 text-right">
-            <h5 class="card-category">مجموع الشحنات</h5>
-            <h2 class="card-title">أداء</h2>
-          </div>
-          <div class="col-sm-6">
-            <div class="btn-group btn-group-toggle" data-toggle="buttons">
-              <label class="btn btn-sm btn-primary btn-simple active" id="0">
-                <input type="radio" name="options" checked>
-                <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block"> حسابات</span>
-                <span class="d-block d-sm-none">
-                  <i class="tim-icons icon-single-02"></i>
-                </span>
-              </label>
-              <label class="btn btn-sm btn-primary btn-simple" id="1">
-                <input type="radio" class="d-none d-sm-none" name="options">
-                <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block"> المشتريات</span>
-                <span class="d-block d-sm-none">
-                  <i class="tim-icons icon-gift-2"></i>
-                </span>
-              </label>
-              <label class="btn btn-sm btn-primary btn-simple" id="2">
-                <input type="radio" class="d-none" name="options">
-                <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">جلسات</span>
-                <span class="d-block d-sm-none">
-                  <i class="tim-icons icon-tap-02"></i>
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="card-body">
-        <div class="chart-area">
-          <canvas id="chartBig1"></canvas>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="row">
-  <div class="col-lg-4 text-right">
-    <div class="card card-chart">
-      <div class="card-header">
-        <h5 class="card-category">شحنات كاملة</h5>
-        <h3 class="card-title"><i class="tim-icons icon-bell-55 text-primary"></i> 763,215</h3>
-      </div>
-      <div class="card-body">
-        <div class="chart-area">
-          <canvas id="chartLinePurple"></canvas>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-lg-4 text-right">
-    <div class="card card-chart">
-      <div class="card-header">
-        <h5 class="card-category">المبيعات اليومية</h5>
-        <h3 class="card-title"><i class="tim-icons icon-delivery-fast text-info"></i> 3,500€</h3>
-      </div>
-      <div class="card-body">
-        <div class="chart-area">
-          <canvas id="CountryChart"></canvas>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-lg-4 text-right">
-    <div class="card card-chart">
-      <div class="card-header">
-        <h5 class="card-category">المهام المكتملة</h5>
-        <h3 class="card-title"><i class="tim-icons icon-send text-success"></i> 12,100K</h3>
-      </div>
-      <div class="card-body">
-        <div class="chart-area">
-          <canvas id="chartLineGreen"></canvas>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="row">
-  <div class="col-lg-6 col-sm-6 text-center">
-    <div class="card  card-tasks text-left">
-      <div class="card-header text-right">
-        <h6 class="title d-inline">تتبع</h6>
-        <p class="card-category d-inline">اليوم</p>
-        <div class="dropdown float-left">
-          <a class="btn btn-link dropdown-toggle" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="tim-icons icon-settings-gear-63"></i></a>
-          <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
-            <a class="dropdown-item" href="#">عمل</a>
-            <a class="dropdown-item" href="#">عمل آخر</a>
-            <a class="dropdown-item" href="#">شيء آخر هنا</a>
-          </div>
-        </div>
-      </div>
-      <div class="card-body ">
-        <div class="table-full-width table-responsive">
-          <table class="table">
-            <tbody>
-              <tr>
-                <td class="text-center">
-                  <div class="form-check">
-                    <label class="form-check-label">
-                      <input class="form-check-input" type="checkbox" value="" checked>
-                      <span class="form-check-sign">
-                        <span class="check"></span>
-                      </span>
-                    </label>
-                  </div>
-                </td>
-                <td class="text-right">
-                  <p class="title">مركز معالجة موقع محور</p>
-                  <p class="text-muted">نص آخر هناالوثائق</p>
-                </td>
-                <td class="td-actions">
-                  <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
-                    <i class="tim-icons icon-settings"></i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td class="text-center">
-                  <div class="form-check">
-                    <label class="form-check-label">
-                      <input class="form-check-input" type="checkbox" value="">
-                      <span class="form-check-sign">
-                        <span class="check"></span>
-                      </span>
-                    </label>
-                  </div>
-                </td>
-                <td class="text-right">
-                  <p class="title">لامتثال GDPR</p>
-                  <p class="text-muted">الناتج المحلي الإجمالي هو نظام يتطلب من الشركات حماية البيانات الشخصية والخصوصية لمواطني أوروبا بالنسبة للمعاملات التي تتم داخل الدول الأعضاء في الاتحاد الأوروبي.</p>
-                </td>
-                <td class="td-actions">
-                  <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
-                    <i class="tim-icons icon-settings"></i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td class="text-center">
-                  <div class="form-check">
-                    <label class="form-check-label">
-                      <input class="form-check-input" type="checkbox" value="">
-                      <span class="form-check-sign">
-                        <span class="check"></span>
-                      </span>
-                    </label>
-                  </div>
-                </td>
-                <td class="text-right">
-                  <p class="title">القضاياالقضايا</p>
-                  <p class="text-muted">سيكونونقال 50٪ من جميع المستجيبين أنهم سيكونون أكثر عرضة للتسوق في شركة</p>
-                </td>
-                <td class="td-actions">
-                  <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
-                    <i class="tim-icons icon-settings"></i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td class="text-center">
-                  <div class="form-check">
-                    <label class="form-check-label">
-                      <input class="form-check-input" type="checkbox" value="" checked="">
-                      <span class="form-check-sign">
-                        <span class="check"></span>
-                      </span>
-                    </label>
-                  </div>
-                </td>
-                <td class="text-right">
-                  <p class="title">تصدير الملفات التي تمت معالجتها</p>
-                  <p class="text-muted">كما يبين التقرير أن المستهلكين لن يغفروا شركة بسهولة بمجرد حدوث خرق يعرض بياناتهم الشخصية.</p>
-                </td>
-                <td class="td-actions">
-                  <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
-                    <i class="tim-icons icon-settings"></i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td class="text-center">
-                  <div class="form-check">
-                    <label class="form-check-label">
-                      <input class="form-check-input" type="checkbox" value="" checked="">
-                      <span class="form-check-sign">
-                        <span class="check"></span>
-                      </span>
-                    </label>
-                  </div>
-                </td>
-                <td class="text-right">
-                  <p class="title">الوصول إلى عملية التصدير</p>
-                  <p class="text-muted">سياسة السيء إنطلاق في قبل, مساعدة والمانيا أخذ قد. بل أما أمام ماشاء الشتاء،, تكاليف الإقتصادي بـ حين. ٣٠ يتعلّق للإتحاد ولم, وتم هناك مدينة بتحدّي إذ, كان بل عمل</p>
-                </td>
-                <td class="td-actions">
-                  <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
-                    <i class="tim-icons icon-settings"></i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td class="text-center">
-                  <div class="form-check">
-                    <label class="form-check-label">
-                      <input class="form-check-input" type="checkbox" value="">
-                      <span class="form-check-sign">
-                        <span class="check"></span>
-                      </span>
-                    </label>
-                  </div>
-                </td>
-                <td class="text-right">
-                  <p class="title">الافراج عن v2.0.0</p>
-                  <p class="text-muted">عن رئيس طوكيو البولندي لمّ, مايو مرجع وباءت قبل هو, تسمّى الطريق الإقتصادي ذات أن. لغات الإطلاق الفرنسية دار ان, بين بتخصيص الساحة اقتصادية أم. و الآخ</p>
-                </td>
-                <td class="td-actions">
-                  <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
-                    <i class="tim-icons icon-settings"></i>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-lg-6 col-sm-6">
-    <div class="card ">
-      <div class="card-header text-right">
-        <h4 class="card-title">جدول بسيط</h4>
-      </div>
-      <div class="card-body">
-        <div class="table-responsive">
-          <table class="table tablesorter " id="">
-            <thead class=" text-primary">
-              <tr>
-                <th>
-                  اسم
-                </th>
-                <th>
-                  بلد
-                </th>
-                <th>
-                  مدينة
-                </th>
-                <th class="text-center">
-                  راتب
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  رايس داكوتا
-                </td>
-                <td>
-                  النيجر
-                </td>
-                <td>
-                  العود-تورنهاوت
-                </td>
-                <td class="text-center">
-                  $36,738
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  مينيرفا هوبر
-                </td>
-                <td>
-                  كوراساو
-                </td>
-                <td>
-                  Sinaai-واس
-                </td>
-                <td class="text-center">
-                  $23,789
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  سيج رودريجيز
-                </td>
-                <td>
-                  هولندا
-                </td>
-                <td>
-                  بايلي
-                </td>
-                <td class="text-center">
-                  $56,142
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  فيليب شانيه
-                </td>
-                <td>
-                  كوريا، جنوب
-                </td>
-                <td>
-                  اوفرلاند بارك
-                </td>
-                <td class="text-center">
-                  $38,735
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  دوريس غرين
-                </td>
-                <td>
-                  مالاوي
-                </td>
-                <td>
-                  المنع
-                </td>
-                <td class="text-center">
-                  $63,542
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  ميسون بورتر
-                </td>
-                <td>
-                  تشيلي
-                </td>
-                <td>
-                  غلوستر
-                </td>
-                <td class="text-center">
-                  $78,615
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  جون بورتر
-                </td>
-                <td>
-                  البرتغال
-                </td>
-                <td>
-                  غلوستر
-                </td>
-                <td class="text-center">
-                  $98,615
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}
-
-<script>
-  $(document).ready(function() {
-    // Javascript method's body can be found in assets/js/demos.js
-
-
-    demo.initDashboardPageCharts();
-
-  });
-</script>
-
-{% endblock javascripts %}
--- a/apps/templates/home/page-user.html
+++ b/apps/templates/home/page-user.html
@ -1,141 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} Page User {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-<div class="row">
-  <div class="col-md-8">
-    <div class="card">
-      <div class="card-header">
-        <h5 class="title">Edit Profile</h5>
-      </div>
-      <div class="card-body">
-        <form>
-          <div class="row">
-            <div class="col-md-5 pr-md-1">
-              <div class="form-group">
-                <label>UserID (disabled)</label>
-                <input type="text" class="form-control" disabled="" value="{{ current_user.id }}">
-              </div>
-            </div>
-            <div class="col-md-3 px-md-1">
-              <div class="form-group">
-                <label>Username</label>
-                <input type="text" class="form-control" value="{{ current_user.username }}">
-              </div>
-            </div>
-            <div class="col-md-4 pl-md-1">
-              <div class="form-group">
-                <label for="exampleInputEmail1">Email address</label>
-                <input type="email" class="form-control" value="{{ current_user.email }}">
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-md-6 pr-md-1">
-              <div class="form-group">
-                <label>First Name</label>
-                <input type="text" class="form-control" placeholder="Company" value="Mike">
-              </div>
-            </div>
-            <div class="col-md-6 pl-md-1">
-              <div class="form-group">
-                <label>Last Name</label>
-                <input type="text" class="form-control" placeholder="Last Name" value="Andrew">
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-md-12">
-              <div class="form-group">
-                <label>Address</label>
-                <input type="text" class="form-control" placeholder="Home Address" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09">
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-md-4 pr-md-1">
-              <div class="form-group">
-                <label>City</label>
-                <input type="text" class="form-control" placeholder="City" value="Mike">
-              </div>
-            </div>
-            <div class="col-md-4 px-md-1">
-              <div class="form-group">
-                <label>Country</label>
-                <input type="text" class="form-control" placeholder="Country" value="Andrew">
-              </div>
-            </div>
-            <div class="col-md-4 pl-md-1">
-              <div class="form-group">
-                <label>Postal Code</label>
-                <input type="number" class="form-control" placeholder="ZIP Code">
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-md-8">
-              <div class="form-group">
-                <label>About Me</label>
-                <textarea rows="4" cols="80" class="form-control" placeholder="Here can be your description" value="Mike">Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.</textarea>
-              </div>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div class="card-footer">
-        <button type="submit" class="btn btn-fill btn-primary">Save</button>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4">
-    <div class="card card-user">
-      <div class="card-body">
-        <p class="card-text">
-          <div class="author">
-            <div class="block block-one"></div>
-            <div class="block block-two"></div>
-            <div class="block block-three"></div>
-            <div class="block block-four"></div>
-            <a href="javascript:void(0)">
-              <img class="avatar" src="/static/assets/img/emilyz.jpg" alt="Bill Gates photo - when buys a Linux.">
-              <h5 class="title">
-                {{ current_user.username }}
-              </h5>
-            </a>
-            <p class="description">
-              {{ current_user.email }}
-            </p>
-          </div>
-        </p>
-        <div class="card-description">
-          Linux, my favorite OS - I admin that windows is just a big mistake.
-          Do not be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
-        </div>
-      </div>
-      <div class="card-footer">
-        <div class="button-container">
-          <button href="javascript:void(0)" class="btn btn-icon btn-round btn-facebook">
-            <i class="fab fa-facebook"></i>
-          </button>
-          <button href="javascript:void(0)" class="btn btn-icon btn-round btn-twitter">
-            <i class="fab fa-twitter"></i>
-          </button>
-          <button href="javascript:void(0)" class="btn btn-icon btn-round btn-google">
-            <i class="fab fa-google-plus"></i>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/register.html
+++ b/apps/templates/home/register.html
@ -1,4 +1,4 @@
-{% extends "layouts/base.html" %}
+{% extends "layouts/base-fullscreen.html" %}

 {% block title %} Register {% endblock %} 

@ -7,62 +7,62 @@

 {% block content %}

-        <div class="row">
-          <div class="col-md-8">
-            <div class="card">
-
-              <form role="form" method="post" action="">
-              
-                <div class="card-header">
-                  <h5 class="title">Register</h5>
-
-                  <h6 class="card-category">
-                      Add your credentials
-                  </h6>
-                </div>
-
-                <div class="card-body">
-
-                    <div class="row">
-                      <div class="col-md-3 px-md-1">
-                        <div class="form-group">
-                          <label>Username</label>
-                          <input class="form-control" id="username_create" name="username" required="" type="text" value="">
+    <div class="content">
+        <div class="container">
+            <div class="row pt-5">
+                <div class="col-md-6 mt-5 offset-md-3 pt-5 mt-5">
+                    <div class="card">
+                        <div class="card-header text-center py-4">
+                            <h4 class="title">
+                                Sign UP
+                            </h4>
                        </div>
-                      </div>
-                    </div>
+                        <div class="card-body px-5 py-3">
+                            <form>
+                                <div class="row">
+                                    <div class="col-md-12 px-md-1">
+                                        <div class="form-group">
+                                            <label>Username</label>
+                                            <input type="text" class="form-control" placeholder="Username"
+                                                    value="michael23">
+                                        </div>
+                                    </div>

-                    <div class="row">
-                      <div class="col-md-3 px-md-1">
-                        <div class="form-group">
-                          <label>Email</label>
-                          <input class="form-control" id="email_create" name="email" required="" type="email" value="">
+                                    <div class="col-md-12 px-md-1">
+                                        <div class="form-group">
+                                            <label>Email</label>
+                                            <input type="email" class="form-control" placeholder="email"
+                                                    value="example@gmail.com">
+                                        </div>
+                                    </div>
+
+                                    <div class="col-md-12 px-md-1">
+                                        <div class="form-group">
+                                            <label>Password</label>
+                                            <input type="password" class="form-control" placeholder="password"
+                                                    value="example@gmail.com">
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </form>
                        </div>
-                      </div>
-                    </div>
+                        <div class="card-footer text-center">
+                            <button type="submit" class="btn btn-fill btn-primary">Register</button>

-                    <div class="row">
-                      <div class="col-md-3 px-md-1">
-                        <div class="form-group">
-                          <label>Password</label>
-                          <input class="form-control" id="pwd_create" name="password" required="" type="password" value="">
+                            <br /><br />
+                            
+                            <p>
+                                Have an account? <a href="/login.html" class="text-primary">Login</a>
+                            </p> 
                        </div>
-                      </div>
                    </div>
-                    
                </div>
-                <div class="card-footer">
-                  <button type="submit" name="register" class="btn btn-fill btn-primary">Register</button>
-                  &nbsp; &nbsp;
-                  Have an account? <a href="/login.html" class="text-primary">Login</a>
-                </div>
-
-              </form>

            </div>
-          </div>
-      </div>
+        </div>

+    </div>

 {% endblock content %}

--- a/apps/templates/home/rtl.html
+++ b/apps/templates/home/rtl.html
@ -0,0 +1,392 @@
+{% extends "layouts/base-rtl.html" %}
+
+{% block title %} داشبورد متریال توسط تیم خلاق {% endblock %} 
+
+<!-- Specific Page CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+  <div class="content">
+    <div class="row">
+      <div class="col-12">
+        <div class="card card-chart">
+          <div class="card-header ">
+            <div class="row">
+              <div class="col-sm-6 text-right">
+                <h5 class="card-category">مجموع الشحنات</h5>
+                <h2 class="card-title">أداء</h2>
+              </div>
+              <div class="col-sm-6">
+                <div class="btn-group btn-group-toggle" data-toggle="buttons">
+                  <label class="btn btn-sm btn-primary btn-simple active" id="0">
+                    <input type="radio" name="options" checked>
+                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block"> حسابات</span>
+                    <span class="d-block d-sm-none">
+                      <i class="tim-icons icon-single-02"></i>
+                    </span>
+                  </label>
+                  <label class="btn btn-sm btn-primary btn-simple" id="1">
+                    <input type="radio" class="d-none d-sm-none" name="options">
+                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block"> المشتريات</span>
+                    <span class="d-block d-sm-none">
+                      <i class="tim-icons icon-gift-2"></i>
+                    </span>
+                  </label>
+                  <label class="btn btn-sm btn-primary btn-simple" id="2">
+                    <input type="radio" class="d-none" name="options">
+                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">جلسات</span>
+                    <span class="d-block d-sm-none">
+                      <i class="tim-icons icon-tap-02"></i>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card-body">
+            <div class="chart-area">
+              <canvas id="chartBig1"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-lg-4 text-right">
+        <div class="card card-chart">
+          <div class="card-header">
+            <h5 class="card-category">شحنات كاملة</h5>
+            <h3 class="card-title"><i class="tim-icons icon-bell-55 text-primary"></i> 763,215</h3>
+          </div>
+          <div class="card-body">
+            <div class="chart-area">
+              <canvas id="chartLinePurple"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-4 text-right">
+        <div class="card card-chart">
+          <div class="card-header">
+            <h5 class="card-category">المبيعات اليومية</h5>
+            <h3 class="card-title"><i class="tim-icons icon-delivery-fast text-info"></i> 3,500€</h3>
+          </div>
+          <div class="card-body">
+            <div class="chart-area">
+              <canvas id="CountryChart"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-4 text-right">
+        <div class="card card-chart">
+          <div class="card-header">
+            <h5 class="card-category">المهام المكتملة</h5>
+            <h3 class="card-title"><i class="tim-icons icon-send text-success"></i> 12,100K</h3>
+          </div>
+          <div class="card-body">
+            <div class="chart-area">
+              <canvas id="chartLineGreen"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-lg-6 col-sm-6 text-center">
+        <div class="card  card-tasks text-left">
+          <div class="card-header text-right">
+            <h6 class="title d-inline">تتبع</h6>
+            <p class="card-category d-inline">اليوم</p>
+            <div class="dropdown float-left">
+              <a class="btn btn-link dropdown-toggle" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="tim-icons icon-settings-gear-63"></i></a>
+              <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                <a class="dropdown-item" href="#">عمل</a>
+                <a class="dropdown-item" href="#">عمل آخر</a>
+                <a class="dropdown-item" href="#">شيء آخر هنا</a>
+              </div>
+            </div>
+          </div>
+          <div class="card-body ">
+            <div class="table-full-width table-responsive">
+              <table class="table">
+                <tbody>
+                  <tr>
+                    <td class="text-center">
+                      <div class="form-check">
+                        <label class="form-check-label">
+                          <input class="form-check-input" type="checkbox" value="" checked>
+                          <span class="form-check-sign">
+                            <span class="check"></span>
+                          </span>
+                        </label>
+                      </div>
+                    </td>
+                    <td class="text-right">
+                      <p class="title">مركز معالجة موقع محور</p>
+                      <p class="text-muted">نص آخر هناالوثائق</p>
+                    </td>
+                    <td class="td-actions">
+                      <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
+                        <i class="tim-icons icon-settings"></i>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="text-center">
+                      <div class="form-check">
+                        <label class="form-check-label">
+                          <input class="form-check-input" type="checkbox" value="">
+                          <span class="form-check-sign">
+                            <span class="check"></span>
+                          </span>
+                        </label>
+                      </div>
+                    </td>
+                    <td class="text-right">
+                      <p class="title">لامتثال GDPR</p>
+                      <p class="text-muted">الناتج المحلي الإجمالي هو نظام يتطلب من الشركات حماية البيانات الشخصية والخصوصية لمواطني أوروبا بالنسبة للمعاملات التي تتم داخل الدول الأعضاء في الاتحاد الأوروبي.</p>
+                    </td>
+                    <td class="td-actions">
+                      <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
+                        <i class="tim-icons icon-settings"></i>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="text-center">
+                      <div class="form-check">
+                        <label class="form-check-label">
+                          <input class="form-check-input" type="checkbox" value="">
+                          <span class="form-check-sign">
+                            <span class="check"></span>
+                          </span>
+                        </label>
+                      </div>
+                    </td>
+                    <td class="text-right">
+                      <p class="title">القضاياالقضايا</p>
+                      <p class="text-muted">سيكونونقال 50٪ من جميع المستجيبين أنهم سيكونون أكثر عرضة للتسوق في شركة</p>
+                    </td>
+                    <td class="td-actions">
+                      <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
+                        <i class="tim-icons icon-settings"></i>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="text-center">
+                      <div class="form-check">
+                        <label class="form-check-label">
+                          <input class="form-check-input" type="checkbox" value="" checked="">
+                          <span class="form-check-sign">
+                            <span class="check"></span>
+                          </span>
+                        </label>
+                      </div>
+                    </td>
+                    <td class="text-right">
+                      <p class="title">تصدير الملفات التي تمت معالجتها</p>
+                      <p class="text-muted">كما يبين التقرير أن المستهلكين لن يغفروا شركة بسهولة بمجرد حدوث خرق يعرض بياناتهم الشخصية.</p>
+                    </td>
+                    <td class="td-actions">
+                      <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
+                        <i class="tim-icons icon-settings"></i>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="text-center">
+                      <div class="form-check">
+                        <label class="form-check-label">
+                          <input class="form-check-input" type="checkbox" value="" checked="">
+                          <span class="form-check-sign">
+                            <span class="check"></span>
+                          </span>
+                        </label>
+                      </div>
+                    </td>
+                    <td class="text-right">
+                      <p class="title">الوصول إلى عملية التصدير</p>
+                      <p class="text-muted">سياسة السيء إنطلاق في قبل, مساعدة والمانيا أخذ قد. بل أما أمام ماشاء الشتاء،, تكاليف الإقتصادي بـ حين. ٣٠ يتعلّق للإتحاد ولم, وتم هناك مدينة بتحدّي إذ, كان بل عمل</p>
+                    </td>
+                    <td class="td-actions">
+                      <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
+                        <i class="tim-icons icon-settings"></i>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="text-center">
+                      <div class="form-check">
+                        <label class="form-check-label">
+                          <input class="form-check-input" type="checkbox" value="">
+                          <span class="form-check-sign">
+                            <span class="check"></span>
+                          </span>
+                        </label>
+                      </div>
+                    </td>
+                    <td class="text-right">
+                      <p class="title">الافراج عن v2.0.0</p>
+                      <p class="text-muted">عن رئيس طوكيو البولندي لمّ, مايو مرجع وباءت قبل هو, تسمّى الطريق الإقتصادي ذات أن. لغات الإطلاق الفرنسية دار ان, بين بتخصيص الساحة اقتصادية أم. و الآخ</p>
+                    </td>
+                    <td class="td-actions">
+                      <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
+                        <i class="tim-icons icon-settings"></i>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-6 col-sm-6">
+        <div class="card ">
+          <div class="card-header text-right">
+            <h4 class="card-title">جدول بسيط</h4>
+          </div>
+          <div class="card-body">
+            <div class="table-responsive">
+              <table class="table tablesorter " id="">
+                <thead class=" text-primary">
+                  <tr>
+                    <th>
+                      اسم
+                    </th>
+                    <th>
+                      بلد
+                    </th>
+                    <th>
+                      مدينة
+                    </th>
+                    <th class="text-center">
+                      راتب
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>
+                      رايس داكوتا
+                    </td>
+                    <td>
+                      النيجر
+                    </td>
+                    <td>
+                      العود-تورنهاوت
+                    </td>
+                    <td class="text-center">
+                      $36,738
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      مينيرفا هوبر
+                    </td>
+                    <td>
+                      كوراساو
+                    </td>
+                    <td>
+                      Sinaai-واس
+                    </td>
+                    <td class="text-center">
+                      $23,789
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      سيج رودريجيز
+                    </td>
+                    <td>
+                      هولندا
+                    </td>
+                    <td>
+                      بايلي
+                    </td>
+                    <td class="text-center">
+                      $56,142
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      فيليب شانيه
+                    </td>
+                    <td>
+                      كوريا، جنوب
+                    </td>
+                    <td>
+                      اوفرلاند بارك
+                    </td>
+                    <td class="text-center">
+                      $38,735
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      دوريس غرين
+                    </td>
+                    <td>
+                      مالاوي
+                    </td>
+                    <td>
+                      المنع
+                    </td>
+                    <td class="text-center">
+                      $63,542
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      ميسون بورتر
+                    </td>
+                    <td>
+                      تشيلي
+                    </td>
+                    <td>
+                      غلوستر
+                    </td>
+                    <td class="text-center">
+                      $78,615
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      جون بورتر
+                    </td>
+                    <td>
+                      البرتغال
+                    </td>
+                    <td>
+                      غلوستر
+                    </td>
+                    <td class="text-center">
+                      $98,615
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}
+
+<script>
+    $(document).ready(function () {
+        // Javascript method's body can be found in assets/js/demos.js
+        demo.initDashboardPageCharts();
+
+    });
+</script>
+
+{% endblock javascripts %}
--- a/apps/templates/home/tables.html
+++ b/apps/templates/home/tables.html
@ -0,0 +1,277 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Tables {% endblock %} 
+
+<!-- Specific Page CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+  <div class="content">
+    <div class="row">
+      <div class="col-md-12">
+        <div class="card ">
+          <div class="card-header">
+            <h4 class="card-title"> Simple Table</h4>
+          </div>
+          <div class="card-body">
+            <div class="table-responsive">
+              <table class="table tablesorter " id="">
+                <thead class=" text-primary">
+                  <tr>
+                    <th>
+                      Name
+                    </th>
+                    <th>
+                      Country
+                    </th>
+                    <th>
+                      City
+                    </th>
+                    <th class="text-center">
+                      Salary
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>
+                      Dakota Rice
+                    </td>
+                    <td>
+                      Niger
+                    </td>
+                    <td>
+                      Oud-Turnhout
+                    </td>
+                    <td class="text-center">
+                      $36,738
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      Minerva Hooper
+                    </td>
+                    <td>
+                      Curaçao
+                    </td>
+                    <td>
+                      Sinaai-Waas
+                    </td>
+                    <td class="text-center">
+                      $23,789
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      Sage Rodriguez
+                    </td>
+                    <td>
+                      Netherlands
+                    </td>
+                    <td>
+                      Baileux
+                    </td>
+                    <td class="text-center">
+                      $56,142
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      Philip Chaney
+                    </td>
+                    <td>
+                      Korea, South
+                    </td>
+                    <td>
+                      Overland Park
+                    </td>
+                    <td class="text-center">
+                      $38,735
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      Doris Greene
+                    </td>
+                    <td>
+                      Malawi
+                    </td>
+                    <td>
+                      Feldkirchen in Kärnten
+                    </td>
+                    <td class="text-center">
+                      $63,542
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      Mason Porter
+                    </td>
+                    <td>
+                      Chile
+                    </td>
+                    <td>
+                      Gloucester
+                    </td>
+                    <td class="text-center">
+                      $78,615
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      Jon Porter
+                    </td>
+                    <td>
+                      Portugal
+                    </td>
+                    <td>
+                      Gloucester
+                    </td>
+                    <td class="text-center">
+                      $98,615
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-12">
+        <div class="card  card-plain">
+          <div class="card-header">
+            <h4 class="card-title"> Table on Plain Background</h4>
+            <p class="category"> Here is a subtitle for this table</p>
+          </div>
+          <div class="card-body">
+            <div class="table-responsive">
+              <table class="table tablesorter " id="">
+                <thead class=" text-primary">
+                  <tr>
+                    <th>
+                      Name
+                    </th>
+                    <th>
+                      Country
+                    </th>
+                    <th>
+                      City
+                    </th>
+                    <th class="text-center">
+                      Salary
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>
+                      Dakota Rice
+                    </td>
+                    <td>
+                      Niger
+                    </td>
+                    <td>
+                      Oud-Turnhout
+                    </td>
+                    <td class="text-center">
+                      $36,738
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      Minerva Hooper
+                    </td>
+                    <td>
+                      Curaçao
+                    </td>
+                    <td>
+                      Sinaai-Waas
+                    </td>
+                    <td class="text-center">
+                      $23,789
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      Sage Rodriguez
+                    </td>
+                    <td>
+                      Netherlands
+                    </td>
+                    <td>
+                      Baileux
+                    </td>
+                    <td class="text-center">
+                      $56,142
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      Philip Chaney
+                    </td>
+                    <td>
+                      Korea, South
+                    </td>
+                    <td>
+                      Overland Park
+                    </td>
+                    <td class="text-center">
+                      $38,735
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      Doris Greene
+                    </td>
+                    <td>
+                      Malawi
+                    </td>
+                    <td>
+                      Feldkirchen in Kärnten
+                    </td>
+                    <td class="text-center">
+                      $63,542
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      Mason Porter
+                    </td>
+                    <td>
+                      Chile
+                    </td>
+                    <td>
+                      Gloucester
+                    </td>
+                    <td class="text-center">
+                      $78,615
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      Jon Porter
+                    </td>
+                    <td>
+                      Portugal
+                    </td>
+                    <td>
+                      Gloucester
+                    </td>
+                    <td class="text-center">
+                      $98,615
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/typography.html
+++ b/apps/templates/home/typography.html
@ -0,0 +1,156 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Typography {% endblock %} 
+
+<!-- Specific Page CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+  <div class="content">
+    <div class="row">
+      <div class="col-md-12">
+        <div class="card">
+          <div class="card-header mb-5">
+            <h5 class="card-category">Black Table Heading</h5>
+            <h3 class="card-title">Created using Poppins Font Family</h3>
+          </div>
+          <div class="card-body">
+            <div class="typography-line">
+              <h1><span>Header 1</span>The Life of Black Dashboard </h1>
+            </div>
+            <div class="typography-line">
+              <h2><span>Header 2</span>The Life of Black Dashboard </h2>
+            </div>
+            <div class="typography-line">
+              <h3><span>Header 3</span>The Life of Black Dashboard </h3>
+            </div>
+            <div class="typography-line">
+              <h4><span>Header 4</span>The Life of Black Dashboard </h4>
+            </div>
+            <div class="typography-line">
+              <h5><span>Header 5</span>The Life of Black Dashboard </h5>
+            </div>
+            <div class="typography-line">
+              <h6><span>Header 6</span>The Life of Black Dashboard </h6>
+            </div>
+            <div class="typography-line">
+              <p><span>Paragraph</span>
+                I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
+              </p>
+            </div>
+            <div class="typography-line">
+              <span>Quote</span>
+              <blockquote>
+                <p class="blockquote blockquote-primary">
+                  "I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at."
+                  <br>
+                  <br>
+                  <small>
+                    - Noaa
+                  </small>
+                </p>
+              </blockquote>
+            </div>
+            <div class="typography-line">
+              <span>Muted Text</span>
+              <p class="text-muted">
+                I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
+              </p>
+            </div>
+            <div class="typography-line">
+              <span>Primary Text</span>
+              <p class="text-primary">
+                I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...</p>
+            </div>
+            <div class="typography-line">
+              <span>Info Text</span>
+              <p class="text-info">
+                I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
+            </div>
+            <div class="typography-line">
+              <span>Success Text</span>
+              <p class="text-success">
+                I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
+            </div>
+            <div class="typography-line">
+              <span>Warning Text</span>
+              <p class="text-warning">
+                I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
+              </p>
+            </div>
+            <div class="typography-line">
+              <span>Danger Text</span>
+              <p class="text-danger">
+                I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
+            </div>
+            <div class="typography-line">
+              <h2><span>Small Tag</span>
+                Header with small subtitle <br>
+                <small>Use "small" tag for the headers</small>
+              </h2>
+            </div>
+            <div class="typography-line">
+              <span>Lists</span>
+              <div class="row">
+                <div class="col-md-3">
+                  <h5>Unordered List</h5>
+                  <ul>
+                    <li>List Item</li>
+                    <li>List Item</li>
+                    <li class="list-unstyled">
+                      <ul>
+                        <li>List Item</li>
+                        <li>List Item</li>
+                        <li>List Item</li>
+                      </ul>
+                    </li>
+                    <li>List Item</li>
+                  </ul>
+                </div>
+                <div class="col-md-3">
+                  <h5>Ordered List</h5>
+                  <ol>
+                    <li>List Item</li>
+                    <li>List Item</li>
+                    <li>List item</li>
+                    <li>List Item</li>
+                  </ol>
+                </div>
+                <div class="col-md-3">
+                  <h5>Unstyled List</h5>
+                  <ul class="list-unstyled">
+                    <li>List Item</li>
+                    <li>List Item</li>
+                    <li>List item</li>
+                    <li>List Item</li>
+                  </ul>
+                </div>
+                <div class="col-md-3">
+                  <h5>Inline List</h5>
+                  <ul class="list-inline">
+                    <li class="list-inline-item">List1</li>
+                    <li class="list-inline-item">List2</li>
+                    <li class="list-inline-item">List3</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div class="typography-line">
+              <span>Code</span>
+              <p>This is
+                <code>.css-class-as-code</code>, an example of an inline code element. Wrap inline code within a
+                <code> &lt;code&gt;...&lt;/code&gt;</code>tag.
+              </p>
+              <pre>1. #This is an example of preformatted text.<br/>2. #Here is another line of code</pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/ui-icons.html
+++ b/apps/templates/home/ui-icons.html
@ -1,628 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} UI Icons {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-<div class="row">
-  <div class="col-md-12">
-    <div class="card">
-      <div class="card-header">
-        <h5 class="title">100 Awesome Nucleo Icons</h5>
-        <p class="category">Handcrafted by our friends from <a href="https://nucleoapp.com/?ref=1712">NucleoApp</a></p>
-      </div>
-      <div class="card-body all-icons">
-        <div class="row">
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-alert-circle-exc"></i>
-              <p>icon-alert-circle-exc</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-align-center"></i>
-              <p>icon-align-center</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-align-left-2"></i>
-              <p>icon-align-left-2</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-app"></i>
-              <p>icon-app</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-atom"></i>
-              <p>icon-atom</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-attach-87"></i>
-              <p>icon-attach-87</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-badge"></i>
-              <p>icon-badge</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-bag-16"></i>
-              <p>icon-bag-16</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-bank"></i>
-              <p>icon-bank</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-basket-simple"></i>
-              <p>icon-basket-simple</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-bell-55"></i>
-              <p>icon-bell-55</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-bold"></i>
-              <p>icon-bold</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-book-bookmark"></i>
-              <p>icon-book-bookmark</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-double-right"></i>
-              <p>icon-double-right</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-bulb-63"></i>
-              <p>icon-bulb-63</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-bullet-list-67"></i>
-              <p>icon-bullet-list-67</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-bus-front-12"></i>
-              <p>icon-bus-front-12</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-button-power"></i>
-              <p>icon-button-power</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-camera-18"></i>
-              <p>icon-camera-18</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-calendar-60"></i>
-              <p>icon-calendar-60</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-caps-small"></i>
-              <p>icon-caps-small</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-cart"></i>
-              <p>icon-cart</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-chart-bar-32"></i>
-              <p>icon-chart-bar-32</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-chart-pie-36"></i>
-              <p>icon-chart-pie-36</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-chat-33"></i>
-              <p>icon-chat-33</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-check-2"></i>
-              <p>icon-check-2</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-cloud-download-93"></i>
-              <p>icon-cloud-download-93</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-cloud-upload-94"></i>
-              <p>icon-cloud-upload-94</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-coins"></i>
-              <p>icon-coins</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-compass-05"></i>
-              <p>icon-compass-05</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-controller"></i>
-              <p>icon-controller</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-credit-card"></i>
-              <p>icon-credit-card</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-delivery-fast"></i>
-              <p>icon-delivery-fast</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-email-85"></i>
-              <p>icon-email-85</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-gift-2"></i>
-              <p>icon-gift-2</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-globe-2"></i>
-              <p>icon-globe-2</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-headphones"></i>
-              <p>icon-headphones</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-heart-2"></i>
-              <p>icon-heart-2</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-html5"></i>
-              <p>icon-html5</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-double-left"></i>
-              <p>icon-double-left</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-image-02"></i>
-              <p>icon-image-02</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-istanbul"></i>
-              <p>icon-istanbul</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-key-25"></i>
-              <p>icon-key-25</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-laptop"></i>
-              <p>icon-laptop</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-light-3"></i>
-              <p>icon-light-3</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-link-72"></i>
-              <p>icon-link-72</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-lock-circle"></i>
-              <p>icon-lock-circle</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-map-big"></i>
-              <p>icon-map-big</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-minimal-down"></i>
-              <p>icon-minimal-down</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-minimal-left"></i>
-              <p>icon-minimal-left</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-minimal-right"></i>
-              <p>icon-minimal-right</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-minimal-up"></i>
-              <p>icon-minimal-up</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-mobile"></i>
-              <p>icon-mobile</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-molecule-40"></i>
-              <p>icon-molecule-40</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-money-coins"></i>
-              <p>icon-money-coins</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-notes"></i>
-              <p>icon-notes</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-palette"></i>
-              <p>icon-palette</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-paper"></i>
-              <p>icon-paper</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-pin"></i>
-              <p>icon-pin</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-planet"></i>
-              <p>icon-planet</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-puzzle-10"></i>
-              <p>icon-puzzle-10</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-pencil"></i>
-              <p>icon-pencil</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-satisfied"></i>
-              <p>icon-satisfied</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-scissors"></i>
-              <p>icon-scissors</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-send"></i>
-              <p>icon-send</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-settings-gear-63"></i>
-              <p>icon-settings-gear-63</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-settings"></i>
-              <p>icon-settings</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-wifi"></i>
-              <p>icon-wifi</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-single-02"></i>
-              <p>icon-single-02</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-single-copy-04"></i>
-              <p>icon-single-copy-04</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-sound-wave"></i>
-              <p>icon-sound-wave</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-spaceship"></i>
-              <p>icon-spaceship</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-square-pin"></i>
-              <p>icon-square-pin</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-support-17"></i>
-              <p>icon-support-17</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-tablet-2"></i>
-              <p>icon-tablet-2</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-tag"></i>
-              <p>icon-tag</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-tap-02"></i>
-              <p>icon-tap-02</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-tie-bow"></i>
-              <p>icon-tie-bow</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-time-alarm"></i>
-              <p>icon-time-alarm</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-trash-simple"></i>
-              <p>icon-trash-simple</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-trophy"></i>
-              <p>icon-trophy</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-tv-2"></i>
-              <p>icon-tv-2</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-upload"></i>
-              <p>icon-upload</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-user-run"></i>
-              <p>icon-user-run</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-vector"></i>
-              <p>icon-vector</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-video-66"></i>
-              <p>icon-video-66</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-wallet-43"></i>
-              <p>icon-wallet-43</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-volume-98"></i>
-              <p>icon-volume-98</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-watch-time"></i>
-              <p>icon-watch-time</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-world"></i>
-              <p>icon-world</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-zoom-split"></i>
-              <p>icon-zoom-split</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-refresh-01"></i>
-              <p>icon-refresh-01</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-refresh-02"></i>
-              <p>icon-refresh-02</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-shape-star"></i>
-              <p>icon-shape-star</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-components"></i>
-              <p>icon-components</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-triangle-right-17"></i>
-              <p>icon-triangle-right-17</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-button-pause"></i>
-              <p>icon-button-pause</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-simple-remove"></i>
-              <p>icon-simple-remove</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-simple-add"></i>
-              <p>icon-simple-add</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-simple-delete"></i>
-              <p>icon-simple-delete</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/ui-notifications.html
+++ b/apps/templates/home/ui-notifications.html
@ -1,133 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} UI Notifications {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-<div class="row">
-  <div class="col-md-6">
-    <div class="card">
-      <div class="card-header">
-        <h4 class="card-title">Notifications Style</h4>
-      </div>
-      <div class="card-body">
-        <div class="alert alert-info">
-          <span>This is a plain notification</span>
-        </div>
-        <div class="alert alert-info">
-          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
-            <i class="tim-icons icon-simple-remove"></i>
-          </button>
-          <span>This is a notification with close button.</span>
-        </div>
-        <div class="alert alert-info alert-with-icon" data-notify="container">
-          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
-            <i class="tim-icons icon-simple-remove"></i>
-          </button>
-          <span data-notify="icon" class="tim-icons icon-bell-55"></span>
-          <span data-notify="message">This is a notification with close button and icon.</span>
-        </div>
-        <div class="alert alert-info alert-with-icon" data-notify="container">
-          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
-            <i class="tim-icons icon-simple-remove"></i>
-          </button>
-          <span data-notify="icon" class="tim-icons icon-bell-55"></span>
-          <span data-notify="message">This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6">
-    <div class="card">
-      <div class="card-header">
-        <h4 class="card-title">Notification states</h4>
-      </div>
-      <div class="card-body">
-        <div class="alert alert-primary">
-          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
-            <i class="tim-icons icon-simple-remove"></i>
-          </button>
-          <span><b> Primary - </b> This is a regular notification made with ".alert-primary"</span>
-        </div>
-        <div class="alert alert-info">
-          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
-            <i class="tim-icons icon-simple-remove"></i>
-          </button>
-          <span><b> Info - </b> This is a regular notification made with ".alert-info"</span>
-        </div>
-        <div class="alert alert-success">
-          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
-            <i class="tim-icons icon-simple-remove"></i>
-          </button>
-          <span><b> Success - </b> This is a regular notification made with ".alert-success"</span>
-        </div>
-        <div class="alert alert-warning">
-          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
-            <i class="tim-icons icon-simple-remove"></i>
-          </button>
-          <span><b> Warning - </b> This is a regular notification made with ".alert-warning"</span>
-        </div>
-        <div class="alert alert-danger">
-          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
-            <i class="tim-icons icon-simple-remove"></i>
-          </button>
-          <span><b> Danger - </b> This is a regular notification made with ".alert-danger"</span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-12">
-    <div class="card">
-      <div class="card-body">
-        <div class="places-buttons">
-          <div class="row">
-            <div class="col-md-6 ml-auto mr-auto text-center">
-              <h4 class="card-title">
-                Notifications Places
-                <p class="category">Click to view notifications</p>
-              </h4>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-8 ml-auto mr-auto">
-              <div class="row">
-                <div class="col-md-4">
-                  <button class="btn btn-primary btn-block" onclick="demo.showNotification('top','left')">Top Left</button>
-                </div>
-                <div class="col-md-4">
-                  <button class="btn btn-primary btn-block" onclick="demo.showNotification('top','center')">Top Center</button>
-                </div>
-                <div class="col-md-4">
-                  <button class="btn btn-primary btn-block" onclick="demo.showNotification('top','right')">Top Right</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-8 ml-auto mr-auto">
-              <div class="row">
-                <div class="col-md-4">
-                  <button class="btn btn-primary btn-block" onclick="demo.showNotification('bottom','left')">Bottom Left</button>
-                </div>
-                <div class="col-md-4">
-                  <button class="btn btn-primary btn-block" onclick="demo.showNotification('bottom','center')">Bottom Center</button>
-                </div>
-                <div class="col-md-4">
-                  <button class="btn btn-primary btn-block" onclick="demo.showNotification('bottom','right')">Bottom Right</button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/ui-tables.html
+++ b/apps/templates/home/ui-tables.html
@ -1,275 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} UI Tables {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-<div class="row">
-  <div class="col-md-12">
-    <div class="card ">
-      <div class="card-header">
-        <h4 class="card-title"> Simple Table</h4>
-      </div>
-      <div class="card-body">
-        <div class="table-responsive">
-          <table class="table tablesorter " id="">
-            <thead class=" text-primary">
-              <tr>
-                <th>
-                  Name
-                </th>
-                <th>
-                  Country
-                </th>
-                <th>
-                  City
-                </th>
-                <th class="text-center">
-                  Salary
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  Dakota Rice
-                </td>
-                <td>
-                  Niger
-                </td>
-                <td>
-                  Oud-Turnhout
-                </td>
-                <td class="text-center">
-                  $36,738
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Minerva Hooper
-                </td>
-                <td>
-                  Curaçao
-                </td>
-                <td>
-                  Sinaai-Waas
-                </td>
-                <td class="text-center">
-                  $23,789
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Sage Rodriguez
-                </td>
-                <td>
-                  Netherlands
-                </td>
-                <td>
-                  Baileux
-                </td>
-                <td class="text-center">
-                  $56,142
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Philip Chaney
-                </td>
-                <td>
-                  Korea, South
-                </td>
-                <td>
-                  Overland Park
-                </td>
-                <td class="text-center">
-                  $38,735
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Doris Greene
-                </td>
-                <td>
-                  Malawi
-                </td>
-                <td>
-                  Feldkirchen in Kärnten
-                </td>
-                <td class="text-center">
-                  $63,542
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Mason Porter
-                </td>
-                <td>
-                  Chile
-                </td>
-                <td>
-                  Gloucester
-                </td>
-                <td class="text-center">
-                  $78,615
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Jon Porter
-                </td>
-                <td>
-                  Portugal
-                </td>
-                <td>
-                  Gloucester
-                </td>
-                <td class="text-center">
-                  $98,615
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-12">
-    <div class="card  card-plain">
-      <div class="card-header">
-        <h4 class="card-title"> Table on Plain Background</h4>
-        <p class="category"> Here is a subtitle for this table</p>
-      </div>
-      <div class="card-body">
-        <div class="table-responsive">
-          <table class="table tablesorter " id="">
-            <thead class=" text-primary">
-              <tr>
-                <th>
-                  Name
-                </th>
-                <th>
-                  Country
-                </th>
-                <th>
-                  City
-                </th>
-                <th class="text-center">
-                  Salary
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  Dakota Rice
-                </td>
-                <td>
-                  Niger
-                </td>
-                <td>
-                  Oud-Turnhout
-                </td>
-                <td class="text-center">
-                  $36,738
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Minerva Hooper
-                </td>
-                <td>
-                  Curaçao
-                </td>
-                <td>
-                  Sinaai-Waas
-                </td>
-                <td class="text-center">
-                  $23,789
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Sage Rodriguez
-                </td>
-                <td>
-                  Netherlands
-                </td>
-                <td>
-                  Baileux
-                </td>
-                <td class="text-center">
-                  $56,142
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Philip Chaney
-                </td>
-                <td>
-                  Korea, South
-                </td>
-                <td>
-                  Overland Park
-                </td>
-                <td class="text-center">
-                  $38,735
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Doris Greene
-                </td>
-                <td>
-                  Malawi
-                </td>
-                <td>
-                  Feldkirchen in Kärnten
-                </td>
-                <td class="text-center">
-                  $63,542
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Mason Porter
-                </td>
-                <td>
-                  Chile
-                </td>
-                <td>
-                  Gloucester
-                </td>
-                <td class="text-center">
-                  $78,615
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Jon Porter
-                </td>
-                <td>
-                  Portugal
-                </td>
-                <td>
-                  Gloucester
-                </td>
-                <td class="text-center">
-                  $98,615
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/ui-typography.html
+++ b/apps/templates/home/ui-typography.html
@ -1,154 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} UI Typography {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-<div class="row">
-  <div class="col-md-12">
-    <div class="card">
-      <div class="card-header mb-5">
-        <h5 class="card-category">Black Table Heading</h5>
-        <h3 class="card-title">Created using Poppins Font Family</h3>
-      </div>
-      <div class="card-body">
-        <div class="typography-line">
-          <h1><span>Header 1</span>The Life of Black Dashboard </h1>
-        </div>
-        <div class="typography-line">
-          <h2><span>Header 2</span>The Life of Black Dashboard </h2>
-        </div>
-        <div class="typography-line">
-          <h3><span>Header 3</span>The Life of Black Dashboard </h3>
-        </div>
-        <div class="typography-line">
-          <h4><span>Header 4</span>The Life of Black Dashboard </h4>
-        </div>
-        <div class="typography-line">
-          <h5><span>Header 5</span>The Life of Black Dashboard </h5>
-        </div>
-        <div class="typography-line">
-          <h6><span>Header 6</span>The Life of Black Dashboard </h6>
-        </div>
-        <div class="typography-line">
-          <p><span>Paragraph</span>
-            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
-          </p>
-        </div>
-        <div class="typography-line">
-          <span>Quote</span>
-          <blockquote>
-            <p class="blockquote blockquote-primary">
-              "I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at."
-              <br>
-              <br>
-              <small>
-                - Noaa
-              </small>
-            </p>
-          </blockquote>
-        </div>
-        <div class="typography-line">
-          <span>Muted Text</span>
-          <p class="text-muted">
-            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
-          </p>
-        </div>
-        <div class="typography-line">
-          <span>Primary Text</span>
-          <p class="text-primary">
-            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...</p>
-        </div>
-        <div class="typography-line">
-          <span>Info Text</span>
-          <p class="text-info">
-            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
-        </div>
-        <div class="typography-line">
-          <span>Success Text</span>
-          <p class="text-success">
-            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
-        </div>
-        <div class="typography-line">
-          <span>Warning Text</span>
-          <p class="text-warning">
-            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
-          </p>
-        </div>
-        <div class="typography-line">
-          <span>Danger Text</span>
-          <p class="text-danger">
-            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
-        </div>
-        <div class="typography-line">
-          <h2><span>Small Tag</span>
-            Header with small subtitle <br>
-            <small>Use "small" tag for the headers</small>
-          </h2>
-        </div>
-        <div class="typography-line">
-          <span>Lists</span>
-          <div class="row">
-            <div class="col-md-3">
-              <h5>Unordered List</h5>
-              <ul>
-                <li>List Item</li>
-                <li>List Item</li>
-                <li class="list-unstyled">
-                  <ul>
-                    <li>List Item</li>
-                    <li>List Item</li>
-                    <li>List Item</li>
-                  </ul>
-                </li>
-                <li>List Item</li>
-              </ul>
-            </div>
-            <div class="col-md-3">
-              <h5>Ordered List</h5>
-              <ol>
-                <li>List Item</li>
-                <li>List Item</li>
-                <li>List item</li>
-                <li>List Item</li>
-              </ol>
-            </div>
-            <div class="col-md-3">
-              <h5>Unstyled List</h5>
-              <ul class="list-unstyled">
-                <li>List Item</li>
-                <li>List Item</li>
-                <li>List item</li>
-                <li>List Item</li>
-              </ul>
-            </div>
-            <div class="col-md-3">
-              <h5>Inline List</h5>
-              <ul class="list-inline">
-                <li class="list-inline-item">List1</li>
-                <li class="list-inline-item">List2</li>
-                <li class="list-inline-item">List3</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-        <div class="typography-line">
-          <span>Code</span>
-          <p>This is
-            <code>.css-class-as-code</code>, an example of an inline code element. Wrap inline code within a
-            <code> &lt;code&gt;...&lt;/code&gt;</code>tag.
-          </p>
-          <pre>1. #This is an example of preformatted text.<br/>2. #Here is another line of code</pre>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/user.html
+++ b/apps/templates/home/user.html
@ -0,0 +1,159 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} User Profile {% endblock %} 
+
+<!-- Specific Page CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+  <div class="content">
+    <div class="row">
+      <div class="col-md-8">
+        <div class="card">
+          <div class="card-header">
+            <h5 class="title">Edit Profile</h5>
+          </div>
+
+          <div class="card-body">
+            <form>
+
+              {% if not current_user.email %}
+              <div class="row">
+
+                <div class="col-md-6 pr-md-1">
+
+                  <div class="alert alert-warning alert-dismissible fade show" role="alert">
+                    <p class="mb-0">
+                        Please add an email address.
+                    </p>
+                  </div>
+
+                </div>
+      
+              </div>
+              {% endif %}
+
+              <div class="row">
+
+                <div class="col-md-6 pr-md-1">
+                  <div class="form-group">
+                    <label class="form-label {% if not current_user.email %} text-danger {% endif%}">Email Address</label>
+                    <input type="email" name="email" class="form-control"
+                    {% if current_user.email %} readonly {% endif %}
+                     placeholder="Your email Here"
+                     value="{% if current_user.email %} {{ current_user.email }} {% endif %}">
+                     <section class="display-error-message">
+                    </section>
+                  </div>
+                </div>
+                
+                <div class="col-md-6 pr-md-1">
+                  <div class="form-group">
+                    <label>Username</label>
+                    <input type="text" class="form-control" value="{{current_user.username}}"  readonly>
+                  </div>
+                </div>
+                
+              </div>
+              <div class="row">
+                <div class="col-md-6 pr-md-1">
+                  <div class="form-group">
+                    <label>First Name</label>
+                    <input type="text" class="form-control" placeholder="Company" value="Mike">
+                  </div>
+                </div>
+                <div class="col-md-6 pl-md-1">
+                  <div class="form-group">
+                    <label>Last Name</label>
+                    <input type="text" class="form-control" placeholder="Last Name" value="Andrew">
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-md-12">
+                  <div class="form-group">
+                    <label>Address</label>
+                    <input type="text" class="form-control" placeholder="Home Address" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09">
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-md-4 pr-md-1">
+                  <div class="form-group">
+                    <label>City</label>
+                    <input type="text" class="form-control" placeholder="City" value="Mike">
+                  </div>
+                </div>
+                <div class="col-md-4 px-md-1">
+                  <div class="form-group">
+                    <label>Country</label>
+                    <input type="text" class="form-control" placeholder="Country" value="Andrew">
+                  </div>
+                </div>
+                <div class="col-md-4 pl-md-1">
+                  <div class="form-group">
+                    <label>Postal Code</label>
+                    <input type="number" class="form-control" placeholder="ZIP Code">
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-md-8">
+                  <div class="form-group">
+                    <label>About Me</label>
+                    <textarea rows="4" cols="80" class="form-control" placeholder="Here can be your description" value="Mike">Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.</textarea>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+          <div class="card-footer">
+            <button type="submit" class="btn btn-fill btn-primary">Save</button>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-4">
+        <div class="card card-user">
+          <div class="card-body">
+            <p class="card-text">
+              <div class="author">
+                <div class="block block-one"></div>
+                <div class="block block-two"></div>
+                <div class="block block-three"></div>
+                <div class="block block-four"></div>
+                <a href="javascript:void(0)">
+                  <img class="avatar" src="{{ config.ASSETS_ROOT }}/img/emilyz.jpg" alt="...">
+                  <h5 class="title">Mike Andrew</h5>
+                </a>
+                <p class="description">
+                  Ceo/Co-Founder
+                </p>
+              </div>
+            </p>
+            <div class="card-description">
+              Do not be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
+            </div>
+          </div>
+          <div class="card-footer">
+            <div class="button-container">
+              <button href="javascript:void(0)" class="btn btn-icon btn-round btn-facebook">
+                <i class="fab fa-facebook"></i>
+              </button>
+              <button href="javascript:void(0)" class="btn btn-icon btn-round btn-twitter">
+                <i class="fab fa-twitter"></i>
+              </button>
+              <button href="javascript:void(0)" class="btn btn-icon btn-round btn-google">
+                <i class="fab fa-google-plus"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/includes/fixed-plugin.html
+++ b/apps/templates/includes/fixed-plugin.html
@ -1,50 +1,35 @@
-
-  <div class="fixed-plugin">
+<div class="fixed-plugin">
    <div class="dropdown show-dropdown">
-      <a href="#" data-toggle="dropdown">
-        <i class="fa fa-cog fa-2x"> </i>
-      </a>
-      <ul class="dropdown-menu">
-        <li class="header-title"> Sidebar Background</li>
-        <li class="adjustments-line">
-          <a href="javascript:void(0)" class="switch-trigger background-color">
-            <div class="badge-colors text-center">
-              <span class="badge filter badge-primary active" data-color="primary"></span>
-              <span class="badge filter badge-info" data-color="blue"></span>
-              <span class="badge filter badge-success" data-color="green"></span>
-            </div>
-            <div class="clearfix"></div>
-          </a>
-        </li>
-        <li class="adjustments-line text-center color-change">
-          <span class="color-label">LIGHT MODE</span>
-          <span class="badge light-badge mr-2"></span>
-          <span class="badge dark-badge ml-2"></span>
-          <span class="color-label">DARK MODE</span>
-        </li>
-        <li class="button-container">
-
-          <a href="https://www.creative-tim.com/product/black-dashboard-flask" 
-             target="_blank" rel="noopener noreferrer" 
-             class="btn btn-primary btn-block btn-round">Download Product</a>
-
-          <a href="https://www.creative-tim.com/templates/flask" 
-             target="_blank" rel="noopener noreferrer" 
-             class="btn btn-default btn-block btn-round">
-            More Dashboards
-          </a>
-        </li>
-        <li class="header-title">
-          Coded by <a class="text-white" 
-                      target="_blank" rel="noopener noreferrer" 
-                      href="https://appseed.us">AppSeed</a>
-                   
-        </li>
-        <li>
-          <br />
-        </li>
-      </ul>
+        <a href="#" data-toggle="dropdown">
+            <i class="fa fa-cog fa-2x"> </i>
+        </a>
+        <ul class="dropdown-menu">
+            <li class="header-title"> Sidebar Background</li>
+            <li class="adjustments-line">
+                <a href="javascript:void(0)" class="switch-trigger background-color">
+                    <div class="badge-colors text-center">
+                        <span class="badge filter badge-primary active" data-color="primary"></span>
+                        <span class="badge filter badge-info" data-color="blue"></span>
+                        <span class="badge filter badge-success" data-color="green"></span>
+                    </div>
+                    <div class="clearfix"></div>
+                </a>
+            </li>
+            <li class="adjustments-line text-center color-change">
+                <span class="color-label">LIGHT MODE</span>
+                <span class="badge light-badge mr-2"></span>
+                <span class="badge dark-badge ml-2"></span>
+                <span class="color-label">DARK MODE</span>
+            </li>
+            <li class="button-container">
+                <a href="https://appseed.us/product/black-dashboard/" target="_blank"
+                   class="btn btn-primary btn-block btn-round">Download</a>

+                <a href="https://appseed.us/support/"
+                   target="_blank" class="btn btn-default btn-block btn-round">
+                    Support
+                </a>
+            </li>
+        </ul>
    </div>
-  </div>
-  
+</div>
--- a/apps/templates/includes/footer-fullscreen.html
+++ b/apps/templates/includes/footer-fullscreen.html
@ -0,0 +1,7 @@
+<footer class="footer px-5 py-4 fixed-bottom">
+    <div class="copyright mx-auto float-none text-center">
+        
+        &copy; <a target="_blank" href="https://bit.ly/3fKQZaL">Creative Tim</a> - coded by AppSeed.
+
+    </div>
+</footer>
--- a/apps/templates/includes/footer.html
+++ b/apps/templates/includes/footer.html
@ -1,20 +1,19 @@
-
-
-      <footer class="footer">
-        <div class="container-fluid">
-          <ul class="nav">
+<footer class="footer">
+    <div class="container-fluid">
+        <ul class="nav">
            <li class="nav-item">
-              <a target="_blank" rel="noopener noreferrer"
-                 href="https://www.creative-tim.com/product/black-dashboard-flask" class="nav-link">
-                Dashboard Black Flask
-              </a>
+                <a target="_blank" href="https://appseed.us/product/black-dashboard/" class="nav-link">
+                    Download
+                </a>
            </li>
-          </ul>
-          <div class="copyright">
-            &copy; <a target="_blank" rel="sponsored noopener noreferrer" 
-                      href="https://bit.ly/3fKQZaL">Creative-Tim</a> 
-            - coded by <a target="_blank" rel="noopener noreferrer" href="https://appseed.us">AppSeed</a>
-          </div>
+            <li class="nav-item">
+                <a target="_blank" href="https://appseed.us/support/" class="nav-link">
+                    Support
+                </a>
+            </li>
+        </ul>
+        <div class="copyright">
+            &copy; <a target="_blank" href="https://bit.ly/3fKQZaL">Creative Tim</a> - coded by AppSeed.
        </div>
-      </footer>
-      
+    </div>
+</footer>
--- a/apps/templates/includes/navigation-fullscreen.html
+++ b/apps/templates/includes/navigation-fullscreen.html
@ -0,0 +1,36 @@
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent mw-100">
+        <div class="container-fluid overflow-hidden">
+            <div class="navbar-wrapper">
+                <div class="navbar-toggle d-inline">
+                    <button type="button" class="navbar-toggler">
+                        <span class="navbar-toggler-bar bar1"></span>
+                        <span class="navbar-toggler-bar bar2"></span>
+                        <span class="navbar-toggler-bar bar3"></span>
+                    </button>
+                </div>
+                <a class="navbar-brand" href="/">
+                    Home
+                </a>
+            </div>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-bar navbar-kebab"></span>
+                <span class="navbar-toggler-bar navbar-kebab"></span>
+                <span class="navbar-toggler-bar navbar-kebab"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navigation">
+                <ul class="navbar-nav ml-auto">
+                    <li class="input-group d-flex align-items-center mb-0">
+                        <label class="switch theme-switch">
+                            <input type="checkbox" class="bsc" checked="">
+                            <span class="slider"></span>
+                        </label>
+                    </li>
+                    <li class="separator d-lg-none"></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <!-- End Navbar -->
+    
--- a/apps/templates/includes/navigation-rtl.html
+++ b/apps/templates/includes/navigation-rtl.html
@ -1,4 +1,3 @@
-
      <!-- Navbar -->
      <nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent">
        <div class="container-fluid">
@ -19,6 +18,12 @@
          </button>
          <div class="collapse navbar-collapse" id="navigation">
            <ul class="navbar-nav  mr-auto">
+                <li class="input-group d-flex align-items-center mb-0">
+                  <label class="switch theme-switch">
+                    <input type="checkbox" class="bsc" checked="">
+                    <span class="slider"></span>
+                  </label>
+                </li>
              <li class="search-bar input-group">
                <button class="btn btn-link" id="search-button" data-toggle="modal" data-target="#searchModal"><i class="tim-icons icon-zoom-split" ></i>
                  <span class="d-lg-none d-md-block">Search</span>
@ -41,9 +46,9 @@
                </ul>
              </li>
              <li class="dropdown nav-item">
-                <a href="{{ url_for('authentication_blueprint.logout') }}" class="dropdown-toggle nav-link" data-toggle="dropdown">
+                <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
                  <div class="photo">
-                    <img src="/static/assets/img/anime3.png" alt="Profile Photo">
+                    <img src="{{ config.ASSETS_ROOT }}/img/anime3.png" alt="Profile Photo">
                  </div>
                  <b class="caret d-none d-lg-block d-xl-block"></b>
                  <p class="d-lg-none">
@ -75,3 +80,4 @@
        </div>
      </div>
      <!-- End Navbar -->
+      
--- a/apps/templates/includes/navigation.html
+++ b/apps/templates/includes/navigation.html
@ -1,84 +1,95 @@
-
-      <!-- Navbar -->
-      <nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent">
-        <div class="container-fluid">
-          <div class="navbar-wrapper">
-            <div class="navbar-toggle d-inline">
-              <button type="button" class="navbar-toggler">
-                <span class="navbar-toggler-bar bar1"></span>
-                <span class="navbar-toggler-bar bar2"></span>
-                <span class="navbar-toggler-bar bar3"></span>
-              </button>
-            </div>
-            <a class="navbar-brand" href="javascript:void(0)">
-              Free Dashboard
-            </a>
-          </div>
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-bar navbar-kebab"></span>
-            <span class="navbar-toggler-bar navbar-kebab"></span>
-            <span class="navbar-toggler-bar navbar-kebab"></span>
-          </button>
-          <div class="collapse navbar-collapse" id="navigation">
-
-            <ul class="navbar-nav ml-auto">
-            {% if current_user.is_authenticated %}
-
-              <li class="search-bar input-group">
-                <button class="btn btn-link" id="search-button" data-toggle="modal" data-target="#searchModal"><i class="tim-icons icon-zoom-split" ></i>
-                  <span class="d-lg-none d-md-block">Search</span>
+        <!-- Navbar -->
+        <nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent">
+            <div class="container-fluid">
+                <div class="navbar-wrapper">
+                    <div class="navbar-toggle d-inline">
+                        <button type="button" class="navbar-toggler">
+                            <span class="navbar-toggler-bar bar1"></span>
+                            <span class="navbar-toggler-bar bar2"></span>
+                            <span class="navbar-toggler-bar bar3"></span>
+                        </button>
+                    </div>
+                    <a class="navbar-brand" href="javascript:void(0)">Dashboard</a>
+                </div>
+                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
+                        aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-bar navbar-kebab"></span>
+                    <span class="navbar-toggler-bar navbar-kebab"></span>
+                    <span class="navbar-toggler-bar navbar-kebab"></span>
                </button>
-              </li>
-              <li class="dropdown nav-item">
-                <a href="javascript:void(0)" class="dropdown-toggle nav-link" data-toggle="dropdown">
-                  <div class="notification d-none d-lg-block d-xl-block"></div>
-                  <i class="tim-icons icon-sound-wave"></i>
-                  <p class="d-lg-none">
-                    Notifications
-                  </p>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-right dropdown-navbar">
-                  <li class="nav-link"><a href="#" class="nav-item dropdown-item">Mike John responded to your email</a></li>
-                  <li class="nav-link"><a href="javascript:void(0)" class="nav-item dropdown-item">You have 5 more tasks</a></li>
-                  <li class="nav-link"><a href="javascript:void(0)" class="nav-item dropdown-item">Your friend Michael is in town</a></li>
-                  <li class="nav-link"><a href="javascript:void(0)" class="nav-item dropdown-item">Another notification</a></li>
-                  <li class="nav-link"><a href="javascript:void(0)" class="nav-item dropdown-item">Another one</a></li>
-                </ul>
-              </li>
-              <li class="dropdown nav-item">
-                <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
-                  <div class="photo">
-                    <img src="/static/assets/img/anime3.png" alt="Profile Photo">
-                  </div>
-                  <b class="caret d-none d-lg-block d-xl-block"></b>
-                  <p class="d-lg-none">
-                    Log out
-                  </p>
-                </a>
-                <ul class="dropdown-menu dropdown-navbar">
-                  <li class="nav-link"><a href="/page-user.html" class="nav-item dropdown-item">Profile</a></li>
-                  <li class="dropdown-divider"></li>
-                  <li class="nav-link"><a href="{{ url_for('authentication_blueprint.logout') }}" class="nav-item dropdown-item">Log out</a></li>
-                </ul>
-              </li>
-              <li class="separator d-lg-none"></li>
-
-            {% endif %}  
-            </ul>
-
-          </div>
-        </div>
-      </nav>
-      <div class="modal modal-search fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModal" aria-hidden="true">
-        <div class="modal-dialog" role="document">
-          <div class="modal-content">
-            <div class="modal-header">
-              <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="SEARCH">
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                <i class="tim-icons icon-simple-remove"></i>
-              </button>
+                <div class="collapse navbar-collapse" id="navigation">
+                    <ul class="navbar-nav ml-auto">
+                        <li class="input-group d-flex align-items-center mb-0">
+                            <label class="switch theme-switch">
+                                <input type="checkbox" class="bsc" checked="">
+                                <span class="slider"></span>
+                            </label>
+                        </li>
+                        <li class="search-bar input-group">
+                            <button class="btn btn-link" id="search-button" data-toggle="modal"
+                                    data-target="#searchModal"><i class="tim-icons icon-zoom-split"></i>
+                                <span class="d-lg-none d-md-block">Search</span>
+                            </button>
+                        </li>
+                        <li class="dropdown nav-item">
+                            <a href="javascript:void(0)" class="dropdown-toggle nav-link" data-toggle="dropdown">
+                                <div class="notification d-none d-lg-block d-xl-block"></div>
+                                <i class="tim-icons icon-sound-wave"></i>
+                                <p class="d-lg-none">
+                                    Notifications
+                                </p>
+                            </a>
+                            <ul class="dropdown-menu dropdown-menu-right dropdown-navbar">
+                                <li class="nav-link"><a href="#" class="nav-item dropdown-item">Mike John responded to
+                                    your email</a></li>
+                                <li class="nav-link"><a href="javascript:void(0)" class="nav-item dropdown-item">You
+                                    have 5 more tasks</a></li>
+                                <li class="nav-link"><a href="javascript:void(0)" class="nav-item dropdown-item">Your
+                                    friend Michael is in town</a></li>
+                                <li class="nav-link"><a href="javascript:void(0)" class="nav-item dropdown-item">Another
+                                    notification</a></li>
+                                <li class="nav-link"><a href="javascript:void(0)" class="nav-item dropdown-item">Another
+                                    one</a></li>
+                            </ul>
+                        </li>
+                        <li class="dropdown nav-item">
+                            <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
+                                <div class="photo">
+                                    <img src="{{ config.ASSETS_ROOT }}/img/anime3.png" alt="Profile Photo">
+                                </div>
+                                <b class="caret d-none d-lg-block d-xl-block"></b>
+                                <p class="d-lg-none">
+                                    Log out
+                                </p>
+                            </a>
+                            <ul class="dropdown-menu dropdown-navbar">
+                                <li class="nav-link">
+                                    <a href="/user.html" class="nav-item dropdown-item">Profile</a>
+                                </li>
+                                <li class="dropdown-divider"></li>
+                                <li class="nav-link">
+                                    <a href="{{ url_for('authentication_blueprint.logout') }}" 
+                                       class="nav-item dropdown-item">Logout</a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="separator d-lg-none"></li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+        <div class="modal modal-search fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModal"
+             aria-hidden="true">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="SEARCH">
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <i class="tim-icons icon-simple-remove"></i>
+                        </button>
+                    </div>
+                </div>
            </div>
-          </div>
        </div>
-      </div>
-      <!-- End Navbar -->
+        <!-- End Navbar -->
+        
--- a/apps/templates/includes/scripts-sidebar.html
+++ b/apps/templates/includes/scripts-sidebar.html
@ -1,113 +0,0 @@
-
-  <script>
-    $(document).ready(function() {
-      $().ready(function() {
-        $sidebar = $('.sidebar');
-        $navbar = $('.navbar');
-        $main_panel = $('.main-panel');
-
-        $full_page = $('.full-page');
-
-        $sidebar_responsive = $('body > .navbar-collapse');
-        sidebar_mini_active = true;
-        white_color = false;
-
-        window_width = $(window).width();
-
-        fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
-
-
-
-        $('.fixed-plugin a').click(function(event) {
-          if ($(this).hasClass('switch-trigger')) {
-            if (event.stopPropagation) {
-              event.stopPropagation();
-            } else if (window.event) {
-              window.event.cancelBubble = true;
-            }
-          }
-        });
-
-        $('.fixed-plugin .background-color span').click(function() {
-          $(this).siblings().removeClass('active');
-          $(this).addClass('active');
-
-          var new_color = $(this).data('color');
-
-          if ($sidebar.length != 0) {
-            $sidebar.attr('data', new_color);
-          }
-
-          if ($main_panel.length != 0) {
-            $main_panel.attr('data', new_color);
-          }
-
-          if ($full_page.length != 0) {
-            $full_page.attr('filter-color', new_color);
-          }
-
-          if ($sidebar_responsive.length != 0) {
-            $sidebar_responsive.attr('data', new_color);
-          }
-        });
-
-        $('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function() {
-          var $btn = $(this);
-
-          if (sidebar_mini_active == true) {
-            $('body').removeClass('sidebar-mini');
-            sidebar_mini_active = false;
-            blackDashboard.showSidebarMessage('Sidebar mini deactivated...');
-          } else {
-            $('body').addClass('sidebar-mini');
-            sidebar_mini_active = true;
-            blackDashboard.showSidebarMessage('Sidebar mini activated...');
-          }
-
-          // we simulate the window Resize so the charts will get updated in realtime.
-          var simulateWindowResize = setInterval(function() {
-            window.dispatchEvent(new Event('resize'));
-          }, 180);
-
-          // we stop the simulation of Window Resize after the animations are completed
-          setTimeout(function() {
-            clearInterval(simulateWindowResize);
-          }, 1000);
-        });
-
-        $('.switch-change-color input').on("switchChange.bootstrapSwitch", function() {
-          var $btn = $(this);
-
-          if (white_color == true) {
-
-            $('body').addClass('change-background');
-            setTimeout(function() {
-              $('body').removeClass('change-background');
-              $('body').removeClass('white-content');
-            }, 900);
-            white_color = false;
-          } else {
-
-            $('body').addClass('change-background');
-            setTimeout(function() {
-              $('body').removeClass('change-background');
-              $('body').addClass('white-content');
-            }, 900);
-
-            white_color = true;
-          }
-
-
-        });
-
-        $('.light-badge').click(function() {
-          $('body').addClass('white-content');
-        });
-
-        $('.dark-badge').click(function() {
-          $('body').removeClass('white-content');
-        });
-      });
-    });
-  </script>
-  
--- a/apps/templates/includes/scripts.html
+++ b/apps/templates/includes/scripts.html
@ -1,14 +1,17 @@
-
-  <!--   Core JS Files   -->
-  <script src="/static/assets/js/core/jquery.min.js"></script>
-  <script src="/static/assets/js/core/popper.min.js"></script>
-  <script src="/static/assets/js/core/bootstrap.min.js"></script>
-  <script src="/static/assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
-  <!-- Chart JS -->
-  <script src="/static/assets/js/plugins/chartjs.min.js"></script>
-  <!--  Notifications Plugin    -->
-  <script src="/static/assets/js/plugins/bootstrap-notify.js"></script>
-  <!-- Control Center for Black Dashboard: parallax effects, scripts for the example pages etc -->
-  <script src="/static/assets/js/black-dashboard.min.js?v=1.0.0"></script><!-- Black Dashboard DEMO methods, don't include it in your project! -->
-  <script src="/static/assets/demo/demo.js"></script>
-  
+<!--   Core JS Files   -->
+<script src="{{ config.ASSETS_ROOT }}/js/core/jquery.min.js"></script>
+<script src="{{ config.ASSETS_ROOT }}/js/core/popper.min.js"></script>
+<script src="{{ config.ASSETS_ROOT }}/js/core/bootstrap.min.js"></script>
+<script src="{{ config.ASSETS_ROOT }}/js/plugins/perfect-scrollbar.jquery.min.js"></script>
+<!--  Google Maps Plugin    -->
+<!-- Place this tag in your head or just before your close body tag. -->
+<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
+<!-- Chart JS -->
+<script src="{{ config.ASSETS_ROOT }}/js/plugins/chartjs.min.js"></script>
+<!--  Notifications Plugin    -->
+<script src="{{ config.ASSETS_ROOT }}/js/plugins/bootstrap-notify.js"></script>
+<!-- Control Center for Black Dashboard: parallax effects, scripts for the example pages etc -->
+<script src="{{ config.ASSETS_ROOT }}/js/black-dashboard.min.js?v=1.0.0"></script>
+<!-- Black Dashboard DEMO methods, don't include it in your project! -->
+<script src="{{ config.ASSETS_ROOT }}/demo/demo.js"></script>
+<script src="{{ config.ASSETS_ROOT }}/js/themeSettings.js"></script>
--- a/apps/templates/includes/sidebar-rtl.html
+++ b/apps/templates/includes/sidebar-rtl.html
@ -1,74 +1,72 @@
-
-
-    <div class="sidebar">
-      <div class="sidebar-wrapper">
-        <div class="logo">
-          <a target="_blank" rel="sponsored noopener noreferrer" 
-             href="https://appseed.us/admin-dashboards/flask-dashboard-black" class="simple-text logo-mini">
-            PI
-          </a>
-          <a target="_blank" rel="sponsored noopener noreferrer" 
-             href="https://appseed.us/admin-dashboards/flask-dashboard-black" class="simple-text logo-normal">
-            Flask Black
-          </a>
-        </div>
-
-        <ul class="nav">
-          <li class="{% if 'index' in segment %} active {% endif %}">
-            <a href="/">
-              <i class="tim-icons icon-chart-pie-36"></i>
-              <p>لوحة القيادة</p>
-            </a>
-          </li>
-          <li class="{% if 'icons' in segment %} active {% endif %}">
-            <a href="/ui-icons.html">
-              <i class="tim-icons icon-atom"></i>
-              <p>الرموز</p>
-            </a>
-          </li>
-          <li class="{% if 'maps' in segment %} active {% endif %}">
-            <a href="/ui-maps.html">
-              <i class="tim-icons icon-pin"></i>
-              <p>خرائط</p>
-            </a>
-          </li>
-          <li class="{% if 'notifications' in segment %} active {% endif %}">
-            <a href="/ui-notifications.html">
-              <i class="tim-icons icon-bell-55"></i>
-              <p>إخطارات</p>
-            </a>
-          </li>
-          <li class="{% if 'page-user' in segment %} active {% endif %}">
-            <a href="/page-user.html">
-              <i class="tim-icons icon-single-02"></i>
-              <p>ملف تعريفي للمستخدم</p>
-            </a>
-          </li>
-          <li class="{% if 'tables' in segment %} active {% endif %}">
-            <a href="/ui-tables.html">
-              <i class="tim-icons icon-puzzle-10"></i>
-              <p>قائمة الجدول</p>
-            </a>
-          </li>
-          <li class="{% if 'typography' in segment %} active {% endif %}">
-            <a href="/ui-typography.html">
-              <i class="tim-icons icon-align-center"></i>
-              <p>طباعة</p>
-            </a>
-          </li>
-          <li class="{% if 'rtl-support' in segment %} active {% endif %}">
-            <a href="/page-rtl-support.html">
-              <i class="tim-icons icon-world"></i>
-              <p>دعم RTL</p>
-            </a>
-          </li>
-          <li>
-            <a href="{{ url_for('base_blueprint.logout') }}" >
-              <i class="tim-icons icon-button-power"></i>
-              <p>Logout</p>
-            </a>
-          </li>
-        </ul>
-        
+<div class="sidebar">
+    <!--
+      Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red"
+  -->
+    <div class="sidebar-wrapper">
+      <div class="logo">
+        <a href="/" class="simple-text logo-mini">
+          ط م
+        </a>
+        <a href="/" class="simple-text logo-normal">
+          توقيت الإبداعية
+        </a>
      </div>
+      <ul class="nav">
+        <li>
+          <a href="/">
+            <i class="tim-icons icon-chart-pie-36"></i>
+            <p>لوحة القيادة</p>
+          </a>
+        </li>
+        <li>
+          <a href="/icons.html">
+            <i class="tim-icons icon-atom"></i>
+            <p>الرموز</p>
+          </a>
+        </li>
+        <li>
+          <a href="/map.html">
+            <i class="tim-icons icon-pin"></i>
+            <p>خرائط</p>
+          </a>
+        </li>
+        <li>
+          <a href="/notifications.html">
+            <i class="tim-icons icon-bell-55"></i>
+            <p>إخطارات</p>
+          </a>
+        </li>
+        <li>
+          <a href="/user.html">
+            <i class="tim-icons icon-single-02"></i>
+            <p>ملف تعريفي للمستخدم</p>
+          </a>
+        </li>
+        <li>
+          <a href="/tables.html">
+            <i class="tim-icons icon-puzzle-10"></i>
+            <p>قائمة الجدول</p>
+          </a>
+        </li>
+        <li>
+          <a href="/typography.html">
+            <i class="tim-icons icon-align-center"></i>
+            <p>طباعة</p>
+          </a>
+        </li>
+        <li>
+          <a href="/rtl.html">
+            <i class="tim-icons icon-world"></i>
+            <p>دعم RTL</p>
+          </a>
+        </li>
+        <li>
+            <a href="/login.html">
+                <i class="tim-icons icon-button-power"></i>
+                <p>Logout</p>
+            </a>
+        </li>
+        
+      </ul>
    </div>
+  </div>
--- a/apps/templates/includes/sidebar.html
+++ b/apps/templates/includes/sidebar.html
@ -1,86 +1,72 @@

-
    <div class="sidebar">
-      <div class="sidebar-wrapper">
-        <div class="logo">
-          <a target="_blank" rel="sponsored noopener noreferrer" 
-             href="https://www.creative-tim.com/product/black-dashboard-flask" class="simple-text logo-mini">
-            PI
-          </a>
-          <a target="_blank" rel="sponsored noopener noreferrer" 
-             href="https://www.creative-tim.com/product/black-dashboard-flask" class="simple-text logo-normal">
-            Flask Black
-          </a>
+        <!--
+          Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red"
+      -->
+        <div class="sidebar-wrapper">
+            <div class="logo">
+                <a href="javascript:void(0)" class="simple-text logo-mini">
+                    CT
+                </a>
+                <a href="javascript:void(0)" class="simple-text logo-normal">
+                    Creative Tim
+                </a>
+            </div>
+            <ul class="nav">
+                <li class="{% if 'index' in segment %} active {% endif %} ">
+                    <a href="/">
+                        <i class="tim-icons icon-chart-pie-36"></i>
+                        <p>Dashboard</p>
+                    </a>
+                </li>
+                <li class="{% if 'user' in segment %} active {% endif %}">
+                    <a href="/user.html">
+                        <i class="tim-icons icon-single-02"></i>
+                        <p>User Profile</p>
+                    </a>
+                </li>
+                <li class="{% if 'icons' in segment %} active {% endif %}">
+                    <a href="/icons.html">
+                        <i class="tim-icons icon-atom"></i>
+                        <p>Icons</p>
+                    </a>
+                </li>
+                <li class="{% if 'map' in segment %} active {% endif %}">
+                    <a href="/map.html">
+                        <i class="tim-icons icon-pin"></i>
+                        <p>Maps</p>
+                    </a>
+                </li>
+                <li class="{% if 'notifications' in segment %} active {% endif %}">
+                    <a href="/notifications.html">
+                        <i class="tim-icons icon-bell-55"></i>
+                        <p>Notifications</p>
+                    </a>
+                </li> 
+                <li class="{% if 'tables' in segment %} active {% endif %}">
+                    <a href="/tables.html">
+                        <i class="tim-icons icon-puzzle-10"></i>
+                        <p>Table List</p>
+                    </a>
+                </li>
+                <li class="{% if 'typography' in segment %} active {% endif %}">
+                    <a href="/typography.html">
+                        <i class="tim-icons icon-align-center"></i>
+                        <p>Typography</p>
+                    </a>
+                </li>
+                <li>
+                    <a href="/rtl.html">
+                        <i class="tim-icons icon-world"></i>
+                        <p>RTL Support</p>
+                    </a>
+                </li>
+                <li>
+                    <a href="{{ url_for('authentication_blueprint.logout') }}">
+                        <i class="tim-icons icon-button-power"></i>
+                        <p>Logout</p>
+                    </a>
+                </li>
+            </ul>
        </div>
-
-        <ul class="nav">
-        {% if current_user.is_authenticated %}
-
-          <li class="{% if 'index' in segment %} active {% endif %}">
-            <a href="/">
-              <i class="tim-icons icon-chart-pie-36"></i>
-              <p>Dashboard</p>
-            </a>
-          </li>
-          <li class="{% if 'icons' in segment %} active {% endif %}">
-            <a href="/ui-icons.html">
-              <i class="tim-icons icon-atom"></i>
-              <p>Icons</p>
-            </a>
-          </li>
-          <li class="{% if 'maps' in segment %} active {% endif %}">
-            <a href="/ui-maps.html">
-              <i class="tim-icons icon-pin"></i>
-              <p>Maps</p>
-            </a>
-          </li>
-          <li class="{% if 'notifications' in segment %} active {% endif %}">
-            <a href="/ui-notifications.html">
-              <i class="tim-icons icon-bell-55"></i>
-              <p>Notifications</p>
-            </a>
-          </li>
-          <li class="{% if 'page-user' in segment %} active {% endif %}">
-            <a href="/page-user.html">
-              <i class="tim-icons icon-single-02"></i>
-              <p>User Profile</p>
-            </a>
-          </li>
-          <li class="{% if 'tables' in segment %} active {% endif %}">
-            <a href="/ui-tables.html">
-              <i class="tim-icons icon-puzzle-10"></i>
-              <p>Table List</p>
-            </a>
-          </li>
-          <li class="{% if 'typography' in segment %} active {% endif %}">
-            <a href="/ui-typography.html">
-              <i class="tim-icons icon-align-center"></i>
-              <p>Typography</p>
-            </a>
-          </li>
-          <li class="{% if 'rtl-support' in segment %} active {% endif %}">
-            <a href="/page-rtl-support.html">
-              <i class="tim-icons icon-world"></i>
-              <p>RTL Support</p>
-            </a>
-          </li>
-          <li>
-            <a href="{{ url_for('authentication_blueprint.logout') }}" >
-              <i class="tim-icons icon-button-power"></i>
-              <p>Logout</p>
-            </a>
-          </li>
-          {% else %}
-          <li class="active">
-            <a target="_blank" 
-               href="https://appseed.us/admin-dashboards/flask-dashboard-black-pro">
-              <i class="tim-icons icon-spaceship"></i>
-              <p>PRO Version</p>
-            </a>
-          </li>   
-          {% endif %}
-                    
-        </ul>
-        
-      </div>
    </div>
--- a/apps/templates/layouts/base-fullscreen.html
+++ b/apps/templates/layouts/base-fullscreen.html
@ -0,0 +1,68 @@
+<!--
+=========================================================
+* * Black Dashboard - v1.0.1
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/black-dashboard
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+-->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="apple-touch-icon" sizes="76x76" href="{{ config.ASSETS_ROOT }}/img/apple-icon.png">
+    <link rel="icon" type="image/png" href="{{ config.ASSETS_ROOT }}/img/favicon.png">
+
+    <title>
+        Flask Dashboard Black - {% block title %}{% endblock %} | AppSeed
+    </title>
+    
+    <!--     Fonts and icons     -->
+    <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet"/>
+    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
+    <!-- Nucleo Icons -->
+    <link href="{{ config.ASSETS_ROOT }}/css/nucleo-icons.css" rel="stylesheet"/>
+    <!-- CSS Files -->
+    <link href="{{ config.ASSETS_ROOT }}/css/black-dashboard.css?v=1.0.0" rel="stylesheet"/>
+    <link href="{{ config.ASSETS_ROOT }}/css/theme-switcher.css" rel="stylesheet"/>
+    <!-- CSS Just for demo purpose, don't include it in your project -->
+    <link href="{{ config.ASSETS_ROOT }}/demo/demo.css" rel="stylesheet"/>
+
+    <!-- Specific Page CSS goes HERE  -->
+    {% block stylesheets %}{% endblock stylesheets %}
+
+</head>
+<body class="">
+
+    <div class="wrapper">
+
+        {% include 'includes/navigation-fullscreen.html' %}
+
+        <div class="container-fluid">
+
+            {% block content %}{% endblock content %}
+
+            {% include 'includes/footer-fullscreen.html' %}
+
+        </div>
+
+    </div>
+
+    {% include 'includes/fixed-plugin.html' %}
+
+    {% include 'includes/scripts.html' %}
+
+    <!-- Specific Page JS goes HERE  -->
+    {% block javascripts %}{% endblock javascripts %}
+
+</body>
+</html>
--- a/apps/templates/layouts/base-rtl.html
+++ b/apps/templates/layouts/base-rtl.html
@ -19,9 +19,8 @@
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <link rel="apple-touch-icon" sizes="76x76" href="/static/assets/img/apple-icon.png">
-  <link rel="icon" type="image/png" href="/static/assets/img/favicon.png">
-  <link rel="canonical" href="https://appseed.us/admin-dashboards/flask-dashboard-black">
+  <link rel="apple-touch-icon" sizes="76x76" href="{{ config.ASSETS_ROOT }}/img/apple-icon.png">
+  <link rel="icon" type="image/png" href="{{ config.ASSETS_ROOT }}/img/favicon.png">

  <title>
    Flask Dashboard Black - {% block title %}{% endblock %} | AppSeed
@ -31,48 +30,42 @@
  <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
  <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
  <!-- Nucleo Icons -->
-  <link href="/static/assets/css/nucleo-icons.css" rel="stylesheet" />
+  <link href="{{ config.ASSETS_ROOT }}/css/nucleo-icons.css" rel="stylesheet" />
  <!-- CSS Files -->
-  <link href="/static/assets/css/black-dashboard.css?v=1.0.0" rel="stylesheet" />
+  <link href="{{ config.ASSETS_ROOT }}/css/black-dashboard.css?v=1.0.0" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css" rel="stylesheet" />
+  <link href="{{ config.ASSETS_ROOT }}/css/theme-switcher.css" rel="stylesheet"/>
  <!-- CSS Just for demo purpose, don't include it in your project -->
-  <link href="/static/assets/demo/demo.css" rel="stylesheet" />
+  <link href="{{ config.ASSETS_ROOT }}/demo/demo.css" rel="stylesheet" />

-  <!-- Specific Page CSS goes HERE  -->
-  {% block stylesheets %}{% endblock stylesheets %}
+    <!-- Specific Page CSS goes HERE  -->
+    {% block stylesheets %}{% endblock stylesheets %}

 </head>
+<body class=" rtl menu-on-right ">

-<body class="rtl menu-on-right ">
-  <div class="wrapper">
+    <div class="wrapper">

-    {% include 'includes/sidebar-rtl.html' %}
+        {% include 'includes/sidebar-rtl.html' %} 

-    <div class="main-panel">
+        <div class="main-panel">

-      {% include 'includes/navigation-rtl.html' %}
-
-      <div class="content">
+        {% include 'includes/navigation-rtl.html' %}  

        {% block content %}{% endblock content %}

-      </div>
+        {% include 'includes/footer.html' %}

-      {% include 'includes/footer.html' %}
+        </div>

    </div>

-  </div>
+    {% include 'includes/fixed-plugin.html' %}

-  {% include 'includes/fixed-plugin.html' %}
+    {% include 'includes/scripts.html' %}

-  {% include 'includes/scripts.html' %}
-
-  {% include 'includes/scripts-sidebar.html' %}
-
-  <!-- Specific Page JS goes HERE  -->
-  {% block javascripts %}{% endblock javascripts %}
+    <!-- Specific Page JS goes HERE  -->
+    {% block javascripts %}{% endblock javascripts %}

 </body>
-
 </html>
--- a/apps/templates/layouts/base.html
+++ b/apps/templates/layouts/base.html
@ -17,61 +17,53 @@
 <html lang="en">

 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <link rel="apple-touch-icon" sizes="76x76" href="/static/assets/img/apple-icon.png">
-  <link rel="icon" type="image/png" href="/static/assets/img/favicon.png">
-  <link rel="canonical" href="https://appseed.us/admin-dashboards/flask-dashboard-black">
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="apple-touch-icon" sizes="76x76" href="{{ config.ASSETS_ROOT }}/img/apple-icon.png">
+    <link rel="icon" type="image/png" href="{{ config.ASSETS_ROOT }}/img/favicon.png">

-  <title>
-    Flask Dashboard Black - {% block title %}{% endblock %} | AppSeed
-  </title>
+    <title>
+        Flask Dashboard Black - {% block title %}{% endblock %} | AppSeed
+    </title>

-  <!--     Fonts and icons     -->
-  <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
-  <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
-  <!-- Nucleo Icons -->
-  <link href="/static/assets/css/nucleo-icons.css" rel="stylesheet" />
-  <!-- CSS Files -->
-  <link href="/static/assets/css/black-dashboard.css?v=1.0.0" rel="stylesheet" />
-  <!-- CSS Just for demo purpose, don't include it in your project -->
-  <link href="/static/assets/demo/demo.css" rel="stylesheet" />
+    <!--     Fonts and icons     -->
+    <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet"/>
+    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
+    <!-- Nucleo Icons -->
+    <link href="{{ config.ASSETS_ROOT }}/css/nucleo-icons.css" rel="stylesheet"/>
+    <!-- CSS Files -->
+    <link href="{{ config.ASSETS_ROOT }}/css/black-dashboard.css?v=1.0.0" rel="stylesheet"/>
+    <link href="{{ config.ASSETS_ROOT }}/css/theme-switcher.css" rel="stylesheet"/>
+    <!-- CSS Just for demo purpose, don't include it in your project -->
+    <link href="{{ config.ASSETS_ROOT }}/demo/demo.css" rel="stylesheet"/>

-  <!-- Specific Page CSS goes HERE  -->
-  {% block stylesheets %}{% endblock stylesheets %}
+    <!-- Specific Page CSS goes HERE  -->
+    {% block stylesheets %}{% endblock stylesheets %}
        
 </head>
-
 <body class="">
-  <div class="wrapper">

-    {% include 'includes/sidebar.html' %}
+    <div class="wrapper">

-    <div class="main-panel">
+        {% include 'includes/sidebar.html' %}

-      {% include 'includes/navigation.html' %}
+        <div class="main-panel">

-      <div class="content">
+            {% include 'includes/navigation.html' %}

-        {% block content %}{% endblock content %}
+            {% block content %}{% endblock content %}

-      </div>
-
-      {% include 'includes/footer.html' %}
+            {% include 'includes/footer.html' %}

+        </div>
    </div>

-  </div>
+    {% include 'includes/fixed-plugin.html' %}

-  {% include 'includes/fixed-plugin.html' %}
+    {% include 'includes/scripts.html' %}

-  {% include 'includes/scripts.html' %}
-
-  {% include 'includes/scripts-sidebar.html' %}
-
-  <!-- Specific Page JS goes HERE  -->
-  {% block javascripts %}{% endblock javascripts %}
+    <!-- Specific Page JS goes HERE  -->
+    {% block javascripts %}{% endblock javascripts %}

 </body>
-
 </html>
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -3,7 +3,6 @@ services:
  appseed-app:
    container_name: appseed_app
    restart: always
-    env_file: .env
    build: .
    networks:
      - db_network
@ -13,7 +12,7 @@ services:
    restart: always
    image: "nginx:latest"
    ports:
-      - "85:85"
+      - "5085:5085"
    volumes:
      - ./nginx:/etc/nginx/conf.d
    networks:
--- a/env.sample
+++ b/env.sample
@ -0,0 +1,22 @@
+# True for development, False for production
+DEBUG=True
+
+# Flask ENV
+FLASK_APP=run.py
+SECRET_KEY=YOUR_SUPER_KEY
+
+# Used for CDN (in production)
+# No Slash at the end
+ASSETS_ROOT=/static/assets
+
+# If DEBUG=False (production mode)
+# DB_ENGINE=mysql
+# DB_NAME=appseed_db
+# DB_HOST=localhost
+# DB_PORT=3306
+# DB_USERNAME=appseed_db_usr
+# DB_PASS=<STRONG_PASS>
+
+# SOCIAL AUTH Github
+# GITHUB_ID=YOUR_GITHUB_ID
+# GITHUB_SECRET=YOUR_GITHUB_SECRET
--- a/apps/static/assets/gulpfile.js
+++ b/apps/static/assets/gulpfile.js
@ -20,9 +20,9 @@ var rename = require("gulp-rename");

 const paths = {
    src: {
-        base: './',
-        css: './css',
-        scss: './scss',
+        base: './apps/static/assets',
+        css: './apps/static/assets/css',
+        scss: './apps/static/assets/scss',
        node_modules: './node_modules/',
        vendor: './vendor'
    }
@ -42,6 +42,19 @@ gulp.task('scss', function() {
        .pipe(browserSync.stream());
 });

+// CSS
+gulp.task('css', function() {
+    return gulp.src([
+            paths.src.css + '/black-dashboard.css'
+        ])
+        .pipe(cleanCss())
+        .pipe(rename(function(path) {
+            // Updates the object in-place
+            path.extname = ".min.css";
+        }))
+        .pipe(gulp.dest(paths.src.css))
+});
+
 // Minify CSS
 gulp.task('minify:css', function() {
    return gulp.src([
--- a/nginx/appseed-app.conf
+++ b/nginx/appseed-app.conf
@ -3,7 +3,7 @@ upstream webapp {
 }

 server {
-    listen 85;
+    listen 5085;
    server_name localhost;

    location / {
--- a/package.json
+++ b/package.json
@ -1,21 +1,38 @@
 {
-    "name": "black-dashboard-flask",
-    "mastertemplate": "boilerplate-code-flask-dashboard",
-    "version": "1.0.4",
-    "description": "Template project - Flask Boilerplate Code ",
-    "scripts": {},
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/creativetimofficial/black-dashboard-flask"
-    },
-    "bugs": {
-        "url": "https://github.com/creativetimofficial/black-dashboard-flask/issues",
-        "email": "support@appseed.us"
-    },
-    "author": "Creative-Tim / AppSeed.us",
-    "engines": {
-        "node": ">=10.0.0"
-    },
-    "dependencies": {},
-    "devDependencies": {}
+  "name": "appseed-generic",
+  "version": "1.0.0",
+  "description": "Generic tooling by AppSeed",
+  "main": "gulpfile.js",
+  "author": "AppSeed",
+  "keywords": [
+      "css",
+      "sass",
+      "gulp",
+      "web"
+  ],
+  "homepage": "https://appseed.us",
+  "bugs": {
+      "email": "support@appseed.us"
+  },
+  "license": "MIT License",
+  "devDependencies": {
+      "browser-sync": "^2.27.4",
+      "del": "^6.0.0",
+      "gulp": "^4.0.2",
+      "gulp-autoprefixer": "^8.0.0",
+      "gulp-clean-css": "^4.3.0",
+      "gulp-cssbeautify": "^3.0.0",
+      "node-sass": "^6.0.1",
+      "gulp-file-include": "^2.3.0",
+      "gulp-header": "^2.0.9",
+      "gulp-htmlmin": "^5.0.1",
+      "gulp-npm-dist": "^1.0.3",
+      "gulp-plumber": "^1.2.1",
+      "gulp-rename": "^2.0.0",
+      "gulp-sass": "^5.0.0",
+      "gulp-sourcemaps": "^3.0.0",
+      "gulp-uglify": "^3.0.2",
+      "gulp-wait": "^0.0.2",
+      "merge-stream": "^2.0.0"
+  }
 }
--- a/requirements-mysql.txt
+++ b/requirements-mysql.txt
@ -1,2 +0,0 @@
-r requirements.txt
-flask_mysqldb
--- a/requirements-pgsql.txt
+++ b/requirements-pgsql.txt
@ -1,2 +0,0 @@
-r requirements.txt
-psycopg2
--- a/requirements.txt
+++ b/requirements.txt
@ -1,12 +1,18 @@
-flask==2.0.1
+flask==2.0.2
 flask_login==0.5.0
 flask_migrate==3.1.0
-flask_wtf==0.15.1
-WTForms==2.3.3
+WTForms==3.0.1
+flask_wtf==1.0.0
 flask_sqlalchemy==2.5.1
-sqlalchemy==1.4.23
+sqlalchemy==1.4.29
 email_validator==1.1.3
-python-decouple==3.4
 gunicorn==20.1.0
-jinja2==3.0.1
+jinja2==3.0.3
 flask-restx==0.5.1
+Werkzeug==2.0.3
+python-dotenv==0.19.2
+Flask-Minify==0.37
+Flask-Dance==5.1.0
+blinker==1.4
+pyOpenSSL
+# flask_mysqldb
--- a/run.py
+++ b/run.py
@ -3,15 +3,16 @@
 Copyright (c) 2019 - present AppSeed.us
 """

-from flask_migrate import Migrate
-from sys import exit
-from decouple import config
+import os
+from   flask_migrate import Migrate
+from   flask_minify  import Minify
+from   sys import exit

 from apps.config import config_dict
 from apps import create_app, db

 # WARNING: Don't run with debug turned on in production!
-DEBUG = config('DEBUG', default=True, cast=bool)
+DEBUG = (os.getenv('DEBUG', 'False') == 'True')

 # The configuration
 get_config_mode = 'Debug' if DEBUG else 'Production'
@ -27,10 +28,13 @@ except KeyError:
 app = create_app(app_config)
 Migrate(app, db)

+if not DEBUG:
+    Minify(app=app, html=True, js=False, cssless=False)
+    
 if DEBUG:
-    app.logger.info('DEBUG       = ' + str(DEBUG))
-    app.logger.info('Environment = ' + get_config_mode)
+    app.logger.info('DEBUG       = ' + str(DEBUG)             )
    app.logger.info('DBMS        = ' + app_config.SQLALCHEMY_DATABASE_URI)
+    app.logger.info('ASSETS_ROOT = ' + app_config.ASSETS_ROOT )

 if __name__ == "__main__":
    app.run()
--- a/runtime.txt
+++ b/runtime.txt
@ -1 +0,0 @@
-python-3.8.10
Author	SHA1	Message	Date
App Generator	0f8900b92b	Release v1.0.5 - Bump Codebase	2023-06-06 11:03:51 +03:00
App Generator	40a4fe974f	Codebase Update	2023-06-06 11:03:31 +03:00
App Generator	3e51831eab	CleanUp before Update	2023-06-06 10:56:09 +03:00
				`@ -0,0 +1 @@`
				{"version":3,"sources":["_site_dashboard_free/assets/js/dashboard-free.js"],"names":["transparent","transparentDemo","fixedTop","navbar_initialized","backgroundOrange","sidebar_mini_active","toggle_initialized","$html","$","$body","$navbar_minimize_fixed","$collapse","$navbar","$tagsinput","$selectpicker","$navbar_color","$full_screen_map","$datetimepicker","$datepicker","$timepicker","seq","delays","durations","seq2","delays2","durations2","hexToRGB","hex","alpha","r","parseInt","slice","g","b","navigator","platform","indexOf","length","PerfectScrollbar","wheelSpeed","wheelPropagation","minScrollbarLength","suppressScrollX","each","this","addClass","document","ready","offset","window","scroll","scrollTop","css","top","on","closest","removeClass","blackDashboard","initMinimizeSidebar","scroll_distance","attr","checkScrollForTransparentNavbar","parent","$this","data_on_label","data","data_off_label","bootstrapSwitch","onText","offText","$toggle","misc","navbar_menu_visible","setTimeout","remove","appendTo","click","resize","isExpanded","find","hasClass","width","showSidebarMessage","simulateWindowResize","setInterval","dispatchEvent","Event","clearInterval","message","notify","icon","type","timer","placement","from","align","e","console","log"],"mappings":"AAkBA,IAAIA,aAAc,EACdC,iBAAkB,EAClBC,UAAW,EAEXC,oBAAqB,EACrBC,kBAAmB,EACnBC,qBAAsB,EACtBC,oBAAqB,EAErBC,MAAQC,EAAE,QACVC,MAAQD,EAAE,QACVE,uBAAyBF,EAAE,0BAC3BG,UAAYH,EAAE,aACdI,QAAUJ,EAAE,WACZK,WAAaL,EAAE,cACfM,cAAgBN,EAAE,iBAClBO,cAAgBP,EAAE,4BAClBQ,iBAAmBR,EAAE,oBACrBS,gBAAkBT,EAAE,mBACpBU,YAAcV,EAAE,eAChBW,YAAcX,EAAE,eAEhBY,IAAM,EAAGC,OAAS,GAAIC,UAAY,IAClCC,KAAO,EAAGC,QAAU,GAAIC,WAAa,IAuMzC,SAASC,SAASC,EAAKC,GACnB,IAAIC,EAAIC,SAASH,EAAII,MAAM,EAAG,GAAI,IAC9BC,EAAIF,SAASH,EAAII,MAAM,EAAG,GAAI,IAC9BE,EAAIH,SAASH,EAAII,MAAM,EAAG,GAAI,IAElC,OAAIH,EACO,QAAUC,EAAI,KAAOG,EAAI,KAAOC,EAAI,KAAOL,EAAQ,IAEnD,OAASC,EAAI,KAAOG,EAAI,KAAOC,EAAI,KA7MlD,WAGI,IAFqD,EAArCC,UAAUC,SAASC,QAAQ,OAE7B,CAEX,GAA8B,GAA3B5B,EAAE,eAAe6B,OACX,IAAIC,iBAAiB,cAAc,CAC1CC,WAAY,EACZC,kBAAkB,EAClBC,mBAAoB,GACpBC,iBAAiB,IAIrB,GAA4C,GAAzClC,EAAE,6BAA6B6B,OAAY,CAElC,IAAIC,iBAAiB,6BAC/B9B,EAAE,qBAAqBmC,KAAK,WAChB,IAAIL,iBAAiB9B,EAAEoC,MAAM,MAMzCrC,MAAMsC,SAAS,6BAEftC,MAAMsC,SAAS,yBA1BtB,GA8BArC,EAAEsC,UAAUC,MAAM,WAEhB,IAEIC,EADYxC,EAAE,QACOwC,WACgC,EAArCd,UAAUC,SAASC,QAAQ,OAAc5B,EAAE,OAAOA,EAAEyC,SAC1DC,OAAO,WAID,GAFH1C,EAAEoC,MAAMO,YAGrB3C,EAAE,0BAA0B4C,IAAI,UAAW,KAE3C5C,EAAE,0BAA0B4C,IAAI,UAAW,OAK/C5C,EAAEsC,UAAUI,OAAO,WACF1C,EAAEoC,MAAMO,YACLH,EAAOK,IACvB7C,EAAE,0BAA0B4C,IAAI,UAAW,KAE3C5C,EAAE,0BAA0B4C,IAAI,UAAW,OAIX,GAAhC5C,EAAE,oBAAoB6B,QAAuC,GAAxB7B,EAAE,YAAY6B,QAErD7B,EAAE,aAAa8C,GAAG,mBAAoB,WAClC9C,EAAEoC,MAAMW,QAAQ,WAAWC,YAAY,sBAAsBX,SAAS,cACvES,GAAG,mBAAoB,WACtB9C,EAAEoC,MAAMW,QAAQ,WAAWV,SAAS,sBAAsBW,YAAY,cAI5EC,eAAeC,sBAEf9C,QAAUJ,EAAE,4BACZmD,gBAAkB/C,QAAQgD,KAAK,oBAAsB,IAGV,GAAxCpD,EAAE,4BAA4B6B,SAC7BoB,eAAeI,kCACfrD,EAAEyC,QAAQK,GAAG,SAAUG,eAAeI,kCAG1CrD,EAAE,iBAAiB8C,GAAG,QAAS,WAC3B9C,EAAEoC,MAAMkB,OAAO,gBAAgBjB,SAAS,uBACzCS,GAAG,OAAQ,WACV9C,EAAEoC,MAAMkB,OAAO,gBAAgBN,YAAY,uBAI/ChD,EAAE,qBAAqBmC,KAAK,WACxBoB,MAAQvD,EAAEoC,MACVoB,cAAgBD,MAAME,KAAK,aAAe,GAC1CC,eAAiBH,MAAME,KAAK,cAAgB,GAE5CF,MAAMI,gBAAgB,CAClBC,OAAQJ,cACRK,QAASH,qBAKnB1D,EAAEsC,UAAUQ,GAAG,QAAS,iBAAkB,WACtC,IAAIgB,EAAU9D,EAAEoC,MAEhB,GAA8C,GAA3Ca,eAAec,KAAKC,oBACnBjE,MAAMiD,YAAY,YAClBC,eAAec,KAAKC,oBAAsB,EAC1CC,WAAW,WACPH,EAAQd,YAAY,WACpBhD,EAAE,cAAckE,UACjB,SAEA,CACHD,WAAW,WACPH,EAAQzB,SAAS,YAClB,KAGHrC,EADU,iCACHmE,SAAS,QAAQC,MAAM,WAC1BrE,MAAMiD,YAAY,YAClBC,eAAec,KAAKC,oBAAsB,EACtCC,WAAW,WACPH,EAAQd,YAAY,WACpBhD,EAAE,cAAckE,UAClB,OAGVnE,MAAMsC,SAAS,YACfY,eAAec,KAAKC,oBAAsB,KAIlDhE,EAAEyC,QAAQ4B,OAAO,WAIb,GAFAzD,IAAMG,KAAO,EAEiB,GAA3BP,iBAAiBqB,QAAuC,GAAxB7B,EAAE,YAAY6B,OAAY,CAC3D,IAAIyC,EAAalE,QAAQmE,KAAK,4BAA4BnB,KAAK,iBAC3DhD,QAAQoE,SAAS,aAAmC,IAApBxE,EAAEyC,QAAQgC,QAC5CrE,QAAQ4C,YAAY,YAAYX,SAAS,sBAChCjC,QAAQoE,SAAS,uBAAyBxE,EAAEyC,QAAQgC,QAAU,KAAqB,SAAdH,GAC9ElE,QAAQiC,SAAS,YAAYW,YAAY,yBAKjDC,eAAiB,CACfc,KAAK,CACDC,oBAAqB,GAGzBd,oBAAoB,WACgB,GAA7BlD,EAAE,iBAAiB6B,SACpBhC,qBAAsB,GAGxBG,EAAE,oBAAoBoE,MAAM,WACbpE,EAAEoC,MAEa,GAAvBvC,qBACCG,EAAE,QAAQgD,YAAY,gBACtBnD,qBAAsB,EACtBoD,eAAeyB,mBAAmB,iCAElC1E,EAAE,QAAQqC,SAAS,gBACnBxC,qBAAsB,EACtBoD,eAAeyB,mBAAmB,8BAItC,IAAIC,EAAuBC,YAAY,WACnCnC,OAAOoC,cAAc,IAAIC,MAAM,YACjC,KAGFb,WAAW,WACPc,cAAcJ,IAChB,QAIVD,mBAAoB,SAASM,GAC3B,IACEhF,EAAEiF,OAAO,CACLC,KAAM,yBACNF,QAASA,GACT,CACEG,KAAM,OACNC,MAAO,IACPC,UAAW,CACPC,KAAM,MACNC,MAAO,WAGjB,MAAOC,GACPC,QAAQC,IAAI"}