diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
index 7f3c283..169cd6c 100644
--- a/resources/views/auth/passwords/email.blade.php
+++ b/resources/views/auth/passwords/email.blade.php
@@ -1,124 +1,137 @@
 @extends('layouts.app', ['class' => 'bg-white'])
 
 @section('content')
-    {{-- @include('layouts.headers.guest') --}}
+{{-- @include('layouts.headers.guest') --}}
 
-        <div class="user-login-5 ">
-            <div class="row h-100 w-100 d-flex justify-content-center mx-auto">
-                <div class="col-md-6 col-xl-6">
-                    <div class="container text-center mt-7">
-                        <img class="login-logo login-6" src="{{ asset('argon') }}/login/logo_arrahn_baru.png">
-                        <div class="container mt-5">
+<div class="user-login-5 ">
+    <div class="row h-100 w-100 d-flex justify-content-center mx-auto">
+        <div class="col-md-6 col-xl-6">
+            <div class="container text-center mt-7">
+                <img class="login-logo login-6" src="{{ asset('argon') }}/login/logo_arrahn_baru.png">
+                <div class="container mt-5">
 
-                            @if (session('status'))
-                            {{-- <div class="alert alert-success" role="alert">
+                    @if (session('status'))
+                    {{-- <div class="alert alert-success" role="alert">
                                 {{ session('status') }}
-                            </div> --}}
-                            <script>
-                                var status = "{{ session('status') }}";
-                                $.notify({
-                                    icon: 'far fa-check-circle fa-2x',
-                                    newest_on_top: true,
-                                    message: "<strong class='text-center' style='font-size:15px;'>" + status + "</strong>"
-                                  },{
-                                    type: 'success',
-                                    allow_dismiss: false,
-                                    placement:{ align:'center',from:'bottom'},
-                                    animate: {
-                                      enter: 'animate__animated animate__bounce',
-    
-                                      exit: 'animate__animated animate__bounceOutDown'
-                                  }
-                                });
-                              </script>
-                        @endif
+                </div> --}}
+                <script>
+                    var status = "{{ session('status') }}";
+                    $.notify({
+                        icon: 'far fa-check-circle fa-2x',
+                        newest_on_top: true,
+                        message: "<strong class='text-center' style='font-size:15px;'>" + status + "</strong>"
+                    }, {
+                        type: 'success',
+                        allow_dismiss: false,
+                        placement: {
+                            align: 'center',
+                            from: 'bottom'
+                        },
+                        animate: {
+                            enter: 'animate__animated animate__bounce',
 
-                        @if (session('info'))
-                            {{-- <div class="alert alert-info" role="alert">
+                            exit: 'animate__animated animate__bounceOutDown'
+                        }
+                    });
+                </script>
+                @endif
+
+                @if (session('info'))
+                {{-- <div class="alert alert-info" role="alert">
                                 {{ session('info') }}
-                            </div> --}}
-                            <script>
-                                var status = "{{ session('info') }}";
-                                $.notify({
-                                    icon: 'fas fa-info fa-2x',
-                                    newest_on_top: true,
-                                    message: "<strong style='font-size:15px;'>" + status + "</strong>"
-                                  },{
-                                    type: 'info',
-                                    allow_dismiss: false,
-                                    placement:{ align:'center',from:'bottom'},
-                                    animate: {
-                                      enter: 'animate__animated animate__bounce',
-    
-                                      exit: 'animate__animated animate__bounceOutDown'
-                                  }
-                                });
-                              </script>
-                        @endif
+            </div> --}}
+            <script>
+                var status = "{{ session('info') }}";
+                $.notify({
+                    icon: 'fas fa-info fa-2x',
+                    newest_on_top: true,
+                    message: "<strong style='font-size:15px;'>" + status + "</strong>"
+                }, {
+                    type: 'info',
+                    allow_dismiss: false,
+                    placement: {
+                        align: 'center',
+                        from: 'bottom'
+                    },
+                    animate: {
+                        enter: 'animate__animated animate__bounce',
 
-                            <form role="form" method="POST" action="{{ route('password.email') }}">
-                                @csrf
-                                <div class="row d-flex justify-content-center">
-                                    <div class="col-xs-5 col-xl-5 ">
-                                        <div class="form-group {{ $errors->has('email') ? ' has-danger' : '' }}">
-                                            <input placeholder="Emel" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" placeholder="{{ __('Email') }}" type="email" name="email" value="{{ old('email') }}" id="login-username" required autofocus aria-required="true">
-                                        </div>
-                                        @if ($errors->has('email'))
-                                        <span class="invalid-feedback" style="display: block;margin-top:-10px !important;" role="alert">
-                                            <strong>{{ $errors->first('email') }}</strong>
-                                        </span>
-                                        @endif
-                                    </div>
-                                </div>
-
-                                <div class="text-center">
-                                    <button type="submit" class="btn btn-success my-4">{{ __('Tetap Semula Katalaluan') }}</button>
-                                </div>
-
-                                <br>
-                                <div class="row">
-                                    <div class="col-sm-12 col-xs-12 forgetpassword">
-                                    <center> 
-                                            <div class="forgot-password">
-                                                <a href="{{ route('auth.registerfirst') }}" class="text-light"><font color="#3598dc">Pertama Kali</font></a> |@if (Route::has('password.request')) <a href="#" class="text-light"><font color="#3598dc">Lupa Katalaluan</font></a>@endif
-                                                {{-- <a href="{{ route('auth.registerfirst') }}" class="text-light"><font color="#3598dc">Pertama Kali</font></a> |@if (Route::has('password.request')) <a href="{{ route('password.request') }}" class="text-light"><font color="#3598dc">Lupa Katalaluan</font></a>@endif --}}
-                                            </div>
-                                            <div style="font-size: 10px;"><br><br>Paparan terbaik menggunakan Mozilla Firefox, Google Chrome & Internet Explorer 9.0 ke atas dengan resolusi 1920 x 1080</div>
-                                        </center>
-                                    </div>
-                                
-                                </div>
-                            </form>
+                        exit: 'animate__animated animate__bounceOutDown'
+                    }
+                });
+            </script>
+            @endif
 
+            <form role="form" method="POST" action="{{ route('password.email') }}">
+                @csrf
+                <div class="row d-flex justify-content-center">
+                    <div class="col-xs-5 col-xl-5 ">
+                        <div class="form-group {{ $errors->has('email') ? ' has-danger' : '' }}">
+                            <input placeholder="Emel" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" placeholder="{{ __('Email') }}" type="email" name="email" value="{{ old('email') }}" id="login-username" required autofocus aria-required="true">
                         </div>
+                        @if ($errors->has('email'))
+                        <span class="invalid-feedback" style="display: block;margin-top:-10px !important;" role="alert">
+                            <strong>{{ $errors->first('email') }}</strong>
+                        </span>
+                        @endif
+                    </div>
+                </div>
+
+                <div class="text-center">
+                    <button type="submit" class="btn btn-success my-4">{{ __('Tetap Semula Katalaluan') }}</button>
+                </div>
+
+                <br>
+                <div class="row">
+                    <div class="col-sm-12 col-xs-12 forgetpassword">
+                        <center>
+                            <div class="forgot-password">
+                                <a href="{{ route('auth.registerfirst') }}" class="text-light">
+                                    <font color="#3598dc">Pertama Kali</font>
+                                </a> |@if (Route::has('password.request')) <a href="#" class="text-light">
+                                    <font color="#3598dc">Lupa Katalaluan</font>
+                                </a>@endif
+                                {{-- <a href="{{ route('auth.registerfirst') }}" class="text-light"><font color="#3598dc">Pertama Kali</font></a> |@if (Route::has('password.request')) <a href="{{ route('password.request') }}" class="text-light">
+                                    <font color="#3598dc">Lupa Katalaluan</font>
+                                </a>@endif --}}
+                            </div>
+                            <div style="font-size: 10px;"><br><br>Paparan terbaik menggunakan Mozilla Firefox, Google Chrome & Internet Explorer 9.0 ke atas dengan resolusi 1920 x 1080</div>
+                        </center>
                     </div>
 
-
-                    <br>
                 </div>
-                <div class="col-md-6 col-xl-6 py-0 px-0">
-                   
-                    @include('auth.slides.slidespage')
+            </form>
 
-                </div>
-            </div>
         </div>
+    </div>
+
+
+    <br>
+</div>
+<div class="col-md-6 col-xl-6 py-0 px-0">
+
+    @include('auth.slides.slidespage')
+
+</div>
+</div>
+</div>
 
 <script>
-	
-        var slideIndex = 0;
-        showSlides();
+    var slideIndex = 0;
+    showSlides();
 
-        function showSlides() {
+    function showSlides() {
         var i;
         var slides = document.getElementsByClassName("mySlides");
         for (i = 0; i < slides.length; i++) {
             slides[i].style.display = "none";
         }
         slideIndex++;
-        if (slideIndex > slides.length) {slideIndex = 1}
-        slides[slideIndex-1].style.display = "block";
-        setTimeout(showSlides, 10000); // Change image every 2 seconds
+        if (slideIndex > slides.length) {
+            slideIndex = 1
         }
-</script>        
-@endsection
+        slides[slideIndex - 1].style.display = "block";
+        setTimeout(showSlides, 10000); // Change image every 2 seconds
+    }
+</script>
+@endsection
\ No newline at end of file
diff --git a/resources/views/auth/passwords/forgetpassword.blade.php b/resources/views/auth/passwords/forgetpassword.blade.php
new file mode 100644
index 0000000..6be59ad
--- /dev/null
+++ b/resources/views/auth/passwords/forgetpassword.blade.php
@@ -0,0 +1,58 @@
+@extends('includes.login.index')
+
+@section('content')
+
+<title>Lupa Kata Laluan | Customer Portal</title>
+
+<h6 style="text-align: center; margin-bottom: 10%;">Lupa Kata Laluan</h6>
+
+@if (session('status'))
+
+<script>
+    var status = "{{ session('status') }}";
+    $.notify({
+        icon: 'far fa-check-circle fa-2x',
+        newest_on_top: true,
+        message: "<strong class='text-center' style='font-size:15px;'>" + status + "</strong>"
+    }, {
+        type: 'success',
+        allow_dismiss: false,
+        placement: {
+            align: 'center',
+            from: 'bottom'
+        },
+        animate: {
+            enter: 'animate__animated animate__bounce',
+
+            exit: 'animate__animated animate__bounceOutDown'
+        }
+    });
+</script>
+@endif
+
+<form role="form" method="POST" action="{{ route('password.email') }}">
+    @csrf
+    <p>Sila masukkan emel</p>
+    <div class="input-group input-group-outline my-3">
+
+        <input placeholder="Emel" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" id="login-username">
+    </div>
+
+    @if ($errors->has('email'))
+    <span class="invalid-feedback" style="display: block;margin-top:-10px !important;" role="alert">
+        <strong>{{ $errors->first('email') }}</strong>
+    </span>
+    @endif
+
+    <div class="text-center">
+        <button type="submit" class="btn bg-gradient-dark w-100 my-4 mb-2" style="background: #4A4E59;">Tetap Semula Kata Laluan</button>
+    </div>
+    <p class="mt-6 text-sm text-center">
+
+        <a href="{{ route('auth.registerfirst') }}">Pertama Kali</a>
+        <a href="#" class="text-dark text-gradient font-weight-bold"> | </a>
+        <a href="{{ route('login') }}">Log-Masuk</a>
+    </p>
+</form>
+
+@endsection
\ No newline at end of file
diff --git a/resources/views/includes/analisaportal.blade.php b/resources/views/includes/analisaportal.blade.php
index 6fc506e..0f42060 100644
--- a/resources/views/includes/analisaportal.blade.php
+++ b/resources/views/includes/analisaportal.blade.php
@@ -273,8 +273,14 @@
     var hargaemastable = $('#harga_emas').DataTable({
         "bLengthChange": false,
         "bFilter": false,
-        "bInfo": false,
-        "pageLength": 5,
+        "paging": false,
+        "pagingType": "simple",
+        language: {
+            'paginate': {
+                'previous': '<span class="fas fa-backward"></span>',
+                'next': '<span class="fas fa-forward"></span>'
+            }
+        }
 
     });
 
@@ -282,7 +288,7 @@
         "bLengthChange": false,
         "bFilter": false,
         "pageLength": 5,
-        "bInfo": false,
+        "pagingType": "simple",
         language: {
             'paginate': {
                 'previous': '<span class="fas fa-backward"></span>',
diff --git a/resources/views/includes/bayaran/senaraibayaransag.blade.php b/resources/views/includes/bayaran/senaraibayaransag.blade.php
index 608e00e..bb5fd8a 100644
--- a/resources/views/includes/bayaran/senaraibayaransag.blade.php
+++ b/resources/views/includes/bayaran/senaraibayaransag.blade.php
@@ -232,10 +232,11 @@
     var belumtawarruqtable = $('#belum_tawarruq').DataTable({
         "bLengthChange": false,
         "bFilter": true,
-        "bInfo": false,
+        "pagingType": "numbers",
+        "paging" : false,
         language: {
             'paginate': {
-                'previous': '<span class="fas fa-backward"></span>',
+                'previous': '<span class="fas fa-backward fa-1.5x"></span>',
                 'next': '<span class="fas fa-forward"></span>'
             }
         }
@@ -244,7 +245,7 @@
     var selepastawarruqtable = $('#selepas_tawarruq').DataTable({
         "bLengthChange": false,
         "bFilter": true,
-        "bInfo": false,
+        "paging" : false,
         language: {
             'paginate': {
                 'previous': '<span class="fas fa-backward"></span>',
diff --git a/resources/views/includes/home.blade.php b/resources/views/includes/home.blade.php
index 3b2bef5..2746f9a 100644
--- a/resources/views/includes/home.blade.php
+++ b/resources/views/includes/home.blade.php
@@ -1,4 +1,4 @@
-@extends ('layouts.app')
+@extends ('layouts.indexfirst')
 
 @section('content')
 
diff --git a/resources/views/includes/login/forgetpassword.blade.php b/resources/views/includes/login/forgetpassword.blade.php
deleted file mode 100644
index e571ca1..0000000
--- a/resources/views/includes/login/forgetpassword.blade.php
+++ /dev/null
@@ -1,27 +0,0 @@
-@extends('includes.login.index')
-
-@section('content')
-
-<title>Lupa Kata Laluan | Customer Portal</title>
-
-<h6 style="text-align: center; margin-bottom: 10%;">Lupa Kata Laluan</h6>
-
-<form role="form" class="text-start">
-    <p>Sila masukkan email</p>
-    <div class="input-group input-group-outline my-3">
-
-        <input type="email" class="form-control">
-    </div>
-    
-    <div class="text-center">
-        <button type="button" class="btn bg-gradient-dark w-100 my-4 mb-2" style="background: #4A4E59;">Tetap Semula Kata Laluan</button>
-    </div>
-    <p class="mt-6 text-sm text-center">
-
-        <a href="/firsttime">Pertama Kali</a>
-        <a href="#" class="text-dark text-gradient font-weight-bold"> | </a>
-        <a href="/loginportal">Log-Masuk</a>
-    </p>
-</form>
-
-@endsection
\ No newline at end of file
diff --git a/resources/views/includes/main/head.blade.php b/resources/views/includes/main/head.blade.php
index 84b651e..8d5c0b8 100644
--- a/resources/views/includes/main/head.blade.php
+++ b/resources/views/includes/main/head.blade.php
@@ -1,33 +1,83 @@
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
-<link rel="icon" type="image/png" href="../assets/img/favicon.png">
 
-<!--     Fonts and icons     -->
+<link href="{{ asset('argon') }}/img/brand/ARRAHN1.png" rel="icon" type="image/png">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
 
-<!-- Nucleo Icons -->
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css" />
-<link href="{{ asset('css/nucleo-icons.css') }}" rel="stylesheet">
-<link href="{{ asset('css/nucleo-svg.css') }}" rel="stylesheet">
-<link href="{{ asset('argon') }}/img/brand/ARRAHN1.png" rel="icon" type="image/png">
-<script type="text/javascript" src="{{ asset('argon') }}/js/main.js"></script>
-<script src="{{ asset('argon') }}/js/ifvisible.js"></script>
-
-
-<!-- Font Awesome Icons -->
-<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
-
-<!-- Material Icons -->
-<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
-
-<!-- CSS Files -->
-<link href="{{ asset('css/material-kit.css') }}" rel="stylesheet">
 
 <script src="{{ asset('argon') }}/vendor/jquery/dist/jquery.min.js"></script>
+
+<link href="{{ asset('css/nucleo-icons.css') }}" rel="stylesheet">
+<link href="{{ asset('css/nucleo-svg.css') }}" rel="stylesheet">
+
+<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
+
+<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css" />
+<script src="{{ asset('argon') }}/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+
+<script src="{{ asset('argon') }}/js/ifvisible.js"></script>
+<script src="{{ asset('argon') }}/js/jquery.backDetect.js"></script>
+<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+
+<script type="text/javascript" src="{{ asset('argon') }}/js/main.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
 <script src="{{ asset('argon') }}/js/bootstrap-notify.js"></script>
 
+<link href="{{ asset('css/material-kit.css') }}" rel="stylesheet">
+
+
+
+<script>
+    ifvisible.setIdleDuration(100);
+</script>
+
+<script>
+    var timeLeft = 30;
+    var elem = document.getElementById('seconds');
+    var timerId;
+
+
+    // ifvisible.on("focus", function(){
+    //     clearTimeout(timerId);
+    //     timeLeft = 30;
+    // });
+
+    $('#sessionModal').modal('show');
+
+    ifvisible.on("idle", function() {
+
+        timerId = setInterval(countdown, 1000);
+        $('#sessionModal').modal('show', {
+            backdrop: 'static',
+            keyboard: false
+        });
+    });
+
+
+    ifvisible.on("wakeup", function() {
+        clearTimeout(timerId);
+        timeLeft = 30;
+    });
+
+
+    function countdown() {
+        if (timeLeft == -1) {
+            clearTimeout(timerId);
+            $('#logout-form').submit();
+
+        } else {
+            document.getElementById("seconds").innerHTML = timeLeft;
+            timeLeft--;
+        }
+    }
+</script>
+
+@include('modal.sessionmodal')
+
+
 @if(Auth::user()->hasVerifiedEmail())
 <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
     @csrf
diff --git a/resources/views/includes/rekod/pilihcawangan.blade.php b/resources/views/includes/rekod/pilihcawangan.blade.php
index 090a43c..5605360 100644
--- a/resources/views/includes/rekod/pilihcawangan.blade.php
+++ b/resources/views/includes/rekod/pilihcawangan.blade.php
@@ -13,6 +13,28 @@
     </nav>
 </div>
 
+@error('sltcawangan')
+<script>
+    $.notify({
+        icon: 'fas fa-exclamation-triangle fa-2x',
+        newest_on_top: true,
+        message: "<strong style='font-size:15px;'>Sila pilih cawangan terlebih dahulu sebelum tekan semak!</strong>"
+    }, {
+        type: 'danger',
+        allow_dismiss: false,
+        placement: {
+            align: 'center',
+            from: 'bottom'
+        },
+        animate: {
+            enter: 'animate__animated animate__bounce',
+
+            exit: 'animate__animated animate__bounceOutDown'
+        }
+    });
+</script>
+@enderror
+
 <form name="semaksagform" action="{{ route('senaraisag') }}" method="POST">
     @csrf
     <div>
diff --git a/resources/views/includes/rekod/rekodsag.blade.php b/resources/views/includes/rekod/rekodsag.blade.php
index 46bedac..c7351cc 100644
--- a/resources/views/includes/rekod/rekodsag.blade.php
+++ b/resources/views/includes/rekod/rekodsag.blade.php
@@ -211,7 +211,8 @@
         // "bPaginate": false,
         "bLengthChange": false,
         "bFilter": true,
-        "bInfo": false,
+        "pagingType": "simple",
+        "pageLength": 5,
         language: {
             'paginate': {
                 'previous': '<span class="fas fa-backward"></span>',
@@ -227,7 +228,8 @@
         // ],
         "bLengthChange": false,
         "bFilter": true,
-        "bInfo": false,
+        "pagingType": "simple",
+        "pageLength": 5,
         language: {
             'paginate': {
                 'previous': '<span class="fas fa-backward"></span>',
@@ -239,7 +241,8 @@
     var sudahtebustable = $('#saghistory').DataTable({
         "bLengthChange": false,
         "bFilter": true,
-        "bInfo": false,
+        "pagingType": "simple",
+        "pageLength": 5,
         language: {
             'paginate': {
                 'previous': '<span class="fas fa-backward"></span>',
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 84ae3fa..295db9b 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -1,63 +1,58 @@
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
-        <meta charset="UTF-8">
-        <meta http-equiv="X-UA-Compatible" content="ie=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-        <meta http-equiv="Pragma" content="no-cache">
-        <meta http-equiv="Expires" content="0">
 
-        <meta name="csrf-token" content="{{ csrf_token() }}">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
 
-        <title>{{ config('app.name', 'Ar-Rahn Panel') }}</title>
-        <!-- Favicon -->
-        <link href="{{ asset('argon') }}/img/brand/ARRAHN1.png" rel="icon" type="image/png">
-        <!-- Fonts -->
-        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
-        <!-- Extra details for Live View on GitHub Pages -->
+    <meta name="csrf-token" content="{{ csrf_token() }}">
 
-        <script src="{{ asset('argon') }}/vendor/jquery/dist/jquery.min.js"></script>
+    <title>{{ config('app.name', 'Ar-Rahn Panel') }}</title>
+    <!-- Favicon -->
+    <link href="{{ asset('argon') }}/img/brand/ARRAHN1.png" rel="icon" type="image/png">
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
+    <!-- Extra details for Live View on GitHub Pages -->
+
+    <script src="{{ asset('argon') }}/vendor/jquery/dist/jquery.min.js"></script>
 
 
-        <!-- Icons -->
-        <link href="{{ asset('argon') }}/vendor/nucleo/css/nucleo.css" rel="stylesheet">
-        <link href="{{ asset('argon') }}/vendor/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
-        <!-- Argon CSS -->
-        <link type="text/css" href="{{ asset('argon') }}/css/argon.css?v=1.0.0" rel="stylesheet">
+    <!-- Icons -->
+    <link href="{{ asset('argon') }}/vendor/nucleo/css/nucleo.css" rel="stylesheet">
+    <link href="{{ asset('argon') }}/vendor/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
+    <!-- Argon CSS -->
+    <link type="text/css" href="{{ asset('argon') }}/css/argon.css?v=1.0.0" rel="stylesheet">
 
-        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css"/>
-        {{-- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"/> --}}
-        <script src="{{ asset('argon') }}/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css" />
+    {{-- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"/> --}}
+    <script src="{{ asset('argon') }}/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
-        <script src="{{ asset('argon') }}/js/ifvisible.js"></script>
-        <script src="{{ asset('argon') }}/js/jquery.backDetect.js"></script>
-        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <script src="{{ asset('argon') }}/js/ifvisible.js"></script>
+    <script src="{{ asset('argon') }}/js/jquery.backDetect.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
-        
-        <script type="text/javascript" src="{{ asset('argon') }}/js/main.js"></script>
-        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
-        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
-        <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
-        {{-- <script type="text/javascript" src="{{ asset('argon') }}/js/dataTables.dataTables.min.js"></script> --}}
-        <link
-        rel="stylesheet"
-        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
-      />
-        <script src="{{ asset('argon') }}/js/bootstrap-notify.js"></script>
 
-        <script>
-            ifvisible.setIdleDuration(100);
+    <script type="text/javascript" src="{{ asset('argon') }}/js/main.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
+    <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
+    {{-- <script type="text/javascript" src="{{ asset('argon') }}/js/dataTables.dataTables.min.js"></script> --}}
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+    <script src="{{ asset('argon') }}/js/bootstrap-notify.js"></script>
 
-            // ifvisible.idle(function(){
-            //     $('#sessionModal').modal('show');
-            //     console.log('sessionmodalshow');
-            // });
+    <script>
+        ifvisible.setIdleDuration(5000);
 
-     
-        </script>
+        // ifvisible.idle(function(){
+        //     $('#sessionModal').modal('show');
+        //     console.log('sessionmodalshow');
+        // });
+    </script>
     <style>
-
         div.checker span {
             background-image: url("assets/global/plugins/uniform/images/sprite.png");
         }
@@ -66,19 +61,21 @@
             padding-left: 0 !important;
         }
 
-        .login-logo{
-            margin-top:50px;
-            width:50%;
-            height:50%;
+        .login-logo {
+            margin-top: 50px;
+            width: 50%;
+            height: 50%;
         }
-        
+
         @media (max-width: 1023px) {
             .user-login-5 .login-logo.login-6 {
                 margin: 0;
             }
+
             .user-login-5 .login-logo.login-6 {
                 left: 7%;
             }
+
             .user-login-5 .login-container>.login-content .login-form {
                 margin-top: 0 !important;
             }
@@ -91,7 +88,7 @@
             border: grey solid 2px;
             border-radius: 35px;
             margin-bottom: 20px;
-            background: rgba(255,255,255,.2);
+            background: rgba(255, 255, 255, .2);
         }
 
         .labelcool {
@@ -102,15 +99,15 @@
             /* padding-bottom: 10px; */
             /* color: rgba(255,255,255,.7); */
             text-align: left;
-            color:black;
+            color: black;
             display: block;
         }
 
         .buttonberjaya {
             border-radius: 20px;
             height: 50px;
-            background-color:#009432;
-            color:white;
+            background-color: #009432;
+            color: white;
             font-weight: bold;
             border-color: #357ebd !important;
         }
@@ -137,79 +134,88 @@
         .modalloading {
             border: none !important;
         }
-        .modal-dialog-loading{
+
+        .modal-dialog-loading {
             text-align: center;
-            position:fixed;
-            top:30%;
-            bottom:0;
-            left:0;
-            right:0;
-            margin:auto;
+            position: fixed;
+            top: 30%;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
         }
 
-        .login-bg{
+        .login-bg {
             /* position:fixed; */
             /* left:50.5%; */
-            background-position:center;
-            background-size:cover;
-            background-repeat:no-repeat;
-            min-height:100vh;
-            max-height:100%;
+            background-position: center;
+            background-size: cover;
+            background-repeat: no-repeat;
+            min-height: 100vh;
+            max-height: 100%;
             max-width: 100%;
         }
 
-        * {box-sizing: border-box;}
-        .mySlides {display: none;}
-        img {vertical-align: middle;}
+        * {
+            box-sizing: border-box;
+        }
+
+        .mySlides {
+            display: none;
+        }
+
+        img {
+            vertical-align: middle;
+        }
 
         /* Slideshow container */
         .slideshow-container {
-        max-width: 100%;
-        position: relative;
-        margin: auto;
+            max-width: 100%;
+            position: relative;
+            margin: auto;
         }
 
         /* Caption text */
         .text {
-        color: #f2f2f2;
-        font-size: 15px;
-        padding: 8px 12px;
-        position: absolute;
-        bottom: 8px;
-        width: 100%;
-        text-align: center;
+            color: #f2f2f2;
+            font-size: 15px;
+            padding: 8px 12px;
+            position: absolute;
+            bottom: 8px;
+            width: 100%;
+            text-align: center;
         }
 
         .headtext {
-        color: yellow;
-        font-size: 40px;
-        padding: 20px 12px;
-        position: absolute;
-        font-weight: bold;
-        top: 20%;
-        bottom: 0;
-        width: 100%;
-        text-align: center;
+            color: yellow;
+            font-size: 40px;
+            padding: 20px 12px;
+            position: absolute;
+            font-weight: bold;
+            top: 20%;
+            bottom: 0;
+            width: 100%;
+            text-align: center;
         }
 
         /* Number text (1/3 etc) */
         .numbertext {
-        color: #f2f2f2;
-        font-size: 12px;
-        padding: 8px 12px;
-        position: absolute;
-        top: 0;
+            color: #f2f2f2;
+            font-size: 12px;
+            padding: 8px 12px;
+            position: absolute;
+            top: 0;
         }
 
         /* The dots/bullets/indicators */
         .dot {
-        height: 15px;
-        width: 15px;
-        margin: 0 2px;
-        background-color: #bbb;
-        border-radius: 50%;
-        display: inline-block;
-        transition: background-color 0.6s ease;
+            height: 15px;
+            width: 15px;
+            margin: 0 2px;
+            background-color: #bbb;
+            border-radius: 50%;
+            display: inline-block;
+            transition: background-color 0.6s ease;
         }
 
         /* .active {
@@ -218,40 +224,54 @@
 
         /* Fading animation */
         .fade {
-        -webkit-animation-name: fade;
-        -webkit-animation-duration: 1.5s;
-        animation-name: fade;
-        animation-duration: 1.5s;
+            -webkit-animation-name: fade;
+            -webkit-animation-duration: 1.5s;
+            animation-name: fade;
+            animation-duration: 1.5s;
         }
 
         @-webkit-keyframes fade {
-        from {opacity: .4} 
-        to {opacity: 1}
+            from {
+                opacity: .4
+            }
+
+            to {
+                opacity: 1
+            }
         }
 
         @keyframes fade {
-        from {opacity: .4} 
-        to {opacity: 1}
+            from {
+                opacity: .4
+            }
+
+            to {
+                opacity: 1
+            }
         }
 
         /* On smaller screens, decrease text size */
         @media only screen and (max-width: 300px) {
-        .text {font-size: 11px}
+            .text {
+                font-size: 11px
+            }
         }
 
         /* Loader */
 
-        #background{
-            width:100%;
-            height:100%;
-            position:fixed;
+        #background {
+            width: 100%;
+            height: 100%;
+            position: fixed;
             overflow: hidden;
             top: 0px;
             left: 0px;
-            background: rgba(0, 0, 0, 0.5);;
+            background: rgba(0, 0, 0, 0.5);
+            ;
             opacity: 0.5;
-            z-index:1;
+            z-index: 1;
         }
+
         #container {
             width: 70px;
             height: 35px;
@@ -264,7 +284,7 @@
         #loader {
             position: fixed;
             top: 45%;
-            right:50%;
+            right: 50%;
             width: 70px;
             height: 70px;
             border-style: solid;
@@ -279,102 +299,117 @@
         }
 
         @keyframes rotate {
-        0% { border-width: 10px; }
-        25% { border-width: 3px; }
-        50% { 
-            transform: rotate(115deg); 
-            border-width: 10px;
-        }
-        75% { border-width: 3px;}
-        100% { border-width: 10px;}
-        }
-        </style>
-
-
-    </head>
-    <body class="{{ $class ?? '' }}">
-        @auth()
-
-        <script>       
-            var timeLeft = 30;
-            var elem = document.getElementById('seconds');
-            var timerId;
-
-
-            // ifvisible.on("focus", function(){
-            //     clearTimeout(timerId);
-            //     timeLeft = 30;
-            // });
-            
-            $('#sessionModal').modal('show');
-
-            ifvisible.on("idle", function(){
-
-                timerId = setInterval(countdown, 1000);
-                $('#sessionModal').modal('show', {backdrop: 'static', keyboard: false});
-            });
-
-
-            ifvisible.on("wakeup", function(){
-               clearTimeout(timerId);
-               timeLeft=30;
-            });
-        
-
-            function countdown() {
-                if (timeLeft == -1) {
-                    clearTimeout(timerId);
-                    $('#logout-form').submit();
-
-                }else{
-                    document.getElementById("seconds").innerHTML = timeLeft;
-                    timeLeft--;
-                }
+            0% {
+                border-width: 10px;
             }
 
-            // if (document.addEventListener) {
-            // window.addEventListener('pageshow', function (event) {
-            //     if (event.persisted || window.performance && window.performance.navigation.type == 2) 
-            //     {
-            //         $('#logout-form').submit();
-            //         // location.reload();
-            //     }
-            // },
-            // false);
-            // }
+            25% {
+                border-width: 3px;
+            }
 
-         
-        </script>
+            50% {
+                transform: rotate(115deg);
+                border-width: 10px;
+            }
 
-            @if(Auth::user()->hasVerifiedEmail())
-                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
-                    @csrf
-                </form>
-                @include('layouts.navbars.sidebar')
-            @endif
-        @endauth
-        
-        <div class="main-content">
-            @include('layouts.navbars.navbar')
-            @include('modal.sessionmodal')
-            @yield('content')
+            75% {
+                border-width: 3px;
+            }
 
-            <div id="background" class="animate__animated animate__fadeIn" style="display: none;">
-                <div id="container">
-                    <div id="loader"></div>
-                </div> 
+            100% {
+                border-width: 10px;
+            }
+        }
+    </style>
+
+
+</head>
+
+<body class="{{ $class ?? '' }}">
+    @auth()
+
+    <script>
+        var timeLeft = 30;
+        var elem = document.getElementById('seconds');
+        var timerId;
+
+
+        // ifvisible.on("focus", function(){
+        //     clearTimeout(timerId);
+        //     timeLeft = 30;
+        // });
+
+        $('#sessionModal').modal('show');
+
+        ifvisible.on("idle", function() {
+
+            timerId = setInterval(countdown, 1000);
+            $('#sessionModal').modal('show', {
+                backdrop: 'static',
+                keyboard: false
+            });
+        });
+
+
+        ifvisible.on("wakeup", function() {
+            clearTimeout(timerId);
+            timeLeft = 30;
+        });
+
+
+        function countdown() {
+            if (timeLeft == -1) {
+                clearTimeout(timerId);
+                $('#logout-form').submit();
+
+            } else {
+                document.getElementById("seconds").innerHTML = timeLeft;
+                timeLeft--;
+            }
+        }
+
+        // if (document.addEventListener) {
+        // window.addEventListener('pageshow', function (event) {
+        //     if (event.persisted || window.performance && window.performance.navigation.type == 2) 
+        //     {
+        //         $('#logout-form').submit();
+        //         // location.reload();
+        //     }
+        // },
+        // false);
+        // }
+    </script>
+
+    @if(Auth::user()->hasVerifiedEmail())
+    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
+        @csrf
+    </form>
+    @include('layouts.navbars.sidebar')
+    @endif
+    @endauth
+
+    <div class="main-content">
+        @include('layouts.navbars.navbar')
+        @include('modal.sessionmodal')
+        @yield('content')
+
+        <div id="background" class="animate__animated animate__fadeIn" style="display: none;">
+            <div id="container">
+                <div id="loader"></div>
             </div>
-
         </div>
 
-        @guest()
-            {{-- @include('layouts.footers.guest') --}}
-        @endguest
+    </div>
+
+    @guest()
+    {{-- @include('layouts.footers.guest') --}}
+    @endguest
+
+
+    @stack('js')
+
+    <!-- Argon JS -->
+    <script src="{{ asset('argon') }}/js/argon.js?v=1.0.0"></script>
+</body>
 
- 
-        @stack('js')
-        
-        <!-- Argon JS -->
-        <script src="{{ asset('argon') }}/js/argon.js?v=1.0.0"></script>
-    </body>
 </html>
\ No newline at end of file
diff --git a/resources/views/layouts/indexfirst.blade.php b/resources/views/layouts/indexfirst.blade.php
index 7fabade..f5b4d81 100644
--- a/resources/views/layouts/indexfirst.blade.php
+++ b/resources/views/layouts/indexfirst.blade.php
@@ -7,57 +7,7 @@
     @include('includes.main.head')
 </head>
 
-<script>
-    ifvisible.setIdleDuration(100);
-    // ifvisible.idle(function(){
-    //     $('#sessionModal').modal('show');
-    //     console.log('sessionmodalshow');
-    // });
-</script>
-
-<script>
-    var timeLeft = 30;
-    var elem = document.getElementById('seconds');
-    var timerId;
-
-
-    // ifvisible.on("focus", function(){
-    //     clearTimeout(timerId);
-    //     timeLeft = 30;
-    // });
-
-    $('#sessionModal').modal('show');
-
-    ifvisible.on("idle", function() {
-
-        timerId = setInterval(countdown, 1000);
-        $('#sessionModal').modal('show', {
-            backdrop: 'static',
-            keyboard: false
-        });
-    });
-
-
-    ifvisible.on("wakeup", function() {
-        clearTimeout(timerId);
-        timeLeft = 30;
-    });
-
-
-    function countdown() {
-        if (timeLeft == -1) {
-            clearTimeout(timerId);
-            $('#logout-form').submit();
-
-        } else {
-            document.getElementById("seconds").innerHTML = timeLeft;
-            timeLeft--;
-        }
-    }
-</script>
-
 <body class="about-us bg-gray-200">
-    @include('modal.sessionmodal')
     @include('includes.main.navigation')
     @include('includes.main.header')
     <div class="card card-body shadow-xl mx-3 mx-md-4 mt-n6">
diff --git a/resources/views/modal/sessionmodal.blade.php b/resources/views/modal/sessionmodal.blade.php
index ee40be0..32636a8 100644
--- a/resources/views/modal/sessionmodal.blade.php
+++ b/resources/views/modal/sessionmodal.blade.php
@@ -1,32 +1,31 @@
 <div class="modal animate__animated animate__bounceInDown" id="sessionModal">
-    <div class="modal-dialog modal-md modal-dialog-centered">
-        <div class="modal-content">
+  <div class="modal-dialog modal-md modal-dialog-centered">
+    <div class="modal-content">
 
-          <!-- Modal Header -->
-            <div class="modal-header bg-primary">
-                <h2 class="modal-title text-white">Sesi anda akan tamat tempoh!</h2>
-                <button type="button" class="close" data-dismiss="modal">&times;</button>
-            </div>
+      <!-- Modal Header -->
+      <div class="modal-header bg-primary">
+        <h4 class="col-12 text-center modal-title text-white">Sesi anda akan tamat tempoh!</h4>
+      </div>
 
-          <!-- Modal body -->
-            <div class="modal-body">
-                <i class="fas fa-exclamation-triangle text-danger fa-1x"></i><span class="ml-2 mt-2">Sesi dalam talian anda akan tamat tempoh dalam</span>
-                
-                <div class="text-warning mx-auto text-center display-4 mt-3 mb-3">
-                    <span class="label label-warning" id="seconds">00</span><span>Saat</span>
-                    {{-- <span id="idleTime" class="label label-warning">00 seconds</span> --}}
-                </div>
+      <!-- Modal body -->
+      <div class="modal-body mx-auto text-center">
+        <i class="fas fa-exclamation-triangle text-danger fa-1x"></i><span class="ml-2 mt-2"> Sesi dalam talian anda akan tamat tempoh dalam</span>
 
-                <span>Tekan "Teruskan" untuk meneruskan urusan, atau tekan "Keluar" untuk menamatkan sesi sekarang.</span>
-               
-            </div>
+        <div class="text-warning mx-auto text-center display-4 mt-3 mb-3">
+          <span class="label label-warning" id="seconds">00</span><span> saat</span>
+          {{-- <span id="idleTime" class="label label-warning">00 seconds</span> --}}
+        </div>
 
-          <!-- Modal footer -->
-          <div class="modal-footer mx-auto text-center">
-            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="clearTimeout(timerId);">Teruskan</button>
-                <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="$('#logout-form').submit();">Keluar</button>
-          </div>
+        <span>Tekan "Teruskan" untuk meneruskan urusan, atau tekan "Keluar" untuk menamatkan sesi sekarang.</span>
 
       </div>
+
+      <!-- Modal footer -->
+      <div class="modal-footer mx-auto text-center">
+        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="clearTimeout(timerId);">Teruskan</button>
+        <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="$('#logout-form').submit();">Keluar</button>
+      </div>
+
+    </div>
   </div>
 </div>
\ No newline at end of file