diff --git a/app/Http/Controllers/Web/Program/DetailKelompokController.php b/app/Http/Controllers/Web/Program/DetailKelompokController.php
new file mode 100644
index 0000000..15fafc5
--- /dev/null
+++ b/app/Http/Controllers/Web/Program/DetailKelompokController.php
@@ -0,0 +1,99 @@
+<?php
+
+namespace App\Http\Controllers\Web\Program;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Models\Program\DetailKelompok;
+use App\Models\Program\KelompokBelajarTani;
+use App\Models\User;
+use App\Enums\Role;
+use Illuminate\Validation\Rule;
+
+class DetailKelompokController extends Controller
+{
+    public function store(Request $request)
+    {
+        $request->validate([
+            'kelompok_id' => 'required|exists:kelompok_belajar_tani,id',
+            'user_id'     => [
+                'required',
+                Rule::exists('users', 'id')->where('role', Role::PETANI->value),
+            ],
+            'jabatan'     => 'required|string|max:255',
+        ]);
+
+        $user = User::with('profile')
+            ->where('role', Role::PETANI->value)
+            ->findOrFail($request->user_id);
+
+        DetailKelompok::create([
+            'kelompok_id'  => $request->kelompok_id,
+            'user_id'      => $user->id,
+            'nama_anggota' => $user->name,
+            'jabatan'      => $request->jabatan,
+            'no_hp'        => $user->profile->telepon ?? null,
+            'alamat'       => $user->profile->desakelurahan->nama ?? null,
+        ]);
+
+        return back()->with(
+            'success',
+            'Anggota berhasil ditambahkan.'
+        );
+    }
+
+    public function update(Request $request, $id)
+    {
+        $request->validate([
+            'user_id' => [
+                'required',
+                Rule::exists('users', 'id')->where('role', Role::PETANI->value),
+            ],
+            'jabatan' => 'required|string|max:255',
+        ]);
+
+        $anggota = DetailKelompok::findOrFail($id);
+
+        $user = User::with('profile')
+            ->where('role', Role::PETANI->value)
+            ->findOrFail($request->user_id);
+
+        $anggota->update([
+            'user_id'      => $user->id,
+            'nama_anggota' => $user->name,
+            'jabatan'      => $request->jabatan,
+            'no_hp'        => $user->profile->telepon ?? null,
+            'alamat'       => $user->profile->desakelurahan->nama ?? null,
+        ]);
+
+        return back()->with(
+            'success',
+            'Anggota berhasil diperbarui.'
+        );
+    }
+
+    public function destroy($id)
+    {
+        $anggota = DetailKelompok::findOrFail($id);
+
+        $anggota->delete();
+
+        return back()->with('success', 'Anggota berhasil dihapus.');
+    }
+
+    public function detail($id)
+    {
+        $kelompok = KelompokBelajarTani::with('detailAnggota.user')
+            ->findOrFail($id);
+
+        $petani = User::with('profile')
+            ->where('role', Role::PETANI->value)
+            ->orderBy('name')
+            ->get();
+
+        return view('program.kelompokbelajar.detailkelompok', compact(
+            'kelompok',
+            'petani'
+        ));
+    }
+}
diff --git a/app/Http/Controllers/Web/Program/KelompokBelajarTaniController.php b/app/Http/Controllers/Web/Program/KelompokBelajarTaniController.php
index 9f79182..32875a2 100644
--- a/app/Http/Controllers/Web/Program/KelompokBelajarTaniController.php
+++ b/app/Http/Controllers/Web/Program/KelompokBelajarTaniController.php
@@ -5,6 +5,8 @@ namespace App\Http\Controllers\Web\Program;
 use App\Http\Controllers\Controller;
 use Illuminate\Http\Request;
 use App\Models\Program\KelompokBelajarTani;
+use App\Models\Program\DetailKelompok;
+use App\Models\User;
 
 class KelompokBelajarTaniController extends Controller
 {
@@ -145,4 +147,19 @@ class KelompokBelajarTaniController extends Controller
             'data'   => $kelompok
         ]);
     }
+
+    public function detail($id)
+    {
+        $kelompok = KelompokBelajarTani::with('detailAnggota.user')
+            ->findOrFail($id);
+
+        $petani = User::where('role', 'petani')
+            ->orderBy('name')
+            ->get();
+
+        return view('program.kelompokbelajar.detailkelompok', compact(
+            'kelompok',
+            'petani'
+        ));
+    }
 }
\ No newline at end of file
diff --git a/app/Models/Program/DetailKelompok.php b/app/Models/Program/DetailKelompok.php
new file mode 100644
index 0000000..bc3755a
--- /dev/null
+++ b/app/Models/Program/DetailKelompok.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Models\Program;
+
+use Illuminate\Database\Eloquent\Model;
+use App\Models\User;
+
+class DetailKelompok extends Model
+{
+    protected $table = 'detail_kelompok';
+
+    protected $fillable = [
+        'kelompok_id',
+        'user_id',
+        'nama_anggota',
+        'jabatan',
+        'no_hp',
+        'alamat'
+    ];
+
+    // RELASI KE KELOMPOK
+    public function kelompok()
+    {
+        return $this->belongsTo(
+            KelompokBelajarTani::class,
+            'kelompok_id'
+        );
+    }
+
+    // RELASI KE USER
+    public function user()
+    {
+        return $this->belongsTo(
+            User::class,
+            'user_id'
+        );
+    }
+}
\ No newline at end of file
diff --git a/app/Models/Program/KelompokBelajarTani.php b/app/Models/Program/KelompokBelajarTani.php
index a3cf92c..4726493 100644
--- a/app/Models/Program/KelompokBelajarTani.php
+++ b/app/Models/Program/KelompokBelajarTani.php
@@ -4,6 +4,7 @@ namespace App\Models\Program;
 
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\SoftDeletes;
+use App\Models\Program\DetailKelompok;
 
 class KelompokBelajarTani extends Model
 {
@@ -19,4 +20,11 @@ class KelompokBelajarTani extends Model
         'updated_by',
         'deleted_by',
     ];
+
+    public function detailAnggota(){
+        return $this->hasMany(
+            DetailKelompok::class,
+            'kelompok_id'
+        );
+    }
 }
\ No newline at end of file
diff --git a/app/Models/User.php b/app/Models/User.php
index a35ec1f..8351492 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -37,7 +37,7 @@ class User extends Authenticatable
         ];
     }
 
-    protected function profile(): HasOne
+    public function profile(): HasOne
     {
         return $this->hasOne(\App\Models\Profile::class);
     }
diff --git a/database/migrations/2026_05_12_104615_create_detail_kelompok_table.php b/database/migrations/2026_05_12_104615_create_detail_kelompok_table.php
new file mode 100644
index 0000000..ef3d4a4
--- /dev/null
+++ b/database/migrations/2026_05_12_104615_create_detail_kelompok_table.php
@@ -0,0 +1,37 @@
+<?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('detail_kelompok', function (Blueprint $table) {
+            $table->id();
+
+            $table->foreignId('kelompok_id')
+                ->constrained('kelompok_belajar_tani')
+                ->onDelete('cascade');
+
+            $table->string('nama_anggota');
+            $table->string('jabatan')->nullable();
+            $table->string('no_hp')->nullable();
+            $table->text('alamat')->nullable();
+
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('detail_kelompok');
+    }
+};
diff --git a/database/migrations/2026_05_13_100715_update_detail_kelompok_table.php b/database/migrations/2026_05_13_100715_update_detail_kelompok_table.php
new file mode 100644
index 0000000..1f5e199
--- /dev/null
+++ b/database/migrations/2026_05_13_100715_update_detail_kelompok_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('detail_kelompok', function (Blueprint $table) {
+
+            $table->foreignId('user_id')
+                ->nullable()
+                ->after('kelompok_id')
+                ->constrained('users')
+                ->nullOnDelete();
+
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('detail_kelompok', function (Blueprint $table) {
+
+            $table->dropForeign(['user_id']);
+            $table->dropColumn('user_id');
+
+        });
+    }
+};
\ No newline at end of file
diff --git a/resources/views/program/kelompokbelajar/detailkelompok.blade.php b/resources/views/program/kelompokbelajar/detailkelompok.blade.php
new file mode 100644
index 0000000..a11d2f0
--- /dev/null
+++ b/resources/views/program/kelompokbelajar/detailkelompok.blade.php
@@ -0,0 +1,384 @@
+@extends('layout.main')
+
+@section('content')
+<div class="container-xxl flex-grow-1 container-p-y">
+
+    {{-- HEADER --}}
+    <div class="card mb-4">
+
+        <div class="card-header d-flex justify-content-between align-items-center">
+
+            <div>
+                <h4 class="mb-1">
+                    {{ $kelompok->nama_kelompok }}
+                </h4>
+
+                <small class="text-muted">
+                    {{ $kelompok->deskripsi ?? 'Tidak ada deskripsi' }}
+                </small>
+            </div>
+
+            <div class="d-flex gap-2">
+
+                <button type="button"
+                    class="btn btn-primary"
+                    data-bs-toggle="offcanvas"
+                    data-bs-target="#offcanvasAddAnggota">
+
+                    <i class="ti tabler-plus me-1"></i>
+                    Tambah Anggota
+                </button>
+
+                <a href="{{ route('kelompok-belajar-tani.index') }}"
+                    class="btn btn-label-secondary">
+
+                    Kembali
+                </a>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    {{-- TABEL --}}
+    <div class="card">
+
+        <div class="card-header border-bottom">
+            <h5 class="card-title mb-0">
+                Detail Anggota Kelompok
+            </h5>
+        </div>
+
+        <div class="table-responsive">
+
+            <table class="table table-hover">
+
+                <thead class="border-top">
+
+                    <tr>
+                        <th>No</th>
+                        <th>Nama Anggota</th>
+                        <th>Jabatan</th>
+                        <th>Telepon</th>
+                        <th>Desa/Kelurahan</th>
+                        <th>Actions</th>
+                    </tr>
+
+                </thead>
+
+                <tbody>
+
+                    @forelse($kelompok->detailAnggota as $index => $anggota)
+
+                    <tr>
+
+                        <td>{{ $index + 1 }}</td>
+
+                        <td>{{ $anggota->user->name ?? '-' }}</td>
+
+                        <td>{{ $anggota->jabatan ?? '-' }}</td>
+
+                        <td>{{ $anggota->no_hp ?? '-' }}</td>
+
+                        <td>{{ $anggota->alamat ?? '-' }}</td>
+
+                        <td>
+
+                            <div class="d-flex align-items-center">
+
+                                {{-- EDIT --}}
+                                <button type="button"
+                                    class="btn btn-icon btn-text-secondary rounded-pill edit-record"
+                                    data-id="{{ $anggota->id }}"
+                                    data-user="{{ $anggota->user_id }}"
+                                    data-jabatan="{{ $anggota->jabatan }}"
+                                    data-nohp="{{ $anggota->no_hp }}"
+                                    data-alamat="{{ $anggota->alamat }}">
+
+                                    <i class="ti tabler-edit ti-md"></i>
+                                </button>
+
+                                {{-- DELETE --}}
+                                <form action="{{ route('detail-anggota.destroy', $anggota->id) }}"
+                                    method="POST"
+                                    class="d-inline">
+
+                                    @csrf
+                                    @method('DELETE')
+
+                                    <button type="submit"
+                                        class="btn btn-icon btn-text-secondary rounded-pill"
+                                        onclick="return confirm('Yakin hapus data?')">
+
+                                        <i class="ti tabler-trash ti-md"></i>
+                                    </button>
+
+                                </form>
+
+                            </div>
+
+                        </td>
+
+                    </tr>
+
+                    @empty
+
+                    <tr>
+                        <td colspan="6"
+                            class="text-center py-4">
+
+                            Belum ada anggota kelompok.
+                        </td>
+                    </tr>
+
+                    @endforelse
+
+                </tbody>
+
+            </table>
+
+        </div>
+
+    </div>
+
+</div>
+
+{{-- OFFCANVAS ADD --}}
+<div class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasAddAnggota">
+
+    <div class="offcanvas-header border-bottom">
+
+        <h5 class="offcanvas-title">
+            Tambah Anggota
+        </h5>
+
+        <button type="button"
+            class="btn-close"
+            data-bs-dismiss="offcanvas"></button>
+
+    </div>
+
+    <div class="offcanvas-body">
+
+        <form action="{{ route('detail-anggota.store') }}"
+            method="POST">
+
+            @csrf
+
+            <input type="hidden"
+                name="kelompok_id"
+                value="{{ $kelompok->id }}">
+
+            <div class="mb-3">
+                <label class="form-label">
+                    Nama Anggota
+                </label>
+
+                <select name="user_id"
+                    id="add_user_id"
+                    class="form-select"
+                    required>
+
+                    <option value="">
+                        -- Pilih Petani --
+                    </option>
+
+                    @foreach($petani as $item)
+
+                        <option value="{{ $item->id }}"
+                            data-nohp="{{ $item->profile->telepon ?? '' }}"
+                            data-alamat="{{ $item->profile->desakelurahan->nama ?? '' }}">
+
+                            {{ $item->name }}
+                        </option>
+
+                    @endforeach
+
+                </select>
+            </div>
+
+            <div class="mb-3">
+                <label class="form-label">Jabatan</label>
+
+                <select name="jabatan" class="form-select" required>
+                    <option value="">-- Pilih Jabatan --</option>
+                    <option value="Ketua Kelompok">Ketua Kelompok</option>
+                    <option value="Anggota Kelompok">Anggota Kelompok</option>
+                </select>
+            </div>
+
+            <div class="mb-3">
+                <label class="form-label">Telepon</label>
+
+                <input type="text"
+                    name="no_hp"
+                    id="no_hp"
+                    class="form-control"
+                    disabled>
+            </div>
+
+            <div class="mb-3">
+                <label class="form-label">Desa/Kelurahan</label>
+
+                <textarea name="alamat"
+                    id="alamat"
+                    class="form-control"
+                    rows="3"
+                    disabled></textarea>
+            </div>
+
+            <button type="submit"
+                class="btn btn-primary">
+
+                Simpan
+            </button>
+
+        </form>
+
+    </div>
+
+</div>
+
+{{-- OFFCANVAS EDIT --}}
+<div class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasEditAnggota">
+
+    <div class="offcanvas-header border-bottom">
+
+        <h5 class="offcanvas-title">
+            Edit Anggota
+        </h5>
+
+        <button type="button"
+            class="btn-close"
+            data-bs-dismiss="offcanvas"></button>
+
+    </div>
+
+    <div class="offcanvas-body">
+
+        <form id="formEditAnggota"
+            method="POST">
+
+            @csrf
+            @method('PUT')
+
+            <div class="mb-3">
+                <label class="form-label">
+                    Nama Anggota
+                </label>
+
+                <select name="user_id"
+                    id="edit_user_id"
+                    class="form-select"
+                    required>
+
+                    <option value="">
+                        -- Pilih Petani --
+                    </option>
+
+                    @foreach($petani as $item)
+
+                       <option value="{{ $item->id }}"
+                            data-nohp="{{ $item->profile->telepon ?? '' }}"
+                            data-alamat="{{ $item->profile->desakelurahan->nama ?? '' }}">
+
+                            {{ $item->name }}
+                        </option>
+
+                    @endforeach
+
+                </select>
+            </div>
+
+            <div class="mb-3">
+                <label class="form-label">Jabatan</label>
+
+                <select name="jabatan" id="edit_jabatan" class="form-select">
+                    <option value="">-- Pilih Jabatan --</option>
+                    <option value="Ketua Kelompok">Ketua Kelompok</option>
+                    <option value="Anggota Kelompok">Anggota Kelompok</option>
+                </select>
+            </div>
+
+            <div class="mb-3">
+                <label class="form-label">Telepon</label>
+
+                <input type="text"
+                    name="no_hp"
+                    id="edit_nohp"
+                    class="form-control"
+                    disabled>
+            </div>
+
+            <div class="mb-3">
+                <label class="form-label">Desa/Kelurahan</label>
+
+                <textarea name="alamat"
+                    id="edit_alamat"
+                    class="form-control"
+                    rows="3"
+                    disabled></textarea>
+            </div>
+
+            <button type="submit"
+                class="btn btn-primary">
+
+                Update
+            </button>
+
+        </form>
+
+    </div>
+
+</div>
+@endsection
+
+@push('scripts')
+<script>
+$(document).ready(function () {
+
+    const offcanvasEdit =
+        new bootstrap.Offcanvas(
+            document.getElementById('offcanvasEditAnggota')
+        );
+
+    // AUTO ISI NO HP & ALAMAT SAAT TAMBAH
+    $('#add_user_id').on('change', function () {
+        let selected = $(this).find(':selected');
+
+        $('#no_hp').val(selected.data('nohp') || '');
+        $('#alamat').val(selected.data('alamat') || '');
+    });
+
+    // AUTO ISI NO HP & ALAMAT SAAT EDIT GANTI PETANI
+    $('#edit_user_id').on('change', function () {
+        let selected = $(this).find(':selected');
+
+        $('#edit_nohp').val(selected.data('nohp') || '');
+        $('#edit_alamat').val(selected.data('alamat') || '');
+    });
+
+    // BUKA OFFCANVAS EDIT
+    $(document).on('click', '.edit-record', function () {
+
+        let id = $(this).data('id');
+
+        $('#edit_user_id').val($(this).data('user')).trigger('change');
+        $('#edit_jabatan').val($(this).data('jabatan'));
+
+        $('#formEditAnggota').attr(
+            'action',
+            `/detail-anggota/${id}`
+        );
+
+        offcanvasEdit.show();
+    });
+
+});
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/program/kelompokbelajar/index.blade.php b/resources/views/program/kelompokbelajar/index.blade.php
index 3308c19..9764b70 100644
--- a/resources/views/program/kelompokbelajar/index.blade.php
+++ b/resources/views/program/kelompokbelajar/index.blade.php
@@ -310,6 +310,13 @@
 
                                 </form>
 
+                                <a href="{{ route('kelompok-belajar-tani.detail', $item->id) }}"
+                                    class="btn btn-icon btn-text-secondary rounded-pill"
+                                    title="Detail">
+
+                                    <i class="ti tabler-eye ti-md"></i>
+                                </a>
+
                             </div>
 
                         </td>
diff --git a/routes/web.php b/routes/web.php
index 9ceb9fb..31b37e4 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -108,6 +108,8 @@ Route::middleware('auth')
     Route::resource('program.lokasi', App\Http\Controllers\Web\ProgramLokasiController::class)->only(['store', 'update', 'destroy']);
     Route::resource('workshop', App\Http\Controllers\Web\Program\WorkshopController::class);
     Route::resource('kelompok-belajar-tani', App\Http\Controllers\Web\Program\KelompokBelajarTaniController::class);
+    Route::resource('detail-anggota', App\Http\Controllers\Web\Program\DetailKelompokController::class);
+    Route::get('/kelompok-belajar-tani/{id}/detail',[App\Http\Controllers\Web\Program\KelompokBelajarTaniController::class, 'detail'])->name('kelompok-belajar-tani.detail');
 
     // Basis Data Ekosistem
     Route::resource('group', App\Http\Controllers\Web\Ekosistem\GroupBasisDataController::class);