diff --git a/src/webapp/features/cards/components/urlCardActions/UrlCardActions.tsx b/src/webapp/features/cards/components/urlCardActions/UrlCardActions.tsx
index 21750703..fcb6e77d 100644
--- a/src/webapp/features/cards/components/urlCardActions/UrlCardActions.tsx
+++ b/src/webapp/features/cards/components/urlCardActions/UrlCardActions.tsx
@@ -130,7 +130,7 @@ export default function UrlCardActions(props: Props) {
         isOpen={showNoteModal}
         onClose={() => setShowNoteModal(false)}
         note={props.note}
-        urlCardContent={props.cardContent}
+        cardContent={props.cardContent}
         cardAuthor={props.cardAuthor}
       />
 
diff --git a/src/webapp/features/notes/components/noteCardModal/NoteCardModal.tsx b/src/webapp/features/notes/components/noteCardModal/NoteCardModal.tsx
index 61f8a9fc..ccff678a 100644
--- a/src/webapp/features/notes/components/noteCardModal/NoteCardModal.tsx
+++ b/src/webapp/features/notes/components/noteCardModal/NoteCardModal.tsx
@@ -1,30 +1,21 @@
 import type { UrlCard, User } from '@/api-client';
 import { getDomain } from '@/lib/utils/link';
 import { UPDATE_OVERLAY_PROPS } from '@/styles/overlays';
-import {
-  Anchor,
-  AspectRatio,
-  Card,
-  Group,
-  Modal,
-  Stack,
-  Text,
-  Image,
-  Tooltip,
-  Avatar,
-} from '@mantine/core';
-import Link from 'next/link';
+import { Modal, Text } from '@mantine/core';
+import NoteCardModalContent from './NoteCardModalContent';
+import { Suspense } from 'react';
+import NoteCardModalContentSkeleton from './Skeleton.NoteCardModalContent';
 
 interface Props {
   isOpen: boolean;
   onClose: () => void;
   note: UrlCard['note'];
-  urlCardContent: UrlCard['cardContent'];
+  cardContent: UrlCard['cardContent'];
   cardAuthor?: User;
 }
 
 export default function NoteCardModal(props: Props) {
-  const domain = getDomain(props.urlCardContent.url);
+  const domain = getDomain(props.cardContent.url);
 
   return (
     <Modal
@@ -35,66 +26,9 @@ export default function NoteCardModal(props: Props) {
       centered
       onClick={(e) => e.stopPropagation()}
     >
-      <Stack gap={'xs'}>
-        {props.cardAuthor && (
-          <Group gap={5}>
-            <Avatar
-              size={'sm'}
-              component={Link}
-              href={`/profile/${props.cardAuthor.handle}`}
-              target="_blank"
-              src={props.cardAuthor.avatarUrl}
-              alt={`${props.cardAuthor.name}'s' avatar`}
-            />
-            <Anchor
-              component={Link}
-              href={`/profile/${props.cardAuthor.handle}`}
-              target="_blank"
-              fw={700}
-              c="blue"
-              lineClamp={1}
-            >
-              {props.cardAuthor.name}
-            </Anchor>
-          </Group>
-        )}
-        {props.note && <Text fs={'italic'}>{props.note.text}</Text>}
-        <Card withBorder p={'xs'} radius={'lg'}>
-          <Stack>
-            <Group gap={'sm'}>
-              {props.urlCardContent.thumbnailUrl && (
-                <AspectRatio ratio={1 / 1} flex={0.1}>
-                  <Image
-                    src={props.urlCardContent.thumbnailUrl}
-                    alt={`${props.urlCardContent.url} social preview image`}
-                    radius={'md'}
-                    w={50}
-                    h={50}
-                  />
-                </AspectRatio>
-              )}
-              <Stack gap={0} flex={0.9}>
-                <Tooltip label={props.urlCardContent.url}>
-                  <Anchor
-                    component={Link}
-                    href={props.urlCardContent.url}
-                    target="_blank"
-                    c={'gray'}
-                    lineClamp={1}
-                  >
-                    {domain}
-                  </Anchor>
-                </Tooltip>
-                {props.urlCardContent.title && (
-                  <Text fw={500} lineClamp={1}>
-                    {props.urlCardContent.title}
-                  </Text>
-                )}
-              </Stack>
-            </Group>
-          </Stack>
-        </Card>
-      </Stack>
+      <Suspense fallback={<NoteCardModalContentSkeleton />}>
+        <NoteCardModalContent {...props} domain={domain} />
+      </Suspense>
     </Modal>
   );
 }
diff --git a/src/webapp/features/notes/components/noteCardModal/NoteCardModalContent.tsx b/src/webapp/features/notes/components/noteCardModal/NoteCardModalContent.tsx
new file mode 100644
index 00000000..9888d420
--- /dev/null
+++ b/src/webapp/features/notes/components/noteCardModal/NoteCardModalContent.tsx
@@ -0,0 +1,168 @@
+import useGetCardFromMyLibrary from '@/features/cards/lib/queries/useGetCardFromMyLibrary';
+import {
+  Anchor,
+  AspectRatio,
+  Avatar,
+  Card,
+  Group,
+  Stack,
+  Tooltip,
+  Text,
+  Image,
+  Textarea,
+  Button,
+} from '@mantine/core';
+import { UrlCard, User } from '@semble/types';
+import Link from 'next/link';
+import { useState } from 'react';
+import useUpdateNote from '../../lib/mutations/useUpdateNote';
+import { notifications } from '@mantine/notifications';
+
+interface Props {
+  note: UrlCard['note'];
+  cardContent: UrlCard['cardContent'];
+  cardAuthor?: User;
+  domain: string;
+}
+
+export default function NoteCardModalContent(props: Props) {
+  const cardStatus = useGetCardFromMyLibrary({ url: props.cardContent.url });
+  const isMyCard = props.cardAuthor?.id === cardStatus.data.card?.author.id;
+  const [note, setNote] = useState(isMyCard ? props.note?.text : '');
+  const [editMode, setEditMode] = useState(false);
+
+  const updateNote = useUpdateNote();
+
+  const handleUpdateNote = () => {
+    if (!props.note || !note) return;
+
+    updateNote.mutate(
+      {
+        cardId: props.note?.id,
+        note: note,
+      },
+      {
+        onError: () => {
+          notifications.show({
+            message: 'Could not update note.',
+            position: 'top-center',
+          });
+        },
+        onSettled: () => {
+          setEditMode(false);
+        },
+      },
+    );
+  };
+
+  if (editMode) {
+    return (
+      <Stack gap={'xs'}>
+        <Textarea
+          id="note"
+          label="Your note"
+          placeholder="Add a note about this card"
+          variant="filled"
+          size="md"
+          autosize
+          maxRows={8}
+          maxLength={500}
+          value={note}
+          onChange={(e) => setNote(e.currentTarget.value)}
+        />
+        <Group gap={'xs'} grow>
+          <Button
+            variant="light"
+            color="gray"
+            onClick={() => {
+              setEditMode(false);
+              setNote(props.note?.text);
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleUpdateNote}
+            loading={updateNote.isPending}
+            disabled={note?.trimEnd() === ''}
+          >
+            Save
+          </Button>
+        </Group>
+      </Stack>
+    );
+  }
+  return (
+    <Stack gap={'xs'}>
+      {props.cardAuthor && (
+        <Group gap={5}>
+          <Avatar
+            size={'sm'}
+            component={Link}
+            href={`/profile/${props.cardAuthor.handle}`}
+            target="_blank"
+            src={props.cardAuthor.avatarUrl}
+            alt={`${props.cardAuthor.name}'s' avatar`}
+          />
+          <Anchor
+            component={Link}
+            href={`/profile/${props.cardAuthor.handle}`}
+            target="_blank"
+            fw={700}
+            c="blue"
+            lineClamp={1}
+          >
+            {props.cardAuthor.name}
+          </Anchor>
+        </Group>
+      )}
+      {props.note && <Text fs={'italic'}>{props.note.text}</Text>}
+      <Card withBorder component="article" p={'xs'} radius={'lg'}>
+        <Stack>
+          <Group gap={'sm'} justify="space-between">
+            {props.cardContent.thumbnailUrl && (
+              <AspectRatio ratio={1 / 1} flex={0.1}>
+                <Image
+                  src={props.cardContent.thumbnailUrl}
+                  alt={`${props.cardContent.url} social preview image`}
+                  radius={'md'}
+                  w={50}
+                  h={50}
+                />
+              </AspectRatio>
+            )}
+            <Stack gap={0} flex={0.9}>
+              <Tooltip label={props.cardContent.url}>
+                <Anchor
+                  component={Link}
+                  href={props.cardContent.url}
+                  target="_blank"
+                  c={'gray'}
+                  lineClamp={1}
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {props.domain}
+                </Anchor>
+              </Tooltip>
+              {props.cardContent.title && (
+                <Text fw={500} lineClamp={1}>
+                  {props.cardContent.title}
+                </Text>
+              )}
+            </Stack>
+            <Button
+              variant="light"
+              color="gray"
+              onClick={(e) => {
+                e.stopPropagation();
+                setEditMode(true);
+              }}
+            >
+              {note ? 'Edit note' : 'Add note'}
+            </Button>
+          </Group>
+        </Stack>
+      </Card>
+    </Stack>
+  );
+}
diff --git a/src/webapp/features/notes/components/noteCardModal/Skeleton.NoteCardModalContent.tsx b/src/webapp/features/notes/components/noteCardModal/Skeleton.NoteCardModalContent.tsx
new file mode 100644
index 00000000..fe66fba8
--- /dev/null
+++ b/src/webapp/features/notes/components/noteCardModal/Skeleton.NoteCardModalContent.tsx
@@ -0,0 +1,16 @@
+import { Avatar, Group, Skeleton, Stack } from '@mantine/core';
+
+export default function NoteCardModalContentSkeleton() {
+  return (
+    <Stack gap={5}>
+      <Group gap={5}>
+        <Avatar size={'md'} />
+        <Skeleton w={100} h={14} />
+      </Group>
+      {/* Note */}
+      <Skeleton w={'100%'} h={14} />
+      <Skeleton w={'100%'} h={14} />
+      <Skeleton w={'100%'} h={14} />
+    </Stack>
+  );
+}
diff --git a/src/webapp/features/notes/lib/mutations/useUpdateNote.tsx b/src/webapp/features/notes/lib/mutations/useUpdateNote.tsx
index 6189a219..ca8444df 100644
--- a/src/webapp/features/notes/lib/mutations/useUpdateNote.tsx
+++ b/src/webapp/features/notes/lib/mutations/useUpdateNote.tsx
@@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { updateNoteCard } from '../dal';
 import { cardKeys } from '@/features/cards/lib/cardKeys';
 import { collectionKeys } from '@/features/collections/lib/collectionKeys';
+import { feedKeys } from '@/features/feeds/lib/feedKeys';
 
 export default function useUpdateNote() {
   const queryClient = useQueryClient();
@@ -14,6 +15,8 @@ export default function useUpdateNote() {
     onSuccess: (data) => {
       queryClient.invalidateQueries({ queryKey: cardKeys.card(data.cardId) });
       queryClient.invalidateQueries({ queryKey: cardKeys.infinite() });
+      queryClient.invalidateQueries({ queryKey: cardKeys.infinite() });
+      queryClient.invalidateQueries({ queryKey: feedKeys.all() });
       queryClient.invalidateQueries({ queryKey: collectionKeys.all() });
     },
   });