diff --git a/zubhub_frontend/zubhub/package.json b/zubhub_frontend/zubhub/package.json
index a62f22e7e..70d5c4665 100644
--- a/zubhub_frontend/zubhub/package.json
+++ b/zubhub_frontend/zubhub/package.json
@@ -28,6 +28,7 @@
     "lodash": "^4.17.21",
     "nanoid": "^3.3.1",
     "pdfmake": "^0.2.7",
+    "qrcode.react": "^3.1.0",
     "quill": "^1.3.7",
     "react": "^17.0.1",
     "react-confetti": "^6.1.0",
diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
index da061c5b4..8e79ed430 100644
--- a/zubhub_frontend/zubhub/public/locales/en/translation.json
+++ b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -1132,6 +1132,14 @@
         "label": "save button",
         "save": "save",
         "unsave": "unsave"
+      },
+      "pdfDetails":{
+        "introduction": "Introduction",
+        "category": "Category",
+        "classHeading": "Class Grade",
+        "materials": "Materials Used",
+        "shareActivity": "SHARE THIS ACTIVITY",
+        "qrHeading": "Scan code to view activity"
       }
   },
   "breadCrumb":{
diff --git a/zubhub_frontend/zubhub/public/locales/hi/translation.json b/zubhub_frontend/zubhub/public/locales/hi/translation.json
index 84c7826c5..8f233c378 100644
--- a/zubhub_frontend/zubhub/public/locales/hi/translation.json
+++ b/zubhub_frontend/zubhub/public/locales/hi/translation.json
@@ -1034,7 +1034,16 @@
         "save": "सहेजें",
         "unsave": "बिना सोचे समझे"
       }
+    },
+    "pdfDetails": {
+      "introduction": "परिचय",
+      "category": "श्रेणी",
+      "classHeading": "कक्षा ग्रेड",
+      "materials": "उपयोग किए गए सामग्री",
+      "shareActivity": "इस गतिविधि को साझा करें",
+      "qrHeading": "कोड स्कैन करें ताकि गतिविधि देख सकें"
     }
+    
   },
   "breadCrumb": {
     "link": {
diff --git a/zubhub_frontend/zubhub/src/assets/images/index.js b/zubhub_frontend/zubhub/src/assets/images/index.js
index 8f14145ee..fdf21ecf4 100644
--- a/zubhub_frontend/zubhub/src/assets/images/index.js
+++ b/zubhub_frontend/zubhub/src/assets/images/index.js
@@ -1,5 +1,6 @@
 import logo from './logos/logo.png'
-
+import unstructured from './logos/unstructured.png'
 export const images = {
-    logo
+    logo,
+    unstructured
 }
\ No newline at end of file
diff --git a/zubhub_frontend/zubhub/src/assets/images/logos/unstructured.png b/zubhub_frontend/zubhub/src/assets/images/logos/unstructured.png
new file mode 100644
index 000000000..e8273b1fc
Binary files /dev/null and b/zubhub_frontend/zubhub/src/assets/images/logos/unstructured.png differ
diff --git a/zubhub_frontend/zubhub/src/views/activity_details/ActivityDetails.styles.js b/zubhub_frontend/zubhub/src/views/activity_details/ActivityDetails.styles.js
index 4ef751df6..511b82e67 100644
--- a/zubhub_frontend/zubhub/src/views/activity_details/ActivityDetails.styles.js
+++ b/zubhub_frontend/zubhub/src/views/activity_details/ActivityDetails.styles.js
@@ -1,10 +1,10 @@
-import { colors } from "../../assets/js/colors"
+import { colors } from '../../assets/js/colors';
 
 export const activityDefailsStyles = theme => ({
     container: {
-        borderRadius: 8,
-        backgroundColor: colors.white,
-        padding: 24
+      borderRadius: 8,
+      backgroundColor: colors.white,
+      padding: 24,
     },
     descriptionBodyStyle: {
         marginBottom: '0.7em',
@@ -33,9 +33,9 @@ export const activityDefailsStyles = theme => ({
         color: colors.black,
     },
     card: {
-        borderRadius: 8,
-        backgroundColor: colors.white,
-        padding: 24
+      borderRadius: 8,
+      backgroundColor: colors.white,
+      padding: 24,
     },
     creatorProfileStyle: {
         width: '100%',
@@ -64,13 +64,13 @@ export const activityDefailsStyles = theme => ({
         },
     },
     closed: {
-        height: 0,
-        transition: '0.4s',
-        overflow: 'hidden'
+      height: 0,
+      transition: '0.4s',
+      overflow: 'hidden',
     },
     expandableMargin: {
-        // marginBottom: 10,
-        marginTop: 30
+      // marginBottom: 10,
+      marginTop: 30,
     },
     expanded: {
         transition: '0.4s',
@@ -79,5 +79,98 @@ export const activityDefailsStyles = theme => ({
         flexDirection: 'column',
         gap: 32,
         marginTop: 20,
-    }
-})
\ No newline at end of file
+  },
+  pdfStyle: {
+    paddingTop: '2rem',
+  },
+  pdfLogoStyle: {
+    width: '4.5rem',
+    height: '1rem',
+    borderRadius: '0',
+  },
+  pdfMainLogo:{
+    padding: '0',
+  },
+  justifyPdf: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    height: '2rem',
+    padding: '0',
+  },
+  pdfTitle: {
+    width: '23rem',
+
+    fontFamily: 'Raleway',
+    fontSize: '1.5rem',
+    fontWeight: 800,
+  },
+  pdfSubtitle: {
+    fontFamily: 'Raleway',
+    fontSize: '1rem',
+    fontWeight: '600',
+    height: '1.5rem',
+    marginBottom: '1rem'
+  },
+
+  creatorProfilePdfStyle: {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0',
+    justifyContent: 'flex-end',
+    gap: '0.5rem',
+    fontSize: '0.5rem'
+  },
+  verticalSpace:{
+    marginBottom: '2rem',
+  },
+  textStyle:{
+    fontSize: '0.7rem'
+  },
+  divFooter: {
+    '@media screen' :{
+      display: 'none',
+    },
+    '@media print': {
+      position: 'fixed',
+      bottom: 0,
+    },
+  },
+  imageStyle:{
+    width: '1rem',
+    display: 'flex',
+    columnGap: '1rem',
+  },
+  imageIndividualStyle:{
+    width: '8rem',
+    height: '8rem',
+    borderRadius: '0.3rem'
+  },
+  footerStyle:{
+    backgroundColor: 'var(--primary-color1)',
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: 'auto',
+
+    // justifyContent: 'space-between',
+    // alignItems: 'center'
+  },
+  flexStyle:{
+    display: 'flex',
+    flexDirection: 'column',
+    color: 'white',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '12rem'
+  },
+  linkStyle:{
+    color: 'white',
+  },
+  pdfFooterLogoStyle: {
+    width: '8.25rem',
+    height: '1.9375rem', 
+  },
+  customTypographyStyle:{
+    margin: '0',
+  }
+});
diff --git a/zubhub_frontend/zubhub/src/views/activity_details/ActivityDetailsV2.jsx b/zubhub_frontend/zubhub/src/views/activity_details/ActivityDetailsV2.jsx
index c2ab283cc..58ca637bc 100644
--- a/zubhub_frontend/zubhub/src/views/activity_details/ActivityDetailsV2.jsx
+++ b/zubhub_frontend/zubhub/src/views/activity_details/ActivityDetailsV2.jsx
@@ -10,7 +10,12 @@ import {
   MenuItem,
   Typography,
   makeStyles,
+  Container,
 } from '@material-ui/core';
+import QRCode from 'qrcode.react';
+
+import html2pdf from 'html2pdf.js'; // Make sure the import path is correct
+import { images } from '../../assets/images';
 import { CloseOutlined, ExpandMore, MoreVert } from '@material-ui/icons';
 import BookmarkBorderIcon from '@material-ui/icons/BookmarkBorder';
 import VisibilityIcon from '@material-ui/icons/Visibility';
@@ -32,6 +37,7 @@ import { getUrlQueryObject } from '../../utils.js';
 import { activityDefailsStyles } from './ActivityDetails.styles';
 import { useReactToPrint } from 'react-to-print';
 import Html2Pdf from 'html2pdf.js';
+import { MakeActivity } from './MakeActivity';
 
 const API = new ZubHubAPI();
 const authenticatedUserActivitiesGrid = { xs: 12, sm: 6, md: 6 };
@@ -85,26 +91,84 @@ export default function ActivityDetailsV2(props) {
     setOpen(!open);
     props.history.replace(window.location.pathname);
   };
+  const [isPrinting, setIsPrinting] = useState(false);
+  const componentRef = useRef();
+
+  const handleDownload = () => {
+      setIsPrinting(true); // Reset after printing
+  };
+  function beforeDownload() {
+    // Add your code here to execute before download
+    const downloadMessage = document.createElement('div');
+    downloadMessage.innerText = 'Preparing download...';
+    document.body.appendChild(downloadMessage);
+  }
 
-  const handleDownload = useReactToPrint({
+  useEffect(() => {
+    if (isPrinting) {
+      setTimeout(() => {
+        handlePrint(); // Trigger the print when the component is rendered
+      }, 1000);
+    }
+  }, [isPrinting]);
+  const handlePrint = useReactToPrint({
     onBeforePrint: () => setIsDownloading(true),
     onPrintError: error => setIsDownloading(false),
-    onAfterPrint: () => setIsDownloading(false),
-    content: () => ref.current,
+    onAfterPrint: () => {
+      setIsDownloading(false);
+      setIsPrinting(false);
+    },
+    content: () => componentRef.current,
     removeAfterPrint: true,
     print: async printIframe => {
+      // console.log(printIframe);
       const document = printIframe.contentDocument;
       if (document) {
         const html = document.getElementsByTagName('html')[0];
         const pdfOptions = {
-          padding: 10,
+          // padding: 10,
           filename: `${activity.title}.pdf`,
           image: { type: 'jpeg', quality: 0.98 },
           html2canvas: { scale: 2, useCORS: true },
+          pagebreak: { mode: ['avoid-all', 'css', 'legacy'] },
           jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
         };
 
+        // Call the beforeDownload function before generating the PDF
+        beforeDownload();
+
+        // Generate the PDF
+        html2pdf()
+          .from(html)
+          .set(pdfOptions)
+          .outputPdf(pdf => {
+            // Remove the download message if it was added earlier
+            const downloadMessage = document.querySelector('.download-message');
+            if (downloadMessage) {
+              downloadMessage.remove();
+            }
+
+            // Trigger the download
+            pdf.save();
+          });
+
         const exporter = new Html2Pdf(html, pdfOptions);
+
+        exporter.postProcess = () => {
+          console.log('hi');
+          const totalPages = exporter.pdf.internal.getNumberOfPages();
+          console.log(totalPages);
+          for (let i = 1; i <= totalPages; i++) {
+            exporter.pdf.setPage(i);
+
+            // Add your footer content
+            const x = 10; // X-coordinate
+            const y = exporter.pdf.internal.pageSize.getHeight() - 10; // Y-coordinate
+            const text = `Your Footer Text Goes Here - Page ${i} of ${totalPages}`;
+            exporter.pdf.text(x, y, text);
+          }
+        };
+
         await exporter.getPdf(true);
       }
     },
@@ -151,6 +215,13 @@ export default function ActivityDetailsV2(props) {
             {isDownloading ? 'Downloading...' : 'Download PDF'}
           </CustomButton>
         </div>
+        {isPrinting && (
+          <div style={{ position: 'absolute', left: '-9999px', top: '-9999px', visibility: 'hidden' }}>
+            <div ref={componentRef}>
+              <MakeActivity activity={activity} />
+            </div>
+          </div>
+        )}
       </div>
       <div className={classes.socialButtons}>
         <IconButton
diff --git a/zubhub_frontend/zubhub/src/views/activity_details/MakeActivity.js b/zubhub_frontend/zubhub/src/views/activity_details/MakeActivity.js
new file mode 100644
index 000000000..d01b7246d
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/views/activity_details/MakeActivity.js
@@ -0,0 +1,128 @@
+import ReactDOM from 'react-dom';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import ReactQuill from 'react-quill';
+import QRCode from 'qrcode.react';
+import { images } from '../../assets/images';
+import { Collapsible, CustomButton, Gallery, Modal, Pill } from '../../components';
+import { Container, Typography, Box, makeStyles, Avatar } from '@material-ui/core';
+import styles from '../../assets/js/styles/index';
+import { activityDefailsStyles } from './ActivityDetails.styles';
+// import activity from '../../components/activity/activity';
+import SocialButtons from '../../components/social_share_buttons/socialShareButtons';
+export const MakeActivity = ({ activity, creator }) => {
+  const classes = makeStyles(activityDefailsStyles)();
+  const commonClasses = makeStyles(styles)();
+  const { t } = useTranslation();
+  return (
+    <>
+      <Container style={{ backgroundColor: 'white', border: 'solid 1.5rem white'}} className={classes.pdfStyle}>
+        <Container className={classes.pdfMainLogo}>
+          <Avatar className={classes.pdfLogoStyle} src={images.logo} alt={'Faridah_ux'} />
+        </Container>
+        <Box className={classes.verticalSpace}></Box>
+        <Container className={classes.justifyPdf}>
+          <Typography className={classes.pdfTitle}>{activity?.title}</Typography>
+          <Container className={`${classes.creatorProfilePdfStyle}`}>
+            <Avatar className={classes.creatorAvatarStyle} src={creator?.avatar} alt={'Faridah_ux'} />
+            <Typography>{activity?.creators[0].username}</Typography>
+          </Container>
+        </Container>
+        <Box className={classes.verticalSpace}></Box>
+        <Typography className={`${classes.pdfSubtitle}`}>{t('activityDetails.pdfDetails.introduction')}</Typography>
+        <Typography className={classes.textStyle}>
+          {activity.introduction ? <div dangerouslySetInnerHTML={{ __html: activity.introduction }} /> : ''}
+        </Typography>
+        {activity.images?.length > 0 && (
+          <div className={classes.imageStyle}>
+            {activity.images.map((img, index) => (
+              <img
+                key={index}
+                src={img.image?.file_url}
+                alt={`Image ${index}`}
+                className={classes.imageIndividualStyle}
+              />
+            ))}
+          </div>
+        )}
+        <Box className={classes.verticalSpace}></Box>
+
+        <Typography className={`${classes.pdfSubtitle}`}>{t('activityDetails.pdfDetails.category')}</Typography>
+        <div className={clsx(commonClasses.displayFlex, commonClasses.gap, commonClasses.flexWrap)}>
+          {activity.category?.map((cat, index) => (
+            <Pill key={index} text={cat} />
+          ))}
+        </div>
+        <Box className={classes.verticalSpace}></Box>
+
+        <Typography className={`${classes.pdfSubtitle}`}>{t('activityDetails.pdfDetails.classHeading')}</Typography>
+        <div className={clsx(commonClasses.displayFlex, commonClasses.gap, commonClasses.flexWrap)}>
+          <Pill text={activity.class_grade} />
+        </div>
+        <Box className={classes.verticalSpace}></Box>
+
+        <Typography className={`${classes.pdfSubtitle}`}>{t('activityDetails.pdfDetails.materials')}</Typography>
+        <Typography
+          className={`${classes.textStyle} ${classes.customTypographyStyle}`}
+          theme={'bubble'}
+          readOnly={true}
+          value={activity.materials_used || ''}
+        >
+          {activity.materials_used ? <div dangerouslySetInnerHTML={{ __html: activity.materials_used }} /> : ''}
+        </Typography>
+        {console.log(activity.materials_used_image)}
+        <div className={classes.imageStyle}>
+          <img
+            src={activity.materials_used_image?.file_url}
+            // alt={`Image ${index}`}
+            className={classes.imageIndividualStyle}
+          />
+        </div>
+
+        {/* {activity.materials_used_image && <Gallery images={[activity.materials_used_image?.file_url]} />} */}
+
+        <br></br>
+
+        {activity.making_steps?.map((step, index) => (
+          <Collapsible key={index} title={`Step ${step?.step_order}: ${step.title}`}>
+            {step.image?.length > 0 && <Gallery images={step.image?.map(img => img?.file_url)} />}
+            {step.description && (
+              <ReactQuill
+                className={classes.textStyle}
+                theme={'bubble'}
+                readOnly={true}
+                value={step.description || ''}
+              />
+            )}
+          </Collapsible>
+        ))}
+        <Box className={classes.verticalSpace}></Box>
+      </Container>
+      <Container className={classes.footerStyle}>
+        <Container>
+          <img className={classes.pdfFooterLogoStyle} src={images.unstructured} alt={'Faridah_ux'} />
+        </Container>
+        <Container>
+          <Container className={classes.flexStyle}>
+            <Typography
+              style={{ margin: 'auto', width: '12rem' }}
+              className={`${classes.pdfSubtitle}`}
+            >
+              {t('activityDetails.pdfDetails.introduction')}
+            </Typography>
+            <SocialButtons link facebook whatsapp className={classes.linkStyle} />
+          </Container>
+        </Container>
+        <Container>
+          <Container>
+            <QRCode value={`https://example.com/activity/${activity.id}`} />
+          </Container>
+
+          <Typography style={{ color: 'white' }} className={`${classes.pdfSubtitle} ${classes.customTypographyStyle}`}>
+          {t('activityDetails.pdfDetails.qrHeading')}
+          </Typography>
+        </Container>
+      </Container>
+    </>
+  );
+};