initial commit

2024-01-03 09:22:43 +00:00 · 2024-01-03 09:22:43 +00:00 · 2b1531a31d
commit 2b1531a31d
105 changed files with 167489 additions and 0 deletions
--- a/18
+++ b/18
@ -0,0 +1,18 @@
+FROM python:3.9
+
+# set environment variables
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+
+COPY requirements.txt .
+# install python dependencies
+RUN pip install --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# running migrations
+RUN python manage.py migrate
+
+# gunicorn
+CMD ["gunicorn", "--config", "gunicorn-cfg.py", "core.wsgi"]
--- a/README.md
+++ b/README.md
@ -0,0 +1,204 @@
+# [Adminator Django](https://appseed.us/product/adminator/django/) 
+
+Open-source **[Django Dashboard](https://appseed.us/admin-dashboards/django/)** generated by `AppSeed` op top of an iconic design. For newcomers, **Adminator** is one of the best open-source admin dashboard & control panel theme. Built on top of Bootstrap, `Adminator` provides a range of responsive, reusable, and commonly used components. 
+
+- 👉 [Adminator Django](https://appseed.us/product/adminator/django/) - `Product page`
+- 👉 [Adminator Django](https://django-adminator.appseed-srv1.com) - `LIVE deployment`
+
+<br />
+
+> 🚀 Built with [App Generator](https://appseed.us/generator/), Timestamp: `2022-05-31 07:49`
+
+- ✅ Database: `sqlite`
+- ✅ UI-Ready app, Django Native ORM
+- ✅ `Session-Based authentication`, Forms validation
+- ✅ Design: [Adminator](https://github.com/app-generator/adminator) **v2.0.3**
+  - Gulp-generated version
+
+<br />
+
+![Adminator Dashboard - Starter generated by AppSeed.](https://user-images.githubusercontent.com/51070104/173175611-63faf177-33d8-4238-ad0b-271a16465bd0.png)
+
+<br /> 
+
+## ✨ Start the app in Docker
+
+> **Step 1** - Download the code from the GH repository (using `GIT`) 
+
+```bash
+$ # Get the code
+$ git clone https://github.com/app-generator/django-adminator.git
+$ cd django-adminator
+```
+
+<br />
+
+> **Step 2** - Start the APP in `Docker`
+
+```bash
+$ docker-compose up --build 
+```
+
+Visit `http://localhost:5085` in your browser. The app should be up & running.
+
+<br />
+
+## ✨ How to use it
+
+> Download the code 
+
+```bash
+$ # Get the code
+$ git clone https://github.com/app-generator/django-adminator.git
+$ cd django-adminator
+```
+
+<br />
+
+### 👉 Set Up for `Unix`, `MacOS` 
+
+> Install modules via `VENV`  
+
+```bash
+$ virtualenv env
+$ source env/bin/activate
+$ pip3 install -r requirements.txt
+```
+
+<br />
+
+> Set Up Database
+
+```bash
+$ python manage.py makemigrations
+$ python manage.py migrate
+```
+
+<br />
+
+> Start the app
+
+```bash
+$ python manage.py runserver
+```
+
+At this point, the app runs at `http://127.0.0.1:8000/`. 
+
+<br />
+
+### 👉 Set Up for `Windows` 
+
+> Install modules via `VENV` (windows) 
+
+```
+$ virtualenv env
+$ .\env\Scripts\activate
+$ pip3 install -r requirements.txt
+```
+
+<br />
+
+> Set Up Database
+
+```bash
+$ python manage.py makemigrations
+$ python manage.py migrate
+```
+
+<br />
+
+> Start the app
+
+```bash
+$ python manage.py runserver
+```
+
+At this point, the app runs at `http://127.0.0.1:8000/`. 
+
+<br />
+
+### 👉 Create Users
+
+By default, the app redirects guest users to authenticate. In order to access the private pages, follow this set up: 
+
+- Start the app via `flask run`
+- Access the `registration` page and create a new user:
+  - `http://127.0.0.1:8000/register/`
+- Access the `sign in` page and authenticate
+  - `http://127.0.0.1:8000/login/`
+
+<br />
+
+## ✨ Code-base structure
+
+The project is coded using a simple and intuitive structure presented below:
+
+```bash
+< PROJECT ROOT >
+   |
+   |-- core/                               # Implements app configuration
+   |    |-- settings.py                    # Defines Global Settings
+   |    |-- wsgi.py                        # Start the app in production
+   |    |-- urls.py                        # Define URLs served by all apps/nodes
+   |
+   |-- apps/
+   |    |
+   |    |-- home/                          # A simple app that serve HTML files
+   |    |    |-- views.py                  # Serve HTML pages for authenticated users
+   |    |    |-- urls.py                   # Define some super simple routes  
+   |    |
+   |    |-- authentication/                # Handles auth routes (login and register)
+   |    |    |-- urls.py                   # Define authentication routes  
+   |    |    |-- views.py                  # Handles login and registration  
+   |    |    |-- forms.py                  # Define auth forms (login and register) 
+   |    |
+   |    |-- static/
+   |    |    |-- <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
+   |         |
+   |         |-- layouts/                   # Master pages
+   |         |    |-- base-fullscreen.html  # Used by Authentication pages
+   |         |    |-- base.html             # Used by common pages
+   |         |
+   |         |-- accounts/                  # Authentication pages
+   |         |    |-- login.html            # Login page
+   |         |    |-- register.html         # Register page
+   |         |
+   |         |-- home/                      # UI Kit Pages
+   |              |-- index.html            # Index page
+   |              |-- 404-page.html         # 404 page
+   |              |-- *.html                # All other pages
+   |
+   |-- requirements.txt                     # Development modules - SQLite storage
+   |
+   |-- .env                                 # Inject Configuration via Environment
+   |-- manage.py                            # Start the app - Django default start script
+   |
+   |-- ************************************************************************
+```
+
+<br />
+
+## ✨ PRO Version
+
+> For more components, pages and priority on support, feel free to take a look at this amazing starter:
+
+Soft UI Dashboard is a premium Bootstrap 5 Design now available for download in Django. Made of hundred of elements, designed blocks, and fully coded pages, Soft UI Dashboard PRO is ready to help you create stunning websites and web apps.
+
+- 👉 [Soft UI Dashboard PRO Django](https://appseed.us/product/soft-ui-dashboard-pro/django/) - Product Page
+- 👉 [Soft UI Dashboard PRO Django](https://django-soft-ui-dashboard-pro.appseed-srv1.com/) - LIVE Demo
+
+<br >
+
+![Soft UI Dashboard PRO - Starter generated by AppSeed.](https://user-images.githubusercontent.com/51070104/170829870-8acde5af-849a-4878-b833-3be7e67cff2d.png)
+
+<br />
+
+---
+[Adminator Django](https://appseed.us/product/adminator/django/)  - Open-source starter generated by **[AppSeed Generator](https://appseed.us/generator/)**.
--- a/apps/init.py
+++ b/apps/init.py
--- a/apps/authentication/init.py
+++ b/apps/authentication/init.py
@ -0,0 +1,4 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
--- a/apps/authentication/admin.py
+++ b/apps/authentication/admin.py
@ -0,0 +1,8 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django.contrib import admin
+
+# Register your models here.
--- a/apps/authentication/config.py
+++ b/apps/authentication/config.py
@ -0,0 +1,11 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django.apps import AppConfig
+
+
+class AuthConfig(AppConfig):
+    name = 'apps.auth'
+    label = 'apps_auth'
--- a/apps/authentication/forms.py
+++ b/apps/authentication/forms.py
@ -0,0 +1,60 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django import forms
+from django.contrib.auth.forms import UserCreationForm
+from django.contrib.auth.models import User
+
+
+class LoginForm(forms.Form):
+    username = forms.CharField(
+        widget=forms.TextInput(
+            attrs={
+                "placeholder": "Username",
+                "class": "form-control"
+            }
+        ))
+    password = forms.CharField(
+        widget=forms.PasswordInput(
+            attrs={
+                "placeholder": "Password",
+                "class": "form-control"
+            }
+        ))
+
+
+class SignUpForm(UserCreationForm):
+    username = forms.CharField(
+        widget=forms.TextInput(
+            attrs={
+                "placeholder": "Username",
+                "class": "form-control"
+            }
+        ))
+    email = forms.EmailField(
+        widget=forms.EmailInput(
+            attrs={
+                "placeholder": "Email",
+                "class": "form-control"
+            }
+        ))
+    password1 = forms.CharField(
+        widget=forms.PasswordInput(
+            attrs={
+                "placeholder": "Password",
+                "class": "form-control"
+            }
+        ))
+    password2 = forms.CharField(
+        widget=forms.PasswordInput(
+            attrs={
+                "placeholder": "Password check",
+                "class": "form-control"
+            }
+        ))
+
+    class Meta:
+        model = User
+        fields = ('username', 'email', 'password1', 'password2')
--- a/apps/authentication/migrations/init.py
+++ b/apps/authentication/migrations/init.py
@ -0,0 +1,4 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
--- a/apps/authentication/models.py
+++ b/apps/authentication/models.py
@ -0,0 +1,8 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django.db import models
+
+# Create your models here.
--- a/apps/authentication/tests.py
+++ b/apps/authentication/tests.py
@ -0,0 +1,8 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django.test import TestCase
+
+# Create your tests here.
--- a/apps/authentication/urls.py
+++ b/apps/authentication/urls.py
@ -0,0 +1,14 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django.urls import path
+from .views import login_view, register_user
+from django.contrib.auth.views import LogoutView
+
+urlpatterns = [
+    path('login/', login_view, name="login"),
+    path('register/', register_user, name="register"),
+    path("logout/", LogoutView.as_view(), name="logout")
+]
--- a/apps/authentication/views.py
+++ b/apps/authentication/views.py
@ -0,0 +1,56 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+# Create your views here.
+from django.shortcuts import render, redirect
+from django.contrib.auth import authenticate, login
+from .forms import LoginForm, SignUpForm
+
+
+def login_view(request):
+    form = LoginForm(request.POST or None)
+
+    msg = None
+
+    if request.method == "POST":
+
+        if form.is_valid():
+            username = form.cleaned_data.get("username")
+            password = form.cleaned_data.get("password")
+            user = authenticate(username=username, password=password)
+            if user is not None:
+                login(request, user)
+                return redirect("/")
+            else:
+                msg = 'Invalid credentials'
+        else:
+            msg = 'Error validating the form'
+
+    return render(request, "accounts/login.html", {"form": form, "msg": msg})
+
+
+def register_user(request):
+    msg = None
+    success = False
+
+    if request.method == "POST":
+        form = SignUpForm(request.POST)
+        if form.is_valid():
+            form.save()
+            username = form.cleaned_data.get("username")
+            raw_password = form.cleaned_data.get("password1")
+            user = authenticate(username=username, password=raw_password)
+
+            msg = 'User created successfully.'
+            success = True
+
+            # return redirect("/login/")
+
+        else:
+            msg = 'Form is not valid'
+    else:
+        form = SignUpForm()
+
+    return render(request, "accounts/register.html", {"form": form, "msg": msg, "success": success})
--- a/apps/config.py
+++ b/apps/config.py
@ -0,0 +1,7 @@
+from django.apps import AppConfig
+
+
+class AppsConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'apps'
+    label = 'apps'
--- a/apps/context_processors.py
+++ b/apps/context_processors.py
@ -0,0 +1,6 @@
+from django.conf import settings
+
+def cfg_assets_root(request):
+
+    return { 'ASSETS_ROOT' : settings.ASSETS_ROOT }
+
--- a/apps/home/init.py
+++ b/apps/home/init.py
@ -0,0 +1,4 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
--- a/apps/home/admin.py
+++ b/apps/home/admin.py
@ -0,0 +1,8 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django.contrib import admin
+
+# Register your models here.
--- a/apps/home/config.py
+++ b/apps/home/config.py
@ -0,0 +1,11 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django.apps import AppConfig
+
+
+class MyConfig(AppConfig):
+    name = 'apps.home'
+    label = 'apps_home'
--- a/apps/home/migrations/init.py
+++ b/apps/home/migrations/init.py
@ -0,0 +1,4 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
--- a/apps/home/models.py
+++ b/apps/home/models.py
@ -0,0 +1,10 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django.db import models
+from django.contrib.auth.models import User
+
+# Create your models here.
+
--- a/apps/home/tests.py
+++ b/apps/home/tests.py
@ -0,0 +1,8 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django.test import TestCase
+
+# Create your tests here.
--- a/apps/home/urls.py
+++ b/apps/home/urls.py
@ -0,0 +1,17 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django.urls import path, re_path
+from apps.home import views
+
+urlpatterns = [
+
+    # The home page
+    path('', views.index, name='home'),
+
+    # Matches any html file
+    re_path(r'^.*\.*', views.pages, name='pages'),
+
+]
--- a/apps/home/views.py
+++ b/apps/home/views.py
@ -0,0 +1,44 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django import template
+from django.contrib.auth.decorators import login_required
+from django.http import HttpResponse, HttpResponseRedirect
+from django.template import loader
+from django.urls import reverse
+
+
+@login_required(login_url="/login/")
+def index(request):
+    context = {'segment': 'index'}
+
+    html_template = loader.get_template('home/index.html')
+    return HttpResponse(html_template.render(context, request))
+
+
+@login_required(login_url="/login/")
+def pages(request):
+    context = {}
+    # All resource paths end in .html.
+    # Pick out the html file name from the url. And load that template.
+    try:
+
+        load_template = request.path.split('/')[-1]
+
+        if load_template == 'admin':
+            return HttpResponseRedirect(reverse('admin:index'))
+        context['segment'] = load_template
+
+        html_template = loader.get_template('home/' + load_template)
+        return HttpResponse(html_template.render(context, request))
+
+    except template.TemplateDoesNotExist:
+
+        html_template = loader.get_template('home/page-404.html')
+        return HttpResponse(html_template.render(context, request))
+
+    except:
+        html_template = loader.get_template('home/page-500.html')
+        return HttpResponse(html_template.render(context, request))
--- a/apps/static/assets/.gitkeep
+++ b/apps/static/assets/.gitkeep
--- a/apps/static/assets/css/index.css
+++ b/apps/static/assets/css/index.css
--- a/apps/static/assets/css/index.css.map
+++ b/apps/static/assets/css/index.css.map
--- a/apps/static/assets/css/index.min.css
+++ b/apps/static/assets/css/index.min.css
--- a/apps/static/assets/fonts/icons/fontawesome/FontAwesome.otf
+++ b/apps/static/assets/fonts/icons/fontawesome/FontAwesome.otf
--- a/apps/static/assets/fonts/icons/fontawesome/fontawesome-webfont.eot
+++ b/apps/static/assets/fonts/icons/fontawesome/fontawesome-webfont.eot
--- a/apps/static/assets/fonts/icons/fontawesome/fontawesome-webfont.svg
+++ b/apps/static/assets/fonts/icons/fontawesome/fontawesome-webfont.svg
--- a/apps/static/assets/fonts/icons/fontawesome/fontawesome-webfont.ttf
+++ b/apps/static/assets/fonts/icons/fontawesome/fontawesome-webfont.ttf
--- a/apps/static/assets/fonts/icons/fontawesome/fontawesome-webfont.woff
+++ b/apps/static/assets/fonts/icons/fontawesome/fontawesome-webfont.woff
--- a/apps/static/assets/fonts/icons/fontawesome/fontawesome-webfont.woff2
+++ b/apps/static/assets/fonts/icons/fontawesome/fontawesome-webfont.woff2
--- a/apps/static/assets/fonts/icons/themify/themify.eot
+++ b/apps/static/assets/fonts/icons/themify/themify.eot
--- a/apps/static/assets/fonts/icons/themify/themify.svg
+++ b/apps/static/assets/fonts/icons/themify/themify.svg
--- a/apps/static/assets/fonts/icons/themify/themify.ttf
+++ b/apps/static/assets/fonts/icons/themify/themify.ttf
--- a/apps/static/assets/fonts/icons/themify/themify.woff
+++ b/apps/static/assets/fonts/icons/themify/themify.woff
--- a/apps/static/assets/images/404.png
+++ b/apps/static/assets/images/404.png
--- a/apps/static/assets/images/500.png
+++ b/apps/static/assets/images/500.png
--- a/apps/static/assets/images/bg.jpg
+++ b/apps/static/assets/images/bg.jpg
--- a/apps/static/assets/images/datatables/sort_asc.png
+++ b/apps/static/assets/images/datatables/sort_asc.png
--- a/apps/static/assets/images/datatables/sort_asc_disabled.png
+++ b/apps/static/assets/images/datatables/sort_asc_disabled.png
--- a/apps/static/assets/images/datatables/sort_both.png
+++ b/apps/static/assets/images/datatables/sort_both.png
--- a/apps/static/assets/images/datatables/sort_desc.png
+++ b/apps/static/assets/images/datatables/sort_desc.png
--- a/apps/static/assets/images/datatables/sort_desc_disabled.png
+++ b/apps/static/assets/images/datatables/sort_desc_disabled.png
--- a/apps/static/assets/images/logo.png
+++ b/apps/static/assets/images/logo.png
--- a/apps/static/assets/images/logo.svg
+++ b/apps/static/assets/images/logo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3388.25 3014.2"><title>react-1</title><circle cx="1694.17" cy="1504.25" r="302.6" fill="#fff"/><path d="M1806.5,1191.9c406.2,0,783.6,58.3,1068.1,156.2,342.8,118,553.6,296.9,553.6,458.9,0,168.8-223.4,358.9-591.5,480.8-278.3,92.2-644.6,140.4-1030.2,140.4-395.4,0-769.7-45.2-1051.2-141.4C399.2,2165.1,184.7,1972.6,184.7,1807c0-160.7,201.3-338.2,539.3-456,285.6-99.5,672.3-159.1,1082.5-159.1Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/><path d="M1271,1501.3c202.9-351.9,442-649.7,669-847.2,273.5-238,533.8-331.2,674.1-250.3,146.2,84.3,199.3,372.8,121,752.7-59.2,287.2-200.4,628.5-393.1,962.6-197.5,342.5-423.7,644.2-647.6,840-283.3,247.7-557.3,337.3-700.7,254.6-139.2-80.3-192.4-343.3-125.7-695,56.4-297.4,198-662.1,403-1017.4Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/><path d="M1271.5,2119.8C1068,1768.2,929.4,1412.4,871.6,1117.1c-69.6-355.8-20.4-627.9,119.8-709,146.1-84.6,422.5,13.5,712.5,271,219.3,194.7,444.4,487.5,637.6,821.3,198.1,342.2,346.6,688.8,404.3,980.5,73.1,369.2,13.9,651.3-129.4,734.2-139.1,80.5-393.5-4.7-664.9-238.2-229.2-197.3-474.5-502.1-680-857.1Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/></svg>
--- a/apps/static/assets/js/index.js
+++ b/apps/static/assets/js/index.js
--- a/apps/static/assets/js/index.min.js
+++ b/apps/static/assets/js/index.min.js
--- a/apps/static/assets/js/maps/index.js.map
+++ b/apps/static/assets/js/maps/index.js.map
--- a/apps/templates/.gitkeep
+++ b/apps/templates/.gitkeep
--- a/apps/templates/accounts/login.html
+++ b/apps/templates/accounts/login.html
@ -0,0 +1,61 @@
+{% extends "layouts/base-authentication.html" %}
+
+{% block title %} Sign IN {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="peers ai-s fxw-nw h-100vh">
+      <div class="d-n@sm- peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("{{ ASSETS_ROOT }}/images/bg.jpg")'>
+        <div class="pos-a centerXY">
+          <div class="bgc-white bdrs-50p pos-r" style='width: 120px; height: 120px;'>
+            <img class="pos-a centerXY" src="{{ ASSETS_ROOT }}/images/logo.png" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
+
+        <h4 class="fw-300 c-grey-900 mB-40">Adminator - Login</h4>
+        
+        {% if msg %}
+            <p class="fw-300 c-red-900 mB-40">{{ msg | safe }}</p>
+        {% else %}
+            <p class="fw-300 c-grey-900 mB-40">
+              Add your credentials
+            </p>
+        {% endif %}
+
+        <form method="post" action="">
+
+          {% csrf_token %}
+
+          <div class="mb-3">
+            <label class="text-normal text-dark form-label">Username</label>
+            {{ form.username }}
+          </div>
+          <span class="text-error">{{ form.username.errors }}</span>
+
+          <div class="mb-3">
+            <label class="text-normal text-dark form-label">Password</label>
+            {{ form.password }}
+          </div>
+          <span class="text-error">{{ form.password.errors }}</span>
+
+          <div class="mb-3">
+            <button type="submit" name="login" class="btn btn-primary">Login</button>
+
+            &nbsp; &nbsp;
+            <span class="text-small font-weight-semibold">Not a member?</span>
+            <a href="{% url 'register' %}" class="text-black text-small">Register</a>  
+          </div>
+
+        </form>
+      </div>
+    </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/accounts/register.html
+++ b/apps/templates/accounts/register.html
@ -0,0 +1,84 @@
+{% extends "layouts/base-authentication.html" %}
+
+{% block title %} Register {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="peers ai-s fxw-nw h-100vh">
+      <div class="peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("{{ ASSETS_ROOT }}/images/bg.jpg")'>
+        <div class="pos-a centerXY">
+          <div class="bgc-white bdrs-50p pos-r" style='width: 120px; height: 120px;'>
+            <img class="pos-a centerXY" src="{{ ASSETS_ROOT }}/images/logo.png" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
+        
+        <h4 class="fw-300 c-grey-900 mB-40">Adminator - Register</h4>
+
+        {% if msg %}
+            <p class="fw-300 c-grey-900 mB-40">{{ msg | safe }}</p>
+        {% else %}
+            <p class="fw-300 c-grey-900 mB-40">
+              Add your credentials
+            </p>
+        {% endif %}
+
+        {% if success %}
+
+        <div class="mb-3">
+          <a href="{% url 'login' %}" class="btn btn-primary">Sign IN</a>
+        </div>
+
+        {% else %}
+
+        <form method="post" action="">
+
+          {% csrf_token %}
+
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Username</label>
+            {{ form.username }}
+          </div>
+          <span class="text-error">{{ form.username.errors }}</span>
+
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Email Address</label>
+            {{ form.email }}
+          </div>
+          <span class="text-error">{{ form.email.errors }}</span>
+          
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Password</label>
+            {{ form.password1 }}
+          </div>
+          <span class="text-error">{{ form.password1.errors }}</span>
+          
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Password Check</label>
+            {{ form.password2 }}
+          </div>
+          <span class="text-error">{{ form.password2.errors }}</span>
+
+          <div class="mb-3">
+            <button type="submit" name="register" class="btn btn-primary">Register</button>
+
+            &nbsp; &nbsp;
+            <span class="text-small font-weight-semibold">Have and account?</span>
+            <a href="{% url 'login' %}" class="text-black text-small">Login</a>  
+          </div>
+          
+        </form>
+
+        {% endif %} 
+
+      </div>
+    </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/basic-table.html
+++ b/apps/templates/home/basic-table.html
@ -0,0 +1,216 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Tables {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="container-fluid">
+          <h4 class="c-grey-900 mT-10 mB-30">Basic Tables</h4>
+          <div class="row">
+            <div class="col-md-12">
+              <div class="bgc-white bd bdrs-3 p-20 mB-20">
+                <h4 class="c-grey-900 mB-20">Simple Table</h4>
+                <p>Using the most basic table markup, here’s how <code class="highlighter-rouge">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 5</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>
+                <table class="table">
+                  <thead>
+                    <tr>
+                      <th scope="col">#</th>
+                      <th scope="col">First Name</th>
+                      <th scope="col">Last Name</th>
+                      <th scope="col">Username</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <th scope="row">1</th>
+                      <td>Mark</td>
+                      <td>Otto</td>
+                      <td>@mdo</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">2</th>
+                      <td>Jacob</td>
+                      <td>Thornton</td>
+                      <td>@fat</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">3</th>
+                      <td>Larry</td>
+                      <td>the Bird</td>
+                      <td>@twitter</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-12">
+              <div class="bgc-white bd bdrs-3 p-20 mB-20">
+                <h4 class="c-grey-900 mB-20">Table head options</h4>
+                <p>Similar to tables and dark tables, use the modifier classes <code class="highlighter-rouge">.table-light</code> or <code class="highlighter-rouge">.table-dark</code> to make <code class="highlighter-rouge">&lt;thead&gt;</code>s appear light or dark gray.</p>
+                <table class="table">
+                  <thead class="table-dark">
+                    <tr>
+                      <th scope="col">#</th>
+                      <th scope="col">First Name</th>
+                      <th scope="col">Last Name</th>
+                      <th scope="col">Username</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <th scope="row">1</th>
+                      <td>Mark</td>
+                      <td>Otto</td>
+                      <td>@mdo</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">2</th>
+                      <td>Jacob</td>
+                      <td>Thornton</td>
+                      <td>@fat</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">3</th>
+                      <td>Larry</td>
+                      <td>the Bird</td>
+                      <td>@twitter</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-12">
+              <div class="bgc-white bd bdrs-3 p-20 mB-20">
+                <h4 class="c-grey-900 mB-20">Striped rows</h4>
+                <p>Use <code class="highlighter-rouge">.table-striped</code> to add zebra-striping to any table row within the <code class="highlighter-rouge">&lt;tbody&gt;</code>.</p>
+                <table class="table table-striped">
+                  <thead>
+                    <tr>
+                      <th scope="col">#</th>
+                      <th scope="col">First Name</th>
+                      <th scope="col">Last Name</th>
+                      <th scope="col">Username</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <th scope="row">1</th>
+                      <td>Mark</td>
+                      <td>Otto</td>
+                      <td>@mdo</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">2</th>
+                      <td>Jacob</td>
+                      <td>Thornton</td>
+                      <td>@fat</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">3</th>
+                      <td>Larry</td>
+                      <td>the Bird</td>
+                      <td>@twitter</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-12">
+              <div class="bgc-white bd bdrs-3 p-20 mB-20">
+                <h4 class="c-grey-900 mB-20">Bordered table</h4>
+                <p>Add <code class="highlighter-rouge">.table-bordered</code> for borders on all sides of the table and cells.</p>
+                <table class="table table-bordered">
+                  <thead>
+                    <tr>
+                      <th scope="col">#</th>
+                      <th scope="col">First Name</th>
+                      <th scope="col">Last Name</th>
+                      <th scope="col">Username</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <th scope="row">1</th>
+                      <td>Mark</td>
+                      <td>Otto</td>
+                      <td>@mdo</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">2</th>
+                      <td>Mark</td>
+                      <td>Otto</td>
+                      <td>@TwBootstrap</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">3</th>
+                      <td>Jacob</td>
+                      <td>Thornton</td>
+                      <td>@fat</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">4</th>
+                      <td colspan="2">Larry the Bird</td>
+                      <td>@twitter</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-12">
+              <div class="bgc-white bd bdrs-3 p-20">
+                <h4 class="c-grey-900 mB-20">Hoverable rows</h4>
+                <p>Add <code class="highlighter-rouge">.table-hover</code> to enable a hover state on table rows within a <code class="highlighter-rouge">&lt;tbody&gt;</code>.</p>
+                <table class="table table-hover">
+                  <thead>
+                    <tr>
+                      <th scope="col">#</th>
+                      <th scope="col">First Name</th>
+                      <th scope="col">Last Name</th>
+                      <th scope="col">Username</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <th scope="row">1</th>
+                      <td>Mark</td>
+                      <td>Otto</td>
+                      <td>@mdo</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">2</th>
+                      <td>Jacob</td>
+                      <td>Thornton</td>
+                      <td>@fat</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">3</th>
+                      <td colspan="2">Larry the Bird</td>
+                      <td>@twitter</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/blank.html
+++ b/apps/templates/home/blank.html
@ -0,0 +1,24 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Blank Page {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+  <!-- ### $App Screen Content ### -->
+  <main class='main-content bgc-grey-100'>
+    <div id='mainContent'>
+      <div class="full-container">
+
+        <h1>Add content here</h1>
+
+      </div>
+    </div>
+  </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/calendar.html
+++ b/apps/templates/home/calendar.html
@ -0,0 +1,193 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Calendar {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="container-fluid">
+          <div class="row">
+            <div class="col-md-4">
+              <div class="bdrs-3 ov-h bgc-white bd">
+                <div class="bgc-deep-purple-500 ta-c p-30">
+                  <h1 class="fw-300 mB-5 lh-1 c-white">01<span class="fsz-def">st</span></h1>
+                  <h3 class="c-white">Monday</h3>
+                </div>
+                <div class="pos-r">
+                  <button type="button" class="mT-nv-50 pos-a r-10 t-2 btn cur-p bdrs-50p p-0 w-3r h-3r btn-warning">
+                    <i class="ti-plus"></i>
+                  </button>
+                  <ul class="m-0 p-0 mT-20">
+                    <li class="bdB peers ai-c jc-sb fxw-nw">
+                      <a class="td-n p-20 peers fxw-nw me-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
+                        <div class="peer mR-15">
+                          <i class="fa fa-fw fa-clock-o c-red-500"></i>
+                        </div>
+                        <div class="peer">
+                          <span class="fw-600">All Day Event</span>
+                          <div class="c-grey-600">
+                            <span class="c-grey-700">Nov 01 - </span>
+                            <i>Website Development</i>
+                          </div>
+                        </div>
+                      </a>
+                      <div class="peers mR-15">
+                        <div class="peer">
+                          <a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
+                            <i class="ti-pencil"></i>
+                          </a>
+                        </div>
+                        <div class="peer">
+                          <a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
+                            <i class="ti-trash"></i>
+                          </a>
+                        </div>
+                      </div>
+                    </li>
+                    <li class="bdB peers ai-c jc-sb fxw-nw">
+                      <a class="td-n p-20 peers fxw-nw me-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
+                        <div class="peer mR-15">
+                          <i class="fa fa-fw fa-clock-o c-blue-500"></i>
+                        </div>
+                        <div class="peer">
+                          <span class="fw-600">All Day Event</span>
+                          <div class="c-grey-600">
+                            <span class="c-grey-700">Nov 01 - </span>
+                            <i>Website Development</i>
+                          </div>
+                        </div>
+                      </a>
+                      <div class="peers mR-15">
+                        <div class="peer">
+                          <a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
+                            <i class="ti-pencil"></i>
+                          </a>
+                        </div>
+                        <div class="peer">
+                          <a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
+                            <i class="ti-trash"></i>
+                          </a>
+                        </div>
+                      </div>
+                    </li>
+                    <li class="bdB peers ai-c jc-sb fxw-nw">
+                      <a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
+                        <div class="peer mR-15">
+                          <i class="fa fa-fw fa-clock-o c-indigo-500"></i>
+                        </div>
+                        <div class="peer">
+                          <span class="fw-600">All Day Event</span>
+                          <div class="c-grey-600">
+                            <span class="c-grey-700">Nov 01 - </span>
+                            <i>Website Development</i>
+                          </div>
+                        </div>
+                      </a>
+                      <div class="peers mR-15">
+                        <div class="peer">
+                          <a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
+                            <i class="ti-pencil"></i>
+                          </a>
+                        </div>
+                        <div class="peer">
+                          <a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
+                            <i class="ti-trash"></i>
+                          </a>
+                        </div>
+                      </div>
+                    </li>
+                    <li class="bdB peers ai-c jc-sb fxw-nw">
+                      <a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
+                        <div class="peer mR-15">
+                          <i class="fa fa-fw fa-clock-o c-green-500"></i>
+                        </div>
+                        <div class="peer">
+                          <span class="fw-600">All Day Event</span>
+                          <div class="c-grey-600">
+                            <span class="c-grey-700">Nov 01 - </span>
+                            <i>Website Development</i>
+                          </div>
+                        </div>
+                      </a>
+                      <div class="peers mR-15">
+                        <div class="peer">
+                          <a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
+                            <i class="ti-pencil"></i>
+                          </a>
+                        </div>
+                        <div class="peer">
+                          <a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
+                            <i class="ti-trash"></i>
+                          </a>
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-8">
+              <div id='calendar'></div>
+            </div>
+          </div>
+          <div class="modal fade" id="calendar-edit">
+            <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                <div class="bd p-15">
+                  <h5 class="m-0">Add Event</h5>
+                </div>
+                <div class="modal-body">
+                  <form>
+                    <div class="mb-3">
+                      <label class="form-label fw-500">Event title</label>
+                      <input class="form-control bdc-grey-200">
+                    </div>
+                    <div class="row">
+                      <div class="col-md-6">
+                        <label class="fw-500 form-label">Start</label>
+                        <div class="timepicker-input input-icon mb-3">
+                          <div class="input-group">
+                            <div class="input-group-text bgc-white bd bdwR-0">
+                              <i class="ti-calendar"></i>
+                            </div>
+                            <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
+                          </div>
+                        </div>
+                      </div>
+                      <div class="col-md-6">
+                        <label class="fw-500 form-label">End</label>
+                        <div class="timepicker-input input-icon mb-3">
+                          <div class="input-group">
+                            <div class="input-group-text bgc-white bd bdwR-0">
+                              <i class="ti-calendar"></i>
+                            </div>
+                            <input type="text" class="form-control bdc-grey-200 end-date" placeholder="Datepicker" data-provide="datepicker">
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="mb-3">
+                      <label class="fw-500 form-label">Event title</label>
+                      <textarea class="form-control bdc-grey-200" rows='5'></textarea>
+                    </div>
+                    <div class="text-end">
+                      <button class="btn btn-primary cur-p btn-color" data-dismiss="modal">Done</button>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/charts.html
+++ b/apps/templates/home/charts.html
@ -0,0 +1,142 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Charts {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="row gap-20 masonry pos-r">
+          <div class="masonry-sizer col-md-6 pos-a"></div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Line Chart</h6>
+              <div class="mT-30">
+                <canvas id="line-chart" height="220"></canvas>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Area Chart</h6>
+              <div class="mT-30">
+                <canvas id="area-chart" height="220"></canvas>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Scatter Chart</h6>
+              <div class="mT-30">
+                <canvas id="scatter-chart" height="220"></canvas>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Bar Chart</h6>
+              <div class="mT-30">
+                <canvas id="bar-chart" height="220"></canvas>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">jQuery Sparkline</h6>
+              <div class="mT-30">
+                <div class="peers ai-c jc-sb fxw-nw bdB pY-15">
+                  <div class="peer">
+                    <span>Spark Line</span>
+                  </div>
+                  <div class="peer">
+                    <span class="sparkline">&nbsp;</span>
+                  </div>
+                </div>
+                <div class="peers ai-c jc-sb fxw-nw bdB pY-15">
+                  <div class="peer">
+                    <span>Spark Bar</span>
+                  </div>
+                  <div class="peer">
+                    <span class="sparkbar">&nbsp;</span>
+                  </div>
+                </div>
+                <div class="peers ai-c jc-sb fxw-nw bdB pY-15">
+                  <div class="peer">
+                    <span>Spark Tristate</span>
+                  </div>
+                  <div class="peer">
+                    <span class="sparktri">&nbsp;</span>
+                  </div>
+                </div>
+                <div class="peers ai-c jc-sb fxw-nw bdB pY-15">
+                  <div class="peer">
+                    <span>Spark Discrete</span>
+                  </div>
+                  <div class="peer">
+                    <span class="sparkdisc">&nbsp;</span>
+                  </div>
+                </div>
+                <div class="peers ai-c jc-sb fxw-nw bdB pY-15">
+                  <div class="peer">
+                    <span>Spark Bullet</span>
+                  </div>
+                  <div class="peer">
+                    <span class="sparkbull">&nbsp;</span>
+                  </div>
+                </div>
+                <div class="peers ai-c jc-sb fxw-nw pT-15">
+                  <div class="peer">
+                    <span>Spark Box</span>
+                  </div>
+                  <div class="peer">
+                    <span class="sparkbox">&nbsp;</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Easy Pie Charts</h6>
+              <div class="mT-30">
+                <div class="peers mT-20 fxw-nw@lg+ jc-sb ta-c gap-10">
+                  <div class="peer">
+                    <div class="easy-pie-chart" data-size='80' data-percent="75" data-bar-color='#f44336'>
+                      <span></span>
+                    </div>
+                    <h6 class="fsz-sm">New Users</h6>
+                  </div>
+                  <div class="peer">
+                    <div class="easy-pie-chart" data-size='80' data-percent="50" data-bar-color='#2196f3'>
+                      <span></span>
+                    </div>
+                    <h6 class="fsz-sm">New Purchases</h6>
+                  </div>
+                  <div class="peer">
+                    <div class="easy-pie-chart" data-size='80' data-percent="65" data-bar-color='#f44336'>
+                      <span></span>
+                    </div>
+                    <h6 class="fsz-sm">New Customers</h6>
+                  </div>
+                  <div class="peer">
+                    <div class="easy-pie-chart" data-size='80' data-percent="90" data-bar-color='#ff9800'>
+                      <span></span>
+                    </div>
+                    <h6 class="fsz-sm">Bounce Rate</h6>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/chat.html
+++ b/apps/templates/home/chat.html
@ -0,0 +1,231 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Charts {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="full-container">
+          <div class="peers fxw-nw pos-r">
+            <!-- Sidebar -->
+            <div class="peer bdR" id="chat-sidebar">
+              <div class="layers h-100">
+                <!-- Search -->
+                <div class="bdB layer w-100">
+                  <input type="text" placeholder="Search contacts..." name="chatSearch" class="form-constrol p-15 bdrs-0 w-100 bdw-0">
+                </div>
+
+                <!-- List -->
+                <div class="layer w-100 fxg-1 scrollable pos-r">
+                  <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                    <div class="peer">
+                      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                    </div>
+                    <div class="peer peer-greed pL-20">
+                      <h6 class="mB-0 lh-1 fw-400">John Doe</h6>
+                      <small class="lh-1 c-green-500">Online</small>
+                    </div>
+                  </div>
+                  <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                    <div class="peer">
+                      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                    </div>
+                    <div class="peer peer-greed pL-20">
+                      <h6 class="mB-0 lh-1 fw-400">Moo Doe</h6>
+                      <small class="lh-1 c-amber-500">Away</small>
+                    </div>
+                  </div>
+                  <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                    <div class="peer">
+                      <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                    </div>
+                    <div class="peer peer-greed pL-20">
+                      <h6 class="mB-0 lh-1 fw-400">Adam Jones</h6>
+                      <small class="lh-1 c-grey-500">Offline</small>
+                    </div>
+                  </div>
+                  <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                    <div class="peer">
+                      <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                    </div>
+                    <div class="peer peer-greed pL-20">
+                      <h6 class="mB-0 lh-1 fw-400">Mizo Doe</h6>
+                      <small class="lh-1 c-red-500">Busy</small>
+                    </div>
+                  </div>
+                  <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                    <div class="peer">
+                      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                    </div>
+                    <div class="peer peer-greed pL-20">
+                      <h6 class="mB-0 lh-1 fw-400">John Doe</h6>
+                      <small class="lh-1 c-green-500">Online</small>
+                    </div>
+                  </div>
+                  <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                    <div class="peer">
+                      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                    </div>
+                    <div class="peer peer-greed pL-20">
+                      <h6 class="mB-0 lh-1 fw-400">Moo Doe</h6>
+                      <small class="lh-1 c-amber-500">Away</small>
+                    </div>
+                  </div>
+                  <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                    <div class="peer">
+                      <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                    </div>
+                    <div class="peer peer-greed pL-20">
+                      <h6 class="mB-0 lh-1 fw-400">Adam Jones</h6>
+                      <small class="lh-1 c-grey-500">Offline</small>
+                    </div>
+                  </div>
+                  <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                    <div class="peer">
+                      <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                    </div>
+                    <div class="peer peer-greed pL-20">
+                      <h6 class="mB-0 lh-1 fw-400">Mizo Doe</h6>
+                      <small class="lh-1 c-red-500">Busy</small>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Chat Box -->
+            <div class="peer peer-greed" id='chat-box'>
+              <div class="layers h-100">
+                <div class="layer w-100">
+                  <!-- Header -->
+                  <div class="peers fxw-nw jc-sb ai-c pY-20 pX-30 bgc-white">
+                    <div class="peers ai-c">
+                      <div class="peer d-n@md+">
+                        <a href="" title="" id='chat-sidebar-toggle' class="td-n c-grey-900 cH-blue-500 mR-30">
+                          <i class="ti-menu"></i>
+                        </a>
+                      </div>
+                      <div class="peer mR-20">
+                        <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                      </div>
+                      <div class="peer">
+                        <h6 class="lh-1 mB-0">John Doe</h6>
+                        <i class="fsz-sm lh-1">Typing...</i>
+                      </div>
+                    </div>
+                    <div class="peers">
+                      <a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md mR-30" title="">
+                        <i class="ti-video-camera"></i>
+                      </a>
+                      <a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md mR-30" title="">
+                        <i class="ti-headphone"></i>
+                      </a>
+                      <a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md" title="">
+                        <i class="ti-more"></i>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div class="layer w-100 fxg-1 bgc-grey-200 scrollable pos-r">
+                  <!-- Chat Box -->
+                  <div class="p-20 gapY-15">
+                    <!-- Chat Conversation -->
+                    <div class="peers fxw-nw">
+                      <div class="peer mR-20">
+                        <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
+                      </div>
+                      <div class="peer peer-greed">
+                        <div class="layers ai-fs gapY-5">
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mR-10">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed">
+                                <span>Lorem Ipsum is simply dummy text of</span>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mR-10">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed">
+                                <span>the printing and typesetting industry.</span>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mR-10">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed">
+                                <span>Lorem Ipsum has been the industry's</span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Chat Conversation -->
+                    <div class="peers fxw-nw ai-fe">
+                      <div class="peer ord-1 mL-20">
+                        <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/12.jpg" alt="">
+                      </div>
+                      <div class="peer peer-greed ord-0">
+                        <div class="layers ai-fe gapY-10">
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mL-10 ord-1">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed ord-0">
+                                <span>Heloo</span>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mL-10 ord-1">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed ord-0">
+                                <span>??</span>
+                              </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                </div>
+                <div class="layer w-100">
+                  <!-- Chat Send -->
+                  <div class="p-20 bdT bgc-white">
+                    <div class="pos-r">
+                      <input type="text" class="form-control bdrs-10em m-0" placeholder="Say something...">
+                      <button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1 btn-color">
+                        <i class="fa fa-paper-plane-o"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/compose.html
+++ b/apps/templates/home/compose.html
@ -0,0 +1,144 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Compose {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="full-container">
+          <div class="email-app">
+          <div class="email-side-nav remain-height ov-h">
+            <div class="h-100 layers">
+              <div class="p-20 bgc-grey-100 layer w-100">
+                <a href="/compose" class="btn btn-danger d-grid">New Message</a>
+              </div>
+              <div class="scrollable pos-r bdT layer w-100 fxg-1">
+                <ul class="p-20 nav flex-column">
+                  <li class="nav-item">
+                    <a href="javascript:void(0)" class="nav-link c-grey-800 cH-blue-500 actived">
+                      <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                          <i class="mR-10 ti-email"></i>
+                          <span>Inbox</span>
+                        </div>
+                        <div class="peer">
+                          <span class="badge rounded-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="" class="nav-link c-grey-800 cH-blue-500">
+                      <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                          <i class="mR-10 ti-share"></i>
+                          <span>Sent</span>
+                        </div>
+                        <div class="peer">
+                          <span class="badge rounded-pill bgc-green-50 c-green-700">12</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="" class="nav-link c-grey-800 cH-blue-500">
+                      <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                          <i class="mR-10 ti-star"></i>
+                          <span>Important</span>
+                        </div>
+                        <div class="peer">
+                          <span class="badge rounded-pill bgc-blue-50 c-blue-700">3</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="" class="nav-link c-grey-800 cH-blue-500">
+                      <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                          <i class="mR-10 ti-file"></i>
+                          <span>Drafts</span>
+                        </div>
+                        <div class="peer">
+                          <span class="badge rounded-pill bgc-amber-50 c-amber-700">5</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="" class="nav-link c-grey-800 cH-blue-500">
+                      <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                          <i class="mR-10 ti-alert"></i>
+                          <span>Spam</span>
+                        </div>
+                        <div class="peer">
+                          <span class="badge rounded-pill bgc-red-50 c-red-700">1</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="" class="nav-link c-grey-800 cH-blue-500">
+                      <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                          <i class="mR-10 ti-trash"></i>
+                          <span>Trash</span>
+                        </div>
+                        <div class="peer">
+                          <span class="badge rounded-pill bgc-red-50 c-red-700">+99</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="email-wrapper row remain-height pos-r scrollable bgc-white">
+            <div class="email-content open no-inbox-view">
+              <div class="email-compose">
+                <div class="d-n@md+ p-20">
+                  <a class="email-side-toggle c-grey-900 cH-blue-500 td-n" href="javascript:void(0)">
+                    <i class="ti-menu"></i>
+                  </a>
+                </div>
+                <form class="email-compose-body">
+                  <h4 class="c-grey-900 mB-20">Send Message</h4>
+                  <div class="send-header">
+                    <div class="mb-3">
+                      <input type="text" class='form-control' placeholder="To">
+                    </div>
+                    <div class="mb-3">
+                      <input type="text" class='form-control' placeholder="CC">
+                    </div>
+                    <div class="mb-3">
+                      <input class="form-control" placeholder="Email Subject">
+                    </div>
+                    <div class="mb-3">
+                      <textarea name="compose" class="form-control" placeholder="Say Hi..." rows='10'></textarea>
+                    </div>
+                  </div>
+                  <div id="compose-area"></div>
+                  <div class="text-end mrg-top-30">
+                    <button class="btn btn-danger btn-color">Send</button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/datatable.html
+++ b/apps/templates/home/datatable.html
@ -0,0 +1,509 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Data Tables {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+      <!-- ### $App Screen Content ### -->
+      <main class='main-content bgc-grey-100'>
+        <div id='mainContent'>
+          <div class="container-fluid">
+            <h4 class="c-grey-900 mT-10 mB-30">Data Tables</h4>
+            <div class="row">
+              <div class="col-md-12">
+                <div class="bgc-white bd bdrs-3 p-20 mB-20">
+                  <h4 class="c-grey-900 mB-20">Bootstrap Data Table</h4>
+                  <table id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
+                      <thead>
+                        <tr>
+                          <th>Name</th>
+                          <th>Position</th>
+                          <th>Office</th>
+                          <th>Age</th>
+                          <th>Start date</th>
+                          <th>Salary</th>
+                        </tr>
+                      </thead>
+                      <tfoot>
+                        <tr>
+                          <th>Name</th>
+                          <th>Position</th>
+                          <th>Office</th>
+                          <th>Age</th>
+                          <th>Start date</th>
+                          <th>Salary</th>
+                        </tr>
+                      </tfoot>
+                      <tbody>
+                        <tr>
+                          <td>Tiger Nixon</td>
+                          <td>System Architect</td>
+                          <td>Edinburgh</td>
+                          <td>61</td>
+                          <td>2011/04/25</td>
+                          <td>$320,800</td>
+                        </tr>
+                        <tr>
+                          <td>Garrett Winters</td>
+                          <td>Accountant</td>
+                          <td>Tokyo</td>
+                          <td>63</td>
+                          <td>2011/07/25</td>
+                          <td>$170,750</td>
+                        </tr>
+                        <tr>
+                          <td>Ashton Cox</td>
+                          <td>Junior Technical Author</td>
+                          <td>San Francisco</td>
+                          <td>66</td>
+                          <td>2009/01/12</td>
+                          <td>$86,000</td>
+                        </tr>
+                        <tr>
+                          <td>Cedric Kelly</td>
+                          <td>Senior Javascript Developer</td>
+                          <td>Edinburgh</td>
+                          <td>22</td>
+                          <td>2012/03/29</td>
+                          <td>$433,060</td>
+                        </tr>
+                        <tr>
+                          <td>Airi Satou</td>
+                          <td>Accountant</td>
+                          <td>Tokyo</td>
+                          <td>33</td>
+                          <td>2008/11/28</td>
+                          <td>$162,700</td>
+                        </tr>
+                        <tr>
+                          <td>Brielle Williamson</td>
+                          <td>Integration Specialist</td>
+                          <td>New York</td>
+                          <td>61</td>
+                          <td>2012/12/02</td>
+                          <td>$372,000</td>
+                        </tr>
+                        <tr>
+                          <td>Herrod Chandler</td>
+                          <td>Sales Assistant</td>
+                          <td>San Francisco</td>
+                          <td>59</td>
+                          <td>2012/08/06</td>
+                          <td>$137,500</td>
+                        </tr>
+                        <tr>
+                          <td>Rhona Davidson</td>
+                          <td>Integration Specialist</td>
+                          <td>Tokyo</td>
+                          <td>55</td>
+                          <td>2010/10/14</td>
+                          <td>$327,900</td>
+                        </tr>
+                        <tr>
+                          <td>Colleen Hurst</td>
+                          <td>Javascript Developer</td>
+                          <td>San Francisco</td>
+                          <td>39</td>
+                          <td>2009/09/15</td>
+                          <td>$205,500</td>
+                        </tr>
+                        <tr>
+                          <td>Sonya Frost</td>
+                          <td>Software Engineer</td>
+                          <td>Edinburgh</td>
+                          <td>23</td>
+                          <td>2008/12/13</td>
+                          <td>$103,600</td>
+                        </tr>
+                        <tr>
+                          <td>Jena Gaines</td>
+                          <td>Office Manager</td>
+                          <td>London</td>
+                          <td>30</td>
+                          <td>2008/12/19</td>
+                          <td>$90,560</td>
+                        </tr>
+                        <tr>
+                          <td>Quinn Flynn</td>
+                          <td>Support Lead</td>
+                          <td>Edinburgh</td>
+                          <td>22</td>
+                          <td>2013/03/03</td>
+                          <td>$342,000</td>
+                        </tr>
+                        <tr>
+                          <td>Charde Marshall</td>
+                          <td>Regional Director</td>
+                          <td>San Francisco</td>
+                          <td>36</td>
+                          <td>2008/10/16</td>
+                          <td>$470,600</td>
+                        </tr>
+                        <tr>
+                          <td>Haley Kennedy</td>
+                          <td>Senior Marketing Designer</td>
+                          <td>London</td>
+                          <td>43</td>
+                          <td>2012/12/18</td>
+                          <td>$313,500</td>
+                        </tr>
+                        <tr>
+                          <td>Tatyana Fitzpatrick</td>
+                          <td>Regional Director</td>
+                          <td>London</td>
+                          <td>19</td>
+                          <td>2010/03/17</td>
+                          <td>$385,750</td>
+                        </tr>
+                        <tr>
+                          <td>Michael Silva</td>
+                          <td>Marketing Designer</td>
+                          <td>London</td>
+                          <td>66</td>
+                          <td>2012/11/27</td>
+                          <td>$198,500</td>
+                        </tr>
+                        <tr>
+                          <td>Paul Byrd</td>
+                          <td>Chief Financial Officer (CFO)</td>
+                          <td>New York</td>
+                          <td>64</td>
+                          <td>2010/06/09</td>
+                          <td>$725,000</td>
+                        </tr>
+                        <tr>
+                          <td>Gloria Little</td>
+                          <td>Systems Administrator</td>
+                          <td>New York</td>
+                          <td>59</td>
+                          <td>2009/04/10</td>
+                          <td>$237,500</td>
+                        </tr>
+                        <tr>
+                          <td>Bradley Greer</td>
+                          <td>Software Engineer</td>
+                          <td>London</td>
+                          <td>41</td>
+                          <td>2012/10/13</td>
+                          <td>$132,000</td>
+                        </tr>
+                        <tr>
+                          <td>Dai Rios</td>
+                          <td>Personnel Lead</td>
+                          <td>Edinburgh</td>
+                          <td>35</td>
+                          <td>2012/09/26</td>
+                          <td>$217,500</td>
+                        </tr>
+                        <tr>
+                          <td>Jenette Caldwell</td>
+                          <td>Development Lead</td>
+                          <td>New York</td>
+                          <td>30</td>
+                          <td>2011/09/03</td>
+                          <td>$345,000</td>
+                        </tr>
+                        <tr>
+                          <td>Yuri Berry</td>
+                          <td>Chief Marketing Officer (CMO)</td>
+                          <td>New York</td>
+                          <td>40</td>
+                          <td>2009/06/25</td>
+                          <td>$675,000</td>
+                        </tr>
+                        <tr>
+                          <td>Caesar Vance</td>
+                          <td>Pre-Sales Support</td>
+                          <td>New York</td>
+                          <td>21</td>
+                          <td>2011/12/12</td>
+                          <td>$106,450</td>
+                        </tr>
+                        <tr>
+                          <td>Doris Wilder</td>
+                          <td>Sales Assistant</td>
+                          <td>Sidney</td>
+                          <td>23</td>
+                          <td>2010/09/20</td>
+                          <td>$85,600</td>
+                        </tr>
+                        <tr>
+                          <td>Angelica Ramos</td>
+                          <td>Chief Executive Officer (CEO)</td>
+                          <td>London</td>
+                          <td>47</td>
+                          <td>2009/10/09</td>
+                          <td>$1,200,000</td>
+                        </tr>
+                        <tr>
+                          <td>Gavin Joyce</td>
+                          <td>Developer</td>
+                          <td>Edinburgh</td>
+                          <td>42</td>
+                          <td>2010/12/22</td>
+                          <td>$92,575</td>
+                        </tr>
+                        <tr>
+                          <td>Jennifer Chang</td>
+                          <td>Regional Director</td>
+                          <td>Singapore</td>
+                          <td>28</td>
+                          <td>2010/11/14</td>
+                          <td>$357,650</td>
+                        </tr>
+                        <tr>
+                          <td>Brenden Wagner</td>
+                          <td>Software Engineer</td>
+                          <td>San Francisco</td>
+                          <td>28</td>
+                          <td>2011/06/07</td>
+                          <td>$206,850</td>
+                        </tr>
+                        <tr>
+                          <td>Fiona Green</td>
+                          <td>Chief Operating Officer (COO)</td>
+                          <td>San Francisco</td>
+                          <td>48</td>
+                          <td>2010/03/11</td>
+                          <td>$850,000</td>
+                        </tr>
+                        <tr>
+                          <td>Shou Itou</td>
+                          <td>Regional Marketing</td>
+                          <td>Tokyo</td>
+                          <td>20</td>
+                          <td>2011/08/14</td>
+                          <td>$163,000</td>
+                        </tr>
+                        <tr>
+                          <td>Michelle House</td>
+                          <td>Integration Specialist</td>
+                          <td>Sidney</td>
+                          <td>37</td>
+                          <td>2011/06/02</td>
+                          <td>$95,400</td>
+                        </tr>
+                        <tr>
+                          <td>Suki Burks</td>
+                          <td>Developer</td>
+                          <td>London</td>
+                          <td>53</td>
+                          <td>2009/10/22</td>
+                          <td>$114,500</td>
+                        </tr>
+                        <tr>
+                          <td>Prescott Bartlett</td>
+                          <td>Technical Author</td>
+                          <td>London</td>
+                          <td>27</td>
+                          <td>2011/05/07</td>
+                          <td>$145,000</td>
+                        </tr>
+                        <tr>
+                          <td>Gavin Cortez</td>
+                          <td>Team Leader</td>
+                          <td>San Francisco</td>
+                          <td>22</td>
+                          <td>2008/10/26</td>
+                          <td>$235,500</td>
+                        </tr>
+                        <tr>
+                          <td>Martena Mccray</td>
+                          <td>Post-Sales support</td>
+                          <td>Edinburgh</td>
+                          <td>46</td>
+                          <td>2011/03/09</td>
+                          <td>$324,050</td>
+                        </tr>
+                        <tr>
+                          <td>Unity Butler</td>
+                          <td>Marketing Designer</td>
+                          <td>San Francisco</td>
+                          <td>47</td>
+                          <td>2009/12/09</td>
+                          <td>$85,675</td>
+                        </tr>
+                        <tr>
+                          <td>Howard Hatfield</td>
+                          <td>Office Manager</td>
+                          <td>San Francisco</td>
+                          <td>51</td>
+                          <td>2008/12/16</td>
+                          <td>$164,500</td>
+                        </tr>
+                        <tr>
+                          <td>Hope Fuentes</td>
+                          <td>Secretary</td>
+                          <td>San Francisco</td>
+                          <td>41</td>
+                          <td>2010/02/12</td>
+                          <td>$109,850</td>
+                        </tr>
+                        <tr>
+                          <td>Vivian Harrell</td>
+                          <td>Financial Controller</td>
+                          <td>San Francisco</td>
+                          <td>62</td>
+                          <td>2009/02/14</td>
+                          <td>$452,500</td>
+                        </tr>
+                        <tr>
+                          <td>Timothy Mooney</td>
+                          <td>Office Manager</td>
+                          <td>London</td>
+                          <td>37</td>
+                          <td>2008/12/11</td>
+                          <td>$136,200</td>
+                        </tr>
+                        <tr>
+                          <td>Jackson Bradshaw</td>
+                          <td>Director</td>
+                          <td>New York</td>
+                          <td>65</td>
+                          <td>2008/09/26</td>
+                          <td>$645,750</td>
+                        </tr>
+                        <tr>
+                          <td>Olivia Liang</td>
+                          <td>Support Engineer</td>
+                          <td>Singapore</td>
+                          <td>64</td>
+                          <td>2011/02/03</td>
+                          <td>$234,500</td>
+                        </tr>
+                        <tr>
+                          <td>Bruno Nash</td>
+                          <td>Software Engineer</td>
+                          <td>London</td>
+                          <td>38</td>
+                          <td>2011/05/03</td>
+                          <td>$163,500</td>
+                        </tr>
+                        <tr>
+                          <td>Sakura Yamamoto</td>
+                          <td>Support Engineer</td>
+                          <td>Tokyo</td>
+                          <td>37</td>
+                          <td>2009/08/19</td>
+                          <td>$139,575</td>
+                        </tr>
+                        <tr>
+                          <td>Thor Walton</td>
+                          <td>Developer</td>
+                          <td>New York</td>
+                          <td>61</td>
+                          <td>2013/08/11</td>
+                          <td>$98,540</td>
+                        </tr>
+                        <tr>
+                          <td>Finn Camacho</td>
+                          <td>Support Engineer</td>
+                          <td>San Francisco</td>
+                          <td>47</td>
+                          <td>2009/07/07</td>
+                          <td>$87,500</td>
+                        </tr>
+                        <tr>
+                          <td>Serge Baldwin</td>
+                          <td>Data Coordinator</td>
+                          <td>Singapore</td>
+                          <td>64</td>
+                          <td>2012/04/09</td>
+                          <td>$138,575</td>
+                        </tr>
+                        <tr>
+                          <td>Zenaida Frank</td>
+                          <td>Software Engineer</td>
+                          <td>New York</td>
+                          <td>63</td>
+                          <td>2010/01/04</td>
+                          <td>$125,250</td>
+                        </tr>
+                        <tr>
+                          <td>Zorita Serrano</td>
+                          <td>Software Engineer</td>
+                          <td>San Francisco</td>
+                          <td>56</td>
+                          <td>2012/06/01</td>
+                          <td>$115,000</td>
+                        </tr>
+                        <tr>
+                          <td>Jennifer Acosta</td>
+                          <td>Junior Javascript Developer</td>
+                          <td>Edinburgh</td>
+                          <td>43</td>
+                          <td>2013/02/01</td>
+                          <td>$75,650</td>
+                        </tr>
+                        <tr>
+                          <td>Cara Stevens</td>
+                          <td>Sales Assistant</td>
+                          <td>New York</td>
+                          <td>46</td>
+                          <td>2011/12/06</td>
+                          <td>$145,600</td>
+                        </tr>
+                        <tr>
+                          <td>Hermione Butler</td>
+                          <td>Regional Director</td>
+                          <td>London</td>
+                          <td>47</td>
+                          <td>2011/03/21</td>
+                          <td>$356,250</td>
+                        </tr>
+                        <tr>
+                          <td>Lael Greer</td>
+                          <td>Systems Administrator</td>
+                          <td>London</td>
+                          <td>21</td>
+                          <td>2009/02/27</td>
+                          <td>$103,500</td>
+                        </tr>
+                        <tr>
+                          <td>Jonas Alexander</td>
+                          <td>Developer</td>
+                          <td>San Francisco</td>
+                          <td>30</td>
+                          <td>2010/07/14</td>
+                          <td>$86,500</td>
+                        </tr>
+                        <tr>
+                          <td>Shad Decker</td>
+                          <td>Regional Director</td>
+                          <td>Edinburgh</td>
+                          <td>51</td>
+                          <td>2008/11/13</td>
+                          <td>$183,000</td>
+                        </tr>
+                        <tr>
+                          <td>Michael Bruce</td>
+                          <td>Javascript Developer</td>
+                          <td>Singapore</td>
+                          <td>29</td>
+                          <td>2011/06/27</td>
+                          <td>$183,000</td>
+                        </tr>
+                        <tr>
+                          <td>Donna Snider</td>
+                          <td>Customer Support</td>
+                          <td>New York</td>
+                          <td>27</td>
+                          <td>2011/01/25</td>
+                          <td>$112,000</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/email.html
+++ b/apps/templates/home/email.html
@ -0,0 +1,513 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Email {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="full-container">
+          <div class="email-app">
+            <div class="email-side-nav remain-height ov-h">
+              <div class="h-100 layers">
+                <div class="p-20 bgc-grey-100 layer w-100">
+                  <a href="/compose" class="btn btn-danger d-grid">New Message</a>
+                </div>
+                <div class="scrollable pos-r bdT layer w-100 fxg-1">
+                  <ul class="p-20 nav flex-column">
+                    <li class="nav-item">
+                      <a href="javascript:void(0)" class="nav-link c-grey-800 cH-blue-500 actived">
+                        <div class="peers ai-c jc-sb">
+                          <div class="peer peer-greed">
+                            <i class="mR-10 ti-email"></i>
+                            <span>Inbox</span>
+                          </div>
+                          <div class="peer">
+                            <span class="badge rounded-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="" class="nav-link c-grey-800 cH-blue-500">
+                        <div class="peers ai-c jc-sb">
+                          <div class="peer peer-greed">
+                            <i class="mR-10 ti-share"></i>
+                            <span>Sent</span>
+                          </div>
+                          <div class="peer">
+                            <span class="badge rounded-pill bgc-green-50 c-green-700">12</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="" class="nav-link c-grey-800 cH-blue-500">
+                        <div class="peers ai-c jc-sb">
+                          <div class="peer peer-greed">
+                            <i class="mR-10 ti-star"></i>
+                            <span>Important</span>
+                          </div>
+                          <div class="peer">
+                            <span class="badge rounded-pill bgc-blue-50 c-blue-700">3</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="" class="nav-link c-grey-800 cH-blue-500">
+                        <div class="peers ai-c jc-sb">
+                          <div class="peer peer-greed">
+                            <i class="mR-10 ti-file"></i>
+                            <span>Drafts</span>
+                          </div>
+                          <div class="peer">
+                            <span class="badge rounded-pill bgc-amber-50 c-amber-700">5</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="" class="nav-link c-grey-800 cH-blue-500">
+                        <div class="peers ai-c jc-sb">
+                          <div class="peer peer-greed">
+                            <i class="mR-10 ti-alert"></i>
+                            <span>Spam</span>
+                          </div>
+                          <div class="peer">
+                            <span class="badge rounded-pill bgc-red-50 c-red-700">1</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="" class="nav-link c-grey-800 cH-blue-500">
+                        <div class="peers ai-c jc-sb">
+                          <div class="peer peer-greed">
+                            <i class="mR-10 ti-trash"></i>
+                            <span>Trash</span>
+                          </div>
+                          <div class="peer">
+                            <span class="badge rounded-pill bgc-red-50 c-red-700">+99</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          <div class="email-wrapper row remain-height bgc-white ov-h">
+            <div class="email-list h-100 layers">
+              <div class="layer w-100">
+                <div class="bgc-grey-100 peers ai-c jc-sb p-20 fxw-nw">
+                  <div class="peer">
+                    <div class="btn-group" role="group">
+                      <button type="button" class="email-side-toggle d-n@md+ btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-menu"></i>
+                      </button>
+                      <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-folder"></i>
+                      </button>
+                      <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-tag"></i>
+                      </button>
+                      <div class="btn-group" role="group">
+                        <button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          <i class="ti-more-alt"></i>
+                        </button>
+                        <ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1">
+                          <li>
+                            <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                              <i class="ti-trash mR-10"></i>
+                              <span>Delete</span>
+                            </a>
+                          </li>
+                          <li>
+                            <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                              <i class="ti-alert mR-10"></i>
+                              <span>Mark as Spam</span>
+                            </a>
+                          </li>
+                          <li>
+                            <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                              <i class="ti-star mR-10"></i>
+                              <span>Star</span>
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="peer">
+                    <div class="btn-group" role="group">
+                      <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-angle-left"></i>
+                      </button>
+                      <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-angle-right"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="layer w-100">
+                <div class="bdT bdB">
+                  <input type="text" class="form-control m-0 bdw-0 pY-15 pX-20" placeholder="Search...">
+                </div>
+              </div>
+              <div class="layer w-100 fxg-1 scrollable pos-r">
+                <div class="">
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="email-content h-100">
+              <div class="h-100 scrollable pos-r">
+                <div class="bgc-grey-100 peers ai-c jc-sb p-20 fxw-nw d-n@md+">
+                  <div class="peer">
+                    <div class="btn-group" role="group">
+                      <button type="button" class="back-to-mailbox btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-angle-left"></i>
+                      </button>
+                      <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-folder"></i>
+                      </button>
+                      <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-tag"></i>
+                      </button>
+                      <div class="btn-group" role="group">
+                        <button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          <i class="ti-more-alt"></i>
+                        </button>
+                        <ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1">
+                          <li>
+                            <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                              <i class="ti-trash mR-10"></i>
+                              <span>Delete</span>
+                            </a>
+                          </li>
+                          <li>
+                            <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                              <i class="ti-alert mR-10"></i>
+                              <span>Mark as Spam</span>
+                            </a>
+                          </li>
+                          <li>
+                            <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                              <i class="ti-star mR-10"></i>
+                              <span>Star</span>
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="peer">
+                    <div class="btn-group" role="group">
+                      <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-angle-left"></i>
+                      </button>
+                      <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-angle-right"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div class="email-content-wrapper">
+                  <!-- Header -->
+                  <div class="peers ai-c jc-sb pX-40 pY-30">
+                    <div class="peers peer-greed">
+                      <div class="peer mR-20">
+                        <img class="bdrs-50p w-3r h-3r" alt="" src="https://randomuser.me/api/portraits/men/11.jpg">
+                      </div>
+                      <div class="peer">
+                        <small>Nov, 02 2017</small>
+                        <h5 class="c-grey-900 mB-5">John Doe</h5>
+                        <span>To: email@gmail.com</span>
+                      </div>
+                    </div>
+                    <div class="peer">
+                      <a href="" class="btn btn-danger bdrs-50p p-15 lh-0">
+                        <i class="fa fa-reply"></i>
+                      </a>
+                    </div>
+                  </div>
+
+                  <!-- Content -->
+                  <div class="bdT pX-40 pY-30">
+                    <h4>Title of this email goes here</h4>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+                      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    </p>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/forms.html
+++ b/apps/templates/home/forms.html
@ -0,0 +1,261 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Forms {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="row gap-20 masonry pos-r">
+          <div class="masonry-sizer col-md-6"></div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Basic Form</h6>
+              <div class="mT-30">
+                <form>
+                  <div class="mb-3">
+                    <label class="form-label" for="exampleInputEmail1">Email address</label>
+                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+                    <small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
+                  </div>
+                  <div class="mb-3">
+                    <label class="form-label" for="exampleInputPassword1">Password</label>
+                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+                  </div>
+                  <div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15">
+                    <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                    <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c">
+                      <span class="peer peer-greed">Call John for Dinner</span>
+                    </label>
+                  </div>
+                  <button type="submit" class="btn btn-primary btn-color">Submit</button>
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Complex Form Layout</h6>
+              <div class="mT-30">
+                <form>
+                  <div class="row">
+                    <div class="mb-3 col-md-6">
+                      <label class="form-label" for="inputEmail4">Email</label>
+                      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
+                    </div>
+                    <div class="mb-3 col-md-6">
+                      <label class="form-label" for="inputPassword4">Password</label>
+                      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
+                    </div>
+                  </div>
+                  <div class="mb-3">
+                    <label class="form-label" for="inputAddress">Address</label>
+                    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
+                  </div>
+                  <div class="mb-3">
+                    <label class="form-label" for="inputAddress2">Address 2</label>
+                    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
+                  </div>
+                  <div class="row">
+                    <div class="mb-3 col-md-6">
+                      <label class="form-label" for="inputCity">City</label>
+                      <input type="text" class="form-control" id="inputCity">
+                    </div>
+                    <div class="mb-3 col-md-4">
+                      <label class="form-label" for="inputState">State</label>
+                      <select id="inputState" class="form-control">
+                        <option selected>Choose...</option>
+                        <option>...</option>
+                      </select>
+                    </div>
+                    <div class="mb-3 col-md-2">
+                      <label class="form-label" for="inputZip">Zip</label>
+                      <input type="text" class="form-control" id="inputZip">
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="mb-3 col-md-6">
+                      <label class="form-label fw-500">Birthdate</label>
+                      <div class="timepicker-input input-icon mb-3">
+                        <div class="input-group">
+                          <div class="input-group-text bgc-white bd bdwR-0">
+                            <i class="ti-calendar"></i>
+                          </div>
+                          <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="mb-3">
+                    <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                      <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
+                      <label for="inputCall2" class="form-label peers peer-greed js-sb ai-c">
+                        <span class="peer peer-greed">Call John for Dinner</span>
+                      </label>
+                    </div>
+                  </div>
+                  <button type="submit" class="btn btn-primary btn-color">Sign in</button>
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Horizontal Form</h6>
+              <div class="mT-30">
+                <form>
+                  <div class="mb-3 row">
+                    <label for="inputEmail3" class="form-label col-sm-2 col-form-label">Email</label>
+                    <div class="col-sm-10">
+                      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
+                    </div>
+                  </div>
+                  <div class="mb-3 row">
+                    <label for="inputPassword3" class="form-label col-sm-2 col-form-label">Password</label>
+                    <div class="col-sm-10">
+                      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
+                    </div>
+                  </div>
+                  <fieldset class="mb-3">
+                    <div class="row">
+                      <legend class="col-form-legend col-sm-2">Radios</legend>
+                      <div class="col-sm-10">
+                        <div class="form-check">
+                          <label class="form-label form-check-label">
+                            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
+                            Option one is this and that&mdash;be sure to include why it's great
+                          </label>
+                        </div>
+                        <div class="form-check">
+                          <label class="form-label form-check-label">
+                            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
+                            Option two can be something else and selecting it will deselect option one
+                          </label>
+                        </div>
+                        <div class="form-check disabled">
+                          <label class="form-label form-check-label">
+                            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
+                            Option three is disabled
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                  </fieldset>
+                  <div class="mb-3 row">
+                    <div class="col-sm-2">Checkbox</div>
+                    <div class="col-sm-10">
+                      <div class="form-check">
+                        <label class="form-label form-check-label">
+                          <input class="form-check-input" type="checkbox"> Check me out
+                        </label>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="mb-3 row">
+                    <div class="col-sm-10">
+                      <button type="submit" class="btn btn-primary btn-color">Sign in</button>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Disabled Forms</h6>
+              <div class="mT-30">
+                <form>
+                  <fieldset disabled>
+                    <div class="mb-3">
+                      <label class="form-label" for="disabledTextInput">Disabled input</label>
+                      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
+                    </div>
+                    <div class="mb-3">
+                      <label class="form-label" for="disabledSelect">Disabled select menu</label>
+                      <select id="disabledSelect" class="form-control">
+                        <option>Disabled select</option>
+                      </select>
+                    </div>
+                    <div class="form-check">
+                      <label class="form-label" class="form-check-label">
+                        <input class="form-check-input" type="checkbox"> Can't check this
+                      </label>
+                    </div>
+                    <button type="submit" class="btn btn-primary btn-color">Submit</button>
+                  </fieldset>
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Validation</h6>
+              <div class="mT-30">
+                <form class="container" id="needs-validation" novalidate>
+                  <div class="row">
+                    <div class="col-md-6 mb-3">
+                      <label class="form-label" for="validationCustom01">First name</label>
+                      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
+                    </div>
+                    <div class="col-md-6 mb-3">
+                      <label class="form-label" for="validationCustom02">Last name</label>
+                      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-md-6 mb-3">
+                      <label class="form-label" for="validationCustom03">City</label>
+                      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
+                      <div class="invalid-feedback">
+                        Please provide a valid city.
+                      </div>
+                    </div>
+                    <div class="col-md-3 mb-3">
+                      <label class="form-label" for="validationCustom04">State</label>
+                      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
+                      <div class="invalid-feedback">
+                        Please provide a valid state.
+                      </div>
+                    </div>
+                    <div class="col-md-3 mb-3">
+                      <label class="form-label" for="validationCustom05">Zip</label>
+                      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
+                      <div class="invalid-feedback">
+                        Please provide a valid zip.
+                      </div>
+                    </div>
+                  </div>
+                  <button class="btn btn-primary btn-color" type="submit">Submit form</button>
+                </form>
+                <script>
+                  // Example starter JavaScript for disabling form submissions if there are invalid fields
+                  (function() {
+                    'use strict';
+
+                    window.addEventListener('load', function() {
+                      var form = document.getElementById('needs-validation');
+                      form.addEventListener('submit', function(event) {
+                        if (form.checkValidity() === false) {
+                          event.preventDefault();
+                          event.stopPropagation();
+                        }
+                        form.classList.add('was-validated');
+                      }, false);
+                    }, false);
+                  })();
+                </script>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/google-maps.html
+++ b/apps/templates/home/google-maps.html
@ -0,0 +1,31 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Forms {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+  <!-- ### $App Screen Content ### -->
+  <main class='main-content bgc-grey-100'>
+    <div id='mainContent'>
+      <div class="container-fluid">
+        <h4 class="c-grey-900 mT-10 mB-30">Google Maps</h4>
+        <div class="row">
+          <div class="col-md-12">
+            <div class="bgc-white bd bdrs-3 p-20 mB-20">
+              <h6 class="c-grey-900 mB-20">Google Maps</h6>
+              <div id="google-map" style="padding-bottom: 75%;"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/index.html
+++ b/apps/templates/home/index.html
@ -0,0 +1,592 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Dashboard {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="row gap-20 masonry pos-r">
+          <div class="masonry-sizer col-md-6"></div>
+          <div class="masonry-item  w-100">
+            <div class="row gap-20">
+              <!-- #Toatl Visits ==================== -->
+              <div class='col-md-3'>
+                <div class="layers bd bgc-white p-20">
+                  <div class="layer w-100 mB-10">
+                    <h6 class="lh-1">Total Visits</h6>
+                  </div>
+                  <div class="layer w-100">
+                    <div class="peers ai-sb fxw-nw">
+                      <div class="peer peer-greed">
+                        <span id="sparklinedash"></span>
+                      </div>
+                      <div class="peer">
+                        <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-green-50 c-green-500">+10%</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- #Total Page Views ==================== -->
+              <div class='col-md-3'>
+                <div class="layers bd bgc-white p-20">
+                  <div class="layer w-100 mB-10">
+                    <h6 class="lh-1">Total Page Views</h6>
+                  </div>
+                  <div class="layer w-100">
+                    <div class="peers ai-sb fxw-nw">
+                      <div class="peer peer-greed">
+                        <span id="sparklinedash2"></span>
+                      </div>
+                      <div class="peer">
+                        <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-red-50 c-red-500">-7%</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- #Unique Visitors ==================== -->
+              <div class='col-md-3'>
+                <div class="layers bd bgc-white p-20">
+                  <div class="layer w-100 mB-10">
+                    <h6 class="lh-1">Unique Visitor</h6>
+                  </div>
+                  <div class="layer w-100">
+                    <div class="peers ai-sb fxw-nw">
+                      <div class="peer peer-greed">
+                        <span id="sparklinedash3"></span>
+                      </div>
+                      <div class="peer">
+                        <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-purple-50 c-purple-500">~12%</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- #Bounce Rate ==================== -->
+              <div class='col-md-3'>
+                <div class="layers bd bgc-white p-20">
+                  <div class="layer w-100 mB-10">
+                    <h6 class="lh-1">Bounce Rate</h6>
+                  </div>
+                  <div class="layer w-100">
+                    <div class="peers ai-sb fxw-nw">
+                      <div class="peer peer-greed">
+                        <span id="sparklinedash4"></span>
+                      </div>
+                      <div class="peer">
+                        <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-blue-50 c-blue-500">33%</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-12">
+            <!-- #Site Visits ==================== -->
+            <div class="bd bgc-white">
+              <div class="peers fxw-nw@lg+ ai-s">
+                <div class="peer peer-greed w-70p@lg+ w-100@lg- p-20">
+                  <div class="layers">
+                    <div class="layer w-100 mB-10">
+                      <h6 class="lh-1">Site Visits</h6>
+                    </div>
+                    <div class="layer w-100">
+                      <div id="world-map-marker"></div>
+                    </div>
+                  </div>
+                </div>
+                <div class="peer bdL p-20 w-30p@lg+ w-100p@lg-">
+                  <div class="layers">
+                    <div class="layer w-100">
+                      <!-- Progress Bars -->
+                      <div class="layers">
+                        <div class="layer w-100">
+                          <h5 class="mB-5">100k</h5>
+                          <small class="fw-600 c-grey-700">Visitors From USA</small>
+                          <span class="pull-right c-grey-600 fsz-sm">50%</span>
+                          <div class="progress mT-10">
+                            <div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="visually-hidden">50% Complete</span></div>
+                          </div>
+                        </div>
+                        <div class="layer w-100 mT-15">
+                          <h5 class="mB-5">1M</h5>
+                          <small class="fw-600 c-grey-700">Visitors From Europe</small>
+                          <span class="pull-right c-grey-600 fsz-sm">80%</span>
+                          <div class="progress mT-10">
+                            <div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="visually-hidden">80% Complete</span></div>
+                          </div>
+                        </div>
+                        <div class="layer w-100 mT-15">
+                          <h5 class="mB-5">450k</h5>
+                          <small class="fw-600 c-grey-700">Visitors From Australia</small>
+                          <span class="pull-right c-grey-600 fsz-sm">40%</span>
+                          <div class="progress mT-10">
+                            <div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="visually-hidden">40% Complete</span></div>
+                          </div>
+                        </div>
+                        <div class="layer w-100 mT-15">
+                          <h5 class="mB-5">1B</h5>
+                          <small class="fw-600 c-grey-700">Visitors From India</small>
+                          <span class="pull-right c-grey-600 fsz-sm">90%</span>
+                          <div class="progress mT-10">
+                            <div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="visually-hidden">90% Complete</span></div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <!-- Pie Charts -->
+                      <div class="peers pT-20 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
+                        <div class="peer">
+                          <div class="easy-pie-chart" data-size='80' data-percent="75" data-bar-color='#f44336'>
+                            <span></span>
+                          </div>
+                          <h6 class="fsz-sm">New Users</h6>
+                        </div>
+                        <div class="peer">
+                          <div class="easy-pie-chart" data-size='80' data-percent="50" data-bar-color='#2196f3'>
+                            <span></span>
+                          </div>
+                          <h6 class="fsz-sm">New Purchases</h6>
+                        </div>
+                        <div class="peer">
+                          <div class="easy-pie-chart" data-size='80' data-percent="90" data-bar-color='#ff9800'>
+                            <span></span>
+                          </div>
+                          <h6 class="fsz-sm">Bounce Rate</h6>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <!-- #Monthly Stats ==================== -->
+            <div class="bd bgc-white">
+              <div class="layers">
+                <div class="layer w-100 pX-20 pT-20">
+                  <h6 class="lh-1">Monthly Stats</h6>
+                </div>
+                <div class="layer w-100 p-20">
+                  <canvas id="line-chart" height="220"></canvas>
+                </div>
+                <div class="layer bdT p-20 w-100">
+                  <div class="peers ai-c jc-c gapX-20">
+                    <div class="peer">
+                      <span class="fsz-def fw-600 mR-10 c-grey-800">10% <i class="fa fa-level-up c-green-500"></i></span>
+                      <small class="c-grey-500 fw-600">APPL</small>
+                    </div>
+                    <div class="peer fw-600">
+                      <span class="fsz-def fw-600 mR-10 c-grey-800">2% <i class="fa fa-level-down c-red-500"></i></span>
+                      <small class="c-grey-500 fw-600">Average</small>
+                    </div>
+                    <div class="peer fw-600">
+                      <span class="fsz-def fw-600 mR-10 c-grey-800">15% <i class="fa fa-level-up c-green-500"></i></span>
+                      <small class="c-grey-500 fw-600">Sales</small>
+                    </div>
+                    <div class="peer fw-600">
+                      <span class="fsz-def fw-600 mR-10 c-grey-800">8% <i class="fa fa-level-down c-red-500"></i></span>
+                      <small class="c-grey-500 fw-600">Profit</small>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <!-- #Todo ==================== -->
+            <div class="bd bgc-white p-20">
+              <div class="layers">
+                <div class="layer w-100 mB-10">
+                  <h6 class="lh-1">Todo List</h6>
+                </div>
+                <div class="layer w-100">
+                  <ul class="list-task list-group" data-role="tasklist">
+                    <li class="list-group-item bdw-0" data-role="task">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c">
+                          <span class="peer peer-greed">Call John for Dinner</span>
+                        </label>
+                      </div>
+                    </li>
+                    <li class="list-group-item bdw-0" data-role="task">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall2" class="form-label peers peer-greed js-sb ai-c">
+                          <span class="peer peer-greed">Book Boss Flight</span>
+                          <span class="peer">
+                            <span class="badge rounded-pill fl-r bg-success lh-0 p-10">2 Days</span>
+                          </span>
+                        </label>
+                      </div>
+                    </li>
+                    <li class="list-group-item bdw-0" data-role="task">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall3" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall3" class="form-label peers peer-greed js-sb ai-c">
+                          <span class="peer peer-greed">Hit the Gym</span>
+                          <span class="peer">
+                            <span class="badge rounded-pill fl-r bg-danger lh-0 p-10">3 Minutes</span>
+                          </span>
+                        </label>
+                      </div>
+                    </li>
+                    <li class="list-group-item bdw-0" data-role="task">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall4" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall4" class="form-label peers peer-greed js-sb ai-c">
+                          <span class="peer peer-greed">Give Purchase Report</span>
+                          <span class="peer">
+                            <span class="badge rounded-pill fl-r bg-warning lh-0 p-10">not important</span>
+                          </span>
+                        </label>
+                      </div>
+                    </li>
+                    <li class="list-group-item bdw-0" data-role="task">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall5" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall5" class="form-label peers peer-greed js-sb ai-c">
+                          <span class="peer peer-greed">Watch Game of Thrones Episode</span>
+                          <span class="peer">
+                            <span class="badge rounded-pill fl-r bg-info lh-0 p-10">Tomorrow</span>
+                          </span>
+                        </label>
+                      </div>
+                    </li>
+                    <li class="list-group-item bdw-0" data-role="task">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall6" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall6" class="form-label peers peer-greed js-sb ai-c">
+                          <span class="peer peer-greed">Give Purchase report</span>
+                          <span class="peer">
+                            <span class="badge rounded-pill fl-r bg-success lh-0 p-10">Done</span>
+                          </span>
+                        </label>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <!-- #Sales Report ==================== -->
+            <div class="bd bgc-white">
+              <div class="layers">
+                <div class="layer w-100 p-20">
+                  <h6 class="lh-1">Sales Report</h6>
+                </div>
+                <div class="layer w-100">
+                  <div class="bgc-light-blue-500 c-white p-20">
+                    <div class="peers ai-c jc-sb gap-40">
+                      <div class="peer peer-greed">
+                        <h5>November 2017</h5>
+                        <p class="mB-0">Sales Report</p>
+                      </div>
+                      <div class="peer">
+                        <h3 class="text-end">$6,000</h3>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="table-responsive p-20">
+                    <table class="table">
+                      <thead>
+                        <tr>
+                          <th class=" bdwT-0">Name</th>
+                          <th class=" bdwT-0">Status</th>
+                          <th class=" bdwT-0">Date</th>
+                          <th class=" bdwT-0">Price</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td class="fw-600">Item #1 Name</td>
+                          <td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill">Unavailable</span> </td>
+                          <td>Nov 18</td>
+                          <td><span class="text-success">$12</span></td>
+                        </tr>
+                        <tr>
+                          <td class="fw-600">Item #2 Name</td>
+                          <td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c rounded-pill">New</span></td>
+                          <td>Nov 19</td>
+                          <td><span class="text-info">$34</span></td>
+                        </tr>
+                        <tr>
+                          <td class="fw-600">Item #3 Name</td>
+                          <td><span class="badge bgc-pink-50 c-pink-700 p-10 lh-0 tt-c rounded-pill">New</span></td>
+                          <td>Nov 20</td>
+                          <td><span class="text-danger">-$45</span></td>
+                        </tr>
+                        <tr>
+                          <td class="fw-600">Item #4 Name</td>
+                          <td><span class="badge bgc-green-50 c-green-700 p-10 lh-0 tt-c rounded-pill">Unavailable</span></td>
+                          <td>Nov 21</td>
+                          <td><span class="text-success">$65</span></td>
+                        </tr>
+                        <tr>
+                          <td class="fw-600">Item #5 Name</td>
+                          <td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill">Used</span></td>
+                          <td>Nov 22</td>
+                          <td><span class="text-success">$78</span></td>
+                        </tr>
+                        <tr>
+                          <td class="fw-600">Item #6 Name</td>
+                          <td><span class="badge bgc-orange-50 c-orange-700 p-10 lh-0 tt-c rounded-pill">Used</span> </td>
+                          <td>Nov 23</td>
+                          <td><span class="text-danger">-$88</span></td>
+                        </tr>
+                        <tr>
+                          <td class="fw-600">Item #7 Name</td>
+                          <td><span class="badge bgc-yellow-50 c-yellow-700 p-10 lh-0 tt-c rounded-pill">Old</span></td>
+                          <td>Nov 22</td>
+                          <td><span class="text-success">$56</span></td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    </div>
+                </div>
+              </div>
+              <div class="ta-c bdT w-100 p-20">
+                <a href="#">Check all the sales</a>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <!-- #Weather ==================== -->
+            <div class="bd bgc-white p-20">
+              <div class="layers">
+                <!-- Widget Title -->
+                <div class="layer w-100 mB-20">
+                  <h6 class="lh-1">Weather</h6>
+                </div>
+
+                <!-- Today Weather -->
+                <div class="layer w-100">
+                  <div class="peers ai-c jc-sb fxw-nw">
+                    <div class="peer peer-greed">
+                      <div class="layers">
+                        <!-- Temprature -->
+                        <div class="layer w-100">
+                          <div class="peers fxw-nw ai-c">
+                            <div class="peer mR-20">
+                              <h3>32<sup>°F</sup></h3>
+                            </div>
+                            <div class="peer">
+                              <canvas class="sleet" width="44" height="44"></canvas>
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- Condition -->
+                        <div class="layer w-100">
+                          <span class="fw-600 c-grey-600">Partly Clouds</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="peer">
+                      <div class="layers ai-fe">
+                        <div class="layer">
+                          <h5 class="mB-5">Monday</h5>
+                        </div>
+                        <div class="layer">
+                          <span class="fw-600 c-grey-600">Nov, 01 2017</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Today Weather Extended -->
+                <div class="layer w-100 mY-30">
+                  <div class="layers bdB">
+                    <div class="layer w-100 bdT pY-5">
+                      <div class="peers ai-c jc-sb fxw-nw">
+                        <div class="peer">
+                          <span>Wind</span>
+                        </div>
+                        <div class="peer ta-r">
+                          <span class="fw-600 c-grey-800">10km/h</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="layer w-100 bdT pY-5">
+                      <div class="peers ai-c jc-sb fxw-nw">
+                        <div class="peer">
+                          <span>Sunrise</span>
+                        </div>
+                        <div class="peer ta-r">
+                          <span class="fw-600 c-grey-800">05:00 AM</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="layer w-100 bdT pY-5">
+                      <div class="peers ai-c jc-sb fxw-nw">
+                        <div class="peer">
+                          <span>Pressure</span>
+                        </div>
+                        <div class="peer ta-r">
+                          <span class="fw-600 c-grey-800">1B</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Week Forecast -->
+                <div class="layer w-100">
+                  <div class="peers peers-greed ai-fs ta-c">
+                    <div class="peer">
+                      <h6 class="mB-10">MON</h6>
+                      <canvas class="sleet" width="30" height="30"></canvas>
+                      <span class="d-b fw-600">32<sup>°F</sup></span>
+                    </div>
+                    <div class="peer">
+                      <h6 class="mB-10">TUE</h6>
+                      <canvas class="clear-day" width="30" height="30"></canvas>
+                      <span class="d-b fw-600">30<sup>°F</sup></span>
+                    </div>
+                    <div class="peer">
+                      <h6 class="mB-10">WED</h6>
+                      <canvas class="partly-cloudy-day" width="30" height="30"></canvas>
+                      <span class="d-b fw-600">28<sup>°F</sup></span>
+                    </div>
+                    <div class="peer">
+                      <h6 class="mB-10">THR</h6>
+                      <canvas class="cloudy" width="30" height="30"></canvas>
+                      <span class="d-b fw-600">32<sup>°F</sup></span>
+                    </div>
+                    <div class="peer">
+                      <h6 class="mB-10">FRI</h6>
+                      <canvas class="snow" width="30" height="30"></canvas>
+                      <span class="d-b fw-600">24<sup>°F</sup></span>
+                    </div>
+                    <div class="peer">
+                      <h6 class="mB-10">SAT</h6>
+                      <canvas class="wind" width="30" height="30"></canvas>
+                      <span class="d-b fw-600">28<sup>°F</sup></span>
+                    </div>
+                    <div class="peer">
+                      <h6 class="mB-10">SUN</h6>
+                      <canvas class="sleet" width="30" height="30"></canvas>
+                      <span class="d-b fw-600">32<sup>°F</sup></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <!-- #Chat ==================== -->
+            <div class="bd bgc-white">
+              <div class="layers">
+                <div class="layer w-100 p-20">
+                  <h6 class="lh-1">Quick Chat</h6>
+                </div>
+                <div class="layer w-100">
+                  <!-- Chat Box -->
+                  <div class="bgc-grey-200 p-20 gapY-15">
+                    <!-- Chat Conversation -->
+                    <div class="peers fxw-nw">
+                      <div class="peer mR-20">
+                        <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
+                      </div>
+                      <div class="peer peer-greed">
+                        <div class="layers ai-fs gapY-5">
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mR-10">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed">
+                                <span>Lorem Ipsum is simply dummy text of</span>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mR-10">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed">
+                                <span>the printing and typesetting industry.</span>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mR-10">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed">
+                                <span>Lorem Ipsum has been the industry's</span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Chat Conversation -->
+                    <div class="peers fxw-nw ai-fe">
+                      <div class="peer ord-1 mL-20">
+                        <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/12.jpg" alt="">
+                      </div>
+                      <div class="peer peer-greed ord-0">
+                        <div class="layers ai-fe gapY-10">
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mL-10 ord-1">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed ord-0">
+                                <span>Heloo</span>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mL-10 ord-1">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed ord-0">
+                                <span>??</span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- Chat Send -->
+                  <div class="p-20 bdT bgc-white">
+                    <div class="pos-r">
+                      <input type="text" class="form-control bdrs-10em m-0" placeholder="Say something...">
+                      <button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1">
+                        <i class="fa fa-paper-plane-o"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/page-404.html
+++ b/apps/templates/home/page-404.html
@ -0,0 +1,28 @@
+{% extends "layouts/base-error.html" %}
+
+{% block title %} Error 404 {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class='pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30'>
+      <div class='mR-60'>
+        <img alt='#' src='{{ ASSETS_ROOT }}/images/404.png' />
+      </div>
+
+      <div class='d-f jc-c fxd-c'>
+        <h1 class='mB-30 fw-900 lh-1 c-red-500' style="font-size: 60px;">404</h1>
+        <h3 class='mB-10 fsz-lg c-grey-900 tt-c'>Oops Page Not Found</h3>
+        <p class='mB-30 fsz-def c-grey-700'>The page you are looking for does not exist or has been moved.</p>
+        <div>
+          <a href="index.html" type='primary' class='btn btn-primary'>Go to Home</a>
+        </div>
+      </div>
+    </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/page-500.html
+++ b/apps/templates/home/page-500.html
@ -0,0 +1,28 @@
+{% extends "layouts/base-error.html" %}
+
+{% block title %} Error 500 {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class='pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30'>
+      <div class='mR-60'>
+        <img alt='#' src='{{ ASSETS_ROOT }}/images/500.png' />
+      </div>
+
+      <div class='d-f jc-c fxd-c'>
+        <h1 class='mB-30 fw-900 lh-1 c-red-500' style="font-size: 60px;">500</h1>
+        <h3 class='mB-10 fsz-lg c-grey-900 tt-c'>Internal server error</h3>
+        <p class='mB-30 fsz-def c-grey-700'>Something goes wrong with our servers, please try again later.</p>
+        <div>
+          <a href="index.html" type='primary' class='btn btn-primary'>Go to Home</a>
+        </div>
+      </div>
+    </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/signin.html
+++ b/apps/templates/home/signin.html
@ -0,0 +1,51 @@
+{% extends "layouts/base-authentication.html" %}
+
+{% block title %} Sign IN {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="peers ai-s fxw-nw h-100vh">
+      <div class="d-n@sm- peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("{{ ASSETS_ROOT }}/images/bg.jpg")'>
+        <div class="pos-a centerXY">
+          <div class="bgc-white bdrs-50p pos-r" style='width: 120px; height: 120px;'>
+            <img class="pos-a centerXY" src="{{ ASSETS_ROOT }}/images/logo.png" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
+        <h4 class="fw-300 c-grey-900 mB-40">Login</h4>
+        <form>
+          <div class="mb-3">
+            <label class="text-normal text-dark form-label">Username</label>
+            <input type="email" class="form-control" placeholder="John Doe">
+          </div>
+          <div class="mb-3">
+            <label class="text-normal text-dark form-label">Password</label>
+            <input type="password" class="form-control" placeholder="Password">
+          </div>
+          <div class="">
+            <div class="peers ai-c jc-sb fxw-nw">
+              <div class="peer">
+                <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                  <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                  <label for="inputCall1" class=" peers peer-greed js-sb ai-c form-label">
+                    <span class="peer peer-greed">Remember Me</span>
+                  </label>
+                </div>
+              </div>
+              <div class="peer">
+                <button class="btn btn-primary btn-color">Login</button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/signup.html
+++ b/apps/templates/home/signup.html
@ -0,0 +1,47 @@
+{% extends "layouts/base-authentication.html" %}
+
+{% block title %} Register {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="peers ai-s fxw-nw h-100vh">
+      <div class="peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("{{ ASSETS_ROOT }}/images/bg.jpg")'>
+        <div class="pos-a centerXY">
+          <div class="bgc-white bdrs-50p pos-r" style='width: 120px; height: 120px;'>
+            <img class="pos-a centerXY" src="{{ ASSETS_ROOT }}/images/logo.png" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
+        <h4 class="fw-300 c-grey-900 mB-40">Register</h4>
+        <form>
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Username</label>
+            <input type="text" class="form-control" Placeholder='John Doe'>
+          </div>
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Email Address</label>
+            <input type="email" class="form-control" Placeholder='name@email.com'>
+          </div>
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Password</label>
+            <input type="password" class="form-control" placeholder="Password">
+          </div>
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Confirm Password</label>
+            <input type="password" class="form-control" placeholder="Password">
+          </div>
+          <div class="mb-3">
+            <button class="btn btn-primary btn-color">Register</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/ui.html
+++ b/apps/templates/home/ui.html
@ -0,0 +1,278 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} UI Elements {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="row gap-20 masonry pos-r">
+          <h4 class="c-grey-900">UI Elements</h4>
+          <div class="masonry-sizer col-md-6"></div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Alerts</h6>
+              <div class="mT-30">
+                <div class="alert alert-primary" role="alert">
+                  This is a primary alert—check it out!
+                </div>
+                <div class="alert alert-secondary" role="alert">
+                  This is a secondary alert—check it out!
+                </div>
+                <div class="alert alert-success" role="alert">
+                  This is a success alert—check it out!
+                </div>
+                <div class="alert alert-danger" role="alert">
+                  This is a danger alert—check it out!
+                </div>
+                <div class="alert alert-warning" role="alert">
+                  This is a warning alert—check it out!
+                </div>
+                <div class="alert alert-info" role="alert">
+                  This is a info alert—check it out!
+                </div>
+                <div class="alert alert-light" role="alert">
+                  This is a light alert—check it out!
+                </div>
+                <div class="alert alert-dark" role="alert">
+                  This is a dark alert—check it out!
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Buttons</h6>
+              <div class="mT-30">
+                <div class="gap-10 peers">
+                  <div class="peer">
+                    <button type="button" class="btn cur-p btn-primary btn-color">Primary</button>
+                  </div>
+                  <div class="peer">
+                    <button type="button" class="btn cur-p btn-secondary btn-color">Secondary</button>
+                  </div>
+                  <div class="peer">
+                    <button type="button" class="btn cur-p btn-success btn-color">Success</button>
+                  </div>
+                  <div class="peer">
+                    <button type="button" class="btn cur-p btn-danger btn-color">Danger</button>
+                  </div>
+                  <div class="peer">
+                    <button type="button" class="btn cur-p btn-warning">Warning</button>
+                  </div>
+                  <div class="peer">
+                    <button type="button" class="btn cur-p btn-info btn-color">Info</button>
+                  </div>
+                  <div class="peer">
+                    <button type="button" class="btn cur-p btn-light">Light</button>
+                  </div>
+                  <div class="peer">
+                    <button type="button" class="btn cur-p btn-dark btn-color">Dark</button>
+                  </div>
+                </div>
+
+                <div class="w-100 gap-10 peers mY-20">
+                  <div class="peer">
+                    <button type="button" class="btn cur-p btn-outline-primary">Primary</button>
+                  </div>
+                  <div class="peer">
+                    <button type="button" class="btn cur-p btn-outline-secondary">Secondary</button>
+                  </div>
+                  <div class="peer">
+                    <button type="button" class="btn cur-p btn-outline-success">Success</button>
+                  </div>
+                  <div class="peer">
+                    <button type="button" class="btn cur-p btn-outline-danger">Danger</button>
+                  </div>
+                  <div class="peer">
+                    <button type="button" class="btn cur-p btn-outline-warning">Warning</button>
+                  </div>
+                  <div class="peer">
+                    <button type="button" class="btn cur-p btn-outline-info">Info</button>
+                  </div>
+                  <div class="peer">
+                    <button type="button" class="btn cur-p btn-outline-light">Light</button>
+                  </div>
+                  <div class="peer">
+                    <button type="button" class="btn cur-p btn-outline-dark">Dark</button>
+                  </div>
+                </div>
+
+                <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
+                  <div class="btn-group me-2" role="group" aria-label="First group">
+                    <button type="button" class="btn btn-success btn-color">1</button>
+                    <button type="button" class="btn btn-success btn-color">2</button>
+                    <button type="button" class="btn btn-success btn-color">3</button>
+                    <button type="button" class="btn btn-success btn-color">4</button>
+                  </div>
+                  <div class="btn-group me-2" role="group" aria-label="Second group">
+                    <button type="button" class="btn btn-success btn-color">5</button>
+                    <button type="button" class="btn btn-success btn-color">6</button>
+                    <button type="button" class="btn btn-success btn-color">7</button>
+                  </div>
+                  <div class="btn-group" role="group" aria-label="Third group">
+                    <button type="button" class="btn btn-success btn-color">8</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Dropdowns</h6>
+              <div class="mT-30">
+                <div class="dropdown">
+                  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    Dropdown button
+                  </button>
+                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                    <a class="dropdown-item" href="#">Action</a>
+                    <a class="dropdown-item" href="#">Another action</a>
+                    <a class="dropdown-item" href="#">Something else here</a>
+                  </div>
+                </div>
+
+                <!-- Example split danger button -->
+                <div class="btn-group mT-20">
+                  <button type="button" class="btn btn-danger btn-color">Action</button>
+                  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <span class="sr-only">Toggle Dropdown</span>
+                  </button>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="#">Action</a>
+                    <a class="dropdown-item" href="#">Another action</a>
+                    <a class="dropdown-item" href="#">Something else here</a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="#">Separated link</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">List Group</h6>
+              <div class="mT-30">
+                <div class="list-group">
+                  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
+                    The current link item
+                  </a>
+                  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
+                  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
+                  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
+                  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Modal</h6>
+              <div class="mT-30">
+              <!-- Button trigger modal -->
+              <button type="button" class="btn btn-primary btn-color" data-bs-toggle="modal" data-bs-target="#exampleModal">
+                Launch demo modal
+              </button>
+
+              <!-- Modal -->
+              <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+                <div class="modal-dialog">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                      ...
+                    </div>
+                    <div class="modal-footer">
+                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                      <button type="button" class="btn btn-primary">Save changes</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Popover</h6>
+              <div class="mT-30">
+                <button type="button" class="btn btn-lg btn-danger btn-color" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Progress</h6>
+              <div class="mT-30">
+                <!-- Progress Bars -->
+                <div class="layers">
+                  <div class="layer w-100">
+                    <h5 class="mB-5">100k</h5>
+                    <small class="fw-600 c-grey-700">Visitors From USA</small>
+                    <span class="pull-right c-grey-600 fsz-sm">50%</span>
+                    <div class="progress mT-10">
+                      <div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="sr-only">50% Complete</span></div>
+                    </div>
+                  </div>
+                  <div class="layer w-100 mT-15">
+                    <h5 class="mB-5">1M</h5>
+                    <small class="fw-600 c-grey-700">Visitors From Europe</small>
+                    <span class="pull-right c-grey-600 fsz-sm">80%</span>
+                    <div class="progress mT-10">
+                      <div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="sr-only">80% Complete</span></div>
+                    </div>
+                  </div>
+                  <div class="layer w-100 mT-15">
+                    <h5 class="mB-5">450k</h5>
+                    <small class="fw-600 c-grey-700">Visitors From Australia</small>
+                    <span class="pull-right c-grey-600 fsz-sm">40%</span>
+                    <div class="progress mT-10">
+                      <div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="sr-only">40% Complete</span></div>
+                    </div>
+                  </div>
+                  <div class="layer w-100 mT-15">
+                    <h5 class="mB-5">1B</h5>
+                    <small class="fw-600 c-grey-700">Visitors From India</small>
+                    <span class="pull-right c-grey-600 fsz-sm">90%</span>
+                    <div class="progress mT-10">
+                      <div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90% Complete</span></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Tootips</h6>
+              <div class="mT-30">
+                <button type="button" class="btn btn-primary btn-color" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
+                  Tooltip on top
+                </button>
+                <button type="button" class="btn btn-secondary btn-color" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
+                  Tooltip on right
+                </button>
+                <button type="button" class="btn btn-success btn-color" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
+                  Tooltip on bottom
+                </button>
+                <button type="button" class="btn btn-danger btn-color" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
+                  Tooltip on left
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/home/vector-maps.html
+++ b/apps/templates/home/vector-maps.html
@ -0,0 +1,30 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} UI Elements {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="container-fluid">
+          <h4 class="c-grey-900 mT-10 mB-30">Vector Maps</h4>
+          <div class="row">
+            <div class="col-md-12">
+              <div class="bgc-white bd bdrs-3 p-20 mB-20">
+                <h6 class="c-grey-900 mB-20">Jquery Vector Maps</h6>
+                <div id="world-map-marker"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
--- a/apps/templates/includes/footer.html
+++ b/apps/templates/includes/footer.html
@ -0,0 +1,5 @@
+<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
+    <span>
+        &copy; Designed by Colorlib - Supported By <a href="https://appseed.us/" target="_blank">AppSeed</a>.
+    </span>
+</footer>
--- a/apps/templates/includes/navigation.html
+++ b/apps/templates/includes/navigation.html
@ -0,0 +1,221 @@
+<div class="header navbar">
+    <div class="header-container">
+      <ul class="nav-left">
+        <li>
+          <a id='sidebar-toggle' class="sidebar-toggle" href="javascript:void(0);">
+            <i class="ti-menu"></i>
+          </a>
+        </li>
+        <li class="search-box">
+          <a class="search-toggle no-pdd-right" href="javascript:void(0);">
+            <i class="search-icon ti-search pdd-right-10"></i>
+            <i class="search-icon-close ti-close pdd-right-10"></i>
+          </a>
+        </li>
+        <li class="search-input">
+          <input class="form-control" type="text" placeholder="Search...">
+        </li>
+      </ul>
+      <ul class="nav-right">
+        <li class="notifications dropdown">
+          <span class="counter bgc-red">3</span>
+          <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
+            <i class="ti-bell"></i>
+          </a>
+
+          <ul class="dropdown-menu">
+            <li class="pX-20 pY-15 bdB">
+              <i class="ti-bell pR-10"></i>
+              <span class="fsz-sm fw-600 c-grey-900">Notifications</span>
+            </li>
+            <li>
+              <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
+                <li>
+                  <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                    <div class="peer mR-15">
+                      <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
+                    </div>
+                    <div class="peer peer-greed">
+                      <span>
+                        <span class="fw-500">John Doe</span>
+                        <span class="c-grey-600">liked your <span class="text-dark">post</span>
+                        </span>
+                      </span>
+                      <p class="m-0">
+                        <small class="fsz-xs">5 mins ago</small>
+                      </p>
+                    </div>
+                  </a>
+                </li>
+                <li>
+                  <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                    <div class="peer mR-15">
+                      <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
+                    </div>
+                    <div class="peer peer-greed">
+                      <span>
+                        <span class="fw-500">Moo Doe</span>
+                        <span class="c-grey-600">liked your <span class="text-dark">cover image</span>
+                        </span>
+                      </span>
+                      <p class="m-0">
+                        <small class="fsz-xs">7 mins ago</small>
+                      </p>
+                    </div>
+                  </a>
+                </li>
+                <li>
+                  <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                    <div class="peer mR-15">
+                      <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
+                    </div>
+                    <div class="peer peer-greed">
+                      <span>
+                        <span class="fw-500">Lee Doe</span>
+                        <span class="c-grey-600">commented on your <span class="text-dark">video</span>
+                        </span>
+                      </span>
+                      <p class="m-0">
+                        <small class="fsz-xs">10 mins ago</small>
+                      </p>
+                    </div>
+                  </a>
+                </li>
+              </ul>
+            </li>
+            <li class="pX-20 pY-15 ta-c bdT">
+              <span>
+                <a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs mL-10"></i></a>
+              </span>
+            </li>
+          </ul>
+        </li>
+        <li class="notifications dropdown">
+          <span class="counter bgc-blue">3</span>
+          <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
+            <i class="ti-email"></i>
+          </a>
+
+          <ul class="dropdown-menu">
+            <li class="pX-20 pY-15 bdB">
+              <i class="ti-email pR-10"></i>
+              <span class="fsz-sm fw-600 c-grey-900">Emails</span>
+            </li>
+            <li>
+              <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
+                <li>
+                  <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                    <div class="peer mR-15">
+                      <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
+                    </div>
+                    <div class="peer peer-greed">
+                      <div>
+                        <div class="peers jc-sb fxw-nw mB-5">
+                          <div class="peer">
+                            <p class="fw-500 mB-0">John Doe</p>
+                          </div>
+                          <div class="peer">
+                            <small class="fsz-xs">5 mins ago</small>
+                          </div>
+                        </div>
+                        <span class="c-grey-600 fsz-sm">
+                          Want to create your own customized data generator for your app...
+                        </span>
+                      </div>
+                    </div>
+                  </a>
+                </li>
+                <li>
+                  <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                    <div class="peer mR-15">
+                      <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
+                    </div>
+                    <div class="peer peer-greed">
+                      <div>
+                        <div class="peers jc-sb fxw-nw mB-5">
+                          <div class="peer">
+                            <p class="fw-500 mB-0">Moo Doe</p>
+                          </div>
+                          <div class="peer">
+                            <small class="fsz-xs">15 mins ago</small>
+                          </div>
+                        </div>
+                        <span class="c-grey-600 fsz-sm">
+                          Want to create your own customized data generator for your app...
+                        </span>
+                      </div>
+                    </div>
+                  </a>
+                </li>
+                <li>
+                  <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                    <div class="peer mR-15">
+                      <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
+                    </div>
+                    <div class="peer peer-greed">
+                      <div>
+                        <div class="peers jc-sb fxw-nw mB-5">
+                          <div class="peer">
+                            <p class="fw-500 mB-0">Lee Doe</p>
+                          </div>
+                          <div class="peer">
+                            <small class="fsz-xs">25 mins ago</small>
+                          </div>
+                        </div>
+                        <span class="c-grey-600 fsz-sm">
+                          Want to create your own customized data generator for your app...
+                        </span>
+                      </div>
+                    </div>
+                  </a>
+                </li>
+              </ul>
+            </li>
+            <li class="pX-20 pY-15 ta-c bdT">
+              <span>
+                <a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right ms-10"></i></a>
+              </span>
+            </li>
+          </ul>
+        </li>
+        <li class="dropdown">
+          <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
+            <div class="peer mR-10">
+              <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
+            </div>
+            <div class="peer">
+              <span class="fsz-sm c-grey-900">John Doe</span>
+            </div>
+          </a>
+          <ul class="dropdown-menu fsz-sm">
+            <li>
+              <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
+                <i class="ti-settings mR-10"></i>
+                <span>Setting</span>
+              </a>
+            </li>
+            <li>
+              <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
+                <i class="ti-user mR-10"></i>
+                <span>Profile</span>
+              </a>
+            </li>
+            <li>
+              <a href="email.html" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
+                <i class="ti-email mR-10"></i>
+                <span>Messages</span>
+              </a>
+            </li>
+            <li role="separator" class="divider"></li>
+            <li>
+              <a href="{% url 'logout' %}" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
+                <i class="ti-power-off mR-10"></i>
+                <span>Logout</span>
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+  
--- a/apps/templates/includes/scripts.html
+++ b/apps/templates/includes/scripts.html
@ -0,0 +1,10 @@
+
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"
+        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+        crossorigin="anonymous"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"
+        integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg=="
+        crossorigin="anonymous"referrerpolicy="no-referrer"></script>
+   
+<script  src="{{ ASSETS_ROOT }}/js/index.js"></script>
--- a/apps/templates/includes/sidebar.html
+++ b/apps/templates/includes/sidebar.html
@ -0,0 +1,208 @@
+
+      <div class="sidebar">
+        <div class="sidebar-inner">
+          <!-- ### $Sidebar Header ### -->
+          <div class="sidebar-logo">
+            <div class="peers ai-c fxw-nw">
+              <div class="peer peer-greed">
+                <a class="sidebar-link td-n" href="/index.html">
+                  <div class="peers ai-c fxw-nw">
+                    <div class="peer">
+                      <div class="logo">
+                        <img src="{{ ASSETS_ROOT }}/images/logo.png" alt="">
+                      </div>
+                    </div>
+                    <div class="peer peer-greed">
+                      <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
+                    </div>
+                  </div>
+                </a>
+              </div>
+              <div class="peer">
+                <div class="mobile-toggle sidebar-toggle">
+                  <a href="" class="td-n">
+                    <i class="ti-arrow-circle-left"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- ### $Sidebar Menu ### -->
+          <ul class="sidebar-menu scrollable pos-r">
+            <li class="nav-item mT-30 actived">
+              <a class="sidebar-link" href="/index.html">
+                <span class="icon-holder">
+                  <i class="c-blue-500 ti-home"></i>
+                </span>
+                <span class="title">Dashboard</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class='sidebar-link' href="/email.html">
+                <span class="icon-holder">
+                  <i class="c-brown-500 ti-email"></i>
+                </span>
+                <span class="title">Email</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class='sidebar-link' href="/compose.html">
+                <span class="icon-holder">
+                  <i class="c-blue-500 ti-share"></i>
+                </span>
+                <span class="title">Compose</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class='sidebar-link' href="/calendar.html">
+                <span class="icon-holder">
+                  <i class="c-deep-orange-500 ti-calendar"></i>
+                </span>
+                <span class="title">Calendar</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class='sidebar-link' href="/chat.html">
+                <span class="icon-holder">
+                  <i class="c-deep-purple-500 ti-comment-alt"></i>
+                </span>
+                <span class="title">Chat</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class='sidebar-link' href="/charts.html">
+                <span class="icon-holder">
+                  <i class="c-indigo-500 ti-bar-chart"></i>
+                </span>
+                <span class="title">Charts</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class='sidebar-link' href="/forms.html">
+                <span class="icon-holder">
+                  <i class="c-light-blue-500 ti-pencil"></i>
+                </span>
+                <span class="title">Forms</span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="sidebar-link" href="/ui.html">
+                <span class="icon-holder">
+                    <i class="c-pink-500 ti-palette"></i>
+                  </span>
+                <span class="title">UI Elements</span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="dropdown-toggle" href="javascript:void(0);">
+                <span class="icon-holder">
+                  <i class="c-orange-500 ti-layout-list-thumb"></i>
+                </span>
+                <span class="title">Tables</span>
+                <span class="arrow">
+                  <i class="ti-angle-right"></i>
+                </span>
+              </a>
+              <ul class="dropdown-menu">
+                <li>
+                  <a class='sidebar-link' href="/basic-table.html">Basic Table</a>
+                </li>
+                <li>
+                  <a class='sidebar-link' href="/datatable.html">Data Table</a>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="dropdown-toggle" href="javascript:void(0);">
+                <span class="icon-holder">
+                    <i class="c-purple-500 ti-map"></i>
+                  </span>
+                <span class="title">Maps</span>
+                <span class="arrow">
+                    <i class="ti-angle-right"></i>
+                  </span>
+              </a>
+              <ul class="dropdown-menu">
+                <li>
+                  <a href="/google-maps.html">Google Map</a>
+                </li>
+                <li>
+                  <a href="/vector-maps.html">Vector Map</a>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="dropdown-toggle" href="javascript:void(0);">
+                <span class="icon-holder">
+                    <i class="c-red-500 ti-files"></i>
+                  </span>
+                <span class="title">Pages</span>
+                <span class="arrow">
+                    <i class="ti-angle-right"></i>
+                  </span>
+              </a>
+              <ul class="dropdown-menu">
+                <li>
+                  <a class='sidebar-link' href="/blank.html">Blank</a>
+                </li>                 
+                <li>
+                  <a class='sidebar-link' href="/page-404.html">404</a>
+                </li>
+                <li>
+                  <a class='sidebar-link' href="/page-500.html">500</a>
+                </li>
+                <li>
+                  <a class='sidebar-link' href="/signin.html">Sign In</a>
+                </li>
+                <li>
+                  <a class='sidebar-link' href="/signup.html">Sign Up</a>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="dropdown-toggle" href="javascript:void(0);">
+                <span class="icon-holder">
+                  <i class="c-teal-500 ti-view-list-alt"></i>
+                </span>
+                <span class="title">Multiple Levels</span>
+                <span class="arrow">
+                  <i class="ti-angle-right"></i>
+                </span>
+              </a>
+              <ul class="dropdown-menu">
+                <li class="nav-item dropdown">
+                  <a href="javascript:void(0);">
+                    <span>Menu Item</span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a href="javascript:void(0);">
+                    <span>Menu Item</span>
+                    <span class="arrow">
+                      <i class="ti-angle-right"></i>
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li>
+                      <a href="javascript:void(0);">Menu Item</a>
+                    </li>
+                    <li>
+                      <a href="javascript:void(0);">Menu Item</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item mT-30 actived">
+                <a class="sidebar-link" target="_blank" href="https://appseed.us/product/adminator/django/">
+                  <span class="icon-holder">
+                    <i class="c-blue-500 ti-download"></i>
+                  </span>
+                  <span class="title">Download</span>
+                </a>
+              </li>            
+          </ul>
+
+        </div>
+      </div>
--- a/apps/templates/layouts/base-authentication.html
+++ b/apps/templates/layouts/base-authentication.html
@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+   <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>
+        Django Adminator - {% block title %}{% endblock %} | AppSeed
+    </title>
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css"
+      integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link type="text/css" href="{{ ASSETS_ROOT }}/css/index.css" rel="stylesheet">
+
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}{% endblock stylesheets %}
+
+</head>
+<body class="app">
+
+    <div id='loader'>
+      <div class="spinner"></div>
+    </div>
+
+    <script>
+      window.addEventListener('load', function load() {
+        const loader = document.getElementById('loader');
+        setTimeout(function() {
+          loader.classList.add('fadeOut');
+        }, 300);
+      });
+    </script>
+
+    {% block content %}{% endblock content %}
+
+    {% include 'includes/scripts.html' %}
+
+    <!-- Specific Page JS goes HERE -->
+    {% block javascripts %}{% endblock javascripts %}    
+
+</body>
+</html>
--- a/apps/templates/layouts/base-error.html
+++ b/apps/templates/layouts/base-error.html
@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>
+      Django Adminator - {% block title %}{% endblock %} | AppSeed
+    </title>
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css"
+      integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link type="text/css" href="{{ ASSETS_ROOT }}/css/index.css" rel="stylesheet">
+    
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}{% endblock stylesheets %}
+
+</head>
+<body class="app">
+
+    {% block content %}{% endblock content %} 
+
+    {% include 'includes/scripts.html' %}
+
+    <!-- Specific Page JS goes HERE -->
+    {% block javascripts %}{% endblock javascripts %}    
+
+</body>
+</html>
--- a/apps/templates/layouts/base.html
+++ b/apps/templates/layouts/base.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>
+      Django Adminator - {% block title %}{% endblock %} | AppSeed
+    </title>
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css"
+      integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link type="text/css" href="{{ ASSETS_ROOT }}/css/index.css" rel="stylesheet">
+    
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}{% endblock stylesheets %}
+
+  </head>
+  <body class="app">
+    <!-- @TOC -->
+    <!-- =================================================== -->
+    <!--
+      + @Page Loader
+      + @App Content
+          - #Left Sidebar
+              > $Sidebar Header
+              > $Sidebar Menu
+
+          - #Main
+              > $Topbar
+              > $App Screen Content
+    -->
+
+    <!-- @Page Loader -->
+    <!-- =================================================== -->
+    <div id='loader'>
+      <div class="spinner"></div>
+    </div>
+
+    <script>
+      window.addEventListener('load', function load() {
+        const loader = document.getElementById('loader');
+        setTimeout(function() {
+          loader.classList.add('fadeOut');
+        }, 300);
+      });
+    </script>
+
+    <!-- @App Content -->
+    <!-- =================================================== -->
+    <div>
+
+        {% include 'includes/sidebar.html' %}    
+
+      <!-- #Main ============================ -->
+      <div class="page-container">
+
+        {% include 'includes/navigation.html' %}
+
+        {% block content %}{% endblock content %} 
+
+        {% include 'includes/footer.html' %}
+
+      </div>
+
+    </div>
+
+    {% include 'includes/scripts.html' %}
+
+    <!-- Specific Page JS goes HERE -->
+    {% block javascripts %}{% endblock javascripts %}    
+
+</body>
+</html>
--- a/core/init.py
+++ b/core/init.py
@ -0,0 +1,4 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
--- a/core/asgi.py
+++ b/core/asgi.py
@ -0,0 +1,12 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+import os
+
+from django.core.asgi import get_asgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings')
+
+application = get_asgi_application()
--- a/core/settings.py
+++ b/core/settings.py
@ -0,0 +1,148 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+import os, environ
+
+env = environ.Env(
+    # set casting, default value
+    DEBUG=(bool, True)
+)
+
+# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
+BASE_DIR = os.path.dirname(os.path.dirname(__file__))
+CORE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+
+# Take environment variables from .env file
+environ.Env.read_env(os.path.join(BASE_DIR, '.env'))
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = env('SECRET_KEY', default='S#perS3crEt_007')
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = env('DEBUG')
+
+# Assets Management
+ASSETS_ROOT = os.getenv('ASSETS_ROOT', '/static/assets') 
+
+# load production server from .env
+ALLOWED_HOSTS        = ['localhost', 'localhost:85', '127.0.0.1', 'code.corbz.dev', env('SERVER', default='127.0.0.1') ]
+CSRF_TRUSTED_ORIGINS = ['http://localhost:85', 'http://127.0.0.1', 'https://' + env('SERVER', default='127.0.0.1') ]
+
+# Application definition
+
+INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'apps.home'  # Enable the inner home (home)
+]
+
+MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    'whitenoise.middleware.WhiteNoiseMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+ROOT_URLCONF = 'core.urls'
+LOGIN_REDIRECT_URL = "home"  # Route defined in home/urls.py
+LOGOUT_REDIRECT_URL = "home"  # Route defined in home/urls.py
+TEMPLATE_DIR = os.path.join(CORE_DIR, "apps/templates")  # ROOT dir for templates
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [TEMPLATE_DIR],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+                'apps.context_processors.cfg_assets_root',
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = 'core.wsgi.application'
+
+# Database
+# https://docs.djangoproject.com/en/3.0/ref/settings/#databases
+
+if os.environ.get('DB_ENGINE') and os.environ.get('DB_ENGINE') == "mysql":
+    DATABASES = { 
+      'default': {
+        'ENGINE'  : 'django.db.backends.mysql', 
+        'NAME'    : os.getenv('DB_NAME'     , 'appseed_db'),
+        'USER'    : os.getenv('DB_USERNAME' , 'appseed_db_usr'),
+        'PASSWORD': os.getenv('DB_PASS'     , 'pass'),
+        'HOST'    : os.getenv('DB_HOST'     , 'localhost'),
+        'PORT'    : os.getenv('DB_PORT'     , 3306),
+        }, 
+    }
+else:
+    DATABASES = {
+        'default': {
+            'ENGINE': 'django.db.backends.sqlite3',
+            'NAME': 'db.sqlite3',
+        }
+    }
+
+# Password validation
+# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
+    },
+]
+
+# Internationalization
+# https://docs.djangoproject.com/en/3.0/topics/i18n/
+
+LANGUAGE_CODE = 'en-us'
+
+TIME_ZONE = 'UTC'
+
+USE_I18N = True
+
+USE_L10N = True
+
+USE_TZ = True
+
+#############################################################
+# SRC: https://devcenter.heroku.com/articles/django-assets
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/1.9/howto/static-files/
+STATIC_ROOT = os.path.join(CORE_DIR, 'staticfiles')
+STATIC_URL = '/static/'
+
+# Extra places for collectstatic to find static files.
+STATICFILES_DIRS = (
+    os.path.join(CORE_DIR, 'apps/static'),
+)
+
+
+#############################################################
+#############################################################
--- a/core/staticfiles/.gitkeep
+++ b/core/staticfiles/.gitkeep
--- a/core/urls.py
+++ b/core/urls.py
@ -0,0 +1,17 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django.contrib import admin
+from django.urls import path, include  # add this
+
+urlpatterns = [
+    path('admin/', admin.site.urls),          # Django admin route
+    path("", include("apps.authentication.urls")), # Auth routes - login / register
+
+    # ADD NEW Routes HERE
+
+    # Leave `Home.Urls` as last the last line
+    path("", include("apps.home.urls"))
+]
--- a/core/wsgi.py
+++ b/core/wsgi.py
@ -0,0 +1,12 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings')
+
+application = get_wsgi_application()
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -0,0 +1,28 @@
+version: '3.8'
+services:
+  appseed-app:
+    container_name: appseed_app
+    restart: always
+    env_file: .env
+    build: .
+    networks:
+      - db_network
+      - web_network
+  nginx:
+    container_name: nginx
+    restart: always
+    image: "nginx:latest"
+    ports:
+      - "5085:5085"
+    volumes:
+      - ./nginx:/etc/nginx/conf.d
+    networks:
+      - web_network
+    depends_on: 
+      - appseed-app
+networks:
+  db_network:
+    driver: bridge
+  web_network:
+    driver: bridge
+ 
--- a/manage.py
+++ b/manage.py
@ -0,0 +1,22 @@
+#!/usr/bin/env python
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+import os
+import sys
+
+def main():
+    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings')
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            "available on your PYTHONPATH environment variable? Did you "
+            "forget to activate a virtual environment?"
+        ) from exc
+    execute_from_command_line(sys.argv)
+
+if __name__ == '__main__':
+    main()
--- a/media/django-dashboard-adminator-card-low.jpg
+++ b/media/django-dashboard-adminator-card-low.jpg
--- a/media/django-dashboard-adminator-card-low.png
+++ b/media/django-dashboard-adminator-card-low.png
--- a/media/django-dashboard-adminator-card.jpg
+++ b/media/django-dashboard-adminator-card.jpg
--- a/media/django-dashboard-adminator-card.png
+++ b/media/django-dashboard-adminator-card.png
--- a/media/django-dashboard-adminator-content-image-low.png
+++ b/media/django-dashboard-adminator-content-image-low.png
--- a/media/django-dashboard-adminator-content-image.png
+++ b/media/django-dashboard-adminator-content-image.png
--- a/media/django-dashboard-adminator-intro.gif
+++ b/media/django-dashboard-adminator-intro.gif
--- a/media/django-dashboard-adminator-screen-1-low.png
+++ b/media/django-dashboard-adminator-screen-1-low.png
--- a/media/django-dashboard-adminator-screen-1.png
+++ b/media/django-dashboard-adminator-screen-1.png
--- a/media/django-dashboard-adminator-screen-2-low.png
+++ b/media/django-dashboard-adminator-screen-2-low.png
--- a/media/django-dashboard-adminator-screen-2.png
+++ b/media/django-dashboard-adminator-screen-2.png
--- a/media/django-dashboard-adminator-screen-3-low.png
+++ b/media/django-dashboard-adminator-screen-3-low.png
--- a/media/django-dashboard-adminator-screen-3.png
+++ b/media/django-dashboard-adminator-screen-3.png
--- a/media/django-dashboard-adminator-screen-4-low.png
+++ b/media/django-dashboard-adminator-screen-4-low.png
--- a/media/django-dashboard-adminator-screen-4.png
+++ b/media/django-dashboard-adminator-screen-4.png
--- a/media/django-dashboard-adminator-screen-login-low.png
+++ b/media/django-dashboard-adminator-screen-login-low.png
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3388.25 3014.2"><title>react-1</title><circle cx="1694.17" cy="1504.25" r="302.6" fill="#fff"/><path d="M1806.5,1191.9c406.2,0,783.6,58.3,1068.1,156.2,342.8,118,553.6,296.9,553.6,458.9,0,168.8-223.4,358.9-591.5,480.8-278.3,92.2-644.6,140.4-1030.2,140.4-395.4,0-769.7-45.2-1051.2-141.4C399.2,2165.1,184.7,1972.6,184.7,1807c0-160.7,201.3-338.2,539.3-456,285.6-99.5,672.3-159.1,1082.5-159.1Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/><path d="M1271,1501.3c202.9-351.9,442-649.7,669-847.2,273.5-238,533.8-331.2,674.1-250.3,146.2,84.3,199.3,372.8,121,752.7-59.2,287.2-200.4,628.5-393.1,962.6-197.5,342.5-423.7,644.2-647.6,840-283.3,247.7-557.3,337.3-700.7,254.6-139.2-80.3-192.4-343.3-125.7-695,56.4-297.4,198-662.1,403-1017.4Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/><path d="M1271.5,2119.8C1068,1768.2,929.4,1412.4,871.6,1117.1c-69.6-355.8-20.4-627.9,119.8-709,146.1-84.6,422.5,13.5,712.5,271,219.3,194.7,444.4,487.5,637.6,821.3,198.1,342.2,346.6,688.8,404.3,980.5,73.1,369.2,13.9,651.3-129.4,734.2-139.1,80.5-393.5-4.7-664.9-238.2-229.2-197.3-474.5-502.1-680-857.1Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/></svg>