diff --git a/projek_pkl/app/Http/Controllers/KaryawanController.php b/projek_pkl/app/Http/Controllers/KaryawanController.php
new file mode 100644
index 0000000..ed041b8
--- /dev/null
+++ b/projek_pkl/app/Http/Controllers/KaryawanController.php
@@ -0,0 +1,31 @@
+<?php
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class KaryawanController extends Controller
+{
+   private $karyawan = [
+        1 => ['nama' => 'Budi', 'umur' => 20, 'jabatan' => 'Manager'],
+        2 => ['nama' => 'Siti', 'umur' => 21, 'jabatan' => 'Staff'],
+        3 => ['nama' => 'Andi', 'umur' => 22, 'jabatan' => 'Staff'],
+        4 => ['nama' => 'Caca', 'umur' => 23, 'jabatan' => 'Staff'],
+        5 => ['nama' => 'Rudy', 'umur' => 24, 'jabatan' => 'Staff'],
+    ];
+
+    public function index()
+    {
+         $karyawan = $this->karyawan;
+        return view('karyawan.index', compact('karyawan'));
+    }
+
+    public function show($id)
+    {
+        $data = $this->karyawan[$id] ?? null;
+
+        if (!$data) {
+            abort(404, 'Karyawan tidak ditemukan');
+        }
+        return view('karyawan.show', compact('data'));
+    }
+}
diff --git a/projek_pkl/resources/views/karyawan/index.blade.php b/projek_pkl/resources/views/karyawan/index.blade.php
new file mode 100644
index 0000000..476cf81
--- /dev/null
+++ b/projek_pkl/resources/views/karyawan/index.blade.php
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <title>Data Karyawan</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #b64fdb, #ACB6E5);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #333;
+        }
+        .container {
+            width: 90%;
+            max-width: 900px;
+            background: #ffffff;
+            padding: 40px;
+            border-radius: 20px;
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+        }
+        h1 {
+            text-align: center;
+            margin-bottom: 30px;
+            color: #2c3e50;
+        }
+        .button {
+            display: inline-block;
+            padding: 14px 30px;
+            margin-top: 20px;
+            color: #ffffff;
+            background: #bd7dd4;
+            text-decoration: none;
+            border-radius: 50px;
+            font-weight: 600;
+            transition: background 0.3s ease;
+        }
+        .button:hover {
+            background: #ACB6E5;
+        }
+        .alert {
+            padding: 15px;
+            background-color: #d1f2eb;
+            color: #117864;
+            margin-bottom: 20px;
+            border-left: 6px solid #1abc9c;
+            border-radius: 8px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+            overflow: hidden;
+            border-radius: 15px;
+        }
+        thead {
+            background-color: #bd7dd4;
+            color: white;
+        }
+        th, td {
+            padding: 15px;
+            text-align: center;
+            font-size: 16px;
+            border-bottom: 1px solid #e1e1e1;
+        }
+        tbody tr:nth-child(even) {
+            background-color: #f4f9fd;
+        }
+        tbody tr:hover {
+            background-color: #e1e6fc;
+        }
+        p {
+            text-align: center;
+            margin-top: 20px;
+            font-size: 18px;
+            color: #555;
+        }
+
+        .button-opsi {
+            display: inline-block;
+            padding: 10px 15px;
+            margin-top: 2px;
+            color: #ffffff;
+            background: #b64fdb;
+            text-decoration: none;
+            border: none;
+            border-radius: 15px;
+            font-size: 14px;
+            font family: 'Poppins', sans-serif;
+            font-weight: 300;
+            transition: background 0.3s ease;
+            margin-right: 5px;
+            cursor: pointer;
+        }
+        
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Data Karyawan</h1>
+
+        @if(session('success'))
+            <div class="alert">{{ session('success') }}</div>
+        @endif
+
+        @if(count($karyawan) > 0)
+            <table>
+                <thead>
+                    <tr>
+                        <th>No</th>
+                        <th>Nama</th>
+                        <th>Umur</th>
+                        <th>Jabatan</th>
+                        <th>Detail</th>
+                    </tr>
+                </thead>
+                <tbody>
+                   @foreach($karyawan as $index => $item)
+                    <tr>
+                        <td>{{ $index + 0 }}</td>
+                        <td>{{ $item['nama'] }}</td>
+                        <td>{{ $item['umur'] }}</td>
+                        <td>{{ $item['jabatan'] }}</td>
+                        <td>
+                            <a href="{{ url('/karyawan/' . $index) }}" class="button-opsi">Lihat</a>
+                        </td>
+                    </tr>
+                    @endforeach
+                </tbody>
+            </table>
+        @else
+            <p>Belum ada data karyawan yang terdaftar.</p>
+        @endif
+    </div>
+</body>
+</html>
diff --git a/projek_pkl/resources/views/karyawan/show.blade.php b/projek_pkl/resources/views/karyawan/show.blade.php
new file mode 100644
index 0000000..e9d88c4
--- /dev/null
+++ b/projek_pkl/resources/views/karyawan/show.blade.php
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <title>Detail Karyawan</title>
+    <style>
+        /* CSS tetap pakai yang sudah kamu buat sebelumnya */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #b64fdb, #ACB6E5);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #333;
+        }
+        .container {
+            width: 90%;
+            max-width: 600px;
+            background: #ffffff;
+            padding: 40px;
+            border-radius: 20px;
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+        }
+        h1 {
+            text-align: center;
+            margin-bottom: 30px;
+            color: #2c3e50;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 10px;
+            overflow: hidden;
+            border-radius: 15px;
+        }
+        th, td {
+            padding: 15px;
+            font-size: 16px;
+            border-bottom: 1px solid #e1e1e1;
+            text-align: left;
+        }
+        tr:nth-child(even) {
+            background-color: #f4f9fd;
+        }
+        .button {
+            display: inline-block;
+            padding: 10px 20px;
+            margin-top: 20px;
+            color: #ffffff;
+            background: #bd7dd4;
+            text-decoration: none;
+            border-radius: 50px;
+            font-weight: 600;
+            transition: background 0.3s ease;
+        }
+        .button:hover {
+            background: #ACB6E5;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Detail Karyawan</h1>
+        <table>
+            <tr>
+                <th>Nama</th>
+                <td>{{ $data['nama'] }}</td>
+            </tr>
+            <tr>
+                <th>Umur</th>
+                <td>{{ $data['umur'] }}</td>
+            </tr>
+            <tr>
+                <th>jabatan</th>
+                <td>{{ $data['jabatan'] }}</td>
+            </tr>
+        </table>
+
+        <a href="{{ url('/karyawan') }}" class="button">← Kembali</a>
+    </div>
+</body>
+</html>
diff --git a/projek_pkl/routes/web.php b/projek_pkl/routes/web.php
index 7aae62c..546341a 100644
--- a/projek_pkl/routes/web.php
+++ b/projek_pkl/routes/web.php
@@ -3,6 +3,8 @@
 use Illuminate\Support\Facades\Route;
 use Illuminate\Http\Request;
 use Illuminate\App\Http\Controllers\SiswaController;
+use App\Http\Controllers\KaryawanController;
+
 
 Route::get('/', function () {
     return view('welcome');
@@ -51,3 +53,10 @@ Route::get('/siswa/{id}', [App\Http\Controllers\SiswaController::class, 'show'])
 
 
 
+// KARYAWAN
+Route::get('/karyawan', [KaryawanController::class, 'index']);
+Route::get('/karyawan/{id}', [KaryawanController::class, 'show']);
+
+
+
+

Nama	{{ $data['nama'] }}
Umur	{{ $data['umur'] }}
jabatan	{{ $data['jabatan'] }}