diff --git a/package.json b/package.json
index 32a33a3..4be9460 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "maplibre-gl": "^5.0.0",
     "nanoid": "^5.0.9",
     "next": "^14.2.28",
+    "qrcode.react": "^4.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "zustand": "^5.0.2"
diff --git a/src/components/room/ShareModal.tsx b/src/components/room/ShareModal.tsx
index 6eb5f33..af7e1cf 100644
--- a/src/components/room/ShareModal.tsx
+++ b/src/components/room/ShareModal.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
 
 interface ShareModalProps {
   roomSlug: string;
@@ -99,11 +100,17 @@ export default function ShareModal({ roomSlug, onClose }: ShareModalProps) {
           </button>
         </div>
 
-        {/* QR Code placeholder */}
+        {/* QR Code */}
         <div className="mt-6 pt-6 border-t border-white/10 text-center">
           <div className="text-xs text-white/40 mb-2">Or scan QR code</div>
-          <div className="w-32 h-32 mx-auto bg-white rounded-lg flex items-center justify-center">
-            <span className="text-rmaps-dark text-xs">QR Coming Soon</span>
+          <div className="w-36 h-36 mx-auto bg-white rounded-lg p-2">
+            <QRCodeSVG
+              value={shareUrl}
+              size={128}
+              bgColor="#ffffff"
+              fgColor="#0f172a"
+              level="M"
+            />
           </div>
         </div>
       </div>