diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss
index 8a5dc65c2a..104898e721 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss
+++ b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss
@@ -236,4 +236,33 @@
   > div:nth-of-type(1) {
     width: 69%;
   }
+}
+.date-style{
+  max-width: 37.5rem;
+  display: flex;
+  gap: 1rem;
+}
+.app-preview{
+  width: 25rem;
+  border: 0.000rem solid #ccc;
+  border-radius: 1rem;
+  background-color: white;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+  margin: 20px auto;
+  font-family: Arial, sans-serif;
+}
+.mobile-top {
+  background-color: theme(digitv2.lightTheme.header-sidenav);
+  height: 4rem;
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+  color: theme(digitv2.lightTheme.paper);
+  font-size: 1.5rem;
+  font-weight: theme(digitv2.fontWeight.bold);
+  width: 100%;
+  /* Full width */
+  box-sizing: border-box;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
 }
\ No newline at end of file
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js
index aa986b565d..bdc400b32c 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js
@@ -57,6 +57,7 @@ import MapView from "./components/MapView";
 import NoResultsFound from "./components/NoResultsFound";
 import UploadDataMappingWrapper from "./components/UploadDataMappingWrapper";
 import DataUploadWrapper from "./components/DataUploadWrapper";
+import AppPreview from "./components/AppPreview";
 
 /**
  * MDMS Module name
@@ -175,6 +176,7 @@ const componentsToRegister = {
   NoResultsFound,
   UploadDataMappingWrapper,
   DataUploadWrapper,
+  AppPreview
 };
 
 const overrideHooks = () => {
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.js
new file mode 100644
index 0000000000..c4df141784
--- /dev/null
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.js
@@ -0,0 +1,232 @@
+import React from "react";
+import { Card, Header, CardText, TextInput, SelectionCard, Dropdown } from "@egovernments/digit-ui-components";
+import { useTranslation } from "react-i18next";
+
+const data = {
+  name: "HOUSEHOLD_LOCATION",
+  cards: [
+    {
+      fields: [
+        {
+          type: "text",
+          label: "Address Line 1",
+          active: true,
+          jsonPath: "Description",
+          metaData: {},
+          required: true,
+        },
+        {
+          type: "Selection",
+          label: "Address Line 1",
+          active: true,
+          jsonPath: "Description",
+          metaData: {},
+          required: true,
+        },
+        {
+          type: "numeric",
+          label: "Address Line 1",
+          active: true,
+          jsonPath: "Description",
+          metaData: {},
+          required: true,
+        },
+        {
+          type: "dropdown",
+          label: "Address Line 2",
+          active: true,
+          jsonPath: "Description",
+          metaData: {},
+          required: true,
+        },
+        {
+          type: "date",
+          label: "Address Line 2",
+          active: true,
+          jsonPath: "Description",
+          metaData: {},
+          required: true,
+        },
+        {
+          type: "dob",
+          label: "Address Line 4",
+          active: true,
+          jsonPath: "Description",
+          metaData: {},
+          required: true,
+        },
+      ],
+      header: "Header",
+      description: "Desc",
+      headerFields: [
+        {
+          type: "text",
+          label: "SCREEN_HEADING",
+          active: true,
+          jsonPath: "ScreenHeading",
+          metaData: {},
+          required: true,
+        },
+        {
+          type: "text",
+          label: "SCREEN_DESCRIPTION",
+          active: true,
+          jsonPath: "Description",
+          metaData: {},
+          required: true,
+        },
+      ],
+    },
+  ],
+  order: 1,
+  config: {
+    enableComment: true,
+    enableFieldAddition: true,
+    allowFieldsAdditionAt: ["body"],
+    enableSectionAddition: true,
+    allowCommentsAdditionAt: ["body"],
+  },
+  parent: "REGISTRATION",
+  headers: [
+    {
+      type: "header",
+      label: "KJHSJKDHKJH",
+    },
+    {
+      type: "info",
+      label: "KJHSJKDHKJH",
+    },
+    {
+      type: "description",
+      label: "KJHSJKDHKJH",
+    },
+  ],
+};
+
+const DobPicker = ({t}) => {
+  return (
+    <div className="dob-picker">
+      <Card type="secondary">
+        <div>{t("HCM_DATE_OF_BIRTH")}</div>
+        <TextInput name="numeric" onChange={() => {}} type={"date"} />
+        <div>({t("HCM_OR")})</div>
+        <div>{t("HCM_AGE")}</div>
+        <div className="date-style">
+        <TextInput name="numeric" onChange={() => {}} placeholder={t("HCM_YEARS")} disabled={true} />
+        <TextInput name="numeric" onChange={() => {}} placeholder={t("HCM_MONTHS")} disabled={true}/>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+const renderField = (field ,t) => {
+  switch (field.type) {
+    case "text":
+      return <TextInput name="name" value={field?.name || ""} onChange={() => {}} disabled={true} />;
+    case "Selection":
+      return (
+        <SelectionCard
+          errorMessage=""
+          onSelectionChanged={() => {}}
+          options={[
+            {
+              code: "option1",
+              name: "Option 1",
+              prefixIcon: "",
+              suffixIcon: "",
+            },
+            {
+              code: "option2",
+              name: "Option 2",
+              prefixIcon: "",
+              suffixIcon: "",
+            },
+            {
+              code: "option3",
+              name: "Option 3",
+              prefixIcon: "",
+              suffixIcon: "",
+            },
+          ]}
+          selected={[]}
+        />
+      );
+    case "numeric":
+      return <TextInput name="numeric" onChange={() => {}} type={"numeric"} />;
+    case "dropdown":
+      return (
+        <Dropdown
+          option={[
+            {
+              code: "option1",
+              name: "Option 1",
+              prefixIcon: "",
+              suffixIcon: "",
+            },
+            {
+              code: "option2",
+              name: "Option 2",
+              prefixIcon: "",
+              suffixIcon: "",
+            },
+            {
+              code: "option3",
+              name: "Option 3",
+              prefixIcon: "",
+              suffixIcon: "",
+            },
+          ]}
+          optionKey={"code"}
+          selected={[]}
+          select={() => {}}
+          //   disabled={source === "microplan"}
+        />
+      );
+    case "date":
+      return <TextInput name="numeric" onChange={() => {}} type={"date"} />;
+    case "dob":
+      return <DobPicker t={t} />
+    default:
+      return <div style={{ color: "red", marginTop: "5px" }}>Unsupported field type: {field.type}</div>;
+  }
+};
+
+const AppPreview = () => {
+    const { t } = useTranslation();
+  return (
+    <div className="app-preview">
+       <div className="mobile-top">
+        <div className="mobile-menu-icon">&#9776;</div>
+      </div>
+      {data.cards.map((card, index) => (
+        <Card key={index}>
+          {card.headerFields
+            .filter((headerField) => headerField.active)
+            .map((headerField, headerIndex) => (
+              <div key={headerIndex}>
+                {headerField.jsonPath === "ScreenHeading" ? <Header>{headerField.label}</Header> : <CardText>{headerField.label}</CardText>}
+              </div>
+            ))}
+
+          {card.fields
+            .filter((field) => field.active)
+            .map((field, fieldIndex) => (
+              <div key={fieldIndex} style={{ margin: "10px 0" }}>
+                <div>
+                  {field.label}
+                  {field.required && " *"}
+                </div>
+                {/* Call renderField function to render the specific component */}
+                {renderField(field , t)}
+              </div>
+            ))}
+        </Card>
+      ))}
+    </div>
+  );
+};
+
+
+
+export default AppPreview;
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignType.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignType.js
index ca8c7bf418..564489d33f 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignType.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignType.js
@@ -1,8 +1,9 @@
 import React, { useState, useMemo, useRef, useEffect, Fragment } from "react";
-import { UploadIcon, FileIcon, DeleteIconv2, Toast,  Header } from "@egovernments/digit-ui-react-components";
+import { UploadIcon, FileIcon, DeleteIconv2, Toast, Header } from "@egovernments/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
 import { LabelFieldPair } from "@egovernments/digit-ui-components";
-import { Button, CardText, Dropdown, ErrorMessage, PopUp, Stepper, TextBlock , Card} from "@egovernments/digit-ui-components";
+import { Button, CardText, Dropdown, ErrorMessage, PopUp, Stepper, TextBlock, Card } from "@egovernments/digit-ui-components";
+import AppPreview from "./AppPreview";
 
 const CampaignSelection = ({ onSelect, formData, formState, ...props }) => {
   const { t } = useTranslation();
@@ -15,9 +16,10 @@ const CampaignSelection = ({ onSelect, formData, formState, ...props }) => {
   const [error, setError] = useState(null);
   const [startValidation, setStartValidation] = useState(null);
   const [showPopUp, setShowPopUp] = useState(null);
+  const [showPopUp1, setShowPopUp1] = useState(null);
   const [canUpdate, setCanUpdate] = useState(null);
   const searchParams = new URLSearchParams(location.search);
-  const [currentStep , setCurrentStep] = useState(1);
+  const [currentStep, setCurrentStep] = useState(1);
   const currentKey = searchParams.get("key");
   const source = searchParams.get("source");
   const [key, setKey] = useState(() => {
@@ -156,7 +158,44 @@ const CampaignSelection = ({ onSelect, formData, formState, ...props }) => {
                 <div>{t(`CAMPAIGN_TYPE_${beneficiaryType}`)}</div>
               </LabelFieldPair>
             )}
+            {/* <Button
+              type={"button"}
+              size={"large"}
+              variation={"secondary"}
+              label={t("PREVIEW")}
+              onClick={() => {
+                setShowPopUp1(true);
+              }}
+            /> */}
           </Card>
+          {showPopUp1 && (
+            <PopUp
+              className={"custom-pop-up"}
+              type={"default"}
+              heading={t("CHECKLIST_PREVIEW")}
+              children={[]}
+              onOverlayClick={() => {
+                setShowPopUp1(false);
+              }}
+              onClose={() => {
+                setShowPopUp1(false);
+              }}
+              footerChildren={[
+                <Button
+                  type={"button"}
+                  size={"large"}
+                  variation={"primary"}
+                  label={t("CLOSE")}
+                  onClick={() => {
+                    setShowPopUp1(false);
+                  }}
+                />,
+              ]}
+              sortFooterChildren={true}
+            >
+              <AppPreview />
+            </PopUp>
+          )}
         </div>
         {showPopUp && (
           <PopUp
@@ -203,7 +242,6 @@ const CampaignSelection = ({ onSelect, formData, formState, ...props }) => {
         )}
       </div>
     </>
-
   );
 };