diff --git a/frontend/package.json b/frontend/package.json
index 5e7b4bbb..4cd3c731 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,12 +6,16 @@
     "websocket-extensions": "^0.1.4"
   },
   "dependencies": {
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
     "@grpc/grpc-js": "~1.1.8",
     "@grpc/proto-loader": "~0.5.4",
     "@material-ui/core": "^4.3.0",
     "@material-ui/icons": "^4.2.1",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@material-ui/styles": "^4.3.0",
+    "@mui/icons-material": "^5.0.0",
+    "@mui/material": "^5.0.0",
     "apexcharts": "^3.22.2",
     "async": "~1.5.2",
     "classnames": "^2.2.6",
@@ -23,6 +27,7 @@
     "protobufjs": "^6.10.2",
     "react": "^16.14.0",
     "react-apexcharts": "^1.3.3",
+    "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "^16.14.0",
     "react-google-maps": "^9.4.5",
     "react-router-dom": "^5.0.1",
diff --git a/frontend/src/components/ShowExternalAddressDialog/ShowExternalAddressDialog.js b/frontend/src/components/ShowExternalAddressDialog/ShowExternalAddressDialog.js
index 351c9312..a04da73a 100644
--- a/frontend/src/components/ShowExternalAddressDialog/ShowExternalAddressDialog.js
+++ b/frontend/src/components/ShowExternalAddressDialog/ShowExternalAddressDialog.js
@@ -3,11 +3,11 @@ import {
   Dialog,
   DialogTitle,
   DialogContent,
-  TextField,
+  Button,
+  Tooltip,
 } from '@material-ui/core';
-
-// styles
-import useStyles from './styles';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import {CopyToClipboard} from 'react-copy-to-clipboard';
 
 import {
   getExternalAddressRequest,
@@ -18,7 +18,6 @@ export default function ShowExternalAddressDialog({
   handleClose,
   ...props
 }) {
-  const classes = useStyles();
 
   const [externalAddress, setExternalAddress] = useState(null);
 
@@ -40,29 +39,26 @@ export default function ShowExternalAddressDialog({
   }
 
   function DisplayExternalAddress() {
+    const address = externalAddress && `${externalAddress.getHost()}:${externalAddress.getPort()}`;
     return (
-      <TextField
-        id="standard-textarea"
-        label="external-address"
-        required
-        autoFocus
-        value={externalAddress && `${externalAddress.getHost()}:${externalAddress.getPort()}`}
-        fullWidth
-        inputProps={{
-          readOnly: true,
-        }}
-      />
+      <CopyToClipboard text={address}>
+        <Tooltip title="Copy" placement="right">
+          <Button variant="outlined" style={{width: "100%"}}>
+            <div style={{float: "left"}}>{address}</div>
+            <ContentCopyIcon/>
+          </Button>
+        </Tooltip>
+      </CopyToClipboard>
     );
   }
 
   return (
-    <Dialog open={open} onRendered={load} onClose={cancel} onClick={ignore} aria-labelledby="form-dialog-title">
-      <DialogTitle id="form-dialog-title">Show External Address</DialogTitle>
-      <form className={classes.root} noValidate autoComplete="off">
-        <DialogContent>
-          {DisplayExternalAddress()}
-        </DialogContent>
-      </form>
+    <Dialog open={open} onRendered={load} onClose={cancel} onClick={ignore} aria-labelledby="form-dialog-title" maxWidth="lg">
+      <DialogTitle id="form-dialog-title">Your squeaknode external address</DialogTitle>
+      <DialogContent>
+        <p>Other squeaknodes can connect to your node using this address to exchange squeaks and offers.</p>
+        {DisplayExternalAddress()}
+      </DialogContent>
     </Dialog>
   );
 }