diff --git a/app/Http/Controllers/Api/V1/MemberinController.php b/app/Http/Controllers/Api/V1/MemberinController.php
new file mode 100644
index 0000000..5d06dd1
--- /dev/null
+++ b/app/Http/Controllers/Api/V1/MemberinController.php
@@ -0,0 +1,125 @@
+<?php
+
+namespace App\Http\Controllers\Api\V1;
+
+use App\Http\Controllers\Controller;
+use Carbon\Carbon;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Log;
+
+class MemberinController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     *
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function show($id)
+    {
+        Log::info($id);
+        $dateNow = Carbon::now();
+
+        $data = DB::table('mergetransaksistikerdetail as a')
+            ->select('a.*','jm.nama as vehicle')
+            ->leftjoin('jenis_mobil as jm','jm.id','=','a.jenis_mobil')
+            ->where('nopol', $id)
+            ->orderByDesc('tgl_edited')
+            ->first();
+
+        $akhir = Carbon::parse($data->akhir);
+
+        if(!$data) {
+            return response()->json([
+                'status'=>false,
+                'message'=>'Member tidak ditemukan'
+            ]);
+        }
+
+        if($dateNow->greaterThan($akhir)){
+
+                return response()->json([
+                    'status' => 'expired',
+                    'expired' => true,
+                    'message' => 'Member expired',
+                    'data' => $data
+                ]);
+        } else {
+            return response()->json([
+                'status' => 'active',
+                'expired' => false,
+                'message' => 'Member aktif',
+                'data' => $data
+            ]);
+        }   
+
+
+        Log::info(json_encode($data));
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     *
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function edit($id)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function update(Request $request, $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy($id)
+    {
+        //
+    }
+}
diff --git a/app/Http/Controllers/Apps/Memberin/SelfMemberinController.php b/app/Http/Controllers/Apps/Memberin/SelfMemberinController.php
index 5491936..cf480d8 100644
--- a/app/Http/Controllers/Apps/Memberin/SelfMemberinController.php
+++ b/app/Http/Controllers/Apps/Memberin/SelfMemberinController.php
@@ -4,6 +4,8 @@
 
 use App\Http\Controllers\Controller;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Log;
 
 class SelfMemberinController extends Controller
 {
@@ -12,9 +14,21 @@ class SelfMemberinController extends Controller
      *
      * @return \Illuminate\Http\Response
      */
-    public function index()
+    public function index(Request $request)
     {
-        return view('apps.member.create');
+        $jenis = $request->query('jenis');
+        Log::info($jenis);
+
+        $tarifStiker = DB::table('tarif_stiker');
+
+        if ($jenis) {
+            $tarifStiker->where('stasiunkerja_id', $jenis);
+        }
+
+        $produk = $tarifStiker->get();
+        Log::info($produk);
+
+        return view('apps.member.index', compact('produk'));
     }
 
     /**
@@ -46,7 +60,13 @@ public function store(Request $request)
      */
     public function show($id)
     {
-        //
+        Log::info($id);
+        $tarifStiker = DB::table('tarif_stiker')
+            ->where('stasiunkerja_id', $id)
+                ->orderby('tarif')
+                ->get();
+
+        return $tarifStiker;
     }
 
     /**
diff --git a/public/css/member/member.css b/public/css/member/member.css
index bd6213e..8c3e09f 100644
--- a/public/css/member/member.css
+++ b/public/css/member/member.css
@@ -1,3 +1,260 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
\ No newline at end of file
+body{
+    background: linear-gradient(135deg,#0f172a,#1e293b);
+    min-height:100vh;
+}
+
+/* BRAND */
+.brand-logo{
+    position:absolute;
+    left:40px;
+    top:40px;
+
+    display:flex;
+    align-items:center;
+    gap:12px;
+
+    opacity:0.9;
+}
+
+/* logo icon */
+.brand-logo img{
+    height:48px;
+    width:auto;
+}
+
+/* text */
+.brand-text{
+    font-size:28px;
+    font-weight:600;
+    letter-spacing:1px;
+    color:#9bd9e6;
+}
+
+/* highlight Q */
+.brand-q{
+    color:#19c2c8;
+}
+
+/* mobile */
+@media(max-width:768px){
+
+    .brand-logo{
+        position:relative;
+        left:auto;
+        top:auto;
+        justify-content:center;
+        margin-bottom:20px;
+    }
+
+}
+
+/* container center */
+.entry-container{
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    height:100vh;
+}
+
+/* card */
+.entry-card{
+    background:rgba(255,255,255,0.08);
+    backdrop-filter: blur(20px);
+    border:1px solid rgba(255,255,255,0.15);
+    border-radius:20px;
+    padding:50px;
+    text-align:center;
+    box-shadow:0 20px 60px rgba(0,0,0,0.4);
+}
+
+/* title */
+.entry-label{
+    color:white;
+    margin-bottom:30px;
+}
+
+/* input */
+.nopol-input{
+    width:320px;
+    font-size:32px;
+    padding:20px;
+    border-radius:12px;
+    border:1px solid rgba(255,255,255,0.2);
+    background:rgba(255,255,255,0.1);
+    color:white;
+    text-align:center;
+    letter-spacing:4px;
+}
+
+/* focus */
+.nopol-input:focus{
+    outline:none;
+    border-color:#06b6d4;
+    box-shadow:0 0 0 3px rgba(6,182,212,0.3);
+}
+
+/* submit */
+.btn-submit{
+    display:block;
+    width:100%;
+    margin-top:25px;
+    padding:18px;
+    font-size:20px;
+    border:none;
+    border-radius:12px;
+    background:linear-gradient(135deg,#06b6d4,#0891b2);
+    color:white;
+    font-weight:bold;
+}
+
+/* hover */
+.btn-submit:hover{
+    background:linear-gradient(135deg,#0891b2,#0e7490);
+}
+
+/* mobile */
+@media (max-width:576px){
+
+    #form-input{
+        width:90%;
+        padding:30px;
+    }
+
+    #form-active{
+        width:90%;
+        padding:30px;
+    }
+
+    #form-expired{
+        width:90%;
+        padding:30px;
+    }
+
+    .nopol-input{
+        width:100%;
+        font-size:26px;
+    }
+
+}
+
+/* STATUS CARD */
+.status-card{
+    background: rgba(255,255,255,0.08);
+    backdrop-filter: blur(20px);
+    border-radius:18px;
+    padding:30px;
+    text-align:center;
+    border:1px solid rgba(255,255,255,0.15);
+    box-shadow:0 20px 50px rgba(0,0,0,0.35);
+}
+
+/* ACTICE CARD */
+.active-card{
+    border-left:6px solid #067411;
+}
+
+/* EXPIRED CARD */
+.expired-card{
+    border-left:6px solid #f87171;
+}
+
+/* HEADER */
+.status-header{
+    margin-bottom:20px;
+}
+
+/* BADGE */
+.status-badge{
+    display:inline-block;
+    background:#f87171;
+    color:white;
+    padding:6px 14px;
+    border-radius:20px;
+    font-size:12px;
+    margin-bottom:10px;
+}
+
+/* MEMBER INFO */
+.member-info{
+    margin:20px 0;
+}
+
+.info-row{
+    display:flex;
+    justify-content:space-between;
+    margin:8px 0;
+}
+
+.label{
+    opacity:0.7;
+    color:white;
+}
+
+.value{
+    font-weight:bold;
+    color:white;
+}
+
+/* WARNING TEXT */
+.active-warning{
+    background:rgba(113, 248, 158, 0.15);
+    border:1px solid rgba(113, 248, 118, 0.3);
+    padding:12px;
+    border-radius:10px;
+    margin-bottom:20px;
+    color:#a5fcc3;
+}
+
+.status-warning{
+    background:rgba(248,113,113,0.15);
+    border:1px solid rgba(248,113,113,0.3);
+    padding:12px;
+    border-radius:10px;
+    margin-bottom:20px;
+    color:#fca5a5;
+}
+
+.text-warning{
+    font-weight: bold;
+    color: white;
+}
+
+/* SELECT STYLE */
+.form-control.form-select{
+    background: rgba(255,255,255,0.08);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255,255,255,0.2);
+    color: #fff;
+    border-radius: 12px;
+    padding: 12px 16px;
+    font-size: 15px;
+    transition: all .2s ease;
+}
+
+/* hover */
+.form-control.form-select:hover{
+    border-color: rgba(255,255,255,0.35);
+}
+
+/* focus */
+.form-control.form-select:focus{
+    border-color: #06b6d4;
+    box-shadow: 0 0 0 3px rgba(6,182,212,0.25);
+    background: rgba(255,255,255,0.12);
+}
+
+/* dropdown arrow */
+.form-select{
+    background-position: right 12px center;
+}
+
+/* option dropdown */
+.form-select option{
+    color:#000;
+}
+
+/* BUTTON RENEW */
+.btn-renew{
+    background:linear-gradient(135deg,#f87171,#ef4444);
+}
+
diff --git a/resources/css/member.css b/resources/css/member.css
index b5c61c9..f88f12e 100644
--- a/resources/css/member.css
+++ b/resources/css/member.css
@@ -1,3 +1,113 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* BUTTON */
+.btn-primary-modern {
+    background: linear-gradient(135deg,#00a8a8,#007a7a);
+    border: none;
+    padding: 10px 18px;
+    color: white;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.btn-primary-modern:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+}
+
+.btn-secondary {
+    background: #e5e7eb;
+    border: none;
+    padding: 10px 16px;
+    border-radius: 8px;
+}
+
+/* MODAL BACKGROUND */
+.modal-modern {
+    display: none;
+    position: fixed;
+    z-index: 999;
+    inset: 0;
+    background: rgba(0,0,0,0.4);
+    backdrop-filter: blur(3px);
+    justify-content: center;
+    align-items: center;
+}
+
+/* CARD */
+.modal-card {
+    background: white;
+    width: 420px;
+    border-radius: 14px;
+    padding: 25px;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+    animation: modalFade 0.25s ease;
+}
+
+/* HEADER */
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.modal-header h3 {
+    margin: 0;
+}
+
+/* CLOSE */
+.close-btn {
+    font-size: 22px;
+    cursor: pointer;
+}
+
+/* FORM */
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-group label {
+    display: block;
+    font-size: 13px;
+    margin-bottom: 5px;
+    color: #555;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    border: 1px solid #ddd;
+    padding: 10px;
+    border-radius: 8px;
+    transition: 0.2s;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: #00a8a8;
+    box-shadow: 0 0 0 2px rgba(0,168,168,0.2);
+}
+
+/* FOOTER */
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+/* ANIMATION */
+@keyframes modalFade {
+    from {
+        transform: translateY(-10px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
\ No newline at end of file
diff --git a/resources/views/apps/member/create.blade.php b/resources/views/apps/member/create.blade.php
index 1848d9a..cdfc736 100644
--- a/resources/views/apps/member/create.blade.php
+++ b/resources/views/apps/member/create.blade.php
@@ -1,12 +1,3 @@
-@extends('layouts.applications')
-
-@section('styles')
-    <link rel="stylesheet" href="{{ mix('css/member.css') }}">
-@endsection
-
-
-@section('content')
-    <div class="min-h-screen bg-gray-100 flex items-center justify-center p-6">
         <div class="bg-white shadow-xl rounded-2xl w-full max-w-3xl p-8">
 
             <h1 class="text-2xl font-bold text-gray-800 mb-6">
@@ -66,6 +57,4 @@ class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"
 
             </form>
 
-        </div>
-    </div>
-@endsection
+        </div>
\ No newline at end of file
diff --git a/resources/views/apps/member/index.blade.php b/resources/views/apps/member/index.blade.php
new file mode 100644
index 0000000..6bf38dd
--- /dev/null
+++ b/resources/views/apps/member/index.blade.php
@@ -0,0 +1,264 @@
+@extends('layouts.applications')
+
+@section('styles')
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="{{ asset('css/member/member.css') }}">
+@endsection
+
+
+@section('content')
+
+    <div class="entry-container">
+
+        {{-- <img src="{{ asset('images/parkq-systems.png') }}"  
+            alt="Logo parkq-systems"
+            class="img-fluid logo-img"> --}}
+
+        <div id="form-input">
+            <h2 class="entry-label"> Input No Polisi </h2>
+            <form id="formNopol" method="GET">
+                @csrf
+                <input type="text" id="nopol" name="no_pol" class="nopol-input" placeholder="B1234ABC" autocomplete="off">
+                <button type="submit" class="btn-submit"> Cari </button>
+            </form>
+        </div>
+
+        {{-- FORM MEMBER AKTIF --}}
+        <div id="form-active" class="status-card active-card" style="display:none;">
+            <div class="status-header">
+                <h3 class="entry-label">Member Aktif</h3>
+            </div>
+
+            <div class="member-info">
+
+                <div class="info-row">
+                    <span class="label">Nama</span>
+                    <span id="act-nama" class="value"></span>
+                </div>
+
+                <div class="info-row">
+                    <span class="label">No Polisi</span>
+                    <span id="act-nopol" class="value"></span>
+                </div>
+
+                <div class="info-row">
+                    <span class="label">Periode</span>
+                    <small id="act-periode" class="value"></small>
+                </div>
+
+            </div>
+
+
+            <div class="active-warning">
+                Member masih aktif
+            </div>
+            
+            <p class="text-info">silahkan pilih produk di bawah ini :</p>
+            <div class="select-input">
+                <select id="produkSelect"  class="form-control form-select">
+                    
+                </select>
+            </div>
+
+            <button class="btn-submit">
+                OPEN GATE
+            </button>
+        </div>
+
+        {{-- FORM MEMBER EXPIRED --}}
+        <div id="form-expired" class="status-card expired-card" style="display:none;">
+
+            <div class="status-header">
+                {{-- <span class="status-badge">EXPIRED</span> --}}
+                <h3 class="entry-label">Member Tidak Aktif</h3>
+            </div>
+
+            <div class="member-info">
+
+                <div class="info-row">
+                    <span class="label">Nama</span>
+                    <span id="exp-nama" class="value"></span>
+                </div>
+
+                <div class="info-row">
+                    <span class="label">No Polisi</span>
+                    <span id="exp-nopol" class="value"></span>
+                </div>
+
+                <div class="info-row">
+                    <span class="label">Periode</span>
+                    <small id="exp-periode" class="value"></small>
+                </div>
+
+            </div>
+
+            <div class="status-warning">
+                Masa berlaku member telah berakhir.
+            </div>
+            <hr>
+
+            <div class="select-input">
+                <select id="produkSelect"  class="form-control form-select">
+                    
+                </select>
+            </div>
+                
+
+            <button class="btn-submit btn-renew">
+                PERPANJANG MEMBER
+            </button>
+
+        </div>
+
+        {{-- FORM NON MEMBER --}}
+        <div id="form-nonmember" style="display:none;">
+            <h3 class="entry-label">Bukan Member</h3>
+
+            <button class="btn-submit">
+                BUAT TIKET PARKIR
+            </button>
+        </div>
+    </div>
+@endsection
+
+@section('javascript')
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function(){
+
+            let input = document.getElementById("nopol");
+            let form = document.getElementById("formNopol");
+            const produk = @json($produk);
+
+            /* autofocus */
+            input.focus();
+
+            /* uppercase otomatis */
+            input.addEventListener("input", function(){
+                this.value = this.value.toUpperCase();
+            });
+
+            function submitNopol(){
+
+                let nopol = input.value.trim();
+
+                if(!nopol) return;
+
+                fetch("/api/member/" + encodeURIComponent(nopol))
+                .then(res => res.json())
+                .then(data => {
+
+                    /* sembunyikan semua form */
+                    document.getElementById("form-input").style.display="none";
+                    document.getElementById("form-active").style.display="none";
+                    document.getElementById("form-expired").style.display="none";
+                    document.getElementById("form-nonmember").style.display="none";
+
+                    /* aktif */
+                    if(data.status === "active"){
+
+                        let jenisMobil = data.data.jenis_mobil;
+                        let jLangganan = data.data.unit_kerja;
+
+                        console.log(data);
+                        document.getElementById("form-active").style.display="block";
+                        document.getElementById("act-nama").innerText = data.data.nama;
+                        document.getElementById("act-nopol").innerText = data.data.vehicle + " - " + data.data.nopol;
+                        document.getElementById("act-periode").innerText = formatTanggal(data.data.awal.split(' ')[0]) + " - " + formatTanggal(data.data.akhir.split(' ')[0])
+                            // data.data.awal.split(' ')[0] + " - " + data.data.akhir.split(' ')[0];
+                        renderProduk(jLangganan, jenisMobil);
+                        
+                    }
+
+                    /* expired */
+                    else if(data.status === "expired"){
+
+                        let jenisMobil = data.data.jenis_mobil;
+                        let jLangganan = data.data.unit_kerja;
+
+                        console.log(data);
+                        document.getElementById("form-expired").style.display="block";
+                        document.getElementById("exp-nama").innerText = data.data.nama;
+                        document.getElementById("exp-nopol").innerText = data.data.vehicle + " - " + data.data.nopol;
+                        document.getElementById("exp-periode").innerText = formatTanggal(data.data.awal.split(' ')[0]) + " - " + formatTanggal(data.data.akhir.split(' ')[0])
+                            // data.data.awal.split(' ')[0] + " - " + data.data.akhir.split(' ')[0];
+
+                        // fetch("/memberin/" + encodeURIComponent(jLangganan))
+                        // .then(res => res.json())
+                        // .then(data => {
+                        //     console.log(res);
+                        // });
+                        console.log(produk);
+                        renderProduk(jLangganan, jenisMobil);
+
+                    }
+
+                    /* bukan member */
+                    else{
+
+                        document.getElementById("form-nonmember").style.display="block";
+
+                    }
+
+                });
+
+
+            }
+
+            
+            function renderProduk(stasiunId, jenisMobil){
+
+                console.log(stasiunId);
+                console.log(jenisMobil);
+                let select = document.getElementById("produkSelect");
+
+                select.innerHTML = '<option value="">Pilih Produk</option>';
+
+                let filtered = produk.filter(p =>
+                    p.stasiunkerja_id == stasiunId &&
+                    p.id_mobil == jenisMobil
+                );
+
+                filtered.forEach(p => {
+
+                    let option = document.createElement("option");
+
+                    option.value = p.id_mobil;
+                    option.textContent = p.jenis_langganan + " - Rp " + p.tarif;
+
+                    select.appendChild(option);
+
+                });
+
+            }
+
+            function formatTanggal(tgl){
+
+                let parts = tgl.split('-');
+
+                return parts[2] + '-' + parts[1] + '-' + parts[0];
+
+            }
+            // input.addEventListener("keydown", function(e){
+
+            //     if(e.key === "Enter"){
+
+            //         e.preventDefault();
+            //         submitNopol();
+
+            //     }
+
+            // });
+
+            /* tombol submit */
+            form.addEventListener("submit", function(e){
+
+                e.preventDefault();
+                submitNopol();
+
+            });
+
+        });
+    </script>
+@endsection
\ No newline at end of file
diff --git a/resources/views/layouts/applications.blade.php b/resources/views/layouts/applications.blade.php
index 641229a..50d582b 100644
--- a/resources/views/layouts/applications.blade.php
+++ b/resources/views/layouts/applications.blade.php
@@ -1,9 +1,17 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <link rel="stylesheet" href="{{ mix('css/member.css') }}">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        @yield('styles')
     </head>
     <body>
+        <div class="brand-logo">
+            <img src="{{ asset('images/parkq-systems.png') }}" alt="ParkQ Systems">
+            {{-- <span class="brand-text">Park<span class="brand-q">Q</span> Systems</span> --}}
+        </div>
         @yield('content')
+
+        @yield('javascript')
     </body>
 </html>
diff --git a/routes/api.php b/routes/api.php
index 26e2ebd..fa199c4 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -4,6 +4,7 @@
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\Api\V1\ConfigParameter;
 use App\Http\Controllers\Api\V1\LaporanController;
+use App\Http\Controllers\Api\V1\MemberinController;
 use App\Http\Controllers\Api\V1\TransaksiMember;
 use App\Http\Controllers\Api\V1\TransaksiParkir;
 
@@ -30,6 +31,8 @@
     Route::resource('parkir', TransaksiParkir::class);        
 });
 
+Route::resource('member', MemberinController::class)->names('memberin');
+
 Route::prefix('report')->group(function () {
     Route::post('harian', [LaporanController::class, 'harian']);
     Route::post('payment', [LaporanController::class, 'payment']);
diff --git a/routes/web.php b/routes/web.php
index 48b8707..da549e0 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -40,7 +40,7 @@
 Route::resource('/apps', ModifiedTransaksi::class);
 Route::post('/scan', [ModifiedTransaksi::class, 'scan'])->name('apps.scan');
 
-Route::resource('memberin', SelfMemberinController::class);
+Route::resource('memberin', SelfMemberinController::class)->names('self-memberin');
 
 
 Auth::routes();