diff --git a/frontend/apps/editor3d/app/src/components/reusable/Pagination/Pagination.mdx b/frontend/apps/editor3d/app/src/components/reusable/Pagination/Pagination.mdx
deleted file mode 100644
index 51c7810c95..0000000000
--- a/frontend/apps/editor3d/app/src/components/reusable/Pagination/Pagination.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Canvas, Meta } from '@storybook/blocks';
-
-import * as PaginationStories from './Pagination.stories';
-
-<Meta of={PaginationStories} />
-
-# Controls for pagination.
-
-Here is what it looks like when empty
-<Canvas of={PaginationStories.Empty} />
-First Page
-<Canvas of={PaginationStories.FirstPage} />
-Middle
-<Canvas of={PaginationStories.Middle} />
-Last Page
-<Canvas of={PaginationStories.LastPage} />
diff --git a/frontend/apps/editor3d/app/src/components/reusable/Pagination/Pagination.stories.tsx b/frontend/apps/editor3d/app/src/components/reusable/Pagination/Pagination.stories.tsx
deleted file mode 100644
index dabeffd73f..0000000000
--- a/frontend/apps/editor3d/app/src/components/reusable/Pagination/Pagination.stories.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Pagination } from "./Pagination";
-import { withActions } from "@storybook/addon-actions/decorator";
-
-const meta: Meta<typeof Pagination> = {
-  component: Pagination,
-  parameters: {
-    actions: {
-      handles: ["pageChange"],
-    },
-  },
-  decorators: [withActions],
-};
-
-type Story = StoryObj<typeof Pagination>;
-
-export const Empty: Story = {
-  render: () => (
-    <div className="w-[300px] bg-brand-secondary-200">
-      <Pagination
-        className=""
-        currentPage={0}
-        totalPages={0}
-        onPageChange={() => {}}
-      />
-    </div>
-  ),
-};
-
-export const FirstPage: Story = {
-  render: () => (
-    <div className="w-[300px] bg-brand-secondary-200">
-      <Pagination
-        className=""
-        currentPage={0}
-        totalPages={5}
-        onPageChange={() => {}}
-      />
-    </div>
-  ),
-};
-
-export const Middle: Story = {
-  render: () => (
-    <div className="w-[300px] bg-brand-secondary-200">
-      <Pagination
-        className=""
-        currentPage={2}
-        totalPages={5}
-        onPageChange={() => {}}
-      />
-    </div>
-  ),
-};
-
-export const LastPage: Story = {
-  render: () => (
-    <div className="w-[300px] bg-brand-secondary-200">
-      <Pagination
-        className=""
-        currentPage={4}
-        totalPages={5}
-        onPageChange={() => {}}
-      />
-    </div>
-  ),
-};
-
-export default meta;
diff --git a/frontend/apps/editor3d/app/src/components/reusable/Pagination/index.ts b/frontend/apps/editor3d/app/src/components/reusable/Pagination/index.ts
deleted file mode 100644
index 8404fe460b..0000000000
--- a/frontend/apps/editor3d/app/src/components/reusable/Pagination/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./Pagination";
diff --git a/frontend/apps/editor3d/app/src/components/reusable/index.ts b/frontend/apps/editor3d/app/src/components/reusable/index.ts
index 05457ff363..f67c770d44 100644
--- a/frontend/apps/editor3d/app/src/components/reusable/index.ts
+++ b/frontend/apps/editor3d/app/src/components/reusable/index.ts
@@ -1,4 +1,3 @@
-export * from "./Pagination";
 export * from "./SearchFilter";
 export * from "./UploadModal";
 export * from "./UploadModal3D";
diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersComboTabs/subtabAnimations.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersComboTabs/subtabAnimations.tsx
index 3505b12eba..be9c0f1b80 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersComboTabs/subtabAnimations.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersComboTabs/subtabAnimations.tsx
@@ -8,10 +8,10 @@ import {
   MediaFileAnimationType,
 } from "~/enums";
 import {
-  Pagination,
   SearchFilter,
   UploadModal,
 } from "~/components";
+import { Pagination } from "@storyteller/ui-pagination";
 import { Button, FilterButtons } from "@storyteller/ui-button";
 import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/sharedComps";
 import { isAnyStatusFetching } from "../../utilities";
diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersComboTabs/subtabCharacters.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersComboTabs/subtabCharacters.tsx
index bc4d7ea978..e9f10f8626 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersComboTabs/subtabCharacters.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersComboTabs/subtabCharacters.tsx
@@ -10,10 +10,10 @@ import {
 } from "~/enums";
 import { MediaItem } from "~/pages/PageEnigma/models";
 import {
-  Pagination,
   SearchFilter,
   UploadModal,
 } from "~/components";
+import { Pagination } from "@storyteller/ui-pagination";
 import { Button, FilterButtons } from "@storyteller/ui-button";
 import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/sharedComps";
 import { isAnyStatusFetching } from "../../utilities";
diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersComboTabs/subtabExpressions.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersComboTabs/subtabExpressions.tsx
index e6ff9dacc0..25674ea0d1 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersComboTabs/subtabExpressions.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersComboTabs/subtabExpressions.tsx
@@ -6,10 +6,10 @@ import {
   MediaFileAnimationType,
 } from "~/enums";
 import {
-  Pagination,
   SearchFilter,
   UploadModal,
 } from "~/components";
+import { Pagination } from "@storyteller/ui-pagination";
 import { Button, FilterButtons } from "@storyteller/ui-button";
 import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/sharedComps";
 import { isAnyStatusFetching } from "../../utilities";
diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CreaturesTab.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CreaturesTab.tsx
index ae5f9b54a2..6e4c0f6dfa 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CreaturesTab.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CreaturesTab.tsx
@@ -14,9 +14,9 @@ import {
 } from "~/pages/PageEnigma/comps/SidePanelTabs/sharedComps";
 import {
   SearchFilter,
-  Pagination,
   UploadModal3D,
 } from "~/components";
+import { Pagination } from "@storyteller/ui-pagination";
 
 import { Button, FilterButtons } from "@storyteller/ui-button"
 
diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/ObjectsTab.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/ObjectsTab.tsx
index 072196998c..8ed0f572e9 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/ObjectsTab.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/ObjectsTab.tsx
@@ -15,9 +15,9 @@ import {
 } from "~/pages/PageEnigma/comps/SidePanelTabs/sharedComps";
 import {
   SearchFilter,
-  Pagination,
   UploadModal3D,
 } from "~/components";
+import { Pagination } from "@storyteller/ui-pagination";
 import { Button, FilterButtons } from "@storyteller/ui-button"
 import { isAnyStatusFetching } from "../utilities";
 import {
diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/PlanesTab/subTabImagePlanes.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/PlanesTab/subTabImagePlanes.tsx
index 4241ba7257..18a9e2e40f 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/PlanesTab/subTabImagePlanes.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/PlanesTab/subTabImagePlanes.tsx
@@ -6,11 +6,11 @@ import {
   IMAGEPLANE_FILE_TYPE,
 } from "~/enums";
 import {
-  Button,
-  Pagination,
   SearchFilter,
   UploadModalMedia,
 } from "~/components";
+import { Button } from "@storyteller/ui-button";
+import { Pagination } from "@storyteller/ui-pagination";
 import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/sharedComps";
 import { isAnyStatusFetching } from "../../utilities";
 import { useUserObjects, useSearchUserObjects } from "../../hooks";
diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/PlanesTab/subTabVideoPlanes.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/PlanesTab/subTabVideoPlanes.tsx
index 028d16680d..60403fcc2a 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/PlanesTab/subTabVideoPlanes.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/PlanesTab/subTabVideoPlanes.tsx
@@ -6,11 +6,11 @@ import {
   VIDEOPLANE_FILE_TYPE,
 } from "~/enums";
 import {
-  Button,
-  Pagination,
   SearchFilter,
   UploadModalMedia,
 } from "~/components";
+import { Button } from "@storyteller/ui-button";
+import { Pagination } from "@storyteller/ui-pagination";
 import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/sharedComps";
 import { isAnyStatusFetching } from "../../utilities";
 import { useUserObjects, useSearchUserObjects } from "../../hooks";
diff --git a/frontend/apps/editor3d/tsconfig.json b/frontend/apps/editor3d/tsconfig.json
index a0ff0895e0..7c29500f6e 100644
--- a/frontend/apps/editor3d/tsconfig.json
+++ b/frontend/apps/editor3d/tsconfig.json
@@ -34,6 +34,9 @@
     {
       "path": "../../libs/components/lightbox-modal"
     },
+    {
+      "path": "../../libs/components/loading-spinner"
+    },
     {
       "path": "../../libs/components/button-icon-select"
     },
@@ -49,9 +52,6 @@
     {
       "path": "../../libs/components/login-modal"
     },
-    {
-      "path": "../../libs/components/popover"
-    },
     {
       "path": "../../libs/soundboard"
     },
@@ -61,6 +61,9 @@
     {
       "path": "../../libs/components/toaster"
     },
+    {
+      "path": "../../libs/components/popover"
+    },
     {
       "path": "../../libs/components/promptbox"
     },
@@ -103,17 +106,23 @@
     {
       "path": "../../libs/components/file-uploader"
     },
+    {
+      "path": "../../libs/components/list-dropdown"
+    },
     {
       "path": "../../libs/components/tooltip"
     },
     {
       "path": "../../libs/components/button"
     },
+    {
+      "path": "../../libs/components/input"
+    },
     {
       "path": "../../libs/components/button-icon"
     },
     {
-      "path": "../../libs/components/input"
+      "path": "../../libs/components/pagination"
     },
     {
       "path": "../../libs/tauri-utils"
diff --git a/frontend/libs/components/button/tsconfig.json b/frontend/libs/components/button/tsconfig.json
index b3d19d8f5e..8d27e65721 100644
--- a/frontend/libs/components/button/tsconfig.json
+++ b/frontend/libs/components/button/tsconfig.json
@@ -2,6 +2,9 @@
   "files": [],
   "include": [],
   "references": [
+    {
+      "path": "../../common"
+    },
     {
       "path": "./tsconfig.lib.json"
     },
diff --git a/frontend/libs/components/button/tsconfig.lib.json b/frontend/libs/components/button/tsconfig.lib.json
index f0782e3dd8..e7270e4b87 100644
--- a/frontend/libs/components/button/tsconfig.lib.json
+++ b/frontend/libs/components/button/tsconfig.lib.json
@@ -41,5 +41,10 @@
     "src/**/*.jsx",
     "src/**/*.ts",
     "src/**/*.tsx"
+  ],
+  "references": [
+    {
+      "path": "../../common/tsconfig.lib.json"
+    }
   ]
 }
diff --git a/frontend/libs/components/input/tsconfig.json b/frontend/libs/components/input/tsconfig.json
index 1c4a081bfc..d3733b6aa3 100644
--- a/frontend/libs/components/input/tsconfig.json
+++ b/frontend/libs/components/input/tsconfig.json
@@ -5,6 +5,9 @@
     {
       "path": "../label"
     },
+    {
+      "path": "../../common"
+    },
     {
       "path": "./tsconfig.lib.json"
     },
diff --git a/frontend/libs/components/input/tsconfig.lib.json b/frontend/libs/components/input/tsconfig.lib.json
index 55d089261c..a1c392f755 100644
--- a/frontend/libs/components/input/tsconfig.lib.json
+++ b/frontend/libs/components/input/tsconfig.lib.json
@@ -45,6 +45,9 @@
   "references": [
     {
       "path": "../label/tsconfig.lib.json"
+    },
+    {
+      "path": "../../common/tsconfig.lib.json"
     }
   ]
 }
diff --git a/frontend/libs/components/pagination/.babelrc b/frontend/libs/components/pagination/.babelrc
new file mode 100644
index 0000000000..1ea870ead4
--- /dev/null
+++ b/frontend/libs/components/pagination/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/frontend/libs/components/pagination/README.md b/frontend/libs/components/pagination/README.md
new file mode 100644
index 0000000000..4c186e34c6
--- /dev/null
+++ b/frontend/libs/components/pagination/README.md
@@ -0,0 +1,7 @@
+# @storyteller/ui-pagination
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @storyteller/ui-pagination` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/frontend/libs/components/pagination/package.json b/frontend/libs/components/pagination/package.json
new file mode 100644
index 0000000000..4ea9cf3e6b
--- /dev/null
+++ b/frontend/libs/components/pagination/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@storyteller/ui-pagination",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  }
+}
diff --git a/frontend/libs/components/pagination/src/index.ts b/frontend/libs/components/pagination/src/index.ts
new file mode 100644
index 0000000000..96a3bc6826
--- /dev/null
+++ b/frontend/libs/components/pagination/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/pagination';
diff --git a/frontend/apps/editor3d/app/src/components/reusable/Pagination/Pagination.tsx b/frontend/libs/components/pagination/src/lib/pagination.tsx
similarity index 100%
rename from frontend/apps/editor3d/app/src/components/reusable/Pagination/Pagination.tsx
rename to frontend/libs/components/pagination/src/lib/pagination.tsx
diff --git a/frontend/libs/components/pagination/tsconfig.json b/frontend/libs/components/pagination/tsconfig.json
new file mode 100644
index 0000000000..c4fc753d76
--- /dev/null
+++ b/frontend/libs/components/pagination/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "../button-icon"
+    },
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}
diff --git a/frontend/libs/components/pagination/tsconfig.lib.json b/frontend/libs/components/pagination/tsconfig.lib.json
new file mode 100644
index 0000000000..7dd6c3db53
--- /dev/null
+++ b/frontend/libs/components/pagination/tsconfig.lib.json
@@ -0,0 +1,50 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "references": [
+    {
+      "path": "../button-icon/tsconfig.lib.json"
+    }
+  ]
+}
diff --git a/frontend/libs/components/pagination/tsconfig.spec.json b/frontend/libs/components/pagination/tsconfig.spec.json
new file mode 100644
index 0000000000..18b7de51b8
--- /dev/null
+++ b/frontend/libs/components/pagination/tsconfig.spec.json
@@ -0,0 +1,34 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}
diff --git a/frontend/libs/components/pagination/vite.config.ts b/frontend/libs/components/pagination/vite.config.ts
new file mode 100644
index 0000000000..6aa5cc77bf
--- /dev/null
+++ b/frontend/libs/components/pagination/vite.config.ts
@@ -0,0 +1,49 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/components/pagination',
+  plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: '@storyteller/ui-pagination',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const]
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react','react-dom','react/jsx-runtime']
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8' as const,
+    }
+  },
+}));
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 339d2a39a7..44ea81f51e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1381,6 +1381,10 @@
       "name": "@storyteller/ui-modal",
       "version": "0.0.1"
     },
+    "libs/components/pagination": {
+      "name": "@storyteller/ui-pagination",
+      "version": "0.0.1"
+    },
     "libs/components/popover": {
       "name": "@storyteller/ui-popover",
       "version": "0.0.1"
@@ -9243,6 +9247,10 @@
       "resolved": "libs/components/modal",
       "link": true
     },
+    "node_modules/@storyteller/ui-pagination": {
+      "resolved": "libs/components/pagination",
+      "link": true
+    },
     "node_modules/@storyteller/ui-popover": {
       "resolved": "libs/components/popover",
       "link": true
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 9ced1e7833..f79b1e2582 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -119,6 +119,9 @@
     },
     {
       "path": "./libs/components/list-dropdown"
+    },
+    {
+      "path": "./libs/components/pagination"
     }
   ]
 }