diff --git a/app/Http/Controllers/DataSoalController.php b/app/Http/Controllers/DataSoalController.php
index 933f73b..176bd9c 100644
--- a/app/Http/Controllers/DataSoalController.php
+++ b/app/Http/Controllers/DataSoalController.php
@@ -2,10 +2,22 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\DataSoalModel;
 use Illuminate\Http\Request;
 
 class DataSoalController extends Controller
 {
+
+    /**
+     * Display data for javascript ajax
+     */
+    public function getData() {
+        $data = DataSoalModel::get();
+        return response()->json([
+            'status' => true,
+            'data' => $data->toArray()
+        ]);
+    }
     /**
      * Display a listing of the resource.
      */
diff --git a/app/Models/DataSoalModel.php b/app/Models/DataSoalModel.php
index e63d76c..fba46b9 100644
--- a/app/Models/DataSoalModel.php
+++ b/app/Models/DataSoalModel.php
@@ -3,8 +3,40 @@
 namespace App\Models;
 
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Str;
 
 class DataSoalModel extends Model
 {
-    //
+    protected $table = 'soal';
+
+    protected $primaryKey = 'id_soal';
+
+    protected $keyType = 'string';
+
+    public $incrementing = false;
+
+    protected $fillable = [
+        'pertanyaan',
+        'jawaban_a',
+        'jawaban_b',
+        'jawaban_c',
+        'jawaban_d',
+        'jawaban_e',
+        'jawaban_benar',
+    ];
+
+    protected $casts = [
+        'id_soal' => 'string',
+    ];
+
+    protected static function boot()
+    {
+        parent::boot();
+        static::creating(function ($model) {
+            if (empty($model->id_lowongan_pekerjaan)) {
+                $model->id_lowongan_pekerjaan = Str::uuid();
+            }
+        });
+    }
+    
 }
diff --git a/resources/views/admin/pages/data_soal/index.blade.php b/resources/views/admin/pages/data_soal/index.blade.php
index a06eaa9..8c3ad5e 100644
--- a/resources/views/admin/pages/data_soal/index.blade.php
+++ b/resources/views/admin/pages/data_soal/index.blade.php
@@ -30,41 +30,26 @@
               <h5>Kumpulan Soal</h5>
             </div>
             <div class="col-md-6 d-flex justify-content-end">
-              <button type="button" class="btn btn-sm btn-primary rounded-circle">
+              <button class="btn btn-sm btn-info delete-btn rounded-circle mx-1" data-bs-toggle="modal" data-bs-target="#addModal">
                 <i class="ti ti-database-import"></i>
               </button>
             </div>
           </div>
 				</div>
 				<div class="card-body">
+          <div class="alert alert-info alert-dismissible fade show" role="alert">
+            <strong>Note:</strong> Untuk melihat jawaban dan kunci jawaban, silahkan tekan tombol info
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+          </div>
           <table class="table" id="table-data">
             <thead>
               <tr>
                 <th>No</th>
-                <th>Dummy</th>
-                <th>Dummy</th>
-                <th>Dummy</th>
+                <th>Pertanyaan</th>
                 <th>Aksi</th>
               </tr>
             </thead>
-            <tbody>
-              <tr>
-                <td>1</td>
-                <td>lorem</td>
-                <td>lorem</td>
-                <td>lorem</td>
-                <td>
-                  <div class="btn-group">
-                    <button type="button" class="btn btn-info btn-sm rounded-circle mx-1" data-bs-toggle="modal" data-bs-target="#editModal" onclick="getDataEdit(this)" data-id="${data.id}">
-                      <i class="ti ti-edit"></i>
-                    </button>
-                    <button class="btn btn-sm btn-danger delete-btn rounded-circle mx-1" data-bs-toggle="modal" data-bs-target="#deleteModal" onclick="getDataHapus(this)" data-id="${data.id}">
-                      <i class="ti ti-trash"></i>
-                    </button>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
+            <tbody></tbody>
           </table>
 				</div>
 			</div>
@@ -72,10 +57,114 @@
 		<!-- [ sample-page ] end -->
 	</div>
 	<!-- [ Main Content ] end -->
+
+  <!-- Modal Add -->
+  <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title fs-5" id="exampleModalLabel">Add Data</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="row">
+            <div class="col-md-12 my-1">
+              <label for="pertanyaan" class="form-label">Pertanyaan</label>
+              <input type="text" class="form-control" id="pertanyaan" name="pertanyaan">
+            </div>
+            <div class="col-md-12 my-1">
+              <label for="jawaban_a" class="form-label">Jawaban A</label>
+              <input type="text" class="form-control" id="jawaban_a" name="jawaban_a">
+            </div>
+            <div class="col-md-12 my-1">
+              <label for="jawaban_b" class="form-label">Jawaban B</label>
+              <input type="text" class="form-control" id="jawaban_b" name="jawaban_b">
+            </div>
+            <div class="col-md-12 my-1">
+              <label for="jawaban_c" class="form-label">Jawaban C</label>
+              <input type="text" class="form-control" id="jawaban_c" name="jawaban_c">
+            </div>
+            <div class="col-md-12 my-1">
+              <label for="jawaban_d" class="form-label">Jawaban D</label>
+              <input type="text" class="form-control" id="jawaban_d" name="jawaban_d">
+            </div>
+            <div class="col-md-12 my-1">
+              <label for="jawaban_e" class="form-label">Jawaban E</label>
+              <input type="text" class="form-control" id="jawaban_e" name="jawaban_e">
+            </div>
+            <div class="col-md-6 my-1">
+              <label for="jawaban_benar" class="form-label">Jawaban Benar</label>
+              <select class="form-select" name="jawaban_benar" id="jawaban_benar">
+                <option value="a">A</option>
+                <option value="b">B</option>
+                <option value="c">C</option>
+                <option value="d">D</option>
+                <option value="e">E</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
+          <button type="button" class="btn btn-primary" onclick="simpanEditData()">Simpan</button>
+        </div>
+      </div>
+    </div>
+  </div>
 @endsection
 
 @section('script')
 	<script>
-		new DataTable("#table-data", {});
+    let table = null;
+		$(document).ready(function() {
+      table = new DataTable("#table-data", {
+        ajax: {
+          url: '{{ route('soal.fetchData') }}',
+        },
+        columns: [
+          {
+            data: null,
+            render: function(data, type, row, meta) {
+              return meta.row + 1;
+            }
+          },
+          {
+            data: 'pertanyaan'
+          },
+          {
+            data: null,
+            render: function(data, type, row, meta) {
+              return `
+                <div class="btn-group">
+                  <button type="button" class="btn btn-info btn-sm rounded-circle mx-1" data-bs-toggle="modal" data-bs-target="#editModal" onclick="getDataEdit(this)" data-id="${data.id}">
+                    <i class="ti ti-edit"></i>
+                  </button>
+                  <button class="btn btn-sm btn-danger delete-btn rounded-circle mx-1" data-bs-toggle="modal" data-bs-target="#deleteModal" onclick="getDataHapus(this)" data-id="${data.id}">
+                    <i class="ti ti-trash"></i>
+                  </button>
+                </div>
+              `;
+            }
+          }
+        ]
+      });
+    });
+
+    function fetchRowData() {
+      table.ajax.reload(null, false);
+    }
+
+    function getDataEdit(btn) {
+      idEdit = btn.getAttribute('data-id');
+      let urlEdit = '{{ route('users.edit', ['__ID__']) }}';
+
+      $.get(urlEdit.replace('__ID__', idEdit), function(data, status) {
+        if(data.status) {
+          $('#edit_nama_user').val(data.data.name);
+          $('#edit_email').val(data.data.email);
+          $('#edit_role').val(data.data.role);
+        }
+      });
+    }
 	</script>
 @endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 33ede61..b43689e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -28,6 +28,7 @@
     Route::resource('users', UsersController::class);
         Route::get('users/fetch/data', [UsersController::class, 'getData'])->name('users.fetchData');
     Route::resource('soal', DataSoalController::class);
+        Route::get('soal/fetch/data', [DataSoalController::class, 'getData'])->name('soal.fetchData');
     Route::resource('hasil_tes', HasilTesController::class);
 });