diff --git a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
index b4448ad1c72..58709ad9687 100644
--- a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
+++ b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
@@ -220,49 +220,51 @@ const TableEditorMenu: FC<Props> = ({
             {schemaTables.map((table) => {
               const isActive = Number(id) === table.id
               return (
-                <ProductMenuItem
-                  key={table.name}
-                  url={`/project/${projectRef}/editor/${table.id}`}
-                  name={table.name}
-                  isActive={isActive}
-                  action={
-                    isActive && (
-                      <Dropdown
-                        size="small"
-                        side="bottom"
-                        align="start"
-                        overlay={[
-                          <Dropdown.Item
-                            key="edit-table"
-                            icon={<IconEdit size="tiny" />}
-                            onClick={() => onEditTable(table)}
+                    <ProductMenuItem
+                      key={table.name}
+                      url={`/project/${projectRef}/editor/${table.id}`}
+                      name={table.name}
+                      hoverText={table.comment ? table.comment : table.name}
+                      isActive={isActive}
+                      action={
+                        isActive && (
+                          <Dropdown
+                            size="small"
+                            side="bottom"
+                            align="start"
+                            overlay={[
+                              <Dropdown.Item
+                                key="edit-table"
+                                icon={<IconEdit size="tiny" />}
+                                onClick={() => onEditTable(table)}
+                              >
+                                Edit Table
+                              </Dropdown.Item>,
+                              <Dropdown.Item
+                                key="duplicate-table"
+                                icon={<IconCopy size="tiny" />}
+                                onClick={() => onDuplicateTable(table)}
+                              >
+                                Duplicate Table
+                              </Dropdown.Item>,
+                              <Dropdown.Seperator />,
+                              <Dropdown.Item
+                                key="delete-table"
+                                icon={<IconTrash size="tiny" />}
+                                onClick={() => onDeleteTable(table)}
+                              >
+                                Delete Table
+                              </Dropdown.Item>,
+                            ]}
                           >
-                            Edit Table
-                          </Dropdown.Item>,
-                          <Dropdown.Item
-                            key="duplicate-table"
-                            icon={<IconCopy size="tiny" />}
-                            onClick={() => onDuplicateTable(table)}
-                          >
-                            Duplicate Table
-                          </Dropdown.Item>,
-                          <Dropdown.Seperator />,
-                          <Dropdown.Item
-                            key="delete-table"
-                            icon={<IconTrash size="tiny" />}
-                            onClick={() => onDeleteTable(table)}
-                          >
-                            Delete Table
-                          </Dropdown.Item>,
-                        ]}
-                      >
-                        <div className="text-scale-900 hover:text-scale-1200 transition-colors">
-                          <IconChevronDown size={14} strokeWidth={2} />
-                        </div>
-                      </Dropdown>
-                    )
-                  }
-                />
+                            <div className="text-scale-900 hover:text-scale-1200 transition-colors">
+                              <IconChevronDown size={14} strokeWidth={2} />
+                            </div>
+                          </Dropdown>
+                        )
+                      }
+                    />
+
               )
             })}
           </div>
diff --git a/studio/components/ui/ProductMenu/ProductMenuItem.tsx b/studio/components/ui/ProductMenu/ProductMenuItem.tsx
index 3a61170a46d..5f76a228148 100644
--- a/studio/components/ui/ProductMenu/ProductMenuItem.tsx
+++ b/studio/components/ui/ProductMenu/ProductMenuItem.tsx
@@ -12,6 +12,7 @@ interface Props {
   target?: '_blank' | '_self'
   onClick?: () => void
   textClassName?: string
+  hoverText?: string
 }
 
 const ProductMenuItem: FC<Props> = ({
@@ -24,12 +25,13 @@ const ProductMenuItem: FC<Props> = ({
   target = '_self',
   onClick,
   textClassName = '',
+  hoverText = ''
 }) => {
   const menuItem = (
     <Menu.Item icon={icon} rounded active={isActive} onClick={onClick}>
       <div className="flex w-full items-center justify-between">
         <span
-          title={typeof name === 'string' ? name : ''}
+          title={hoverText ? hoverText : typeof name === 'string' ? name : ''}
           className={'flex items-center truncate ' + textClassName}
         >
           {name}