diff --git a/package-lock.json b/package-lock.json
index 85a5be3ab..9c3e2c6ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-paginate": "^8.2.0",
+        "react-qr-code": "^2.0.18",
         "react-router-dom": "^6.10.0",
         "react-router-hash-link": "^2.4.3",
         "react-webcam": "^7.2.0",
@@ -11638,6 +11639,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/qr.js": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
+      "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ=="
+    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "dev": true,
@@ -12038,6 +12044,18 @@
         "react": "^16 || ^17 || ^18"
       }
     },
+    "node_modules/react-qr-code": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.18.tgz",
+      "integrity": "sha512-v1Jqz7urLMhkO6jkgJuBYhnqvXagzceg3qJUWayuCK/c6LTIonpWbwxR1f1APGd4xrW/QcQEovNrAojbUz65Tg==",
+      "dependencies": {
+        "prop-types": "^15.8.1",
+        "qr.js": "0.0.0"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "dev": true,
@@ -22599,6 +22617,11 @@
       "version": "2.3.1",
       "dev": true
     },
+    "qr.js": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
+      "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ=="
+    },
     "querystringify": {
       "version": "2.2.0",
       "dev": true
@@ -22917,6 +22940,15 @@
         "prop-types": "^15"
       }
     },
+    "react-qr-code": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.18.tgz",
+      "integrity": "sha512-v1Jqz7urLMhkO6jkgJuBYhnqvXagzceg3qJUWayuCK/c6LTIonpWbwxR1f1APGd4xrW/QcQEovNrAojbUz65Tg==",
+      "requires": {
+        "prop-types": "^15.8.1",
+        "qr.js": "0.0.0"
+      }
+    },
     "react-refresh": {
       "version": "0.14.0",
       "dev": true
diff --git a/package.json b/package.json
index 38fc8a926..1e99b8546 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-paginate": "^8.2.0",
+    "react-qr-code": "^2.0.18",
     "react-router-dom": "^6.10.0",
     "react-router-hash-link": "^2.4.3",
     "react-webcam": "^7.2.0",
diff --git a/src/components/Profile/CreateQRCode.jsx b/src/components/Profile/CreateQRCode.jsx
new file mode 100644
index 000000000..120d82bd5
--- /dev/null
+++ b/src/components/Profile/CreateQRCode.jsx
@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import QRCode from 'react-qr-code';
+import QrCode2Icon from '@mui/icons-material/QrCode2';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Stack,
+  Typography
+} from '@mui/material';
+
+/**
+ *
+ * @memberof Profile
+ * @name CreateQRCode
+ * @param {object} Props - React props
+ * @param {string} [Props.webId] - The webId of the user's profile
+ * @returns {React.JSX.Element} The CreateQRCode Modal
+ */
+
+const CreateQRCode = ({ webId }) => {
+  const [qrIconClicked, setQrIconClicked] = useState(false);
+  const [docUrl, setDocUrl] = useState(null);
+
+  const createQrCode = () => {
+    setQrIconClicked(!qrIconClicked);
+    const trimmedWebId = webId && webId.includes('#') ? webId.split('#')[0] : webId;
+    setDocUrl(trimmedWebId);
+  };
+
+  const closeModal = () => {
+    setQrIconClicked(false);
+  };
+
+  return (
+    <>
+      <Button
+        variant="outlined"
+        startIcon={<QrCode2Icon />}
+        onClick={() => {
+          createQrCode();
+        }}
+      >
+        Show QR Code
+      </Button>
+      {qrIconClicked ? (
+        <Dialog
+          open={qrIconClicked}
+          onClose={closeModal}
+          aria-labelledby="qr-modal-title"
+          maxWidth="xs"
+          fullWidth
+        >
+          <DialogTitle id="qr-modal-title" sx={{ textAlign: 'center' }}>
+            Share your WebID
+          </DialogTitle>
+          <DialogContent>
+            <Stack spacing={2} alignItems="center" sx={{ py: 1 }}>
+              <div style={{ background: '#fff' }}>
+                <div style={{ width: 256 }}>
+                  <QRCode
+                    value={docUrl || ''}
+                    size={256}
+                    style={{ width: '100%', height: 'auto' }}
+                    viewBox="0 0 256 256"
+                    level="M"
+                  />
+                </div>
+              </div>
+              <Typography variant="body2" sx={{ wordBreak: 'break-all', textAlign: 'center' }}>
+                {docUrl}
+              </Typography>
+            </Stack>
+          </DialogContent>
+          <DialogActions sx={{ justifyContent: 'center' }}>
+            <Button
+              onClick={closeModal}
+              variant="contained"
+              sx={{
+                width: { xs: '90%', sm: '75%' }
+              }}
+            >
+              Close
+            </Button>
+          </DialogActions>
+        </Dialog>
+      ) : (
+        ''
+      )}
+    </>
+  );
+};
+
+export default CreateQRCode;
diff --git a/src/components/Profile/ProfileComponent.jsx b/src/components/Profile/ProfileComponent.jsx
index 5d337e412..f99eb6e32 100644
--- a/src/components/Profile/ProfileComponent.jsx
+++ b/src/components/Profile/ProfileComponent.jsx
@@ -18,6 +18,7 @@ import { saveToClipboard } from '@utils';
 import ProfileInputField from './ProfileInputField';
 import ProfileEditButtonGroup from './ProfileEditButtonGroup';
 import ProfileImageField from './ProfileImageField';
+import CreateQRCode from './CreateQRCode';
 
 /**
  * UserProfile - Component is a component that renders the user's profile on
@@ -148,26 +149,31 @@ const ProfileComponent = ({ contactProfile, webId }) => {
           />
         </Box>
         {!contactProfile && (
-          <Box sx={{ display: 'flex', flexDirection: 'row', gap: '10px', alignSelf: 'end' }}>
-            <Typography sx={{ marginTop: '8px' }}>
-              <Link to={`${signupLink}?webId=${encodeURIComponent(session.info.webId)}`}>
-                Your Invite Link
-              </Link>
-              <IconButton
-                aria-label="Copy Invite Link"
-                edge="end"
-                onClick={() => {
-                  saveToClipboard(
-                    `${signupLink}?webId=${encodeURIComponent(session.info.webId)}`,
-                    'Invite link copied to clipboard',
-                    addNotification
-                  );
-                }}
-              >
-                <ContentCopyIcon />
-              </IconButton>
-            </Typography>
-          </Box>
+          <>
+            <Box sx={{ display: 'flex', flexDirection: 'row', gap: '10px', alignSelf: 'end' }}>
+              <Typography sx={{ marginTop: '8px' }}>
+                <Link to={`${signupLink}?webId=${encodeURIComponent(session.info.webId)}`}>
+                  Your Invite Link
+                </Link>
+                <IconButton
+                  aria-label="Copy Invite Link"
+                  edge="end"
+                  onClick={() => {
+                    saveToClipboard(
+                      `${signupLink}?webId=${encodeURIComponent(session.info.webId)}`,
+                      'Invite link copied to clipboard',
+                      addNotification
+                    );
+                  }}
+                >
+                  <ContentCopyIcon />
+                </IconButton>
+              </Typography>
+            </Box>
+            <Box sx={{ alignSelf: 'end' }}>
+              <CreateQRCode webId={webId} />
+            </Box>
+          </>
         )}
       </form>
     </Box>