diff --git a/app/config/directory.py b/app/config/directory.py
index 1d82c5b..5faba2b 100644
--- a/app/config/directory.py
+++ b/app/config/directory.py
@@ -2,6 +2,7 @@ from core import template
 
 page = {
     'public'    :'pages/public',
+    'dashboard' :'pages/dashboard',
     'email'     :'pages/email'
 }
 
diff --git a/app/config/globalvar.py b/app/config/globalvar.py
index 12973af..87f84c4 100644
--- a/app/config/globalvar.py
+++ b/app/config/globalvar.py
@@ -64,7 +64,7 @@ menu        = {
             {
                 "name":"Dashboard",
                 "target":"_self",
-                "href":"/portal/dashboard",
+                "href":"/dashboard",
                 "roles":[1,2]
             },
             {
@@ -86,5 +86,56 @@ menu        = {
                 "roles":[1,2,3]
             }
         ]
+    },
+    "dashboard": {
+        "navbar": [
+            {
+                "name":"Home",
+                "target":"_self",
+                "href":"/",
+                "notification":0,
+                "roles":[0,1,2,3]
+            }
+        ],
+        "profile": [
+            {
+                "name"  :"Profile",
+                "href"  :"/dashboard/profile",
+                "target":"_self",
+                "roles":[1,2]
+            },
+            {
+                "name"  :"Settings",
+                "href"  :"/dashboard/settings",
+                "target":"_self",
+                "roles":[1,2]
+            },
+            {
+                "name"  :"Logout",
+                "href"  :"/logout",
+                "target":"_self",
+                "roles":[1,2,3]
+            }
+        ],
+        "sidebar": [
+            {
+                "name":"Dashboard",
+                "target":"_self",
+                "href":"/dashboard",
+                "roles":[1,2]
+            },
+            {
+                "name":"Roles",
+                "target":"_self",
+                "href":"/dashboard/roles",
+                "roles":[1]
+            },
+            {
+                "name":"Users",
+                "target":"_self",
+                "href":"/dashboard/users",
+                "roles":[1,2]
+            }
+        ]
     }
 }
diff --git a/app/handler.py b/app/handler.py
index 1ad1d5a..9c5ba20 100644
--- a/app/handler.py
+++ b/app/handler.py
@@ -11,6 +11,7 @@ import  json
 from    config                  import directory
 
 import  templates.plain.main	as template_public
+import  templates.prime.main        as template_dashboard
 import  templates.postcard.main	as template_email
 
 import  modules.public.home     as public_home
@@ -21,8 +22,15 @@ import  modules.public.login    as public_login
 import  modules.public.forgot   as public_forgot
 import  modules.public.reset    as public_reset
 
+import  modules.dashboard.dashboard as dashboard_dashboard
+import  modules.dashboard.roles     as dashboard_roles
+import  modules.dashboard.users     as dashboard_users
+
 import  modules.api.auth        as api_auth
 
+import  modules.api.dashboard.roles as api_dashboard_roles
+import  modules.api.dashboard.users as api_dashboard_users
+
 app = Bottle()
 
 @app.route('/')
@@ -109,6 +117,33 @@ def index():
     else:
         redirect('/')
 
+@app.route('/dashboard')
+def index():
+    params = {
+        "mako"  : {
+            "website" : template_dashboard.main(directory.page["dashboard"], "dashboard")
+        }
+    }
+    return dashboard_dashboard.dashboard().html(params)
+
+@app.route('/dashboard/roles')
+def index():
+    params = {
+        "mako"  : {
+            "website" : template_dashboard.main(directory.page["dashboard"], "roles")
+        }
+    }
+    return dashboard_roles.roles().html(params)
+
+@app.route('/dashboard/users')
+def index():
+    params = {
+        "mako"  : {
+            "website" : template_dashboard.main(directory.page["dashboard"], "users")
+        }
+    }
+    return dashboard_users.users().html(params)
+
 @app.route('/api/auth/registration/register/<roles>', method='POST')
 def index(roles):
     try:
@@ -215,3 +250,53 @@ def index(type):
     except Exception as e:
         print(str(e))
         return json.dumps({}, indent = 2).encode()
+
+@app.route('/api/dashboard/roles/list', method='POST')
+def index():
+    try:
+        params = request.json
+        response.content_type = 'application/json'
+        return json.dumps(api_dashboard_roles.roles().list(params), indent = 2).encode()
+    except Exception as e:
+        print(str(e))
+        return json.dumps({}, indent = 2).encode()
+
+@app.route('/api/dashboard/roles/add', method='POST')
+def index():
+    try:
+        params = request.json
+        response.content_type = 'application/json'
+        return json.dumps(api_dashboard_roles.roles().add(params), indent = 2).encode()
+    except Exception as e:
+        print(str(e))
+        return json.dumps({}, indent = 2).encode()
+
+@app.route('/api/dashboard/roles/edit', method='POST')
+def index():
+    try:
+        params = request.json
+        response.content_type = 'application/json'
+        return json.dumps(api_dashboard_roles.roles().edit(params), indent = 2).encode()
+    except Exception as e:
+        print(str(e))
+        return json.dumps({}, indent = 2).encode()
+
+@app.route('/api/dashboard/roles/remove', method='POST')
+def index():
+    try:
+        params = request.json
+        response.content_type = 'application/json'
+        return json.dumps(api_dashboard_roles.roles().remove(params), indent = 2).encode()
+    except Exception as e:
+        print(str(e))
+        return json.dumps({}, indent = 2).encode()
+
+@app.route('/api/dashboard/users/list', method='POST')
+def index():
+    try:
+        params = request.json
+        response.content_type = 'application/json'
+        return json.dumps(api_dashboard_users.users().list(params), indent = 2).encode()
+    except Exception as e:
+        print(str(e))
+        return json.dumps({}, indent = 2).encode()
diff --git a/app/modules/api/dashboard/roles.py b/app/modules/api/dashboard/roles.py
new file mode 100644
index 0000000..36b91c0
--- /dev/null
+++ b/app/modules/api/dashboard/roles.py
@@ -0,0 +1,143 @@
+import  mysql.connector         as      mariadb
+from    mako.template           import  Template
+from    bottle                  import  request
+
+from    config                  import  database, globalvar
+
+from    scripts                 import  loggorilla, tokenguard
+
+import  procedure.validation    as      procedure_validation
+
+class roles:
+
+    def __init__(self):
+        self.db_main    = mariadb.connect(**database.db_main)
+        self.cursor     = self.db_main.cursor(dictionary=True)
+
+    def list(self, params):
+        APIADDR         = "/api/dashboard/roles/list"
+        response        = {}
+
+        loggorilla.prcss(APIADDR, "Define parameters")
+        token           = params["token"    ]
+        allowed_roles   = [1,2] # Roles list is public or not?
+
+        loggorilla.prcss(APIADDR, "Account validation")
+        user_validation = procedure_validation.validation().account(APIADDR, allowed_roles, token)
+        user            = user_validation['data']
+
+        self.cursor.execute("BEGIN;")
+        try:
+            self.cursor.execute("select auth_roles.id, auth_roles.name, (select count(*) from auth_profile_roles apr where apr.auth_roles = auth_roles.id) AS `count` from auth_roles;")
+            r_roles = self.cursor.fetchall()
+            response["status"   ] = "success"
+            response["desc"     ] = "data collected"
+            response["data"     ] = r_roles
+        except Exception as e:
+            self.cursor.execute("ROLLBACK;")
+            loggorilla.error(APIADDR, str(e) )
+            response["status"	] = "failed"
+            response["desc"		] = "Internal Server Error. Please contact us if you still have an error."
+        finally:
+            self.cursor.execute("COMMIT;")
+            self.cursor.close()
+            self.db_main.close()
+        return response
+
+    def add(self, params):
+        APIADDR         = "/api/dashboard/roles/add"
+        response        = {}
+
+        loggorilla.prcss(APIADDR, "Define parameters")
+        token           = params["token"    ]
+        id              = params["id"       ]
+        name            = params["name"     ]
+        allowed_roles   = [1]
+
+        loggorilla.prcss(APIADDR, "Account validation")
+        user_validation = procedure_validation.validation().account(APIADDR, allowed_roles, token)
+        user            = user_validation['data']
+
+        self.cursor.execute("BEGIN;")
+        try:
+            self.cursor.execute("INSERT INTO `auth_roles` VALUES (%s, %s, NOW(), NULL) ;", (id, name) )
+            response["status"   ] = "success"
+            response["desc"     ] = "data added"
+        except Exception as e:
+            self.cursor.execute("ROLLBACK;")
+            loggorilla.error(APIADDR, str(e) )
+            response["status"	] = "failed"
+            response["desc"		] = "Internal Server Error. Please contact us if you still have an error."
+        finally:
+            self.cursor.execute("COMMIT;")
+            self.cursor.close()
+            self.db_main.close()
+        return response
+
+    def edit(self, params):
+        APIADDR     = "/api/dashboard/roles/edit"
+        response    = {}
+
+        loggorilla.prcss(APIADDR, "Define parameters")
+        token           = params["token"    ]
+        key             = params["key"      ]
+        id              = params["id"       ]
+        name            = params["name"     ]
+        allowed_roles   = [1]
+
+        loggorilla.prcss(APIADDR, "Account validation")
+        user_validation = procedure_validation.validation().account(APIADDR, allowed_roles, token)
+        user            = user_validation['data']
+
+        self.cursor.execute("BEGIN;")
+        try:
+            if key == 1 or id == 1:
+                response["status"	] = "failed"
+                response["desc"     ] = "Cannot change super user"
+            else:
+                self.cursor.execute("UPDATE `auth_roles` SET `id` = %s, `name` = %s, `when_update` = NOW() WHERE `id` = %s ;", (id, name, key) )
+                response["status"   ] = "success"
+                response["desc"     ] = "data change"
+        except Exception as e:
+            self.cursor.execute("ROLLBACK;")
+            loggorilla.error(APIADDR, str(e) )
+            response["status"	] = "failed"
+            response["desc"		] = "Internal Server Error. Please contact us if you still have an error."
+        finally:
+            self.cursor.execute("COMMIT;")
+            self.cursor.close()
+            self.db_main.close()
+        return response
+
+    def remove(self, params):
+        APIADDR     = "/api/dashboard/roles/remove"
+        response    = {}
+
+        loggorilla.prcss(APIADDR, "Define parameters")
+        token           = params["token"    ]
+        key             = params["key"      ]
+        allowed_roles   = [1]
+
+        loggorilla.prcss(APIADDR, "Account validation")
+        user_validation = procedure_validation.validation().account(APIADDR, allowed_roles, token)
+        user            = user_validation['data']
+
+        self.cursor.execute("BEGIN;")
+        try:
+            if key == 1:
+                response["status"	] = "failed"
+                response["desc"     ] = "Cannot change super user"
+            else:
+                self.cursor.execute("DELETE FROM `auth_roles` WHERE `id` = %s ;", (key,) )
+                response["status"   ] = "success"
+                response["desc"     ] = "data removed"
+        except Exception as e:
+            self.cursor.execute("ROLLBACK;")
+            loggorilla.error(APIADDR, str(e) )
+            response["status"	] = "failed"
+            response["desc"		] = "Internal Server Error. Please contact us if you still have an error."
+        finally:
+            self.cursor.execute("COMMIT;")
+            self.cursor.close()
+            self.db_main.close()
+        return response
diff --git a/app/modules/api/dashboard/users.py b/app/modules/api/dashboard/users.py
new file mode 100644
index 0000000..8fbb078
--- /dev/null
+++ b/app/modules/api/dashboard/users.py
@@ -0,0 +1,61 @@
+import  mysql.connector         as      mariadb
+from    mako.template           import  Template
+from    bottle                  import  request
+
+from    config                  import  database, globalvar
+
+from    scripts                 import  loggorilla, tokenguard
+
+import  procedure.validation    as      procedure_validation
+
+class users:
+
+    def __init__(self):
+        self.db_main    = mariadb.connect(**database.db_main)
+        self.cursor     = self.db_main.cursor(dictionary=True)
+
+    def list(self, params):
+        APIADDR         = "/api/dashboard/users/list"
+        response        = {}
+
+        loggorilla.prcss(APIADDR, "Define parameters")
+        token           = params["token"    ]
+        allowed_roles   = [1,2]
+
+        loggorilla.prcss(APIADDR, "Account validation")
+        user_validation = procedure_validation.validation().account(APIADDR, allowed_roles, token)
+        user            = user_validation['data']
+
+        self.cursor.execute("BEGIN;")
+        try:
+            r_profile = []
+            self.cursor.execute("select auth_profile.id, auth_profile.username, auth_profile.email, auth_profile.phone from auth_profile;")
+            l1 = self.cursor.fetchall()
+            c1 = 0
+            for d1 in l1:
+                r_profile.append({
+                    "id"            : d1["id"       ],
+                    "username"      : d1["username" ],
+                    "email"         : d1["email"    ],
+                    "phone"         : d1["phone"    ],
+                    "roles"         : [],
+                    "verification"  : []
+                })
+                self.cursor.execute("select auth_roles.id, auth_roles.name from auth_profile_roles inner join auth_roles on auth_profile_roles.auth_roles = auth_roles.id where auth_profile_roles.auth_profile = %s ; ", ( d1["id"], ) )
+                r_profile[c1]["roles"] = self.cursor.fetchall()
+                self.cursor.execute("select `type`, `verified` from auth_profile_verification where auth_profile = %s ; ", ( d1["id"], ) )
+                r_profile[c1]["verification"] = self.cursor.fetchall()
+                c1 += 1
+            response["status"   ] = "success"
+            response["desc"     ] = "data collected"
+            response["data"     ] = r_profile
+        except Exception as e:
+            self.cursor.execute("ROLLBACK;")
+            loggorilla.error(APIADDR, str(e) )
+            response["status"	] = "failed"
+            response["desc"		] = "Internal Server Error. Please contact us if you still have an error."
+        finally:
+            self.cursor.execute("COMMIT;")
+            self.cursor.close()
+            self.db_main.close()
+        return response
diff --git a/app/modules/dashboard/dashboard.py b/app/modules/dashboard/dashboard.py
new file mode 100644
index 0000000..95e9452
--- /dev/null
+++ b/app/modules/dashboard/dashboard.py
@@ -0,0 +1,48 @@
+from    mako.template           import  Template
+from    config                  import  globalvar
+from    scripts                 import  loggorilla
+
+import  procedure.validation    as 		procedure_validation
+
+class dashboard:
+
+    def __init__(self):
+        pass
+
+    def html(self, params):
+        APIADDR         = "/dashboard"
+
+        loggorilla.prcss(APIADDR, "Define page parameters")
+        active_page     = "Dashboard"
+        allowed_roles   = [0,1,2,3]
+
+        loggorilla.prcss(APIADDR, "Account validation")
+        user_validation = procedure_validation.validation().account(APIADDR, allowed_roles)
+        user            = user_validation['data']
+
+        return Template(params["mako"]["website"]['index']).render(
+            title     = globalvar.title,
+            navbar    = Template(params["mako"]["website"]['navbar']).render(
+                title       = globalvar.title,
+                menu        = globalvar.menu['dashboard']['navbar'],
+                profile     = {
+                    "picture"	: "https://ditaajipratama.net/img/no-profile-donut.png",
+                    "name"		: user['profile']['username'],
+                    "menu"		: globalvar.menu['dashboard']['profile']
+                },
+                user_roles  = user['profile']['roles'],
+                active_page = active_page
+            ),
+            sidebar   = Template(params["mako"]["website"]['sidebar']).render(
+                menu        = globalvar.menu['dashboard']['sidebar'],
+                user_roles  = user['profile']['roles'],
+                active_page = active_page
+            ),
+            footer    = Template(params["mako"]["website"]['footer']).render(
+                copyright   = globalvar.copyright,
+            ),
+            container = Template(params["mako"]["website"]['container']).render(
+                greeting	= f"Welcome to your new web application! This placeholder page is here to let you know that your web framework is successfully set up and ready to go. Now, it's time to start building your project. Dive into the documentation to explore the features and capabilities at your disposal.",
+                user        = user
+            )
+        )
diff --git a/app/modules/dashboard/roles.py b/app/modules/dashboard/roles.py
new file mode 100644
index 0000000..11ac683
--- /dev/null
+++ b/app/modules/dashboard/roles.py
@@ -0,0 +1,47 @@
+from    mako.template           import  Template
+from    config                  import  globalvar
+from    scripts                 import  loggorilla
+
+import  procedure.validation    as 		procedure_validation
+
+class roles:
+
+    def __init__(self):
+        pass
+
+    def html(self, params):
+        APIADDR         = "/dashboard/roles"
+
+        loggorilla.prcss(APIADDR, "Define page parameters")
+        active_page     = "Roles"
+        allowed_roles   = [1]
+
+        loggorilla.prcss(APIADDR, "Account validation")
+        user_validation = procedure_validation.validation().account(APIADDR, allowed_roles)
+        user            = user_validation['data']
+
+        return Template(params["mako"]["website"]['index']).render(
+            title     = globalvar.title,
+            navbar    = Template(params["mako"]["website"]['navbar']).render(
+                title       = globalvar.title,
+                menu        = globalvar.menu['dashboard']['navbar'],
+                profile     = {
+                    "picture"	: "https://ditaajipratama.net/img/no-profile-donut.png",
+                    "name"		: user['profile']['username'],
+                    "menu"		: globalvar.menu['dashboard']['profile']
+                },
+                user_roles  = user['profile']['roles'],
+                active_page = active_page
+            ),
+            sidebar   = Template(params["mako"]["website"]['sidebar']).render(
+                menu        = globalvar.menu['dashboard']['sidebar'],
+                user_roles  = user['profile']['roles'],
+                active_page = active_page
+            ),
+            footer    = Template(params["mako"]["website"]['footer']).render(
+                copyright   = globalvar.copyright,
+            ),
+            container = Template(params["mako"]["website"]['container']).render(
+                token       = user['token']
+            )
+        )
diff --git a/app/modules/dashboard/users.py b/app/modules/dashboard/users.py
new file mode 100644
index 0000000..4579218
--- /dev/null
+++ b/app/modules/dashboard/users.py
@@ -0,0 +1,47 @@
+from    mako.template           import  Template
+from    config                  import  globalvar
+from    scripts                 import  loggorilla
+
+import  procedure.validation    as 		procedure_validation
+
+class users:
+
+    def __init__(self):
+        pass
+
+    def html(self, params):
+        APIADDR         = "/dashboard/users"
+
+        loggorilla.prcss(APIADDR, "Define page parameters")
+        active_page     = "Users"
+        allowed_roles   = [1,2]
+
+        loggorilla.prcss(APIADDR, "Account validation")
+        user_validation = procedure_validation.validation().account(APIADDR, allowed_roles)
+        user            = user_validation['data']
+
+        return Template(params["mako"]["website"]['index']).render(
+            title     = globalvar.title,
+            navbar    = Template(params["mako"]["website"]['navbar']).render(
+                title       = globalvar.title,
+                menu        = globalvar.menu['dashboard']['navbar'],
+                profile     = {
+                    "picture"	: "https://ditaajipratama.net/img/no-profile-donut.png",
+                    "name"		: user['profile']['username'],
+                    "menu"		: globalvar.menu['dashboard']['profile']
+                },
+                user_roles  = user['profile']['roles'],
+                active_page = active_page
+            ),
+            sidebar   = Template(params["mako"]["website"]['sidebar']).render(
+                menu        = globalvar.menu['dashboard']['sidebar'],
+                user_roles  = user['profile']['roles'],
+                active_page = active_page
+            ),
+            footer    = Template(params["mako"]["website"]['footer']).render(
+                copyright   = globalvar.copyright,
+            ),
+            container = Template(params["mako"]["website"]['container']).render(
+                token       = user['token']
+            )
+        )
diff --git a/app/pages/dashboard/dashboard.html b/app/pages/dashboard/dashboard.html
new file mode 100644
index 0000000..9cb839f
--- /dev/null
+++ b/app/pages/dashboard/dashboard.html
@@ -0,0 +1,24 @@
+<div class="container mb-5">
+    <h1>Here is Dashboard!</h1>
+
+    % if 4 in user['profile']['roles']:
+    <!-- Debug Section -->
+    <div class="row">
+        <div class="col">
+            <div class="card">
+                <div class="card-body">
+                    <h1>Debug Section</h1>
+                    <p>Only tester that can see this section</p>
+                    <p>
+                        <b>Username:</b> ${user['profile']['username']} <br>
+                        <b>Email:</b> ${user['profile']['email']} <br>
+                        <b>Phone:</b> ${user['profile']['phone']} <br>
+                        <b>Roles:</b> ${str(user['profile']['roles'])} <br>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+    % endif
+
+</div>
diff --git a/app/pages/dashboard/roles.html b/app/pages/dashboard/roles.html
new file mode 100644
index 0000000..377611b
--- /dev/null
+++ b/app/pages/dashboard/roles.html
@@ -0,0 +1,45 @@
+<div class="container mb-5">
+    <div class="row">
+        <div class="col">
+            <h1 class="h3">Roles</h1>
+            <input type="hidden" id="form-token" value="${token}">
+            <div class="table-responsive">
+                <table class="table table-sm table-bordered table-striped" id="table-roles" width="100%" cellspacing="0">
+                    <thead class="table-primary">
+                        <tr>
+                            <th>ID</th>
+                            <th>Name</th>
+                            <th>Users</th>
+                            <th>Action</th>
+                        </tr>
+                        <tr>
+                            <th>
+                                <input class="form-control form-control-sm" placeholder="ID" id="form-add-id">
+                            </th>
+                            <th>
+                                <input class="form-control form-control-sm" placeholder="Name" id="form-add-name">
+                            </th>
+                            <th></th>
+                            <th>
+                                <button class="btn btn-primary btn-sm" type="button" onclick="submitAdd()">
+                                    <span class="fa fa-plus"></span> Add
+                                </button>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </div>
+            <!-- End table-responsive -->
+            <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+            <script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
+            <script src="https://cdn.datatables.net/1.13.5/js/dataTables.bootstrap5.min.js"></script>
+
+            <script type="text/javascript" src="/js/carrack.js"></script>
+            <script type="text/javascript" src="/js/dashboard/roles.js"></script>
+        </div>
+        <!-- End col -->
+    </div>
+    <!-- End row -->
+</div>
+<!-- End container -->
diff --git a/app/pages/dashboard/users.html b/app/pages/dashboard/users.html
new file mode 100644
index 0000000..96f0550
--- /dev/null
+++ b/app/pages/dashboard/users.html
@@ -0,0 +1,34 @@
+<div class="container mb-5">
+    <div class="row">
+        <div class="col">
+            <h1 class="h3">Users</h1>
+            <input type="hidden" id="form-token" value="${token}">
+            <div class="table-responsive">
+                <table class="table table-sm table-bordered table-striped" id="table-users" width="100%" cellspacing="0">
+                    <thead class="table-primary">
+                        <tr>
+                            <th>ID</th>
+                            <th>Username</th>
+                            <th>Email</th>
+                            <th>Phone</th>
+                            <th>Roles</th>
+                            <th>Verification</th>
+                            <th>Action</th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </div>
+            <!-- End table-responsive -->
+            <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+            <script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
+            <script src="https://cdn.datatables.net/1.13.5/js/dataTables.bootstrap5.min.js"></script>
+
+            <script type="text/javascript" src="/js/carrack.js"></script>
+            <script type="text/javascript" src="/js/dashboard/users.js"></script>
+        </div>
+        <!-- End col -->
+    </div>
+    <!-- End row -->
+</div>
+<!-- End container -->
diff --git a/app/static/js/dashboard/roles.js b/app/static/js/dashboard/roles.js
new file mode 100644
index 0000000..d48013b
--- /dev/null
+++ b/app/static/js/dashboard/roles.js
@@ -0,0 +1,119 @@
+var token   = document.getElementById("form-token"      ).value;
+
+var table = $('#table-roles').DataTable({
+    "orderCellsTop": true,   // move sorting to top header
+    "columnDefs": [
+        { "orderable": false, "targets": [3] }  // Disable sorting on the first and fourth columns
+    ],
+    "ajax": {
+        "url": "/api/dashboard/roles/list",
+        "type": "POST", // Use POST method
+        "dataSrc": "data",
+        "contentType": "application/json",
+        "data": function(d) {
+            // Customize the data payload sent in the POST request
+            return JSON.stringify({
+                "token": token
+            });
+        },
+        "error": function (xhr, error, thrown) {
+            console.error('Error fetching data:', thrown);
+            console.error('Response:', xhr.responseText);
+        }
+    },
+    "columns": [
+        {
+            "data": "id",
+            "render": function(data, type, row) {
+                return `<span class="d-none">${data}</span><input ${data==1 ? 'disabled' : ''} class="form-control form-control-sm" placeholder="ID" id="form-edit-id-${data}" value="${data}">`;
+            }
+        },
+        {
+            "data": "name",
+            "render": function(data, type, row) {
+                return `<span class="d-none">${data}</span><input ${row.id==1 ? 'disabled' : ''} class="form-control form-control-sm" placeholder="Name" id="form-edit-name-${row.id}" value="${data}">`;
+            }
+        },
+        {
+            "data": "count",
+            "render": function(data, type, row) {
+                return `<span class="badge bg-${data==0 ? 'secondary' : 'success'}">${data} User(s)</span>`;
+            }
+        },
+        {
+            "data": null,
+            "defaultContent": "",
+            "render": function(data, type, row) {
+                if (row.id==1) return "";
+                else return `<button ${row.id==1 ? 'disabled' : ''} class="btn btn-success btn-sm" type="button" onclick="submitEdit(${row.id})">
+                            <span class="fa fa-save"></span> Save
+                        </button>
+                        <button ${row.id==1 ? 'disabled' : ''} class="btn btn-danger btn-sm" type="button" onclick="if(confirm('Are you sure you want to delete this?')) { submitRemove(${row.id}); }">
+                            <span class="fa fa-trash-alt"></span> Delete
+                        </button>`;
+            }
+        }
+    ],
+    "initComplete": function () {
+        // Custom init logic if needed
+    }
+});
+
+function submitAdd() {
+
+    var id      = document.getElementById("form-add-id"     ).value;
+    var name    = document.getElementById("form-add-name"   ).value;
+    var url     = "/api/dashboard/roles/add";
+    var payload = {
+        "token" : token,
+        "id"    : id,
+        "name"  : name
+    };
+
+    sendHttpRequest(url, "POST", payload, function (error, response) {
+        if (error) console.error("Error:", error);
+        else {
+            table.ajax.reload(null, false); // false means keep the current page
+            console.log("JSON Response:", response);
+        }
+    }, "application/json");
+
+}
+
+function submitEdit(key) {
+    var id      = document.getElementById(`form-edit-id-${key}`     ).value;
+    var name    = document.getElementById(`form-edit-name-${key}`   ).value;
+    var url     = "/api/dashboard/roles/edit";
+    var payload = {
+        "token" : token,
+        "key"   : key,
+        "id"    : id,
+        "name"  : name
+    };
+
+    sendHttpRequest(url, "POST", payload, function (error, response) {
+        if (error) console.error("Error:", error);
+        else {
+            table.ajax.reload(null, false); // false means keep the current page
+            console.log("JSON Response:", response);
+        }
+    }, "application/json");
+
+}
+
+function submitRemove(key) {
+    var url     = "/api/dashboard/roles/remove";
+    var payload = {
+        "token" : token,
+        "key"   : key
+    };
+
+    sendHttpRequest(url, "POST", payload, function (error, response) {
+        if (error) console.error("Error:", error);
+        else {
+            table.ajax.reload(null, false); // false means keep the current page
+            console.log("JSON Response:", response);
+        }
+    }, "application/json");
+
+}
diff --git a/app/static/js/dashboard/users.js b/app/static/js/dashboard/users.js
new file mode 100644
index 0000000..6f30b07
--- /dev/null
+++ b/app/static/js/dashboard/users.js
@@ -0,0 +1,75 @@
+var token   = document.getElementById("form-token"      ).value;
+
+var table = $('#table-users').DataTable({
+    "columnDefs": [
+        { "orderable": false, "targets": [4, 5, 6] }  // Disable sorting on the first and fourth columns
+    ],
+    "ajax": {
+        "url": "/api/dashboard/users/list",
+        "type": "POST", // Use POST method
+        "dataSrc": "data",
+        "contentType": "application/json",
+        "data": function(d) {
+            // Customize the data payload sent in the POST request
+            return JSON.stringify({
+                "token": token
+            });
+        },
+        "error": function (xhr, error, thrown) {
+            console.error('Error fetching data:', thrown);
+            console.error('Response:', xhr.responseText);
+        }
+    },
+    "columns": [
+        {
+            "data": "id",
+            "render": function(data, type, row) {
+                return `${data}`;
+            }
+        },
+        {
+            "data": "username",
+            "render": function(data, type, row) {
+                return `${data}`;
+            }
+        },
+        {
+            "data": "email",
+            "render": function(data, type, row) {
+                return `${data}`;
+            }
+        },
+        {
+            "data": "phone",
+            "render": function(data, type, row) {
+                return `${data}`;
+            }
+        },
+        {
+            "data": "roles",
+            "render": function(data, type, row) {
+                var roles = ""
+                for (let i = 0; i < data.length; i++) roles += `<span class="badge bg-primary m-1">${data[i].name}</span>`;
+                return roles;
+            }
+        },
+        {
+            "data": "verification",
+            "render": function(data, type, row) {
+                var verification = ""
+                for (let i = 0; i < data.length; i++) verification += `<span class="badge bg-${data[i].verified==0 ? 'danger' : 'success'} m-1"> <i class="fa fa-${data[i].verified==0 ? 'xmark' : 'check'}"></i> ${data[i].type}</span>`;
+                return verification;
+            }
+        },
+        {
+            "data": null,
+            "defaultContent": "",
+            "render": function(data, type, row) {
+                return "";
+            }
+        }
+    ],
+    "initComplete": function () {
+        // Custom init logic if needed
+    }
+});
diff --git a/app/templates/prime/LICENSE b/app/templates/prime/LICENSE
new file mode 100644
index 0000000..31a122a
--- /dev/null
+++ b/app/templates/prime/LICENSE
@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2024 Dita Aji Pratama
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/app/templates/prime/README.md b/app/templates/prime/README.md
new file mode 100644
index 0000000..2c4dc82
--- /dev/null
+++ b/app/templates/prime/README.md
@@ -0,0 +1,159 @@
+# CostaPy Template - Prime
+A prime dashboard based on bootstrap 5
+
+## Usage
+
+- Put the folder in your `templates` directory
+- Add to handler
+
+  ```python
+  import templates.prime.main as template_dashboard
+
+  params["mako"] = {
+      "website" : template_dashboard.main(directory.page["dashboard"], "users")
+  }
+  ```
+
+- Define a necessary variable on your modules
+
+  ```python
+  title       = "CostaPy"
+
+  user_roles  = [1,2]    # A roles that user have
+  active_page = "Users"  # Current active page name
+
+  copyright   = "Copyright (C) 2022 Dita Aji Pratama"
+  greeting    = "Hello world"
+  ```
+
+- Define a navbar menu on your modules
+
+  ```python
+  menu_navbar = [
+      {
+          "name":"Home",
+          "target":"_self",
+          "href":"#",
+          "notification":0,
+          "roles":[1,2]
+      },
+      {
+          "name":"Customize",
+          "href":"#",
+          "target":"_self",
+          "notification":0,
+          "roles":[1,2]
+      },
+      {
+          "name":"Notification",
+          "href":"#",
+          "target":"_self",
+          "notification":1,
+          "roles":[1,2]
+      }
+  ]
+  ```
+
+- Define a profile menu on your modules
+
+  ```python
+  menu_profile = {
+      "picture"     : "https://ditaajipratama.net/img/no-profile-donut.png",
+      "name"		: "Dita Aji Pratama",
+      "menu"		: [
+          {
+              "name"  :"Profile",
+              "href"  :"/profile"
+              "target":"_self",
+              "roles":[1,2]
+          },
+          {
+              "name"  :"Settings",
+              "href"  :"/settings"
+              "target":"_self",
+              "roles":[1,2]
+          },
+          {
+              "name"  :"Logout",
+              "href"  :"/logout"
+              "target":"_self",
+              "roles":[1,2,3]
+          }
+      ]
+  }
+  ```
+
+- Define a sidebar menu on your modules
+
+  ```python
+  menu_sidebar = [
+      {
+          "name":"Dashboard",
+          "target":"_self",
+          "href":"#",
+          "roles":[1,2]
+      },
+      {
+          "name":"Users",
+          "target":"_self",
+          "href":"#",
+          "roles":[1,2]
+      },
+      {
+          "name":"Items",
+          "target":"_self",
+          "href":"#",
+          "roles":[1,2]
+      },
+      {
+          "name":"Analytic",
+          "target":"_self",
+          "href":"#",
+          "roles":[1,2]
+      },
+      {
+          "name":"Reports",
+          "target":"_self",
+          "href":"#",
+          "roles":[1,2]
+      }
+  ]
+  ```
+
+- Set a template on your modules
+
+  ```python
+  return Template(params["mako"]["website"]['index']).render(
+      title     = title,
+      navbar    = Template(params["mako"]["website"]['navbar']).render(
+          title       = title,
+          menu        = menu_navbar,
+          profile     = menu_profile,
+          user_roles  = user_roles,
+          active_page = active_page
+      ),
+      sidebar   = Template(params["mako"]["website"]['sidebar']).render(
+          menu        = menu_sidebar,
+          user_roles  = user_roles,
+          active_page = active_page
+      ),
+      footer    = Template(params["mako"]["website"]['footer']).render(
+          copyright   = copyright,
+      ),
+      container = Template(params["mako"]["website"]['container']).render(
+          greeting    = greeting
+      )
+  )
+  ```
+
+## License
+
+MIT License
+
+Copyright (c) 2024 Dita Aji Pratama
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/app/templates/prime/html/footer.html b/app/templates/prime/html/footer.html
new file mode 100644
index 0000000..fee4199
--- /dev/null
+++ b/app/templates/prime/html/footer.html
@@ -0,0 +1,3 @@
+<footer class="footer fixed-bottom" id="footer">
+    <p>${copyright}</p>
+</footer>
diff --git a/app/templates/prime/html/index.html b/app/templates/prime/html/index.html
new file mode 100644
index 0000000..966f3cd
--- /dev/null
+++ b/app/templates/prime/html/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>${title}</title>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+        <link rel="stylesheet" href="/templates/prime/css/style.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+        <link href="https://cdn.datatables.net/1.13.5/css/dataTables.bootstrap5.min.css" rel="stylesheet">
+    </head>
+    <body class="d-flex flex-column">
+        ${navbar}
+        ${sidebar}
+        <div class="content flex-grow-1" id="content">
+            ${container}
+        </div>
+        ${footer}
+        <button class="sidebar-toggle" id="sidebarToggle">
+            &#9776;<span>Menu</span>
+        </button>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+        <script>
+            document.getElementById('sidebarToggle').addEventListener('click', function() {
+                var sidebar = document.getElementById('sidebar');
+                var content = document.getElementById('content');
+                var footer = document.getElementById('footer');
+                if (window.innerWidth <= 768) {
+                    sidebar.classList.toggle('show');
+                } else {
+                    sidebar.classList.toggle('minimized');
+                    content.classList.toggle('full-width');
+                    footer.classList.toggle('full-width');
+                }
+            });
+        </script>
+    </body>
+</html>
diff --git a/app/templates/prime/html/navbar.html b/app/templates/prime/html/navbar.html
new file mode 100644
index 0000000..3eae64e
--- /dev/null
+++ b/app/templates/prime/html/navbar.html
@@ -0,0 +1,44 @@
+<!-- Navbar -->
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="#">${title}</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav ms-auto">
+                % for item in menu:
+                    % if any(role in item['roles'] for role in user_roles):
+                        <li class="nav-item">
+                            <a class="nav-link ${'active' if item['name'] == active_page else ''}" href="${item['href']}" target="${item['target']}">
+                                % if item['notification'] > 0:
+                                    ${item['name']} <sup class="badge bg-danger">${item['notification']}</sup>
+                                % else:
+                                    ${item['name']}
+                                % endif
+                            </a>
+                        </li>
+                    % endif
+                % endfor
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        <img src="${profile['picture']}" alt="Profile" class="profile-image me-2">
+                        ${profile['name']}
+                    </a>
+                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
+                        % for item in profile['menu']:
+                            % if any(role in item['roles'] for role in user_roles):
+                                <li>
+                                    <a class="dropdown-item ${'active' if item['name'] == active_page else ''}" href="${item['href']}" target="${item['target']}">
+                                        ${item['name']}
+                                    </a>
+                                </li>
+                            % endif
+                        % endfor
+                        <!-- <li><hr class="dropdown-divider"></li> -->
+                    </ul>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
diff --git a/app/templates/prime/html/sidebar.html b/app/templates/prime/html/sidebar.html
new file mode 100644
index 0000000..532b78b
--- /dev/null
+++ b/app/templates/prime/html/sidebar.html
@@ -0,0 +1,16 @@
+<!-- Sidebar -->
+<div class="sidebar p-3" id="sidebar">
+    <!-- <h5>Sidebar</h5> -->
+    <ul class="nav flex-column pb-5">
+        % for item in menu:
+            % if any(role in item['roles'] for role in user_roles):
+                <li class="nav-item">
+                    <a class="nav-link text-white ${'active' if item['name'] == active_page else ''}" href="${item['href']}" target="${item['target']}">
+                        ${item['name']}
+                    </a>
+                </li>
+            % endif
+        % endfor
+        <!-- Add more items to test scrolling -->
+    </ul>
+</div>
diff --git a/app/templates/prime/main.py b/app/templates/prime/main.py
new file mode 100644
index 0000000..fd103ad
--- /dev/null
+++ b/app/templates/prime/main.py
@@ -0,0 +1,33 @@
+# MIT License
+#
+# Copyright (c) 2024 Dita Aji Pratama
+#
+# Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+#
+# The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+from core import html
+
+static = [
+    {
+        "route"	: "/templates/prime/css/<filepath:re:.*\.(css|sass|css.map)>",
+        "root"	: "./templates/prime/static/css"
+    },
+    {
+        "route"	: "/templates/prime/img/<filepath:re:.*\.(jpg|jpeg|svg|png)>",
+        "root"	: "./templates/prime/static/img"
+    }
+]
+
+def main(dir, page):
+    html_template	= html.main.get_html("templates/prime/html")
+    html_page		= html.main.get_html(dir)
+    return {
+        "index"		: html_template	[ "index.html"     ],
+        "navbar"	: html_template	[ "navbar.html"    ],
+        "sidebar"   : html_template	[ "sidebar.html"   ],
+        "footer"	: html_template	[ "footer.html"    ],
+        "container"	: html_page	[f"{page}.html"	]
+    }
diff --git a/app/templates/prime/static/css/style.css b/app/templates/prime/static/css/style.css
new file mode 100644
index 0000000..99a2540
--- /dev/null
+++ b/app/templates/prime/static/css/style.css
@@ -0,0 +1,96 @@
+body {
+    min-height: 100vh;
+    padding-top: 56px;
+}
+
+.navbar {
+    z-index: 1030; /* Ensure the navbar is above other elements */
+}
+
+.sidebar {
+    height: calc(100vh - 56px); /* 56px is the height of the navbar */
+    position: fixed;
+    top: 56px; /* Offset by the navbar height */
+    left: 0;
+    width: 250px;
+    background-color: #343a40;
+    color: white;
+    z-index: 1020; /* Lower than navbar to stay behind it */
+    transition: transform 0.3s ease-in-out;
+    overflow-y: auto; /* Make sidebar scrollable */
+}
+
+.sidebar.minimized {
+    transform: translateX(-100%);
+}
+
+.content {
+    margin-left: 250px;
+    padding-bottom: 20px;
+    transition: margin-left 0.3s ease-in-out;
+}
+
+.content.full-width {
+    margin-left: 0;
+}
+
+.footer {
+    background-color: #f8f9fa;
+    padding-top: 5px;
+    text-align: center;
+    margin-left: 250px;
+    transition: margin-left 0.3s ease-in-out;
+    z-index: 1010;
+}
+
+.footer.full-width {
+    margin-left: 0;
+}
+
+.profile-image {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.sidebar-toggle {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    background-color: #343a40;
+    color: white;
+    border: none;
+    width: 100px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 1040; /* Above the sidebar and navbar */
+    padding: 5px;
+    border-radius: 8px; /* Rounded corners */
+}
+
+.sidebar-toggle span {
+    margin-left: 5px;
+}
+
+@media (max-width: 768px) {
+    .sidebar {
+        transform: translateX(-100%);
+    }
+
+    .sidebar.show {
+        transform: translateX(0);
+    }
+
+    .content {
+        margin-left: 0;
+    }
+
+    .footer {
+        width: 100%;
+        margin-left: 0;
+    }
+}
diff --git a/app/templates/prime/static/img/no-profile-donut.png b/app/templates/prime/static/img/no-profile-donut.png
new file mode 100644
index 0000000..df4edf5
Binary files /dev/null and b/app/templates/prime/static/img/no-profile-donut.png differ