diff --git a/package.json b/package.json
index b39cce8..04fce7b 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,8 @@
     "@testing-library/jest-dom": "5.11.4",
     "@testing-library/react": "11.1.0",
     "@testing-library/user-event": "12.1.10",
+    "@zxing/browser": "^0.0.10",
+    "@zxing/library": "^0.19.1",
     "apisauce": "^2.1.5",
     "chart.js": "3.4.1",
     "chroma-js": "2.1.2",
diff --git a/src/components/QRcode/index.js b/src/components/QRcode/index.js
new file mode 100644
index 0000000..3adcdbb
--- /dev/null
+++ b/src/components/QRcode/index.js
@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+import { BrowserQRCodeSvgWriter } from '@zxing/browser';
+import PropTypes from 'prop-types';
+
+/**
+ * Generates a QR code with the payload
+ * Ref: https://zxing-js.github.io/library/
+ * @param {{payload: string, className: string, width: number, height: number}}
+ */
+export default function QRcode({ payload, className, width, height }) {
+  const [svgHtml, setSvgHtml] = useState('Loading QR code');
+
+  useEffect(() => {
+    const codeWriter = new BrowserQRCodeSvgWriter();
+    const svgElement = codeWriter.write(payload, width, height);
+    setSvgHtml(svgElement.outerHTML);
+  }, [payload]);
+
+  return <div className={className} dangerouslySetInnerHTML={{ __html: svgHtml }}></div>;
+}
+
+QRcode.defaultProps = {
+  width: 300,
+  height: 300
+};
+
+// Typechecking props for the Breadcrumbs
+QRcode.propTypes = {
+  payload: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  width: PropTypes.number,
+  height: PropTypes.number
+};