Hello there Alepacox! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀 Hey, thanks for the suggestion. This seems like a good feature, we'll get this implemented :) I'm glad to hear that, thank you so much!
```suggestion
                <td>{items &&  items[brokerId]?.port}</td>
``` Fixed
Show IP and port of brokers in UI/API
Good morning, thank you very much for the great work you are doing.
I just wanted to know if there is a possibility to also show the port of the brokers on the /clusters/clusterName/brokers endpoint.
It would be so useful for scenarios where brokers are added to the cluster with random port mappings, so that you can connect to the brokers by querying the Kafka-UI API first. 
Morover, those same data could be displayed in the UI (/ui/clusters/Local/brokers) along with each broker ID.

Thank you so much.

kafka-ui-react-app/src/components/Brokers/Brokers.tsx
kafka-ui-react-app/src/components/Brokers/Brokers.tsx
diff --git a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
index 3a6466f0b58..44490774046 100644
--- a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
@@ -10,6 +10,7 @@ import PageHeading from 'components/common/PageHeading/PageHeading';
 import * as Metrics from 'components/common/Metrics';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/redux';
 import {
+  fetchBrokers,
   fetchClusterStats,
   selectStats,
 } from 'redux/reducers/brokers/brokersSlice';
@@ -28,6 +29,7 @@ const Brokers: React.FC = () => {
     underReplicatedPartitionCount,
     diskUsage,
     version,
+    items,
   } = useAppSelector(selectStats);
 
   let replicas = inSyncReplicasCount ?? 0;
@@ -35,14 +37,15 @@ const Brokers: React.FC = () => {
 
   React.useEffect(() => {
     dispatch(fetchClusterStats(clusterName));
-  }, [clusterName, dispatch]);
+    dispatch(fetchBrokers(clusterName));
+  }, [fetchClusterStats, fetchBrokers, clusterName, dispatch]);
 
   useInterval(() => {
     fetchClusterStats(clusterName);
+    fetchBrokers(clusterName);
   }, 5000);
 
   const zkOnline = zooKeeperStatus === ZooKeeperStatus.online;
-
   return (
     <>
       <PageHeading text="Brokers" />
@@ -122,6 +125,8 @@ const Brokers: React.FC = () => {
             <TableHeaderCell title="Broker" />
             <TableHeaderCell title="Segment Size (Mb)" />
             <TableHeaderCell title="Segment Count" />
+            <TableHeaderCell title="Port" />
+            <TableHeaderCell title="Host" />
           </tr>
         </thead>
         <tbody>
@@ -133,6 +138,8 @@ const Brokers: React.FC = () => {
                   <BytesFormatted value={segmentSize} />
                 </td>
                 <td>{segmentCount}</td>
+                <td>{items && items[brokerId]?.port}</td>
+                <td>{items && items[brokerId]?.host}</td>
               </tr>
             ))
           ) : (
