diff --git a/client/src/components/job-detail-cards/job-detail-cards.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
index 8374dec90..204c956db 100644
--- a/client/src/components/job-detail-cards/job-detail-cards.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
@@ -47,7 +47,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
     md: "100%",
     lg: "75%",
     xl: "75%",
-    xxl: "60%"
+    xxl: "75%"
   };
   const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
 
diff --git a/client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx
index 88ebfdde7..3129eaab7 100644
--- a/client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx
@@ -3,6 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { GenerateThumbUrl } from "../jobs-documents-gallery/job-documents.utility";
 import CardTemplate from "./job-detail-cards.template.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 
 export default function JobDetailCardsDocumentsComponent({ loading, data }) {
   const { t } = useTranslation();
@@ -20,15 +21,17 @@ export default function JobDetailCardsDocumentsComponent({ loading, data }) {
       title={t("jobs.labels.cards.documents")}
       extraLink={`/manage/jobs/${data.id}?tab=documents`}
     >
-      {data.documents.length > 0 ? (
-        <Carousel autoplay>
-          {data.documents.map((item) => (
-            <img key={item.id} src={GenerateThumbUrl(item)} alt={item.name} />
-          ))}
-        </Carousel>
-      ) : (
-        <div>{t("documents.errors.nodocuments")}</div>
-      )}
+      <UpsellComponent disableMask upsell={upsellEnum().media.general}>
+        {data.documents.length > 0 ? (
+          <Carousel autoplay>
+            {data.documents.map((item) => (
+              <img key={item.id} src={GenerateThumbUrl(item)} alt={item.name} />
+            ))}
+          </Carousel>
+        ) : (
+          <div>{t("documents.errors.nodocuments")}</div>
+        )}
+      </UpsellComponent>
     </CardTemplate>
   );
 }
diff --git a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
index e3b19eac4..89e0efa43 100644
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
@@ -892,16 +892,16 @@ export function JobsDetailHeaderActions({
       key: "postbills",
       id: "job-actions-postbills",
       disabled: !job.converted,
-      label: <LockerWrapperComponent featureName="bill">{t("jobs.actions.postbills")}</LockerWrapperComponent>,
+      label: <LockerWrapperComponent featureName="bills">{t("jobs.actions.postbills")}</LockerWrapperComponent>,
       onClick: () => {
         logImEXEvent("job_header_enter_bills");
-
-        setBillEnterContext({
-          actions: { refetch: refetch },
-          context: {
-            job: job
-          }
-        });
+        HasFeatureAccess({ featureName: "bills", bodyshop }) &&
+          setBillEnterContext({
+            actions: { refetch: refetch },
+            context: {
+              job: job
+            }
+          });
       }
     },
 
diff --git a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
index ae9f367ae..0dcc18855 100644
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
@@ -133,7 +133,7 @@ function JobsDocumentsComponent({
         {!hasMediaAccess && (
           <Col span={24}>
             <Card>
-              <UpsellComponent upsell={upsellEnum().media.general} />
+              <UpsellComponent disableMask upsell={upsellEnum().media.general} />
             </Card>
           </Col>
         )}
diff --git a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx
index 4c0fe9f00..8c6991d94 100644
--- a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx
+++ b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx
@@ -1,5 +1,5 @@
 import { FileExcelFilled, SyncOutlined } from "@ant-design/icons";
-import { Alert, Button, Card, Space } from "antd";
+import { Alert, Button, Card, Col, Row, Space } from "antd";
 import React, { useEffect, useState } from "react";
 import { Gallery } from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
@@ -18,6 +18,7 @@ import JobsDocumentsLocalGallerySelectAllComponent from "./jobs-documents-local-
 import Lightbox from "react-image-lightbox";
 import "react-image-lightbox/style.css";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -88,95 +89,117 @@ export function JobsDocumentsLocalGallery({
   const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
   return (
     <div>
-      <Space wrap>
-        <Button
-          onClick={() => {
-            if (job) {
-              if (invoice_number) {
-                getBillMedia({ jobid: job.id, invoice_number });
-              } else {
-                getJobMedia(job.id);
-              }
-            }
-          }}
-        >
-          <SyncOutlined />
-        </Button>
-        <a href={CreateExplorerLinkForJob({ jobid: job.id })}>
-          <Button>{t("documents.labels.openinexplorer")}</Button>
-        </a>
-        <JobsDocumentsLocalGalleryReassign jobid={job.id} />
-        <JobsDocumentsLocalGallerySelectAllComponent jobid={job.id} />
-        <JobsLocalGalleryDownloadButton job={job} />
-        <JobsDocumentsLocalDeleteButton jobid={job.id} />
-      </Space>
-      <Card>
-        <DocumentsLocalUploadComponent job={job} invoice_number={invoice_number} vendorid={vendorid} allowAllTypes />
-      </Card>
-      <Card title={t("jobs.labels.documents-images")}>
-        <Gallery
-          images={jobMedia.images}
-          onSelect={(index, image) => {
-            toggleMediaSelected({ jobid: job.id, filename: image.filename });
-          }}
-          {...(optimized && {
-            customControls: [
-              <Alert style={{ margin: "4px" }} message={t("documents.labels.optimizedimage")} type="success" />
-            ]
-          })}
-          onClick={(index) => {
-            setModalState({ open: true, index: index });
-            // const media = allMedia[job.id].find(
-            //   (m) => m.optimized === item.src
-            // );
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Space wrap>
+            <Button
+              onClick={() => {
+                if (job) {
+                  if (invoice_number) {
+                    getBillMedia({ jobid: job.id, invoice_number });
+                  } else {
+                    getJobMedia(job.id);
+                  }
+                }
+              }}
+            >
+              <SyncOutlined />
+            </Button>
+            <a href={CreateExplorerLinkForJob({ jobid: job.id })}>
+              <Button>{t("documents.labels.openinexplorer")}</Button>
+            </a>
+            <JobsDocumentsLocalGalleryReassign jobid={job.id} />
+            <JobsDocumentsLocalGallerySelectAllComponent jobid={job.id} />
+            <JobsLocalGalleryDownloadButton job={job} />
+            <JobsDocumentsLocalDeleteButton jobid={job.id} />
+          </Space>
+        </Col>
+        {!hasMediaAccess && (
+          <Col span={24}>
+            <Card>
+              <UpsellComponent disableMask upsell={upsellEnum().media.general} />
+            </Card>
+          </Col>
+        )}
+        <Col span={24}>
+          <Card>
+            <DocumentsLocalUploadComponent
+              job={job}
+              invoice_number={invoice_number}
+              vendorid={vendorid}
+              allowAllTypes
+            />
+          </Card>
+        </Col>
+        <Col span={24}>
+          <Card title={t("jobs.labels.documents-images")}>
+            <Gallery
+              images={jobMedia.images}
+              onSelect={(index, image) => {
+                toggleMediaSelected({ jobid: job.id, filename: image.filename });
+              }}
+              {...(optimized && {
+                customControls: [
+                  <Alert style={{ margin: "4px" }} message={t("documents.labels.optimizedimage")} type="success" />
+                ]
+              })}
+              onClick={(index) => {
+                setModalState({ open: true, index: index });
+                // const media = allMedia[job.id].find(
+                //   (m) => m.optimized === item.src
+                // );
 
-            // window.open(
-            //   media ? media.fullsize : item.fullsize,
-            //   "_blank",
-            //   "toolbar=0,location=0,menubar=0"
-            // );
-          }}
-        />
-      </Card>
-      <Card title={t("jobs.labels.documents-other")}>
-        <Gallery
-          images={jobMedia.other}
-          thumbnailStyle={() => {
-            return {
-              backgroundImage: <FileExcelFilled />,
-              height: "100%",
-              width: "100%",
-              cursor: "pointer"
-            };
-          }}
-          onClick={(index) => {
-            window.open(jobMedia.other[index].fullsize, "_blank", "toolbar=0,location=0,menubar=0");
-          }}
-          onSelect={(index, image) => {
-            toggleMediaSelected({ jobid: job.id, filename: image.filename });
-          }}
-        />
-      </Card>
-      {modalState.open && (
-        <Lightbox
-          mainSrc={jobMedia.images[modalState.index].fullsize}
-          nextSrc={jobMedia.images[(modalState.index + 1) % jobMedia.images.length].fullsize}
-          prevSrc={jobMedia.images[(modalState.index + jobMedia.images.length - 1) % jobMedia.images.length].fullsize}
-          onCloseRequest={() => setModalState({ open: false, index: 0 })}
-          onMovePrevRequest={() =>
-            setModalState({
-              ...modalState,
-              index: (modalState.index + jobMedia.images.length - 1) % jobMedia.images.length
-            })
-          }
-          onMoveNextRequest={() =>
-            setModalState({
-              ...modalState,
-              index: (modalState.index + 1) % jobMedia.images.length
-            })
-          }
-        />
-      )}
+                // window.open(
+                //   media ? media.fullsize : item.fullsize,
+                //   "_blank",
+                //   "toolbar=0,location=0,menubar=0"
+                // );
+              }}
+            />
+          </Card>
+        </Col>
+        <Col span={24}>
+          <Card title={t("jobs.labels.documents-other")}>
+            <Gallery
+              images={jobMedia.other}
+              thumbnailStyle={() => {
+                return {
+                  backgroundImage: <FileExcelFilled />,
+                  height: "100%",
+                  width: "100%",
+                  cursor: "pointer"
+                };
+              }}
+              onClick={(index) => {
+                window.open(jobMedia.other[index].fullsize, "_blank", "toolbar=0,location=0,menubar=0");
+              }}
+              onSelect={(index, image) => {
+                toggleMediaSelected({ jobid: job.id, filename: image.filename });
+              }}
+            />
+          </Card>
+        </Col>
+        {modalState.open && (
+          <Lightbox
+            mainSrc={jobMedia.images[modalState.index].fullsize}
+            nextSrc={jobMedia.images[(modalState.index + 1) % jobMedia.images.length].fullsize}
+            prevSrc={jobMedia.images[(modalState.index + jobMedia.images.length - 1) % jobMedia.images.length].fullsize}
+            onCloseRequest={() => setModalState({ open: false, index: 0 })}
+            onMovePrevRequest={() =>
+              setModalState({
+                ...modalState,
+                index: (modalState.index + jobMedia.images.length - 1) % jobMedia.images.length
+              })
+            }
+            onMoveNextRequest={() =>
+              setModalState({
+                ...modalState,
+                index: (modalState.index + 1) % jobMedia.images.length
+              })
+            }
+          />
+        )}
+      </Row>
     </div>
   );
 }
diff --git a/client/src/components/shop-info/shop-intellipay-config.component.jsx b/client/src/components/shop-info/shop-intellipay-config.component.jsx
index 30c12cfa2..526adbe2a 100644
--- a/client/src/components/shop-info/shop-intellipay-config.component.jsx
+++ b/client/src/components/shop-info/shop-intellipay-config.component.jsx
@@ -1,4 +1,4 @@
-import { Alert, Form, InputNumber, Switch } from "antd";
+import { Alert, Form, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
diff --git a/client/src/pages/jobs-checklist-view/jobs-checklist-view.page.jsx b/client/src/pages/jobs-checklist-view/jobs-checklist-view.page.jsx
index c9eda5480..cc6bf193f 100644
--- a/client/src/pages/jobs-checklist-view/jobs-checklist-view.page.jsx
+++ b/client/src/pages/jobs-checklist-view/jobs-checklist-view.page.jsx
@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Col, Row, Typography } from "antd";
+import { Card, Col, Row, Typography } from "antd";
 import dayjs from "../../utils/day";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -14,6 +14,8 @@ import { QUERY_JOB_CHECKLISTS } from "../../graphql/jobs.queries";
 import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -73,38 +75,47 @@ export function JobsChecklistViewContainer({ bodyshop, setBreadcrumbs, setSelect
   );
 
   return (
-    <RbacWrapper action="jobs:checklist-view">
-      <Row gutter={[16, 16]}>
-        <Col span={12}>
-          <Typography.Title level={4}>{t("jobs.labels.intakechecklist")}</Typography.Title>
-          {data.jobs_by_pk.intakechecklist && data.jobs_by_pk.intakechecklist.form && (
-            <>
-              <JobChecklistForm
-                formItems={data.jobs_by_pk.intakechecklist && data.jobs_by_pk.intakechecklist.form}
-                type="intake"
-                job={data.jobs_by_pk}
-                readOnly
-              />
-              <CompletedBy checklist={data.jobs_by_pk.intakechecklist} />
-            </>
-          )}
-        </Col>
-        <Col span={12}>
-          <Typography.Title level={4}>{t("jobs.labels.deliverchecklist")}</Typography.Title>
-          {data.jobs_by_pk.deliverchecklist && data.jobs_by_pk.deliverchecklist.form && (
-            <>
-              <JobChecklistForm
-                formItems={data.jobs_by_pk.deliverchecklist && data.jobs_by_pk.deliverchecklist.form}
-                type="deliver"
-                job={data.jobs_by_pk}
-                readOnly
-              />
-              <CompletedBy checklist={data.jobs_by_pk.deliverchecklist} />
-            </>
-          )}
-        </Col>
-      </Row>
-    </RbacWrapper>
+    <FeatureWrapperComponent
+      featureName="checklist"
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum().checklist.general} />
+        </Card>
+      }
+    >
+      <RbacWrapper action="jobs:checklist-view">
+        <Row gutter={[16, 16]}>
+          <Col span={12}>
+            <Typography.Title level={4}>{t("jobs.labels.intakechecklist")}</Typography.Title>
+            {data.jobs_by_pk.intakechecklist && data.jobs_by_pk.intakechecklist.form && (
+              <>
+                <JobChecklistForm
+                  formItems={data.jobs_by_pk.intakechecklist && data.jobs_by_pk.intakechecklist.form}
+                  type="intake"
+                  job={data.jobs_by_pk}
+                  readOnly
+                />
+                <CompletedBy checklist={data.jobs_by_pk.intakechecklist} />
+              </>
+            )}
+          </Col>
+          <Col span={12}>
+            <Typography.Title level={4}>{t("jobs.labels.deliverchecklist")}</Typography.Title>
+            {data.jobs_by_pk.deliverchecklist && data.jobs_by_pk.deliverchecklist.form && (
+              <>
+                <JobChecklistForm
+                  formItems={data.jobs_by_pk.deliverchecklist && data.jobs_by_pk.deliverchecklist.form}
+                  type="deliver"
+                  job={data.jobs_by_pk}
+                  readOnly
+                />
+                <CompletedBy checklist={data.jobs_by_pk.deliverchecklist} />
+              </>
+            )}
+          </Col>
+        </Row>
+      </RbacWrapper>
+    </FeatureWrapperComponent>
   );
 }