diff --git a/wwwroot/plugins/datatables/dataTables.tailwindcss.js b/wwwroot/plugins/datatables/dataTables.tailwindcss.js
new file mode 100644
index 0000000..1aa7eea
--- /dev/null
+++ b/wwwroot/plugins/datatables/dataTables.tailwindcss.js
@@ -0,0 +1,201 @@
+/*! DataTables Tailwind CSS integration
+ */
+
+(function (factory) {
+	if (typeof define === 'function' && define.amd) {
+		// AMD
+		define(['jquery', 'datatables.net'], function ($) {
+			return factory($, window, document);
+		});
+	}
+	else if (typeof exports === 'object') {
+		// CommonJS
+		var jq = require('jquery');
+		var cjsRequires = function (root, $) {
+			if (!$.fn.dataTable) {
+				require('datatables.net')(root, $);
+			}
+		};
+
+		if (typeof window === 'undefined') {
+			module.exports = function (root, $) {
+				if (!root) {
+					// CommonJS environments without a window global must pass a
+					// root. This will give an error otherwise
+					root = window;
+				}
+
+				if (!$) {
+					$ = jq(root);
+				}
+
+				cjsRequires(root, $);
+				return factory($, root, root.document);
+			};
+		}
+		else {
+			cjsRequires(window, jq);
+			module.exports = factory(jq, window, window.document);
+		}
+	}
+	else {
+		// Browser
+		factory(jQuery, window, document);
+	}
+}(function ($, window, document) {
+	'use strict';
+	var DataTable = $.fn.dataTable;
+
+
+
+	/*
+	 * This is a tech preview of Tailwind CSS integration with DataTables.
+	 */
+
+	// Set the defaults for DataTables initialisation
+	$.extend(true, DataTable.defaults, {
+		renderer: 'tailwindcss',
+		dom: "<'grid grid-cols-1 bg-gray-50 rounded-t-md py-3 px-2 lg:grid-cols-12 mb-1 items-center space-y-4 lg:space-y-0'<'lg:col-span-9'l><'lg:col-span-3'f><'lg:justify-self-center'B>>" +
+			"rt" +
+			"<'flex flex-col lg:flex-row items-center py-2 px-2 lg:justify-between pt-4'ip>",
+		language: {
+			processing: '<div class="badge badge-soft badge-info rounded-full">' +
+				'<span class="loading loading-bars loading-xs"></span>' +
+				'Sedang memproses' +
+				'</div>',
+			loadingRecords: "Sedang memuat...",
+			select: {
+				rows: {
+					_: '<span class="ms-4 badge badge-sm badge-soft badge-primary">%d baris dipilih</span>',
+					0: "",
+					1: '<span class="ms-4 badge badge-sm badge-soft badge-primary">1 baris dipilih</span>'
+				}
+			},
+			lengthMenu: "Tampilkan _MENU_ data",
+			search: "",
+			searchPlaceholder: "Cari data disini...",
+			emptyTable: "Tidak ada data yang tersedia pada tabel ini",
+			info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
+			infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
+			infoFiltered: "(disaring dari _MAX_ data keseluruhan)",
+			zeroRecords: "Tidak ditemukan data yang sesuai",
+		},
+	});
+
+
+	// Default class modification
+	$.extend(true, DataTable.ext.classes, {
+		container: "dt-container dt-tailwindcss p-2",
+		empty: {
+			row: 'text-center'
+		},
+		info: {
+			container: 'dt-info'
+		},
+		search: {
+			container: "input input-sm rounded-full",
+			input: "",
+		},
+		length: {
+			select: "select select-sm w-auto",
+		},
+		processing: {
+			container: "dt-processing"
+		},
+		paging: {
+			active: 'bg-primary-500 text-white border-primary-500',
+			notActive: '',
+			button: 'join-item btn btn-sm btn-outline rounded-full',
+			first: '',
+			last: '',
+			enabled: 'border-gray-300 border-1 text-gray-500 hover:bg-primary-500 hover:text-white hover:border-primary-500',
+			notEnabled: 'text-gray-500 border-0'
+		},
+		order: {
+			canAsc: 'dt-orderable-asc',
+			canDesc: 'dt-orderable-desc',
+			isAsc: 'dt-ordering-asc',
+			isDesc: 'dt-ordering-desc',
+			none: 'dt-orderable-none',
+			position: 'sorting_'
+		},
+		table: 'dataTable min-w-full text-sm align-middle whitespace-nowrap',
+		thead: {
+			row: 'bg-white',
+			cell: 'px-3 py-4 font-semibold text-left'
+		},
+		tbody: {
+			row: 'even:bg-gray-50',
+			cell: 'p-3'
+		},
+		tfoot: {
+			row: 'even:bg-gray-50',
+			cell: 'p-3 text-left'
+		},
+	});
+
+	DataTable.ext.renderer.pagingButton.tailwindcss = function (settings, buttonType, content, active, disabled) {
+		var classes = settings.oClasses.paging;
+		var btnClasses = [classes.button];
+
+		btnClasses.push(active ? classes.active : classes.notActive);
+		btnClasses.push(disabled ? classes.notEnabled : classes.enabled);
+
+		var a = $('<a>', {
+			'href': disabled ? null : '#',
+			'class': btnClasses.join(' ')
+		})
+			.html(content);
+
+		return {
+			display: a,
+			clicker: a
+		};
+	};
+
+	DataTable.ext.renderer.pagingContainer.tailwindcss = function (settings, buttonEls) {
+		var classes = settings.oClasses.paging;
+
+		buttonEls[0].addClass(classes.first);
+		buttonEls[buttonEls.length - 1].addClass(classes.last);
+
+		return $('<ul/>').addClass('join gap-1').append(buttonEls);
+	};
+
+	DataTable.ext.renderer.layout.tailwindcss = function (settings, container, items) {
+		var row = $('<div/>', {
+			"class": items.full ?
+				'grid grid-cols-1 gap-4 py-2' :
+				'flex flex-col lg:flex-row gap-2 lg:justify-between py-2 items-center'
+		})
+			.appendTo(container);
+
+		DataTable.ext.renderer.layout._forLayoutRow(items, function (key, val) {
+			var klass;
+
+			// Apply start / end (left / right when ltr) margins
+			if (val.table) {
+				klass = 'col-span-2';
+			}
+			else if (key === 'start') {
+				klass = 'justify-self-start';
+			}
+			else if (key === 'end') {
+				klass = 'col-start-2 justify-self-end';
+			}
+			else {
+				klass = 'col-span-2 justify-self-center';
+			}
+
+			$('<div/>', {
+				id: val.id || null,
+				"class": klass + ' ' + (val.className || '')
+			})
+				.append(val.contents)
+				.appendTo(row);
+		});
+	};
+
+
+	return DataTable;
+}));
\ No newline at end of file