diff --git a/projects/main-site/src/app/_pages/anime/anime-detail/anime-detail.component.ts b/projects/main-site/src/app/_pages/anime/anime-detail/anime-detail.component.ts
index 2feca97ed..6aaf9fccc 100644
--- a/projects/main-site/src/app/_pages/anime/anime-detail/anime-detail.component.ts
+++ b/projects/main-site/src/app/_pages/anime/anime-detail/anime-detail.component.ts
@@ -205,7 +205,8 @@ export class AnimeDetailComponent implements OnInit, OnDestroy {
             Proyek: r.project_type_.name,
             // Image: r.image_url,
             Tanggal: r.created_at,
-            'Nama Berkas': r.name
+            'Nama Berkas': r.name,
+            DARK: r.r18
           });
         }
         this.tabData[1].data.row = this.berkasAnime;
diff --git a/projects/main-site/src/app/_pages/berkas/berkas-list/berkas-list.component.ts b/projects/main-site/src/app/_pages/berkas/berkas-list/berkas-list.component.ts
index df802289e..1871cb9f3 100644
--- a/projects/main-site/src/app/_pages/berkas/berkas-list/berkas-list.component.ts
+++ b/projects/main-site/src/app/_pages/berkas/berkas-list/berkas-list.component.ts
@@ -137,7 +137,8 @@ export class BerkasListComponent implements OnInit, OnDestroy {
             Tanggal: r.created_at,
             Kunjungan: r.view_count,
             Pemilik: r.user_.username,
-            'Nama Berkas': r.name
+            'Nama Berkas': r.name,
+            DARK: r.r18
           });
         }
         this.tabData[0].data.row = this.berkasData;
diff --git a/projects/main-site/src/app/_pages/dorama/dorama-detail/dorama-detail.component.ts b/projects/main-site/src/app/_pages/dorama/dorama-detail/dorama-detail.component.ts
index 203ff41fc..e763c5e35 100644
--- a/projects/main-site/src/app/_pages/dorama/dorama-detail/dorama-detail.component.ts
+++ b/projects/main-site/src/app/_pages/dorama/dorama-detail/dorama-detail.component.ts
@@ -207,7 +207,8 @@ export class DoramaDetailComponent implements OnInit, OnDestroy {
             Proyek: r.project_type_.name,
             // Image: r.image_url,
             Tanggal: r.created_at,
-            'Nama Berkas': r.name
+            'Nama Berkas': r.name,
+            DARK: r.r18
           });
         }
         this.tabData[1].data.row = this.berkasDorama;
diff --git a/projects/main-site/src/app/_pages/fansub/fansub-detail/fansub-detail.component.ts b/projects/main-site/src/app/_pages/fansub/fansub-detail/fansub-detail.component.ts
index 0340ab650..550e6ecd1 100644
--- a/projects/main-site/src/app/_pages/fansub/fansub-detail/fansub-detail.component.ts
+++ b/projects/main-site/src/app/_pages/fansub/fansub-detail/fansub-detail.component.ts
@@ -286,7 +286,8 @@ export class FansubDetailComponent implements OnInit, OnDestroy {
             Proyek: r.project_type_.name,
             // Image: r.image_url,
             Tanggal: r.created_at,
-            'Nama Berkas': r.name
+            'Nama Berkas': r.name,
+            DARK: r.r18
           });
         }
         this.tabData[2].data.row = this.berkasFansub;
diff --git a/projects/main-site/src/app/_pages/user/user-detail/user-detail.component.ts b/projects/main-site/src/app/_pages/user/user-detail/user-detail.component.ts
index 7ba5f846c..d9a98b078 100644
--- a/projects/main-site/src/app/_pages/user/user-detail/user-detail.component.ts
+++ b/projects/main-site/src/app/_pages/user/user-detail/user-detail.component.ts
@@ -191,7 +191,8 @@ export class UserDetailComponent implements OnInit, OnDestroy {
             Tanggal: r.created_at,
             Kunjungan: r.view_count,
             Pemilik: r.user_.username,
-            'Nama Berkas': r.name
+            'Nama Berkas': r.name,
+            DARK: r.r18
           });
         }
         this.tabData[0].data.row = this.berkasUser;
diff --git a/projects/main-site/src/app/_shared/components/material-table/material-table.component.html b/projects/main-site/src/app/_shared/components/material-table/material-table.component.html
index 30a1a31c8..89c2c8490 100644
--- a/projects/main-site/src/app/_shared/components/material-table/material-table.component.html
+++ b/projects/main-site/src/app/_shared/components/material-table/material-table.component.html
@@ -47,20 +47,20 @@ <h3 class="m-0" [style.color]="'#ff4081'">{{ tdc.toUpperCase() }}</h3>
               tdc.toUpperCase() === 'JUDUL ANIME' || tdc.toUpperCase() === 'JUDUL DORAMA'
             ) ? 'text-truncate' : ''
           }}">
-            <img matListAvatar [src]="row.foto" style="width: 32px; height: 32px; object-fit: cover; border-radius: 0;" class="me-1" *ngIf="tdc.toUpperCase() === 'PEMILIK' || tdc.toUpperCase() === 'PENULIS'" />
-            <img matListAvatar [src]="row.foto_korban" style="width: 32px; height: 32px; object-fit: cover; border-radius: 0;" class="me-1" *ngIf="tdc.toUpperCase() === 'KORBAN'" />
-            <img matListAvatar [src]="row.foto_pelaku" style="width: 32px; height: 32px; object-fit: cover; border-radius: 0;" class="me-1" *ngIf="tdc.toUpperCase() === 'PELAKU'" />
-            <img matListAvatar [src]="row.foto_fansub" style="width: 32px; height: 32px; object-fit: cover; border-radius: 0;" class="me-1" *ngIf="tdc.toUpperCase() === 'FANSUB'" />
-            <img matListAvatar [src]="row.foto_anggota" style="width: 32px; height: 32px; object-fit: cover; border-radius: 0;" class="me-1" *ngIf="tdc.toUpperCase() === 'ANGGOTA'" />
-            <img matListAvatar [src]="row[tdc]" style="width: 64px; height: 64px; object-fit: cover; border-radius: 0;" *ngIf="tdc.toUpperCase() === 'LOGO'" />
-            <img matListAvatar [src]="row[tdc]" style="width: 64px; height: 48px; object-fit: cover; border-radius: 0;" *ngIf="tdc.toUpperCase() === 'IMAGE'" />
-            <img matListAvatar [src]="row[tdc]" style="width: 64px; height: 100%; object-fit: cover; border-radius: 0;" *ngIf="tdc.toUpperCase() === 'POSTER'" />
-            <span *ngIf="tdc.toUpperCase() === 'TANGGAL'" matTooltip="{{ row[tdc] | date:'d MMMM y, hh:mm:ss a z' }}">{{ row[tdc] | dateAgo }}</span>
-            <span *ngIf="tdc.toUpperCase() === 'DEADLINE'">{{ row[tdc] | date:'d/M/yy, HH:mm:ss' }}</span>
-            <span *ngIf="tdc.toUpperCase() === 'ANIME'">{{ row[tdc] || 0 }} Anime</span>
-            <span *ngIf="tdc.toUpperCase() === 'DORAMA'">{{ row[tdc] || 0 }} Dorama</span>
-            <span *ngIf="tdc.toUpperCase() === 'KUNJUNGAN'">{{ row[tdc] }}x Dilihat</span>
-            <span *ngIf="
+            <img matListAvatar [src]="row.foto" style="width: 32px; height: 32px; object-fit: cover; border-radius: 0;" [style.filter]="row.DARK ? 'brightness(0.75)' : ''" class="me-1" *ngIf="tdc.toUpperCase() === 'PEMILIK' || tdc.toUpperCase() === 'PENULIS'" />
+            <img matListAvatar [src]="row.foto_korban" style="width: 32px; height: 32px; object-fit: cover; border-radius: 0;" [style.filter]="row.DARK ? 'brightness(0.75)' : ''" class="me-1" *ngIf="tdc.toUpperCase() === 'KORBAN'" />
+            <img matListAvatar [src]="row.foto_pelaku" style="width: 32px; height: 32px; object-fit: cover; border-radius: 0;" [style.filter]="row.DARK ? 'brightness(0.75)' : ''" class="me-1" *ngIf="tdc.toUpperCase() === 'PELAKU'" />
+            <img matListAvatar [src]="row.foto_fansub" style="width: 32px; height: 32px; object-fit: cover; border-radius: 0;" [style.filter]="row.DARK ? 'brightness(0.75)' : ''" class="me-1" *ngIf="tdc.toUpperCase() === 'FANSUB'" />
+            <img matListAvatar [src]="row.foto_anggota" style="width: 32px; height: 32px; object-fit: cover; border-radius: 0;" [style.filter]="row.DARK ? 'brightness(0.75)' : ''" class="me-1" *ngIf="tdc.toUpperCase() === 'ANGGOTA'" />
+            <img class="{{ row.DARK ? 'text-muted' : '' }}" matListAvatar [src]="row[tdc]" style="width: 64px; height: 64px; object-fit: cover; border-radius: 0;" *ngIf="tdc.toUpperCase() === 'LOGO'" />
+            <img class="{{ row.DARK ? 'text-muted' : '' }}" matListAvatar [src]="row[tdc]" style="width: 64px; height: 48px; object-fit: cover; border-radius: 0;" *ngIf="tdc.toUpperCase() === 'IMAGE'" />
+            <img class="{{ row.DARK ? 'text-muted' : '' }}" matListAvatar [src]="row[tdc]" style="width: 64px; height: 100%; object-fit: cover; border-radius: 0;" *ngIf="tdc.toUpperCase() === 'POSTER'" />
+            <span class="{{ row.DARK ? 'text-muted' : '' }}" *ngIf="tdc.toUpperCase() === 'TANGGAL'" matTooltip="{{ row[tdc] | date:'d MMMM y, hh:mm:ss a z' }}">{{ row[tdc] | dateAgo }}</span>
+            <span class="{{ row.DARK ? 'text-muted' : '' }}" *ngIf="tdc.toUpperCase() === 'DEADLINE'">{{ row[tdc] | date:'d/M/yy, HH:mm:ss' }}</span>
+            <span class="{{ row.DARK ? 'text-muted' : '' }}" *ngIf="tdc.toUpperCase() === 'ANIME'">{{ row[tdc] || 0 }} Anime</span>
+            <span class="{{ row.DARK ? 'text-muted' : '' }}" *ngIf="tdc.toUpperCase() === 'DORAMA'">{{ row[tdc] || 0 }} Dorama</span>
+            <span class="{{ row.DARK ? 'text-muted' : '' }}" *ngIf="tdc.toUpperCase() === 'KUNJUNGAN'">{{ row[tdc] }}x Dilihat</span>
+            <span class="{{ row.DARK ? 'text-muted' : '' }}" *ngIf="
               tdc.toUpperCase() !== 'POSTER' && tdc.toUpperCase() !== 'LOGO' && tdc.toUpperCase() !== 'IMAGE' &&
               tdc.toUpperCase() !== 'TANGGAL' && tdc.toUpperCase() !== 'DEADLINE' && tdc.toUpperCase() !== 'ANIME' &&
               tdc.toUpperCase() !== 'DORAMA' && tdc.toUpperCase() !== 'KUNJUNGAN'
diff --git a/projects/main-site/src/models/req-res.model.ts b/projects/main-site/src/models/req-res.model.ts
index 281da5f23..381c9a845 100644
--- a/projects/main-site/src/models/req-res.model.ts
+++ b/projects/main-site/src/models/req-res.model.ts
@@ -247,6 +247,7 @@ export interface BerkasModel {
   name?: string;
   description?: string;
   private?: boolean;
+  r18?: boolean;
   download_url?: string;
   image_url?: string;
   sn_code?: string;