diff --git a/src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.tsx b/src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.tsx
index fb603dfb..24fed9a6 100644
--- a/src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.tsx
+++ b/src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.tsx
@@ -6,6 +6,7 @@ import styles from './CollectionNavItem.module.css';
 import { isMarginUri } from '@/lib/utils/margin';
 import MarginLogo from '@/components/MarginLogo';
 import { CollectionAccessType } from '@semble/types';
+import { abbreviateNumber } from '@/lib/utils/text';
 
 interface Props {
   name: string;
@@ -41,6 +42,7 @@ export default function CollectionNavItem(props: Props) {
       rightSection={
         props.cardCount > 0 ? (
           <Badge
+            fullWidth
             className={
               isActive
                 ? isOpenCollection
@@ -48,9 +50,8 @@ export default function CollectionNavItem(props: Props) {
                   : styles.badgeActive
                 : styles.badge
             }
-            circle
           >
-            {props.cardCount}
+            {abbreviateNumber(props.cardCount)}
           </Badge>
         ) : null
       }
diff --git a/src/webapp/features/collections/components/collectionsNavList/CollectionsNavList.tsx b/src/webapp/features/collections/components/collectionsNavList/CollectionsNavList.tsx
index 7de3b635..b1898e99 100644
--- a/src/webapp/features/collections/components/collectionsNavList/CollectionsNavList.tsx
+++ b/src/webapp/features/collections/components/collectionsNavList/CollectionsNavList.tsx
@@ -1,63 +1,105 @@
 'use client';
 
 import Link from 'next/link';
-import { NavLink, Stack } from '@mantine/core';
-import { BiCollection, BiRightArrowAlt } from 'react-icons/bi';
+import { ActionIcon, Group, NavLink, Stack, Text } from '@mantine/core';
+import { BiRightArrowAlt } from 'react-icons/bi';
 import CollectionNavItem from '../collectionNavItem/CollectionNavItem';
 import useMyCollections from '../../lib/queries/useMyCollections';
-import { useToggle } from '@mantine/hooks';
 import CollectionsNavListError from './Error.CollectionsNavList';
 import CreateCollectionShortcut from '../createCollectionShortcut/CreateCollectionShortcut';
 import useMyProfile from '@/features/profile/lib/queries/useMyProfile';
 import { getRecordKey } from '@/lib/utils/atproto';
 import { useNavbarContext } from '@/providers/navbar';
+import useFollowingCollections from '@/features/follows/lib/queries/useFollowingCollections';
 
 export default function CollectionsNavList() {
   const { toggleMobile } = useNavbarContext();
   const { data, error } = useMyCollections({ limit: 30 });
-  const { data: profile } = useMyProfile();
-  const [opened, toggleMenu] = useToggle([true, false]);
+  const { data: profile, error: profileError } = useMyProfile();
+  const { data: followingCollections, error: errorFollowingCollections } =
+    useFollowingCollections({ identifier: profile.handle, limit: 30 });
 
-  if (error) {
+  if (error || errorFollowingCollections || profileError) {
     return <CollectionsNavListError />;
   }
 
   const collections =
     data?.pages.flatMap((page) => page.collections ?? []) ?? [];
 
+  const followedCollections =
+    followingCollections?.pages.flatMap((page) => page.collections ?? []) ?? [];
+
   return (
-    <NavLink
-      variant="subtle"
-      c="gray"
-      label="Collections"
-      leftSection={<BiCollection size={22} />}
-      opened={opened}
-      onClick={() => toggleMenu()}
-    >
-      <CreateCollectionShortcut />
-
-      <NavLink
-        component={Link}
-        href={`/profile/${profile.handle}/collections`}
-        label="View all"
-        variant="subtle"
-        c="blue"
-        leftSection={<BiRightArrowAlt size={25} />}
-        onClick={toggleMobile}
-      />
+    <Stack gap={'xs'}>
+      <Group justify="space-between">
+        <Text fw={600} c={'gray'}>
+          Collections
+        </Text>
+
+        <Group gap={'xs'}>
+          <ActionIcon
+            component={Link}
+            href={`/profile/${profile.handle}/collections`}
+            variant="light"
+            radius={'xl'}
+            color="blue"
+            onClick={toggleMobile}
+          >
+            <BiRightArrowAlt size={18} />
+          </ActionIcon>
+          <CreateCollectionShortcut />
+        </Group>
+      </Group>
 
       <Stack gap={0}>
-        {collections.map((collection) => (
-          <CollectionNavItem
-            key={collection.id}
-            name={collection.name}
-            url={`/profile/${collection.author.handle}/collections/${getRecordKey(collection.uri!!)}`}
-            cardCount={collection.cardCount}
-            accessType={collection.accessType}
-            uri={collection.uri}
-          />
-        ))}
+        <NavLink label="My Collections" c={'gray'}>
+          <Stack gap={0}>
+            {collections.map((collection) => (
+              <CollectionNavItem
+                key={collection.id}
+                name={collection.name}
+                url={`/profile/${collection.author.handle}/collections/${getRecordKey(collection.uri!!)}`}
+                cardCount={collection.cardCount}
+                accessType={collection.accessType}
+                uri={collection.uri}
+              />
+            ))}
+            <NavLink
+              component={Link}
+              href={`/profile/${profile.handle}/collections`}
+              label="View all"
+              variant="subtle"
+              c="blue"
+              leftSection={<BiRightArrowAlt size={25} />}
+              onClick={toggleMobile}
+            />
+          </Stack>
+        </NavLink>
+
+        <NavLink label="Following" c={'gray'}>
+          <Stack gap={0}>
+            {followedCollections.map((collection) => (
+              <CollectionNavItem
+                key={collection.id}
+                name={collection.name}
+                url={`/profile/${collection.author.handle}/collections/${getRecordKey(collection.uri!!)}`}
+                cardCount={collection.cardCount}
+                accessType={collection.accessType}
+                uri={collection.uri}
+              />
+            ))}
+            <NavLink
+              component={Link}
+              href={`/profile/${profile.handle}/network/collections-following`}
+              label="View all"
+              variant="subtle"
+              c="blue"
+              leftSection={<BiRightArrowAlt size={25} />}
+              onClick={toggleMobile}
+            />
+          </Stack>
+        </NavLink>
       </Stack>
-    </NavLink>
+    </Stack>
   );
 }
diff --git a/src/webapp/features/collections/components/createCollectionShortcut/CreateCollectionShortcut.tsx b/src/webapp/features/collections/components/createCollectionShortcut/CreateCollectionShortcut.tsx
index 9b386cd0..8db5b83d 100644
--- a/src/webapp/features/collections/components/createCollectionShortcut/CreateCollectionShortcut.tsx
+++ b/src/webapp/features/collections/components/createCollectionShortcut/CreateCollectionShortcut.tsx
@@ -1,4 +1,4 @@
-import { NavLink } from '@mantine/core';
+import { ActionIcon, Button, NavLink } from '@mantine/core';
 import { Fragment, useState } from 'react';
 import { FiPlus } from 'react-icons/fi';
 import CreateCollectionDrawer from '@/features/collections/components/createCollectionDrawer/CreateCollectionDrawer';
@@ -8,14 +8,14 @@ export default function CreateCollectionShortcut() {
 
   return (
     <Fragment>
-      <NavLink
-        component="button"
-        label={'Create'}
-        variant="subtle"
-        c="blue"
-        leftSection={<FiPlus size={25} />}
+      <ActionIcon
+        variant="light"
+        radius={'xl'}
+        color="blue"
         onClick={() => setIsDrawerOpen(true)}
-      />
+      >
+        <FiPlus size={18} />
+      </ActionIcon>
       <CreateCollectionDrawer
         isOpen={isDrawerOpen}
         onClose={() => setIsDrawerOpen(false)}