diff --git a/src/webapp/app/(authenticated)/collections/error.tsx b/src/webapp/app/(authenticated)/collections/error.tsx
new file mode 100644
index 00000000..31082250
--- /dev/null
+++ b/src/webapp/app/(authenticated)/collections/error.tsx
@@ -0,0 +1,7 @@
+'use client';
+
+import CollectionsContainerError from '@/features/collections/containers/collectionsContainer/Error.CollectionsContainer';
+
+export default function Error() {
+  return <CollectionsContainerError />;
+}
diff --git a/src/webapp/app/(authenticated)/collections/loading.tsx b/src/webapp/app/(authenticated)/collections/loading.tsx
new file mode 100644
index 00000000..723c0214
--- /dev/null
+++ b/src/webapp/app/(authenticated)/collections/loading.tsx
@@ -0,0 +1,5 @@
+import CollectionsContainerSkeleton from '@/features/collections/containers/collectionsContainer/Skeleton.CollectionsContainer';
+
+export default function Loading() {
+  return <CollectionsContainerSkeleton />;
+}
diff --git a/src/webapp/components/navigation/navbar/Navbar.tsx b/src/webapp/components/navigation/navbar/Navbar.tsx
index 0ea439bf..307e2220 100644
--- a/src/webapp/components/navigation/navbar/Navbar.tsx
+++ b/src/webapp/components/navigation/navbar/Navbar.tsx
@@ -16,6 +16,8 @@ import { FaRegNoteSticky } from 'react-icons/fa6';
 import Link from 'next/link';
 import SembleLogo from '@/assets/semble-logo.svg';
 import ProfileMenu from '@/features/profile/components/profileMenu/ProfileMenu';
+import { Suspense } from 'react';
+import CollectionsNavListSkeleton from '@/features/collections/components/collectionsNavList/Skeleton.CollectionsNavList';
 
 export default function Navbar() {
   return (
@@ -47,7 +49,9 @@ export default function Navbar() {
         </Stack>
 
         <Divider my={'sm'} />
-        <CollectionsNavList />
+        <Suspense fallback={<CollectionsNavListSkeleton />}>
+          <CollectionsNavList />
+        </Suspense>
       </AppShellSection>
     </AppShellNavbar>
   );
diff --git a/src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.tsx b/src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.tsx
index 5d02008b..313f6f70 100644
--- a/src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.tsx
+++ b/src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.tsx
@@ -1,5 +1,4 @@
 import { Badge, NavLink } from '@mantine/core';
-import { BsDot } from 'react-icons/bs';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
@@ -19,8 +18,7 @@ export default function CollectionNavItem(props: Props) {
       href={props.url}
       label={props.name}
       variant="subtle"
-      c={isActive ? 'dark' : 'gray'}
-      leftSection={<BsDot size={25} />}
+      c={isActive ? 'dark' : 'gray'}      
       rightSection={
         props.cardCount > 0 ? (
           <Badge variant="light" color="gray" circle>
diff --git a/src/webapp/features/collections/components/collectionsNavList/CollectionsNavList.tsx b/src/webapp/features/collections/components/collectionsNavList/CollectionsNavList.tsx
index 21b0ec70..87e85a6a 100644
--- a/src/webapp/features/collections/components/collectionsNavList/CollectionsNavList.tsx
+++ b/src/webapp/features/collections/components/collectionsNavList/CollectionsNavList.tsx
@@ -1,20 +1,17 @@
 import Link from 'next/link';
-import { Alert, NavLink, Skeleton, Stack } from '@mantine/core';
+import { Alert, NavLink, Stack } from '@mantine/core';
 import { BiCollection, BiPlus, BiRightArrowAlt } from 'react-icons/bi';
 import CollectionNavItem from '../collectionNavItem/CollectionNavItem';
 import useCollections from '../../lib/queries/useCollections';
 import { useToggle } from '@mantine/hooks';
+import CollectionsNavListError from './Error.CollectionsNavList';
 
 export default function CollectionsNavList() {
-  const { data, error, isPending } = useCollections();
+  const { data, error } = useCollections();
   const [opened, toggleMenu] = useToggle([true, false]);
 
-  if (isPending || !data) {
-    return <Skeleton h={40} w={'100%'} />;
-  }
-
   if (error) {
-    return <Alert color="red" title="Could not load collections" />;
+    return <CollectionsNavListError />;
   }
 
   return (
diff --git a/src/webapp/features/collections/components/collectionsNavList/Error.CollectionsNavList.tsx b/src/webapp/features/collections/components/collectionsNavList/Error.CollectionsNavList.tsx
new file mode 100644
index 00000000..88b24c9e
--- /dev/null
+++ b/src/webapp/features/collections/components/collectionsNavList/Error.CollectionsNavList.tsx
@@ -0,0 +1,5 @@
+import { Alert } from '@mantine/core';
+
+export default function CollectionsNavListError() {
+  return <Alert color="red" title="Could not load collections" />;
+}
diff --git a/src/webapp/features/collections/components/collectionsNavList/Skeleton.CollectionsNavList.tsx b/src/webapp/features/collections/components/collectionsNavList/Skeleton.CollectionsNavList.tsx
new file mode 100644
index 00000000..e7c18e94
--- /dev/null
+++ b/src/webapp/features/collections/components/collectionsNavList/Skeleton.CollectionsNavList.tsx
@@ -0,0 +1,5 @@
+import { Skeleton } from '@mantine/core';
+
+export default function CollectionsNavListSkeleton() {
+  return <Skeleton h={40} w={'100%'} />;
+}
diff --git a/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx b/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx
index 9f204287..9d8520ca 100644
--- a/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx
+++ b/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx
@@ -6,8 +6,6 @@ import {
   Stack,
   Title,
   Text,
-  Loader,
-  Alert,
   SimpleGrid,
 } from '@mantine/core';
 import useCollections from '../../lib/queries/useCollections';
@@ -16,30 +14,20 @@ import { BiPlus } from 'react-icons/bi';
 import CollectionCard from '../../components/collectionCard/CollectionCard';
 
 export default function CollectionsContainer() {
-  const { data, error, isPending } = useCollections();
+  const { data } = useCollections();
 
   return (
     <Container p={'xs'} fluid>
       <Stack>
         <Title order={1}>Collections</Title>
-
-        {(isPending || !data) && <Loader />}
-        {error && (
-          <Alert
-            variant="white"
-            color="red"
-            title="Could not load collections"
-          />
-        )}
         <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing={'md'}>
-          {data &&
-            data.collections &&
+          {data.collections &&
             data.collections.length > 0 &&
             data.collections.map((c) => (
               <CollectionCard key={c.id} collection={c} />
             ))}
         </SimpleGrid>
-        {data && data.collections.length === 0 && (
+        {data.collections.length === 0 && (
           <Stack align="center" gap={'xs'}>
             <Text fz={'h3'} fw={600} c={'gray'}>
               No collections
diff --git a/src/webapp/features/collections/containers/collectionsContainer/Error.CollectionsContainer.tsx b/src/webapp/features/collections/containers/collectionsContainer/Error.CollectionsContainer.tsx
new file mode 100644
index 00000000..0626b224
--- /dev/null
+++ b/src/webapp/features/collections/containers/collectionsContainer/Error.CollectionsContainer.tsx
@@ -0,0 +1,7 @@
+import { Alert } from '@mantine/core';
+
+export default function CollectionsContainerError() {
+  return (
+    <Alert variant="white" color="red" title="Could not load collections" />
+  );
+}
diff --git a/src/webapp/features/collections/containers/collectionsContainer/Skeleton.CollectionsContainer.tsx b/src/webapp/features/collections/containers/collectionsContainer/Skeleton.CollectionsContainer.tsx
new file mode 100644
index 00000000..15ab4b33
--- /dev/null
+++ b/src/webapp/features/collections/containers/collectionsContainer/Skeleton.CollectionsContainer.tsx
@@ -0,0 +1,5 @@
+import { Loader } from '@mantine/core';
+
+export default function CollectionsContainerSkeleton() {
+  return <Loader />;
+}
diff --git a/src/webapp/features/collections/lib/queries/useCollections.tsx b/src/webapp/features/collections/lib/queries/useCollections.tsx
index e24d2507..56cfe6d0 100644
--- a/src/webapp/features/collections/lib/queries/useCollections.tsx
+++ b/src/webapp/features/collections/lib/queries/useCollections.tsx
@@ -1,6 +1,6 @@
 import { ApiClient } from '@/api-client/ApiClient';
 import { getAccessToken } from '@/services/auth';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 
 export default function useCollections() {
   const apiClient = new ApiClient(
@@ -8,16 +8,10 @@ export default function useCollections() {
     () => getAccessToken(),
   );
 
-  const { data, error, isPending } = useQuery({
+  const collections = useSuspenseQuery({
     queryKey: ['collections'],
-    queryFn: async () => {
-      const collections = await apiClient.getMyCollections({ limit: 50 });
-      if (!collections) {
-        throw new Error('Could not get collections');
-      }
-      return collections;
-    },
+    queryFn: () => apiClient.getMyCollections({ limit: 50 }),
   });
 
-  return { data, error, isPending };
+  return collections;
 }