diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 689ac68bc2ee85ae7f992c05c51bd1b3570d447a..48ee7d80727b77370c53a4d7f9cede8214096817 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -18,10 +18,12 @@ import type {
   ISelectOption,
   ISliderOptions,
   ITableColumn,
+  ITableItem,
   ITreeItem,
 } from '@interfaces/componentsProp';
 
 export interface ITableProps {
+  data?: ITableItem[][];
   columns: ITableColumn[];
   multipleSort?: boolean;
   gap?: string;
diff --git a/src/components/Paginator/Paginator.vue b/src/components/Paginator/Paginator.vue
index 1080535bd219214559df85e194708ee3b572c9ea..058a818db4098c564553dad5361f6b7cc6bd13c2 100644
--- a/src/components/Paginator/Paginator.vue
+++ b/src/components/Paginator/Paginator.vue
@@ -67,16 +67,30 @@ watch(perPage, (cur, prev) => {
 
 <template>
   <section class="container">
-    <PaginatorItem @click="current = 1" :color="color" :disable="isStartDisabled" class="paginatorItem">
+    <PaginatorItem
+      @click="current = 1"
+      :textColor="textColor"
+      :color="color"
+      :disable="isStartDisabled"
+      class="paginatorItem"
+    >
       <ArrowDoubleLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" />
     </PaginatorItem>
-    <PaginatorItem @click="current--" :color="color" :disable="isStartDisabled" class="paginatorItem">
+    <PaginatorItem
+      @click="current--"
+      :textColor="textColor"
+      :color="color"
+      :disable="isStartDisabled"
+      class="paginatorItem"
+    >
       <ArrowLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" />
     </PaginatorItem>
     <PaginatorItem
       v-for="item of items"
       :key="item"
       @click="current = item"
+      :textColor="textColor"
+      :color="color"
       :active="current === item"
       class="paginatorItem"
     >
@@ -84,6 +98,7 @@ watch(perPage, (cur, prev) => {
     </PaginatorItem>
     <PaginatorItem
       @click="isEndDisabled ? '' : current++"
+      :textColor="textColor"
       :color="color"
       :disable="isEndDisabled"
       class="paginatorItem"
@@ -92,6 +107,7 @@ watch(perPage, (cur, prev) => {
     </PaginatorItem>
     <PaginatorItem
       @click="isEndDisabled ? '' : (current = itemsLength)"
+      :textColor="textColor"
       :color="color"
       :disable="isEndDisabled"
       class="paginatorItem"
@@ -102,6 +118,7 @@ watch(perPage, (cur, prev) => {
       v-if="itemsPerPageOptions"
       v-model="perPage"
       :theme="theme"
+      :darknessTheme="darknessTheme"
       :size="size"
       width="max-width"
       no-highlight
diff --git a/src/components/Paginator/PaginatorItem.vue b/src/components/Paginator/PaginatorItem.vue
index 08e4b83377e573afef581b3dd428483edba65eac..1b8fe0baaa16a65fba6dbdbe140b6efe06047db3 100644
--- a/src/components/Paginator/PaginatorItem.vue
+++ b/src/components/Paginator/PaginatorItem.vue
@@ -2,7 +2,8 @@
 defineProps<{
   active?: boolean;
   disable?: boolean;
-  color?: string;
+  textColor: string;
+  color: string;
 }>();
 </script>
 
@@ -36,6 +37,7 @@ defineProps<{
   align-items: center;
   cursor: pointer;
   line-height: 1.2;
+  color: v-bind(textColor);
 }
 .item::before {
   content: '';
@@ -43,17 +45,15 @@ defineProps<{
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  top: 0;
-  left: 0;
   z-index: -1;
   background-color: v-bind(color);
 }
-.item:hover > .bg {
-  opacity: 1;
+.item:hover > .bg:not(.active) {
+  background-color: v-bind(textColor);
+  opacity: 0.1;
 }
-.item:active > .bg {
+.item:active > .bg:not(.active) {
   opacity: 0.2;
-  background-color: black;
 }
 .bg {
   width: 120%;
@@ -63,18 +63,18 @@ defineProps<{
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 10px;
-  z-index: -2;
+  z-index: -1;
   border-radius: 50%;
   background-color: transparent;
   opacity: 0;
   transition: all 0.2s ease;
 }
 .item > .active {
-  background-color: black !important;
+  background-color: v-bind(textColor) !important;
   opacity: 1;
 }
 .active + * {
-  color: white;
+  color: v-bind(color);
 }
 .disable {
   cursor: auto;