diff --git a/src/webapp/app/(authenticated)/collections/[collectionId]/page.tsx b/src/webapp/app/(authenticated)/collections/[collectionId]/page.tsx
index 140c5c28..61605495 100644
--- a/src/webapp/app/(authenticated)/collections/[collectionId]/page.tsx
+++ b/src/webapp/app/(authenticated)/collections/[collectionId]/page.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import { getAccessToken } from '@/services/auth';
 import { ApiClient } from '@/api-client/ApiClient';
-import { UrlCard } from '@/components/UrlCard';
+
 import type { GetCollectionPageResponse } from '@/api-client/types';
 import {
   Button,
@@ -17,6 +17,7 @@ import {
   Box,
   SimpleGrid,
 } from '@mantine/core';
+import UrlCard from '@/features/cards/components/urlCard/UrlCard';
 
 export default function CollectionPage() {
   const [collection, setCollection] =
@@ -130,14 +131,10 @@ export default function CollectionPage() {
                 {collection.urlCards.map((card) => (
                   <UrlCard
                     key={card.id}
-                    cardId={card.id}
+                    id={card.id}
                     url={card.url}
-                    title={card.cardContent.title}
-                    description={card.cardContent.description}
-                    author={card.cardContent.author}
-                    imageUrl={card.cardContent.thumbnailUrl}
-                    addedAt={card.createdAt}
-                    note={card.note?.text}
+                    cardContent={card.cardContent}
+                    note={card.note}
                   />
                 ))}
               </SimpleGrid>
diff --git a/src/webapp/app/(authenticated)/library/page.tsx b/src/webapp/app/(authenticated)/library/page.tsx
index b581be19..f4a6eceb 100644
--- a/src/webapp/app/(authenticated)/library/page.tsx
+++ b/src/webapp/app/(authenticated)/library/page.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState, useMemo, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import { ApiClient } from '@/api-client/ApiClient';
 import { getAccessToken } from '@/services/auth';
-import { UrlCard } from '@/components/UrlCard';
+import UrlCard from '@/features/cards/components/urlCard/UrlCard';
 import type { GetMyUrlCardsResponse } from '@/api-client/types';
 import {
   Button,
@@ -62,18 +62,18 @@ export default function DashboardPage() {
         {cardsLoading ? (
           <Loader />
         ) : urlCards.length > 0 ? (
-          <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing={'md'}>
+          <SimpleGrid
+            cols={{ base: 1, xs: 2, sm: 3, lg: 4, xl: 5 }}
+            spacing={'md'}
+          >
             {urlCards.map((card) => (
               <UrlCard
                 key={card.id}
-                cardId={card.id}
+                id={card.id}
                 url={card.url}
-                title={card.cardContent.title}
-                description={card.cardContent.description}
-                author={card.cardContent.author}
-                imageUrl={card.cardContent.thumbnailUrl}
-                addedAt={card.createdAt}
-                note={card.note?.text}
+                cardContent={card.cardContent}
+                note={card.note}
+                collections={card.collections}
               />
             ))}
           </SimpleGrid>
diff --git a/src/webapp/components/FeedItem.tsx b/src/webapp/components/FeedItem.tsx
index 1cdeb2bb..14f20b8e 100644
--- a/src/webapp/components/FeedItem.tsx
+++ b/src/webapp/components/FeedItem.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import { UrlCard } from './UrlCard';
+import { UrlCard } from './UrlCardOld';
 import type { FeedItem as FeedItemType } from '@/api-client/types';
-import { Stack, Text, Group, Anchor, Box } from '@mantine/core';
+import { Stack, Text, Anchor, Box } from '@mantine/core';
 
 interface FeedItemProps {
   item: FeedItemType;
diff --git a/src/webapp/components/UrlCard.tsx b/src/webapp/components/UrlCardOld.tsx
similarity index 100%
rename from src/webapp/components/UrlCard.tsx
rename to src/webapp/components/UrlCardOld.tsx
diff --git a/src/webapp/features/cards/components/urlCard/UrlCard.tsx b/src/webapp/features/cards/components/urlCard/UrlCard.tsx
new file mode 100644
index 00000000..b1f9bd13
--- /dev/null
+++ b/src/webapp/features/cards/components/urlCard/UrlCard.tsx
@@ -0,0 +1,87 @@
+import { UrlCardView } from '@/api-client/types';
+import { AddToCollectionModal } from '@/components/AddToCollectionModal';
+import NoteCard from '@/features/notes/components/noteCard/NoteCard';
+import { getDomain } from '@/lib/utils/link';
+import {
+  Card,
+  Image,
+  Text,
+  Stack,
+  Group,
+  ActionIcon,
+  Anchor,
+  AspectRatio,
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import Link from 'next/link';
+import { BiPlus } from 'react-icons/bi';
+
+interface Props {
+  size?: 'large' | 'compact' | 'small';
+  id: string;
+  url: string;
+  cardContent: UrlCardView['cardContent'];
+  note?: UrlCardView['note'];
+  collections?: UrlCardView['collections'];
+  libraries?: UrlCardView['libraries'];
+}
+
+export default function UrlCard(props: Props) {
+  const domain = getDomain(props.url);
+  const [modalOpened, { open, close }] = useDisclosure(false);
+  // TODO: add more sizes
+
+  return (
+    <Stack component="article" gap={5} justify="stretch">
+      <Card withBorder radius={'lg'} p={'sm'} flex={1}>
+        <Stack justify="space-between" gap={'sm'} flex={1}>
+          <Group justify="space-between" align="start" wrap="nowrap" gap={'lg'}>
+            <Stack gap={0}>
+              <Anchor
+                component={Link}
+                href={props.url}
+                target="_blank"
+                c={'gray'}
+                lineClamp={1}
+              >
+                {domain}
+              </Anchor>
+              {props.cardContent.title && (
+                <Text fw={500} lineClamp={1}>
+                  {props.cardContent.title}
+                </Text>
+              )}
+            </Stack>
+            {props.cardContent.thumbnailUrl && (
+              <AspectRatio ratio={1 / 1}>
+                <Image
+                  src={props.cardContent.thumbnailUrl}
+                  alt={`${props.url} social preview image`}
+                  radius={'md'}
+                  w={75}
+                  h={75}
+                />
+              </AspectRatio>
+            )}
+          </Group>
+          <Group justify="space-between">
+            <ActionIcon
+              variant="subtle"
+              color={'gray'}
+              radius={'xl'}
+              onClick={open}
+            >
+              <BiPlus size={22} />
+            </ActionIcon>
+          </Group>
+        </Stack>
+      </Card>
+      {props.note && <NoteCard note={props.note.text} />}
+      <AddToCollectionModal
+        cardId={props.id}
+        isOpen={modalOpened}
+        onClose={close}
+      />
+    </Stack>
+  );
+}
diff --git a/src/webapp/features/collections/components/collectionCard/CollectionCard.tsx b/src/webapp/features/collections/components/collectionCard/CollectionCard.tsx
index b9aecbe5..fd1be651 100644
--- a/src/webapp/features/collections/components/collectionCard/CollectionCard.tsx
+++ b/src/webapp/features/collections/components/collectionCard/CollectionCard.tsx
@@ -38,7 +38,7 @@ export default function CollectionCard(props: Props) {
     >
       <Stack justify="space-between" h={'100%'}>
         <Stack gap={0}>
-          <Text fw={600} fz={'lg'} lineClamp={1}>
+          <Text fw={500} lineClamp={1}>
             {collection.name}
           </Text>
           {collection.description && (
@@ -49,7 +49,9 @@ export default function CollectionCard(props: Props) {
         </Stack>
         <Group justify="space-between">
           <Text c={'gray'}>
-            {collection.cardCount} · {relativeUpdateDate}
+            {collection.cardCount}{' '}
+            {collection.cardCount === 1 ? 'card' : 'cards'} ·{' '}
+            {relativeUpdateDate}
           </Text>
           <Anchor
             component={Link}
diff --git a/src/webapp/features/notes/components/noteCard/NoteCard.tsx b/src/webapp/features/notes/components/noteCard/NoteCard.tsx
new file mode 100644
index 00000000..eee0e757
--- /dev/null
+++ b/src/webapp/features/notes/components/noteCard/NoteCard.tsx
@@ -0,0 +1,17 @@
+import { Card, Spoiler, Text } from '@mantine/core';
+
+interface Props {
+  note: string;
+}
+
+export default function NoteCard(props: Props) {
+  return (
+    <Card bg={'#E5E8E7'} p={'sm'}>
+      <Spoiler showLabel={'Read more'} hideLabel={'See less'} maxHeight={45}>
+        <Text fz={'sm'} c={'#74867F'}>
+          {props.note}
+        </Text>
+      </Spoiler>
+    </Card>
+  );
+}
diff --git a/src/webapp/lib/utils/link.ts b/src/webapp/lib/utils/link.ts
new file mode 100644
index 00000000..8f0b7d15
--- /dev/null
+++ b/src/webapp/lib/utils/link.ts
@@ -0,0 +1,3 @@
+export const getDomain = (url: string) => {
+  return new URL(url).hostname;
+};