diff --git a/client/modules/User/components/CollectionItemRow.jsx b/client/modules/User/components/CollectionItemRow.jsx
index e6f3e6d30e..15c76e8602 100644
--- a/client/modules/User/components/CollectionItemRow.jsx
+++ b/client/modules/User/components/CollectionItemRow.jsx
@@ -3,9 +3,13 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
+import { TableDropdown } from '../../../components/Dropdown/TableDropdown';
+import { MenuItem } from '../../../components/Dropdown/MenuItem';
+import { Tooltip } from '../../../common/Tooltip';
 import { removeFromCollection } from '../../IDE/actions/collections';
 import { formatDateToString } from '../../../utils/formatDate';
 import RemoveIcon from '../../../images/close.svg';
+import { removeFromCollection } from '../../IDE/actions/collections';
 
 const CollectionItemRow = ({ collection, item, isOwner }) => {
   const { t } = useTranslation();
@@ -44,17 +48,26 @@ const CollectionItemRow = ({ collection, item, isOwner }) => {
       }`}
     >
       <th scope="row">{name}</th>
+
       <td>{formatDateToString(item.createdAt)}</td>
+
       <td>{sketchOwnerUsername}</td>
+
       <td className="collection-row__action-column">
         {isOwner && (
-          <button
-            className="collection-row__remove-button"
-            onClick={handleSketchRemove}
-            aria-label={t('Collection.SketchRemoveARIA')}
-          >
-            <RemoveIcon focusable="false" aria-hidden="true" />
-          </button>
+          <TableDropdown aria-label={t('SketchList.ToggleLabelARIA')}>
+            <MenuItem onClick={handleSketchRemove}>
+              {t('RemoveFromCollection')}
+            </MenuItem>
+          </TableDropdown>
+          <Tooltip content={t('RemoveFromCollection')}>
+            <button
+              className="collection-row__remove-button"
+              onClick={handleSketchRemove}
+            >
+              <RemoveIcon focusable="false" aria-hidden="true" />
+            </button>
+          </Tooltip>
         )}
       </td>
     </tr>
diff --git a/client/styles/components/_tooltip.scss b/client/styles/components/_tooltip.scss
index 8edc0b7156..bf645590f4 100644
--- a/client/styles/components/_tooltip.scss
+++ b/client/styles/components/_tooltip.scss
@@ -12,12 +12,17 @@
   font-family: Montserrat, sans-serif;
   font-size: 1rem;
   padding: 0.5rem 0.75rem;
-  max-width: none;
+  max-width: 250px;
+  width: max-content;
   white-space: nowrap;
-  left: 1rem;
-  right: auto;
+  position:absolute;
+  bottom: 100%;
+  margin-bottom: 8px;
+  left: auto;
+  right: -0.5rem;
   transform: translateX(0);
-  text-align: left;
+  text-align: right;
+  word-wrap: break-word;
 }
 
 .tooltip-wrapper .tooltipped-n::before,
@@ -26,7 +31,17 @@
     color: getThemifyVariable('button-background-hover-color');
     border-top-color: getThemifyVariable('button-background-hover-color');
   }
-  left: 1.75rem;
-  right: auto;
+  content: "";
+  left: auto;
+  position: absolute;
+  bottom: 100%;
+  margin-bottom: 2px;
+  right: 0.25rem;
   transform: translateX(0);
+  border: 6px solid transparent;
+  @include themify() {
+    border-top-color: getThemifyVariable('button-background-hover-color');
+  }
 }
+
+
diff --git a/translations/locales/it/translations.json b/translations/locales/it/translations.json
index 4dfb4ac25a..e084a497c1 100644
--- a/translations/locales/it/translations.json
+++ b/translations/locales/it/translations.json
@@ -438,7 +438,8 @@
     "TitleDefault": "collezione"
   },
   "Collection": {
-    "Title": "p5.js redattore web | Mie collezioni",
+    "RemoveFromCollection":"Remove from Collection ",
+    "Title": "p5.js redattore web | My collezioni",
     "AnothersTitle": "p5.js redattore web | Le collezioni di {{anotheruser}}",
     "Share": "Condividi",
     "URLLink": "Collegamento alla collezione",