diff --git a/website/src/components/DeviceListItem.tsx b/website/src/components/DeviceListItem.tsx
index 72ee2de2..4fb35af5 100644
--- a/website/src/components/DeviceListItem.tsx
+++ b/website/src/components/DeviceListItem.tsx
@@ -14,7 +14,7 @@ import { Device } from '../sdk/devices_pb';
 import { grpc } from '../Api';
 import { observer } from 'mobx-react';
 import { confirm } from './Present';
-import { IconButton } from '@mui/material';
+import { IconButton, Typography } from '@mui/material';
 
 interface Props {
   device: Device.AsObject;
@@ -41,8 +41,12 @@ export const DeviceListItem = observer(
       const device = this.props.device;
       return (
         <Card>
-          <CardHeader
-            title={device.name}
+          <CardHeader 
+            title={
+              <Typography style={{ wordBreak: "break-word" }}>
+                {device.name}
+              </Typography>
+              }
             avatar={
               <Avatar style={{ backgroundColor: device.connected ? '#76de8a' : '#bdbdbd' }}>
                 {/* <DonutSmallIcon /> */}