diff --git a/src/webapp/features/collections/components/collectionCard/CollectionCard.module.css b/src/webapp/features/collections/components/collectionCard/CollectionCard.module.css
new file mode 100644
index 00000000..57aa3e6b
--- /dev/null
+++ b/src/webapp/features/collections/components/collectionCard/CollectionCard.module.css
@@ -0,0 +1,3 @@
+.root {
+  cursor: pointer;
+}
diff --git a/src/webapp/features/collections/components/collectionCard/CollectionCard.tsx b/src/webapp/features/collections/components/collectionCard/CollectionCard.tsx
index cd978b8a..d02a1b7d 100644
--- a/src/webapp/features/collections/components/collectionCard/CollectionCard.tsx
+++ b/src/webapp/features/collections/components/collectionCard/CollectionCard.tsx
@@ -4,6 +4,7 @@ import type { Collection } from '@/api-client';
 import { getRecordKey } from '@/lib/utils/atproto';
 import { getRelativeTime } from '@/lib/utils/time';
 import { Avatar, Card, Group, Stack, Text } from '@mantine/core';
+import styles from './CollectionCard.module.css';
 import { useRouter } from 'next/navigation';
 
 interface Props {
@@ -29,7 +30,7 @@ export default function CollectionCard(props: Props) {
       }
       radius={'lg'}
       p={'sm'}
-      style={{ cursor: 'pointer' }}
+      className={styles.root}
     >
       <Stack justify="space-between" h={'100%'}>
         <Stack gap={0}>