diff --git a/packages/widgets/src/iframe/component.module.css b/packages/widgets/src/iframe/component.module.css
index 68bc009ab..c5a9dd479 100644
--- a/packages/widgets/src/iframe/component.module.css
+++ b/packages/widgets/src/iframe/component.module.css
@@ -1,7 +1,13 @@
-.iframe {
+.frame {
+  position: relative;
+  overflow: hidden;
   border-radius: var(--mantine-radius-sm);
+}
+
+.iframe {
   width: 100%;
   height: 100%;
+  zoom: var(--board-canvas-ui-scale, 1);
   border: none;
   background: none;
   background-color: transparent;
diff --git a/packages/widgets/src/iframe/component.tsx b/packages/widgets/src/iframe/component.tsx
index 3c311b88e..8304b14b3 100644
--- a/packages/widgets/src/iframe/component.tsx
+++ b/packages/widgets/src/iframe/component.tsx
@@ -19,7 +19,7 @@ export default function IFrameWidget({ options, isEditMode }: WidgetComponentPro
 
   return (
     <Stack h="100%" w="100%" gap={0}>
-      <Box style={{ flex: 1, minHeight: 0 }}>
+      <Box className={classes.frame} style={{ flex: 1, minHeight: 0 }}>
         <iframe
           loading="lazy"
           style={isEditMode ? { userSelect: "none", pointerEvents: "none" } : undefined}