diff --git a/package.json b/package.json
index c31be2f..382fe1e 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "react-leaflet": "^3.2.5",
     "react-leaflet-draw": "^0.19.8",
     "react-multi-date-picker": "^3.3.0",
+    "react-qr-code": "^2.0.7",
     "react-redux": "^7.2.6",
     "react-scripts": "5.0.0",
     "react-table": "^7.7.0",
diff --git a/src/components/RoomCardInfo/index.js b/src/components/RoomCardInfo/index.js
index 74fee2e..8eba74b 100644
--- a/src/components/RoomCardInfo/index.js
+++ b/src/components/RoomCardInfo/index.js
@@ -1,15 +1,22 @@
 import React from "react";
+import QRCode from "react-qr-code";
 
 import qrCode from "./images/qr-code.svg";
 import flower2 from "./images/flower2.svg";
 
 const RoomCardInfo = ({ items }) => {
   return (
-    <div className="max-w-[555px] flex flex-row items-center justify-between rounded-md border bg-white border-gray-200 p-4 mx-auto mt-10">
+    <div className="relative max-w-[500px] flex flex-row items-center justify-between rounded-md border bg-white border-gray-200 py-4 px-6 mx-auto mt-10">
+      <img
+        src={flower2}
+        alt="flower"
+        className="w-1/2 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
+      />
+
       {items.map((item, index) => (
         <div key={index} className="space-y-1">
           <p
-            className="text-base text-[#0F0543]"
+            className="text-lg text-[#0F0543]"
             style={{ fontFamily: "iransansBold" }}
           >
             {item.name}
@@ -28,7 +35,7 @@ const RoomCardInfo = ({ items }) => {
           </p>
         </div>
       ))}
-      <img src={qrCode} alt="qr-code" />
+      <QRCode size="150" fgColor="#143F6B" bgColor="transparent" value="hey" />
     </div>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index b8b315e..7293801 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7554,6 +7554,11 @@ q@^1.1.2:
   resolved "https://registry.npmjs.org/q/-/q-1.5.1.tgz"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qr.js@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
+
 qs@6.9.6:
   version "6.9.6"
   resolved "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz"
@@ -7754,6 +7759,14 @@ react-multi-date-picker@^3.3.0:
     react-date-object "^2.1.5"
     react-element-popper "^2.1.6"
 
+react-qr-code@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/react-qr-code/-/react-qr-code-2.0.7.tgz#508304e031e82426a044f5e9490aca87d7c3de38"
+  integrity sha512-NpknL80p7dWbLdHfBSIxQIqLCu3+kBlyzYD692rO0UnVwfCSziIxc1xn/p3JhPEv1RV1lRD8j0w+hR3L7tawTQ==
+  dependencies:
+    prop-types "^15.7.2"
+    qr.js "0.0.0"
+
 react-redux@^7.2.0, react-redux@^7.2.6:
   version "7.2.6"
   resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz"