diff --git a/app/Http/Controllers/Master/InstansiController.php b/app/Http/Controllers/Master/InstansiController.php
index 76b65f3..864328b 100644
--- a/app/Http/Controllers/Master/InstansiController.php
+++ b/app/Http/Controllers/Master/InstansiController.php
@@ -11,6 +11,7 @@ use Illuminate\Support\Facades\File;
 use Carbon\Carbon;
 use App\Models\Master\Instansi;
 use App\Models\Master\Template;
+use App\Models\Master\TabelData;
 use App\Models\Master\Group;
 use Illuminate\Http\Request;
 
@@ -52,10 +53,9 @@ class InstansiController extends Controller
 
             if((permission('is_create', $this->route.'.*','module',false)) || (permission('is_update', $this->route.'.*','module',false))){
                 $action .= '<div class="flex gap-3 justify-center items-center flex-row">';
-                $action .= '<a href="'.url('master/instansi/update/'.encode_id($row->MsInstansiId)).'" data-toggle="tooltip" title="Edit Data" class="btn btn-sm btn-block bg-primary"><i class="ri-pencil-line text-white"></i></a>';
+                $action .= '<a href="'.url('master/instansi/update/'.encode_id($row->MsInstansiId)).'" data-toggle="tooltip" title="Edit Data" class="p-2 text-white rounded bg-blue-500">Edit</a>';
                 if((session('group_id') == 1) || (session('group_alias') == 'admin')){
-                    // $action .= '<a href="#" data-href="'.url('management/user/forcelogin/'.encode_id($row->id)).'" data-toggle="tooltip" title="Force Login" class="forcelogin btn btn-sm btn-block bg-success"><i class="ri-user-2-line text-white"></i></a>';
-                    $action .= '<a href="#" data-href="'.url('master/instansi/delete/'.encode_id($row->MsInstansiId)).'" data-toggle="tooltip" title="Hapus Data" class="remove_data btn btn-sm btn-block bg-danger"><i class="ri-delete-bin-line text-white"></i></a>';
+                    $action .= '<a href="#" data-href="'.url('master/instansi/delete/'.encode_id($row->MsInstansiId)).'" data-toggle="tooltip" title="Hapus Data" class="remove_data p-2 text-white rounded bg-red-500">Hapus</a>';
                 }
                 $action .= '</div>';
             }
@@ -231,7 +231,7 @@ class InstansiController extends Controller
         $data['keyId'] = $id;
         $data['item'] = Instansi::where('MsInstansiId',$keyId)->first();
         $data['group'] = Group::where('MsGroupId','!=',1)->get();
-        $data['template'] = Template::all();
+        $data['template'] = TabelData::all();
         return view($this->template.'.form',$data);
     }
 
diff --git a/app/Http/Controllers/Master/TopikController.php b/app/Http/Controllers/Master/TopikController.php
index ab8033e..d1697dd 100644
--- a/app/Http/Controllers/Master/TopikController.php
+++ b/app/Http/Controllers/Master/TopikController.php
@@ -47,7 +47,7 @@ class TopikController extends Controller
 
             if((permission('is_create', $this->route.'.*','module',false)) || (permission('is_update', $this->route.'.*','module',false))){
                 $action .= '<div class="flex gap-3 justify-center items-center flex-row">';
-                $action .= '<a href="'.url('master/topik/update/'.encode_id($row->MsTopikId)).'" data-toggle="tooltip" title="Edit Data" class="btn btn-sm btn-block bg-primary"><i class="ri-pencil-line text-white"></i></a>';
+                $action .= '<a href="'.url('master/topik/update/'.encode_id($row->MsTopikId)).'" data-toggle="tooltip" title="Edit Data" class="p-2 bg-blue-500 text-white rounded">Edit</a>';
                 $action .= '</div>';
             }
             
diff --git a/resources/views/modules/master/instansi/form.blade.php b/resources/views/modules/master/instansi/form.blade.php
index 1c2fc5b..e4943e6 100644
--- a/resources/views/modules/master/instansi/form.blade.php
+++ b/resources/views/modules/master/instansi/form.blade.php
@@ -1,27 +1,22 @@
 @extends('layouts.master')
 @section('content')
-<div class="flex flex-col gap-6">
-    <div class="card">
-        <div class="card-header">
-            <div class="flex justify-between items-center">
-                <h4 class="card-title">{{$title}}</h4>
-            </div>
-        </div>
+<div class="flex-1 overflow-y-auto p-8 custom-scrollbar">
+    <div class="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
         <form action="{{route($route.'.store')}}" method="POST" class="" enctype="multipart/form-data">
             {{csrf_field()}}
             <input type="hidden" name="secure_id" value="{{@$keyId}}">
             <div class="p-6">
-                <div class="grid lg:grid-cols-2 gap-3">
-                    <div class="mb-3">
-                        <label class="mb-3">Nama Instansi</label>
-                        <input type="text" value="{{@$item->name ? @$item->name :  old('name')}}" name="name" class="form-input @error('name') is-invalid @enderror" placeholder="Masukan Nama Instansi" required>
+                <div class="flex flex-col p-3 gap-3">
+                    <div class="flex gap-4">
+                        <label class="mb-3 w-1/2 font-semibold required">Nama Instansi</label>
+                        <input type="text" value="{{@$item->name ? @$item->name :  old('name')}}" name="name" class="p-2 w-full border @error('name') is-invalid @enderror" placeholder="Masukan Nama Instansi" required>
                         @error('name')
                         <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                         @enderror
                     </div>
-                    <div class="mb-3">
-                        <label class="mb-3">Jenis Instansi</label>
-                        <select name="parent" class="form-input select2 @error('parent') is-invalid @enderror" required>
+                    <div class="flex gap-4">
+                        <label class="mb-3 w-1/2 font-semibold required">Jenis Instansi</label>
+                        <select name="parent" class="p-2 w-full border select2 @error('parent') is-invalid @enderror" required>
                             <option value="">-Pilih Jenis Instansi-</option>
                             @foreach($group as $dataGroup)
                                 <option {{@$dataGroup->alias == @$item->parent ? 'selected' : ''}} value="{{ @$dataGroup->alias }}">{{ @$dataGroup->name }}</option>
@@ -31,71 +26,73 @@
                         <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                         @enderror
                     </div>
-                    <div class="mb-3">
-                        <label class="mb-3">Telp</label>
-                        <input type="text" value="{{@$item->telp ? @$item->telp :  old('telp')}}" name="telp" class="form-input @error('telp') is-invalid @enderror" placeholder="Masukan Telp Instansi">
+                    <div class="flex gap-4">
+                        <label class="mb-3 w-1/2 font-semibold required">Telp</label>
+                        <input type="text" value="{{@$item->telp ? @$item->telp :  old('telp')}}" name="telp" class="p-2 w-full border @error('telp') is-invalid @enderror" placeholder="Masukan Telp Instansi">
                         @error('telp')
                         <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                         @enderror
                     </div>
-                    <div class="mb-3">
-                        <label class="mb-3">Website</label>
-                        <input type="text" value="{{@$item->website ? @$item->website :  old('website')}}" name="website" class="form-input @error('website') is-invalid @enderror" placeholder="Masukan Website">
+                    <div class="flex gap-4">
+                        <label class="mb-3 w-1/2 font-semibold required">Website</label>
+                        <input type="text" value="{{@$item->website ? @$item->website :  old('website')}}" name="website" class="p-2 w-full border @error('website') is-invalid @enderror" placeholder="Masukan Website">
                         @error('website')
                         <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                         @enderror
                     </div>
+                    @php
+                        // Ambil data yang sudah dipilih (bisa dari old input atau dari model saat edit)
+                        $selectedResources = @$item->resource_data ? json_decode(@$item->resource_data) : [];
+                        // dd($selectedResources);
+                    @endphp
+                    <div class="flex gap-4">
+                            <label class="mb-3 w-1/2 font-semibold required">Logo</label>
+                            <input accept=".png,.jpg,.jpeg" type="file" value="{{@$item->logo ? @$item->logo :  old('logo')}}" name="logo" class="p-2 w-full border @error('logo') is-invalid @enderror" placeholder="Masukan logo">
+                            @if(@$item->logo)
+                            <div class="border w-1/4 mt-3">
+                                <img src="{{ asset('uploads/'.@$item->logo) }}" alt="" width="150" class="mx-auto">
+                            </div>
+                            @endif
+                            @error('logo')
+                            <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
+                            @enderror
+                        </div>
+                    <div class="flex gap-4">
+                        <label class="mb-3 w-1/2 font-semibold required">Resource Data</label>
+                        <select name="resource_data[]" required class="p-2 w-full border resource_data select2 @error('resource_data') is-invalid @enderror" id="" multiple>
+                            <option value="">-</option>
+                            @foreach($template as $dataTemplate)
+                                <?php
+                                    $filename = pathinfo($dataTemplate->template_url, PATHINFO_FILENAME); 
+                                ?>
+                                <option {{ in_array($dataTemplate->MsTabelDataId, $selectedResources) ? 'selected' : '' }} value="{{$dataTemplate->MsTabelDataId}}">Tabel {{$dataTemplate->nomor_tabel}} - {{$dataTemplate->name}}</option>
+                            @endforeach
+                        </select>
+                        @error('resource_data')
+                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
+                        @enderror
+                    </div>
+                    <div class="flex gap-4">
+                        <label class="mb-3 w-1/2 font-semibold required">Alamat</label>
+                        <textarea name="alamat" class="p-2 w-full border @error('alamat') is-invalid @enderror" id="">{{@$item->alamat}}</textarea>
+                        @error('alamat')
+                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
+                        @enderror
+                    </div>
                     
                 </div>
-                @php
-                    // Ambil data yang sudah dipilih (bisa dari old input atau dari model saat edit)
-                    $selectedResources = @$item->resource_data ? json_decode(@$item->resource_data) : [];
-                    // dd($selectedResources);
-                @endphp
-                <div class="mb-3">
-                        <label class="mb-3">Logo</label>
-                        <input accept=".png,.jpg,.jpeg" type="file" value="{{@$item->logo ? @$item->logo :  old('logo')}}" name="logo" class="form-input @error('logo') is-invalid @enderror" placeholder="Masukan logo">
-                        @if(@$item->logo)
-                        <div class="border w-1/4 mt-3">
-                            <img src="{{ asset('uploads/'.@$item->logo) }}" alt="" width="150" class="mx-auto">
-                        </div>
-                        @endif
-                        @error('logo')
-                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
-                        @enderror
-                    </div>
-                <div class="mb-3">
-                    <label class="mb-3 required">Resource Data</label>
-                    <select name="resource_data[]" required class="form-input resource_data select2 @error('resource_data') is-invalid @enderror" id="" multiple>
-                        <option value="">-</option>
-                        @foreach($template as $dataTemplate)
-                            <?php
-                                $filename = pathinfo($dataTemplate->template_url, PATHINFO_FILENAME); 
-                            ?>
-                            <option {{ in_array($dataTemplate->MsTemplateId, $selectedResources) ? 'selected' : '' }} value="{{$dataTemplate->MsTemplateId}}">{{$filename}} - {{$dataTemplate->name}}</option>
-                        @endforeach
-                    </select>
-                    @error('resource_data')
-                    <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
-                    @enderror
-                </div>
-                <div class="mb-3">
-                        <label class="mb-3">Alamat</label>
-                        <textarea name="alamat" class="form-input @error('alamat') is-invalid @enderror" id="">{{@$item->alamat}}</textarea>
-                        @error('alamat')
-                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
-                        @enderror
-                    </div>
+                
             </div>
-            <div class="p-6">
-                <a href="{{route($route.'.index')}}" class="btn bg-danger text-white"><i class="ri-close-line"></i>&nbsp;Batal</a>
-                <button type="submit" class="btn bg-success text-white"><i class="ri-save-line"></i> Simpan</button>
+            <div class="flex justify-center items-center gap-2">
+                <a href="{{route($route.'.index')}}" class="bg-red-500 rounded py-2 px-3 text-white flex items-center"><i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i><span>Batal</span></a>
+                <button type="submit" class="bg-emerald-500 rounded py-2 px-3 text-white flex items-center"><i data-lucide="save" class="w-4 h-4 mr-2"></i><span> <span>Simpan</span></button>
             </div>
         </form>
     </div>
 </div>
+
 @endsection
-@section('page-js')
+@section('js')
 	<script type="text/javascript">
      $(document).ready(function() {
             $('.numberInput').on('input', function() {
diff --git a/resources/views/modules/master/instansi/index.blade.php b/resources/views/modules/master/instansi/index.blade.php
index 9404071..56e8b3c 100644
--- a/resources/views/modules/master/instansi/index.blade.php
+++ b/resources/views/modules/master/instansi/index.blade.php
@@ -3,18 +3,17 @@
 @section('css')
 @endsection
 @section('content')
-<div class="flex flex-col gap-6">
-    <div class="card">
-        <div class="card-header">
-            <div class="flex justify-between items-center">
-                <h4 class="card-title">Data {{$title}}</h4>
-            </div>
-        </div>
-        <div class="p-6">
+<div class="flex-1 overflow-y-auto p-8 custom-scrollbar">
+    <div class="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
+        <div class="overflow-x-auto">
             <div id="toolbar">
-                <a href="{{route($route.'.update')}}" class="btn bg-success text-white"><i class="ri-add-line"></i>&nbsp;Tambah Data</a>
+                @if(permission('is_create', $route.'.*','module',false) || permission('is_update', $route.'.*','module',false))
+                    <a href="{{route($route.'.update')}}" class="p-2 border border-slate-200 rounded-xl hover:bg-slate-50 transition-colors flex items-center text-sm font-semibold text-slate-600">
+                        <i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span>Tambah Data</span>
+                    </a>
+                @endif
             </div>
-            <table class="gridjs-table" 
+            <table class="w-full text-left border-collapse" 
                     data-search="true"
                     data-toggle="table"
                     data-pagination="true"
@@ -26,22 +25,20 @@
                     data-page-size="10"
                     data-id-field="id"
                     id="grid-data">
-                  <thead class="gridjs-thead">
-                    <tr class="gridjs-tr bg-primary-light">
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500" data-width="10" data-field="action">#</th>
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500" data-width="10" data-field="no">No</th>
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500 text-center" data-field="logo">Logo</th>
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500" data-field="name">Name</th>
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500" data-field="parent">Jenis Instansi</th>
-                      {{-- <th class="gridjs-td gridjs-th text-sm text-gray-500" data-field="resource">Resource Data</th> --}}
+                  <thead class="bg-slate-50/50 border-b border-slate-100">
+                    <tr>
+                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-width="10" data-field="action">#</th>
+                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-width="10" data-field="no">No</th>
+                      {{-- <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-center" data-field="logo">Logo</th> --}}
+                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-field="name">Name</th>
+                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-field="parent">Jenis Instansi</th>
                     </tr>
                   </thead>
-                  <tbody class="gridjs-tbody"></tbody>
+                  <tbody class=""></tbody>
               </table>
         </div>
     </div>
 </div>
-
 @endsection
 @section('js')
 <script type="text/javascript">
diff --git a/resources/views/modules/master/topik/form.blade.php b/resources/views/modules/master/topik/form.blade.php
index 4cf7f8a..bb066a9 100644
--- a/resources/views/modules/master/topik/form.blade.php
+++ b/resources/views/modules/master/topik/form.blade.php
@@ -1,35 +1,28 @@
 @extends('layouts.master')
 @section('content')
-<div class="flex flex-col gap-6">
-    <div class="card">
-        <div class="card-header">
-            <div class="flex justify-between items-center">
-                <h4 class="card-title">{{$title}}</h4>
-            </div>
-        </div>
+<div class="flex-1 overflow-y-auto p-8 custom-scrollbar">
+    <div class="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
         <form action="{{route($route.'.store')}}" method="POST" class="">
             {{csrf_field()}}
             <input type="hidden" name="secure_id" value="{{@$keyId}}">
-            <div class="p-6">
-                <div class="grid lg:grid-cols-2 gap-3">
-                    <div class="mb-3">
-                        <label class="mb-3">Nama Topik</label>
-                        <input type="text" value="{{@$item->name ? @$item->name :  old('name')}}" name="name" class="form-input @error('name') is-invalid @enderror" placeholder="Masukan Nama" required>
-                        @error('name')
-                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
-                        @enderror
-                    </div>
+            <div class="flex flex-col p-3 gap-3">
+                <div class="flex gap-4">
+                    <label class="mb-3 w-1/2 font-semibold required">Nama Topik</label>
+                    <input type="text" value="{{@$item->name ? @$item->name :  old('name')}}" name="name" class="p-2 border rounded w-full @error('name') is-invalid @enderror" placeholder="Masukan Nama" required>
+                    @error('name')
+                    <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
+                    @enderror
                 </div>
             </div>
-            <div class="p-6">
-                <a href="{{route($route.'.index')}}" class="btn bg-danger text-white"><i class="ri-close-line"></i>&nbsp;Batal</a>
-                <button type="submit" class="btn bg-success text-white"><i class="ri-save-line"></i> Simpan</button>
+            <div class="flex justify-center items-center gap-2">
+                <a href="{{route($route.'.index')}}" class="bg-red-500 rounded py-2 px-3 text-white flex items-center"><i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i><span>Batal</span></a>
+                <button type="submit" class="bg-emerald-500 rounded py-2 px-3 text-white flex items-center"><i data-lucide="save" class="w-4 h-4 mr-2"></i><span> <span>Simpan</span></button>
             </div>
         </form>
     </div>
 </div>
 @endsection
-@section('page-js')
+@section('js')
 	<script type="text/javascript">
      $(document).ready(function() {
             $('.numberInput').on('input', function() {