diff --git a/app/Http/Controllers/PrediksiController.php b/app/Http/Controllers/PrediksiController.php
index 758b80d..1537946 100644
--- a/app/Http/Controllers/PrediksiController.php
+++ b/app/Http/Controllers/PrediksiController.php
@@ -49,6 +49,7 @@ class PrediksiController extends Controller
             'DISPEPSIA' => 'Dispepsia',
         ];
         $hasil = $mapping[$hasil] ?? $hasil;
+        $indikasi = array_map(fn($i) => $mapping[$i] ?? $i, $indikasi);
 
         // Simpan ke database
         if ($hasil != "Tidak ada hasil" && Auth::check()) {
diff --git a/public/css/prediksi.css b/public/css/prediksi.css
index b607baa..99b2bef 100644
--- a/public/css/prediksi.css
+++ b/public/css/prediksi.css
@@ -486,7 +486,7 @@
     color: var(--green-deep);
     letter-spacing: -0.3px;
     line-height: 1.2;
-    margin-bottom: 18px;
+    margin-bottom: 4px;
 }
 
 .result-divider {
@@ -626,3 +626,136 @@
     box-shadow: 0 6px 20px rgba(45,90,61,0.35);
     transform: translateY(-1px);
 }
+
+/* ─── Tombol Apa Itu (link style) ─── */
+.btn-apa-itu {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    color: var(--green-mid);
+    font-weight: 500;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+    font-family: 'Plus Jakarta Sans', sans-serif;
+    margin-bottom: 14px;
+    transition: color 0.2s;
+}
+.btn-apa-itu:hover { color: var(--green-deep); }
+
+/* ─── Kotak Indikasi Lain ─── */
+.indikasi-box {
+    background: rgba(255, 255, 255, 0.6);
+    border: 1px solid rgba(245, 217, 122, 0.5);
+    border-radius: 10px;
+    padding: 10px 12px;
+    margin-bottom: 14px;
+}
+.indikasi-label {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.7px;
+    color: #9a6c00;
+    margin-bottom: 8px;
+}
+.indikasi-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 0;
+}
+.indikasi-item + .indikasi-item {
+    border-top: 1px solid rgba(245, 217, 122, 0.3);
+    margin-top: 4px;
+    padding-top: 8px;
+}
+.indikasi-name {
+    font-size: 13px;
+    color: var(--text-dark);
+    font-weight: 600;
+}
+.indikasi-sub {
+    font-size: 10.5px;
+    color: var(--text-muted);
+    font-weight: 400;
+    margin-top: 2px;
+}
+
+/* ─── Tombol Pelajari (di indikasi) ─── */
+.btn-pelajari.inline {
+    font-size: 11px;
+    color: var(--green-mid);
+    border: 1px solid var(--green-mid);
+    border-radius: 20px;
+    padding: 2px 9px;
+    background: transparent;
+    cursor: pointer;
+    font-weight: 500;
+    font-family: 'Plus Jakarta Sans', sans-serif;
+    transition: all 0.2s;
+}
+.btn-pelajari.inline:hover {
+    background: var(--green-mid);
+    color: white;
+}
+
+/* ─── Modal Pelajari Penyakit ─── */
+.disease-modal-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(28, 43, 34, 0.5);
+    z-index: 9999;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(3px);
+}
+.disease-modal-overlay.show {
+    display: flex;
+}
+.disease-modal-box {
+    background: var(--white);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-md);
+    padding: 36px 32px 32px;
+    max-width: 420px;
+    width: 90%;
+    position: relative;
+    text-align: center;
+    animation: alertPop 0.25s ease;
+}
+.disease-modal-close {
+    position: absolute;
+    top: 14px;
+    right: 18px;
+    background: none;
+    border: none;
+    font-size: 18px;
+    color: var(--text-muted);
+    cursor: pointer;
+    line-height: 1;
+    transition: color 0.2s;
+}
+.disease-modal-close:hover { color: var(--text-dark); }
+.disease-modal-icon {
+    font-size: 40px;
+    margin-bottom: 12px;
+}
+.disease-modal-title {
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--green-deep);
+    margin-bottom: 14px;
+}
+.disease-modal-desc {
+    font-size: 13px;
+    color: var(--text-muted);
+    line-height: 1.7;
+    text-align: left;
+}
diff --git a/public/css/riwayat.css b/public/css/riwayat.css
index 3f62f8c..f8d5cae 100644
--- a/public/css/riwayat.css
+++ b/public/css/riwayat.css
@@ -204,3 +204,16 @@
     padding: 4px 10px;
     border-radius: 50px;
 }
+
+/* ─── Saran ─── */
+.riwayat-saran-text {
+    font-size: 12.5px;
+    color: #5a4a00;
+    line-height: 1.65;
+    background: #fffbee;
+    border: 1px solid rgba(245, 217, 122, 0.5);
+    border-left: 3px solid #e6a800;
+    border-radius: 8px;
+    padding: 10px 13px;
+    margin: 0;
+}
diff --git a/public/css/utama.css b/public/css/utama.css
index 310a07a..d9d422b 100644
--- a/public/css/utama.css
+++ b/public/css/utama.css
@@ -469,11 +469,77 @@ body {
     #timelineSvg { display: none; }
 }
 
+/* ════════════════════════════════
+   PENYAKIT SECTION
+════════════════════════════════ */
+.penyakit-section {
+    background: var(--white);
+    padding: 80px 0;
+}
+
+.penyakit-card {
+    background: var(--white);
+    border: 1px solid rgba(125,170,110,0.2);
+    border-radius: var(--radius-lg);
+    padding: 32px 28px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    box-shadow: var(--shadow-card);
+    transition: all 0.3s ease;
+}
+.penyakit-card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--green-soft);
+}
+/* .penyakit-card.featured {
+    border-color: var(--green-mid);
+    border-width: 2px;
+} */
+
+.penyakit-icon {
+    font-size: 2rem;
+    line-height: 1;
+}
+
+.penyakit-name {
+    font-weight: 800;
+    font-size: 1.15rem;
+    color: var(--green-deep);
+    margin: 0;
+}
+
+.penyakit-desc {
+    font-size: 13px;
+    color: var(--text-muted);
+    line-height: 1.7;
+    margin: 0;
+    flex: 1;
+}
+
+/* .penyakit-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 4px;
+}
+.penyakit-tags span {
+    font-size: 11px;
+    font-weight: 600;
+    padding: 4px 10px;
+    border-radius: 50px;
+    background: var(--green-pale);
+    color: var(--green-deep);
+    border: 1px solid rgba(125,170,110,0.3);
+} */
+
 /* ════════════════════════════════
    GEJALA SECTION
 ════════════════════════════════ */
 .gejala-section {
-    background: var(--white);
+    background: var(--green-pale);
     padding: 80px 0;
 }
 
@@ -502,13 +568,13 @@ body {
 .gejala-card {
     padding: 20px;
     border-radius: var(--radius-md);
-    background: var(--green-mist);
+    background: var(--white);
     border: 1px solid transparent;
     transition: all 0.3s ease;
     height: 100%;
 }
 .gejala-card:hover {
-    background: var(--white);
+    background: var(--green-pale);
     border-color: rgba(125,170,110,0.3);
     box-shadow: var(--shadow-card);
     transform: translateY(-3px);
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index e2e5b22..deabb14 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -16,7 +16,7 @@
 <body>
     <nav class="navbar navbar-expand-lg fixed-top">
         <div class="container py-2">
-            <a class="navbar-brand" href="/">
+            <a class="navbar-brand" href="{{ url('/') }}">
                 <img src="{{ asset('img/sehati-logo.png') }}" alt="Logo SEHATI" class="navbar-logo">
                 SEHATI
             </a>
@@ -35,9 +35,10 @@
             <!-- Menu -->
             <div class="collapse navbar-collapse" id="navbarMenu">
                 <ul class="navbar-nav ms-auto align-items-lg-center gap-lg-1">
-                    <li class="nav-item"><a class="nav-link mx-1" href="/#home">Home</a></li>
-                    <li class="nav-item"><a class="nav-link mx-1" href="/#tentang">Tentang</a></li>
-                    <li class="nav-item"><a class="nav-link mx-1" href="/#gejala">Gejala</a></li>
+                    <li class="nav-item"><a class="nav-link mx-1" href="{{ url('/') }}#home">Home</a></li>
+                    <li class="nav-item"><a class="nav-link mx-1" href="{{ url('/') }}#tentang">Tentang</a></li>
+                    <li class="nav-item"><a class="nav-link mx-1" href="{{ url('/') }}#penyakit">Penyakit</a></li>
+                    <li class="nav-item"><a class="nav-link mx-1" href="{{ url('/') }}#gejala">Gejala</a></li>
                     <li class="nav-item mt-2 mt-lg-0 ms-lg-2">
                         @auth
                             <div class="dropdown">
diff --git a/resources/views/login/lupa-password.blade.php b/resources/views/login/lupa-password.blade.php
index 341f091..b29750d 100644
--- a/resources/views/login/lupa-password.blade.php
+++ b/resources/views/login/lupa-password.blade.php
@@ -40,6 +40,7 @@
                         placeholder="email@example.com"
                         value="{{ old('email') }}"
                         autocomplete="email"
+                        required
                     >
                 </div>
                 @error('email')
@@ -58,6 +59,7 @@
                         name="password"
                         class="login-input"
                         placeholder="Minimal 8 karakter"
+                        required
                     >
                 </div>
                 @error('password')
@@ -76,6 +78,7 @@
                         name="password_confirmation"
                         class="login-input"
                         placeholder="Ulangi password baru"
+                        required
                     >
                 </div>
                 <small id="pesan-konfirmasi" style="font-size:12px; margin-top:-10px; display:block;"></small>
diff --git a/resources/views/login/register.blade.php b/resources/views/login/register.blade.php
index 5ec7ead..ec1a67b 100644
--- a/resources/views/login/register.blade.php
+++ b/resources/views/login/register.blade.php
@@ -41,6 +41,7 @@
                         placeholder="email@example.com"
                         value="{{ old('email') }}"
                         autocomplete="email"
+                        required
                     >
                 </div>
                 @error('email')
@@ -60,6 +61,7 @@
                         class="login-input"
                         placeholder="Minimal 8 karakter"
                         autocomplete="new-password"
+                        required
                     >
                 </div>
                 @error('password')
@@ -79,6 +81,7 @@
                         class="login-input"
                         placeholder="Ulangi password"
                         autocomplete="new-password"
+                        required
                     >
                 </div>
                 <small id="pesan-konfirmasi" style="font-size:12px; margin-top:-10px; display:block;"></small>
diff --git a/resources/views/login/welcome.blade.php b/resources/views/login/welcome.blade.php
index 032e4e4..57383a6 100644
--- a/resources/views/login/welcome.blade.php
+++ b/resources/views/login/welcome.blade.php
@@ -29,6 +29,16 @@
             <div class="alert alert-success">{{ session('success') }}</div>
         @endif
 
+        @if ($errors->any())
+            <div class="alert alert-danger">
+                <ul style="margin:0; padding-left:15px;">
+                    @foreach ($errors->all() as $error)
+                        <li style="font-size:13px;">{{ $error }}</li>
+                    @endforeach
+                </ul>
+            </div>
+        @endif
+
         {{-- Form --}}
         <form action="{{ route('login') }}" method="POST">
             @csrf
@@ -38,7 +48,7 @@
                 <label class="login-label" for="email">Email</label>
                 <div class="login-input-wrap">
                     <i class="fa-solid fa-envelope login-input-icon"></i>
-                    <input type="email" id="email" name="email" class="login-input" placeholder="email@example.com" autocomplete="email">
+                    <input type="email" id="email" name="email" class="login-input" placeholder="email@example.com" autocomplete="email" required>
                 </div>
             </div>
 
@@ -47,7 +57,7 @@
                 <label class="login-label" for="password">Password</label>
                 <div class="login-input-wrap">
                     <i class="fa-solid fa-lock login-input-icon"></i>
-                    <input type="password" id="password" name="password" class="login-input" placeholder="Masukkan password">
+                    <input type="password" id="password" name="password" class="login-input" placeholder="Masukkan password" required>
                 </div>
             </div>
 
diff --git a/resources/views/tampilanutama/prediksi.blade.php b/resources/views/tampilanutama/prediksi.blade.php
index fd299ad..92e2624 100644
--- a/resources/views/tampilanutama/prediksi.blade.php
+++ b/resources/views/tampilanutama/prediksi.blade.php
@@ -74,8 +74,8 @@
 
                     <div class="field-group">
                         <label for="umur">Umur</label>
-                        <input type="number" id="umur" name="umur" placeholder="cth. 28" min="1" max="120">
-                        <span class="field-error" id="err-umur">Masukkan umur yang valid.</span>
+                        <input type="number" id="umur" name="umur" placeholder="cth. 28" min="15" max="120">
+                        <span class="field-error" id="err-umur"></span>
                     </div>
 
                     <div class="form-nav">
@@ -93,6 +93,7 @@
 
                     <div class="field-group">
                         <label>Pilih gejala yang sesuai</label>
+                        <p class="field-hint" style="margin-bottom: 10px;">Pilih <strong>minimal 2 gejala</strong> yang paling sesuai dengan kondisi Anda saat ini.</p>
                         <div class="symptom-grid">
                             @php
                                 $gejala = [
@@ -148,6 +149,7 @@
 
                     <div class="field-group">
                         <label>Kebiasaan Merokok</label>
+                        <small class="field-hint">Perokok aktif (≥10 batang/hari) atau perokok pasif</small>
                         <div class="radio-group">
                             <div class="radio-option">
                                 <input type="radio" name="merokok" id="rokok_tidak" value="tidak">
@@ -163,6 +165,7 @@
 
                     <div class="field-group">
                         <label>Konsumsi Alkohol</label>
+                        <small class="field-hint">Sering konsumsi lebih dari 3-4 kali dalam seminggu</small>
                         <div class="radio-group">
                             <div class="radio-option">
                                 <input type="radio" name="alkohol" id="alkohol_tidak" value="tidak">
@@ -212,10 +215,23 @@
                         </div>
 
                         <div class="disease-name">{{ $hasil }}</div>
+                        <button type="button" class="btn-apa-itu" onclick="openDiseaseModal('{{ $hasil }}')">
+                            Apa itu {{ $hasil }}?
+                        </button>
+
                         @if(!empty($indikasi))
-                            <p class="result-desc">
-                                Terdapat gejala yang juga mengarah ke: <strong>{{ implode(', ', $indikasi) }}</strong>. Disarankan untuk pemeriksaan lebih lanjut.
-                            </p>
+                            <div class="indikasi-box">
+                                <div class="indikasi-label">Indikasi lain terdeteksi</div>
+                                @foreach($indikasi as $ind)
+                                    <div class="indikasi-item">
+                                        <div>
+                                            <span class="indikasi-name">{{ $ind }}</span>
+                                            <div class="indikasi-sub">Disarankan untuk pemeriksaan lebih lanjut.</div>
+                                        </div>
+                                        <button type="button" class="btn-pelajari inline" onclick="openDiseaseModal('{{ $ind }}')">Pelajari</button>
+                                    </div>
+                                @endforeach
+                            </div>
                         @endif
 
                         <div class="result-divider"></div>
@@ -290,6 +306,15 @@
     </div>
 </div>
 
+<div class="disease-modal-overlay" id="diseaseModalOverlay" onclick="closeDiseaseModal()">
+    <div class="disease-modal-box" onclick="event.stopPropagation()">
+        <button class="disease-modal-close" onclick="closeDiseaseModal()">✕</button>
+        <div class="disease-modal-icon">🩺</div>
+        <h3 class="disease-modal-title" id="diseaseModalTitle"></h3>
+        <p class="disease-modal-desc" id="diseaseModalDesc"></p>
+    </div>
+</div>
+
 @push('scripts')
 <script>
     let currentSlide = {{ Auth::check() ? 2 : 1 }};
@@ -306,7 +331,7 @@
             clearErrors();
             if (!nama.value.trim())   { showError('nama', nama); valid = false; }
             if (!jk)                  { showError('jk');          valid = false; }
-            if (!umur.value || umur.value < 1 || umur.value > 120) {
+            if (!umur.value || umur.value < 15 || umur.value > 120) {
                 showError('umur', umur); valid = false;
             }
             return valid;
@@ -413,7 +438,24 @@
     }
 
     document.querySelectorAll('input, select').forEach(el => {
-        el.addEventListener('input', () => el.classList.remove('error'));
+    el.addEventListener('input', () => el.classList.remove('error'));
+    });
+
+    document.getElementById('umur')?.addEventListener('input', function () {
+        const val = parseInt(this.value);
+        const errEl = document.getElementById('err-umur');
+        if (this.value && val < 15) {
+            this.classList.add('error');
+            errEl.textContent = 'Umur minimal 15 tahun.';
+            errEl.classList.add('show');
+        } else if (this.value && val > 120) {
+            this.classList.add('error');
+            errEl.textContent = 'Masukkan umur yang valid.';
+            errEl.classList.add('show');
+        } else {
+            this.classList.remove('error');
+            errEl.classList.remove('show');
+        }
     });
 
     @if(isset($hasil))
@@ -429,6 +471,24 @@
         updateProgress();
     });
     @endif
+
+    const diseaseInfo = {
+        'Dispepsia': 'Dispepsia merupakan gangguan yang kompleks, mengacu pada kumpulan gejala seperti sensasi nyeri atau tak nyaman di perut bagian atas, terbakar, mual muntah, penuh dan kembung yang bersifat berulang.',
+        'Gerd': 'GERD merupakan suatu gangguan di mana isi lambung mengalami refluks secara berulang ke dalam esofagus, dan menyebabkan terjadinya gejala atau komplikasi yang mengganggu.',
+        'Gastritis': 'Gastritis adalah peradangan mukosa lambung yang dapat bersifat akut, kronik yang disebabkan rusaknya lapisan mukosa pelindung lambung.'
+    };
+
+    function openDiseaseModal(nama) {
+        const info = diseaseInfo[nama];
+        if (!info) return;
+        document.getElementById('diseaseModalTitle').textContent = nama;
+        document.getElementById('diseaseModalDesc').textContent = info;
+        document.getElementById('diseaseModalOverlay').classList.add('show');
+    }
+
+    function closeDiseaseModal() {
+        document.getElementById('diseaseModalOverlay').classList.remove('show');
+    }
 </script>
 @endpush
 
diff --git a/resources/views/tampilanutama/riwayat.blade.php b/resources/views/tampilanutama/riwayat.blade.php
index 39b0281..4b6ae87 100644
--- a/resources/views/tampilanutama/riwayat.blade.php
+++ b/resources/views/tampilanutama/riwayat.blade.php
@@ -94,6 +94,20 @@
                 </div>
                 @endif
 
+                {{-- Saran --}}
+                <div class="riwayat-section">
+                    <p class="riwayat-section-label">💡 Saran</p>
+                    <p class="riwayat-saran-text">
+                        @if($item->hasil == 'Gastritis')
+                            Makan secara teratur dan dalam porsi yang cukup, menghindari makanan pedas atau asam, tidak merokok dan tidak mengonsumsi alkohol, serta membatasi penggunaan obat anti inflamasi.
+                        @elseif($item->hasil == 'Gerd')
+                            Hindari makanan yang berpotensi memicu gejala refluks seperti kopi, minuman bersoda, makanan pedas dan asam, serta makanan dengan kandungan lemak tinggi. Selain itu, hindari merokok dan konsumsi alkohol.
+                        @elseif($item->hasil == 'Dispepsia')
+                            Makan secara teratur, mengontrol stres, serta menghindari makanan pemicu seperti makanan pedas, asam, dan tinggi lemak.
+                        @endif
+                    </p>
+                </div>
+
             </div>
             @endforeach
         </div>
diff --git a/resources/views/tampilanutama/utama.blade.php b/resources/views/tampilanutama/utama.blade.php
index a4d7e47..bcfcf08 100644
--- a/resources/views/tampilanutama/utama.blade.php
+++ b/resources/views/tampilanutama/utama.blade.php
@@ -253,6 +253,58 @@
     </div>
 </section>
 
+{{-- ════════════════════════════════
+     PENYAKIT
+════════════════════════════════ --}}
+<section id="penyakit" class="penyakit-section">
+    <div class="container">
+        <div class="text-center reveal">
+            <h2 class="section-title">Kenali Penyakitnya</h2>
+            <div class="section-divider"></div>
+        </div>
+        <div class="row g-4">
+            <div class="col-md-4 reveal reveal-delay-1">
+                <div class="penyakit-card">
+                    {{-- <div class="penyakit-icon">🌀</div> --}}
+                    <h5 class="penyakit-name">DISPEPSIA</h5>
+                    <p class="penyakit-desc">Kumpulan gejala berupa rasa nyeri atau tidak nyaman di perut bagian atas, mual, penuh dan kembung yang bersifat berulang.</p>
+                    {{-- <div class="penyakit-tags">
+                        <span>Perut Penuh</span>
+                        <span>Nafsu Makan Turun</span>
+                        <span>Kembung</span>
+                    </div> --}}
+                </div>
+            </div>
+
+            <div class="col-md-4 reveal reveal-delay-2">
+                <div class="penyakit-card featured">
+                    {{-- <div class="penyakit-icon">⚡</div> --}}
+                    <h5 class="penyakit-name">GERD</h5>
+                    <p class="penyakit-desc">Gangguan di mana isi lambung mengalami refluks secara berulang ke dalam esofagus, menyebabkan gejala atau komplikasi yang mengganggu.</p>
+                    {{-- <div class="penyakit-tags">
+                        <span>Heartburn</span>
+                        <span>Refluks Asam</span>
+                        <span>Dada Terbakar</span>
+                    </div> --}}
+                </div>
+            </div>
+
+            <div class="col-md-4 reveal reveal-delay-3">
+                <div class="penyakit-card">
+                    {{-- <div class="penyakit-icon">🔥</div> --}}
+                    <h5 class="penyakit-name">GASTRITIS</h5>
+                    <p class="penyakit-desc">Peradangan pada lapisan mukosa lambung yang dapat bersifat akut maupun kronis, akibat rusaknya lapisan pelindung lambung.</p>
+                    {{-- <div class="penyakit-tags">
+                        <span>Nyeri Ulu Hati</span>
+                        <span>Mual</span>
+                        <span>Kembung</span>
+                    </div> --}}
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
 {{-- ════════════════════════════════
      GEJALA
 ════════════════════════════════ --}}