diff --git a/app/Http/Controllers/Master/TabelDataController.php b/app/Http/Controllers/Master/TabelDataController.php
index 36e9334..4b662cf 100644
--- a/app/Http/Controllers/Master/TabelDataController.php
+++ b/app/Http/Controllers/Master/TabelDataController.php
@@ -46,10 +46,10 @@ class TabelDataController 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/tabel-data/update/'.encode_id($row->MsTabelDataId)).'" 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/tabel-data/kolom/'.encode_id($row->MsTabelDataId)).'" data-toggle="tooltip" title="View Data" class="btn btn-sm btn-block text-white bg-success"><i class="ri-eye-line text-white"></i></a>';
+                $action .= '<a href="'.url('master/tabel-data/update/'.encode_id($row->MsTabelDataId)).'" data-toggle="tooltip" title="Edit Data" class="p-2 rounded bg-blue-500 text-white">Edit</a>';
+                $action .= '<a href="'.url('master/tabel-data/kolom/'.encode_id($row->MsTabelDataId)).'" data-toggle="tooltip" title="View Data" class="p-2 rounded text-white bg-emerald-500">Detail</a>';
                 if((session('group_id') == 1) || (session('group_alias') == 'admin')){
-                    // $action .= '<a href="#" data-href="'.url('master/table-data/delete/'.encode_id($row->MsTabelDataId)).'" 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/table-data/delete/'.encode_id($row->MsTabelDataId)).'" data-toggle="tooltip" title="Hapus Data" class="remove_data p-2 rounded bg-danger"><i class="ri-delete-bin-line text-white"></i></a>';
                 }
                 $action .= '</div>';
             }
diff --git a/resources/views/modules/master/tabel-data/form.blade.php b/resources/views/modules/master/tabel-data/form.blade.php
index 3d774c7..17af705 100644
--- a/resources/views/modules/master/tabel-data/form.blade.php
+++ b/resources/views/modules/master/tabel-data/form.blade.php
@@ -1,37 +1,29 @@
 @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 Tabel</label>
-                        <input type="text" value="{{@$item->name ? @$item->name :  old('name')}}" name="name" class="form-input @error('name') is-invalid @enderror" placeholder="Masukan Nama Tabel" 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">Key</label>
-                        <input type="text" value="{{@$item->key ? @$item->key :  old('key')}}" name="key" class="form-input @error('key') is-invalid @enderror" placeholder="Masukan Key Tabel">
-                        @error('key')
-                        <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 Tabel</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 Tabel" required>
+                    @error('name')
+                    <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">Key</label>
+                    <input type="text" value="{{@$item->key ? @$item->key :  old('key')}}" name="key" class="p-2 border rounded w-full @error('key') is-invalid @enderror" placeholder="Masukan Key Tabel">
+                    @error('key')
+                    <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>
diff --git a/resources/views/modules/master/tabel-data/index.blade.php b/resources/views/modules/master/tabel-data/index.blade.php
index 274dca5..0d5be7d 100644
--- a/resources/views/modules/master/tabel-data/index.blade.php
+++ b/resources/views/modules/master/tabel-data/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 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 class="mb-4" id="toolbar">
+                @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>
-        </div>
-        <div class="p-6">
-            <div id="toolbar">
-                <a href="{{route($route.'.update')}}" class="btn bg-success text-white"><i class="ri-add-line"></i>&nbsp;Tambah Data</a>
-            </div>
-            <table class="gridjs-table" 
+            <table class="w-full text-left border-collapse" 
                     data-search="true"
                     data-toggle="table"
                     data-pagination="true"
@@ -26,14 +25,14 @@
                     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" data-field="tahun">Tahun</th>
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500 text-center" data-field="name">Name</th>
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500" data-field="nomor_tabel">Nomor Tabel</th>
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500 text-center" data-field="jml_kolom">Jumlah Kolom</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" data-field="tahun">Tahun</th>
+                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-center" data-field="name">Name</th>
+                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-field="nomor_tabel">Nomor Tabel</th>
+                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-center" data-field="jml_kolom">Jumlah Kolom</th>
                     </tr>
                   </thead>
                   <tbody class="gridjs-tbody"></tbody>
@@ -41,7 +40,6 @@
         </div>
     </div>
 </div>
-
 @endsection
 @section('js')
 <script type="text/javascript">
diff --git a/resources/views/modules/master/tabel-data/kolom/form.blade.php b/resources/views/modules/master/tabel-data/kolom/form.blade.php
index 841e0bd..27107a1 100644
--- a/resources/views/modules/master/tabel-data/kolom/form.blade.php
+++ b/resources/views/modules/master/tabel-data/kolom/form.blade.php
@@ -1,49 +1,43 @@
 @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}}">
             <input type="hidden" name="tabelId" value="{{@$tabelId}}">
-            <div class="p-6">
-                <div class="grid lg:grid-cols-2 gap-3">
-                    <div class="mb-3">
-                        <label class="mb-3">Nama Kolom</label>
-                        <input type="text" value="{{@$item->name ? @$item->name :  old('name')}}" name="name" class="form-input @error('name') is-invalid @enderror" placeholder="Masukan Nama Kolom" 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">Key</label>
-                        <input type="text" value="{{@$item->key ? @$item->key :  old('key')}}" name="key" class="form-input @error('key') is-invalid @enderror" placeholder="Masukan Key Tabel">
-                        @error('key')
-                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
-                        @enderror
-                    </div>
-                    <div class="mb-3">
-                        <label class="mb-3">Order</label>
-                        <input type="text" value="{{@$item->order ? @$item->order :  old('order')}}" name="order" class="form-input @error('order') is-invalid @enderror" placeholder="Masukan Order Kolom">
-                        @error('order')
-                        <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 Kolom</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 Kolom" required>
+                    @error('name')
+                    <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">Key</label>
+                    <input type="text" value="{{@$item->key ? @$item->key :  old('key')}}" name="key" class="p-2 border rounded w-full @error('key') is-invalid @enderror" placeholder="Masukan Key Tabel">
+                    @error('key')
+                    <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">Order</label>
+                    <input type="text" value="{{@$item->order ? @$item->order :  old('order')}}" name="order" class="p-2 border rounded w-full @error('order') is-invalid @enderror" placeholder="Masukan Order Kolom">
+                    @error('order')
+                    <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
+                    @enderror
                 </div>
-                
             </div>
-            <div class="p-6">
-                <a href="{{url('master/tabel-data/kolom/'.@$tabelId.'/')}}" 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="{{url('master/tabel-data/kolom/'.@$tabelId.'/')}}" 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')
 	<script type="text/javascript">
diff --git a/resources/views/modules/master/tabel-data/kolom/index.blade.php b/resources/views/modules/master/tabel-data/kolom/index.blade.php
index c8f45ae..70b71e3 100644
--- a/resources/views/modules/master/tabel-data/kolom/index.blade.php
+++ b/resources/views/modules/master/tabel-data/kolom/index.blade.php
@@ -3,19 +3,14 @@
 @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 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" class="flex gap-2">
+                <a href="{{url('master/tabel-data/')}}" class="p-2 rounded bg-blue-500 text-white flex items-center"><i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i><span>Lihat Daftar Tabel</a>
+                <a href="{{url('master/tabel-data/kolom/'.@$keyId.'/update')}}" class="p-2 rounded bg-emerald-500 text-white flex items-center"><i data-lucide="plus" class="w-4 h-4 mr-2"></i><span>Tambah Data</span></a>
             </div>
-        </div>
-        <div class="p-6">
-            <div id="toolbar">
-                <a href="{{url('master/tabel-data/')}}" class="btn bg-primary text-white"><i class="ri-arrow-left-line"></i>&nbsp;Lihat Daftar Tabel</a>
-                <a href="{{url('master/tabel-data/kolom/'.@$keyId.'/update')}}" class="btn bg-success text-white"><i class="ri-add-line"></i>&nbsp;Tambah Data</a>
-            </div>
-            <table class="gridjs-table" 
+            <table class="w-full text-left border-collapse" 
                     data-search="true"
                     data-toggle="table"
                     data-pagination="true"
@@ -27,21 +22,35 @@
                     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" data-field="name">Name</th>
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500 text-center" data-field="order">Order</th>
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500 text-center" data-field="key">Key</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" data-field="name">Name</th>
+                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-center" data-field="order">Order</th>
+                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-center" data-field="key">Key</th>
                     </tr>
                   </thead>
-                  <tbody class="gridjs-tbody"></tbody>
+                  <tbody></tbody>
               </table>
         </div>
     </div>
 </div>
 
+<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>
+    </div>
+</div>
+
 @endsection
 @section('js')
 <script type="text/javascript">