diff --git a/public/assets/css/custom.css b/public/assets/css/custom.css
index b602d1a..76f0c24 100644
--- a/public/assets/css/custom.css
+++ b/public/assets/css/custom.css
@@ -2,20 +2,82 @@
     content: " *";
     color: red;
 }
+.menu-item > .menu-link.active > .menu-text{
+  color: #4796F1!important;
+  font-weight: 700!important;
+}
+.menu-item > .menu-link.active > .menu-icon{
+  color: #4796F1!important;
+}
+.menu .menu-item .menu-link:is(:hover, :focus){
+  color: #4796F1!important;
+}
+.gridjs-tr > th{
+ color :#4796F1!important;
+ border-width:1px;
+ border-color: rgba(71, 150, 241, 0.05)!important;
+}
+
+.gridjs-td{
+ border-width:1px;
+ border-color: #F3F4F6!important;
+}
+.bg-danger{
+  background-color: #cc3437!important;
+}
+.bg-danger-light{
+  background-color: rgba(184, 20, 23, 0.1)!important;
+}
+.border-top-danger{
+  border-top: 5px solid #cc3437!important;
+}
+.bg-white{
+  background: #fff!important;
+}
 .bg-primary{
-  background-color: #4d77da!important;
+  background-color: #4796F1!important;
+}
+.text-primary{
+  color :#4796F1!important;
+}
+.bg-primary-light{
+  background: rgba(71, 150, 241, 0.05)!important;
 }
 .bg-warning{
-  background-color: #e8bf44!important;
+  background-color: #E2B100!important;
+}
+.border-top-warning{
+  border-top: 5px solid #E2B100!important;
+}
+.bg-warning-light{
+  background-color: rgba(226, 177, 0, 0.1)!important;
 }
 .bg-success{
-  background-color: #2dad62!important;
+  background-color: #14B8A6!important;
+}
+.bg-success-light{
+  background-color: rgba(204, 251, 241, 1);
 }
 .bg-info{
-  background-color: #483AA0!important;
+  background-color: #7260e2!important;
+}
+.border-top-info{
+  border-top: 5px solid #7260e2!important;
 }
 .bg-info-light{
+  background-color: #b5acee!important;
+}
+.text-info{
+  color: #7260e2!important;
+}
+.text-warning{
+  color: #E2B100!important;
+}
+/* .bg-info-light{
   background-color: #7965C1!important;
+} */
+.border-top-success{
+  border-top: 5px solid #14B8A6!important;
 }
 @font-face {
     font-family: 'Poppins';
@@ -45,7 +107,7 @@ body,h1,h2,h3,h4,h5,h6,p {
   --bs-indigo: #6610f2;
   --bs-purple: #6f42c1;
   --bs-pink: #d63384;
-  --bs-red: #dc3545;
+  --bs-red: #cc3437;
   --bs-orange: #fd7e14;
   --bs-yellow: #ffc107;
   --bs-green: #198754;
@@ -69,7 +131,7 @@ body,h1,h2,h3,h4,h5,h6,p {
   --bs-success: #198754;
   --bs-info: #0dcaf0;
   --bs-warning: #ffc107;
-  --bs-danger: #dc3545;
+  --bs-danger: #cc3437;
   --bs-light: #f8f9fa;
   --bs-dark: #212529;
   --bs-primary-rgb: 13, 110, 253;
@@ -163,8 +225,8 @@ body,h1,h2,h3,h4,h5,h6,p {
   --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
   --bs-form-valid-color: #198754;
   --bs-form-valid-border-color: #198754;
-  --bs-form-invalid-color: #dc3545;
-  --bs-form-invalid-border-color: #dc3545;
+  --bs-form-invalid-color: #cc3437;
+  --bs-form-invalid-border-color: #cc3437;
 }
 [data-bs-theme="dark"] {
   color-scheme: dark;
diff --git a/resources/views/include/header.blade.php b/resources/views/include/header.blade.php
index 38eefbd..28c9b7a 100644
--- a/resources/views/include/header.blade.php
+++ b/resources/views/include/header.blade.php
@@ -22,17 +22,13 @@
     
     <!-- Profile Dropdown Button -->
     <div class="relative">
-        <button data-fc-type="dropdown" data-fc-placement="bottom-end" type="button" class="nav-link flex items-center gap-2.5 px-3 bg-black/5 border-x border-black/10">
+        <button data-fc-type="dropdown" data-fc-placement="bottom-end" type="button" class="nav-link flex items-center gap-2.5 px-3 ">
             <img src="{{asset('assets/images/users/avatar-1.jpg')}}" alt="user-image" class="rounded-full h-8">
-            <span class="md:flex flex-col gap-0.5 text-start hidden">
-                <h5 class="text-sm">{{session('name')}}</h5>
-                <span class="text-xs">{{session('username')}}</span>
-            </span>
         </button>
 
         <div class="fc-dropdown fc-dropdown-open:opacity-100 hidden opacity-0 w-44 z-50 transition-all duration-300 bg-white shadow-lg border rounded-lg py-2 border-gray-200 dark:border-gray-700 dark:bg-gray-800">
             <!-- item-->
-            <h6 class="flex items-center py-2 px-3 text-xs text-gray-800 dark:text-gray-400">Welcome !</h6>
+            <h6 class="flex items-center py-2 px-3 text-xs text-gray-800 dark:text-gray-400">Hello ! &nbsp;{{session('name')}}</h6>
 
             <!-- item-->
             <a href="{{url('logout')}}" class="flex items-center gap-2 py-1.5 px-4 text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300">
diff --git a/resources/views/include/sidebar.blade.php b/resources/views/include/sidebar.blade.php
index e552721..9a51c9d 100644
--- a/resources/views/include/sidebar.blade.php
+++ b/resources/views/include/sidebar.blade.php
@@ -1,15 +1,15 @@
 <!-- Sidenav Menu -->
-<div class="app-menu">
+<div class="app-menu bg-white">
 
     <!-- App Logo -->
-    <a href="{{url('/')}}">
+    <a href="{{url('/')}}" class="">
         <div class="flex gap-3 p-4 items-center">
             <div>
                 <img src="{{asset('assets/logo-dlh.png')}}" class="" alt="Light logo" width="35">
             </div>
             <div class="flex text-menu flex-col gap-1">
-                <h6 class="text-white text-lg bold">DIKPLHD</h6>
-                <h6 class="text-white text-xs">Dinas Lingkungan Hidup</h6>
+                <h6 class="text-lg bold">DIKPLHD</h6>
+                <h6 class="text-xs">Dinas Lingkungan Hidup</h6>
             </div>
         </div>
     </a>
@@ -22,7 +22,7 @@
 
     <!--- Menu -->
     <div class="scrollbar" data-simplebar>
-        <ul class="menu" data-fc-type="accordion">
+        <ul class="menu border-t" data-fc-type="accordion">
             <li class="menu-title">Navigation</li>
 
             <li class="menu-item">
diff --git a/resources/views/modules/dashboard/dashboard.blade.php b/resources/views/modules/dashboard/dashboard.blade.php
index cb5cb4c..dfad266 100644
--- a/resources/views/modules/dashboard/dashboard.blade.php
+++ b/resources/views/modules/dashboard/dashboard.blade.php
@@ -9,24 +9,46 @@
 
 <div class="grid xl:grid-cols-4 lg:grid-cols-2 grid-cols-1 gap-6 mb-6">
     @foreach($group as $dataGroup)
-    <div class="card">
+    <?php
+        $bg = '';
+
+        if($dataGroup->alias == 'dinas'){
+            $bg = 'success';
+        }elseif($dataGroup->alias == 'biro'){
+            $bg = 'warning';
+        }elseif($dataGroup->alias == 'badan'){
+            $bg = 'danger';
+        }elseif($dataGroup->alias == 'deputi'){
+            $bg = 'info';
+        }
+
+    ?>
+    <div class="card border-top-{{$bg}}">
         <div class="p-6">
             <div class="flex flex-col items-center">
                 <div class="w-full">
-                    <div class="flex justify-between">
-                        <div><h5 class="uppercase text-sm font-bold mt-0 truncate">Data {{$dataGroup->name}}</h5></div>
+                    {{-- <div class="flex justify-between">
                         <div class="p-1 bg-primary text-white rounded text-xs">{{date('Y')}}</div>
+                    </div> --}}
+                    <div class="flex items-center justify-between">
+                        <div class="px-4 py-3 rounded-full bg-{{$bg}}-light">
+                            <i class="ri-database-2-line text-lg text-{{$bg}}"></i>
+                        </div>
+                        <div>
+                            <?php
+                            $count = $classDataset::where('tahun',date('Y'))->whereHas('instansi',function($query) use ($dataGroup){
+                                $query->where('parent','ilike','%'.$dataGroup->alias.'%');
+                            })->count();
+                            ?>
+                            <h2 class="text-3xl bold my-3 py-0.5">{{$count}}</h2> 
+                        </div>
                     </div>
-                    <?php
-                    $count = $classDataset::where('tahun',date('Y'))->whereHas('instansi',function($query) use ($dataGroup){
-                        $query->where('parent','ilike','%'.$dataGroup->alias.'%');
-                    })->count();
-                    ?>
-                    <h2 class="text-3xl bold my-3 py-0.5">{{$count}}</h2> 
+                    
                 </div>
                 <div class="w-full">
                     <div class="">
-                        <a href="{{url('dashboard/dataset/'.$dataGroup->alias)}}" class="text-primary">Lihat Selengkapnya&nbsp;<i class="ri-arrow-right-line"></i></a>
+                        <div><h5 class="uppercase text-sm font-bold mt-0 truncate">Data {{$dataGroup->name}}</h5></div>
+                        {{-- <a href="{{url('dashboard/dataset/'.$dataGroup->alias)}}" class="text-primary">Lihat Selengkapnya&nbsp;<i class="ri-arrow-right-line"></i></a> --}}
                     </div>
                 </div>
             </div> <!-- end row-->
@@ -56,14 +78,14 @@
                     data-id-field="id"
                     id="grid-data">
                   <thead class="gridjs-thead">
-                    <tr class="gridjs-tr bg-secondary/10">
-                      <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="instansi">Nama Instansi</th>
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500" data-field="name">Nama Dataset</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-center text-gray-500" data-field="status">Status</th>
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500" data-field="created_at">Tanggal Dibuat</th>
+                    <tr class="gridjs-tr bg-primary-light">
+                      <th class="gridjs-td gridjs-th text-sm" data-width="10" data-field="action">#</th>
+                      <th class="gridjs-td gridjs-th text-sm" data-width="10" data-field="no">No</th>
+                      <th class="gridjs-td gridjs-th text-sm" data-field="instansi">Nama Instansi</th>
+                      <th class="gridjs-td gridjs-th text-sm" data-field="name">Nama Dataset</th>
+                      <th class="gridjs-td gridjs-th text-sm" data-field="tahun">Tahun</th>
+                      <th class="gridjs-td gridjs-th text-sm text-center" data-field="status">Status</th>
+                      <th class="gridjs-td gridjs-th text-sm" data-field="created_at">Tanggal Dibuat</th>
                     </tr>
                   </thead>
                   <tbody class="gridjs-tbody"></tbody>
diff --git a/resources/views/modules/dashboard/dataset.blade.php b/resources/views/modules/dashboard/dataset.blade.php
index 573b7d9..9005def 100644
--- a/resources/views/modules/dashboard/dataset.blade.php
+++ b/resources/views/modules/dashboard/dataset.blade.php
@@ -25,7 +25,7 @@
                     data-id-field="id"
                     id="grid-data">
                   <thead class="gridjs-thead">
-                    <tr class="gridjs-tr bg-secondary/10">
+                    <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="instansi">Nama Instansi</th>
diff --git a/resources/views/modules/management/role/akses/form.blade.php b/resources/views/modules/management/role/akses/form.blade.php
index 75f5217..886196d 100644
--- a/resources/views/modules/management/role/akses/form.blade.php
+++ b/resources/views/modules/management/role/akses/form.blade.php
@@ -16,7 +16,7 @@
                         data-show-refresh ="false"
                         data-page-size="700">
                         <thead class="gridjs-thead">
-                        <tr class="gridjs-tr bg-secondary/10">
+                        <tr class="gridjs-tr bg-primary-light">
                             <th width="20">#</th>
                             <th>Menu</th>
                             <th width="100"><label><input type="checkbox" class="checkread"> Read</label></th>
diff --git a/resources/views/modules/management/role/index.blade.php b/resources/views/modules/management/role/index.blade.php
index 24cc7ce..06327b6 100644
--- a/resources/views/modules/management/role/index.blade.php
+++ b/resources/views/modules/management/role/index.blade.php
@@ -27,7 +27,7 @@
                     data-id-field="id"
                     id="grid-data">
                   <thead class="gridjs-thead">
-                    <tr class="gridjs-tr bg-secondary/10">
+                    <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>
diff --git a/resources/views/modules/management/user/index.blade.php b/resources/views/modules/management/user/index.blade.php
index f8731eb..a2cc34d 100644
--- a/resources/views/modules/management/user/index.blade.php
+++ b/resources/views/modules/management/user/index.blade.php
@@ -29,7 +29,7 @@
                     data-id-field="id"
                     id="grid-data">
                   <thead class="gridjs-thead">
-                    <tr class="gridjs-tr bg-secondary/10">
+                    <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="role">Role</th>
diff --git a/resources/views/modules/master/instansi/index.blade.php b/resources/views/modules/master/instansi/index.blade.php
index e4d4a30..3eba9c4 100644
--- a/resources/views/modules/master/instansi/index.blade.php
+++ b/resources/views/modules/master/instansi/index.blade.php
@@ -27,7 +27,7 @@
                     data-id-field="id"
                     id="grid-data">
                   <thead class="gridjs-thead">
-                    <tr class="gridjs-tr bg-secondary/10">
+                    <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>
diff --git a/resources/views/modules/master/resource/index.blade.php b/resources/views/modules/master/resource/index.blade.php
index f16ef82..e627c5e 100644
--- a/resources/views/modules/master/resource/index.blade.php
+++ b/resources/views/modules/master/resource/index.blade.php
@@ -27,7 +27,7 @@
                     data-id-field="id"
                     id="grid-data">
                   <thead class="gridjs-thead">
-                    <tr class="gridjs-tr bg-secondary/10">
+                    <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>
diff --git a/resources/views/modules/master/topik/index.blade.php b/resources/views/modules/master/topik/index.blade.php
index f16ef82..e627c5e 100644
--- a/resources/views/modules/master/topik/index.blade.php
+++ b/resources/views/modules/master/topik/index.blade.php
@@ -27,7 +27,7 @@
                     data-id-field="id"
                     id="grid-data">
                   <thead class="gridjs-thead">
-                    <tr class="gridjs-tr bg-secondary/10">
+                    <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>
diff --git a/resources/views/modules/opendata/dataset-tambahan/index.blade.php b/resources/views/modules/opendata/dataset-tambahan/index.blade.php
index f534d8d..c92b5f3 100644
--- a/resources/views/modules/opendata/dataset-tambahan/index.blade.php
+++ b/resources/views/modules/opendata/dataset-tambahan/index.blade.php
@@ -29,7 +29,7 @@
                     data-id-field="id"
                     id="grid-data">
                   <thead class="gridjs-thead">
-                    <tr class="gridjs-tr bg-secondary/10">
+                    <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="instansi">Nama Instansi</th>
diff --git a/resources/views/modules/opendata/dataset-tambahan/view.blade.php b/resources/views/modules/opendata/dataset-tambahan/view.blade.php
index fb0b3fb..648a932 100644
--- a/resources/views/modules/opendata/dataset-tambahan/view.blade.php
+++ b/resources/views/modules/opendata/dataset-tambahan/view.blade.php
@@ -10,72 +10,82 @@
             </div>
         </div>
         <div class="p-6">
-            <div class="grid lg:grid-cols-1 gap-3">
-                <table class="gridjs-table">
-                    <tbody class="gridjs-tbody">
-                        <tr class="gridjs-tr">
-                            <td class="gridjs-td border-none text-xs">Instansi</td>
-                            <td class="gridjs-td border-none text-xs">{{$item->instansi->name}}</td>
-                        </tr>
-                        <tr class="gridjs-tr">
-                            <td class="gridjs-td border-none text-xs">Resource Data</td>
-                            <td class="gridjs-td border-none text-xs">{{$item->template->name}}</td>
-                        </tr>
-                        <tr class="gridjs-tr">
-                            <td class="gridjs-td border-none text-xs">Nama Dataset</td>
-                            <td class="gridjs-td border-none text-xs">{{$item->name}}</td>
-                        </tr>
-                        <tr class="gridjs-tr">
-                            <td class="gridjs-td border-none text-xs">Sifat Dataset</td>
-                            <td class="gridjs-td border-none text-xs">
-                                @if($item->publik == 1)
-                                    <span class="p-1 text-xs text-white rounded  bg-success">Terbuka/Publik</span>
-                                @else
-                                    <span class="p-1 text-xs text-white rounded bg-primary">Rahasia/Private</span>
-                                @endif
-                            </td>
-                        </tr>
-                        <tr class="gridjs-tr">
-                            <td class="gridjs-td border-none text-xs">Tags</td>
-                            <td class="gridjs-td border-none text-xs">{!!tags($item->tags)!!}</td>
-                        </tr>
-                        <tr class="gridjs-tr">
-                            <td class="gridjs-td border-none text-xs">File : </td>
-                            <td class="gridjs-td border-none text-xs"><a href="{{asset('uploads/'.@$item->file)}}" class="btn bg-primary text-white text-xs"><i class="ri-download-line"></i>&nbsp;Download File</a></td>
-                        </tr>
-                        <tr class="gridjs-tr">
-                            <td class="gridjs-td border-none text-xs">Topik</td>
-                            <td class="gridjs-td border-none text-xs">{!! topikByDataset($item->topik)!!}</td>
-                        </tr>
-                        <tr class="gridjs-tr">
-                            <td class="gridjs-td border-none text-xs">Deskripsi</td>
-                            <td class="gridjs-td border-none text-xs">{{$item->deskripsi}}</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <?php 
-                    $data = json_decode($item->data);
-                ?>
-
-                <div style="overflow-x:auto;">
-
-                <table id="table"
-                    data-toggle="table"
-                    data-search="false"
-                    data-pagination="true"
-                    data-side-pagination="server"
-                    data-url="{{ route($route.'.gridDetail', ['id' => $keyId]) }}"
-                    >
-                    <thead>
-                        <tr class="bg-secondary text-white">
-                            @if (!empty($data))
-                                @foreach ($data[0] as $k => $key)
-                                    <th data-field="{{$k}}" class="gridjs-td gridjs-th text-xs">{{ ucwords(str_replace('_', ' ', $k)) }}</th>
-                                @endforeach
+            <div class="grid lg:grid-cols-2 gap-3 mb-3">
+                <div class="flex flex-between gap-3 bg-secondary/10 items-center p-2 rounded">
+                    <div class="p-2">
+                        <i class="ri-building-4-line text-primary text-xl"></i>
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="text-sm"><b>Instansi</b></div> 
+                        <div class="text-xs">{{$item->instansi->name}}</div>
+                    </div>
+                </div>
+                <div class="flex flex-between gap-3 bg-secondary/10 items-center p-2 rounded">
+                    <div class="p-2">
+                        <i class="ri-database-2-line text-primary text-xl"></i>
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="text-sm"><b>Resource Data</b></div> 
+                        <div class="text-xs">{{$item->template->name}}</div>
+                    </div>
+                </div>
+                <div class="flex flex-between gap-3 bg-secondary/10 items-center p-2 rounded">
+                    <div class="p-2">
+                        <i class="ri-database-2-line text-primary text-xl"></i>
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="text-sm"><b>Nama Dataset</b></div> 
+                        <div class="text-xs">{{$item->name}}</div>
+                    </div>
+                </div>
+                <div class="flex flex-between gap-3 bg-secondary/10 items-center p-2 rounded">
+                    <div class="p-2">
+                        <i class="ri-database-2-line text-primary text-xl"></i>
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="text-sm"><b>Sifat Dataset</b></div> 
+                        <div>
+                            @if($item->publik == 1)
+                                <span class="text-xs">Terbuka/Publik</span>
+                            @else
+                                <span class="text-xs">Rahasia/Private</span>
                             @endif
-                        </tr>
-                    </thead>
-                </table>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex flex-between gap-3 bg-secondary/10 items-center p-2 rounded">
+                    <div class="p-2">
+                        <i class="ri-database-2-line text-primary text-xl"></i>
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <div class="text-sm"><b>Tags</b></div> 
+                        <div class="text-xs">{!!tags($item->tags)!!}</div>
+                    </div>
+                </div>
+                <div class="flex flex-between gap-3 bg-secondary/10 items-center p-2 rounded">
+                    <div class="p-2">
+                        <i class="ri-database-2-line text-primary text-xl"></i>
+                    </div>
+                    <div class="flex flex-row gap-2">
+                        <div class="text-sm">
+                            <b>File</b> 
+                        </div> 
+                        <div>
+                            <a href="{{asset('uploads/'.@$item->file)}}" class="p-1 bg-primary rounded text-white text-xs"><i class="ri-download-line"></i>&nbsp;Download File</a>
+                        </div>
+                    </div>
+                </div>
+                
+            </div>
+            <div class="grid lg-grid-cols-1 gap-3">
+                <div class="flex flex-between gap-3 bg-secondary/10 items-center p-2 rounded">
+                    <div class="p-2">
+                        <i class="ri-information-line text-primary text-xl"></i>
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="text-sm"><b>Deskripsi</b></div> 
+                        <div class="text-xs">{{$item->deskripsi}}</div>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/resources/views/modules/opendata/dataset/index.blade.php b/resources/views/modules/opendata/dataset/index.blade.php
index f534d8d..c92b5f3 100644
--- a/resources/views/modules/opendata/dataset/index.blade.php
+++ b/resources/views/modules/opendata/dataset/index.blade.php
@@ -29,7 +29,7 @@
                     data-id-field="id"
                     id="grid-data">
                   <thead class="gridjs-thead">
-                    <tr class="gridjs-tr bg-secondary/10">
+                    <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="instansi">Nama Instansi</th>
diff --git a/resources/views/modules/opendata/dataset/view.blade.php b/resources/views/modules/opendata/dataset/view.blade.php
index fb0b3fb..aa074ec 100644
--- a/resources/views/modules/opendata/dataset/view.blade.php
+++ b/resources/views/modules/opendata/dataset/view.blade.php
@@ -10,72 +10,106 @@
             </div>
         </div>
         <div class="p-6">
-            <div class="grid lg:grid-cols-1 gap-3">
-                <table class="gridjs-table">
-                    <tbody class="gridjs-tbody">
-                        <tr class="gridjs-tr">
-                            <td class="gridjs-td border-none text-xs">Instansi</td>
-                            <td class="gridjs-td border-none text-xs">{{$item->instansi->name}}</td>
-                        </tr>
-                        <tr class="gridjs-tr">
-                            <td class="gridjs-td border-none text-xs">Resource Data</td>
-                            <td class="gridjs-td border-none text-xs">{{$item->template->name}}</td>
-                        </tr>
-                        <tr class="gridjs-tr">
-                            <td class="gridjs-td border-none text-xs">Nama Dataset</td>
-                            <td class="gridjs-td border-none text-xs">{{$item->name}}</td>
-                        </tr>
-                        <tr class="gridjs-tr">
-                            <td class="gridjs-td border-none text-xs">Sifat Dataset</td>
-                            <td class="gridjs-td border-none text-xs">
-                                @if($item->publik == 1)
-                                    <span class="p-1 text-xs text-white rounded  bg-success">Terbuka/Publik</span>
-                                @else
-                                    <span class="p-1 text-xs text-white rounded bg-primary">Rahasia/Private</span>
-                                @endif
-                            </td>
-                        </tr>
-                        <tr class="gridjs-tr">
-                            <td class="gridjs-td border-none text-xs">Tags</td>
-                            <td class="gridjs-td border-none text-xs">{!!tags($item->tags)!!}</td>
-                        </tr>
-                        <tr class="gridjs-tr">
-                            <td class="gridjs-td border-none text-xs">File : </td>
-                            <td class="gridjs-td border-none text-xs"><a href="{{asset('uploads/'.@$item->file)}}" class="btn bg-primary text-white text-xs"><i class="ri-download-line"></i>&nbsp;Download File</a></td>
-                        </tr>
-                        <tr class="gridjs-tr">
-                            <td class="gridjs-td border-none text-xs">Topik</td>
-                            <td class="gridjs-td border-none text-xs">{!! topikByDataset($item->topik)!!}</td>
-                        </tr>
-                        <tr class="gridjs-tr">
-                            <td class="gridjs-td border-none text-xs">Deskripsi</td>
-                            <td class="gridjs-td border-none text-xs">{{$item->deskripsi}}</td>
-                        </tr>
-                    </tbody>
-                </table>
+            <div class="grid lg:grid-cols-2 gap-3 mb-3">
+                <div class="flex flex-between gap-3 bg-secondary/10 items-center p-2 rounded">
+                    <div class="p-2">
+                        <i class="ri-building-4-line text-primary text-xl"></i>
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="text-sm"><b>Instansi</b></div> 
+                        <div class="text-xs">{{$item->instansi->name}}</div>
+                    </div>
+                </div>
+                <div class="flex flex-between gap-3 bg-secondary/10 items-center p-2 rounded">
+                    <div class="p-2">
+                        <i class="ri-database-2-line text-primary text-xl"></i>
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="text-sm"><b>Resource Data</b></div> 
+                        <div class="text-xs">{{$item->template->name}}</div>
+                    </div>
+                </div>
+                <div class="flex flex-between gap-3 bg-secondary/10 items-center p-2 rounded">
+                    <div class="p-2">
+                        <i class="ri-database-2-line text-primary text-xl"></i>
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="text-sm"><b>Nama Dataset</b></div> 
+                        <div class="text-xs">{{$item->name}}</div>
+                    </div>
+                </div>
+                <div class="flex flex-between gap-3 bg-secondary/10 items-center p-2 rounded">
+                    <div class="p-2">
+                        <i class="ri-database-2-line text-primary text-xl"></i>
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="text-sm"><b>Sifat Dataset</b></div> 
+                        <div>
+                            @if($item->publik == 1)
+                                <span class="text-xs">Terbuka/Publik</span>
+                            @else
+                                <span class="text-xs">Rahasia/Private</span>
+                            @endif
+                        </div>
+                    </div>
+                </div>
+                <div class="flex flex-between gap-3 bg-secondary/10 items-center p-2 rounded">
+                    <div class="p-2">
+                        <i class="ri-database-2-line text-primary text-xl"></i>
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <div class="text-sm"><b>Tags</b></div> 
+                        <div class="text-xs">{!!tags($item->tags)!!}</div>
+                    </div>
+                </div>
+                <div class="flex flex-between gap-3 bg-secondary/10 items-center p-2 rounded">
+                    <div class="p-2">
+                        <i class="ri-database-2-line text-primary text-xl"></i>
+                    </div>
+                    <div class="flex flex-row gap-2">
+                        <div class="text-sm">
+                            <b>File</b> 
+                        </div> 
+                        <div>
+                            <a href="{{asset('uploads/'.@$item->file)}}" class="p-1 bg-primary rounded text-white text-xs"><i class="ri-download-line"></i>&nbsp;Download File</a>
+                        </div>
+                    </div>
+                </div>
+                
+            </div>
+            <div class="grid lg-grid-cols-1 gap-3">
+                <div class="flex flex-between gap-3 bg-secondary/10 items-center p-2 rounded">
+                    <div class="p-2">
+                        <i class="ri-information-line text-primary text-xl"></i>
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="text-sm"><b>Deskripsi</b></div> 
+                        <div class="text-xs">{{$item->deskripsi}}</div>
+                    </div>
+                </div>
                 <?php 
                     $data = json_decode($item->data);
                 ?>
 
                 <div style="overflow-x:auto;">
 
-                <table id="table"
-                    data-toggle="table"
-                    data-search="false"
-                    data-pagination="true"
-                    data-side-pagination="server"
-                    data-url="{{ route($route.'.gridDetail', ['id' => $keyId]) }}"
-                    >
-                    <thead>
-                        <tr class="bg-secondary text-white">
-                            @if (!empty($data))
-                                @foreach ($data[0] as $k => $key)
-                                    <th data-field="{{$k}}" class="gridjs-td gridjs-th text-xs">{{ ucwords(str_replace('_', ' ', $k)) }}</th>
-                                @endforeach
-                            @endif
-                        </tr>
-                    </thead>
-                </table>
+                    <table id="table"
+                        data-toggle="table"
+                        data-search="false"
+                        data-pagination="true"
+                        data-side-pagination="server"
+                        data-url="{{ route($route.'.gridDetail', ['id' => $keyId]) }}"
+                        >
+                        <thead>
+                            <tr class="bg-primary-light text-primary">
+                                @if (!empty($data))
+                                    @foreach ($data[0] as $k => $key)
+                                        <th data-field="{{$k}}" class="gridjs-td gridjs-th text-xs">{{ ucwords(str_replace('_', ' ', $k)) }}</th>
+                                    @endforeach
+                                @endif
+                            </tr>
+                        </thead>
+                    </table>
                 </div>
             </div>
         </div>