.

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -7,6 +7,7 @@ import React, {
 } 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";
 
@@ -99,7 +100,7 @@ export default function FamilyManageTabs({
                 accountDetails={accountDetails}
               />
             </div>
-            <div className="col-span-3 p-6 h-full w-full">
+            <div className="col-span-3 justify-self-end h-full w-full">
               <div className="flex flex-col w-full">
                 <ul className="flex-[0.1] flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
                   {tabs.map(({ name, id }) => (
@@ -213,7 +214,9 @@ function ProfileInfo({
 
 function Account({ familyDetails }) {
   return (
-    <div className="w-full lg:min-h-[400px] h-full flex items-center justify-center">
+    <div className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center">
+      <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">
         <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
           Username: <span className="ml-2 normal-case">{familyDetails?.username}</span>
@@ -222,6 +225,18 @@ function Account({ familyDetails }) {
           Pin: <span className="ml-2 normal-case">{familyDetails?.pin}</span>
         </h2>
       </div>
+
+      <span className="text-5xl text-gray-400 opacity-20 font-bold">or</span>
+
+<div className="">
+  <p className="text-sm tracking-wide   text-dark-gray dark:text-white">scan the code from mobile app</p>
+<img src={qrSample} alt="qr-sample" className="h-[200px] w-[200px]" />
+</div>
+        </div>
+      <div className="h-[50px] w-full flex justify-center items-center">
+        <button className="btn-shine w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center">Print</button>
+      </div>
+      </div>
     </div>
   );
 }