diff --git a/CHANGELOG.md b/CHANGELOG.md
index e31fe95e2e..76ed9561a5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,7 @@ The types of changes are:
 - Updated privacy notice & experience forms to hide translation UI when user doesn't have translation feature [#4728](https://github.com/ethyca/fides/pull/4728), [#4734](https://github.com/ethyca/fides/pull/4734)
 - Custom privacy request fields now support list values [#4686](https://github.com/ethyca/fides/pull/4686)
 - Update when GPP API reports signal status: ready [#4635](https://github.com/ethyca/fides/pull/4635)
+- Update non-dismissable TCF and notice banners to show a black overlay and prevent scrolling [#4748](https://github.com/ethyca/fidesplus/pull/4748)
 - Cleanup config vars for preview in Admin-UI [#4745](https://github.com/ethyca/fides/pull/4745)
 
 ### Fixed
@@ -46,6 +47,10 @@ The types of changes are:
 - Added new script to allow recompiling of fides-js when the code changes [#4744](https://github.com/ethyca/fides/pull/4744)
 
 
+### Developer Experience
+- Added new script to allow recompiling of fides-js when the code changes [#4744](https://github.com/ethyca/fides/pull/4744)
+
+
 ## [2.32.0](https://github.com/ethyca/fides/compare/2.31.1...2.32.0)
 
 ### Added
diff --git a/clients/fides-js/src/components/ConsentBanner.tsx b/clients/fides-js/src/components/ConsentBanner.tsx
index 7ab2ac73b7..7bc7d117a5 100644
--- a/clients/fides-js/src/components/ConsentBanner.tsx
+++ b/clients/fides-js/src/components/ConsentBanner.tsx
@@ -13,7 +13,7 @@ interface ButtonGroupProps {
 
 interface BannerProps {
   i18n: I18n;
-  dismissable: boolean | undefined;
+  dismissable: boolean;
   onOpen: () => void;
   onClose: () => void;
   bannerIsOpen: boolean;
diff --git a/clients/fides-js/src/components/Overlay.tsx b/clients/fides-js/src/components/Overlay.tsx
index 1444aff923..3df4b64ad5 100644
--- a/clients/fides-js/src/components/Overlay.tsx
+++ b/clients/fides-js/src/components/Overlay.tsx
@@ -27,6 +27,7 @@ import type { I18n } from "../lib/i18n";
 import ConsentModal from "./ConsentModal";
 import ConsentContent from "./ConsentContent";
 import "./fides.css";
+import { blockPageScrolling, unblockPageScrolling } from "../lib/ui-utils";
 
 interface RenderBannerProps {
   isOpen: boolean;
@@ -51,6 +52,7 @@ interface Props {
   renderModalContent: () => VNode;
   renderModalFooter: (props: RenderModalFooter) => VNode;
   onVendorPageClick?: () => void;
+  isUiBlocking: boolean;
 }
 
 const Overlay: FunctionComponent<Props> = ({
@@ -65,6 +67,7 @@ const Overlay: FunctionComponent<Props> = ({
   renderModalContent,
   renderModalFooter,
   onVendorPageClick,
+  isUiBlocking,
 }) => {
   const delayBannerMilliseconds = 100;
   const delayModalLinkMilliseconds = 200;
@@ -72,6 +75,18 @@ const Overlay: FunctionComponent<Props> = ({
   const [bannerIsOpen, setBannerIsOpen] = useState(false);
   const modalLinkRef = useRef<HTMLElement | null>(null);
 
+  useEffect(() => {
+    if (isUiBlocking && bannerIsOpen) {
+      blockPageScrolling();
+    } else {
+      unblockPageScrolling();
+    }
+
+    return () => {
+      unblockPageScrolling();
+    };
+  }, [isUiBlocking, bannerIsOpen]);
+
   const dispatchCloseEvent = useCallback(
     ({ saved = false }: { saved?: boolean }) => {
       dispatchFidesEvent("FidesModalClosed", cookie, options.debug, { saved });
@@ -177,9 +192,10 @@ const Overlay: FunctionComponent<Props> = ({
 
   return (
     <div>
-      {showBanner && bannerIsOpen && window.Fides.options.preventDismissal && (
+      {showBanner && bannerIsOpen && isUiBlocking && (
         <div className="fides-modal-overlay" />
       )}
+
       {showBanner
         ? renderBanner({
             isOpen: bannerIsOpen,
diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
index a0c41e57c1..e225434267 100644
--- a/clients/fides-js/src/components/fides.css
+++ b/clients/fides-js/src/components/fides.css
@@ -418,6 +418,10 @@ div#fides-consent-content .fides-modal-description {
   gap: 12px;
 }
 
+.fides-no-scroll {
+  overflow-y: hidden;
+}
+
 /* Responsive overlay */
 @media (max-width: 48em) {
   div.fides-modal-content,
diff --git a/clients/fides-js/src/components/notices/NoticeOverlay.tsx b/clients/fides-js/src/components/notices/NoticeOverlay.tsx
index 2662dd2252..046baa5c5e 100644
--- a/clients/fides-js/src/components/notices/NoticeOverlay.tsx
+++ b/clients/fides-js/src/components/notices/NoticeOverlay.tsx
@@ -235,6 +235,8 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
     return null;
   }
 
+  const isDismissable = !!experience.experience_config?.dismissable;
+
   return (
     <Overlay
       options={options}
@@ -242,12 +244,13 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
       i18n={i18n}
       cookie={cookie}
       savedConsent={savedConsent}
+      isUiBlocking={!isDismissable}
       onOpen={dispatchOpenOverlayEvent}
       onDismiss={handleDismiss}
       renderBanner={({ isOpen, onClose, onSave, onManagePreferencesClick }) => (
         <ConsentBanner
           bannerIsOpen={isOpen}
-          dismissable={experience.experience_config?.dismissable}
+          dismissable={isDismissable}
           onOpen={dispatchOpenBannerEvent}
           onClose={() => {
             onClose();
diff --git a/clients/fides-js/src/components/tcf/TcfOverlay.tsx b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
index a5c391535d..b324e00a99 100644
--- a/clients/fides-js/src/components/tcf/TcfOverlay.tsx
+++ b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
@@ -312,6 +312,8 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
     return null;
   }
 
+  const isDismissable = !!experience.experience_config?.dismissable;
+
   return (
     <Overlay
       options={options}
@@ -322,6 +324,7 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
       onVendorPageClick={() => {
         setActiveTabIndex(2);
       }}
+      isUiBlocking={!isDismissable}
       onOpen={dispatchOpenOverlayEvent}
       onDismiss={handleDismiss}
       renderBanner={({ isOpen, onClose, onSave, onManagePreferencesClick }) => {
@@ -332,7 +335,7 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
         return (
           <ConsentBanner
             i18n={i18n}
-            dismissable={experience.experience_config?.dismissable}
+            dismissable={isDismissable}
             bannerIsOpen={isOpen}
             onOpen={dispatchOpenBannerEvent}
             onClose={() => {
diff --git a/clients/fides-js/src/lib/ui-utils.ts b/clients/fides-js/src/lib/ui-utils.ts
new file mode 100644
index 0000000000..ca2aa90171
--- /dev/null
+++ b/clients/fides-js/src/lib/ui-utils.ts
@@ -0,0 +1,6 @@
+export const blockPageScrolling = () => {
+  document.body.classList.add("fides-no-scroll");
+};
+export const unblockPageScrolling = () => {
+  document.body.classList.remove("fides-no-scroll");
+};
diff --git a/docs/fides/docs/css/fides.css b/docs/fides/docs/css/fides.css
index 48ccd9ec52..3bfec43f2a 100644
--- a/docs/fides/docs/css/fides.css
+++ b/docs/fides/docs/css/fides.css
@@ -61,6 +61,8 @@ body {
     font-family: 'Source Sans Pro', sans-serif;
 }
 
+
+
 .md-header{
     background-color: var(--md-header-bg-color);
 }