diff --git a/public/spesified-assets/user/detail-diagnosis-modal.js b/public/spesified-assets/user/detail-diagnosis-modal.js
index 480b1b8..c0c242d 100644
--- a/public/spesified-assets/user/detail-diagnosis-modal.js
+++ b/public/spesified-assets/user/detail-diagnosis-modal.js
@@ -8,6 +8,7 @@ const headerPenyakitSolution = document.getElementById('headerPenyakitSolution')
 const rowDetailPenyakit = document.getElementById('rowDetailPenyakit');
 const detailJawabanDiagnosisTable = document.getElementById('detailJawabanDiagnosisTable');
 const tableBody = detailJawabanDiagnosisTable.querySelector('tbody');
+const placeholder = document.querySelectorAll('.placeholder');
 
 let idPenyakit = null;
 let idDiagnosis = null;
@@ -73,8 +74,6 @@ detailDiagnosisModal.addEventListener('show.bs.modal', async () => {
 function drawDetailDiagnosis(response, diagnosed) {
     if (diagnosed === false) {
         titleDetailDiagnosisModal.innerText = 'Detail Diagnosis No. ' + noHistoriDiagnosis;
-    } else {
-        titleDetailDiagnosisModal.innerText = 'Detail Diagnosis';
     }
 
     if (response.penyakit == null || response.penyakitUnidentified === true) {
@@ -89,7 +88,6 @@ function drawDetailDiagnosis(response, diagnosed) {
         headerDetailDiagnosis.classList.remove('d-none');
         subheaderDetailDiagnosis.classList.remove('d-none');
 
-        rowDetailPenyakit.classList.remove('d-none');
         const penyakitName = document.getElementById('penyakitName');
         const penyakitReason = document.getElementById('penyakitReason');
         penyakitName.innerHTML = response.penyakit.name;
@@ -117,13 +115,23 @@ function drawDetailDiagnosis(response, diagnosed) {
         });
 
         imagePenyakit.addEventListener('click', () => {
-            const chocolatInstance = Chocolat([{
-                src: assetStorage + '/' + response.penyakit.image,
-                title: response.penyakit.name,
-            }], {});
-            chocolatInstance.api.open();
+            const lebarLayar = window.innerWidth || document.documentElement.clientWidth || document
+                .body.clientWidth;
+
+            if (lebarLayar >= 992) {
+                const chocolatInstance = Chocolat([{
+                    src: assetStorage + '/' + response.penyakit.image,
+                    title: response.penyakit.name,
+                }], {});
+                chocolatInstance.api.open();
+            }
         });
     }
+
+    //remove class placeholder
+    placeholder.forEach((item) => {
+        item.classList.remove('placeholder');
+    });
 }
 
 function drawDetailJawabanDiagnosis(data) {
@@ -159,14 +167,21 @@ detailDiagnosisModal.addEventListener('hide.bs.modal', () => {
     if (chartDiagnosisPenyakit != null) {
         chartDiagnosisPenyakit.destroy();
     }
+
+    rowDetailPenyakit.classList.remove('d-none');
 });
 
 detailDiagnosisModal.addEventListener('hidden.bs.modal', () => {
+
     if (!document.body.classList.contains('modal-open')) {
         document.body.classList.add('modal-open');
     } else {
         document.body.classList.remove('modal-open');
     }
+    //add class placeholder
+    placeholder.forEach((item) => {
+        item.classList.add('placeholder');
+    });
 });
 
 function drawChart(data) {
diff --git a/public/spesified-assets/user/script.js b/public/spesified-assets/user/script.js
index 4cf8a03..4d1b79c 100644
--- a/public/spesified-assets/user/script.js
+++ b/public/spesified-assets/user/script.js
@@ -220,12 +220,18 @@ function ajaxGetGejala() {
 document.addEventListener('DOMContentLoaded', async () => {
     const notyf = new Notyf({
         position: {
-            x: 'right',
+            x: 'center',
             y: 'top',
         },
         dismissible: true,
     });
 
+    if (isUser) {
+        if (login != false) {
+            notyf.success(login);
+        }
+    }
+
     const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
     const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(
         tooltipTriggerEl))
@@ -437,15 +443,6 @@ document.addEventListener('DOMContentLoaded', async () => {
         })
     }
 
-    if (isUser) {
-        if (login && !localStorage.getItem('notyfshown')) {
-            notyf.success(login);
-            localStorage.setItem('notyfshown', true);
-        } else {
-            localStorage.removeItem('notyfshown');
-        }
-    }
-
     const openImageChocolat = document.querySelectorAll('.open-image-chocolat');
 
     openImageChocolat.forEach((element, index) => {
diff --git a/resources/views/layouts/user/footer.blade.php b/resources/views/layouts/user/footer.blade.php
index 2590ab5..7e2a88d 100644
--- a/resources/views/layouts/user/footer.blade.php
+++ b/resources/views/layouts/user/footer.blade.php
@@ -7,7 +7,7 @@
                 </p>
                 <p class="pt-3 pb-2">
                     <small>
-                        SPDHTC (Sistem Pakar Diagnosis Penyakit Tanaman Cabai) merupakan hasil dari tugas akhir tim
+                        SPDHTC (Sistem Pakar Diagnosis Penyakit Tanaman Cabai) merupakan hasil tugas akhir dari tim
                         pengembang di Prodi Teknik Informatika Politeknik negeri Banjarmasin. SPDHTC menggunakan data
                         yang diperoleh dari pakar yang berkompeten, sehingga keakuratan datanya dapat dipercaya. Latar
                         belakang mengapa SPDHTC dibangun adalah untuk membantu masyarakat, terutama para petani cabai,
diff --git a/resources/views/user/detail-diagnosis-modal.blade.php b/resources/views/user/detail-diagnosis-modal.blade.php
index 592f6a2..91d80ab 100644
--- a/resources/views/user/detail-diagnosis-modal.blade.php
+++ b/resources/views/user/detail-diagnosis-modal.blade.php
@@ -1,19 +1,19 @@
-<div class="modal fade" id="detailDiagnosisModal">
+<div class="modal fade placeholder-glow" id="detailDiagnosisModal">
     <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-fullscreen">
         <div class="modal-content">
             <div class="modal-header">
-                <h1 class="modal-title h4"></h1>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                <h1 class="modal-title h4 placeholder">Detail Diagnosis</h1>
+                <button type="button" class="btn-close placeholder" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <div class="container">
-                    <h1 id="headerDetailDiagnosis" class="font-semibold text-center pt-5 d-none">
+                    <h1 id="headerDetailDiagnosis" class="font-semibold placeholder text-center pt-5 d-none">
                     </h1>
-                    <p id="subheaderDetailDiagnosis" class="h3 font-normal text-center d-none">
+                    <p id="subheaderDetailDiagnosis" class="h3 placeholder font-normal text-center d-none">
                     </p>
                     <div class="row pt-5" id="rowDetailPenyakit">
-                        <div class="col-12">
-                            <h2 class="font-semibold pb-3">
+                        <div class="col-12 ">
+                            <h2 class="font-semibold pb-3 placeholder">
                                 Detail Penyakit
                             </h2>
                             <div class="card border border-0  shadow">
@@ -21,21 +21,22 @@
                                     <div class="row">
                                         <div class="col-12 col-lg-8 pt-5 pt-lg-0 order-1">
                                             <div class="pb-3">
-                                                <h3 class="h4">Nama Penyakit</h3>
-                                                <p class="card-text" id="penyakitName">
+                                                <h3 class="h4 placeholder">Nama Penyakit</h3>
+                                                <p class="card-text placeholder" id="penyakitName">
                                                 </p>
                                             </div>
                                             <div class="pb-3">
-                                                <h3 class="h4 ">Penyebab Penyakit</h3>
-                                                <p class="card-text" id="penyakitReason">
+                                                <h3 class="h4 placeholder">Penyebab Penyakit</h3>
+                                                <p class="card-text placeholder" id="penyakitReason">
                                                 </p>
                                             </div>
                                             <div>
-                                                <h3 id="headerPenyakitSolution" class="h4">Solusi Penyakit</h3>
+                                                <h3 id="headerPenyakitSolution" class="h4 placeholder">Solusi Penyakit
+                                                </h3>
                                             </div>
                                         </div>
                                         <div
-                                            class="col-12 col-lg-4 order-lg-2 d-flex align-items-center justify-content-center">
+                                            class="col-12 col-lg-4 order-lg-2 d-flex align-items-center justify-content-center placeholder">
                                             <div class="container-image-penyakit"
                                                 id="containerImagePenyakitDetailDiagnosisModal"
                                                 style="max-width: 350px;">
@@ -46,14 +47,14 @@ class="col-12 col-lg-4 order-lg-2 d-flex align-items-center justify-content-cent
                             </div>
                         </div>
                     </div>
-                    <div class="row py-5">
-                        <h2 class="font-semibold pb-3">
+                    <div class="row py-5 ">
+                        <h2 class="font-semibold pb-3 placeholder">
                             Histori Jawaban
                         </h2>
                         <div class="card border border-0 shadow" style="max-height: 400px; overflow-y: scroll">
                             <div class="card-body">
-                                <div class="table-responsive">
-                                    <table class="table table-striped" id="detailJawabanDiagnosisTable">
+                                <div class="table-responsive ">
+                                    <table class="table table-striped placeholder" id="detailJawabanDiagnosisTable">
                                         <thead>
                                             <tr>
                                                 <th scope="col">No</th>
@@ -68,12 +69,12 @@ class="col-12 col-lg-4 order-lg-2 d-flex align-items-center justify-content-cent
                             </div>
                         </div>
                     </div>
-                    <div class="row pb-5">
-                        <h2 class="font-semibold pb-3">
+                    <div class="row pb-5 ">
+                        <h2 class="font-semibold pb-3 placeholder">
                             Persentase Penyakit
                         </h2>
                         <div class="card border border-0 shadow">
-                            <div class="card-body">
+                            <div class="card-body placeholder">
                                 <canvas id="chartDiagnosisPenyakit" height="300"></canvas>
                             </div>
                         </div>
diff --git a/resources/views/user/user.blade.php b/resources/views/user/user.blade.php
index f3bcb4c..25920a9 100644
--- a/resources/views/user/user.blade.php
+++ b/resources/views/user/user.blade.php
@@ -29,14 +29,12 @@
                     <div class="card shadow border border-0">
                         <div class="card-body">
                             <div class="card-text">
-                                Sistem ini menggunakan metode forward chaining dalam mendiagnosis penyakit. Prosesnya
-                                dimulai dengan evaluasi gejala yang diberikan oleh pengguna, kemudian
-                                sistem akan mencocokkan dengan aturan yang ada. Jika terdapat aturan yang telah terpenuhi,
-                                sistem akan memberikan detail hasil diagnosis penyakit. Detail hasil diagnosis
-                                penyakit akan
-                                disimpan di
-                                dalam sistem. Pengguna dapat melihat kembali detail hasil diagnosis yang telah dilakukan
-                                pada histori diagnosis di menu profil.
+                                Sistem ini menggunakan metode forward chaining untuk mendiagnosis penyakit. Proses dimulai
+                                dengan mengevaluasi gejala yang diberikan oleh pengguna, kemudian sistem mencocokkannya
+                                dengan aturan yang ada. Jika terdapat aturan yang terpenuhi, sistem akan memberikan detail
+                                hasil diagnosis penyakit. Detail hasil diagnosis penyakit akan disimpan dalam sistem.
+                                Pengguna dapat melihat kembali detail hasil diagnosis yang telah dilakukan pada histori
+                                diagnosis di menu profil.
                             </div>
                             <div class="d-grid pt-3">
                                 <button id="btn-diagnosis" class="btn btn-custom1 py-2">
@@ -137,7 +135,7 @@ class="img-fluid chocolat-image"
         </div>
     </div>
     @can('asUser')
-        @section('title', 'User ' . html_entity_decode('&mdash;'))
+        @section('title', auth()->user()->name . html_entity_decode(' &mdash;'))
         @include('user.profile-modal')
         @include('user.detail-diagnosis-modal')
         @push('styleLibraries')