Index: resources/views/dashboard/departments/create.blade.php
===================================================================
--- resources/views/dashboard/departments/create.blade.php	(revision b9c4a92282ce0d7aa095082d7109f6d3d7b68dad)
+++ 	(revision )
@@ -1,63 +1,0 @@
-@extends('layouts.app')
-
-@section("title", "Departments - Create department")
-
-@section('pageTitle', 'Create department')
-
-@section('content')
-
-    <div class="page-header">
-        <nav aria-label="breadcrumb" class="d-flex align-items-start">
-            <ol class="breadcrumb">
-                <li class="breadcrumb-item">
-                    <a href="{{ url('dashboard/departments') }}">Departments</a>
-                </li>
-                <li class="breadcrumb-item active" aria-current="page">New department</li>
-            </ol>
-        </nav>
-    </div>
-
-    <div class="row">
-        <div class="col-md-12">
-
-            <div class="row">
-                <div class="col-lg-12 col-md-12">
-                    <div class="tab-content" id="v-pills-tabContent">
-                        <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
-                            <div class="card">
-                                <div class="card-body">
-                                    <h6 class="card-title">New department</h6>
-                                    <form action="{{ route("dashboard.departments.store") }}" method="post" accept-charset="utf-8" class="needs-validation" novalidate>
-                                        @csrf
-                                        <div class="row">
-                                            <div class="col-md-6">
-                                                <div class="form-group">
-                                                    <label>Name</label>
-                                                    <input type="text" name="name" value="{{ old('name') }}" minlength="2" maxlength="30" class="form-control" placeholder="Name" required>
-                                                    <div class="invalid-feedback">
-                                                        Please enter characters with length between [2, 30]
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="col-md-6">
-                                                <div class="form-group">
-                                                    <label>Code</label>
-                                                    <input type="text" name="code" value="{{ old('code') }}" minlength="2" maxlength="30" class="form-control" placeholder="Code" required>
-                                                    <div class="invalid-feedback">
-                                                        Please enter characters with length between [2, 30]
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <input type="submit" value="Save changes" class="submitBtn btn btn-primary pull-right m-10">
-                                    </form>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-@endsection
Index: resources/views/dashboard/departments/edit.blade.php
===================================================================
--- resources/views/dashboard/departments/edit.blade.php	(revision b9c4a92282ce0d7aa095082d7109f6d3d7b68dad)
+++ 	(revision )
@@ -1,64 +1,0 @@
-@extends('layouts.app')
-
-@section("title", "Departments - Edit department")
-
-@section('pageTitle', 'Edit department')
-
-@section('content')
-
-    <div class="page-header">
-        <nav aria-label="breadcrumb" class="d-flex align-items-start">
-            <ol class="breadcrumb">
-                <li class="breadcrumb-item">
-                    <a href="{{ url('dashboard/departments') }}">Departments</a>
-                </li>
-                <li class="breadcrumb-item active" aria-current="page">Edit department</li>
-            </ol>
-        </nav>
-    </div>
-
-    <div class="row">
-        <div class="col-md-12">
-
-            <div class="row">
-                <div class="col-lg-12 col-md-12">
-                    <div class="tab-content" id="v-pills-tabContent">
-                        <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
-                            <div class="card">
-                                <div class="card-body">
-                                    <h6 class="card-title">Departmnets</h6>
-                                    <form action="{{ route("dashboard.departments.edit", ["id" =>$department->id]) }}" method="post" accept-charset="utf-8" class="needs-validation" novalidate>
-                                        @method("patch")
-                                        @csrf
-                                        <div class="row">
-                                            <div class="col-md-6">
-                                                <div class="form-group">
-                                                    <label class="form-label">Name</label>
-                                                    <input type="text" name="name" value="{{ $department->name }}" minlength="2" maxlength="30" class="form-control" placeholder="Name" required>
-                                                    <div class="invalid-feedback">
-                                                        Please enter characters with length between [2, 30]
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="col-md-6">
-                                                <div class="form-group">
-                                                    <label class="form-label">Code</label>
-                                                    <input type="text" name="code" value="{{ $department->code }}" minlength="2" maxlength="30" class="form-control" placeholder="Code" required>
-                                                    <div class="invalid-feedback">
-                                                        Please enter characters with length between [2, 30]
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <input type="submit" value="Save changes" class="submitBtn btn btn-primary pull-right m-10">
-                                    </form>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-@endsection
Index: resources/views/dashboard/departments/index.blade.php
===================================================================
--- resources/views/dashboard/departments/index.blade.php	(revision b9c4a92282ce0d7aa095082d7109f6d3d7b68dad)
+++ resources/views/dashboard/departments/index.blade.php	(revision ea7b12a15d1afa472a54d5b8c75c55917907862e)
@@ -22,5 +22,5 @@
         </nav>
         <div class="dropdown">
-            <a href="{{ route("dashboard.departments.create") }}" class="btn btn-primary text-white">
+            <a href="javascript:void(0)" data-toggle="modal" data-target="#createModal" class="btn btn-primary text-white">
                 Add department
             </a>
@@ -37,8 +37,4 @@
                             <tr>
                                 <th>
-                                    {{--                                    <div class="custom-control custom-checkbox">--}}
-                                    {{--                                        <input type="checkbox" class="custom-control-input" id="user-list-select-all">--}}
-                                    {{--                                        <label class="custom-control-label" for="user-list-select-all"></label>--}}
-                                    {{--                                    </div>--}}
                                 </th>
                                 <th>ID</th>
@@ -75,5 +71,5 @@
                                     </td>
                                     <td>
-                                        <a href="{{ route("dashboard.departments.edit", ["id" => $department->id]) }}" class="text-secondary" data-toggle="tooltip" title="Edit">
+                                        <a href="javascript:void(0)" class="text-secondary" data-toggle="modal" data-target="#editModal_{{$department->id}}" title="Edit">
                                             <i class="ti-pencil"></i>
                                         </a>
@@ -109,5 +105,75 @@
                                     </div>
                                 </div>
+
+                                <div class="modal fade" id="editModal_{{$department->id}}" tabindex="-1" role="dialog" aria-hidden="true">
+                                    <div class="modal-dialog modal-dialog-centered" role="document">
+                                        <div class="modal-content">
+                                            <div class="modal-header">
+                                                <h5 class="modal-title" id="exampleModalCenterTitle">Edit department</h5>
+                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                                    <i class="ti-close"></i>
+                                                </button>
+                                            </div>
+                                            <div class="modal-body">
+                                                <form action="{{ route("dashboard.departments.edit", ["id" =>$department->id]) }}" method="post" accept-charset="utf-8">
+                                                    @method("patch")
+                                                    @csrf
+                                                    <div class="row">
+                                                        <div class="col-md-6">
+                                                            <div class="form-group">
+                                                                <label class="form-label">Name</label>
+                                                                <input type="text" name="name" value="{{ $department->name }}" minlength="2" maxlength="30" class="form-control" placeholder="Name" required>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-md-6">
+                                                            <div class="form-group">
+                                                                <label class="form-label">Code</label>
+                                                                <input type="text" name="code" value="{{ $department->code }}" minlength="2" maxlength="30" class="form-control" placeholder="Code" required>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <input type="submit" value="Save changes" class="btn btn-primary pull-right m-10">
+                                                </form>
+                                            </div>
+
+                                        </div>
+                                    </div>
+                                </div>
                             @endforeach
+
+                            <div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-hidden="true">
+                                <div class="modal-dialog modal-dialog-centered" role="document">
+                                    <div class="modal-content">
+                                        <div class="modal-header">
+                                            <h5 class="modal-title" id="exampleModalCenterTitle">Create department</h5>
+                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                                <i class="ti-close"></i>
+                                            </button>
+                                        </div>
+                                        <div class="modal-body">
+                                            <form action="{{ route("dashboard.departments.store") }}" method="post" accept-charset="utf-8">
+                                                @csrf
+                                                <div class="row">
+                                                    <div class="col-md-6">
+                                                        <div class="form-group">
+                                                            <label>Name</label>
+                                                            <input type="text" name="name" value="{{ old('name') }}" minlength="2" maxlength="30" class="form-control" placeholder="Name" required>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-md-6">
+                                                        <div class="form-group">
+                                                            <label>Code</label>
+                                                            <input type="text" name="code" value="{{ old('code') }}" minlength="2" maxlength="30" class="form-control" placeholder="Code" required>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <input type="submit" value="Save changes" class="submitBtn btn btn-primary pull-right m-10">
+                                            </form>
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </div>
+
                             </tbody>
                         </table>
@@ -124,13 +190,3 @@
     <!-- Datatable -->
     <script src="{{ url('vendors/dataTable/dataTables.min.js') }}"></script>
-
-    <script>
-        $('#deleteModal').on('show.bs.modal', function (event) {
-            var button = $(event.relatedTarget)
-            var dep_id = button.data('deptId')
-            var modal = $(this)
-
-            modal.find('.modal-body #dept_id').val(dep_id);
-        });
-    </script>
 @endsection
