diff --git a/app/Http/Controllers/ForgotPasswordController.php b/app/Http/Controllers/ForgotPasswordController.php
new file mode 100644
index 0000000..6fc136e
--- /dev/null
+++ b/app/Http/Controllers/ForgotPasswordController.php
@@ -0,0 +1,69 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Password;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Auth;
+
+class ForgotPasswordController extends Controller
+{
+    // Tampilkan Form Lupa Password
+    public function showLinkRequestForm()
+    {
+        return view('auth.forgot-password');
+    }
+
+    // Kirim Link Reset ke Email
+    public function sendResetLinkEmail(Request $request)
+    {
+        $request->validate(['email' => 'required|email', 'role' => 'required|in:petani,pembeli']);
+
+        $broker = $request->role == 'petani' ? 'petanis' : 'pembelis';
+
+        $status = Password::broker($broker)->sendResetLink(
+            $request->only('email')
+        );
+
+        return $status == Password::RESET_LINK_SENT
+            ? back()->with(['status' => __($status)])
+            : back()->withErrors(['email' => __($status)]);
+    }
+
+    // Tampilkan Form Reset Password (Link dari Email)
+    public function showResetForm(Request $request, $token = null)
+    {
+        return view('auth.reset-password')->with(
+            ['token' => $token, 'email' => $request->email, 'role' => $request->role]
+        );
+    }
+
+    // Proses Simpan Password Baru
+    public function reset(Request $request)
+    {
+        $request->validate([
+            'token' => 'required',
+            'email' => 'required|email',
+            'password' => 'required|min:6|confirmed',
+        ]);
+
+        $broker = 'pembelis'; 
+        if (\App\Models\Petani::where('email', $request->email)->exists()) {
+            $broker = 'petanis';
+        }
+
+        $status = Password::broker($broker)->reset(
+            $request->only('email', 'password', 'password_confirmation', 'token'),
+            function ($user, $password) {
+                $user->forceFill([
+                    'password' => Hash::make($password)
+                ])->save();
+            }
+        );
+
+        return $status == Password::PASSWORD_RESET
+            ? redirect()->route('login')->with('success', 'Password berhasil direset! Silakan login.')
+            : back()->withErrors(['email' => __($status)]);
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/LandingController.php b/app/Http/Controllers/LandingController.php
index b105ad6..a21e26e 100644
--- a/app/Http/Controllers/LandingController.php
+++ b/app/Http/Controllers/LandingController.php
@@ -7,17 +7,31 @@
 
 class LandingController extends Controller
 {
-    public function index()
+    public function index(Request $request)
     {
-        $produks = Produk::latest()->take(8)->get();
-        return view('landing.home', compact('produks'));
+        $query = Produk::with('petani')->latest();
+        if ($request->has('kategori') && $request->kategori != '' && $request->kategori != 'Semua') {
+            $query->where('kategori', $request->kategori);
+        }
+
+        $produks = $query->take(8)->get();
+        if ($request->ajax()) {
+            return view('landing.partials.product_list', compact('produks'))->render();
+        }
+
+        $produkTerlaris = Produk::with('petani')
+            ->inRandomOrder()
+            ->take(4)
+            ->get();
+
+        return view('landing.home', compact('produks', 'produkTerlaris'));
     }
 
     public function shop(Request $request)
     {
-        $query = Produk::query();
+        $query = Produk::with('petani');
 
-        if ($request->has('search')) {
+        if ($request->has('search') && $request->search != '') {
             $query->where('nama_produk', 'like', '%' . $request->search . '%');
         }
 
diff --git a/app/Http/Controllers/PesanController.php b/app/Http/Controllers/PesanController.php
index 4da0108..3e5ad57 100644
--- a/app/Http/Controllers/PesanController.php
+++ b/app/Http/Controllers/PesanController.php
@@ -10,30 +10,23 @@
 
 class PesanController extends Controller
 {
-    // Menampilkan Daftar Percakapan (Inbox Utama)
-    public function index()
+    // Helper untuk mengambil daftar chat
+    private function getChatList($user)
     {
-        $user = $this->getAuthenticatedUser();
-        $isPetani = Auth::guard('petani')->check();
-
         $allMessages = Pesan::where(function ($q) use ($user) {
             $q->where('pengirim_id', $user->id)->where('pengirim_type', get_class($user));
         })->orWhere(function ($q) use ($user) {
             $q->where('penerima_id', $user->id)->where('penerima_type', get_class($user));
         })->orderBy('created_at', 'desc')->get();
 
-        // Kelompokkan berdasarkan ID Lawan Bicara
         $conversations = $allMessages->groupBy(function ($pesan) use ($user) {
             return $pesan->pengirim_id == $user->id
                 ? $pesan->penerima_type . '_' . $pesan->penerima_id
                 : $pesan->pengirim_type . '_' . $pesan->pengirim_id;
         });
 
-        // Format data untuk view 
-        $chatList = $conversations->map(function ($msgs) use ($user) {
+        return $conversations->map(function ($msgs) use ($user) {
             $lastMsg = $msgs->first();
-
-            // Tentukan siapa lawan bicaranya
             if ($lastMsg->pengirim_id == $user->id) {
                 $lawan = $lastMsg->penerima;
             } else {
@@ -44,28 +37,38 @@ public function index()
                 'lawan_id' => $lawan->id ?? 0,
                 'lawan_type' => get_class($lawan ?? new \stdClass),
                 'nama' => $lawan->nama_lengkap ?? 'User Terhapus',
-                'foto' => $lawan->foto ?? null,
+                'foto' => $lawan->foto ?? null, // Pastikan ada accessor url foto
                 'last_message' => $lastMsg->isi_pesan,
                 'time' => $lastMsg->created_at->diffForHumans(),
                 'unread' => $msgs->where('penerima_id', $user->id)->where('sudah_dibaca', false)->count()
             ];
         });
+    }
+
+    public function index()
+    {
+        $user = $this->getAuthenticatedUser();
+        $isPetani = Auth::guard('petani')->check();
+
+        // Panggil helper
+        $chatList = $this->getChatList($user);
 
         $view = $isPetani ? 'petani.pesan.index' : 'landing.pesan.index';
         return view($view, compact('chatList'));
     }
 
-    // Menampilkan Detail Chat 
     public function show($id)
     {
         $user = $this->getAuthenticatedUser();
         $isPetani = Auth::guard('petani')->check();
 
-        // Tentukan model lawan bicara
+        //  Ambil List Chat juga (untuk Sidebar Kiri)
+        $chatList = $this->getChatList($user);
+
+        // Logika Detail Chat (Kanan)
         $lawanType = $isPetani ? Pembeli::class : Petani::class;
         $lawan = $lawanType::findOrFail($id);
 
-        // Ambil percakapan antara User Login & Lawan Bicara
         $chats = Pesan::where(function ($q) use ($user, $lawan, $lawanType) {
             $q->where('pengirim_id', $user->id)->where('pengirim_type', get_class($user))
                 ->where('penerima_id', $lawan->id)->where('penerima_type', $lawanType);
@@ -74,22 +77,21 @@ public function show($id)
                 ->where('penerima_id', $user->id)->where('penerima_type', get_class($user));
         })->orderBy('created_at', 'asc')->get();
 
-        // Tandai pesan masuk sebagai "Sudah Dibaca"
+        // Tandai dibaca
         Pesan::where('pengirim_id', $lawan->id)->where('pengirim_type', $lawanType)
             ->where('penerima_id', $user->id)->update(['sudah_dibaca' => true]);
 
         $view = $isPetani ? 'petani.pesan.show' : 'landing.pesan.show';
-        return view($view, compact('chats', 'lawan'));
+
+        // Kirim $chatList, $chats, dan $lawan
+        return view($view, compact('chatList', 'chats', 'lawan'));
     }
 
-    // Proses Kirim Pesan 
     public function store(Request $request)
     {
         $request->validate(['isi_pesan' => 'required']);
         $user = $this->getAuthenticatedUser();
         $isPetani = Auth::guard('petani')->check();
-
-        // Menentukan tipe penerima
         $penerimaType = $isPetani ? 'App\Models\Pembeli' : 'App\Models\Petani';
 
         Pesan::create([
diff --git a/app/Models/Pembeli.php b/app/Models/Pembeli.php
index 8163fe2..4a86f06 100644
--- a/app/Models/Pembeli.php
+++ b/app/Models/Pembeli.php
@@ -4,10 +4,12 @@
 
 use Illuminate\Foundation\Auth\User as Authenticatable; 
 use Illuminate\Notifications\Notifiable;
+use Illuminate\Contracts\Auth\CanResetPassword;
+use Illuminate\Auth\Passwords\CanResetPassword as CanResetPasswordTrait;
 
-class Pembeli extends Authenticatable
+class Pembeli extends Authenticatable implements CanResetPassword
 {
-    use Notifiable;
+    use Notifiable, CanResetPasswordTrait;
 
     protected $table = 'pembelis';
 
diff --git a/app/Models/Petani.php b/app/Models/Petani.php
index 7397fc9..78c6e76 100644
--- a/app/Models/Petani.php
+++ b/app/Models/Petani.php
@@ -4,10 +4,12 @@
 
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
+use Illuminate\Contracts\Auth\CanResetPassword;
+use Illuminate\Auth\Passwords\CanResetPassword as CanResetPasswordTrait;
 
-class Petani extends Authenticatable
+class Petani extends Authenticatable implements CanResetPassword
 {
-    use Notifiable;
+    use Notifiable, CanResetPasswordTrait;
 
     protected $table = 'petanis';
 
diff --git a/app/Models/Produk.php b/app/Models/Produk.php
index e8c7ae7..8e495b9 100644
--- a/app/Models/Produk.php
+++ b/app/Models/Produk.php
@@ -14,6 +14,7 @@ class Produk extends Model
     protected $fillable = [
         'petani_id',
         'nama_produk',
+        'kategori',
         'harga',
         'stok',
         'deskripsi',
diff --git a/config/auth.php b/config/auth.php
index 3d593ed..5324a45 100644
--- a/config/auth.php
+++ b/config/auth.php
@@ -114,7 +114,23 @@
     'passwords' => [
         'users' => [
             'provider' => 'users',
-            'table' => env('AUTH_PASSWORD_RESET_TOKEN_TABLE', 'password_reset_tokens'),
+            'table' => 'password_reset_tokens',
+            'expire' => 60,
+            'throttle' => 60,
+        ],
+        
+        // untuk PETANI
+        'petanis' => [
+            'provider' => 'petanis', 
+            'table' => 'password_reset_tokens',
+            'expire' => 60,
+            'throttle' => 60,
+        ],
+
+        // untuk PEMBELI
+        'pembelis' => [
+            'provider' => 'pembelis',
+            'table' => 'password_reset_tokens',
             'expire' => 60,
             'throttle' => 60,
         ],
diff --git a/database/migrations/2025_11_25_123429_create_produks_table.php b/database/migrations/2025_11_25_123429_create_produks_table.php
index 561b5b2..6f1b948 100644
--- a/database/migrations/2025_11_25_123429_create_produks_table.php
+++ b/database/migrations/2025_11_25_123429_create_produks_table.php
@@ -10,20 +10,19 @@
      * Run the migrations.
      */
     public function up(): void
-{
-    Schema::create('produks', function (Blueprint $table) {
-        $table->id();
-        $table->foreignId('petani_id')->constrained('petanis')->onDelete('cascade');
-        
-        $table->string('nama_produk');
-        $table->decimal('harga', 12, 0);
-        $table->integer('stok');
-        $table->text('deskripsi');
-        $table->string('foto_produk')->nullable(); 
-        
-        $table->timestamps();
-    });
-}
+    {
+        Schema::create('produks', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('petani_id')->constrained('petanis')->onDelete('cascade');
+            $table->string('nama_produk');
+            $table->string('kategori')->default('Lainnya');
+            $table->decimal('harga', 12, 0);
+            $table->integer('stok');
+            $table->text('deskripsi');
+            $table->string('foto_produk')->nullable();
+            $table->timestamps();
+        });
+    }
 
     /**
      * Reverse the migrations.
diff --git a/database/migrations/2025_12_11_060158_create_password_reset_tokens_table.php b/database/migrations/2025_12_11_060158_create_password_reset_tokens_table.php
new file mode 100644
index 0000000..a6d7c00
--- /dev/null
+++ b/database/migrations/2025_12_11_060158_create_password_reset_tokens_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('password_reset_tokens', function (Blueprint $table) {
+            $table->string('email')->index();
+            $table->string('token');
+            $table->timestamp('created_at')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('password_reset_tokens');
+    }
+};
diff --git a/resources/views/auth/forgot-password.blade.php b/resources/views/auth/forgot-password.blade.php
new file mode 100644
index 0000000..95e63f2
--- /dev/null
+++ b/resources/views/auth/forgot-password.blade.php
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <title>Lupa Password - TaniDesa</title>
+    <link href="{{ asset('template/frontend/css/bootstrap.min.css') }}" rel="stylesheet">
+</head>
+<body class="d-flex align-items-center justify-content-center vh-100" style="background-color: #f0f7e6;">
+    <div class="card border-0 shadow-sm p-4" style="max-width: 400px; width: 100%;">
+        <div class="text-center mb-4">
+            <h4 class="fw-bold" style="color: #81c408;">Lupa Password?</h4>
+            <p class="text-muted small">Masukkan email dan peran Anda untuk reset password.</p>
+        </div>
+
+        @if (session('status'))
+            <div class="alert alert-success small">{{ session('status') }}</div>
+        @endif
+        @if ($errors->any())
+            <div class="alert alert-danger small">{{ $errors->first() }}</div>
+        @endif
+
+        <form action="{{ route('password.email') }}" method="POST">
+            @csrf
+            <div class="mb-3">
+                <label class="form-label small fw-bold text-muted">Saya adalah:</label>
+                <select name="role" class="form-select">
+                    <option value="pembeli">👤 Pembeli</option>
+                    <option value="petani">🌾 Petani</option>
+                </select>
+            </div>
+            <div class="mb-3">
+                <label class="form-label small fw-bold text-muted">Email Terdaftar</label>
+                <input type="email" name="email" class="form-control" required>
+            </div>
+            <div class="d-grid">
+                <button type="submit" class="btn text-white fw-bold" style="background-color: #81c408;">Kirim Link Reset</button>
+            </div>
+        </form>
+        <div class="text-center mt-3">
+            <a href="{{ route('login') }}" class="text-decoration-none small text-muted">Kembali ke Login</a>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 90fe3e9..6ce4104 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -1,96 +1,62 @@
 <!DOCTYPE html>
-<html lang="en">
-
+<html lang="id">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Masuk - TaniDesa</title>
-    
     <link href="{{ asset('template/frontend/css/bootstrap.min.css') }}" rel="stylesheet">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
     
     <style>
-        body {
-            background-color: #f4f6f9;
-            height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .card-auth {
-            width: 100%;
-            max-width: 400px;
-            border: none;
-            border-radius: 15px;
-            box-shadow: 0 0 20px rgba(0,0,0,0.05);
-        }
-        .form-control:focus {
-            border-color: #81c408; /* Warna Hijau Frontend */
-            box-shadow: 0 0 0 0.25rem rgba(129, 196, 8, 0.25);
-        }
-        .btn-tani {
-            background-color: #81c408;
-            border-color: #81c408;
-            color: white;
-            font-weight: 600;
-        }
-        .btn-tani:hover {
-            background-color: #6da705;
-            color: white;
-        }
-        .text-tani {
-            color: #81c408;
-        }
+        body { background-color: #f0f7e6; height: 100vh; display: flex; align-items: center; justify-content: center; }
+        .card-auth { max-width: 400px; width: 100%; border: none; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
+        .text-tani { color: #81c408; }
+        .btn-tani { background-color: #81c408; border-color: #81c408; color: white; font-weight: bold; }
+        .btn-tani:hover { background-color: #6da705; color: white; }
+        .form-control:focus { border-color: #81c408; box-shadow: 0 0 0 0.25rem rgba(129, 196, 8, 0.25); }
+        .cursor-pointer { cursor: pointer; }
     </style>
 </head>
-
 <body>
 
     <div class="card card-auth bg-white p-4">
         <div class="card-body">
             <div class="text-center mb-4">
                 <a href="{{ url('/') }}" class="text-decoration-none">
-                    <h1 class="text-tani display-6 fw-bold">TaniDesa</h1>
+                    <h2 class="fw-bold text-tani"><i class="fas fa-leaf me-2"></i>TaniDesa</h2>
                 </a>
-                <p class="text-muted">Masuk untuk melanjutkan</p>
+                <p class="text-muted small">Masuk untuk melanjutkan</p>
             </div>
 
-            {{-- Pesan Sukses --}}
-            @if (session('success'))
-                <div class="alert alert-success py-2" role="alert">
-                    <small>{{ session('success') }}</small>
-                </div>
-            @endif
-
-            {{-- Pesan Error --}}
-            @if ($errors->any())
-                <div class="alert alert-danger py-2">
-                    <ul class="mb-0 ps-3 small">
-                        @foreach ($errors->all() as $error)
-                            <li>{{ $error }}</li>
-                        @endforeach
-                    </ul>
-                </div>
-            @endif
+            @if(session('success')) <div class="alert alert-success py-2 small">{{ session('success') }}</div> @endif
+            @if($errors->any()) <div class="alert alert-danger py-2 small">{{ $errors->first() }}</div> @endif
 
             <form action="{{ route('login.proses') }}" method="POST">
                 @csrf
                 <div class="mb-3">
                     <label class="form-label text-muted small">Username</label>
                     <div class="input-group">
-                        <span class="input-group-text bg-light border-end-0"><i class="fas fa-user text-muted"></i></span>
+                        <span class="input-group-text bg-white border-end-0 text-tani"><i class="fas fa-user"></i></span>
                         <input type="text" name="username" class="form-control border-start-0 ps-0" placeholder="Masukkan username" required>
                     </div>
                 </div>
 
-                <div class="mb-4">
+                <div class="mb-3">
                     <label class="form-label text-muted small">Password</label>
                     <div class="input-group">
-                        <span class="input-group-text bg-light border-end-0"><i class="fas fa-lock text-muted"></i></span>
-                        <input type="password" name="password" class="form-control border-start-0 ps-0" placeholder="Masukkan password" required>
+                        <span class="input-group-text bg-white border-end-0 text-tani"><i class="fas fa-lock"></i></span>
+                        <input type="password" name="password" id="password" class="form-control border-start-0 border-end-0 ps-0" placeholder="Masukkan password" required>
+                        {{-- Icon Mata --}}
+                        <span class="input-group-text bg-white border-start-0 cursor-pointer" onclick="togglePassword('password', 'icon-pass')">
+                            <i class="fas fa-eye text-muted" id="icon-pass"></i>
+                        </span>
                     </div>
                 </div>
 
+                <div class="text-end mb-4">
+                    <a href="{{ route('password.request') }}" class="small text-muted text-decoration-none">Lupa Password?</a>
+                </div>
+
                 <div class="d-grid gap-2">
                     <button type="submit" class="btn btn-tani rounded-pill py-2">MASUK</button>
                 </div>
@@ -102,5 +68,22 @@
         </div>
     </div>
 
+    {{-- Script Show/Hide Password --}}
+    <script>
+        function togglePassword(inputId, iconId) {
+            const input = document.getElementById(inputId);
+            const icon = document.getElementById(iconId);
+            
+            if (input.type === "password") {
+                input.type = "text";
+                icon.classList.remove("fa-eye");
+                icon.classList.add("fa-eye-slash");
+            } else {
+                input.type = "password";
+                icon.classList.remove("fa-eye-slash");
+                icon.classList.add("fa-eye");
+            }
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 97d0af4..089422d 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -1,95 +1,139 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="id">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Daftar - TaniDesa</title>
-    
     <link href="{{ asset('template/frontend/css/bootstrap.min.css') }}" rel="stylesheet">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
-    
+
     <style>
         body {
-            background-color: #f4f6f9;
+            background-color: #f0f7e6;
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
-            padding: 20px 0;
+            padding: 30px 0;
         }
+
         .card-auth {
+            max-width: 500px;
             width: 100%;
-            max-width: 500px; /* Sedikit lebih lebar */
             border: none;
             border-radius: 15px;
-            box-shadow: 0 0 20px rgba(0,0,0,0.05);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
         }
-        .form-control:focus, .form-select:focus {
-            border-color: #81c408;
-            box-shadow: 0 0 0 0.25rem rgba(129, 196, 8, 0.25);
+
+        .text-tani {
+            color: #81c408;
         }
+
         .btn-tani {
             background-color: #81c408;
             border-color: #81c408;
             color: white;
-            font-weight: 600;
+            font-weight: bold;
         }
+
         .btn-tani:hover {
             background-color: #6da705;
             color: white;
         }
-        .text-tani {
-            color: #81c408;
+
+        .form-control:focus,
+        .form-select:focus {
+            border-color: #81c408;
+            box-shadow: 0 0 0 0.25rem rgba(129, 196, 8, 0.25);
         }
-        .bg-tani-light {
-            background-color: #eef8d8;
-            color: #4c7a04;
+
+        .bg-petani-info {
+            background-color: #e8f5e9;
+            border: 1px solid #c8e6c9;
+            color: #2e7d32;
+        }
+
+        .cursor-pointer {
+            cursor: pointer;
+        }
+
+        /* Style Validasi Password */
+        .valid-item {
+            color: #dc3545;
+            font-size: 0.8rem;
+            margin-bottom: 2px;
+            transition: color 0.3s;
+        }
+
+        .valid-item.valid {
+            color: #198754;
+        }
+
+        .valid-item i {
+            width: 15px;
         }
     </style>
 </head>
 
 <body>
 
-    <div class="card card-auth bg-white p-4">
+    <div class="card card-auth p-4 bg-white">
         <div class="card-body">
             <div class="text-center mb-4">
-                <a href="{{ url('/') }}" class="text-decoration-none">
-                    <h2 class="text-tani fw-bold">Daftar Akun</h2>
-                </a>
-                <p class="text-muted small">Bergabunglah dengan TaniDesa</p>
+                <h2 class="fw-bold text-tani">Daftar Akun</h2>
+                <p class="text-muted small">Gabung komunitas TaniDesa</p>
             </div>
 
             <form action="{{ route('register.proses') }}" method="POST">
                 @csrf
-                
-                {{-- Pilihan Role --}}
                 <div class="mb-3">
-                    <label class="form-label small fw-bold text-muted">Daftar Sebagai</label>
-                    <select name="role" id="role" class="form-select text-center fw-bold" onchange="toggleForm()" style="cursor: pointer;">
-                        <option value="pembeli">👤 Pembeli (Ingin Belanja)</option>
-                        <option value="petani">🌾 Petani (Ingin Jualan)</option>
+                    <label class="form-label small fw-bold text-muted">Daftar Sebagai:</label>
+                    <select name="role" id="role" class="form-select text-center fw-bold text-tani"
+                        onchange="toggleForm()">
+                        <option value="pembeli">👤 Pembeli (Belanja)</option>
+                        <option value="petani">🌾 Petani (Jualan)</option>
                     </select>
                 </div>
 
                 <div class="row">
-                    <div class="col-md-6 mb-3">
+                    <div class="col-6 mb-3">
                         <label class="form-label small text-muted">Nama Lengkap</label>
                         <input type="text" name="nama_lengkap" class="form-control" required>
                     </div>
-                    <div class="col-md-6 mb-3">
+                    <div class="col-6 mb-3">
                         <label class="form-label small text-muted">Username</label>
                         <input type="text" name="username" class="form-control" required>
                     </div>
                 </div>
 
                 <div class="mb-3">
+                    <label class="form-label small text-muted">Email</label>
+                    <input type="email" name="email" class="form-control" required>
+                </div>
+
+                {{-- PASSWORD DENGAN VALIDASI --}}
+                <div class="mb-2">
                     <label class="form-label small text-muted">Password</label>
-                    <input type="password" name="password" class="form-control" required>
+                    <div class="input-group">
+                        <input type="password" name="password" id="password" class="form-control border-end-0" required
+                            onkeyup="checkPassword()">
+                        <span class="input-group-text bg-white border-start-0 cursor-pointer"
+                            onclick="togglePassword('password', 'icon-pass')">
+                            <i class="fas fa-eye text-muted" id="icon-pass"></i>
+                        </span>
+                    </div>
+                </div>
+
+                {{-- Indikator Kekuatan Password --}}
+                <div class="mb-3 ps-1">
+                    <div id="req-length" class="valid-item"><i class="fas fa-times"></i> Minimal 8 Karakter</div>
+                    <div id="req-number" class="valid-item"><i class="fas fa-times"></i> Ada Angka (0-9)</div>
+                    <div id="req-upper" class="valid-item"><i class="fas fa-times"></i> Ada Huruf Kapital (A-Z)</div>
                 </div>
 
                 <div class="mb-3">
-                    <label class="form-label small text-muted">Nomor HP / WA</label>
+                    <label class="form-label small text-muted">Nomor HP</label>
                     <input type="number" name="no_hp" class="form-control" required>
                 </div>
 
@@ -98,34 +142,77 @@
                     <textarea name="alamat" class="form-control" rows="2" required></textarea>
                 </div>
 
-                {{-- Input Khusus Petani --}}
-                <div id="form-petani" style="display: none;" class="bg-tani-light p-3 rounded mb-3 border border-success">
-                    <label class="form-label small fw-bold"><i class="fas fa-store me-1"></i> Nama Toko / Usaha Tani</label>
-                    <input type="text" name="nama_usaha" class="form-control" placeholder="Contoh: Sayur Segar Pak Budi">
-                    <small class="d-block mt-2" style="font-size: 11px;">*Akun petani memerlukan verifikasi Admin sebelum bisa login.</small>
+                <div id="form-petani" style="display: none;" class="p-3 rounded mb-3 bg-petani-info">
+                    <label class="form-label small fw-bold"><i class="fas fa-store me-1"></i> Nama Toko</label>
+                    <input type="text" name="nama_usaha" class="form-control"
+                        placeholder="Contoh: Sayur Segar Pak Budi">
+                    <small class="d-block mt-2" style="font-size: 11px;">*Butuh verifikasi Admin.</small>
                 </div>
 
-                <div class="d-grid gap-2 mt-4">
+                <div class="d-grid mt-4">
                     <button type="submit" class="btn btn-tani rounded-pill py-2">DAFTAR SEKARANG</button>
                 </div>
             </form>
 
             <div class="text-center mt-4">
-                <small class="text-muted">Sudah punya akun? <a href="{{ route('login') }}" class="text-tani fw-bold text-decoration-none">Login</a></small>
+                <small class="text-muted">Sudah punya akun? <a href="{{ route('login') }}"
+                        class="text-tani fw-bold text-decoration-none">Login</a></small>
             </div>
         </div>
     </div>
 
     <script>
+        // Toggle Show/Hide Password
+        function togglePassword(inputId, iconId) {
+            const input = document.getElementById(inputId);
+            const icon = document.getElementById(iconId);
+            if (input.type === "password") {
+                input.type = "text";
+                icon.classList.remove("fa-eye");
+                icon.classList.add("fa-eye-slash");
+            } else {
+                input.type = "password";
+                icon.classList.remove("fa-eye-slash");
+                icon.classList.add("fa-eye");
+            }
+        }
+
+        // Toggle Form Petani
         function toggleForm() {
             var role = document.getElementById('role').value;
             var formPetani = document.getElementById('form-petani');
-            if(role === 'petani') {
-                formPetani.style.display = 'block';
+            formPetani.style.display = (role === 'petani') ? 'block' : 'none';
+        }
+
+        // Real-time Password Validator
+        function checkPassword() {
+            const password = document.getElementById('password').value;
+
+            // Regex patterns
+            const hasLength = password.length >= 8;
+            const hasNumber = /\d/.test(password);
+            const hasUpper = /[A-Z]/.test(password);
+
+            updateRequirement('req-length', hasLength);
+            updateRequirement('req-number', hasNumber);
+            updateRequirement('req-upper', hasUpper);
+        }
+
+        function updateRequirement(id, isValid) {
+            const element = document.getElementById(id);
+            const icon = element.querySelector('i');
+
+            if (isValid) {
+                element.classList.add('valid');
+                icon.classList.remove('fa-times');
+                icon.classList.add('fa-check');
             } else {
-                formPetani.style.display = 'none';
+                element.classList.remove('valid');
+                icon.classList.remove('fa-check');
+                icon.classList.add('fa-times');
             }
         }
     </script>
 </body>
-</html>
\ No newline at end of file
+
+</html>
diff --git a/resources/views/auth/reset-password.blade.php b/resources/views/auth/reset-password.blade.php
new file mode 100644
index 0000000..04ba791
--- /dev/null
+++ b/resources/views/auth/reset-password.blade.php
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="id">
+
+<head>
+    <title>Reset Password - TaniDesa</title>
+    <link href="{{ asset('template/frontend/css/bootstrap.min.css') }}" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
+    <style>
+        body {
+            background-color: #f0f7e6;
+            height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .text-tani {
+            color: #81c408;
+        }
+
+        .valid-item {
+            color: #dc3545;
+            font-size: 0.8rem;
+            margin-bottom: 2px;
+        }
+
+        .valid-item.valid {
+            color: #198754;
+        }
+
+        .cursor-pointer {
+            cursor: pointer;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="card border-0 shadow-sm p-4 bg-white" style="max-width: 400px; width: 100%;">
+        <div class="text-center mb-4">
+            <h4 class="fw-bold text-tani">Buat Password Baru</h4>
+        </div>
+
+        @if ($errors->any())
+            <div class="alert alert-danger small">{{ $errors->first() }}</div>
+        @endif
+
+        <form action="{{ route('password.update') }}" method="POST">
+            @csrf
+            <input type="hidden" name="token" value="{{ $token }}">
+
+            <div class="mb-3">
+                <label class="form-label small fw-bold text-muted">Email</label>
+                <input type="email" name="email" class="form-control" value="{{ $email ?? old('email') }}" readonly>
+            </div>
+
+            {{-- Password Baru --}}
+            <div class="mb-2">
+                <label class="form-label small fw-bold text-muted">Password Baru</label>
+                <div class="input-group">
+                    <input type="password" name="password" id="password" class="form-control border-end-0" required
+                        onkeyup="checkPassword()">
+                    <span class="input-group-text bg-white border-start-0 cursor-pointer"
+                        onclick="togglePassword('password', 'icon-1')">
+                        <i class="fas fa-eye text-muted" id="icon-1"></i>
+                    </span>
+                </div>
+            </div>
+
+            {{-- Indikator Validasi --}}
+            <div class="mb-3 ps-1">
+                <div id="req-length" class="valid-item"><i class="fas fa-times"></i> Minimal 8 Karakter</div>
+                <div id="req-number" class="valid-item"><i class="fas fa-times"></i> Ada Angka (0-9)</div>
+                <div id="req-upper" class="valid-item"><i class="fas fa-times"></i> Ada Huruf Kapital (A-Z)</div>
+            </div>
+
+            <div class="mb-4">
+                <label class="form-label small fw-bold text-muted">Ulangi Password</label>
+                <div class="input-group">
+                    <input type="password" name="password_confirmation" id="password_conf"
+                        class="form-control border-end-0" required>
+                    <span class="input-group-text bg-white border-start-0 cursor-pointer"
+                        onclick="togglePassword('password_conf', 'icon-2')">
+                        <i class="fas fa-eye text-muted" id="icon-2"></i>
+                    </span>
+                </div>
+            </div>
+
+            <div class="d-grid">
+                <button type="submit" class="btn text-white fw-bold" style="background-color: #81c408;">Simpan
+                    Password</button>
+            </div>
+        </form>
+    </div>
+
+    <script>
+        function togglePassword(inputId, iconId) {
+            const input = document.getElementById(inputId);
+            const icon = document.getElementById(iconId);
+            if (input.type === "password") {
+                input.type = "text";
+                icon.classList.remove("fa-eye");
+                icon.classList.add("fa-eye-slash");
+            } else {
+                input.type = "password";
+                icon.classList.remove("fa-eye-slash");
+                icon.classList.add("fa-eye");
+            }
+        }
+
+        function checkPassword() {
+            const password = document.getElementById('password').value;
+            updateRequirement('req-length', password.length >= 8);
+            updateRequirement('req-number', /\d/.test(password));
+            updateRequirement('req-upper', /[A-Z]/.test(password));
+        }
+
+        function updateRequirement(id, isValid) {
+            const element = document.getElementById(id);
+            const icon = element.querySelector('i');
+            if (isValid) {
+                element.classList.add('valid');
+                icon.classList.remove('fa-times');
+                icon.classList.add('fa-check');
+            } else {
+                element.classList.remove('valid');
+                icon.classList.remove('fa-check');
+                icon.classList.add('fa-times');
+            }
+        }
+    </script>
+</body>
+
+</html>
diff --git a/resources/views/landing/cart.blade.php b/resources/views/landing/cart.blade.php
index c679476..6b324b2 100644
--- a/resources/views/landing/cart.blade.php
+++ b/resources/views/landing/cart.blade.php
@@ -3,180 +3,168 @@
 @section('title', 'Keranjang Belanja')
 
 @section('content')
-    <div class="container-fluid page-header py-5">
-        <h1 class="text-center text-white display-6">Keranjang Belanja</h1>
-        <ol class="breadcrumb justify-content-center mb-0">
-            <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
-            <li class="breadcrumb-item active text-white">Cart</li>
-        </ol>
-    </div>
+    <div class="container py-5 mt-4">
+        <h2 class="mb-4 fw-bold">Keranjang Belanja</h2>
 
-    <div class="container-fluid py-5">
-        <div class="container py-5">
-            {{-- Alert Notification --}}
-            @if(session('success'))
-                <div class="alert alert-success alert-dismissible fade show" role="alert">
-                    <i class="fa fa-check-circle me-2"></i> {{ session('success') }}
-                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                </div>
-            @endif
-
-            <div class="table-responsive">
-                <table class="table">
-                    <thead>
-                        <tr>
-                            <th scope="col">Produk</th>
-                            <th scope="col">Nama</th>
-                            <th scope="col">Harga</th>
-                            <th scope="col">Jumlah</th>
-                            <th scope="col">Total</th>
-                            <th scope="col">Aksi</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        @php $total_belanja = 0; @endphp
-                        @forelse($cart as $id => $details)
-                            @php
-                                $total = $details['price'] * $details['quantity'];
-                                $total_belanja += $total;
-                            @endphp
-                            <tr data-id="{{ $id }}">
-                                <th scope="row">
-                                    <div class="d-flex align-items-center">
-                                        <img src="{{ $details['photo'] ? asset('storage/' . $details['photo']) : asset('template/frontend/img/vegetable-item-3.png') }}"
-                                            class="img-fluid me-5 rounded-circle" style="width: 80px; height: 80px;"
-                                            alt="{{ $details['name'] }}">
-                                    </div>
-                                </th>
-                                <td>
-                                    <p class="mb-0 mt-4">{{ $details['name'] }}</p>
-                                </td>
-                                <td>
-                                    <p class="mb-0 mt-4">Rp {{ number_format($details['price'], 0, ',', '.') }}</p>
-                                </td>
-                                <td>
-                                    <div class="input-group quantity mt-4" style="width: 100px;">
-                                        <div class="input-group-btn">
-                                            <button type="button" class="btn btn-sm btn-minus-custom rounded-circle bg-light border">
-                                                <i class="fa fa-minus"></i>
-                                            </button>
-                                        </div>
-
-                                        <input type="text" class="form-control form-control-sm text-center border-0 qty-input bg-white"
-                                            value="{{ $details['quantity'] }}" readonly>
-
-                                        <div class="input-group-btn">
-                                            <button type="button" class="btn btn-sm btn-plus-custom rounded-circle bg-light border">
-                                                <i class="fa fa-plus"></i>
-                                            </button>
-                                        </div>
-                                    </div>
-                                </td>
-                                <td>
-                                    <p class="mb-0 mt-4">Rp {{ number_format($total, 0, ',', '.') }}</p>
-                                </td>
-                                <td>
-                                    <form action="{{ route('cart.remove') }}" method="POST">
-                                        @csrf
-                                        @method('DELETE')
-                                        <input type="hidden" name="id" value="{{ $id }}">
-                                        <button class="btn btn-md rounded-circle bg-light border mt-4" onclick="return confirm('Hapus produk ini?')">
-                                            <i class="fa fa-times text-danger"></i>
-                                        </button>
-                                    </form>
-                                </td>
-                            </tr>
-                        @empty
-                            <tr>
-                                <td colspan="6" class="text-center py-5">
-                                    <div class="d-flex flex-column align-items-center">
-                                        <i class="fa fa-shopping-basket fa-3x text-muted mb-3"></i>
-                                        <h4>Keranjang belanja masih kosong.</h4>
-                                        <a href="{{ route('shop') }}"
-                                            class="btn btn-primary rounded-pill px-4 py-2 mt-3 text-white">Mulai Belanja</a>
-                                    </div>
-                                </td>
-                            </tr>
-                        @endforelse
-                    </tbody>
-                </table>
+        {{-- Alert Notification --}}
+        @if (session('success'))
+            <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
+                <i class="fa fa-check-circle me-2"></i> {{ session('success') }}
+                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
             </div>
+        @endif
 
-            @if (count($cart) > 0)
-                <div class="row g-4 justify-content-end">
-                    <div class="col-sm-8 col-md-7 col-lg-6 col-xl-4">
-                        <div class="bg-light rounded">
-                            <div class="p-4">
-                                <h1 class="display-6 mb-4">Total <span class="fw-normal">Belanja</span></h1>
-                                <div class="d-flex justify-content-between mb-4">
-                                    <h5 class="mb-0 me-4">Subtotal:</h5>
-                                    <p class="mb-0">Rp {{ number_format($total_belanja, 0, ',', '.') }}</p>
-                                </div>
+        @if (count($cart) > 0)
+            <div class="row g-5">
+                <div class="col-lg-8">
+                    <div class="card border-0 shadow-sm">
+                        <div class="card-body p-0">
+                            <div class="table-responsive">
+                                <table class="table align-middle mb-0">
+                                    <thead class="bg-light">
+                                        <tr>
+                                            <th class="py-3 ps-4 border-0">Produk</th>
+                                            <th class="py-3 border-0">Harga</th>
+                                            <th class="py-3 border-0">Jumlah</th>
+                                            <th class="py-3 border-0">Total</th>
+                                            <th class="py-3 pe-4 border-0 text-end"></th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        @php $total_belanja = 0; @endphp
+                                        @foreach ($cart as $id => $details)
+                                            @php
+                                                $total = $details['price'] * $details['quantity'];
+                                                $total_belanja += $total;
+                                            @endphp
+                                            <tr data-id="{{ $id }}" class="border-bottom">
+                                                <td class="ps-4 py-3">
+                                                    <div class="d-flex align-items-center">
+                                                        <img src="{{ $details['photo'] ? asset('storage/' . $details['photo']) : asset('template/frontend/img/vegetable-item-3.png') }}"
+                                                            class="rounded-3 me-3"
+                                                            style="width: 60px; height: 60px; object-fit: cover;">
+                                                        <span class="fw-bold text-dark">{{ $details['name'] }}</span>
+                                                    </div>
+                                                </td>
+                                                <td class="text-muted">Rp
+                                                    {{ number_format($details['price'], 0, ',', '.') }}</td>
+                                                <td>
+                                                    <div class="input-group quantity" style="width: 100px;">
+                                                        <button class="btn btn-sm btn-light border btn-minus-custom">
+                                                            <i class="fa fa-minus x-small"></i>
+                                                        </button>
+                                                        <input type="text"
+                                                            class="form-control form-control-sm text-center border-0 qty-input bg-white"
+                                                            value="{{ $details['quantity'] }}" readonly>
+                                                        <button class="btn btn-sm btn-light border btn-plus-custom">
+                                                            <i class="fa fa-plus x-small"></i>
+                                                        </button>
+                                                    </div>
+                                                </td>
+                                                <td class="fw-bold text-dark">Rp {{ number_format($total, 0, ',', '.') }}
+                                                </td>
+                                                <td class="pe-4 text-end">
+                                                    <form action="{{ route('cart.remove') }}" method="POST"
+                                                        class="d-inline">
+                                                        @csrf
+                                                        @method('DELETE')
+                                                        <input type="hidden" name="id" value="{{ $id }}">
+                                                        <button class="btn btn-link text-danger p-0 text-decoration-none"
+                                                            onclick="return confirm('Hapus item ini?')">
+                                                            <i class="fa fa-trash"></i>
+                                                        </button>
+                                                    </form>
+                                                </td>
+                                            </tr>
+                                        @endforeach
+                                    </tbody>
+                                </table>
                             </div>
-                            <div class="py-4 mb-4 border-top border-bottom d-flex justify-content-between px-4">
-                                <h5 class="mb-0 ps-4 me-4">Total</h5>
-                                <p class="mb-0 pe-4">Rp {{ number_format($total_belanja, 0, ',', '.') }}</p>
-                            </div>
-                            
-                            {{-- Button Checkout --}}
-                            <a href="{{ route('checkout') }}"
-                                class="btn border-secondary rounded-pill px-4 py-3 text-primary text-uppercase mb-4 ms-4"
-                                type="button">Proses Checkout</a>
                         </div>
                     </div>
                 </div>
-            @endif
-        </div>
+
+                <div class="col-lg-4">
+                    <div class="card border-0 shadow-sm bg-light">
+                        <div class="card-body p-4">
+                            <h5 class="fw-bold mb-4">Ringkasan Belanja</h5>
+                            <div class="d-flex justify-content-between mb-3">
+                                <span class="text-muted">Subtotal</span>
+                                <span class="fw-bold">Rp {{ number_format($total_belanja, 0, ',', '.') }}</span>
+                            </div>
+                            <div class="d-flex justify-content-between mb-4 border-top pt-3">
+                                <span class="fw-bold fs-5">Total</span>
+                                <span class="fw-bold fs-5 text-primary">Rp
+                                    {{ number_format($total_belanja, 0, ',', '.') }}</span>
+                            </div>
+                            <a href="{{ route('checkout') }}"
+                                class="btn btn-primary w-100 rounded-pill py-3 fw-bold shadow-sm">
+                                Checkout Sekarang
+                            </a>
+                            <a href="{{ route('shop') }}"
+                                class="btn btn-link text-muted w-100 mt-2 text-decoration-none small">
+                                Lanjut Belanja
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        @else
+            <div class="text-center py-5">
+                <div class="mb-3">
+                    <i class="fas fa-shopping-basket fa-4x text-muted opacity-25"></i>
+                </div>
+                <h4 class="text-muted fw-bold">Keranjang Kosong</h4>
+                <p class="text-muted mb-4">Yuk isi dengan beras berkualitas kami.</p>
+                <a href="{{ route('shop') }}" class="btn btn-primary rounded-pill px-5 py-3">
+                    Mulai Belanja
+                </a>
+            </div>
+        @endif
     </div>
 @endsection
 
 @section('js')
-<script>
-    $(document).ready(function () {
-        $(".quantity button").off("click"); 
+    <script>
+        $(document).ready(function() {
+            $(".quantity button").off("click");
 
-        // Event saat tombol Plus Custom diklik
-        $(".btn-plus-custom").click(function (e) {
-            e.preventDefault(); 
-            var ele = $(this);
-            var input = ele.closest("tr").find(".qty-input");
-            var currentVal = parseInt(input.val()) || 0; 
-            var newVal = currentVal + 1;
-
-            input.val(newVal);
-            
-            updateCart(ele.closest("tr").attr("data-id"), newVal);
-        });
-
-        // Event saat tombol Minus Custom diklik
-        $(".btn-minus-custom").click(function (e) {
-            e.preventDefault();
-            var ele = $(this);
-            var input = ele.closest("tr").find(".qty-input");
-            var currentVal = parseInt(input.val()) || 0;
-
-            if (currentVal > 1) {
-                var newVal = currentVal - 1;
+            $(".btn-plus-custom").click(function(e) {
+                e.preventDefault();
+                var ele = $(this);
+                var input = ele.closest("tr").find(".qty-input");
+                var currentVal = parseInt(input.val()) || 0;
+                var newVal = currentVal + 1;
                 input.val(newVal);
                 updateCart(ele.closest("tr").attr("data-id"), newVal);
-            }
-        });
+            });
 
-        // Fungsi AJAX
-        function updateCart(id, qty) {
-            $.ajax({
-                url: "{{ route('cart.update') }}",
-                method: "patch",
-                data: {
-                    _token: '{{ csrf_token() }}', 
-                    id: id, 
-                    quantity: qty
-                },
-                success: function (response) {
-                    window.location.reload(); 
+            $(".btn-minus-custom").click(function(e) {
+                e.preventDefault();
+                var ele = $(this);
+                var input = ele.closest("tr").find(".qty-input");
+                var currentVal = parseInt(input.val()) || 0;
+                if (currentVal > 1) {
+                    var newVal = currentVal - 1;
+                    input.val(newVal);
+                    updateCart(ele.closest("tr").attr("data-id"), newVal);
                 }
             });
-        }
-    });
-</script>
-@endsection
\ No newline at end of file
+
+            function updateCart(id, qty) {
+                $.ajax({
+                    url: "{{ route('cart.update') }}",
+                    method: "patch",
+                    data: {
+                        _token: '{{ csrf_token() }}',
+                        id: id,
+                        quantity: qty
+                    },
+                    success: function(response) {
+                        window.location.reload();
+                    }
+                });
+            }
+        });
+    </script>
+@endsection
diff --git a/resources/views/landing/checkout.blade.php b/resources/views/landing/checkout.blade.php
index 18b4536..20ff068 100644
--- a/resources/views/landing/checkout.blade.php
+++ b/resources/views/landing/checkout.blade.php
@@ -46,11 +46,30 @@
                                     placeholder="Tulis alamat lengkap Anda...">{{ Auth::guard('pembeli')->user()->alamat }}</textarea>
                             </div>
 
-                            <div class="mb-4">
-                                <label class="form-label fw-bold">Metode Pembayaran</label>
-                                <select name="metode_pembayaran" class="form-select">
-                                    <option value="cod" selected>Bayar di Tempat (COD)</option>
-                                </select>
+                            <div class="card border-0 shadow-sm rounded-4 mb-4">
+                                <div class="card-header bg-white py-3 border-bottom-0">
+                                    <h5 class="mb-0 fw-bold text-dark">Metode Pembayaran</h5>
+                                </div>
+                                <div class="card-body">
+
+                                    <div class="alert alert-success d-flex align-items-center border-0 shadow-sm"
+                                        role="alert" style="background-color: #d1e7dd; color: #0f5132;">
+                                        <div class="bg-white p-3 rounded-circle me-3 text-success d-flex align-items-center justify-content-center"
+                                            style="width: 50px; height: 50px;">
+                                            <i class="fas fa-hand-holding-usd fs-4"></i>
+                                        </div>
+                                        <div>
+                                            <h6 class="fw-bold mb-1">Bayar di Tempat (COD)</h6>
+                                            <p class="mb-0 small opacity-75">
+                                                Pembayaran dilakukan secara tunai langsung kepada petani/kurir saat pesanan
+                                                sampai di lokasi Anda.
+                                            </p>
+                                        </div>
+                                    </div>
+
+                                    <input type="hidden" name="metode_pembayaran" value="cod">
+
+                                </div>
                             </div>
 
                             <div class="d-grid gap-2">
diff --git a/resources/views/landing/detail.blade.php b/resources/views/landing/detail.blade.php
index fae9d48..f8bb95f 100644
--- a/resources/views/landing/detail.blade.php
+++ b/resources/views/landing/detail.blade.php
@@ -3,178 +3,196 @@
 @section('title', $produk->nama_produk)
 
 @section('content')
-    <!-- Single Page Header -->
-    <div class="container-fluid page-header py-5">
-        <h1 class="text-center text-white display-6">{{ $produk->nama_produk }}</h1>
-        <ol class="breadcrumb justify-content-center mb-0">
-            <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
-            <li class="breadcrumb-item"><a href="{{ route('shop') }}">Belanja</a></li>
-            <li class="breadcrumb-item active text-white">Detail</li>
-        </ol>
+
+    <div class="container-fluid bg-light py-3 mb-4">
+        <div class="container">
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb m-0">
+                    <li class="breadcrumb-item"><a href="{{ url('/') }}" class="text-muted text-decoration-none">Home</a>
+                    </li>
+                    <li class="breadcrumb-item"><a href="{{ route('shop') }}"
+                            class="text-muted text-decoration-none">Belanja</a></li>
+                    <li class="breadcrumb-item active text-primary fw-bold" aria-current="page">{{ $produk->nama_produk }}
+                    </li>
+                </ol>
+            </nav>
+        </div>
     </div>
 
-    <!-- Single Product Start -->
-    <div class="container-fluid py-5 mt-5">
-        <div class="container py-5">
-            <div class="row g-4 mb-5">
-                <div class="col-lg-8 col-xl-9">
-                    <div class="row g-4">
-                        <div class="col-lg-6">
-                            <div class="border rounded">
-                                <a href="#">
-                                    <img src="{{ $produk->foto_produk ? asset('storage/' . $produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
-                                        class="img-fluid rounded" alt="Image">
-                                </a>
-                            </div>
-                        </div>
-                        <div class="col-lg-6">
-                            <h4 class="fw-bold mb-3">{{ $produk->nama_produk }}</h4>
-                            <p class="mb-3">Kategori: {{ $produk->kategori ?? 'Sayuran' }}</p>
-                            <h5 class="fw-bold mb-3">Rp {{ number_format($produk->harga, 0, ',', '.') }} / kg</h5>
-                            <div class="d-flex mb-4">
-                                <i class="fa fa-star text-secondary"></i>
-                                <i class="fa fa-star text-secondary"></i>
-                                <i class="fa fa-star text-secondary"></i>
-                                <i class="fa fa-star text-secondary"></i>
-                                <i class="fa fa-star"></i>
-                            </div>
-                            <p class="mb-4">{{ $produk->deskripsi }}</p>
+    <div class="container pb-5">
+        <div class="row g-5">
+            <div class="col-lg-6">
+                <div class="rounded-4 overflow-hidden shadow-sm border position-relative bg-white">
+                    <img src="{{ $produk->foto_produk ? asset('storage/' . $produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
+                        class="img-fluid w-100" style="object-fit: cover; max-height: 500px;"
+                        alt="{{ $produk->nama_produk }}">
 
-                            {{-- Form Add to Cart --}}
-                            <form action="{{ route('cart.add') }}" method="POST">
-                                @csrf
-                                <input type="hidden" name="id" value="{{ $produk->id }}">
-                                <div class="input-group quantity mb-5" style="width: 100px;">
-                                    <div class="input-group-btn">
-                                        <button type="button" class="btn btn-sm btn-minus rounded-circle bg-light border"
-                                            onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
-                                            <i class="fa fa-minus"></i>
-                                        </button>
-                                    </div>
-                                    <input type="number" name="qty"
-                                        class="form-control form-control-sm text-center border-0" value="1"
-                                        min="1">
-                                    <div class="input-group-btn">
-                                        <button type="button" class="btn btn-sm btn-plus rounded-circle bg-light border"
-                                            onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
-                                            <i class="fa fa-plus"></i>
-                                        </button>
-                                    </div>
-                                </div>
-                                <button type="submit"
-                                    class="btn border border-secondary rounded-pill px-4 py-2 mb-4 text-primary"><i
-                                        class="fa fa-shopping-bag me-2 text-primary"></i> Masukkan Keranjang</button>
+                    <div class="position-absolute top-0 start-0 m-3">
+                        @if ($produk->stok > 0)
+                            <span class="badge bg-primary shadow-sm px-3 py-2 rounded-pill">Stok Tersedia</span>
+                        @else
+                            <span class="badge bg-danger shadow-sm px-3 py-2 rounded-pill">Stok Habis</span>
+                        @endif
+                    </div>
+                </div>
+            </div>
 
-                                <a href="{{ route('checkout', ['produk_id' => $produk->id]) }}" class="...">
-                                    Beli Sekarang
-                                </a>
-                            </form>
+            <div class="col-lg-6">
+                <div class="h-100 d-flex flex-column justify-content-center">
+
+                    <div class="mb-2">
+                        <span
+                            class="badge bg-light text-dark border border-secondary text-uppercase px-3 py-2 rounded-pill fw-bold">
+                            {{ $produk->kategori ?? 'Hasil Tani' }}
+                        </span>
+                    </div>
+
+                    <h1 class="fw-bold display-6 text-dark mb-2">{{ $produk->nama_produk }}</h1>
+
+                    <div class="mb-4">
+                        <h2 class="fw-bold text-primary display-5 mb-0">
+                            Rp {{ number_format($produk->harga, 0, ',', '.') }}
+                            <span class="fs-6 text-muted fw-normal">/ kg</span>
+                        </h2>
+                    </div>
+
+                    <p class="text-secondary mb-4" style="line-height: 1.8; font-size: 1.05rem;">
+                        {{ $produk->deskripsi }}
+                    </p>
+
+                    <div class="d-flex align-items-center bg-white border rounded-4 p-3 mb-4 shadow-sm">
+                        <div class="bg-light rounded-circle p-2 me-3 d-flex align-items-center justify-content-center text-primary"
+                            style="width: 50px; height: 50px;">
+                            <i class="fas fa-user-tie fs-4"></i>
                         </div>
-                        <button type="button" class="btn btn-outline-success rounded-pill px-4" data-bs-toggle="modal"
-                            data-bs-target="#chatModal">
-                            <i class="fa fa-envelope me-2"></i> Chat Petani
+                        <div class="flex-grow-1">
+                            <p class="mb-0 text-muted small">Dijual oleh:</p>
+                            <h6 class="mb-0 fw-bold text-dark">{{ $produk->petani->nama_lengkap ?? 'Petani Mitra' }}</h6>
+                        </div>
+                        <button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-3"
+                            data-bs-toggle="modal" data-bs-target="#chatModal">
+                            <i class="fas fa-comment-dots me-1"></i> Chat
                         </button>
-
-                        <div class="modal fade" id="chatModal" tabindex="-1">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-header">
-                                        <h5 class="modal-title">Kirim Pesan ke {{ $produk->petani->nama_lengkap }}</h5>
-                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-                                    </div>
-                                    <form action="{{ route('pesan.kirim') }}" method="POST">
-                                        @csrf
-                                        <div class="modal-body">
-                                            {{-- Hidden Input untuk Target Penerima (Petani) --}}
-                                            <input type="hidden" name="penerima_id" value="{{ $produk->petani_id }}">
-                                            <input type="hidden" name="penerima_type" value="App\Models\Petani">
-
-                                            <div class="mb-3">
-                                                <label class="form-label">Isi Pesan</label>
-                                                <textarea name="isi_pesan" class="form-control" rows="4" required
-                                                    placeholder="Halo, apakah stok produk ini masih ada?"></textarea>
-                                            </div>
-                                        </div>
-                                        <div class="modal-footer">
-                                            <button type="button" class="btn btn-secondary"
-                                                data-bs-dismiss="modal">Batal</button>
-                                            <button type="submit" class="btn btn-success">Kirim Pesan</button>
-                                        </div>
-                                    </form>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="col-lg-12">
-                            <nav>
-                                <div class="nav nav-tabs mb-3">
-                                    <button class="nav-link active border-white border-bottom-0" type="button"
-                                        role="tab" id="nav-about-tab" data-bs-toggle="tab" data-bs-target="#nav-about"
-                                        aria-controls="nav-about" aria-selected="true">Deskripsi</button>
-                                    <button class="nav-link border-white border-bottom-0" type="button" role="tab"
-                                        id="nav-mission-tab" data-bs-toggle="tab" data-bs-target="#nav-mission"
-                                        aria-controls="nav-mission" aria-selected="false">Info Petani</button>
-                                </div>
-                            </nav>
-                            <div class="tab-content mb-5">
-                                <div class="tab-pane active" id="nav-about" role="tabpanel"
-                                    aria-labelledby="nav-about-tab">
-                                    <p>{{ $produk->deskripsi }}</p>
-                                </div>
-                                <div class="tab-pane" id="nav-mission" role="tabpanel"
-                                    aria-labelledby="nav-mission-tab">
-                                    <div class="d-flex">
-                                        <img src="{{ asset('template/frontend/img/avatar.jpg') }}"
-                                            class="img-fluid rounded-circle p-3" style="width: 100px; height: 100px;"
-                                            alt="">
-                                        <div class="">
-                                            <p class="mb-2" style="font-size: 14px;">Petani Lokal</p>
-                                            <div class="d-flex justify-content-between">
-                                                <h5>{{ $produk->petani->nama_lengkap ?? 'Petani Desa' }}</h5>
-                                            </div>
-                                            <p>Produk ini ditanam dan dipanen langsung oleh petani lokal terverifikasi.</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
                     </div>
+
+                    <form action="{{ route('cart.add') }}" method="POST">
+                        @csrf
+                        <input type="hidden" name="id" value="{{ $produk->id }}">
+
+                        <div class="d-flex align-items-center mb-4 flex-wrap gap-3">
+                            <div class="input-group shadow-sm" style="width: 140px;">
+                                <button type="button" class="btn btn-light border" onclick="updateQty(-1)">
+                                    <i class="fa fa-minus small"></i>
+                                </button>
+                                <input type="number" name="qty" id="input-qty"
+                                    class="form-control text-center bg-white border-top border-bottom border-0"
+                                    value="1" min="1" max="{{ $produk->stok }}" readonly>
+                                <button type="button" class="btn btn-light border" onclick="updateQty(1)">
+                                    <i class="fa fa-plus small"></i>
+                                </button>
+                            </div>
+                            <span class="text-muted small">
+                                Sisa Stok: <strong class="text-dark">{{ $produk->stok }} Kg</strong>
+                            </span>
+                        </div>
+
+                        <div class="d-grid gap-2 d-sm-flex">
+                            <button type="submit" class="btn btn-primary btn-lg rounded-pill px-5 shadow-sm flex-grow-1">
+                                <i class="fa fa-shopping-basket me-2"></i> + Keranjang
+                            </button>
+
+                            <a href="javascript:void(0);" onclick="beliLangsung()"
+                                class="btn btn-outline-secondary btn-lg rounded-pill px-4 flex-grow-1">
+                                Beli Langsung
+                            </a>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+
+        @if (isset($produk_terkait) && count($produk_terkait) > 0)
+            <div class="mt-5 pt-5 border-top">
+                <div class="d-flex align-items-center justify-content-between mb-4">
+                    <h3 class="fw-bold m-0 text-dark">Produk Sejenis</h3>
+                    <a href="{{ route('shop') }}" class="text-primary text-decoration-none fw-bold small">
+                        Lihat Semua <i class="fas fa-arrow-right ms-1"></i>
+                    </a>
                 </div>
 
-                <!-- Sidebar -->
-                <div class="col-lg-4 col-xl-3">
-                    <div class="row g-4 fruite">
-                        <div class="col-lg-12">
-                            <div class="mb-3">
-                                <h4>Produk Terkait</h4>
-                                @foreach ($produk_terkait ?? [] as $related)
-                                    <div class="d-flex align-items-center justify-content-start mt-3">
-                                        <div class="rounded me-4" style="width: 100px; height: 100px;">
-                                            <img src="{{ $related->foto_produk ? asset('storage/' . $related->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
-                                                class="img-fluid rounded" alt="">
-                                        </div>
-                                        <div>
-                                            <h6 class="mb-2">{{ $related->nama_produk }}</h6>
-                                            <div class="d-flex mb-2">
-                                                <i class="fa fa-star text-secondary"></i>
-                                                <i class="fa fa-star text-secondary"></i>
-                                                <i class="fa fa-star text-secondary"></i>
-                                                <i class="fa fa-star text-secondary"></i>
-                                                <i class="fa fa-star"></i>
-                                            </div>
-                                            <div class="d-flex mb-2">
-                                                <h5 class="fw-bold me-2">Rp
-                                                    {{ number_format($related->harga, 0, ',', '.') }}</h5>
-                                            </div>
-                                        </div>
+                <div class="row g-4">
+                    @foreach ($produk_terkait as $related)
+                        <div class="col-6 col-md-3">
+                            <a href="{{ route('produk.detail', $related->id) }}" class="text-decoration-none">
+                                <div class="card h-100 border-0 shadow-sm overflow-hidden rounded-4">
+                                    <div class="position-relative">
+                                        <img src="{{ $related->foto_produk ? asset('storage/' . $related->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
+                                            class="card-img-top" style="height: 200px; object-fit: cover;"
+                                            alt="{{ $related->nama_produk }}">
                                     </div>
-                                @endforeach
+                                    <div class="card-body p-3">
+                                        <h6 class="fw-bold text-dark mb-1 text-truncate">{{ $related->nama_produk }}</h6>
+                                        <p class="text-primary fw-bold mb-0">Rp
+                                            {{ number_format($related->harga, 0, ',', '.') }}</p>
+                                    </div>
+                                </div>
+                            </a>
+                        </div>
+                    @endforeach
+                </div>
+            </div>
+        @endif
+    </div>
 
-                            </div>
+    <div class="modal fade" id="chatModal" tabindex="-1">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content border-0 shadow-lg rounded-4">
+                <div class="modal-header bg-primary text-white border-0 rounded-top-4">
+                    <h5 class="modal-title fw-bold">Hubungi Petani</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+                </div>
+                <form action="{{ route('pesan.kirim') }}" method="POST">
+                    @csrf
+                    <div class="modal-body p-4">
+                        <input type="hidden" name="penerima_id" value="{{ $produk->petani_id }}">
+                        <input type="hidden" name="penerima_type" value="App\Models\Petani">
+
+                        <div class="mb-3">
+                            <label class="form-label fw-bold small text-muted text-uppercase">Pesan Anda</label>
+                            <textarea name="isi_pesan" class="form-control bg-light border-0 rounded-3 p-3" rows="4" required
+                                placeholder="Halo, saya tertarik dengan produk ini..."></textarea>
                         </div>
                     </div>
-                </div>
+                    <div class="modal-footer border-0 px-4 pb-4 pt-0">
+                        <button type="button" class="btn btn-light rounded-pill px-4"
+                            data-bs-dismiss="modal">Batal</button>
+                        <button type="submit" class="btn btn-primary rounded-pill px-4 shadow-sm">
+                            <i class="fas fa-paper-plane me-2"></i> Kirim Pesan
+                        </button>
+                    </div>
+                </form>
             </div>
         </div>
     </div>
 @endsection
+@section('js')
+    <script>
+        // Fungsi untuk update input number 
+        function updateQty(change) {
+            let input = document.getElementById('input-qty');
+            let newVal = parseInt(input.value) + change;
+            let max = parseInt(input.getAttribute('max'));
+
+            if (newVal >= 1 && newVal <= max) {
+                input.value = newVal;
+            }
+        }
+
+        // Redirect dengan membawa QTY
+        function beliLangsung() {
+            let qty = document.getElementById('input-qty').value;
+            let produkId = "{{ $produk->id }}";
+            window.location.href = "{{ route('checkout') }}?produk_id=" + produkId + "&qty=" + qty;
+        }
+    </script>
+@endsection
diff --git a/resources/views/landing/home.blade.php b/resources/views/landing/home.blade.php
index a04efc5..1c2c3da 100644
--- a/resources/views/landing/home.blade.php
+++ b/resources/views/landing/home.blade.php
@@ -3,168 +3,268 @@
 @section('title', 'Beranda')
 
 @section('content')
-<!-- 1. HERO SECTION START -->
-<div class="container-fluid py-5 mb-5 hero-header">
-    <div class="container py-5">
-        <div class="row g-5 align-items-center">
-            <div class="col-md-12 col-lg-7">
-                <h4 class="mb-3 text-secondary">100% Organik & Segar</h4>
-                <h1 class="mb-5 display-3 text-primary">Sayuran & Buah Desa <br>Langsung Petani</h1>
-                <div class="position-relative mx-auto">
-                    <a href="{{ route('shop') }}" class="btn btn-primary border-2 border-secondary py-3 px-5 rounded-pill text-white" style="box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
-                        <i class="fa fa-shopping-bag me-2"></i> Belanja Sekarang
-                    </a>
+
+    <div class="container-fluid py-5 mb-5 hero-header bg-light">
+        <div class="container py-5">
+            <div class="row align-items-center g-5">
+                <div class="col-lg-6 order-2 order-lg-1">
+                    <div class="d-inline-block border border-secondary text-secondary rounded-pill px-3 py-2 mb-3 fw-bold">
+                        🌾 Mitra Petani Padi Indonesia
+                    </div>
+                    <h1 class="display-4 fw-bold text-dark mb-4">
+                        Jual Beli Gabah & <br>
+                        <span class="text-primary">Beras Berkualitas.</span>
+                    </h1>
+                    <p class="lead text-muted mb-5">
+                        Platform langsung yang menghubungkan petani padi lokal dengan pembeli.
+                        Dapatkan harga gabah terbaik dan beras segar tanpa pemutih.
+                    </p>
+                    <div class="d-flex gap-2">
+                        <a href="{{ route('shop') }}" class="btn btn-primary border-0 rounded-pill py-3 px-5 shadow">
+                            <i class="fas fa-shopping-bag me-2"></i> Belanja
+                        </a>
+                        <a href="#katalog" class="btn btn-outline-secondary rounded-pill py-3 px-5">
+                            Lihat Stok
+                        </a>
+                    </div>
                 </div>
-            </div>
-            <div class="col-md-12 col-lg-5">
-                <div id="carouselId" class="carousel slide position-relative" data-bs-ride="carousel">
-                    <div class="carousel-inner" role="listbox">
-                        <div class="carousel-item active rounded">
-                            <img src="{{ asset('template/frontend/img/hero-img-1.png') }}" class="img-fluid w-100 h-100 bg-secondary rounded" alt="Buah">
-                            <a href="#" class="btn px-4 py-2 text-white rounded">Buah-buahan</a>
-                        </div>
-                        <div class="carousel-item rounded">
-                            <img src="{{ asset('template/frontend/img/hero-img-2.jpg') }}" class="img-fluid w-100 h-100 rounded" alt="Sayur">
-                            <a href="#" class="btn px-4 py-2 text-white rounded">Sayuran</a>
+                <div class="col-lg-6 order-1 order-lg-2 text-center">
+                    <div class="position-relative d-inline-block">
+                        <img src="https://images.unsplash.com/photo-1586201375761-83865001e31c?q=80&w=1000&auto=format&fit=crop"
+                            class="img-fluid rounded-circle shadow-lg w-100" style="max-height: 450px; object-fit: cover;"
+                            alt="Padi Premium">
+                        <div class="position-absolute bg-white p-3 rounded-3 shadow d-none d-md-block"
+                            style="bottom: 30px; left: -30px;">
+                            <div class="d-flex align-items-center gap-3">
+                                <div class="bg-primary text-white rounded-circle p-2 d-flex align-items-center justify-content-center"
+                                    style="width: 40px; height: 40px;">
+                                    <i class="fas fa-check"></i>
+                                </div>
+                                <div class="text-start">
+                                    <h6 class="mb-0 fw-bold">100% Panen Baru</h6>
+                                    <small class="text-muted">Kualitas Terjamin</small>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselId" data-bs-slide="prev">
-                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                        <span class="visually-hidden">Previous</span>
-                    </button>
-                    <button class="carousel-control-next" type="button" data-bs-target="#carouselId" data-bs-slide="next">
-                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                        <span class="visually-hidden">Next</span>
-                    </button>
                 </div>
             </div>
         </div>
     </div>
-</div>
-<!-- HERO SECTION END -->
 
-<!-- 2. LAYANAN / FEATURES START (Biar terlihat profesional) -->
-<div class="container-fluid featurs py-5">
     <div class="container py-5">
         <div class="row g-4">
             <div class="col-md-6 col-lg-3">
-                <div class="featurs-item text-center rounded bg-light p-4">
-                    <div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
-                        <i class="fas fa-car-side fa-3x text-white"></i>
-                    </div>
-                    <div class="featurs-content text-center">
-                        <h5>Gratis Ongkir</h5>
-                        <p class="mb-0">Gratis untuk radius desa</p>
+                <div class="h-100 p-4 text-center bg-white border rounded-4 shadow-sm">
+                    <div class="d-inline-flex align-items-center justify-content-center bg-secondary text-white rounded-circle mb-4"
+                        style="width: 70px; height: 70px;">
+                        <i class="fas fa-truck fa-2x"></i>
                     </div>
+                    <h5 class="fw-bold mb-3">Siap Antar</h5>
+                    <p class="mb-0 text-muted">Armada pickup siap kirim langsung ke lokasi Anda.</p>
                 </div>
             </div>
             <div class="col-md-6 col-lg-3">
-                <div class="featurs-item text-center rounded bg-light p-4">
-                    <div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
-                        <i class="fas fa-user-shield fa-3x text-white"></i>
-                    </div>
-                    <div class="featurs-content text-center">
-                        <h5>Transaksi Aman</h5>
-                        <p class="mb-0">Pembayaran COD Terjamin</p>
+                <div class="h-100 p-4 text-center bg-white border rounded-4 shadow-sm">
+                    <div class="d-inline-flex align-items-center justify-content-center bg-secondary text-white rounded-circle mb-4"
+                        style="width: 70px; height: 70px;">
+                        <i class="fas fa-hand-holding-usd fa-2x"></i>
                     </div>
+                    <h5 class="fw-bold mb-3">Harga Petani</h5>
+                    <p class="mb-0 text-muted">Harga tangan pertama langsung tanpa tengkulak.</p>
                 </div>
             </div>
             <div class="col-md-6 col-lg-3">
-                <div class="featurs-item text-center rounded bg-light p-4">
-                    <div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
-                        <i class="fas fa-exchange-alt fa-3x text-white"></i>
-                    </div>
-                    <div class="featurs-content text-center">
-                        <h5>Jaminan Kualitas</h5>
-                        <p class="mb-0">Garansi produk segar</p>
+                <div class="h-100 p-4 text-center bg-white border rounded-4 shadow-sm">
+                    <div class="d-inline-flex align-items-center justify-content-center bg-secondary text-white rounded-circle mb-4"
+                        style="width: 70px; height: 70px;">
+                        <i class="fas fa-certificate fa-2x"></i>
                     </div>
+                    <h5 class="fw-bold mb-3">Kualitas Super</h5>
+                    <p class="mb-0 text-muted">Jaminan beras pulen, wangi, dan bebas pemutih.</p>
                 </div>
             </div>
             <div class="col-md-6 col-lg-3">
-                <div class="featurs-item text-center rounded bg-light p-4">
-                    <div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
-                        <i class="fa fa-phone-alt fa-3x text-white"></i>
-                    </div>
-                    <div class="featurs-content text-center">
-                        <h5>Support 24/7</h5>
-                        <p class="mb-0">Hubungi kami kapan saja</p>
+                <div class="h-100 p-4 text-center bg-white border rounded-4 shadow-sm">
+                    <div class="d-inline-flex align-items-center justify-content-center bg-secondary text-white rounded-circle mb-4"
+                        style="width: 70px; height: 70px;">
+                        <i class="fas fa-shield-alt fa-2x"></i>
                     </div>
+                    <h5 class="fw-bold mb-3">Transaksi Aman</h5>
+                    <p class="mb-0 text-muted">Pembayaran fleksibel, bisa transfer atau COD.</p>
                 </div>
             </div>
         </div>
     </div>
-</div>
 
-<!-- PRODUK TERBARU -->
-<div class="container-fluid py-5">
+    {{-- Produk terlaris --}}
     <div class="container py-5">
         <div class="text-center mx-auto mb-5" style="max-width: 700px;">
-            <h1 class="display-4">Produk Panen Terbaru</h1>
-            <p>Pilihan hasil bumi terbaik yang baru saja dipanen oleh petani lokal.</p>
+            <h1 class="display-6 fw-bold">Produk Terlaris</h1>
+            <p class="text-muted">Pilihan favorit pelanggan kami minggu ini.</p>
         </div>
         <div class="row g-4">
-            @forelse($produks as $produk)
-            <div class="col-md-6 col-lg-4 col-xl-3">
-                <div class="rounded position-relative fruite-item border border-secondary">
-                    <div class="fruite-img">
-                        <img src="{{ $produk->foto_produk ? asset('storage/'.$produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}" 
-                             class="img-fluid w-100 rounded-top" 
-                             alt="{{ $produk->nama_produk }}"
-                             style="height: 200px; object-fit: cover;">
-                    </div>
-                    <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Segar</div>
-                    <div class="p-4 border-top-0 rounded-bottom">
-                        <h5>{{ $produk->nama_produk }}</h5>
-                        <p class="text-muted">{{ Str::limit($produk->deskripsi, 45) }}</p>
-                        <div class="d-flex justify-content-between flex-lg-wrap">
-                            <p class="text-dark fs-5 fw-bold mb-0">Rp {{ number_format($produk->harga, 0, ',', '.') }} / kg</p>
-                            <a href="{{ route('produk.detail', $produk->id) }}" class="btn border border-secondary rounded-pill px-3 text-primary">
-                                <i class="fa fa-eye me-2 text-primary"></i> Detail
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            @empty
-            <div class="col-12 text-center py-5">
-                <div class="alert alert-warning d-inline-block">
-                    <i class="fas fa-exclamation-triangle me-2"></i> Belum ada produk yang dijual saat ini.
-                </div>
-            </div>
-            @endforelse
-        </div>
-        
-        <div class="text-center mt-5">
-            <a href="{{ route('shop') }}" class="btn btn-primary rounded-pill py-3 px-5 text-white">Lihat Semua Produk</a>
-        </div>
-    </div>
-</div>
 
-<!-- BANNER PROMO -->
-<div class="container-fluid banner bg-secondary my-5">
-    <div class="container py-5">
-        <div class="row g-4 align-items-center">
-            <div class="col-lg-6">
-                <div class="py-4">
-                    <h1 class="display-3 text-white">Buah Segar Eksotis</h1>
-                    <p class="fw-normal display-3 text-dark mb-4">di Toko Kami</p>
-                    <p class="mb-4 text-dark">Dapatkan harga spesial untuk pembelian grosir langsung dari kebun petani.</p>
-                    <a href="{{ route('shop') }}" class="banner-btn btn border-2 border-white rounded-pill text-dark py-3 px-5">BELANJA SEKARANG</a>
-                </div>
-            </div>
-            <div class="col-lg-6">
-                <div class="position-relative">
-                    <img src="{{ asset('template/frontend/img/baner-1.png') }}" class="img-fluid w-100 rounded" alt="">
-                    <div class="d-flex align-items-center justify-content-center bg-white rounded-circle position-absolute" style="width: 140px; height: 140px; top: 0; left: 0;">
-                        <h1 style="font-size: 50px;">%</h1>
-                        <div class="d-flex flex-column">
-                            <span class="h4 mb-0">Promo</span>
-                            <span class="h6 text-muted mb-0">Minggu Ini</span>
+            @forelse($produkTerlaris as $item)
+                <div class="col-md-6 col-lg-3">
+                    <div class="rounded position-relative border border-secondary shadow-sm overflow-hidden h-100">
+                        <div class="fruit-img">
+                            <img src="{{ $item->foto_produk ? asset('storage/' . $item->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
+                                class="img-fluid w-100" style="height: 200px; object-fit: cover;"
+                                alt="{{ $item->nama_produk }}">
+                        </div>
+
+                        <div class="text-white bg-danger px-3 py-1 rounded position-absolute"
+                            style="top: 10px; left: 10px;">
+                            Terjual {{ $item->total_terjual ?? 0 }}
+                        </div>
+
+                        <div class="p-4 border-top border-secondary bg-white d-flex flex-column"
+                            style="height: calc(100% - 200px);">
+                            <h4>{{ $item->nama_produk }}</h4>
+                            <p class="text-muted small mb-2 flex-grow-1">
+                                {{ Str::limit($item->deskripsi, 50) }}
+                            </p>
+
+                            <div class="d-flex justify-content-between align-items-end">
+                                <div>
+                                    <p class="text-dark fs-5 fw-bold mb-0">Rp {{ number_format($item->harga, 0, ',', '.') }}
+                                    </p>
+                                    <small class="text-muted">/ kg</small>
+                                </div>
+                                <a href="{{ route('produk.detail', $item->id) }}"
+                                    class="btn btn-outline-primary rounded-pill px-3">
+                                    <i class="fa fa-shopping-bag"></i>
+                                </a>
+                            </div>
                         </div>
                     </div>
                 </div>
+            @empty
+                <div class="col-12 text-center">
+                    <p class="text-muted">Belum ada data penjualan.</p>
+                </div>
+            @endforelse
+
+        </div>
+    </div>
+
+
+    <div class="container-fluid py-5 bg-light">
+        <div class="container">
+            <div class="row g-5">
+                <div class="col-md-6 col-lg-3 text-center">
+                    <i class="fas fa-users fa-3x text-primary mb-3"></i>
+                    <h2 class="fw-bold mb-0 text-secondary" data-toggle="counter-up">150+</h2>
+                    <p class="mb-0 text-muted text-uppercase fw-bold">Petani Mitra</p>
+                </div>
+                <div class="col-md-6 col-lg-3 text-center">
+                    <i class="fas fa-shopping-cart fa-3x text-primary mb-3"></i>
+                    <h2 class="fw-bold mb-0 text-secondary" data-toggle="counter-up">2,500+</h2>
+                    <p class="mb-0 text-muted text-uppercase fw-bold">Transaksi</p>
+                </div>
+                <div class="col-md-6 col-lg-3 text-center">
+                    <i class="fas fa-star fa-3x text-primary mb-3"></i>
+                    <h2 class="fw-bold mb-0 text-secondary" data-toggle="counter-up">4.8</h2>
+                    <p class="mb-0 text-muted text-uppercase fw-bold">Rating Rata-rata</p>
+                </div>
+                <div class="col-md-6 col-lg-3 text-center">
+                    <i class="fas fa-check-circle fa-3x text-primary mb-3"></i>
+                    <h2 class="fw-bold mb-0 text-secondary" data-toggle="counter-up">100%</h2>
+                    <p class="mb-0 text-muted text-uppercase fw-bold">Garansi Kualitas</p>
+                </div>
             </div>
         </div>
     </div>
-</div>
-@endsection
\ No newline at end of file
+
+    {{-- Katalog --}}
+    <div class="container py-5" id="katalog">
+        <div class="text-center mx-auto mb-5" style="max-width: 700px;">
+            <h2 class="fw-bold display-6 text-dark">Stok Gudang Kami</h2>
+            <p class="text-muted">Pilih varietas padi atau beras yang Anda butuhkan hari ini.</p>
+        </div>
+
+        <div class="row justify-content-center mb-5">
+            <div class="col-12 text-center">
+                @php $kategoris = ['Semua', 'Pandan Wangi', 'IR 64', 'Ketan', 'Merah', 'Hitam']; @endphp
+                <div class="d-flex justify-content-center flex-wrap gap-2">
+                    @foreach ($kategoris as $kategori)
+                        <button
+                            class="btn {{ $loop->first ? 'btn-primary' : 'btn-outline-primary' }} rounded-pill px-4 py-2 m-1 btn-category"
+                            data-kategori="{{ $kategori }}">
+                            {{ $kategori }}
+                        </button>
+                    @endforeach
+                </div>
+            </div>
+        </div>
+
+        <div class="row g-4" id="product-container">
+            @include('landing.partials.product_list')
+        </div>
+
+        <div class="text-center mt-5">
+            <a href="{{ route('shop') }}" class="btn btn-primary border-0 rounded-pill px-5 py-3 shadow">
+                Lihat Semua Produk
+            </a>
+        </div>
+    </div>
+
+    {{-- Banner --}}
+    <div class="container-fluid bg-primary py-5 mt-5">
+        <div class="container py-5">
+            <div class="row align-items-center">
+                <div class="col-lg-8 text-center text-lg-start mb-4 mb-lg-0">
+                    <h2 class="display-5 fw-bold text-white mb-3">Butuh Suplai Besar?</h2>
+                    <p class="fs-5 text-white mb-4 opacity-75">
+                        Kami melayani kerjasama untuk penggilingan padi, restoran, dan toko
+                        kelontong dengan harga grosir spesial.
+                    </p>
+                    <a href="https://wa.me/6281234567890" target="_blank"
+                        class="btn btn-light rounded-pill px-5 py-3 text-success fw-bold shadow">
+                        <i class="fab fa-whatsapp me-2"></i> Hubungi Kami
+                    </a>
+                </div>
+                <div class="col-lg-4 text-center">
+                    <i class="fas fa-warehouse text-white opacity-25" style="font-size: 10rem;"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@section('js')
+    <script>
+        $(document).ready(function() {
+            $('.btn-category').click(function(e) {
+                e.preventDefault();
+                let kategori = $(this).data('kategori');
+                $('.btn-category').removeClass('btn-primary').addClass('btn-outline-primary');
+                $(this).removeClass('btn-outline-primary').addClass('btn-primary');
+
+                $('#product-container').html(
+                    '<div class="col-12 text-center py-5">' +
+                    '<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status"></div>' +
+                    '<p class="mt-3 text-muted">Sedang mengambil data...</p>' +
+                    '</div>'
+                );
+
+                $.ajax({
+                    url: "{{ route('home') }}",
+                    type: "GET",
+                    data: {
+                        kategori: kategori
+                    },
+                    success: function(response) {
+                        $('#product-container').html(response);
+                    },
+                    error: function(xhr) {
+                        $('#product-container').html(
+                            '<div class="col-12 text-center text-danger">Gagal memuat data.</div>'
+                        );
+                    }
+                });
+            });
+        });
+    </script>
+@endsection
diff --git a/resources/views/landing/partials/product_list.blade.php b/resources/views/landing/partials/product_list.blade.php
new file mode 100644
index 0000000..233d9b6
--- /dev/null
+++ b/resources/views/landing/partials/product_list.blade.php
@@ -0,0 +1,62 @@
+@forelse($produks as $produk)
+    <div class="col-md-6 col-lg-4 col-xl-3 mb-4">
+        <div class="card h-100 product-card">
+            <div class="position-absolute top-0 start-0 m-3 z-1">
+                <span class="badge bg-white text-success shadow-sm">
+                    <i class="fas fa-leaf me-1"></i> {{ $produk->kategori ?? 'Padi' }}
+                </span>
+            </div>
+            
+            <div class="position-absolute top-0 end-0 m-3 z-1">
+                 <span class="badge bg-warning text-dark shadow-sm">
+                    Stok: {{ $produk->stok }} Kg
+                </span>
+            </div>
+
+            <div class="ratio ratio-4x3 overflow-hidden bg-light">
+                <img src="{{ $produk->foto_produk ? asset('storage/' . $produk->foto_produk) : 'https://images.unsplash.com/photo-1586201375761-83865001e31c?q=80&w=800&auto=format&fit=crop' }}"
+                    class="card-img-top object-fit-cover" alt="{{ $produk->nama_produk }}">
+            </div>
+
+            <div class="card-body d-flex flex-column p-4">
+                <small class="text-muted mb-1">
+                    <i class="fas fa-user-circle me-1"></i> {{ Str::limit($produk->petani->nama_lengkap ?? 'Petani Lokal', 15) }}
+                </small>
+                
+                <h5 class="fw-bold text-dark mb-2 text-truncate" title="{{ $produk->nama_produk }}">
+                    {{ $produk->nama_produk }}
+                </h5>
+
+                <p class="text-secondary small mb-3 flex-grow-1" style="line-height: 1.5;">
+                    {{ Str::limit($produk->deskripsi, 60) }}
+                </p>
+
+                <div class="d-flex justify-content-between align-items-end mt-3 border-top pt-3">
+                    <div>
+                        <small class="text-muted d-block" style="font-size: 0.8rem;">Harga per Kg</small>
+                        <h5 class="fw-bold text-success mb-0">
+                            Rp {{ number_format($produk->harga, 0, ',', '.') }}
+                        </h5>
+                    </div>
+                    <a href="{{ route('produk.detail', $produk->id) }}"
+                        class="btn btn-outline-success btn-sm stretched-link">
+                        Lihat <i class="fa fa-arrow-right ms-1"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+@empty
+    <div class="col-12">
+        <div class="text-center py-5">
+            <div class="mb-3">
+                <i class="fas fa-seedling fa-4x text-muted opacity-50"></i>
+            </div>
+            <h4 class="text-muted fw-bold">Belum Ada Panen</h4>
+            <p class="text-secondary">Produk kategori ini sedang tidak tersedia.</p>
+            <button class="btn btn-primary mt-2" onclick="location.reload()">
+                Refresh Halaman
+            </button>
+        </div>
+    </div>
+@endforelse
\ No newline at end of file
diff --git a/resources/views/landing/pesan/index.blade.php b/resources/views/landing/pesan/index.blade.php
index 0dc5a89..23cf8a5 100644
--- a/resources/views/landing/pesan/index.blade.php
+++ b/resources/views/landing/pesan/index.blade.php
@@ -1,32 +1,57 @@
 @extends('layouts.frontend')
 @section('title', 'Pesan Saya')
+
 @section('content')
-<div class="container py-5">
-    <h2 class="mb-4">Pesan Saya</h2>
-    <div class="card shadow-sm border-0">
-        <div class="list-group list-group-flush">
-            @forelse($chatList as $chat)
-                <a href="{{ route('pembeli.pesan.show', $chat['lawan_id']) }}" class="list-group-item list-group-item-action py-3 d-flex align-items-center">
-                    <img src="{{ asset('template/frontend/img/avatar.jpg') }}" class="rounded-circle me-3" width="50" height="50">
-                    <div class="flex-grow-1">
-                        <div class="d-flex w-100 justify-content-between">
-                            <h5 class="mb-1 text-primary">{{ $chat['nama'] }}</h5>
-                            <small class="text-muted">{{ $chat['time'] }}</small>
-                        </div>
-                        <p class="mb-1 text-muted">{{ Str::limit($chat['last_message'], 50) }}</p>
-                    </div>
-                    @if($chat['unread'] > 0)
-                        <span class="badge bg-danger rounded-pill ms-2">{{ $chat['unread'] }}</span>
-                    @endif
-                </a>
-            @empty
-                <div class="text-center py-5">
-                    <i class="fa fa-envelope-open fa-3x text-muted mb-3"></i>
-                    <p class="text-muted">Belum ada percakapan. Mulai chat dari halaman detail produk.</p>
-                    <a href="{{ route('shop') }}" class="btn btn-outline-primary rounded-pill">Lihat Produk</a>
+    <div class="container py-5">
+        <h2 class="mb-4 fw-bold text-dark">Pesan Saya</h2>
+
+        <div class="row g-0 chat-container">
+            <div class="col-md-4 chat-sidebar">
+                <div class="p-3 bg-white sticky-top border-bottom">
+                    <input type="text" class="form-control rounded-pill" placeholder="Cari pesan...">
                 </div>
-            @endforelse
+
+                <div class="list-group list-group-flush">
+                    @forelse($chatList as $chat)
+                        <a href="{{ route('pembeli.pesan.show', $chat['lawan_id']) }}"
+                            class="list-group-item list-group-item-action chat-list-item py-3">
+                            <div class="d-flex align-items-center">
+                                <div class="position-relative">
+                                    <img src="{{ asset('template/frontend/img/avatar.jpg') }}" class="rounded-circle"
+                                        width="50" height="50" style="object-fit: cover;">
+                                    @if ($chat['unread'] > 0)
+                                        <span
+                                            class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
+                                            {{ $chat['unread'] }}
+                                        </span>
+                                    @endif
+                                </div>
+                                <div class="ms-3 flex-grow-1 overflow-hidden">
+                                    <div class="d-flex justify-content-between align-items-center mb-1">
+                                        <h6 class="mb-0 text-dark fw-bold text-truncate">{{ $chat['nama'] }}</h6>
+                                        <small class="text-muted" style="font-size: 0.75rem;">{{ $chat['time'] }}</small>
+                                    </div>
+                                    <p class="mb-0 text-muted text-truncate small">
+                                        {{ Str::limit($chat['last_message'], 35) }}
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    @empty
+                        <div class="text-center py-5 px-3">
+                            <p class="text-muted">Belum ada percakapan.</p>
+                        </div>
+                    @endforelse
+                </div>
+            </div>
+
+            <div class="col-md-8 d-none d-md-flex flex-column align-items-center justify-content-center bg-white">
+                <div class="text-center opacity-50">
+                    <i class="fa fa-comments fa-4x text-success mb-3"></i>
+                    <h5>Selamat Datang di Chat</h5>
+                    <p>Pilih salah satu percakapan di sebelah kiri<br>untuk melihat detail pesan.</p>
+                </div>
+            </div>
         </div>
     </div>
-</div>
-@endsection
\ No newline at end of file
+@endsection
diff --git a/resources/views/landing/pesan/show.blade.php b/resources/views/landing/pesan/show.blade.php
index 5fd9c2e..280d9e9 100644
--- a/resources/views/landing/pesan/show.blade.php
+++ b/resources/views/landing/pesan/show.blade.php
@@ -1,77 +1,104 @@
 @extends('layouts.frontend')
-
 @section('title', 'Chat dengan ' . $lawan->nama_lengkap)
 
 @section('content')
-    <div class="container-fluid page-header py-5 mb-5">
-        <h1 class="text-center text-white display-6">Percakapan</h1>
-        <ol class="breadcrumb justify-content-center mb-0">
-            <li class="breadcrumb-item"><a href="{{ route('pembeli.pesan.index') }}" class="text-white">Pesan Saya</a></li>
-            <li class="breadcrumb-item active text-white">Detail</li>
-        </ol>
-    </div>
+    <div class="container py-5">
+        <div class="row g-0 chat-container">
 
-    <div class="container py-3">
-        <div class="row justify-content-center">
-            <div class="col-lg-8 col-md-10">
+            <div class="col-md-4 chat-sidebar d-none d-md-block">
+                <div class="p-3 bg-white sticky-top border-bottom">
+                    <input type="text" class="form-control rounded-pill" placeholder="Cari pesan...">
+                </div>
 
-                <div class="card border shadow-sm">
-                    <div class="card-header bg-white py-3 border-bottom d-flex align-items-center">
-                        <a href="{{ route('pembeli.pesan.index') }}"
-                            class="btn btn-sm btn-outline-secondary rounded-circle me-3">
-                            <i class="fas fa-arrow-left"></i>
-                        </a>
-                        <div>
-                            <h6 class="mb-0 fw-bold">{{ $lawan->nama_lengkap }}</h6>
-                            <small class="text-muted">Petani</small>
-                        </div>
-                    </div>
-
-                    <div class="card-body bg-light overflow-auto" id="chatBox" style="height: 500px;">
-                        @foreach ($chats as $chat)
-                            @php
-                                $isMe =
-                                    $chat->pengirim_id == Auth::guard('pembeli')->id() &&
-                                    $chat->pengirim_type == 'App\Models\Pembeli';
-                            @endphp
-
-                            <div class="d-flex mb-3 {{ $isMe ? 'justify-content-end' : 'justify-content-start' }}">
-
-                                <div class="p-3 rounded-3"
-                                    style="max-width: 75%; 
-                                        {{ $isMe ? 'background-color: #0d6efd; color: white;' : 'background-color: white; border: 1px solid #dee2e6;' }}">
-
-                                    <p class="mb-1">{{ $chat->isi_pesan }}</p>
-
-                                    <div class="text-end">
-                                        <small style="font-size: 11px; {{ $isMe ? 'color: #e0e0e0;' : 'color: #6c757d;' }}">
-                                            {{ $chat->created_at->format('H:i') }}
-                                            @if ($isMe)
-                                                <i
-                                                    class="fas fa-check {{ $chat->sudah_dibaca ? 'text-warning' : '' }} ms-1"></i>
-                                            @endif
-                                        </small>
+                <div class="list-group list-group-flush">
+                    @foreach ($chatList as $chat)
+                        <a href="{{ route('pembeli.pesan.show', $chat['lawan_id']) }}"
+                            class="list-group-item list-group-item-action chat-list-item py-3 {{ $chat['lawan_id'] == $lawan->id ? 'active' : '' }}">
+                            <div class="d-flex align-items-center">
+                                <img src="{{ asset('template/frontend/img/avatar.jpg') }}" class="rounded-circle"
+                                    width="50" height="50" style="object-fit: cover;">
+                                <div class="ms-3 flex-grow-1 overflow-hidden">
+                                    <div class="d-flex justify-content-between align-items-center mb-1">
+                                        <h6
+                                            class="mb-0 fw-bold {{ $chat['lawan_id'] == $lawan->id ? 'text-dark' : 'text-dark' }}">
+                                            {{ $chat['nama'] }}</h6>
+                                        <small
+                                            class="{{ $chat['lawan_id'] == $lawan->id ? 'text-muted' : 'text-muted' }}">{{ $chat['time'] }}</small>
                                     </div>
+                                    <p
+                                        class="mb-0 small text-truncate {{ $chat['lawan_id'] == $lawan->id ? 'text-dark' : 'text-muted' }}">
+                                        {{ Str::limit($chat['last_message'], 30) }}
+                                    </p>
                                 </div>
                             </div>
-                        @endforeach
+                        </a>
+                    @endforeach
+                </div>
+            </div>
+
+            <div class="col-md-8 chat-content">
+
+                {{-- Chat Header --}}
+                <div class="chat-header d-flex align-items-center bg-white shadow-sm">
+                    <a href="{{ route('pembeli.pesan.index') }}" class="d-md-none me-3 text-dark">
+                        <i class="fas fa-arrow-left"></i>
+                    </a>
+
+                    <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center fw-bold me-3"
+                        style="width: 45px; height: 45px;">
+                        {{ substr($lawan->nama_lengkap, 0, 1) }}
                     </div>
+                    <div>
+                        <h6 class="mb-0 fw-bold text-dark">{{ $lawan->nama_lengkap }}</h6>
+                        <small class="text-success"><i class="fas fa-store me-1"></i>{{ $lawan->nama_usaha }}</small>
+                    </div>
+                </div>
 
-                    <div class="card-footer bg-white p-3">
-                        <form action="{{ route('pesan.kirim') }}" method="POST">
-                            @csrf
-                            <input type="hidden" name="penerima_id" value="{{ $lawan->id }}">
+                {{-- Chat Box --}}
+                <div class="chat-box" id="chatBox">
+                    @forelse ($chats as $chat)
+                        @php
+                            $isMe =
+                                $chat->pengirim_id == Auth::guard('pembeli')->id() &&
+                                $chat->pengirim_type == 'App\Models\Pembeli';
+                        @endphp
 
-                            <div class="input-group">
-                                <input type="text" name="isi_pesan" class="form-control" placeholder="Tulis pesan..."
-                                    required autocomplete="off">
-                                <button type="submit" class="btn btn-primary px-4">
-                                    <i class="fas fa-paper-plane"></i>
-                                </button>
+                        <div class="d-flex {{ $isMe ? 'justify-content-end' : 'justify-content-start' }} mb-3">
+                            <div class="message-bubble shadow-sm {{ $isMe ? 'message-me' : 'message-other' }}">
+                                <div>{{ $chat->isi_pesan }}</div>
+                                <div class="text-end mt-1" style="font-size: 0.65rem; opacity: 0.8;">
+                                    {{ $chat->created_at->format('H:i') }}
+                                    @if ($isMe)
+                                        <i class="fas fa-check-double ms-1"></i>
+                                    @endif
+                                </div>
                             </div>
-                        </form>
-                    </div>
+                        </div>
+                    @empty
+                        <div class="text-center py-5 mt-5">
+                            <p class="text-muted bg-white d-inline-block px-3 py-1 rounded-pill border">Mulai percakapan
+                                dengan {{ $lawan->nama_lengkap }}</p>
+                        </div>
+                    @endforelse
+                </div>
 
+
+                {{-- Footer Chat --}}
+                <div class="chat-footer">
+                    <form action="{{ route('pesan.kirim') }}" method="POST" class="d-flex gap-2">
+                        @csrf
+                        <input type="hidden" name="penerima_id" value="{{ $lawan->id }}">
+                        <input type="hidden" name="penerima_type" value="{{ get_class($lawan) }}">
+
+                        <input type="text" name="isi_pesan" class="form-control rounded-pill border-success"
+                            placeholder="Ketik pesan..." required autocomplete="off">
+
+                        <button type="submit"
+                            class="btn btn-success rounded-circle d-flex align-items-center justify-content-center"
+                            style="width: 45px; height: 45px;">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </form>
                 </div>
             </div>
         </div>
@@ -81,8 +108,14 @@ class="fas fa-check {{ $chat->sudah_dibaca ? 'text-warning' : '' }} ms-1"></i>
 @section('js')
     <script>
         $(document).ready(function() {
-            var chatBox = document.getElementById("chatBox");
-            chatBox.scrollTop = chatBox.scrollHeight;
+            // Auto scroll ke bawah
+            const chatBox = document.getElementById("chatBox");
+            if (chatBox) {
+                chatBox.scrollTop = chatBox.scrollHeight;
+            }
+
+            // Fokus ke input
+            $('input[name="isi_pesan"]').focus();
         });
     </script>
 @endsection
diff --git a/resources/views/landing/pesanan_saya.blade.php b/resources/views/landing/pesanan_saya.blade.php
index 46ebe49..26e2df2 100644
--- a/resources/views/landing/pesanan_saya.blade.php
+++ b/resources/views/landing/pesanan_saya.blade.php
@@ -1,135 +1,151 @@
-
 @extends('layouts.frontend')
 
 @section('title', 'Pesanan Saya')
 
 @section('content')
-<div class="container py-5">
-    <h2 class="mb-4 fw-bold text-primary">Riwayat Pesanan</h2>
-
-    @if(session('success'))
-        <div class="alert alert-success alert-dismissible fade show" role="alert">
-            <i class="fa fa-check-circle me-2"></i> {{ session('success') }}
-            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+    <div class="container py-5 mt-4">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h2 class="fw-bold text-dark">Riwayat Pesanan</h2>
+            <a href="{{ route('shop') }}" class="btn btn-outline-primary btn-sm rounded-pill">
+                <i class="fas fa-plus me-1"></i> Pesan Lagi
+            </a>
         </div>
-    @endif
 
-    <div class="card border-0 shadow-sm rounded">
-        <div class="card-body">
-            @if($transaksis->isEmpty())
-                <div class="text-center py-5">
-                    <i class="fas fa-shopping-basket fa-4x text-muted mb-3"></i>
-                    <p class="text-muted">Belum ada pesanan.</p>
-                    <a href="{{ route('shop') }}" class="btn btn-primary rounded-pill">Mulai Belanja</a>
-                </div>
-            @else
-                <div class="table-responsive">
-                    <table class="table table-hover align-middle">
-    <thead class="bg-light">
-        <tr>
-            <th>Invoice</th>
-            <th>Tanggal</th>
-            <th>Produk</th>
-            <th>Total</th>
-            <th>Status</th>
-            <th>Aksi</th>
-        </tr>
-    </thead>
-    <tbody>
-        @foreach($transaksis as $trx)
-        <tr>
-            <td class="fw-bold text-primary">#{{ $trx->kode_invoice }}</td>
-            <td>{{ \Carbon\Carbon::parse($trx->tanggal_transaksi)->format('d M Y') }}</td>
-            <td>
-                {{-- Tampilkan 1 produk utama saja agar tabel rapi --}}
-                <div class="d-flex align-items-center mb-1">
-                    @php $firstItem = $trx->details->first(); @endphp
-                    <img src="{{ $firstItem->produk->foto_produk ? asset('storage/'.$firstItem->produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}" width="50" class="rounded me-2">
-                    <div>
-                        <small class="d-block fw-bold">{{ $firstItem->produk->nama_produk }}</small>
-                        @if($trx->details->count() > 1)
-                            <small class="text-muted">+ {{ $trx->details->count() - 1 }} produk lainnya</small>
-                        @else
-                            <small class="text-muted">{{ $firstItem->jumlah }} x Rp {{ number_format($firstItem->harga_satuan, 0, ',', '.') }}</small>
-                        @endif
-                    </div>
-                </div>
-            </td>
-            <td class="fw-bold">Rp {{ number_format($trx->total_harga, 0, ',', '.') }}</td>
-            <td>
-                @if($trx->status == 'menunggu_konfirmasi')
-                    <span class="badge bg-warning text-dark"><i class="fas fa-clock me-1"></i> Menunggu Konfirmasi</span>
-                @elseif($trx->status == 'diproses')
-                    <span class="badge bg-info text-white"><i class="fas fa-cog me-1"></i> Sedang Diproses</span>
-                @elseif($trx->status == 'dikirim')
-                    <span class="badge bg-primary"><i class="fas fa-truck me-1"></i> Sedang Dikirim</span>
-                @elseif($trx->status == 'selesai')
-                    <span class="badge bg-success"><i class="fas fa-check-circle me-1"></i> Selesai</span>
-                @else
-                    <span class="badge bg-danger">Dibatalkan</span>
-                @endif
-            </td>
-            <td>
-                <div class="d-flex gap-2">
-                    {{-- Tombol Detail (Trigger Modal) --}}
-                    <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill" data-bs-toggle="modal" data-bs-target="#detailModal{{ $trx->id }}">
-                        Detail
-                    </button>
+        @if (session('success'))
+            <div class="alert alert-success alert-dismissible fade show shadow-sm border-0" role="alert">
+                <i class="fa fa-check-circle me-2"></i> {{ session('success') }}
+                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+            </div>
+        @endif
 
-                    {{-- LOGIKA TOMBOL SELESAI --}}
-                    @if($trx->status == 'dikirim')
-                        <form action="{{ route('pesanan.selesai', $trx->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin barang sudah diterima dengan baik?')">
-                            @csrf
-                            <button type="submit" class="btn btn-sm btn-success rounded-pill">
-                                <i class="fas fa-check me-1"></i> Diterima
-                            </button>
-                        </form>
-                    @endif
-                </div>
-
-                {{-- MODAL DETAIL PESANAN --}}
-                <div class="modal fade" id="detailModal{{ $trx->id }}" tabindex="-1" aria-hidden="true">
-                    <div class="modal-dialog modal-lg">
-                        <div class="modal-content">
-                            <div class="modal-header">
-                                <h5 class="modal-title">Detail Pesanan #{{ $trx->kode_invoice }}</h5>
-                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                            </div>
-                            <div class="modal-body">
-                                <p><strong>Status:</strong> {{ strtoupper($trx->status) }}</p>
-                                <p><strong>Alamat Pengiriman:</strong><br>{{ $trx->alamat_pengiriman }}</p>
-                                <hr>
-                                <h6>Daftar Produk:</h6>
-                                <ul class="list-group">
-                                    @foreach($trx->details as $d)
-                                    <li class="list-group-item d-flex justify-content-between align-items-center">
-                                        <div class="d-flex align-items-center">
-                                            <img src="{{ $d->produk->foto_produk ? asset('storage/'.$d->produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}" width="40" class="me-2 rounded">
+        @if ($transaksis->isEmpty())
+            <div class="text-center py-5 bg-light rounded-3">
+                <i class="fas fa-receipt fa-4x text-muted mb-3 opacity-25"></i>
+                <h5 class="text-muted">Belum ada riwayat pesanan.</h5>
+                <a href="{{ route('shop') }}" class="btn btn-primary rounded-pill mt-3 px-4">Mulai Belanja</a>
+            </div>
+        @else
+            <div class="row">
+                @foreach ($transaksis as $trx)
+                    <div class="col-12 mb-3">
+                        <div class="card border-0 shadow-sm">
+                            <div class="card-body p-4">
+                                <div class="row align-items-center">
+                                    <div class="col-md-8">
+                                        <div class="d-flex align-items-center mb-3">
+                                            <div class="bg-light p-2 rounded me-3 text-center" style="width: 50px;">
+                                                <i class="fas fa-file-invoice text-primary fs-4"></i>
+                                            </div>
                                             <div>
-                                                {{ $d->produk->nama_produk }}
-                                                <small class="d-block text-muted">{{ $d->jumlah }} x Rp {{ number_format($d->harga_satuan, 0, ',', '.') }}</small>
+                                                <h6 class="mb-0 fw-bold">Order #{{ $trx->kode_invoice }}</h6>
+                                                <small
+                                                    class="text-muted">{{ \Carbon\Carbon::parse($trx->tanggal_transaksi)->format('d F Y') }}</small>
+                                            </div>
+                                            <div class="ms-3">
+                                                @if ($trx->status == 'menunggu_konfirmasi')
+                                                    <span
+                                                        class="badge bg-warning text-dark bg-opacity-25 border border-warning">Menunggu</span>
+                                                @elseif($trx->status == 'diproses')
+                                                    <span
+                                                        class="badge bg-info text-dark bg-opacity-25 border border-info">Diproses</span>
+                                                @elseif($trx->status == 'dikirim')
+                                                    <span
+                                                        class="badge bg-primary text-primary bg-opacity-10 border border-primary">Dikirim</span>
+                                                @elseif($trx->status == 'selesai')
+                                                    <span
+                                                        class="badge bg-success text-success bg-opacity-10 border border-success">Selesai</span>
+                                                @else
+                                                    <span
+                                                        class="badge bg-danger text-danger bg-opacity-10 border border-danger">Batal</span>
+                                                @endif
                                             </div>
                                         </div>
-                                        <span class="fw-bold">Rp {{ number_format($d->subtotal, 0, ',', '.') }}</span>
-                                    </li>
-                                    @endforeach
-                                </ul>
-                            </div>
-                            <div class="modal-footer justify-content-between">
-                                <span class="fw-bold fs-5">Total: Rp {{ number_format($trx->total_harga, 0, ',', '.') }}</span>
-                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
+
+                                        @php $firstItem = $trx->details->first(); @endphp
+                                        <div class="d-flex align-items-center bg-light rounded p-2 mt-2">
+                                            <img src="{{ $firstItem->produk->foto_produk ? asset('storage/' . $firstItem->produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
+                                                width="40" height="40" class="rounded object-fit-cover me-3">
+                                            <div class="text-truncate">
+                                                <span class="fw-bold text-dark">{{ $firstItem->produk->nama_produk }}</span>
+                                                @if ($trx->details->count() > 1)
+                                                    <span class="text-muted small ms-1">+ {{ $trx->details->count() - 1 }}
+                                                        produk lainnya</span>
+                                                @else
+                                                    <span class="text-muted small ms-1">({{ $firstItem->jumlah }} kg)</span>
+                                                @endif
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="col-md-4 text-md-end mt-3 mt-md-0">
+                                        <p class="text-muted mb-1 small">Total Belanja</p>
+                                        <h5 class="fw-bold text-primary mb-3">Rp
+                                            {{ number_format($trx->total_harga, 0, ',', '.') }}</h5>
+
+                                        <div class="d-flex justify-content-md-end gap-2">
+                                            <button class="btn btn-outline-secondary btn-sm rounded-pill px-3"
+                                                data-bs-toggle="modal" data-bs-target="#detailModal{{ $trx->id }}">
+                                                Detail
+                                            </button>
+                                            @if ($trx->status == 'dikirim')
+                                                <form action="{{ route('pesanan.selesai', $trx->id) }}" method="POST"
+                                                    onsubmit="return confirm('Konfirmasi terima barang?')">
+                                                    @csrf
+                                                    <button type="submit" class="btn btn-success btn-sm rounded-pill px-3">
+                                                        Diterima
+                                                    </button>
+                                                </form>
+                                            @endif
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            </td>
-        </tr>
-        @endforeach
-    </tbody>
-</table>
-                </div>
-            @endif
-        </div>
+
+                    {{-- MODAL DETAIL --}}
+                    <div class="modal fade" id="detailModal{{ $trx->id }}" tabindex="-1" aria-hidden="true">
+                        <div class="modal-dialog modal-dialog-centered">
+                            <div class="modal-content border-0">
+                                <div class="modal-header bg-light">
+                                    <h5 class="modal-title fw-bold">Detail #{{ $trx->kode_invoice }}</h5>
+                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                </div>
+                                <div class="modal-body">
+                                    <div class="mb-3">
+                                        <label class="fw-bold small text-muted">Alamat Pengiriman</label>
+                                        <p class="mb-0 bg-light p-2 rounded">{{ $trx->alamat_pengiriman }}</p>
+                                    </div>
+                                    <h6 class="fw-bold mt-4 mb-3">Daftar Item</h6>
+                                    <ul class="list-group list-group-flush">
+                                        @foreach ($trx->details as $d)
+                                            <li
+                                                class="list-group-item d-flex justify-content-between align-items-center px-0">
+                                                <div class="d-flex align-items-center">
+                                                    <img src="{{ $d->produk->foto_produk ? asset('storage/' . $d->produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
+                                                        width="40" height="40" class="rounded me-2 object-fit-cover">
+                                                    <div>
+                                                        <div class="fw-bold">{{ $d->produk->nama_produk }}</div>
+                                                        <small class="text-muted">{{ $d->jumlah }} kg x
+                                                            {{ number_format($d->harga_satuan, 0, ',', '.') }}</small>
+                                                    </div>
+                                                </div>
+                                                <span
+                                                    class="fw-bold text-dark">{{ number_format($d->subtotal, 0, ',', '.') }}</span>
+                                            </li>
+                                        @endforeach
+                                    </ul>
+                                </div>
+                                <div class="modal-footer justify-content-between bg-light">
+                                    <span class="text-muted small">Total Tagihan</span>
+                                    <span class="fw-bold fs-5 text-primary">Rp
+                                        {{ number_format($trx->total_harga, 0, ',', '.') }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                @endforeach
+            </div>
+        @endif
     </div>
-</div>
-@endsection
\ No newline at end of file
+@endsection
diff --git a/resources/views/landing/profile.blade.php b/resources/views/landing/profile.blade.php
index a8c3faa..e55932e 100644
--- a/resources/views/landing/profile.blade.php
+++ b/resources/views/landing/profile.blade.php
@@ -6,13 +6,16 @@
     <div class="container py-5 mt-5">
         <div class="row justify-content-center">
             <div class="col-lg-8">
-                <div class="card border-0 shadow-sm">
-                    <div class="card-header bg-white py-3">
+                <div class="card border-0 shadow-sm rounded-4">
+                    <div class="card-header bg-white py-3 border-bottom-0">
                         <h4 class="mb-0 fw-bold">Edit Profil</h4>
                     </div>
                     <div class="card-body p-4">
                         @if (session('success'))
-                            <div class="alert alert-success">{{ session('success') }}</div>
+                            <div class="alert alert-success alert-dismissible fade show" role="alert">
+                                {{ session('success') }}
+                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                            </div>
                         @endif
 
                         <form action="{{ route('pembeli.profile.update') }}" method="POST" enctype="multipart/form-data">
@@ -20,56 +23,85 @@
                             @method('PUT')
 
                             <div class="row">
-                                <div class="col-md-4 text-center mb-4">
-                                    <img src="{{ $user->foto ? asset('storage/' . $user->foto) : asset('template/frontend/img/avatar.jpg') }}"
-                                        class="rounded-circle img-thumbnail mb-3"
-                                        style="width: 150px; height: 150px; object-fit: cover;">
-                                    <div>
-                                        <label class="btn btn-sm btn-outline-secondary">
-                                            <i class="fas fa-camera me-1"></i> Ubah Foto
-                                            <input type="file" name="foto" hidden accept="image/*">
-                                        </label>
+                                <div class="col-md-4 text-center mb-4 d-flex flex-column align-items-center">
+                                    <div class="position-relative mb-3">
+                                        <img id="avatar-preview"
+                                            src="{{ $user->foto ? asset('storage/' . $user->foto) : asset('template/frontend/img/avatar.jpg') }}"
+                                            class="rounded-circle shadow-sm border"
+                                            style="width: 150px; height: 150px; object-fit: cover;">
+
+                                        <div class="position-absolute bottom-0 end-0 bg-primary rounded-circle p-2 border border-white"
+                                            style="width: 35px; height: 35px; display: flex; align-items: center; justify-content: center;">
+                                            <i class="fas fa-camera text-white small"></i>
+                                        </div>
                                     </div>
+
+                                    <div>
+                                        <label class="btn btn-sm btn-outline-primary rounded-pill px-3" for="avatar-input">
+                                            <i class="fas fa-upload me-1"></i> Pilih Foto Baru
+                                        </label>
+                                        <input type="file" name="foto" id="avatar-input" hidden accept="image/*"
+                                            onchange="previewImage()">
+                                    </div>
+                                    <small class="text-muted mt-2" style="font-size: 11px;">Format: JPG, PNG (Max.
+                                        2MB)</small>
                                 </div>
 
                                 <div class="col-md-8">
                                     <div class="mb-3">
-                                        <label class="form-label fw-bold">Nama Lengkap</label>
-                                        <input type="text" name="nama_lengkap" class="form-control"
+                                        <label class="form-label fw-bold small text-muted">NAMA LENGKAP</label>
+                                        <input type="text" name="nama_lengkap" class="form-control rounded-pill px-3"
                                             value="{{ $user->nama_lengkap }}" required>
                                     </div>
                                     <div class="mb-3">
-                                        <label class="form-label fw-bold">Email</label>
-                                        <input type="email" name="email" class="form-control"
-                                            value="{{ $user->email }}" required>
+                                        <label class="form-label fw-bold small text-muted">EMAIL</label>
+                                        <input type="email" name="email" class="form-control rounded-pill px-3 bg-light"
+                                            value="{{ $user->email }}" required readonly>
                                     </div>
                                     <div class="mb-3">
-                                        <label class="form-label fw-bold">Nomor HP</label>
-                                        <input type="text" name="no_hp" class="form-control"
+                                        <label class="form-label fw-bold small text-muted">NOMOR HP</label>
+                                        <input type="text" name="no_hp" class="form-control rounded-pill px-3"
                                             value="{{ $user->no_hp }}" required>
                                     </div>
                                     <div class="mb-3">
-                                        <label class="form-label fw-bold">Alamat Pengiriman Default</label>
-                                        <textarea name="alamat" class="form-control" rows="3" required>{{ $user->alamat }}</textarea>
+                                        <label class="form-label fw-bold small text-muted">ALAMAT PENGIRIMAN DEFAULT</label>
+                                        <textarea name="alamat" class="form-control rounded-4 p-3" rows="3" required>{{ $user->alamat }}</textarea>
                                     </div>
 
-                                    <hr>
-                                    <p class="text-muted small">Isi kolom di bawah HANYA jika ingin mengganti password.</p>
-
-                                    <div class="row">
-                                        <div class="col-md-6 mb-3">
-                                            <label class="form-label">Password Baru</label>
-                                            <input type="password" name="password" class="form-control">
-                                        </div>
-                                        <div class="col-md-6 mb-3">
-                                            <label class="form-label">Ulangi Password</label>
-                                            <input type="password" name="password_confirmation" class="form-control">
+                                    <div class="accordion mt-4" id="accordionPassword">
+                                        <div class="accordion-item border-0">
+                                            <h2 class="accordion-header">
+                                                <button
+                                                    class="accordion-button collapsed bg-light rounded-3 shadow-none fw-bold text-dark"
+                                                    type="button" data-bs-toggle="collapse" data-bs-target="#collapsePass">
+                                                    <i class="fas fa-lock me-2 text-primary"></i> Ganti Password (Opsional)
+                                                </button>
+                                            </h2>
+                                            <div id="collapsePass" class="accordion-collapse collapse"
+                                                data-bs-parent="#accordionPassword">
+                                                <div class="accordion-body px-0">
+                                                    <div class="row">
+                                                        <div class="col-md-6 mb-3">
+                                                            <label class="form-label small text-muted">Password Baru</label>
+                                                            <input type="password" name="password"
+                                                                class="form-control rounded-pill px-3">
+                                                        </div>
+                                                        <div class="col-md-6 mb-3">
+                                                            <label class="form-label small text-muted">Ulangi
+                                                                Password</label>
+                                                            <input type="password" name="password_confirmation"
+                                                                class="form-control rounded-pill px-3">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
 
-                                    <div class="d-grid mt-3">
-                                        <button type="submit" class="btn btn-primary rounded-pill py-2">Simpan
-                                            Perubahan</button>
+                                    <div class="d-grid mt-4">
+                                        <button type="submit" class="btn btn-primary rounded-pill py-3 fw-bold shadow-sm">
+                                            <i class="fas fa-save me-2"></i> Simpan Perubahan
+                                        </button>
                                     </div>
                                 </div>
                             </div>
@@ -80,3 +112,22 @@ class="rounded-circle img-thumbnail mb-3"
         </div>
     </div>
 @endsection
+
+@section('js')
+    <script>
+        function previewImage() {
+            const input = document.getElementById('avatar-input');
+            const preview = document.getElementById('avatar-preview');
+
+            if (input.files && input.files[0]) {
+                const reader = new FileReader();
+
+                reader.onload = function(e) {
+                    preview.src = e.target.result;
+                }
+
+                reader.readAsDataURL(input.files[0]);
+            }
+        }
+    </script>
+@endsection
diff --git a/resources/views/landing/shop.blade.php b/resources/views/landing/shop.blade.php
index c717547..abc8ad5 100644
--- a/resources/views/landing/shop.blade.php
+++ b/resources/views/landing/shop.blade.php
@@ -1,92 +1,134 @@
 @extends('layouts.frontend')
 
-@section('title', 'Belanja Sayur')
+@section('title', 'Belanja Padi & Beras')
 
 @section('content')
-<!-- Single Page Header -->
-<div class="container-fluid page-header py-5" style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('{{ asset('template/frontend/img/cart-page-header-img.jpg') }}'); background-position: center center; background-repeat: no-repeat; background-size: cover;">
-    <h1 class="text-center text-white display-6">Shop</h1>
-    <ol class="breadcrumb justify-content-center mb-0">
-        <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-white">Home</a></li>
-        <li class="breadcrumb-item active text-white">Shop</li>
-    </ol>
-</div>
+    <!-- Page Header -->
+    <div class="container-fluid py-5 bg-light">
+        <div class="container text-center">
+            <h1 class="display-5 fw-bold text-dark">Belanja Produk Kami</h1>
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb justify-content-center mb-0">
+                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
+                    <li class="breadcrumb-item active">Shop</li>
+                </ol>
+            </nav>
+        </div>
+    </div>
 
-<!-- Fruits Shop-->
-<div class="container-fluid fruite py-5">
+    <!-- Shop Section -->
     <div class="container py-5">
-        <h1 class="mb-4">Toko Sayur & Buah Segar</h1>
         <div class="row g-4">
-            <div class="col-lg-12">
-                <div class="row g-4">
-                    <!-- SIDEBAR PENCARIAN -->
-                    <div class="col-xl-3">
-                        <div class="input-group w-100 mx-auto d-flex mb-4">
-                            <form action="{{ route('shop') }}" method="GET" class="w-100 d-flex shadow-sm rounded">
-                                <input type="search" name="search" class="form-control p-3 border-0" placeholder="Cari produk..." value="{{ request('search') }}" aria-describedby="search-icon-1" style="border-radius: 10px 0 0 10px;">
-                                <button type="submit" id="search-icon-1" class="input-group-text p-3 border-0 bg-light" style="border-radius: 0 10px 10px 0;"><i class="fa fa-search"></i></button>
-                            </form>
-                        </div>
-                        
-                        <div class="row g-4">
-                            <div class="col-lg-12">
-                                <div class="mb-3">
-                                    <h4>Kategori</h4>
-                                    <ul class="list-unstyled fruite-categorie">
-                                        <li>
-                                            <div class="d-flex justify-content-between fruite-name">
-                                                <a href="{{ route('shop') }}"><i class="fas fa-apple-alt me-2"></i>Semua Produk</a>
-                                                <span>({{ $produks->total() }})</span>
-                                            </div>
-                                        </li>
-                                    </ul>
-                                </div>
+            <!-- Sidebar -->
+            <div class="col-lg-3">
+                <!-- Search -->
+                <div class="card border-0 shadow-sm mb-4">
+                    <div class="card-body">
+                        <h5 class="fw-bold mb-3">Cari Produk</h5>
+                        <form action="{{ route('shop') }}" method="GET">
+                            <div class="input-group">
+                                <input type="search" name="search" class="form-control" placeholder="Cari..."
+                                    value="{{ request('search') }}">
+                                <button class="btn btn-success" type="submit">
+                                    <i class="fa fa-search"></i>
+                                </button>
                             </div>
-                        </div>
+                        </form>
                     </div>
+                </div>
 
-                    <!-- GRID PRODUK -->
-                    <div class="col-lg-9">
-                        <div class="row g-4 justify-content-center">
-                            @forelse($produks as $produk)
-                            <div class="col-md-6 col-lg-6 col-xl-4">
-                                <div class="rounded position-relative fruite-item border border-secondary h-100">
-                                    <div class="fruite-img">
-                                        <img src="{{ $produk->foto_produk ? asset('storage/'.$produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}" class="img-fluid w-100 rounded-top" alt="{{ $produk->nama_produk }}" style="height: 200px; object-fit: cover;">
-                                    </div>
-                                    <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Segar</div>
-                                    <div class="p-4 border-top-0 rounded-bottom">
-                                        <h4>{{ $produk->nama_produk }}</h4>
-                                        <p>{{ Str::limit($produk->deskripsi, 50) }}</p>
-                                        <div class="d-flex justify-content-between flex-lg-wrap">
-                                            <p class="text-dark fs-5 fw-bold mb-0">Rp {{ number_format($produk->harga, 0, ',', '.') }} / kg</p>
-                                            <a href="{{ route('produk.detail', $produk->id) }}" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-eye me-2 text-primary"></i> Detail</a>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            @empty
-                            <div class="col-12 text-center">
-                                <div class="alert alert-warning py-5">
-                                    <i class="fas fa-search fa-3x mb-3 text-warning"></i>
-                                    <h4>Produk tidak ditemukan</h4>
-                                    <p>Coba kata kunci lain atau kembali lagi nanti.</p>
-                                    <a href="{{ route('shop') }}" class="btn btn-outline-primary rounded-pill mt-3">Reset Pencarian</a>
-                                </div>
-                            </div>
-                            @endforelse
-                            
-                            <!-- PAGINATION -->
-                            <div class="col-12">
-                                <div class="d-flex justify-content-center mt-5">
-                                    {{ $produks->links() }}
-                                </div>
-                            </div>
+                <!-- Info -->
+                <div class="card border-0 shadow-sm">
+                    <div class="card-body">
+                        <h5 class="fw-bold mb-3">Informasi</h5>
+                        <div class="d-flex align-items-center mb-2">
+                            <i class="fas fa-check-circle text-success me-2"></i>
+                            <small>Total {{ $produks->total() }} Produk</small>
+                        </div>
+                        <div class="d-flex align-items-center mb-2">
+                            <i class="fas fa-leaf text-success me-2"></i>
+                            <small>100% Organik</small>
+                        </div>
+                        <div class="d-flex align-items-center">
+                            <i class="fas fa-truck text-success me-2"></i>
+                            <small>Gratis Ongkir Min. 50 Kg</small>
                         </div>
                     </div>
                 </div>
             </div>
+
+            <!-- Product Grid -->
+            <div class="col-lg-9">
+                <div class="row g-4">
+                    @forelse($produks as $produk)
+                        <div class="col-md-6 col-lg-4">
+                            <div class="card border-0 shadow-sm h-100 product-card">
+                                <!-- Stock Badge -->
+                                <div class="position-absolute top-0 end-0 m-2 z-1">
+                                    <span class="badge bg-warning text-dark">
+                                        Stok: {{ $produk->stok }} Kg
+                                    </span>
+                                </div>
+
+                                <!-- Image -->
+                                <div class="overflow-hidden" style="height: 200px;">
+                                    <img src="{{ $produk->foto_produk ? asset('storage/' . $produk->foto_produk) : 'https://images.unsplash.com/photo-1586201375761-83865001e31c?q=80&w=800&auto=format&fit=crop' }}"
+                                        class="card-img-top w-100 h-100" alt="{{ $produk->nama_produk }}"
+                                        style="object-fit: cover;">
+                                </div>
+
+                                <div class="card-body p-3">
+                                    <span class="badge bg-success mb-2">{{ $produk->kategori ?? 'Umum' }}</span>
+                                    <h6 class="fw-bold mb-2">{{ $produk->nama_produk }}</h6>
+                                    <p class="text-muted small mb-3">{{ Str::limit($produk->deskripsi, 60) }}</p>
+
+                                    <div class="d-flex justify-content-between align-items-center pt-2 border-top">
+                                        <div>
+                                            <small class="text-muted">Harga/Kg</small>
+                                            <h6 class="fw-bold text-success mb-0">
+                                                Rp {{ number_format($produk->harga, 0, ',', '.') }}
+                                            </h6>
+                                        </div>
+                                        <a href="{{ route('produk.detail', $produk->id) }}"
+                                            class="btn btn-success btn-sm rounded-pill">
+                                            <i class="fa fa-eye"></i> Detail
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    @empty
+                        <div class="col-12">
+                            <div class="text-center py-5">
+                                <i class="fas fa-search fa-4x text-muted mb-3"></i>
+                                <h4 class="text-muted">Produk Tidak Ditemukan</h4>
+                                <p class="text-muted">Coba kata kunci lain atau hapus filter pencarian.</p>
+                                <a href="{{ route('shop') }}" class="btn btn-outline-success rounded-pill mt-2">
+                                    <i class="fas fa-sync-alt me-2"></i> Reset Pencarian
+                                </a>
+                            </div>
+                        </div>
+                    @endforelse
+                </div>
+
+                <!-- Pagination -->
+                @if ($produks->hasPages())
+                    <div class="d-flex justify-content-center mt-5">
+                        {{ $produks->links() }}
+                    </div>
+                @endif
+            </div>
         </div>
     </div>
-</div>
-@endsection
\ No newline at end of file
+
+    <style>
+        .product-card {
+            transition: transform 0.3s, box-shadow 0.3s;
+        }
+
+        .product-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
+        }
+    </style>
+@endsection
diff --git a/resources/views/layouts/admin.blade.php b/resources/views/layouts/admin.blade.php
index e0e67c2..96047c4 100644
--- a/resources/views/layouts/admin.blade.php
+++ b/resources/views/layouts/admin.blade.php
@@ -16,6 +16,73 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 
     @yield('css')
+
+    <style>
+        .chat-card {
+            height: 80vh;
+            overflow: hidden;
+            border-radius: 15px;
+            background: #fff;
+        }
+
+        /* Sidebar List Scroll */
+        .chat-sidebar {
+            height: 100%;
+            overflow-y: auto;
+            border-right: 1px solid #e9ecef;
+            background-color: #f2f7ff;
+        }
+
+        /* Chat Scroll */
+        .chat-window {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            background-color: #fff;
+        }
+
+        .chat-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+            background-color: #fafafa;
+        }
+
+        /* Item List di Sidebar */
+        .chat-item {
+            transition: all 0.3s;
+            border-bottom: 1px solid #dee2e6;
+            cursor: pointer;
+        }
+
+        .chat-item:hover {
+            background-color: #e9ecef;
+        }
+
+        .chat-item.active {
+            background-color: #2d46a18f;
+            color: white !important;
+        }
+
+        .chat-item.active p,
+        .chat-item.active small,
+        .chat-item.active h6 {
+            color: white !important;
+        }
+
+        ::-webkit-scrollbar {
+            width: 5px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #ccc;
+            border-radius: 3px;
+        }
+    </style>
 </head>
 
 <body>
diff --git a/resources/views/layouts/frontend.blade.php b/resources/views/layouts/frontend.blade.php
index 5bdc5b4..919a9f7 100644
--- a/resources/views/layouts/frontend.blade.php
+++ b/resources/views/layouts/frontend.blade.php
@@ -21,110 +21,292 @@
     <link href="{{ asset('template/frontend/css/style.css') }}" rel="stylesheet">
 
     @yield('css')
+
+    <style>
+        :root {
+            --primary-color: #81c408;
+            --primary-hover: #6da705;
+            --secondary-color: #ffc107;
+            --light-bg: #f8f9fa;
+        }
+
+        body {
+            font-family: 'Open Sans', sans-serif;
+            background-color: var(--light-bg);
+        }
+
+
+        .text-primary {
+            color: var(--primary-color) !important;
+        }
+
+        .bg-primary {
+            background-color: var(--primary-color) !important;
+        }
+
+        .border-primary {
+            border-color: var(--primary-color) !important;
+        }
+
+        .btn-primary {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background-color: var(--primary-hover);
+            border-color: var(--primary-hover);
+        }
+
+        .btn-outline-primary {
+            color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+
+        .btn-outline-primary:hover {
+            background-color: var(--primary-color);
+            color: white;
+        }
+
+        .btn-secondary {
+            background-color: var(--secondary-color);
+            border-color: var(--secondary-color);
+            color: #333;
+        }
+
+        .navbar-light .navbar-nav .nav-link.active,
+        .navbar-light .navbar-nav .nav-link:hover {
+            color: var(--primary-color) !important;
+        }
+
+        .rounded-pill {
+            border-radius: 50rem !important;
+        }
+
+        .rounded-4 {
+            border-radius: 1rem !important;
+        }
+
+        .card {
+            border: none;
+            border-radius: 16px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+            transition: 0.3s;
+        }
+
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+
+        .footer-accent {
+            border-bottom: 1px solid rgba(129, 196, 8, 0.5);
+        }
+
+        /* Chat Section */
+        .chat-container {
+            height: 80vh;
+            background: #fff;
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+        }
+
+        .chat-sidebar {
+            background-color: #f8f9fa;
+            border-right: 1px solid #e9ecef;
+            height: 100%;
+            overflow-y: auto;
+        }
+
+        .chat-list-item {
+            transition: all 0.2s;
+            border-bottom: 1px solid #f0f0f0;
+            cursor: pointer;
+        }
+
+        .chat-list-item:hover {
+            background-color: #e9ecef;
+        }
+
+        .chat-list-item.active {
+            background-color: #e3f2fd;
+            border-left: 4px solid #81c408;
+        }
+
+        .chat-content {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            background-color: #fff;
+        }
+
+        .chat-header {
+            padding: 15px;
+            border-bottom: 1px solid #e9ecef;
+            background: #fff;
+            z-index: 10;
+        }
+
+        .chat-box {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+            background-color: #fcfcfc;
+            background-image: radial-gradient(#81c408 0.5px, transparent 0.5px);
+            background-size: 20px 20px;
+            opacity: 0.8;
+        }
+
+        /* Bubble Chat */
+        .message-bubble {
+            max-width: 70%;
+            padding: 10px 15px;
+            border-radius: 15px;
+            margin-bottom: 10px;
+            position: relative;
+            font-size: 0.95rem;
+        }
+
+        .message-me {
+            background-color: #81c408;
+            color: white;
+            border-bottom-right-radius: 2px;
+            margin-left: auto;
+        }
+
+        .message-other {
+            background-color: #e9ecef;
+            color: #333;
+            border-bottom-left-radius: 2px;
+            margin-right: auto;
+        }
+
+        .chat-footer {
+            padding: 15px;
+            background: #fff;
+            border-top: 1px solid #e9ecef;
+        }
+
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #ccc;
+            border-radius: 3px;
+        }
+    </style>
 </head>
 
 <body>
 
-    <!-- Spinner -->
     <div id="spinner"
         class="show w-100 vh-100 bg-white position-fixed translate-middle top-50 start-50 d-flex align-items-center justify-content-center">
         <div class="spinner-grow text-primary" role="status"></div>
     </div>
-
-    <!-- Navbar -->
     <div class="container-fluid fixed-top">
-        <div class="container topbar bg-primary d-none d-lg-block">
-            <div class="d-flex justify-content-between">
-                <div class="top-info ps-2">
-                    <small class="me-3"><i class="fas fa-map-marker-alt me-2 text-secondary"></i> <a href="#"
-                            class="text-white">Desa Sukamaju, Indonesia</a></small>
-                    <small class="me-3"><i class="fas fa-envelope me-2 text-secondary"></i><a href="#"
-                            class="text-white">info@tanidesa.com</a></small>
-                </div>
-                <div class="top-link pe-2">
-                    <a href="#" class="text-white"><small class="text-white mx-2">Kebijakan Privasi</small>/</a>
-                    <a href="#" class="text-white"><small class="text-white mx-2">Syarat & Ketentuan</small></a>
+        <div class="container-fluid bg-primary d-none d-lg-block">
+            <div class="container">
+                <div class="topbar">
+                    <div class="d-flex justify-content-between">
+                        <div class="top-info ps-2">
+                            <small class="me-3"><i class="fas fa-map-marker-alt me-2 text-secondary"></i> <a
+                                    href="#" class="text-white">Desa Sukamaju, Indonesia</a></small>
+                            <small class="me-3"><i class="fas fa-envelope me-2 text-secondary"></i><a href="#"
+                                    class="text-white">info@tanidesa.com</a></small>
+                        </div>
+                        <div class="top-link pe-2">
+                            <a href="#" class="text-white"><small class="text-white mx-2">Kebijakan
+                                    Privasi</small>/</a>
+                            <a href="#" class="text-white"><small class="text-white mx-2">Syarat &
+                                    Ketentuan</small></a>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-        <div class="container px-0">
-            <nav class="navbar navbar-light bg-white navbar-expand-xl">
-                <a href="{{ url('/') }}" class="navbar-brand">
-                    <h1 class="text-primary display-6">TaniDesa</h1>
-                </a>
-                <button class="navbar-toggler py-2 px-3" type="button" data-bs-toggle="collapse"
-                    data-bs-target="#navbarCollapse">
-                    <span class="fa fa-bars text-primary"></span>
-                </button>
-                <div class="collapse navbar-collapse bg-white" id="navbarCollapse">
-                    <div class="navbar-nav mx-auto">
-                        <a href="{{ url('/') }}"
-                            class="nav-item nav-link {{ request()->is('/') ? 'active' : '' }}">Home</a>
-                        <a href="{{ route('shop') }}"
-                            class="nav-item nav-link {{ request()->is('shop*') ? 'active' : '' }}">Belanja</a>
-                        <a href="#" class="nav-item nav-link">Kontak</a>
-                    </div>
 
-                    <div class="d-flex m-3 me-0 align-items-center">
-                        <!-- Search bar -->
-                        <form action="{{ route('shop') }}" method="GET" class="d-flex me-4">
-                            <div class="input-group">
-                                <input type="search" name="search" class="form-control border border-secondary"
-                                    placeholder="Cari..." aria-label="Search" value="{{ request('search') }}">
-                                <button class="btn btn-outline-secondary" type="submit">
-                                    <i class="fas fa-search text-primary"></i>
-                                </button>
-                            </div>
-                        </form>
+        <div class="container-fluid bg-white shadow-sm">
+            <div class="container">
+                <nav class="navbar navbar-light navbar-expand-xl">
+                    <a href="{{ url('/') }}" class="navbar-brand">
+                        <h1 class="text-primary display-6">TaniDesa</h1>
+                    </a>
+                    <button class="navbar-toggler py-2 px-3" type="button" data-bs-toggle="collapse"
+                        data-bs-target="#navbarCollapse">
+                        <span class="fa fa-bars text-primary"></span>
+                    </button>
+                    <div class="collapse navbar-collapse bg-white" id="navbarCollapse">
+                        <div class="navbar-nav mx-auto">
+                            <a href="{{ url('/') }}"
+                                class="nav-item nav-link {{ request()->is('/') ? 'active' : '' }}">Home</a>
+                            <a href="{{ route('shop') }}"
+                                class="nav-item nav-link {{ request()->is('shop*') ? 'active' : '' }}">Belanja</a>
+                            <a href="#" class="nav-item nav-link">Kontak</a>
+                        </div>
 
-                        <!-- Cart -->
-                        <a href="{{ route('cart') }}" class="position-relative me-4 my-auto">
-                            <i class="fa fa-shopping-bag fa-2x"></i>
-
-                            <span
-                                class="position-absolute bg-secondary rounded-circle d-flex align-items-center justify-content-center text-dark px-1"
-                                style="top: -5px; left: 15px; height: 20px; min-width: 20px;">
-                                {{ count((array) session('cart')) }}
-                            </span>
-                        </a>
-
-                        <!-- User Account -->
-                        @if (Auth::guard('pembeli')->check())
-                            <div class="nav-item dropdown">
-                                <a href="#" class="nav-link dropdown-toggle my-auto" data-bs-toggle="dropdown">
-                                    <i class="fas fa-user fa-2x"></i>
-                                    <span
-                                        class="d-none d-xl-inline ms-1">{{ Auth::guard('pembeli')->user()->nama_lengkap }}</span>
-                                </a>
-                                <div class="dropdown-menu m-0 bg-secondary rounded-0">
-                                    <a href="{{ route('pembeli.profile') }}" class="dropdown-item">Profil Saya</a>
-
-                                    <a href="{{ route('pembeli.pesan.index') }}" class="dropdown-item">Pesan Saya</a>
-
-                                    <a href="{{ route('pesanan.saya') }}" class="dropdown-item">Pesanan Saya</a>
-
-                                    <form action="{{ route('logout') }}" method="POST">
-                                        @csrf
-                                        <button type="submit" class="dropdown-item">Logout</button>
-                                    </form>
+                        <div class="d-flex m-3 me-0 align-items-center">
+                            <form action="{{ route('shop') }}" method="GET" class="d-flex me-4">
+                                <div class="input-group">
+                                    <input type="search" name="search" class="form-control border border-secondary"
+                                        placeholder="Cari..." value="{{ request('search') }}"
+                                        style="border-radius: 20px 0 0 20px;">
+                                    <button class="btn btn-outline-secondary border border-secondary" type="submit"
+                                        style="border-radius: 0 20px 20px 0;">
+                                        <i class="fas fa-search text-primary"></i>
+                                    </button>
                                 </div>
-                            </div>
-                        @else
-                            <a href="{{ route('login') }}" class="my-auto">
-                                <i class="fas fa-user fa-2x"></i> Login
+                            </form>
+
+                            <a href="{{ route('cart') }}" class="position-relative me-4 my-auto">
+                                <i class="fa fa-shopping-bag fa-2x text-dark"></i>
+                                <span
+                                    class="position-absolute bg-secondary rounded-circle d-flex align-items-center justify-content-center text-dark px-1"
+                                    style="top: -5px; left: 15px; height: 20px; min-width: 20px;">
+                                    {{ count((array) session('cart')) }}
+                                </span>
                             </a>
-                        @endif
+
+                            @if (Auth::guard('pembeli')->check())
+                                <div class="nav-item dropdown">
+                                    <a href="#" class="nav-link dropdown-toggle my-auto text-dark fw-bold"
+                                        data-bs-toggle="dropdown">
+                                        <i class="fas fa-user fa-2x me-1"></i>
+                                        <span
+                                            class="d-none d-xl-inline">{{ Auth::guard('pembeli')->user()->nama_lengkap }}</span>
+                                    </a>
+                                    <div class="dropdown-menu m-0 bg-secondary rounded-0">
+                                        <a href="{{ route('pembeli.profile') }}" class="dropdown-item">Profil Saya</a>
+                                        <a href="{{ route('pembeli.pesan.index') }}" class="dropdown-item">Pesan
+                                            Saya</a>
+                                        <a href="{{ route('pesanan.saya') }}" class="dropdown-item">Pesanan Saya</a>
+                                        <form action="{{ route('logout') }}" method="POST">
+                                            @csrf
+                                            <button type="submit" class="dropdown-item">Logout</button>
+                                        </form>
+                                    </div>
+                                </div>
+                            @else
+                                <a href="{{ route('login') }}" class="my-auto btn btn-primary rounded-pill px-4">
+                                    <i class="fas fa-user me-2"></i> Login
+                                </a>
+                            @endif
+                        </div>
                     </div>
-                </div>
-            </nav>
+                </nav>
+            </div>
         </div>
     </div>
-
-    <!-- Main Content -->
     <div style="margin-top: 150px;">
         @if (session('success'))
             <div class="container mt-3">
-                <div class="alert alert-success alert-dismissible fade show" role="alert">
+                <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
                     <i class="fa fa-check-circle me-2"></i> {{ session('success') }}
                     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                 </div>
@@ -133,16 +315,14 @@ class="d-none d-xl-inline ms-1">{{ Auth::guard('pembeli')->user()->nama_lengkap
 
         @yield('content')
     </div>
-
-    <!-- Footer  -->
-    <div class="container-fluid bg-dark text-white-50 footer pt-5 mt-5">
+    <div class="container-fluid bg-dark text-white-50 footer">
         <div class="container py-5">
-            <div class="pb-4 mb-4" style="border-bottom: 1px solid rgba(226, 175, 24, 0.5) ;">
+            <div class="pb-4 mb-4 footer-accent">
                 <div class="row g-4">
                     <div class="col-lg-3">
                         <a href="#">
                             <h1 class="text-primary mb-0">TaniDesa</h1>
-                            <p class="text-secondary mb-0">Segar & Organik</p>
+                            <p class="text-secondary mb-0">Platform Pangan Langsung Petani</p>
                         </a>
                     </div>
                     <div class="col-lg-6">
@@ -156,7 +336,7 @@ class="btn btn-primary border-0 border-secondary py-3 px-4 position-absolute rou
                     </div>
                     <div class="col-lg-3">
                         <div class="d-flex justify-content-end pt-3">
-                            <a class="btn  btn-outline-secondary me-2 btn-md-square rounded-circle" href=""><i
+                            <a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href=""><i
                                     class="fab fa-twitter"></i></a>
                             <a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href=""><i
                                     class="fab fa-facebook-f"></i></a>
@@ -172,43 +352,37 @@ class="fab fa-linkedin-in"></i></a>
                 <div class="col-lg-3 col-md-6">
                     <div class="footer-item">
                         <h4 class="text-light mb-3">Tentang Kami</h4>
-                        <p class="mb-4">TaniDesa adalah platform yang menghubungkan petani lokal langsung dengan
-                            Anda. Kami menjamin kesegaran dan harga yang adil bagi petani.</p>
+                        <p class="mb-4">TaniDesa memotong rantai pasok yang panjang, memberikan harga terbaik untuk
+                            petani dan kesegaran maksimal untuk pembeli.</p>
                     </div>
                 </div>
                 <div class="col-lg-3 col-md-6">
                     <div class="d-flex flex-column text-start footer-item">
-                        <h4 class="text-light mb-3">Informasi Toko</h4>
-                        <a class="btn-link" href="">Tentang Kami</a>
-                        <a class="btn-link" href="">Hubungi Kami</a>
-                        <a class="btn-link" href="">Kebijakan Privasi</a>
-                        <a class="btn-link" href="">Syarat & Ketentuan</a>
+                        <h4 class="text-light mb-3">Menu Cepat</h4>
+                        <a class="btn-link" href="{{ route('shop') }}">Belanja Sekarang</a>
+                        <a class="btn-link" href="#">Hubungi Kami</a>
+                        <a class="btn-link" href="#">Syarat & Ketentuan</a>
                     </div>
                 </div>
                 <div class="col-lg-3 col-md-6">
                     <div class="d-flex flex-column text-start footer-item">
                         <h4 class="text-light mb-3">Akun</h4>
-                        <a class="btn-link" href="#">Profil Saya</a>
-                        <a class="btn-link" href="#">Keranjang Belanja</a>
-                        <a class="btn-link" href="#">Riwayat Pesanan</a>
+                        <a class="btn-link" href="{{ route('pembeli.profile') }}">Profil Saya</a>
+                        <a class="btn-link" href="{{ route('cart') }}">Keranjang Belanja</a>
+                        <a class="btn-link" href="{{ route('pesanan.saya') }}">Riwayat Pesanan</a>
                     </div>
                 </div>
                 <div class="col-lg-3 col-md-6">
                     <div class="footer-item">
                         <h4 class="text-light mb-3">Kontak</h4>
-                        <p>Alamat: Desa Sukamaju, Indonesia</p>
+                        <p>Alamat: Desa Sukamaju, Nganjuk</p>
                         <p>Email: info@tanidesa.com</p>
-                        <p>Telepon: +62 812 3456 7890</p>
-                        <div class="payment-methods">
-                            <i class="fab fa-cc-visa fa-2x text-light me-2"></i>
-                            <i class="fab fa-cc-mastercard fa-2x text-light me-2"></i>
-                            <i class="fas fa-money-bill-wave fa-2x text-light"></i>
-                        </div>
+                        <p>WA: +62 812 3456 7890</p>
                     </div>
                 </div>
             </div>
         </div>
-        <div class="container-fluid copyright bg-dark py-4">
+        <div class="container-fluid copyright bg-dark py-4" style="border-top: 1px solid rgba(255,255,255,0.1);">
             <div class="container">
                 <div class="row">
                     <div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
@@ -221,13 +395,11 @@ class="fas fa-copyright text-light me-2"></i>TaniDesa</a>, All right
         </div>
     </div>
 
-    <!-- Back to Top -->
     <a href="#" class="btn btn-primary border-3 border-primary rounded-circle back-to-top"><i
             class="fa fa-arrow-up"></i></a>
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
-
     <script src="{{ asset('template/frontend/lib/easing/easing.min.js') }}"></script>
     <script src="{{ asset('template/frontend/lib/waypoints/waypoints.min.js') }}"></script>
     <script src="{{ asset('template/frontend/lib/lightbox/js/lightbox.min.js') }}"></script>
diff --git a/resources/views/petani/pesan/index.blade.php b/resources/views/petani/pesan/index.blade.php
index 0f987e0..9f24ebd 100644
--- a/resources/views/petani/pesan/index.blade.php
+++ b/resources/views/petani/pesan/index.blade.php
@@ -1,37 +1,65 @@
 @extends('layouts.admin')
-@section('title', 'Chat')
+@section('title', 'Kotak Masuk')
+
 @section('content')
-    <div class="card" style="height: 75vh;">
+<section class="section">
+    <div class="card chat-card shadow-sm">
         <div class="row g-0 h-100">
-            <div class="col-md-4 border-end h-100 overflow-auto">
-                <div class="p-3 bg-light border-bottom">
-                    <h6 class="mb-0">Daftar Percakapan</h6>
+            
+            <div class="col-md-4 chat-sidebar">
+                <div class="p-4 border-bottom bg-white sticky-top">
+                    <h5 class="mb-3 text-primary"><i class="bi bi-chat-left-text-fill"></i> Percakapan</h5>
+                    <div class="form-group position-relative has-icon-right mb-0">
+                        <input type="text" class="form-control" placeholder="Cari pembeli...">
+                        <div class="form-control-icon">
+                            <i class="bi bi-search"></i>
+                        </div>
+                    </div>
                 </div>
+
                 <div class="list-group list-group-flush">
                     @forelse($chatList as $chat)
-                        <a href="{{ route('petani.pesan.show', $chat['lawan_id']) }}"
-                            class="list-group-item list-group-item-action py-3">
-                            <div class="d-flex w-100 justify-content-between">
-                                <h6 class="mb-1 text-primary">{{ $chat['nama'] }}</h6>
-                                <small class="text-muted" style="font-size: 11px">{{ $chat['time'] }}</small>
+                        <a href="{{ route('petani.pesan.show', $chat['lawan_id']) }}" class="list-group-item list-group-item-action chat-item p-3">
+                            <div class="d-flex align-items-center">
+                                <div class="avatar avatar-lg me-3">
+                                    <img src="{{ asset('assets/compiled/jpg/1.jpg') }}" alt="Avatar"> @if($chat['unread'] > 0)
+                                        <span class="avatar-status bg-danger"></span>
+                                    @endif
+                                </div>
+                                <div class="flex-grow-1 text-truncate">
+                                    <div class="d-flex justify-content-between align-items-center mb-1">
+                                        <h6 class="mb-0 text-dark">{{ $chat['nama'] }}</h6>
+                                        <small class="text-muted" style="font-size: 11px">{{ $chat['time'] }}</small>
+                                    </div>
+                                    <p class="mb-0 small text-muted text-truncate">
+                                        {{ Str::limit($chat['last_message'], 30) }}
+                                    </p>
+                                </div>
+                                @if($chat['unread'] > 0)
+                                    <span class="badge bg-danger rounded-pill ms-2">{{ $chat['unread'] }}</span>
+                                @endif
                             </div>
-                            <p class="mb-1 text-truncate small text-secondary">{{ $chat['last_message'] }}</p>
-                            @if ($chat['unread'] > 0)
-                                <span class="badge bg-danger rounded-pill">{{ $chat['unread'] }}</span>
-                            @endif
                         </a>
                     @empty
-                        <div class="p-4 text-center text-muted">Belum ada pesan.</div>
+                        <div class="text-center p-5">
+                            <i class="bi bi-inbox x-3 text-muted"></i>
+                            <p class="text-muted mt-2">Belum ada pesan masuk.</p>
+                        </div>
                     @endforelse
                 </div>
             </div>
 
-            <div class="col-md-8 h-100 d-flex align-items-center justify-content-center bg-white">
-                <div class="text-center text-muted">
-                    <i class="bi bi-chat-dots display-1"></i>
-                    <p class="mt-3">Pilih kontak di sebelah kiri untuk mulai chatting.</p>
+            <div class="col-md-8 d-none d-md-flex align-items-center justify-content-center bg-white flex-column">
+                <div class="text-center opacity-50">
+                    <div class="mb-3">
+                        <i class="bi bi-chat-square-dots text-primary" style="font-size: 5rem;"></i>
+                    </div>
+                    <h4 class="text-primary">Selamat Datang, Pak Tani!</h4>
+                    <p class="text-secondary">Pilih percakapan di sebelah kiri untuk melihat detail pesan.</p>
                 </div>
             </div>
+            
         </div>
     </div>
-@endsection
+</section>
+@endsection
\ No newline at end of file
diff --git a/resources/views/petani/pesan/show.blade.php b/resources/views/petani/pesan/show.blade.php
index d36ca4a..f15ecef 100644
--- a/resources/views/petani/pesan/show.blade.php
+++ b/resources/views/petani/pesan/show.blade.php
@@ -1,95 +1,135 @@
 @extends('layouts.admin')
-
-@section('title', 'Chat dengan ' . $lawan->nama_lengkap)
+@section('title', 'Chat: ' . $lawan->nama_lengkap)
 
 @section('content')
     <section class="section">
-        <div class="card" style="height: 85vh; display: flex; flex-direction: column;">
+        <div class="card chat-card shadow-sm">
+            <div class="row g-0 h-100">
 
-            {{-- HEADER CHAT --}}
-            <div class="card-header bg-primary py-3 d-flex align-items-center justify-content-between">
-                <div class="d-flex align-items-center text-white">
-                    <a href="{{ route('petani.pesan.index') }}" class="btn btn-light btn-sm me-3 rounded-circle"
-                        style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;">
-                        <i class="bi bi-arrow-left text-primary"></i>
-                    </a>
-                    <div>
-                        <h6 class="mb-0 text-white font-bold" style="font-size: 1.1rem;">{{ $lawan->nama_lengkap }}</h6>
-                        <small style="opacity: 0.8; font-size: 0.8rem;">
-                            {{ $lawan->role ?? 'Pembeli' }}
-                        </small>
+                <div class="col-md-4 chat-sidebar d-none d-md-block">
+                    <div class="p-4 border-bottom bg-white sticky-top">
+                        <h5 class="mb-3 text-primary"><i class="bi bi-chat-left-text-fill"></i> Percakapan</h5>
+                        <div class="form-group position-relative has-icon-right mb-0">
+                            <input type="text" class="form-control" placeholder="Cari pembeli...">
+                            <div class="form-control-icon">
+                                <i class="bi bi-search"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="list-group list-group-flush">
+                        @foreach ($chatList as $chat)
+                            <a href="{{ route('petani.pesan.show', $chat['lawan_id']) }}"
+                                class="list-group-item list-group-item-action chat-item p-3 {{ $chat['lawan_id'] == $lawan->id ? 'active' : '' }}">
+                                <div class="d-flex align-items-center">
+
+                                    <div class="avatar avatar-lg me-3">
+                                        <span class="avatar-content bg-primary text-white">
+                                            {{ substr($chat['nama'], 0, 1) }}
+                                        </span>
+                                        @if ($chat['unread'] > 0)
+                                            <span class="avatar-status bg-danger"></span>
+                                        @endif
+                                    </div>
+
+                                    <div class="flex-grow-1 text-truncate">
+                                        <div class="d-flex justify-content-between align-items-center mb-1">
+                                            <h6
+                                                class="mb-0 {{ $chat['lawan_id'] == $lawan->id ? 'text-white' : 'text-dark' }}">
+                                                {{ $chat['nama'] }}
+                                            </h6>
+                                            <small
+                                                class="{{ $chat['lawan_id'] == $lawan->id ? 'text-white' : 'text-muted' }}"
+                                                style="font-size: 11px">{{ $chat['time'] }}</small>
+                                        </div>
+                                        <p
+                                            class="mb-0 small text-truncate {{ $chat['lawan_id'] == $lawan->id ? 'text-white' : 'text-muted' }}">
+                                            {{ Str::limit($chat['last_message'], 30) }}
+                                        </p>
+                                    </div>
+                                </div>
+                            </a>
+                        @endforeach
                     </div>
                 </div>
-            </div>
 
-            {{-- INBOX SECTION (SCROLLABLE) --}}
-            <div class="card-body p-4" id="chatContainer"
-                style="flex-grow: 1; overflow-y: auto; background-color: #f2f7ff;">
-                <div class="d-flex flex-column gap-3">
-                    @forelse($chats as $chat)
-                        @php
-                            $isMe =
-                                $chat->pengirim_id == Auth::guard('petani')->id() &&
-                                $chat->pengirim_type == 'App\Models\Petani';
-                        @endphp
+                <div class="col-md-8 chat-window">
 
-                        {{-- Logic Posisi: Kalau SAYA di Kanan (end), Kalau DIA di Kiri (start) --}}
-                        <div class="d-flex w-100 {{ $isMe ? 'justify-content-end' : 'justify-content-start' }}">
+                    <div class="p-3 border-bottom bg-white d-flex align-items-center shadow-sm z-index-1">
+                        <a href="{{ route('petani.pesan.index') }}"
+                            class="btn btn-sm btn-light me-3 d-md-none rounded-circle">
+                            <i class="bi bi-arrow-left"></i>
+                        </a>
 
-                            <div style="max-width: 70%; min-width: 120px;">
-                                {{-- Bubble Chat --}}
-                                <div class="p-3 shadow-sm position-relative"
-                                    style="border-radius: 15px; 
+                        <div class="avatar avatar-md me-3">
+                            <div class="avatar-content bg-primary text-white font-bold">
+                                {{ substr($lawan->nama_lengkap, 0, 1) }}
+                            </div>
+                        </div>
+                        <div>
+                            <h6 class="mb-0 text-dark">{{ $lawan->nama_lengkap }}</h6>
+                            <small class="text-muted">{{ $lawan->role ?? 'Pembeli' }}</small>
+                        </div>
+                    </div>
+
+                    <div class="chat-content" id="chatContainer">
+                        @forelse($chats as $chat)
+                            @php
+                                $isMe =
+                                    $chat->pengirim_id == Auth::guard('petani')->id() &&
+                                    $chat->pengirim_type == 'App\Models\Petani';
+                            @endphp
+
+                            <div class="d-flex w-100 mb-3 {{ $isMe ? 'justify-content-end' : 'justify-content-start' }}">
+                                <div style="max-width: 70%;">
+                                    <div class="p-3 shadow-sm position-relative"
+                                        style="border-radius: 15px; 
                                         border-{{ $isMe ? 'bottom-right' : 'bottom-left' }}-radius: 0;
                                         background-color: {{ $isMe ? '#435ebe' : '#ffffff' }}; 
                                         color: {{ $isMe ? '#ffffff' : '#212529' }};">
 
-                                    <p class="mb-1" style="font-size: 0.95rem; line-height: 1.4;">
-                                        {{ $chat->isi_pesan }}
-                                    </p>
+                                        <p class="mb-1" style="font-size: 0.95rem; line-height: 1.5;">
+                                            {{ $chat->isi_pesan }}
+                                        </p>
 
-                                    <div class="d-flex justify-content-end align-items-center mt-1">
-                                        <small style="font-size: 0.7rem; opacity: 0.8; margin-right: 4px;">
-                                            {{ $chat->created_at->format('H:i') }}
-                                        </small>
-                                        @if ($isMe)
-                                            <i class="bi {{ $chat->sudah_dibaca ? 'bi-check-all text-info' : 'bi-check' }}"
-                                                style="font-size: 0.9rem;"></i>
-                                        @endif
+                                        <div class="d-flex justify-content-end align-items-center mt-1">
+                                            <small style="font-size: 0.7rem; opacity: 0.8; margin-right: 4px;">
+                                                {{ $chat->created_at->format('H:i') }}
+                                            </small>
+                                            @if ($isMe)
+                                                <i class="bi {{ $chat->sudah_dibaca ? 'bi-check-all text-info' : 'bi-check' }}"
+                                                    style="font-size: 0.9rem;"></i>
+                                            @endif
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                    @empty
-                        <div class="text-center my-5">
-                            <span class="badge bg-light-secondary text-secondary p-3 rounded-pill">
-                                Belum ada percakapan. Mulailah menyapa! 👋
-                            </span>
-                        </div>
-                    @endforelse
+                        @empty
+                            <div class="text-center my-5">
+                                <span class="badge bg-light-secondary text-secondary p-3 rounded-pill">
+                                    Belum ada percakapan. Sapa pembeli Anda! 👋
+                                </span>
+                            </div>
+                        @endforelse
+                    </div>
+
+                    <div class="p-3 bg-white border-top">
+                        <form action="{{ route('pesan.kirim') }}" method="POST" class="d-flex gap-2 align-items-center">
+                            @csrf
+                            <input type="hidden" name="penerima_id" value="{{ $lawan->id }}">
+
+                            <div class="input-group">
+                                <input type="text" name="isi_pesan" class="form-control" placeholder="Ketik pesan..."
+                                    required autocomplete="off">
+                                <button type="submit" class="btn btn-primary">
+                                    <i class="bi bi-send-fill"></i> Kirim
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+
                 </div>
             </div>
-
-            {{-- FOOTER INPUT PESAN --}}
-            <div class="card-footer bg-white py-3 border-top">
-                <form action="{{ route('pesan.kirim') }}" method="POST" class="d-flex gap-2 align-items-center">
-                    @csrf
-                    {{-- Input Hidden Data Penerima --}}
-                    <input type="hidden" name="penerima_id" value="{{ $lawan->id }}">
-
-                    {{-- Input Text --}}
-                    <div class="input-group">
-                        <input type="text" name="isi_pesan" class="form-control form-control-lg border-0 bg-light"
-                            placeholder="Ketik pesan..." required autocomplete="off" style="border-radius: 20px;">
-
-                        <button type="submit" class="btn btn-primary btn-lg ms-2 rounded-circle"
-                            style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
-                            <i class="bi bi-send-fill fs-5"></i>
-                        </button>
-                    </div>
-                </form>
-            </div>
-
         </div>
     </section>
 
diff --git a/resources/views/petani/produk/create.blade.php b/resources/views/petani/produk/create.blade.php
index 4b5dd1e..b0c77ef 100644
--- a/resources/views/petani/produk/create.blade.php
+++ b/resources/views/petani/produk/create.blade.php
@@ -4,44 +4,56 @@
 @section('page-title', 'Tambah Produk Baru')
 
 @section('content')
-<div class="card">
-    <div class="card-body">
-        <form action="{{ route('petani.produk.store') }}" method="POST" enctype="multipart/form-data">
-            @csrf
-            
-            <div class="form-group mb-3">
-                <label>Nama Produk</label>
-                <input type="text" name="nama_produk" class="form-control" required>
-            </div>
+    <div class="card">
+        <div class="card-body">
+            <form action="{{ route('petani.produk.store') }}" method="POST" enctype="multipart/form-data">
+                @csrf
 
-            <div class="row">
-                <div class="col-md-6">
-                    <div class="form-group mb-3">
-                        <label>Harga (Rp)</label>
-                        <input type="number" name="harga" class="form-control" required>
+                <div class="form-group mb-3">
+                    <label>Nama Produk</label>
+                    <input type="text" name="nama_produk" class="form-control" required>
+                </div>
+                
+                <div class="col-md-6 mb-3">
+                    <label class="form-label">Kategori Padi/Beras</label>
+                    <select name="kategori" class="form-select" required>
+                        <option value="Pandan Wangi">Pandan Wangi</option>
+                        <option value="IR 64">IR 64 (Setra Ramos)</option>
+                        <option value="Ketan">Ketan (Putih/Hitam)</option>
+                        <option value="Merah">Beras Merah</option>
+                        <option value="Hitam">Beras Hitam</option>
+                        <option value="Lainnya">Lainnya</option>
+                    </select>
+                </div>
+
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="form-group mb-3">
+                            <label>Harga (Rp)</label>
+                            <input type="number" name="harga" class="form-control" required>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="form-group mb-3">
+                            <label>Stok</label>
+                            <input type="number" name="stok" class="form-control" required>
+                        </div>
                     </div>
                 </div>
-                <div class="col-md-6">
-                    <div class="form-group mb-3">
-                        <label>Stok</label>
-                        <input type="number" name="stok" class="form-control" required>
-                    </div>
+
+                <div class="form-group mb-3">
+                    <label>Deskripsi</label>
+                    <textarea name="deskripsi" class="form-control" rows="4" required></textarea>
                 </div>
-            </div>
 
-            <div class="form-group mb-3">
-                <label>Deskripsi</label>
-                <textarea name="deskripsi" class="form-control" rows="4" required></textarea>
-            </div>
+                <div class="form-group mb-3">
+                    <label>Foto Produk</label>
+                    <input type="file" name="foto_produk" class="form-control" accept="image/*" required>
+                </div>
 
-            <div class="form-group mb-3">
-                <label>Foto Produk</label>
-                <input type="file" name="foto_produk" class="form-control" accept="image/*" required>
-            </div>
-
-            <button type="submit" class="btn btn-primary">Simpan Produk</button>
-            <a href="{{ route('petani.produk.index') }}" class="btn btn-secondary">Batal</a>
-        </form>
+                <button type="submit" class="btn btn-primary">Simpan Produk</button>
+                <a href="{{ route('petani.produk.index') }}" class="btn btn-secondary">Batal</a>
+            </form>
+        </div>
     </div>
-</div>
-@endsection
\ No newline at end of file
+@endsection
diff --git a/resources/views/petani/produk/edit.blade.php b/resources/views/petani/produk/edit.blade.php
index 7a1d424..67dbd8f 100644
--- a/resources/views/petani/produk/edit.blade.php
+++ b/resources/views/petani/produk/edit.blade.php
@@ -4,49 +4,61 @@
 @section('page-title', 'Edit Produk')
 
 @section('content')
-<div class="card">
-    <div class="card-body">
-        <form action="{{ route('petani.produk.update', $produk->id) }}" method="POST" enctype="multipart/form-data">
-            @csrf
-            @method('PUT')
-            
-            <div class="form-group mb-3">
-                <label>Nama Produk</label>
-                <input type="text" name="nama_produk" class="form-control" value="{{ $produk->nama_produk }}" required>
-            </div>
+    <div class="card">
+        <div class="card-body">
+            <form action="{{ route('petani.produk.update', $produk->id) }}" method="POST" enctype="multipart/form-data">
+                @csrf
+                @method('PUT')
 
-            <div class="row">
-                <div class="col-md-6">
-                    <div class="form-group mb-3">
-                        <label>Harga (Rp)</label>
-                        <input type="number" name="harga" class="form-control" value="{{ $produk->harga }}" required>
+                <div class="form-group mb-3">
+                    <label>Nama Produk</label>
+                    <input type="text" name="nama_produk" class="form-control" value="{{ $produk->nama_produk }}" required>
+                </div>
+
+                <div class="col-md-6 mb-3">
+                    <label class="form-label">Kategori Padi/Beras</label>
+                    <select name="kategori" class="form-select" required>
+                        <option value="Pandan Wangi">Pandan Wangi</option>
+                        <option value="IR 64">IR 64 (Setra Ramos)</option>
+                        <option value="Ketan">Ketan (Putih/Hitam)</option>
+                        <option value="Merah">Beras Merah</option>
+                        <option value="Hitam">Beras Hitam</option>
+                        <option value="Lainnya">Lainnya</option>
+                    </select>
+                </div>
+
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="form-group mb-3">
+                            <label>Harga (Rp)</label>
+                            <input type="number" name="harga" class="form-control" value="{{ $produk->harga }}" required>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="form-group mb-3">
+                            <label>Stok</label>
+                            <input type="number" name="stok" class="form-control" value="{{ $produk->stok }}" required>
+                        </div>
                     </div>
                 </div>
-                <div class="col-md-6">
-                    <div class="form-group mb-3">
-                        <label>Stok</label>
-                        <input type="number" name="stok" class="form-control" value="{{ $produk->stok }}" required>
-                    </div>
+
+                <div class="form-group mb-3">
+                    <label>Deskripsi</label>
+                    <textarea name="deskripsi" class="form-control" rows="4" required>{{ $produk->deskripsi }}</textarea>
                 </div>
-            </div>
 
-            <div class="form-group mb-3">
-                <label>Deskripsi</label>
-                <textarea name="deskripsi" class="form-control" rows="4" required>{{ $produk->deskripsi }}</textarea>
-            </div>
+                <div class="form-group mb-3">
+                    <label>Foto Produk (Biarkan kosong jika tidak ingin mengganti)</label>
+                    <input type="file" name="foto_produk" class="form-control" accept="image/*">
+                    @if ($produk->foto_produk)
+                        <small class="text-muted">Foto saat ini:</small><br>
+                        <img src="{{ asset('storage/' . $produk->foto_produk) }}" width="100" class="mt-2 rounded">
+                    @endif
+                </div>
 
-            <div class="form-group mb-3">
-                <label>Foto Produk (Biarkan kosong jika tidak ingin mengganti)</label>
-                <input type="file" name="foto_produk" class="form-control" accept="image/*">
-                @if($produk->foto_produk)
-                    <small class="text-muted">Foto saat ini:</small><br>
-                    <img src="{{ asset('storage/'.$produk->foto_produk) }}" width="100" class="mt-2 rounded">
-                @endif
-            </div>
-
-            <button type="submit" class="btn btn-success">Update Produk</button>
-            <a href="{{ route('petani.produk.index') }}" class="btn btn-secondary">Batal</a>
-        </form>
+                <button type="submit" class="btn btn-success">Update Produk</button>
+                <a href="{{ route('petani.produk.index') }}" class="btn btn-secondary">Batal</a>
+            </form>
+        </div>
     </div>
-</div>
-@endsection
\ No newline at end of file
+@endsection
diff --git a/routes/web.php b/routes/web.php
index 3dcb69e..29a140b 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -4,6 +4,7 @@
 use App\Http\Controllers\AuthController;
 use App\Http\Controllers\AdminController;
 use App\Http\Controllers\CartController;
+use App\Http\Controllers\ForgotPasswordController;
 use App\Http\Controllers\LandingController;
 use App\Http\Controllers\PesanController;
 use App\Http\Controllers\Petani\DashboardController;
@@ -40,6 +41,12 @@
 
     Route::get('/register', [AuthController::class, 'showRegisterForm'])->name('register');
     Route::post('/register-proses', [AuthController::class, 'registerProcess'])->name('register.proses');
+
+    Route::get('/forgot-password', [ForgotPasswordController::class, 'showLinkRequestForm'])->name('password.request');
+    Route::post('/forgot-password', [ForgotPasswordController::class, 'sendResetLinkEmail'])->name('password.email');
+    
+    Route::get('/reset-password/{token}', [ForgotPasswordController::class, 'showResetForm'])->name('password.reset');
+    Route::post('/reset-password', [ForgotPasswordController::class, 'reset'])->name('password.update');
 });
 
 // Logout