diff --git a/app/Http/Controllers/Projects/ProjectsController.php b/app/Http/Controllers/Projects/ProjectsController.php
index da6cee1..d2e43ea 100755
--- a/app/Http/Controllers/Projects/ProjectsController.php
+++ b/app/Http/Controllers/Projects/ProjectsController.php
@@ -9,6 +9,11 @@ use App\Http\Requests\Projects\DeleteRequest;
 use App\Http\Requests\Projects\UpdateRequest;
 use Illuminate\Http\Request;
 
+/**
+ * Projects Controller
+ *
+ * @author Nafies Luthfi <nafiesl@gmail.com>
+ */
 class ProjectsController extends Controller
 {
     private $repo;
@@ -85,7 +90,7 @@ class ProjectsController extends Controller
     {
         $project = $this->repo->requireById($projectId);
         $jobs = $this->repo->getProjectJobs($projectId);
-        return view('projects.jobs', compact('project', 'jobs'));
+        return view('projects.jobs.index', compact('project', 'jobs'));
     }
 
     public function subscriptions($projectId)
diff --git a/resources/views/layouts/dashboard.blade.php b/resources/views/layouts/dashboard.blade.php
index 66b2275..48e22c5 100644
--- a/resources/views/layouts/dashboard.blade.php
+++ b/resources/views/layouts/dashboard.blade.php
@@ -20,4 +20,5 @@
 @include('pages.partials.dashboard-nav-tabs')
 
 @yield('content-dashboard')
+
 @endsection
diff --git a/resources/views/layouts/project.blade.php b/resources/views/layouts/project.blade.php
new file mode 100755
index 0000000..86ba27c
--- /dev/null
+++ b/resources/views/layouts/project.blade.php
@@ -0,0 +1,21 @@
+@extends('layouts.app')
+
+@section('title')
+{{ $project->name }} - @yield('subtitle', trans('project.show'))
+@endsection
+
+@section('content')
+@include('projects.partials.breadcrumb')
+
+<h1 class="page-header">
+    <div class="pull-right">
+        @yield('action-buttons')
+    </div>
+    {{ $project->name }} <small>@yield('subtitle', trans('project.show'))</small>
+</h1>
+
+@include('projects.partials.nav-tabs')
+
+@yield('content-project')
+
+@endsection
diff --git a/resources/views/projects/jobs.blade.php b/resources/views/projects/jobs.blade.php
index 70612f8..ca8d1f1 100755
--- a/resources/views/projects/jobs.blade.php
+++ b/resources/views/projects/jobs.blade.php
@@ -1,19 +1,13 @@
-@extends('layouts.app')
+@extends('layouts.project')
 
-@section('title', trans('project.jobs') . ' | ' . $project->name)
+@section('subtitle', trans('project.jobs'))
 
-@section('content')
-@include('projects.partials.breadcrumb',['title' => trans('project.jobs')])
-
-<h1 class="page-header">
-    <div class="pull-right">
-        {!! html_link_to_route('jobs.create', trans('job.create'), [$project->id], ['class' => 'btn btn-success','icon' => 'plus']) !!}
-        {!! html_link_to_route('jobs.add-from-other-project', trans('job.add_from_other_project'), [$project->id], ['class' => 'btn btn-default','icon' => 'plus']) !!}
-    </div>
-    {{ $project->name }} <small>{{ trans('project.jobs') }}</small>
-</h1>
+@section('action-buttons')
+{!! html_link_to_route('jobs.create', trans('job.create'), [$project->id], ['class' => 'btn btn-success','icon' => 'plus']) !!}
+{!! html_link_to_route('jobs.add-from-other-project', trans('job.add_from_other_project'), [$project->id], ['class' => 'btn btn-default','icon' => 'plus']) !!}
+@endsection
 
-@include('projects.partials.nav-tabs')
+@section('content-project')
 
 @if ($jobs->isEmpty())
 <p>{{ trans('project.no_jobs') }},
diff --git a/resources/views/projects/jobs/index.blade.php b/resources/views/projects/jobs/index.blade.php
new file mode 100755
index 0000000..ca8d1f1
--- /dev/null
+++ b/resources/views/projects/jobs/index.blade.php
@@ -0,0 +1,123 @@
+@extends('layouts.project')
+
+@section('subtitle', trans('project.jobs'))
+
+@section('action-buttons')
+{!! html_link_to_route('jobs.create', trans('job.create'), [$project->id], ['class' => 'btn btn-success','icon' => 'plus']) !!}
+{!! html_link_to_route('jobs.add-from-other-project', trans('job.add_from_other_project'), [$project->id], ['class' => 'btn btn-default','icon' => 'plus']) !!}
+@endsection
+
+@section('content-project')
+
+@if ($jobs->isEmpty())
+<p>{{ trans('project.no_jobs') }},
+    {{ link_to_route('jobs.create', trans('job.create'), [$project->id]) }}.
+</p>
+@else
+
+@foreach($jobs->groupBy('type_id') as $key => $groupedJobs)
+
+<div id="project-jobs" class="panel panel-default table-responsive">
+    <div class="panel-heading">
+        <div class="pull-right">
+            @if (request('action') == 'sort_jobs')
+                {{ link_to_route('projects.jobs', trans('app.done'), [$project->id], ['class' => 'btn btn-default btn-xs pull-right', 'style' => 'margin-top: -2px; margin-left: 6px; margin-right: -8px']) }}
+            @else
+                {{ link_to_route('projects.jobs', trans('project.sort_jobs'), [$project->id, 'action' => 'sort_jobs', '#project-jobs'], ['class' => 'btn btn-default btn-xs pull-right', 'style' => 'margin-top: -2px; margin-left: 6px; margin-right: -8px']) }}
+
+                {!! link_to_route('projects.jobs-export', trans('project.jobs_export_html'), [$project->id, 'html', 'job_type' => $key], ['class' => '','target' => '_blank']) !!} |
+                {!! link_to_route('projects.jobs-export', trans('project.jobs_export_excel'), [$project->id, 'excel', 'job_type' => $key], ['class' => '']) !!} |
+                {!! link_to_route('projects.jobs-export', trans('project.jobs_export_progress_excel'), [$project->id, 'excel-progress', 'job_type' => $key], ['class' => '']) !!}
+            @endif
+        </div>
+        <h3 class="panel-title">
+            {{ $key == 1 ? 'Daftar Fitur' : 'Fitur Tambahan' }}
+        </h3>
+    </div>
+    <table class="table table-condensed table-striped">
+        <thead>
+            <th>{{ trans('app.table_no') }}</th>
+            <th>{{ trans('job.name') }}</th>
+            <th class="text-center">{{ trans('job.tasks_count') }}</th>
+            <th class="text-center">{{ trans('job.progress') }}</th>
+            <th class="text-right">{{ trans('job.price') }}</th>
+            {{-- <th>{{ trans('job.worker') }}</th> --}}
+            <th class="text-center">{{ trans('app.action') }}</th>
+        </thead>
+        <tbody class="sort-jobs">
+            @forelse($groupedJobs as $key => $job)
+            @php
+            $no = 1 + $key;
+            $job->progress = $job->tasks->avg('progress');
+            @endphp
+            <tr id="{{ $job->id }}" {!! $job->progress <= 50 ? 'style="background-color: #faebcc"' : '' !!}>
+                <td>{{ $no }}</td>
+                <td>
+                    {{ $job->name }}
+                    @if ($job->tasks->isEmpty() == false)
+                    <ul>
+                        @foreach($job->tasks as $task)
+                        <li>{{ $task->name }}</li>
+                        @endforeach
+                    </ul>
+                    @endif
+                </td>
+                <td class="text-center">{{ $job->tasks_count = $job->tasks->count() }}</td>
+                <td class="text-center">{{ formatDecimal($job->progress) }} %</td>
+                <td class="text-right">{{ formatRp($job->price) }}</td>
+                {{-- <td>{{ $job->worker->name }}</td> --}}
+                <td class="text-center">
+                    {!! html_link_to_route('jobs.show', '',[$job->id],['icon' => 'search', 'title' => 'Lihat ' . trans('job.show'), 'class' => 'btn btn-info btn-xs','id' => 'show-job-' . $job->id]) !!}
+                    {!! html_link_to_route('jobs.edit', '',[$job->id],['icon' => 'edit', 'title' => trans('job.edit'), 'class' => 'btn btn-warning btn-xs']) !!}
+                </td>
+            </tr>
+            @empty
+            <tr><td colspan="7">{{ trans('job.empty') }}</td></tr>
+            @endforelse
+        </tbody>
+        <tfoot>
+            <tr>
+                <th class="text-right" colspan="2">Total</th>
+                <th class="text-center">{{ $groupedJobs->sum('tasks_count') }}</th>
+                <th class="text-center">
+                    <span title="Total Progress">{{ formatDecimal($groupedJobs->sum('progress') / $groupedJobs->count()) }} %</span>
+                    <span title="Overal Progress" style="font-weight:300">({{ formatDecimal($project->getJobOveralProgress()) }} %)</span>
+                </th>
+                <th class="text-right">{{ formatRp($groupedJobs->sum('price')) }}</th>
+                <th colspan="2">
+                    @if (request('action') == 'sort_jobs')
+                        {{ link_to_route('projects.jobs', trans('app.done'), [$project->id], ['class' => 'btn btn-default btn-xs pull-right']) }}
+                    @else
+                        {{ link_to_route('projects.jobs', trans('project.sort_jobs'), [$project->id, 'action' => 'sort_jobs', '#project-jobs'], ['class' => 'btn btn-default btn-xs pull-right']) }}
+                    @endif
+                </th>
+            </tr>
+        </tfoot>
+    </table>
+</div>
+@endforeach
+
+@endif
+@endsection
+
+@if (request('action') == 'sort_jobs')
+
+@section('ext_js')
+    {!! Html::script(url('assets/js/plugins/jquery-ui.min.js')) !!}
+@endsection
+
+@section('script')
+
+<script>
+(function() {
+    $('.sort-jobs').sortable({
+        update: function (event, ui) {
+            var data = $(this).sortable('toArray').toString();
+            $.post("{{ route('projects.jobs-reorder', $project->id) }}", {postData: data});
+        }
+    });
+})();
+</script>
+@endsection
+
+@endif
diff --git a/resources/views/projects/show.blade.php b/resources/views/projects/show.blade.php
index 37fa6bb..de2b179 100755
--- a/resources/views/projects/show.blade.php
+++ b/resources/views/projects/show.blade.php
@@ -1,19 +1,11 @@
-@extends('layouts.app')
+@extends('layouts.project')
 
-@section('title', trans('project.show') . ' | ' . $project->name)
-
-@section('content')
-@include('projects.partials.breadcrumb')
-
-<h1 class="page-header">
-    <div class="pull-right">
-        {!! link_to_route('projects.edit', trans('project.edit'), [$project->id], ['class' => 'btn btn-warning']) !!}
-        {!! link_to_route('projects.index', trans('project.back_to_index'), ['status' => $project->status_id], ['class' => 'btn btn-default']) !!}
-    </div>
-    {{ $project->name }} <small>{{ trans('project.show') }}</small>
-</h1>
+@section('action-buttons')
+{!! link_to_route('projects.edit', trans('project.edit'), [$project->id], ['class' => 'btn btn-warning']) !!}
+{!! link_to_route('projects.index', trans('project.back_to_index'), ['status' => $project->status_id], ['class' => 'btn btn-default']) !!}
+@endsection
 
-@include('projects.partials.nav-tabs')
+@section('content-project')
 
 <div class="row">
     <div class="col-md-6">
@@ -27,4 +19,5 @@
         @include('projects.partials.project-stats')
     </div>
 </div>
+
 @endsection