diff --git a/packages/ui-components/src/lib/components/ButtonsPagination.svelte b/packages/ui-components/src/lib/components/ButtonsPagination.svelte
new file mode 100644
index 000000000..19e213016
--- /dev/null
+++ b/packages/ui-components/src/lib/components/ButtonsPagination.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { ArrowLeftOutline, ArrowRightOutline } from 'flowbite-svelte-icons';
+	import { createEventDispatcher } from 'svelte';
+	import { Button, Spinner } from 'flowbite-svelte';
+
+	const dispatch = createEventDispatcher();
+
+	export let index: number = 1;
+	export let loading = false;
+</script>
+
+<div class="flex items-center">
+	{#if loading}
+		<Spinner class="mr-4 h-5 w-5" color="white" />
+	{/if}
+	<Button
+		class="border-1 rounded-none rounded-l-lg"
+		disabled={loading || index == 1}
+		on:click={() => dispatch('previous')}
+		color="light"
+	>
+		<ArrowLeftOutline class="me-2 h-3.5 w-3.5" />
+		Previous
+	</Button>
+	<div
+		class="justify-center border border-gray-300 bg-white px-5 py-2.5 text-center text-sm font-medium dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+	>
+		{index}
+	</div>
+	<Button
+		class="border-1 rounded-none rounded-r-lg"
+		disabled={loading}
+		on:click={() => dispatch('next')}
+		color="light"
+	>
+		Next
+		<ArrowRightOutline class="ms-2 h-3.5 w-3.5" />
+	</Button>
+</div>
diff --git a/packages/ui-components/src/lib/index.ts b/packages/ui-components/src/lib/index.ts
index 7278e5b90..7c92dc972 100644
--- a/packages/ui-components/src/lib/index.ts
+++ b/packages/ui-components/src/lib/index.ts
@@ -34,6 +34,7 @@ export { default as Heading } from './components/Heading.svelte';
 export { default as Text } from './components/Text.svelte';
 export { default as DropdownProperty } from './components/DropdownProperty.svelte';
 export { default as IconError } from './components/IconError.svelte';
+export { default as ButtonsPagination } from './components/ButtonsPagination.svelte';
 
 //Types
 export type { AppStoresInterface } from './types/appStores.ts';
diff --git a/tauri-app/src/lib/components/AppTable.svelte b/tauri-app/src/lib/components/AppTable.svelte
index 232341ebd..744cfd805 100644
--- a/tauri-app/src/lib/components/AppTable.svelte
+++ b/tauri-app/src/lib/components/AppTable.svelte
@@ -1,7 +1,7 @@
 <script lang="ts" generics="T">
   import { Spinner, Table, TableBody, TableBodyRow, TableHead } from 'flowbite-svelte';
   import { FileCsvOutline } from 'flowbite-svelte-icons';
-  import ButtonsPagination from '$lib/components/ButtonsPagination.svelte';
+  import { ButtonsPagination } from '@rainlanguage/ui-components';
   import type { ListStore } from '$lib/storesGeneric/listStore';
   import ButtonLoading from './ButtonLoading.svelte';
   import { createEventDispatcher } from 'svelte';
diff --git a/tauri-app/src/lib/components/ButtonsPagination.svelte b/tauri-app/src/lib/components/ButtonsPagination.svelte
deleted file mode 100644
index eccce33d4..000000000
--- a/tauri-app/src/lib/components/ButtonsPagination.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-  import { ArrowLeftOutline, ArrowRightOutline } from 'flowbite-svelte-icons';
-  import { createEventDispatcher } from 'svelte';
-  import { Button, Spinner } from 'flowbite-svelte';
-
-  const dispatch = createEventDispatcher();
-
-  export let index: number = 1;
-  export let loading = false;
-</script>
-
-<div class="flex items-center">
-  {#if loading}
-    <Spinner class="mr-4 h-5 w-5" color="white" />
-  {/if}
-  <Button
-    class="border-1 rounded-none rounded-l-lg"
-    disabled={loading || index == 1}
-    on:click={() => dispatch('previous')}
-    color="light"
-  >
-    <ArrowLeftOutline class="me-2 h-3.5 w-3.5" />
-    Previous
-  </Button>
-  <div
-    class="justify-center border border-gray-300 bg-white px-5 py-2.5 text-center text-sm font-medium dark:border-gray-600 dark:bg-gray-800 dark:text-white"
-  >
-    {index}
-  </div>
-  <Button
-    class="border-1 rounded-none rounded-r-lg"
-    disabled={loading}
-    on:click={() => dispatch('next')}
-    color="light"
-  >
-    Next
-    <ArrowRightOutline class="ms-2 h-3.5 w-3.5" />
-  </Button>
-</div>