diff --git a/src/components/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/FamilyManageTabs.jsx
index fc32640..e14c6fb 100644
--- a/src/components/FamilyAcc/FamilyManageTabs.jsx
+++ b/src/components/FamilyAcc/FamilyManageTabs.jsx
@@ -4,12 +4,14 @@ import React, {
   useMemo,
   useRef,
   useState,
+  forwardRef
 } from "react";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import profile from "../../assets/images/profile-info-profile.png";
-import qrSample from "../../assets/images/qr-sample.png";
 import usersService from "../../services/UsersService";
 import FamilyTasks from "./FamilyTasks";
+import QRCode from "react-qr-code";
+import { useReactToPrint } from "react-to-print";
 
 export default function FamilyManageTabs({
   className,
@@ -78,6 +80,12 @@ export default function FamilyManageTabs({
     familyManageHandler();
   }, [tab]);
 
+  const accountRef = useRef();
+  // to handle printing
+  const useHandlePrint = useReactToPrint({
+      content: () => accountRef.current,
+    });
+
   return (
     <div
       className={`update-table w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
@@ -138,7 +146,13 @@ export default function FamilyManageTabs({
                               />
                             )}
                             {name === "Account" && (
-                              <Account familyDetails={familyDetails} />
+                              <>
+                              <Account
+                                familyDetails={familyDetails}
+                                myRef={accountRef}
+                                handlePrint={useHandlePrint}
+                              />
+                              </>
                             )}
                             {name === "Profile" && <Profile />}
                           </>
@@ -217,37 +231,12 @@ function ProfileInfo({
   );
 }
 
-function Account({ familyDetails }) {
-  const handlePrint = () => {
-    const printableContent = `
-      <html>
-        <head>
-          <style>
-            /* Add your desired styles here */
-          </style>
-        </head>
-        <body>
-        <div class"update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow"></div>
-          <h1>Family member details</h1>
-          <p>Username: ${familyDetails?.username}</p>
-          <p>Password: ${familyDetails?.pin}</p>
-          <img src="${qrSample}" alt="QR Code" />
-        </body>
-      </html>
-    `;
-
-    const printWindow = window.open('', '', 'width=800,height=700');
-    printWindow.document.open();
-    printWindow.document.write(printableContent);
-    printWindow.document.close();
-
-    printWindow.onload = () => {
-      printWindow.print();
-    };
-  };
-
+const Account = forwardRef(({ familyDetails, myRef, handlePrint }) => {
   return (
-    <div className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center">
+    <div
+      className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center"
+      ref={myRef}
+    >
       <div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ">
         <div className="flex items-center justify-around h-[380px]">
           <div className="flex flex-col">
@@ -271,10 +260,11 @@ function Account({ familyDetails }) {
             <p className="text-xl tracking-wide mb-[15px] text-center font-bold text-dark-gray dark:text-white">
               Scan the code from mobile app
             </p>
-            <img
-              src={qrSample}
-              alt="qr-sample"
-              className="h-[200px] w-[200px]"
+            <QRCode
+              size={256}
+              style={{ height: "auto", maxWidth: "100%", width: "100%" }}
+              value={`${familyDetails?.username}`}
+              viewBox={`0 0 256 256`}
             />
           </div>
         </div>
@@ -286,7 +276,7 @@ function Account({ familyDetails }) {
       </div>
     </div>
   );
-}
+})
 
 function Profile() {
   return <>Profile</>;
