diff --git a/app/client/src/components/designSystems/blueprint/IframeComponent.tsx b/app/client/src/components/designSystems/blueprint/IframeComponent.tsx
index 9ad03cc783..7e7444c283 100644
--- a/app/client/src/components/designSystems/blueprint/IframeComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/IframeComponent.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 
 import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
@@ -11,7 +11,13 @@ interface IframeContainerProps {
 }
 
 export const IframeContainer = styled.div<IframeContainerProps>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 100%;
+  background-color: #ffffff;
+  font-weight: bold;
+
   iframe {
     width: 100%;
     height: 100%;
@@ -49,6 +55,8 @@ function IframeComponent(props: IframeComponentProps) {
     title,
   } = props;
 
+  const [message, setMessage] = useState("");
+
   useEffect(() => {
     // add a listener
     window.addEventListener("message", onMessageReceived, false);
@@ -59,6 +67,11 @@ function IframeComponent(props: IframeComponentProps) {
 
   useEffect(() => {
     onURLChanged(source);
+    if (!source) {
+      setMessage("Valid source url is required");
+    } else {
+      setMessage("");
+    }
   }, [source]);
 
   return (
@@ -67,7 +80,7 @@ function IframeComponent(props: IframeComponentProps) {
       borderOpacity={borderOpacity}
       borderWidth={borderWidth}
     >
-      <iframe src={source} title={title} />
+      {message ? message : <iframe src={source} title={title} />}
     </IframeContainer>
   );
 }