diff --git a/app/client/main.css b/app/client/main.css
index 78eb75f..77ce178 100644
--- a/app/client/main.css
+++ b/app/client/main.css
@@ -82,12 +82,17 @@ input:focus {
 
 @layer base {
   /* atoms */
-  input {
+  input,
+  textarea {
     @apply bg-gray-100 p-1 text-sm min-w-0 max-w-full rounded-sm;
   }
-  input:focus {
+  input:focus,
+  textarea:focus {
     @apply outline-1 outline-gray-500;
   }
+  textarea {
+    @apply resize-y min-h-12;
+  }
   hr {
     @apply border-gray-300;
   }
diff --git a/app/imports/api/bookmarkItems.js b/app/imports/api/bookmarkItems.js
index da4991b..09c5442 100644
--- a/app/imports/api/bookmarkItems.js
+++ b/app/imports/api/bookmarkItems.js
@@ -48,7 +48,7 @@ export const BookmarkItemSchema = new SimpleSchema({
   },
   tags: { type: Array, optional: true },
   'tags.$': String,
-  note: { type: String, optional: true, trim: true },
+  note: { type: String, optional: true, trim: true, max: 500 },
   is_archived: { type: Boolean, optional: true, defaultValue: false },
   userId: { type: String },
 });
@@ -62,6 +62,7 @@ export const BookmarkItemUpdateSchema = new SimpleSchema({
   },
   tags: { type: Array, optional: true },
   'tags.$': String,
+  note: { type: String, optional: true, trim: true, max: 500 },
 });
 
 export async function insertBookmarkItem(doc = {}, userId) {
@@ -117,10 +118,10 @@ Meteor.methods({
     }
   },
 
-  async updateBookmarkItem({ _id, title, url, tags } = {}) {
+  async updateBookmarkItem({ _id, title, url, tags, note } = {}) {
     if (!this.userId) {
       throw new Meteor.Error('not-authorized');
     }
-    return updateBookmarkItem({ _id, title, url, tags }, this.userId);
+    return updateBookmarkItem({ _id, title, url, tags, note }, this.userId);
   },
 });
diff --git a/app/imports/ui/BookmarkEditDrawer.jsx b/app/imports/ui/BookmarkEditDrawer.jsx
index 0bfd76c..a577575 100644
--- a/app/imports/ui/BookmarkEditDrawer.jsx
+++ b/app/imports/ui/BookmarkEditDrawer.jsx
@@ -11,6 +11,7 @@ export const BookmarkEditDrawer = ({ bookmarkItem, onClose }) => {
   const [title, setTitle] = useState('');
   const [url, setUrl] = useState('');
   const [tags, setTags] = useState([]);
+  const [note, setNote] = useState('');
   const [urlError, setUrlError] = useState('');
   const [submitError, setSubmitError] = useState('');
   const [submitting, setSubmitting] = useState(false);
@@ -20,6 +21,7 @@ export const BookmarkEditDrawer = ({ bookmarkItem, onClose }) => {
     setTitle(bookmarkItem.title || '');
     setUrl(bookmarkItem.url || '');
     setTags(bookmarkItem.tags || []);
+    setNote(bookmarkItem.note || '');
     setUrlError('');
     setSubmitError('');
     setSubmitting(false);
@@ -49,6 +51,7 @@ export const BookmarkEditDrawer = ({ bookmarkItem, onClose }) => {
         title,
         url: url.trim(),
         tags,
+        note: note.trim(),
       },
       (error) => {
         setSubmitting(false);
@@ -112,6 +115,17 @@ export const BookmarkEditDrawer = ({ bookmarkItem, onClose }) => {
           <TagsInput value={tags} onChange={setTags} />
         </label>
 
+        <label className="flex flex-col gap-1 text-sm text-gray-700">
+          Note
+          <textarea
+            value={note}
+            onChange={(event) => setNote(event.target.value)}
+            placeholder="Short description"
+            rows={2}
+            maxLength={500}
+          />
+        </label>
+
         {submitError ? (
           <p className="text-sm text-red-600" role="alert">
             {submitError}
diff --git a/app/imports/ui/BookmarkItem.jsx b/app/imports/ui/BookmarkItem.jsx
index 603eaaa..fbb0935 100644
--- a/app/imports/ui/BookmarkItem.jsx
+++ b/app/imports/ui/BookmarkItem.jsx
@@ -20,13 +20,15 @@ const archiveBookmarkItem = (bookmarkItem) => {
 };
 
 export const BookmarkItem = ({ bookmarkItem, onEdit }) => {
+  const note = bookmarkItem.note?.trim();
+
   return (
     <li>
         <div className="group flex flex-row gap-2 hover:bg-gray-100 justify-between">
-          <a href={bookmarkItem.url} target="_blank">
+          <a href={bookmarkItem.url} target="_blank" rel="noreferrer">
             <div className="flex flex-col p-3">
                 {bookmarkItem.title}
-                <div className="flex flex-row gap-4">
+                <div className="flex flex-row gap-4 items-center">
                     <span className="text-sm text-gray-500">
                     {(bookmarkItem.tags || []).join(', ') || 'No tags'}
                     </span>
@@ -37,6 +39,11 @@ export const BookmarkItem = ({ bookmarkItem, onEdit }) => {
                     {formatCreatedAtLabel(bookmarkItem.createdAt)}
                     </span>
                 </div>
+                {note ? (
+                  <p className="mt-1 text-sm text-gray-600 truncate" title={note}>
+                    {note}
+                  </p>
+                ) : null}
             </div>
           </a>
           <div className="hidden shrink-0 items-center gap-2 group-hover:flex">