diff --git a/src/Playground.vue b/src/Playground.vue
index f2b8e1929fbc1f3a11c03d64f37b40e75f844e79..572f7bb84fb80d46783df6585546beab4de27edd 100644
--- a/src/Playground.vue
+++ b/src/Playground.vue
@@ -137,7 +137,6 @@ const tableColumns: ITableColumn[] = [
     type: 'progressBar',
     options: {
       theme: 'red',
-      width: '150px',
       size: 'small',
     },
   },
@@ -202,6 +201,7 @@ const pbValue = ref(0);
     theme="black"
     stripedRows
     editable
+    paginator
     :no-editing-settings="{
       cells: [[0, 0]],
     }"
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 150309a5e79d56ae22e029f0798501d673d18ff3..da8caafb439eff2de59e59275b76b7f28fa23c37 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -36,6 +36,7 @@ export interface ITableProps {
   darknessTheme?: TDarkness;
   darknessTextColor?: TDarkness;
   paginator?: boolean;
+  paginatorOptions?: IPaginatorProps;
   editable?: boolean;
   noEditingSettings?: {
     columns?: number[];
diff --git a/src/components/Paginator/Paginator.vue b/src/components/Paginator/Paginator.vue
index 058a818db4098c564553dad5361f6b7cc6bd13c2..0f0126dae038fed0f779bd858270f9a5a6da54ac 100644
--- a/src/components/Paginator/Paginator.vue
+++ b/src/components/Paginator/Paginator.vue
@@ -133,6 +133,8 @@ watch(perPage, (cur, prev) => {
   display: flex;
   gap: calc(v-bind(fontSize) * 0.25);
   align-items: center;
+  width: max-content;
+  height: calc(v-bind(itemSize) * 1.2);
 }
 .paginatorItem {
   width: v-bind(itemSize);
@@ -142,5 +144,7 @@ watch(perPage, (cur, prev) => {
 .digital {
   font-size: v-bind(fontSize);
   font-weight: bold;
+  position: relative;
+  z-index: 100;
 }
 </style>
diff --git a/src/components/Paginator/PaginatorItem.vue b/src/components/Paginator/PaginatorItem.vue
index 1b8fe0baaa16a65fba6dbdbe140b6efe06047db3..e44b2cafd595dc8d6f03c62f48e3953984cb6218 100644
--- a/src/components/Paginator/PaginatorItem.vue
+++ b/src/components/Paginator/PaginatorItem.vue
@@ -63,7 +63,7 @@ defineProps<{
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 10px;
-  z-index: -1;
+  z-index: 5;
   border-radius: 50%;
   background-color: transparent;
   opacity: 0;
diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index e85cf5ff7e399b04d0381cde8d46c32037a06e4c..922e65788c9270b5f909760c4d1822a7a86c233d 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -5,6 +5,7 @@ import { convertThemeToColor, convertThemeToSecondaryColor, convertThemeToTextCo
 import { calcAdditionalHeight, calcGap, calcRows } from '@components/Table/helpers';
 import TableHeader from '@components/Table/components/TableHeader.vue';
 import TableCell from '@components/Table/components/TableCell.vue';
+import Paginator from '@components/Paginator/Paginator.vue';
 
 const props = withDefaults(defineProps<ITableProps>(), {
   size: 'normal',
@@ -17,6 +18,7 @@ const data = defineModel() as Ref<unknown[][]>;
 const emit = defineEmits(['updateData']);
 
 const table = ref();
+const currentPage = ref(1);
 const columns = ref(props.columns);
 const sortStateActive = ref<[number, string] | []>([]);
 const indexColumnToFilter = ref<number>(0);
@@ -105,7 +107,7 @@ const updateData = (newValue: Ref<unknown>, rowIndex: number, columnIndex: numbe
 </script>
 
 <template>
-  <div>
+  <div :style="`background-color: ${themeColor}; color: ${color}`">
     <table
       :class="{
         tableLines: showAllLines,
@@ -178,6 +180,14 @@ const updateData = (newValue: Ref<unknown>, rowIndex: number, columnIndex: numbe
         </tr>
       </tbody>
     </table>
+    <Paginator
+      v-show="paginator"
+      v-model="currentPage"
+      :theme="theme"
+      :total="data.length"
+      v-bind="paginatorOptions"
+      class="paginator"
+    />
   </div>
 </template>
 
@@ -213,6 +223,10 @@ tr::after {
   justify-content: center;
   align-items: center;
 }
+.paginator {
+  display: block;
+  margin: 0 auto;
+}
 .leftBorder {
   border-left: 1px solid v-bind(secondaryColor);
 }
diff --git a/src/components/Table/components/TableCell.vue b/src/components/Table/components/TableCell.vue
index 48eb2a7d3fc756e7ed8a9c1251390d8b62f8e39e..7f5ddcab7f56c943182291b8430794b942d8e5b6 100644
--- a/src/components/Table/components/TableCell.vue
+++ b/src/components/Table/components/TableCell.vue
@@ -101,6 +101,7 @@ input::-webkit-inner-spin-button {
   margin: 0;
 }
 input[type='number'] {
+  appearance: textfield;
   -moz-appearance: textfield;
 }
 </style>