diff --git a/src/app.postcss b/src/app.postcss
index e12220b..7bfd0d4 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -13,7 +13,8 @@ body {
 	--tw-ring-color: #00000;
 }
 
-.svelte-select, .svelte-select-list {
+.svelte-select,
+.svelte-select-list {
 	@apply dark:!bg-zinc-700 border dark:!border-zinc-500;
 }
 
@@ -25,3 +26,22 @@ body {
 	@apply dark:!text-black;
 }
 
+.paginator-controls button {
+	@apply variant-filled-primary !text-on-primary-token;
+}
+
+.paginator-controls button:hover {
+	@apply !variant-filled-primary opacity-90;
+}
+
+.paginator-controls button:disabled:hover {
+	@apply !variant-filled-surface;
+}
+
+.paginator-controls button.active {
+	@apply variant-filled-secondary !text-on-secondary-token;
+}
+
+.paginator-controls button:disabled {
+	@apply variant-filled-surface !text-on-surface-token;
+}
diff --git a/src/lib/components/Table/TablePagination.svelte b/src/lib/components/Table/TablePagination.svelte
index 5904314..a4daa20 100644
--- a/src/lib/components/Table/TablePagination.svelte
+++ b/src/lib/components/Table/TablePagination.svelte
@@ -67,13 +67,14 @@
 			on:page={(page) => ($pageIndex = page.detail)}
 			settings={paginationSettings}
 			select="hidden"
-			buttonClasses="disabled:!variant-filled-surface !px-3 !py-1.5 !fill-current !variant-filled-primary"
-			active="!variant-filled-secondary"
+			active="active"
+			controlVariant=""
+			regionControl="btn-group"
 			maxNumerals={1}
 			showNumerals
 		/>
 	</div>
-	<div class="flex justify-end items-center">
+	<div class="flex justify-end items-center text-on-primary-token">
 		<span class="text-xs text-gray-500">{indexInformation}</span>
 	</div>
 </div>