diff --git a/frontend/documentation/components/Paging.stories.tsx b/frontend/documentation/components/Paging.stories.tsx
new file mode 100644
index 000000000000..a065d2f1e918
--- /dev/null
+++ b/frontend/documentation/components/Paging.stories.tsx
@@ -0,0 +1,91 @@
+import React from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import Paging from 'components/Paging'
+import Panel from 'components/base/grid/Panel'
+
+const meta: Meta = {
+  parameters: {
+    chromatic: { disableSnapshot: false },
+    docs: {
+      description: {
+        component:
+          'Pagination controls used by paginated lists (identities, audit log, change requests, etc.). Renders previous/next arrows, the page numbers around the current page, and the "x-y of n" summary.',
+      },
+    },
+    layout: 'padded',
+  },
+  title: 'Components/Patterns/Paging',
+}
+export default meta
+
+type Story = StoryObj
+
+const noop = () => undefined
+
+const paging = {
+  count: 45,
+  currentPage: 3,
+  next: 'next',
+  pageSize: 10,
+  previous: 'previous',
+}
+
+export const Default: Story = {
+  render: () => (
+    <Paging goToPage={noop} nextPage={noop} paging={paging} prevPage={noop} />
+  ),
+}
+
+export const InsidePanel: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Paging as rendered at the bottom of a list panel, e.g. the identities tab. Switch the toolbar theme to dark to check the arrows stay visible.',
+      },
+    },
+  },
+  render: () => (
+    <Panel title='Identities'>
+      <p className='mb-0'>List content</p>
+      <Paging goToPage={noop} nextPage={noop} paging={paging} prevPage={noop} />
+    </Panel>
+  ),
+}
+
+export const FirstPage: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'On the first page the previous arrow is disabled.',
+      },
+    },
+  },
+  render: () => (
+    <Panel title='Identities'>
+      <p className='mb-0'>List content</p>
+      <Paging
+        goToPage={noop}
+        nextPage={noop}
+        paging={{ ...paging, currentPage: 1, previous: null }}
+        prevPage={noop}
+      />
+    </Panel>
+  ),
+}
+
+export const Loading: Story = {
+  render: () => (
+    <Panel title='Identities'>
+      <p className='mb-0'>List content</p>
+      <Paging
+        goToPage={noop}
+        isLoading
+        nextPage={noop}
+        paging={paging}
+        prevPage={noop}
+      />
+    </Panel>
+  ),
+}
diff --git a/frontend/web/styles/components/_paging.scss b/frontend/web/styles/components/_paging.scss
index 8c7320373ff6..722d838e5fef 100644
--- a/frontend/web/styles/components/_paging.scss
+++ b/frontend/web/styles/components/_paging.scss
@@ -23,11 +23,11 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		border: 1px solid $hr-border-color;
+		border: 1px solid var(--color-border-default);
 		text-align: center;
 		padding: 0;
 		background: transparent;
-		color: $text-icon-grey;
+		color: var(--color-icon-secondary);
 		&:hover {
 			color: $primary;
 		}
diff --git a/frontend/web/styles/components/_panel.scss b/frontend/web/styles/components/_panel.scss
index 4ecab1cb380a..0230a867a317 100644
--- a/frontend/web/styles/components/_panel.scss
+++ b/frontend/web/styles/components/_panel.scss
@@ -72,9 +72,6 @@
 }
 .dark {
   .panel {
-    .icon {
-      color: $hr-border-color;
-    }
     .panel-content {
       background-color: transparent;
       .search-list {