diff --git a/src/app.postcss b/src/app.postcss
index 3281433..c81c5e9 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -25,23 +25,3 @@ body {
 .list-item .item.hover:not(.active):not(.list-group-title) {
 	@apply dark:!text-black;
 }
-
-.paginator-controls button:disabled:hover {
-	@apply !variant-filled !bg-neutral-400 !text-on-surface-token !opacity-30 !fill-gray-600;
-}
-
-.paginator-controls button:disabled {
-	@apply !variant-filled !bg-neutral-400 !text-on-surface-token !opacity-30 !fill-gray-600;
-}
-
-.paginator-controls button.active {
-	@apply variant-filled-secondary !text-on-secondary-token;
-}
-
-.paginator-controls button {
-	@apply variant-filled-primary !text-on-primary-token;
-}
-
-.paginator-controls button:hover {
-	@apply !variant-filled-primary opacity-90;
-}
diff --git a/src/lib/components/Table/TablePagination.svelte b/src/lib/components/Table/TablePagination.svelte
index 08ac9cb..c9d75f4 100644
--- a/src/lib/components/Table/TablePagination.svelte
+++ b/src/lib/components/Table/TablePagination.svelte
@@ -67,9 +67,9 @@
 			on:page={(page) => ($pageIndex = page.detail)}
 			settings={paginationSettings}
 			select="hidden"
-			active="active"
-			controlVariant=""
-			buttonClasses="!rounded-none !px-3 !py-1.5 fill-current"
+			active="!variant-filled-secondary !text-on-secondary-token"
+			controlVariant="!text-on-primary-token"
+			buttonClasses="!rounded-none !px-3 !py-1.5 fill-current bg-primary-500 hover:!bg-primary-600 !text-on-primary-token disabled:grayscale disabled:!opacity-30"
 			regionControl="btn-group"
 			maxNumerals={1}
 			showNumerals