diff --git a/application/controllers/Main.php b/application/controllers/Main.php
index cde34be..0299dab 100755
--- a/application/controllers/Main.php
+++ b/application/controllers/Main.php
@@ -1,5 +1,5 @@
 <?php
-defined('BASEPATH') OR exit('No direct script access allowed');
+defined( 'BASEPATH' ) OR exit( 'No direct script access allowed' );
 
 class Main extends MY_Controller {
 
@@ -8,17 +8,17 @@ class Main extends MY_Controller {
         parent::__construct();
     }
 
-	public function index()
-	{
-	    if( AUTHENTICATED == FALSE ) return $this->showLoginPage();
+    public function index()
+    {
+        if ( AUTHENTICATED == FALSE ) return $this->showLoginPage();
 
-	    $pages = Page::getPages();
+        $pages = Page::getPages( $this->user );
 
-		$this->load->view('main_view', ['pages'=>$pages]);
-	}
+        $this->load->view( 'main_view', ['pages' => $pages] );
+    }
 
     private function showLoginPage()
     {
-        $this->load->view('pages/login/login_view');
-	}
+        $this->load->view( 'pages/login/login_view' );
+    }
 }
diff --git a/application/controllers/Menu.php b/application/controllers/Menu.php
index 4b9bebf..d3c60d2 100644
--- a/application/controllers/Menu.php
+++ b/application/controllers/Menu.php
@@ -15,7 +15,9 @@ class Menu extends MY_Controller {
 
     public function getAppPages()
     {
-        $appPages = Page
+        $appPages = Page::getAppPages( $this->user );
+
+        $this->json( $appPages );
     }
 
 }
\ No newline at end of file
diff --git a/application/controllers/beheer/RolesController.php b/application/controllers/beheer/RolesController.php
new file mode 100644
index 0000000..db824f2
--- /dev/null
+++ b/application/controllers/beheer/RolesController.php
@@ -0,0 +1,34 @@
+<?php
+/**
+ * Created by Pensare Software.
+ * User: Theo Weijmer
+ * Date: 25/12/2017
+ * Time: 17:06
+ */
+
+class RolesController extends MY_Controller {
+
+    public function __construct()
+    {
+        parent::__construct();
+
+        $models = [];
+        $libraries = [];
+
+        $this->load->model( $models );
+        $this->load->library( $libraries );
+    }
+
+    public function index()
+    {
+
+    }
+
+    public function getAllRoles( $archive = 'F' )
+    {
+        $roles = Role::getAllRoles( $archive );
+
+        $this->json( $roles );
+    }
+
+}
\ No newline at end of file
diff --git a/application/controllers/beheer/usersController.php b/application/controllers/beheer/usersController.php
new file mode 100644
index 0000000..706b702
--- /dev/null
+++ b/application/controllers/beheer/usersController.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * Created by Pensare Software.
+ * User: Theo Weijmer
+ * Date: 25/12/2017
+ * Time: 10:11
+ */
+
+class usersController extends MY_Controller {
+
+    public function __construct()
+    {
+        parent::__construct();
+
+        $models = [];
+        $libraries = [];
+
+        $this->load->model( $models );
+        $this->load->library( $libraries );
+    }
+
+    public function index()
+    {
+
+    }
+
+    public function getAllUsers( $archive = 'F' )
+    {
+        $users = User::getAllUsers( $archive );
+
+        $this->json( $users );
+    }
+}
\ No newline at end of file
diff --git a/application/core/MY_Controller.php b/application/core/MY_Controller.php
index 31e6b32..11a0b8f 100644
--- a/application/core/MY_Controller.php
+++ b/application/core/MY_Controller.php
@@ -9,6 +9,7 @@
 class MY_Controller extends CI_Controller {
 
     public $authenticated;
+    public $user;
 
     public function __construct()
     {
@@ -22,20 +23,22 @@ class MY_Controller extends CI_Controller {
     private function handle()
     {
         $this->retrieveusersession->handle();
+
+        $this->user = $this->User_model->get( USERID );
     }
 
     function clean_input( $post )
     {
         $value = $this->input->input_stream( $post, TRUE );
 
-        $denulledValue = str_replace( 'null', '', $value);
+        $denulledValue = str_replace( 'null', '', $value );
 
         return $denulledValue;
     }
 
-    public function json($data)
+    public function json( $data )
     {
-        echo json_encode($data);
+        echo json_encode( $data );
     }
 
 }
\ No newline at end of file
diff --git a/application/models/eloquent/BaseModel.php b/application/models/eloquent/BaseModel.php
new file mode 100644
index 0000000..20612ea
--- /dev/null
+++ b/application/models/eloquent/BaseModel.php
@@ -0,0 +1,55 @@
+<?php
+/**
+ * Created by Pensare Software.
+ * User: Theo Weijmer
+ * Date: 25/12/2017
+ * Time: 10:20
+ */
+
+use \Illuminate\Database\Eloquent\Model as Eloquent;
+
+class BaseModel extends Eloquent {
+
+
+    /**
+     * The name of the "created at" column.
+     *
+     * @var string
+     */
+    const CREATED_AT = 'created_by';
+
+    /**
+     * The name of the "updated at" column.
+     *
+     * @var string
+     */
+    const UPDATED_AT = 'last_update_date';
+
+    protected $guarded = [];
+
+    protected $hidden = ['creation_date', 'last_update_date', 'created_by', 'updated_by'];
+
+    protected static $oldValue;
+
+    public static function boot()
+    {
+        parent::boot();
+
+        static::creating( function ( $model ) {
+            if ( AUTHENTICATED )
+            {
+                $user = User::find(USERID);
+                $model->created_by = $user->username;
+                $model->updated_by = $user->username;
+            }
+        } );
+        static::updating( function ( $model ) {
+            if ( AUTHENTICATED )
+            {
+                $user = User::find(USERID);
+                $model->updated_by = $user->username;
+            }
+        } );
+
+    }
+}
\ No newline at end of file
diff --git a/application/models/eloquent/Page.php b/application/models/eloquent/Page.php
index a265baf..7603b45 100644
--- a/application/models/eloquent/Page.php
+++ b/application/models/eloquent/Page.php
@@ -18,20 +18,28 @@ class Page extends Eloquent {
     }
 
 
-    public static function getPages($user)
+    public static function getPages( $user )
     {
-        $pages = Page::whereRaw( 'id = page_id AND ' )
-            ->with( ['subpages' => function($q){
-                $q->whereRaw('id != page_id');
-            }] )
+        $pages = Page::whereRaw( 'id = page_id' )
+            ->with( [
+                'subpages' => function ( $q ) use ( $user ) {
+                    $q->whereRaw(
+                        "id != page_id AND ((SELECT {$user->role} & pagelevel) != 0 OR pagelevel = 0)" );
+                }] )
             ->get();
 
         return $pages;
     }
 
-    public static function getAppPages()
+    public static function getAppPages( $user )
     {
-        $appPages = Page::whereRaw
+        $appPages = Page::select( 'id', 'pageurl' )
+            ->whereAppPage( 'T' )
+            ->whereRaw(
+                "((SELECT {$user->role} & pagelevel) != 0 OR pagelevel = 0)" )
+            ->get();
+
+        return $appPages;
     }
 
 
diff --git a/application/models/eloquent/Role.php b/application/models/eloquent/Role.php
new file mode 100644
index 0000000..06e585a
--- /dev/null
+++ b/application/models/eloquent/Role.php
@@ -0,0 +1,46 @@
+<?php
+/**
+ * Created by Pensare Software.
+ * User: Theo Weijmer
+ * Date: 25/12/2017
+ * Time: 17:07
+ */
+
+class Role extends BaseModel {
+
+    protected $table = "roles";
+
+    public function user()
+    {
+        return $this->hasOne( 'User', 'role', 'rolelevel' );
+    }
+
+    public static function getAllRoles( $archive )
+    {
+        $roleHierarchy = Role::getUserroleHierachy();
+
+        $roles = Role::orderBy( 'rolehierarchy' )
+            ->where( 'rolehierarchy', '>=', $roleHierarchy );
+
+        if ( $archive == 'F' ) $roles = $roles->whereArchive( 'F' );
+
+        $roles = $roles->get();
+
+        return $roles;
+    }
+
+    public static function getUserroleHierachy()
+    {
+        $userrole = User::getUserRoleHierarchy();
+
+        if( $userrole == 0 ) return 0;
+
+        $roleHierarchy = Role::whereRolelevel($userrole)
+            ->first()
+            ->rolehierarchy;
+
+        return $roleHierarchy;
+    }
+
+
+}
\ No newline at end of file
diff --git a/application/models/eloquent/User.php b/application/models/eloquent/User.php
index 30bea4f..af24183 100644
--- a/application/models/eloquent/User.php
+++ b/application/models/eloquent/User.php
@@ -7,12 +7,43 @@
  */
 
 
-use \Illuminate\Database\Eloquent\Model as Eloquent;
-
-class User  extends Eloquent {
+class User extends BaseModel {
 
     protected $table = "users";
 
+    public function role()
+    {
+        return $this->belongsTo( 'Role', 'level', 'rolelevel' );
+    }
+
+    public static function getAllUsers( $archive )
+    {
+        $users = User::orderBy( 'lastname' );
+
+        if ( $archive == 'F' ) $users = $users->whereArchive( 'F' );
+
+        $users = $users->get();
+
+        return $users;
+    }
+
+    public static function getUserRoleHierarchy()
+    {
+        $userrole = User::find( USERID )->role;
+
+        return $userrole;
+    }
+
+    public static function checkUsername( $username )
+    {
+        $username = strtoupper( $username );
+
+        $user = User::whereRaw( "UCASE(username) = {$username}" );
+
+        if ( $user->count() == 0 ) return FALSE;
+
+        return TRUE;
+    }
 
 
 }
\ No newline at end of file
diff --git a/application/views/main_view.php b/application/views/main_view.php
index 88f651f..9e3a022 100644
--- a/application/views/main_view.php
+++ b/application/views/main_view.php
@@ -9,6 +9,8 @@
 <meta name="description" content="bootstrap admin template">
 <meta name="author" content="">
 
+<link rel="icon" href="css/images/dbo-01-80x80.png" type="image/png">
+
 <title>** De Beleidsonderzoeker **</title>
 
 <?php $this->load->view( 'partials/_css' ); ?>
@@ -20,28 +22,33 @@
 </script>
 </head>
 <body id="dbois-app">
+<!-- ko stopBinding: true -->
+<?php $this->load->view('partials/_modals'); ?>
+<!-- /ko -->
+
 <?php $this->load->view( 'partials/_navbar-left' ); ?>
 
-<?php foreach ( $pages as $page ): ?>
-    <?php if ( count( $page->subpages ) == 0 ): ?>
-        <!-- ko stopBinding: true -->
-        <div data-bind="fadeVisible: <?= $pageurl ?>">
-            <?php $this->load->view( 'partials/_content', ['pageurl' => $page->pageurl] ); ?>
-        </div>
-        <!-- /ko -->
-    <?php else: ?>
-        <?php foreach ( $page->subpages as $subpage ): ?>
-            <!-- ko stopBinding: true -->
-            <div data-bind="fadeVisible: <?= $pageurl ?>">
-                <?php $this->load->view( 'partials/_content', ['pageurl' => $subpage->pageurl] ); ?>
+<div id="main-content" data-bind="fadeVisible:initialized" style="display:none">
+    <?php foreach ( $pages as $page ): ?>
+        <?php if ( count( $page->subpages ) == 0 ): ?>
+            <?php if($page->app_page == 'F') continue; ?>
+            <div data-bind="visible: <?= $page->pageurl ?>">
+                <!-- ko stopBinding: true -->
+                <?php $this->load->view( 'pages/content', ['pageurl' => $page->pageurl] ); ?>
+                <!-- /ko -->
             </div>
-            <!-- /ko -->
-        <?php endforeach; ?>
-    <?php endif; ?>
-<?php endforeach; ?>
+        <?php else: ?>
+            <?php foreach ( $page->subpages as $subpage ): ?>
+                <div data-bind="visible: <?= $subpage->pageurl ?>">
+                    <!-- ko stopBinding: true -->
+                    <?php $this->load->view( 'pages/content', ['pageurl' => $subpage->pageurl] ); ?>
+                    <!-- /ko -->
+                </div>
+            <?php endforeach; ?>
+        <?php endif; ?>
+    <?php endforeach; ?>
 
-
-
-<?php $this->load->view( 'partials/_js' ); ?>
+    <?php $this->load->view( 'partials/_js' ); ?>
+</div>
 </body>
 </html>
diff --git a/application/views/modals/user_modal.php b/application/views/modals/user_modal.php
new file mode 100644
index 0000000..d8549c7
--- /dev/null
+++ b/application/views/modals/user_modal.php
@@ -0,0 +1,141 @@
+<div class="modal modal-fade-in-scale-up modal-primary" tabindex="-1" id="user-modal">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">toevoegen / wijzigen gebruiker</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="row">
+                    <div class="col-xl-12">
+                        <div role="form" class="form-horizontal">
+                            <div class="form-group row">
+                                <label class="col-xl-3 form-control-label">
+                                    voornaam
+                                </label>
+                                <div class="col-xl-9">
+                                    <div class="input-group input-group-icon">
+                                        <span class="input-group-addon">
+                                            <i class="icon fa-user"></i>
+                                        </span>
+                                        <input type="text"
+                                               placeholder="voornaam"
+                                               class="form-control"
+                                               data-bind="textInput:firstname,
+                                                            css:{'is-invalid':firstnameInvalid}">
+                                    </div>
+                                    <small class="invalid-feedback"
+                                           data-bind="style:{display: firstnameInvalid() ? 'block' : 'none'}">
+                                        voer een voornaam in<span data-bind="text:firstnameInvalid"></span>
+                                    </small>
+                                </div>
+                            </div>
+                            <div class="form-group row">
+                                <label class="col-xl-3 form-control-label">
+                                    tussenvoegsel
+                                </label>
+                                <div class="col-xl-9">
+                                    <div class="input-group input-group-icon">
+                                        <span class="input-group-addon">
+                                            <i class="icon fa-user"></i>
+                                        </span>
+                                        <input type="text"
+                                               placeholder="tussenvoegsel"
+                                               class="form-control"
+                                               data-bind="textInput:middlename">
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="form-group row">
+                                <label class="col-xl-3 form-control-label">
+                                    achternaam
+                                </label>
+                                <div class="col-xl-9">
+                                    <div class="input-group input-group-icon">
+                                        <span class="input-group-addon">
+                                            <i class="icon fa-user"></i>
+                                        </span>
+                                        <input type="text"
+                                               placeholder="achternaam"
+                                               class="form-control"
+                                               data-bind="textInput:lastname,
+                                                            css:{'is-invalid':lastnameInvalid}">
+                                    </div>
+                                    <small class="invalid-feedback"
+                                           data-bind="style:{display: lastnameInvalid() ? 'block' : 'none'}">
+                                        voer een achternaam in<span data-bind="text:lastnameInvalid"></span>
+                                    </small>
+                                </div>
+                            </div>
+                            <div class="form-group row">
+                                <label class="col-xl-3 form-control-label">
+                                    gebruikersnaam
+                                </label>
+                                <div class="col-xl-9">
+                                    <div class="input-group input-group-icon">
+                                        <span class="input-group-addon">
+                                            <i class="icon fa-user"></i>
+                                        </span>
+                                        <input type="text"
+                                               placeholder="gebruikersnaam"
+                                               class="form-control"
+                                               data-bind="textInput:username,
+                                                            css:{'is-invalid':usernameInvalid}">
+                                    </div>
+                                    <small class="invalid-feedback"
+                                           data-bind="style:{display: usernameInvalid() ? 'block' : 'none'}">
+                                        voer een gebruikernaam in<span data-bind="text:username"></span>
+                                    </small>
+                                </div>
+                            </div>
+                            <div class="form-group row">
+                                <label class="col-xl-3 form-control-label">
+                                    email
+                                </label>
+                                <div class="col-xl-9">
+                                    <div class="input-group input-group-icon">
+                                        <span class="input-group-addon">
+                                            <i class="icon fa-envelope"></i>
+                                        </span>
+                                        <input type="email"
+                                               placeholder="email"
+                                               class="form-control"
+                                               data-bind="textInput:email,
+                                                            css:{'is-invalid':emailInvalid}">
+                                    </div>
+                                    <small class="invalid-feedback"
+                                           data-bind="style:{display: emailInvalid() ? 'block' : 'none'}">
+                                        email ongeldig<span data-bind="text:emailInvalid"></span>
+                                    </small>
+                                </div>
+                            </div>
+                            <div class="form-group row">
+                                <div class="col-xl-3">&nbsp;</div>
+                                <!-- ko foreach:roles -->
+                                <div class="radio-inline">
+                                    <i class="icon fa-circle-o blueish"
+                                       style="cursor:pointer;"
+                                       data-bind="visible:$root.role() != rolelevel,
+                                                    click:$root.setRole"></i>
+                                    <i class="icon fa-check-circle-o greenish"
+                                       data-bind="visible:$root.role() == rolelevel"></i>
+                                    <label data-bind="text:rolename">
+                                    </label>
+                                </div>
+                                <!-- /ko -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button"
+                        class="btn btn-success"
+                        data-bind="visible:formValid(), click:saveUser">opslaan</button>
+                <button type="button" class="btn btn-warning" data-dismiss="modal">annuleren</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/application/views/pages/content.php b/application/views/pages/content.php
new file mode 100644
index 0000000..5efd6cb
--- /dev/null
+++ b/application/views/pages/content.php
@@ -0,0 +1,3 @@
+<div class="page" id="<?= $pageurl ?>">
+    <?php $this->load->view( 'pages/' . strtolower( $pageurl ) . '_view' ); ?>
+</div>
\ No newline at end of file
diff --git a/application/views/pages/dashboard_view.php b/application/views/pages/dashboard_view.php
new file mode 100644
index 0000000..9a9b30b
--- /dev/null
+++ b/application/views/pages/dashboard_view.php
@@ -0,0 +1 @@
+<h1>DASHBOARD</h1>
\ No newline at end of file
diff --git a/application/views/pages/login/dashboard_view.php b/application/views/pages/login/dashboard_view.php
new file mode 100644
index 0000000..9a9b30b
--- /dev/null
+++ b/application/views/pages/login/dashboard_view.php
@@ -0,0 +1 @@
+<h1>DASHBOARD</h1>
\ No newline at end of file
diff --git a/application/views/pages/login/login_view.php b/application/views/pages/login/login_view.php
index 9f102d6..b4943c1 100644
--- a/application/views/pages/login/login_view.php
+++ b/application/views/pages/login/login_view.php
@@ -9,8 +9,7 @@
 
     <title>Login V3 | Remark Admin Template</title>
 
-    <link rel="apple-touch-icon" href="css/images/apple-touch-icon.png">
-    <link rel="shortcut icon" href="css/images/favicon.ico">
+    <link rel="icon" href="css/images/dbo-01-80x80.png" type="image/png">
 
     <!-- Stylesheets -->
     <link rel="stylesheet" href="css/vendor/bootstrap.min.css">
diff --git a/application/views/pages/projects_view.php b/application/views/pages/projects_view.php
new file mode 100644
index 0000000..2c10887
--- /dev/null
+++ b/application/views/pages/projects_view.php
@@ -0,0 +1 @@
+<h1>projects</h1>
\ No newline at end of file
diff --git a/application/views/pages/users_view.php b/application/views/pages/users_view.php
new file mode 100644
index 0000000..5122fde
--- /dev/null
+++ b/application/views/pages/users_view.php
@@ -0,0 +1,44 @@
+<div class="container">
+    <div class="row">
+        <div class="col-xl-8">
+            <table class="table table-sm">
+                <thead>
+                <tr>
+                    <th>voornaam</th>
+                    <th>achternaam</th>
+                    <th>tussenvoegsel</th>
+                    <th>gebruikersnaam</th>
+                    <th>email</th>
+                    <th>rol</th>
+                    <th>&nbsp;</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr data-bind="foreach:users">
+                    <td><span data-bind="text:lastname"></span></td>
+                    <td><span data-bind="text:firstname"></span></td>
+                    <td><span data-bind="text:middlename"></span></td>
+                    <td><span data-bind="text:username"</td>
+                    <td><span data-bind="text:email"></span></td>
+                    <td><span data-bind=""></span></td>
+                    <td>
+                        <i class="icon fa-edit greenish" title="wijzig"></i>
+                        <i class="icon fa-archive blueish" title="archiveer"></i>
+                        <i class="icon fa-trash redish" title="verwijder"></i>
+                    </td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="7">
+                        <button class="btn btn-primary btn-round btn-sm" data-bind="click:newUser">
+                            nieuwe gebruiker
+                        </button>
+                    </td>
+                </tr>
+                </tfoot>
+
+            </table>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/application/views/partials/_content.php b/application/views/partials/_content.php
deleted file mode 100644
index cf355f2..0000000
--- a/application/views/partials/_content.php
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="page" id="<?= $pageurl?>">
-    <h1><?= $pageurl?></h1>
-</div>
\ No newline at end of file
diff --git a/application/views/partials/_css.php b/application/views/partials/_css.php
index ea3b354..efe51c1 100644
--- a/application/views/partials/_css.php
+++ b/application/views/partials/_css.php
@@ -3,7 +3,9 @@
 
 <!-- Stylesheets VENDOR -->
 <link rel="stylesheet" href="css/vendor/bootstrap.min.css">
-<link rel="stylesheet" href="css/vendor/bootstrap-extend.min.css">
+<link rel="stylesheet" href="css/vendor/bootstrap-extend.css">
+<link rel="stylesheet" href="fonts/font-awesome/font-awesome.min.css">
+
 <link rel="stylesheet" href="css/vendor/site.min.css">
 
 <link rel="stylesheet" href="vendor/plugins/animsition/animsition.css">
@@ -15,6 +17,7 @@
 
 <!-- Stylesheets Pensare -->
 <link rel="stylesheet" href="css/correction.css">
+<link rel="stylesheet" href="css/main.css">
 
 <!-- End Stylesheets Pensare -->
     
\ No newline at end of file
diff --git a/application/views/partials/_js.php b/application/views/partials/_js.php
index f6c1cf8..78ee7a4 100644
--- a/application/views/partials/_js.php
+++ b/application/views/partials/_js.php
@@ -49,4 +49,15 @@
 
 <!-- DBOIS -->
 
-<script src="js/lib/main.js"></script>
\ No newline at end of file
+<script src="js/vendor/Knockout.min.js"></script>
+
+<script src="js/lib/main.js"></script>
+<script src="js/lib/modules/menuModule.js"></script>
+<script src="js/lib/modules/beheer/usersModule.js"></script>
+<script src="js/lib/modules/modals/userModal.js"></script>
+
+
+<script src="js/lib/dataservices/pageDataservice.js"></script>
+<script src="js/lib/dataservices/userDataservice.js"></script>
+<script src="js/lib/dataservices/rolesDataservice.js"></script>
+<script src="js/lib/helpers.js"></script>
\ No newline at end of file
diff --git a/application/views/partials/_modals.php b/application/views/partials/_modals.php
new file mode 100644
index 0000000..039d929
--- /dev/null
+++ b/application/views/partials/_modals.php
@@ -0,0 +1,6 @@
+<?php
+
+$this->load->view('modals/user_modal');
+
+?>
+
diff --git a/application/views/partials/_navbar-left.php b/application/views/partials/_navbar-left.php
index 291923e..af72c85 100644
--- a/application/views/partials/_navbar-left.php
+++ b/application/views/partials/_navbar-left.php
@@ -6,7 +6,7 @@
 
         <?php foreach ( $pages as $page ): ?>
             <?php if ( count( $page->subpages ) == 0 ): ?>
-                <li class="site-menu-item" data-bind="click:setPage.bind($data, <?= $page->pageurl ?>)">
+                <li class="site-menu-item" data-bind="click:setPage.bind($data, '<?= $page->pageurl ?>')">
                     <a href="#"><?= $page->pagename ?></a>
                 </li>
             <?php else: ?>
@@ -14,7 +14,7 @@
                     <a href="#"><?= $page->pagename ?></a>
                     <ul class="site-menu-sub">
                         <?php foreach ( $page->subpages as $subpage ): ?>
-                            <li data-bind="click:setPage.bind($data, <?= $subpage->pageurl ?>)">
+                            <li data-bind="click:setPage.bind($data, '<?= $subpage->pageurl ?>')">
                                 <a><?= $subpage->pagename ?></a>
                             </li>
                         <?php endforeach; ?>
diff --git a/public/css/correction.css b/public/css/correction.css
index c95986e..177a7dc 100644
--- a/public/css/correction.css
+++ b/public/css/correction.css
@@ -1,5 +1,9 @@
 body{
     padding-top:0;
+    /*font-size:12px;*/
+}
+.page{
+    background-color: #fff;
 }
 .site-menubar{
     top:0;
diff --git a/public/css/images/dbo-01-80x80.png b/public/css/images/dbo-01-80x80.png
new file mode 100644
index 0000000..48320b7
Binary files /dev/null and b/public/css/images/dbo-01-80x80.png differ
diff --git a/public/css/main.css b/public/css/main.css
new file mode 100644
index 0000000..b3a8391
--- /dev/null
+++ b/public/css/main.css
@@ -0,0 +1,9 @@
+.redish{
+    color:#F2353C;
+}
+.blueish{
+    color:#247CF0;
+}
+.greenish{
+    color:#5A9101;
+}
\ No newline at end of file
diff --git a/public/js/lib/dataservices.js b/public/js/lib/dataservices.js
deleted file mode 100644
index dcbb105..0000000
--- a/public/js/lib/dataservices.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Created by Pensare Software.
- * User: Theo Weijmer
- * Date: 22/12/2017
- * Time: 13:32
- */
\ No newline at end of file
diff --git a/public/js/lib/dataservices/pageDataservice.js b/public/js/lib/dataservices/pageDataservice.js
new file mode 100644
index 0000000..d449343
--- /dev/null
+++ b/public/js/lib/dataservices/pageDataservice.js
@@ -0,0 +1,18 @@
+/**
+ * Created by Pensare Software.
+ * User: Theo Weijmer
+ * Date: 22/12/2017
+ * Time: 13:32
+ */
+
+dbo.pageDataservice = {
+
+    getAppPages : function(callback){
+        $.getJSON('index.php/menu/getAppPages')
+            .done(function(data){
+                callback(data);
+            });
+    }
+
+};
+
diff --git a/public/js/lib/dataservices/rolesDataservice.js b/public/js/lib/dataservices/rolesDataservice.js
new file mode 100644
index 0000000..51f1f3b
--- /dev/null
+++ b/public/js/lib/dataservices/rolesDataservice.js
@@ -0,0 +1,23 @@
+/**
+ * Created by Pensare Software.
+ * User: Theo Weijmer
+ * Date: 25/12/2017
+ * Time: 17:11
+ */
+
+dbo.rolesDataservice = {
+
+    roles: false,
+
+    getAllRoles: function ( archive, callback ) {
+        var ds = dbo.rolesDataservice
+        if ( ds.roles ) callback( ds.roles );
+
+        $.getJSON( 'index.php/beheer/rolesController/getAllRoles/' + archive )
+            .done( function ( data ) {
+                ds.roles = data;
+                callback( data );
+            } );
+    }
+
+}
diff --git a/public/js/lib/dataservices/userDataservice.js b/public/js/lib/dataservices/userDataservice.js
new file mode 100644
index 0000000..b423c9e
--- /dev/null
+++ b/public/js/lib/dataservices/userDataservice.js
@@ -0,0 +1,33 @@
+/**
+ * Created by Pensare Software.
+ * User: Theo Weijmer
+ * Date: 25/12/2017
+ * Time: 09:50
+ */
+
+dbo.userDataService = {
+
+    getAllUsers: function ( archive = 'F', callback ) {
+        $.getJSON( 'index.php/beheer/usersController/getAllUsers/' + archive )
+            .done( function ( data ) {
+                callback( data );
+            } );
+    },
+
+    getUser: function ( userID, callback ) {
+        $.getJSON( 'index.php/beheer/usersController/getUser/' + userID )
+            .done( function ( data ) {
+                callback( data );
+            } );
+    },
+
+    checkUsername: function ( username, callback ) {
+        $.post( 'index.php/beheer/userController/checkUsername', 'json' )
+            .done( function ( data ) {
+                console.log( data );
+                callback( data );
+            } )
+    }
+
+
+}
\ No newline at end of file
diff --git a/public/js/lib/helpers.js b/public/js/lib/helpers.js
new file mode 100644
index 0000000..03d6190
--- /dev/null
+++ b/public/js/lib/helpers.js
@@ -0,0 +1,13 @@
+/**
+ * Created by Pensare Software.
+ * User: Theo Weijmer
+ * Date: 25/12/2017
+ * Time: 19:01
+ */
+
+dbo.helpers = {
+    validateEmail: function ( email ) {
+        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return re.test( email.toLowerCase() );
+    }
+}
\ No newline at end of file
diff --git a/public/js/lib/main.js b/public/js/lib/main.js
index ee68d7e..faaabe4 100644
--- a/public/js/lib/main.js
+++ b/public/js/lib/main.js
@@ -20,16 +20,14 @@ $(function(){
 
 
     ko.bindingHandlers.fadeVisible = {
-        init  : function ( element, valueAccessor ) {
-
-            // Initially set the element to be instantly visible/hidden depending on the value
-            var value = valueAccessor();
-            $( element ).toggle( ko.unwrap( value ) ); // Use "unwrapObservable" so we can handle values that may or may not be observable
+        init: function(element, valueAccessor) {
+            var shouldDisplay = valueAccessor();
+            $(element).toggle(shouldDisplay);
         },
-        update: function ( element, valueAccessor ) {
-            // Whenever the value subsequently changes, slowly fade the element in or out
-            var value = valueAccessor();
-            ko.unwrap( value ) ? $( element ).fadeIn( 500 ) : $( element ).fadeOut( 500 );
+        update: function(element, valueAccessor) {
+            // On update, fade in/out
+            var shouldDisplay = valueAccessor();
+            shouldDisplay ? $(element).fadeIn(750) : $(element).fadeOut(750);
         }
     };
 
diff --git a/public/js/lib/modules/beheer/usersModule.js b/public/js/lib/modules/beheer/usersModule.js
new file mode 100644
index 0000000..699bb29
--- /dev/null
+++ b/public/js/lib/modules/beheer/usersModule.js
@@ -0,0 +1,46 @@
+/**
+ * Created by Pensare Software.
+ * User: Theo Weijmer
+ * Date: 25/12/2017
+ * Time: 09:49
+ */
+
+
+dbo.usersInit = function () {
+
+    if ( dbo.usersModel !== undefined ) {
+
+    } else {
+        dbo.usersModel = {
+
+            users: ko.observableArray( [] ),
+            user : ko.observable(),
+            roles: ko.observableArray( [] ),
+
+            init: function () {
+                var vm = dbo.usersModel;
+
+                dbo.userDataService.getAllUsers( 'F', function ( data ) {
+                    vm.users( data );
+                } );
+
+                dbo.rolesDataservice.getAllRoles( 'F', function ( data ) {
+                    vm.roles( data );
+                } );
+            },
+
+            newUser: function () {
+                $( "#user-modal" ).modal( 'show' );
+
+                dbo.editUserModal.newUser();
+            }
+
+
+        };
+
+        dbo.usersModel.init();
+
+        ko.applyBindings( dbo.usersModel, document.getElementById( 'USERS' ) );
+    }
+
+}
\ No newline at end of file
diff --git a/public/js/lib/modules/login/loginModule.js b/public/js/lib/modules/login/loginModule.js
index 0af2c8d..043ac6d 100644
--- a/public/js/lib/modules/login/loginModule.js
+++ b/public/js/lib/modules/login/loginModule.js
@@ -17,7 +17,7 @@ $( function () {
             dbo.loginService.login();
         }
     }
-console.log( 'text' );
+
     ko.applyBindings( dbo.loginModel, document.getElementById( "login-form" ) );
 } );
 
diff --git a/public/js/lib/modules/menuModule.js b/public/js/lib/modules/menuModule.js
index 598d17b..28051ac 100644
--- a/public/js/lib/modules/menuModule.js
+++ b/public/js/lib/modules/menuModule.js
@@ -10,15 +10,41 @@ $( function () {
 
     dbo.menuModel = {
 
-        init : function(){
+        pages      : ko.observable(),
+        initialized: ko.observable( false ),
 
+
+        init: function () {
+            var vm = dbo.menuModel;
+            dbo.pageDataservice.getAppPages( function ( data ) {
+                vm.pages = data;
+                //create for each page an observable
+                $.each( data, function ( i, p ) {
+                    vm[p.pageurl] = ko.observable( false );
+                } );
+
+                // first page will be visible
+                vm[data[0].pageurl]( true );
+
+                ko.applyBindings( dbo.menuModel, document.getElementById( "dbois-app" ) );
+
+                vm.initialized( true );
+            } );
+        },
+
+        setPage: function ( page ) {
+            var vm = dbo.menuModel;
+
+            $.each( vm.pages, function ( i, p ) {
+                vm[p.pageurl]( false );
+            } );
+            vm[page]( true );
+
+            var func = page.toLowerCase() + 'Init';
+            window.dbo[func]();
         }
-
-
     }
 
     dbo.menuModel.init();
-
-    ko.applyBindings(dbo.menuModel, document.getElementById("dbois-app"));
-
 } );
+
diff --git a/public/js/lib/modules/modals/userModal.js b/public/js/lib/modules/modals/userModal.js
new file mode 100644
index 0000000..e9327db
--- /dev/null
+++ b/public/js/lib/modules/modals/userModal.js
@@ -0,0 +1,118 @@
+/**
+ * Created by Pensare Software.
+ * User: Theo Weijmer
+ * Date: 25/12/2017
+ * Time: 17:32
+ */
+
+$( function () {
+    dbo.editUserModal = {
+
+        id        : null,
+        roles     : ko.observableArray( [] ),
+        firstname : ko.observable(),
+        lastname  : ko.observable(),
+        middlename: ko.observable(),
+        username  : ko.observable(),
+        email     : ko.observable(),
+        role      : ko.observable(),
+
+        init: function () {
+            var vm = dbo.editUserModal;
+
+            dbo.rolesDataservice.getAllRoles( 'F', function ( data ) {
+                vm.roles( data );
+            } );
+        },
+
+        newUser: function () {
+            var vm = dbo.editUserModal;
+
+            vm.setUser();
+        },
+
+        setRole: function () {
+            var vm = dbo.editUserModal;
+
+            vm.role( this.rolelevel );
+        },
+
+        saveUser: function () {
+            var vm = dbo.editUserModal;
+
+            if ( vm.formValid == false ) return;
+
+            dbo.userDataService.checkUsername()
+
+            var submitDATA = {
+                firstname : vm.firstname(),
+                middlename: vm.middlename(),
+                lastname  : vm.lastname(),
+                username  : vm.username(),
+                email     : vm.email(),
+                role      : vm.role()
+            }
+
+
+
+
+        },
+
+        setUser: function ( user = false ) {
+            var vm = dbo.editUserModal;
+
+            vm.id = user.id || 0;
+            vm.vm.firstname( user.firstname || '' );
+            vm.lastname( user.firstname || '' );
+            vm.middlename( user.firstname || '' );
+            vm.username( user.username || '' );
+            vm.email( user.email || '' );
+            vm.role( user.role || null );
+        }
+    };
+
+    dbo.editUserModal.init();
+
+    dbo.editUserModal.lastnameInvalid = ko.pureComputed( function () {
+        if ( !this.lastname() ) return true;
+        console.log( this.lastname() );
+
+        if ( this.lastname().length < 2 ) return true;
+
+        return false;
+    }, dbo.editUserModal );
+
+    dbo.editUserModal.firstnameInvalid = ko.pureComputed( function () {
+        if ( !this.firstname() ) return true;
+
+        if ( this.firstname().length < 2 ) return true;
+
+        return false;
+    }, dbo.editUserModal );
+
+    dbo.editUserModal.usernameInvalid = ko.pureComputed( function () {
+        if ( !this.username() ) return true;
+
+        if ( this.username().length < 4 ) return true;
+
+        return false;
+    }, dbo.editUserModal );
+
+    dbo.editUserModal.emailInvalid = ko.pureComputed( function () {
+        if ( !this.email() ) return true;
+
+        return !dbo.helpers.validateEmail( this.email() );
+    }, dbo.editUserModal );
+
+    dbo.editUserModal.formValid = ko.pureComputed( function () {
+        if ( this.firstnameInvalid() ) return false;
+        if ( this.lastnameInvalid() ) return false;
+        if ( this.usernameInvalid() ) return false;
+        if ( this.emailInvalid() ) return false;
+
+        return true;
+    }, dbo.editUserModal )
+
+    ko.applyBindings( dbo.editUserModal, document.getElementById( 'user-modal' ) );
+
+} );
\ No newline at end of file
diff --git a/public/js/lib/pageDataservice.js b/public/js/lib/pageDataservice.js
deleted file mode 100644
index 1eb2f1a..0000000
--- a/public/js/lib/pageDataservice.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Created by Pensare Software.
- * User: Theo Weijmer
- * Date: 22/12/2017
- * Time: 13:32
- */
-
-dbo.pageDataservice = {
-
-    $.getJSON('index.php/')
-
-};
-