diff --git a/app/src/components/ConnectionSetup/ConnectionSetup.tsx b/app/src/components/ConnectionSetup/ConnectionSetup.tsx
index b4aa10c..76121fb 100644
--- a/app/src/components/ConnectionSetup/ConnectionSetup.tsx
+++ b/app/src/components/ConnectionSetup/ConnectionSetup.tsx
@@ -83,6 +83,7 @@ const styles = (theme: Theme) => ({
     borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`,
     paddingTop: `${2 * theme.spacing.unit}px`,
     flex: 3,
+    overflow: 'hidden',
     backgroundColor: theme.palette.background.default,
     color: theme.palette.text.primary,
   },
diff --git a/app/src/components/ConnectionSetup/ProfileList.tsx b/app/src/components/ConnectionSetup/ProfileList.tsx
index 21c70a7..223158e 100644
--- a/app/src/components/ConnectionSetup/ProfileList.tsx
+++ b/app/src/components/ConnectionSetup/ProfileList.tsx
@@ -11,6 +11,7 @@ import {
   ListItem,
   ListItemText,
   ListSubheader,
+  Typography,
 } from '@material-ui/core'
 
 interface Props {
@@ -71,7 +72,9 @@ const connectionItemRenderer = (props: ConnectionItemProps) => {
       selected={props.selected}
       onClick={() => props.actions.selectConnection(props.connection.id)}
     >
-      <ListItemText primary={props.connection.name} />
+      <Typography style={{ width: '100%', textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden'}}>
+        {props.connection.name || 'mqtt broker'}
+      </Typography>
     </ListItem>
   )
 }