diff --git a/src/renderer/components/index.ts b/src/renderer/components/index.ts
index 04d1612c..0072f9ad 100644
--- a/src/renderer/components/index.ts
+++ b/src/renderer/components/index.ts
@@ -1,30 +1,31 @@
-export * from './tooltip';
-export * from './audio-player';
-export * from './text';
-export * from './button';
-export * from './virtual-grid';
-export * from './modal';
-export * from './input';
-export * from './segmented-control';
-export * from './dropdown-menu';
-export * from './toast';
-export * from './switch';
-export * from './popover';
-export * from './select';
-export * from './date-picker';
-export * from './scroll-area';
-export * from './paper';
-export * from './tabs';
-export * from './slider';
 export * from './accordion';
-export * from './dropzone';
-export * from './spinner';
-export * from './virtual-table';
-export * from './skeleton';
-export * from './page-header';
-export * from './text-title';
-export * from './grid-carousel';
-export * from './card';
-export * from './feature-carousel';
+export * from './audio-player';
 export * from './badge';
+export * from './button';
+export * from './card';
+export * from './date-picker';
+export * from './dropdown-menu';
+export * from './dropzone';
+export * from './feature-carousel';
+export * from './grid-carousel';
+export * from './input';
+export * from './modal';
+export * from './page-header';
+export * from './pagination';
+export * from './paper';
+export * from './popover';
+export * from './scroll-area';
 export * from './search-input';
+export * from './segmented-control';
+export * from './select';
+export * from './skeleton';
+export * from './slider';
+export * from './spinner';
+export * from './switch';
+export * from './tabs';
+export * from './text';
+export * from './text-title';
+export * from './toast';
+export * from './tooltip';
+export * from './virtual-grid';
+export * from './virtual-table';
diff --git a/src/renderer/components/pagination/index.tsx b/src/renderer/components/pagination/index.tsx
new file mode 100644
index 00000000..21bc4e30
--- /dev/null
+++ b/src/renderer/components/pagination/index.tsx
@@ -0,0 +1,40 @@
+import { Pagination as MantinePagination, PaginationProps } from '@mantine/core';
+import styled from 'styled-components';
+
+const StyledPagination = styled(MantinePagination)`
+  & .mantine-Pagination-item {
+    color: var(--btn-default-fg);
+    background-color: var(--btn-default-bg);
+    border: none;
+    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+
+    &:hover {
+      color: var(--btn-default-fg-hover);
+      background-color: var(--btn-default-bg-hover);
+    }
+
+    &[data-active] {
+      color: var(--btn-primary-fg);
+      background-color: var(--btn-primary-bg);
+    }
+
+    &:hover &[data-active] {
+      color: var(--btn-primary-fg-hover);
+      background-color: var(--btn-primary-bg-hover);
+    }
+
+    &[data-dots] {
+      background-color: transparent;
+    }
+  }
+`;
+
+export const Pagination = ({ ...props }: PaginationProps) => {
+  return (
+    <StyledPagination
+      radius="xl"
+      size="md"
+      {...props}
+    />
+  );
+};