diff --git a/application/views/modals/partials/_dashboard.php b/application/views/modals/partials/_dashboard.php
new file mode 100644
index 0000000..dcf149f
--- /dev/null
+++ b/application/views/modals/partials/_dashboard.php
@@ -0,0 +1,5 @@
+<div class="tab-content">
+    <div class="tab-pane animation-slide-top active" id="dashboard">
+        <?php $this->load->view( 'modals/partials/_projectdashboard' ); ?>
+    </div>
+</div>
\ No newline at end of file
diff --git a/application/views/modals/partials/_financials.php b/application/views/modals/partials/_financials.php
new file mode 100644
index 0000000..355135d
--- /dev/null
+++ b/application/views/modals/partials/_financials.php
@@ -0,0 +1,19 @@
+<div class="row" data-bind="fadeVisible:customerID()">
+    <!--                        <div class="col-md-5">-->
+    <!--                            --><?php //$this->load->view( 'modals/partials/_projectoffers' ); ?>
+    <!--                        </div>-->
+    <div class="col-md-8">
+        <?php $this->load->view( 'modals/partials/_projectcosts' ); ?>
+    </div>
+    <div class="col-md-4">
+        <?php $this->load->view( 'modals/partials/_reservations' ); ?>
+    </div>
+</div>
+<div class="row">
+    <div class="col-md-8">
+        <?php $this->load->view( 'modals/partials/_invoices' ); ?>
+    </div>
+    <div class="col-md-4">
+        <?php $this->load->view( 'modals/partials/_forecasts' ); ?>
+    </div>
+</div>
\ No newline at end of file
diff --git a/application/views/modals/partials/_projectdashboard.php b/application/views/modals/partials/_projectdashboard.php
index 6fc8f27..4abc35d 100644
--- a/application/views/modals/partials/_projectdashboard.php
+++ b/application/views/modals/partials/_projectdashboard.php
@@ -1,25 +1,23 @@
 <div class="row form-inline">
-    <div class="col-md-3">
+    <div class="col-md-4">
         <div class="form-group row">
             <label class="col-md-3 col-form-label">klant</label>
             <div class="col-md-9">
                 <select class="form-control form-control-sm"
                         data-bind="options:customers,
-                                                        optionsText:'name',
-                                                        optionsValue: 'id',
-                                                        value:customerID,
-                                                        disable:offers().length > 0,
-                                                        optionsCaption:'selecteer klant',
-                                                        event:{change:saveProject},
-                                                        css:{'is-invalid': ! customerID()}"></select>
+                                    optionsText:'name',
+                                    optionsValue: 'id',
+                                    value:customerID,
+                                    disable:offers().length > 0,
+                                    optionsCaption:'selecteer klant',
+                                    event:{change:saveProject},
+                                    css:{'is-invalid': ! customerID()}"></select>
                 <small class="invalid-feedback"
                        data-bind="style:{display: ! customerID() ? 'block' : 'none'}">
                     selecteer een klant
                 </small>
             </div>
         </div>
-    </div>
-    <div class="col-md-3">
         <div class="form-group row">
             <label class="col-md-5 col-form-label">projectleider</label>
             <div class="col-md-7">
@@ -33,8 +31,6 @@
                 </select>
             </div>
         </div>
-    </div>
-    <div class="col-md-3">
         <div class="form-group row">
             <label class="col-md-5 col-form-label">begin project</label>
             <div class="col-md-7">
@@ -52,8 +48,6 @@
                 </div>
             </div>
         </div>
-    </div>
-    <div class="col-md-3">
         <div class="form-group row">
             <label class="col-md-5 col-form-label">eind project</label>
             <div class="col-md-7">
@@ -72,8 +66,6 @@
             </div>
         </div>
     </div>
-</div>
-<div class="row" style="margin-top:10px;">
     <div class="col-md-5">
         <div class="form-group row">
             <label class="col-md-3 form-control-label">omschrijving</label>
@@ -83,39 +75,26 @@
                        data-bind="textInput:projectname, event:{keyup:saveProjectname}"/>
             </div>
         </div>
-    </div>
-    <div class="col-md-3">
         <div class="form-group row">
             <h4 class="form-control-label">eigen omzet:
                 <i class="icon fa-euro"> </i><span data-bind="text:ownRevenue"></span>
             </h4>
         </div>
-    </div>
-    <div class="col-md-3">
         <div class="form-group row">
             <h4 class="form-control-label">overige omzet:
                 <i class="icon fa-euro"> </i><span data-bind="text:otherRevenue"></span>
             </h4>
         </div>
     </div>
-</div>
-<div class="row">
-    <div class="col-md-3">
-        <h3>te besteden uren :<span data-bind="text:(totalBudget() - totalHours())"></span></h3>
-    </div>
-    <div class="col-md-3">
-        <h3></h3>
-    </div>
-</div>
-<div class="row">
-    <div class="col-md-3">
-        <div class="graph-holder">
-            <canvas id="hours-vs-budget" height="300"></canvas>
+
+
+    <div class="form-group row">
+        <div class="col-md-3">
+            <h3>te besteden uren :<span data-bind="text:(totalBudget() - totalHours())"></span></h3>
+        </div>
+        <div class="col-md-3">
+            <h3></h3>
         </div>
     </div>
-    <div class="col-md-4">
-        <div class="graph-holder">
-            <canvas id="invoice-vs-payed" height="300"></canvas>
-        </div>
-    </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/application/views/modals/project_modal.php b/application/views/modals/project_modal.php
index d978197..7dee70b 100644
--- a/application/views/modals/project_modal.php
+++ b/application/views/modals/project_modal.php
@@ -3,37 +3,35 @@
     <div class="container" style="margin-top:15px;padding-top:15px;">
         <div class="nav-tabs-horizontal nav-tabs-animate nav-tab-reverse">
             <ul class="nav nav-tabs nav-tabs-solid">
-                <li class="nav-item" role="presentation">
-                    <a class="nav-link active"
-                       data-toggle="tab"
-                       href="#dashboard">
-                        <i class="icon fa-area-chart"></i>
+                <li class="nav-item"
+                    role="presentation"
+                    data-bind="css:{'active':activeTab()=='DASHBOARD'},
+                                click:setActiveTab.bind($data,'DASHBOARD')">
+                    <a>
+                        <i class="icon fa-hacker-news"></i>
                         algemeen</a>
                 </li>
-                <li class="nav-item" role="presentation">
-                    <a class="nav-link"
-                       data-toggle="tab"
-                       href="#financial"
-                       aria-control="financial"
-                       role="tab">
+                <li class="nav-item"
+                    role="presentation"
+                    data-bind="css:{'active':activeTab()=='FINANCIAL'},
+                                click:setActiveTab.bind($data,'FINANCIAL')">
+                    <a>
                         <i class="icon fa-euro"></i>
                         financieel</a>
                 </li>
-                <li class="nav-item" role="presentation">
-                    <a class="nav-link"
-                       data-toggle="tab"
-                       href="#employees"
-                       aria-control="employees"
-                       role="tab">
+                <li class="nav-item"
+                    role="presentation"
+                    data-bind="css:{'active':activeTab()=='EMPLOYEES'},
+                                click:setActiveTab.bind($data,'EMPLOYEES')">
+                    <a>
                         <i class="icon fa-user-circle"></i>
                         medewerkers</a>
                 </li>
-                <li class="nav-item" role="presentation">
-                    <a class="nav-link"
-                       data-toggle="tab"
-                       href="#files"
-                       aria-control="files"
-                       role="tab">
+                <li class="nav-item"
+                    role="presentation"
+                    data-bind="css:{'active':activeTab()=='FILES'},
+                                click:setActiveTab.bind($data,'FILES')">
+                    <a>
                         <i class="icon fa-files"></i>
                         bestanden en opmerkingen</a>
                 </li>
@@ -42,57 +40,47 @@
                 <h3 style="position:absolute;top:-65px; right:30px; width:350px;">
                     Projectnummer: <span data-bind="text:projectnumber"></span>
                 </h3>
-                <button class="btn btn-danger" data-bind="click:closeProject" style="position:absolute;right:0px;top:-50px">
+                <button class="btn btn-danger" data-bind="click:closeProject"
+                        style="position:absolute;right:0px;top:-50px">
                     sluit
                 </button>
             </div>
-            <div class="tab-content">
-                <div class="tab-pane animation-slide-top active" id="dashboard">
-                    <?php $this->load->view('modals/partials/_projectdashboard'); ?>
-                </div>
-                <div class="tab-pane animation-slide-top" id="financial">
-                    <div class="row" data-bind="fadeVisible:customerID()">
-<!--                        <div class="col-md-5">-->
-<!--                            --><?php //$this->load->view( 'modals/partials/_projectoffers' ); ?>
-<!--                        </div>-->
-                        <div class="col-md-8">
-                            <?php $this->load->view( 'modals/partials/_projectcosts' ); ?>
-                        </div>
-                        <div class="col-md-4">
-                            <?php $this->load->view( 'modals/partials/_reservations' ); ?>
-                        </div>
+            <div class="tab-pane animation-slide-top"
+                 id="dashboard"
+                 data-bind="visible:activeTab()=='DASHBOARD'">
+                <?php $this->load->view( 'modals/partials/_dashboard' ); ?>
+            </div>
+            <div class="tab-pane animation-slide-top"
+                 id="financial"
+                 data-bind="visible:activeTab()=='DASHBOARD'">
+                <?php $this->load->view( 'modals/partials/_financials' ); ?>
+            </div>
+            <div class="tab-pane animation-slide-top"
+                 id="employees"
+                 data-bind="visible:activeTab()=='EMPLOYEES'">
+                <div class="row" data-bind="fadeVisible:customerID()">
+                    <div class="col-md-5" data-bind="fadeVisible:customerID()">
+                        <?php $this->load->view( 'modals/partials/_projectemployees' ); ?>
                     </div>
-                    <div class="row">
-                        <div class="col-md-8">
-                            <?php $this->load->view( 'modals/partials/_invoices' ); ?>
-                        </div>
-                        <div class="col-md-4">
-                            <?php $this->load->view('modals/partials/_forecasts'); ?>
-                        </div>
-                    </div>
-                </div>
-                <div class="tab-pane animation-slide-top" id="employees">
-                    <div class="row" data-bind="fadeVisible:customerID()">
-                        <div class="col-md-5" data-bind="fadeVisible:customerID()">
-                            <?php $this->load->view( 'modals/partials/_projectemployees' ); ?>
-                        </div>
-                        <div class="col-md-7">
-                            <?php $this->load->view( 'modals/partials/_hours' ); ?>
-                        </div>
+                    <div class="col-md-7">
+                        <?php $this->load->view( 'modals/partials/_hours' ); ?>
                     </div>
                 </div>
+            </div>
 
-                <div class="tab-pane animation-slide-top" id="files">
-                    <div class="row" data-bind="fadeVisible:customerID()">
-                        <div class="col-md-4">
-                            <?php $this->load->view( 'modals/partials/_projectfiles' ); ?>
-                        </div>
-                        <div class="col-md-4">
-                            <?php $this->load->view( 'modals/partials/_projectcomments' ); ?>
-                        </div>
+            <div class="tab-pane animation-slide-top"
+                 id="files"
+                 data-bind="visible:activeTab()=='FILES'">
+                <div class="row" data-bind="fadeVisible:customerID()">
+                    <div class="col-md-4">
+                        <?php $this->load->view( 'modals/partials/_projectfiles' ); ?>
+                    </div>
+                    <div class="col-md-4">
+                        <?php $this->load->view( 'modals/partials/_projectcomments' ); ?>
                     </div>
                 </div>
             </div>
         </div>
     </div>
+</div>
 </div>
\ No newline at end of file
diff --git a/public/js/lib/modals/projectModal.js b/public/js/lib/modals/projectModal.js
index c6ffbf8..16bde54 100644
--- a/public/js/lib/modals/projectModal.js
+++ b/public/js/lib/modals/projectModal.js
@@ -46,6 +46,7 @@ $( function () {
         totalForecast     : ko.observable(),
         documents         : ko.observableArray( [] ),
         comments          : ko.observableArray( [] ),
+        activeTab         : ko.observable(),
 
         init: function () {
             var vm = dbo.editProjectModal;
@@ -68,6 +69,12 @@ $( function () {
             } );
         },
 
+        setActiveTab: function ( tab ) {
+            var vm = dbo.editProjectModal;
+
+            vm.activeTab( tab );
+        },
+
         togglePayments: function () {
             this.showPayments( !this.showPayments() );
 
@@ -487,7 +494,7 @@ $( function () {
             if ( !self ) self = this;
 
             if ( !self.external_id ) {
-                self.invalidReservation(true);
+                self.invalidReservation( true );
                 return;
             }
 
@@ -500,7 +507,7 @@ $( function () {
 
             dbo.projectDataService.saveReservation( submitDATA, function ( data ) {
                 if ( data.success ) {
-                    self.invalidReservation(false);
+                    self.invalidReservation( false );
                     self.id = data.reservationID;
                 }
             } );