diff --git a/src/webapp/features/cards/containers/myCardsContainer/MyCardsContainer.tsx b/src/webapp/features/cards/containers/myCardsContainer/MyCardsContainer.tsx
index c00f59f1..f1c7efd8 100644
--- a/src/webapp/features/cards/containers/myCardsContainer/MyCardsContainer.tsx
+++ b/src/webapp/features/cards/containers/myCardsContainer/MyCardsContainer.tsx
@@ -3,10 +3,11 @@
 import { Container, Grid, Stack, Button, Text, Center } from '@mantine/core';
 import useMyCards from '../../lib/queries/useMyCards';
 import UrlCard from '@/features/cards/components/urlCard/UrlCard';
-import AddCardDrawer from '../../components/addCardDrawer/AddCardDrawer';
 import MyCardsContainerError from './Error.MyCardsContainer';
 import MyCardsContainerSkeleton from './Skeleton.MyCardsContainer';
 import { Fragment, useState } from 'react';
+import ProfileEmptyTab from '@/features/profile/components/profileEmptyTab/ProfileEmptyTab';
+import { FaRegNoteSticky } from 'react-icons/fa6';
 
 export default function MyCardsContainer() {
   const {
@@ -18,8 +19,6 @@ export default function MyCardsContainer() {
     isPending,
   } = useMyCards();
 
-  const [showAddDrawer, setShowAddDrawer] = useState(false);
-
   const allCards = data?.pages.flatMap((page) => page.cards ?? []) ?? [];
 
   if (isPending) {
@@ -30,54 +29,47 @@ export default function MyCardsContainer() {
     return <MyCardsContainerError />;
   }
 
+  if (allCards.length === 0) {
+    return (
+      <Container px="xs" py={'xl'} size="xl">
+        <ProfileEmptyTab message="No cards" icon={FaRegNoteSticky} />
+      </Container>
+    );
+  }
+
   return (
     <Container p="xs" size="xl">
       <Stack>
-        {allCards.length > 0 ? (
-          <Fragment>
-            <Grid gutter="md">
-              {allCards.map((card) => (
-                <Grid.Col
-                  key={card.id}
-                  span={{ base: 12, xs: 6, sm: 4, lg: 3 }}
-                >
-                  <UrlCard
-                    id={card.id}
-                    url={card.url}
-                    cardContent={card.cardContent}
-                    note={card.note}
-                    collections={card.collections}
-                  />
-                </Grid.Col>
-              ))}
-            </Grid>
+        <Fragment>
+          <Grid gutter="md">
+            {allCards.map((card) => (
+              <Grid.Col key={card.id} span={{ base: 12, xs: 6, sm: 4, lg: 3 }}>
+                <UrlCard
+                  id={card.id}
+                  url={card.url}
+                  cardContent={card.cardContent}
+                  note={card.note}
+                  collections={card.collections}
+                />
+              </Grid.Col>
+            ))}
+          </Grid>
 
-            {hasNextPage && (
-              <Center>
-                <Button
-                  onClick={() => fetchNextPage()}
-                  disabled={isFetchingNextPage}
-                  loading={isFetchingNextPage}
-                  variant="light"
-                  color="gray"
-                  mt="md"
-                >
-                  Load More
-                </Button>
-              </Center>
-            )}
-          </Fragment>
-        ) : (
-          <Stack align="center" gap="xs">
-            <Text fz="h3" fw={600} c="gray">
-              No cards
-            </Text>
-            <AddCardDrawer
-              isOpen={showAddDrawer}
-              onClose={() => setShowAddDrawer(false)}
-            />
-          </Stack>
-        )}
+          {hasNextPage && (
+            <Center>
+              <Button
+                onClick={() => fetchNextPage()}
+                disabled={isFetchingNextPage}
+                loading={isFetchingNextPage}
+                variant="light"
+                color="gray"
+                mt="md"
+              >
+                Load More
+              </Button>
+            </Center>
+          )}
+        </Fragment>
       </Stack>
     </Container>
   );
diff --git a/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx b/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx
index 28f14bc3..37fcd8f2 100644
--- a/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx
+++ b/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx
@@ -12,6 +12,8 @@ import useCollections from '../../lib/queries/useCollections';
 import CollectionCard from '../../components/collectionCard/CollectionCard';
 import CreateCollectionDrawer from '../../components/createCollectionDrawer/CreateCollectionDrawer';
 import { useState } from 'react';
+import ProfileEmptyTab from '@/features/profile/components/profileEmptyTab/ProfileEmptyTab';
+import { BiCollection } from 'react-icons/bi';
 
 export default function CollectionsContainer() {
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
@@ -22,39 +24,40 @@ export default function CollectionsContainer() {
   const collections =
     data?.pages.flatMap((page) => page.collections ?? []) ?? [];
 
+  if (collections.length === 0) {
+    return (
+      <Container px="xs" py={'xl'} size="xl">
+        <ProfileEmptyTab message="No collections" icon={BiCollection} />
+      </Container>
+    );
+  }
+
   return (
     <Container p="xs" size="xl">
       <Stack>
-        {collections.length > 0 ? (
-          <Stack>
-            <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="md">
-              {collections.map((collection) => (
-                <CollectionCard key={collection.id} collection={collection} />
-              ))}
-            </SimpleGrid>
+        <Stack>
+          <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="md">
+            {collections.map((collection) => (
+              <CollectionCard key={collection.id} collection={collection} />
+            ))}
+          </SimpleGrid>
 
-            {hasNextPage && (
-              <Center>
-                <Button
-                  onClick={() => fetchNextPage()}
-                  disabled={isFetchingNextPage}
-                  loading={isFetchingNextPage}
-                  variant="light"
-                  color="gray"
-                  mt="md"
-                >
-                  Load More
-                </Button>
-              </Center>
-            )}
-          </Stack>
-        ) : (
-          <Stack align="center" gap="xs">
-            <Text fz="h3" fw={600} c="gray">
-              No collections
-            </Text>
-          </Stack>
-        )}
+          {hasNextPage && (
+            <Center>
+              <Button
+                onClick={() => fetchNextPage()}
+                disabled={isFetchingNextPage}
+                loading={isFetchingNextPage}
+                variant="light"
+                color="gray"
+                mt="md"
+              >
+                Load More
+              </Button>
+            </Center>
+          )}
+        </Stack>
+        )
       </Stack>
 
       <CreateCollectionDrawer
diff --git a/src/webapp/features/profile/components/profileEmptyTab/ProfileEmptyTab.tsx b/src/webapp/features/profile/components/profileEmptyTab/ProfileEmptyTab.tsx
new file mode 100644
index 00000000..05def452
--- /dev/null
+++ b/src/webapp/features/profile/components/profileEmptyTab/ProfileEmptyTab.tsx
@@ -0,0 +1,24 @@
+import { Stack, Text, Box } from '@mantine/core';
+import { IconType } from 'react-icons/lib';
+
+interface Props {
+  message: string;
+  icon: IconType;
+  button?: React.ReactElement;
+}
+
+export default function ProfileEmptyTab(props: Props) {
+  return (
+    <Stack align="center" gap="xs">
+      <Stack gap={0} align="center">
+        <Box c={'gray'}>
+          <props.icon size={40} />
+        </Box>
+        <Text fz="lg" fw={600} c="gray">
+          {props.message}
+        </Text>
+      </Stack>
+      {props.button}
+    </Stack>
+  );
+}
diff --git a/src/webapp/features/profile/containers/profileContainer/ProfileContainer.tsx b/src/webapp/features/profile/containers/profileContainer/ProfileContainer.tsx
index d11577c3..00c8050a 100644
--- a/src/webapp/features/profile/containers/profileContainer/ProfileContainer.tsx
+++ b/src/webapp/features/profile/containers/profileContainer/ProfileContainer.tsx
@@ -15,6 +15,9 @@ import {
   Grid,
 } from '@mantine/core';
 import Link from 'next/link';
+import ProfileEmptyTab from '../../components/profileEmptyTab/ProfileEmptyTab';
+import { BiCollection } from 'react-icons/bi';
+import { FaRegNoteSticky } from 'react-icons/fa6';
 
 interface Props {
   handle: string;
@@ -68,11 +71,7 @@ export default function ProfileContainer(props: Props) {
                 ))}
               </Grid>
             ) : (
-              <Stack align="center" gap="xs">
-                <Text fz="h3" fw={600} c="gray">
-                  No cards
-                </Text>
-              </Stack>
+              <ProfileEmptyTab message="No cards" icon={FaRegNoteSticky} />
             )}
           </Stack>
 
@@ -99,11 +98,7 @@ export default function ProfileContainer(props: Props) {
                 ))}
               </SimpleGrid>
             ) : (
-              <Stack align="center" gap="xs">
-                <Text fz="h3" fw={600} c="gray">
-                  No collections
-                </Text>
-              </Stack>
+              <ProfileEmptyTab message="No collections" icon={BiCollection} />
             )}
           </Stack>
         </Stack>