diff --git a/docs/smartui-pdf-comparison.md b/docs/smartui-pdf-comparison.md
index 204c76331..1621bc38b 100644
--- a/docs/smartui-pdf-comparison.md
+++ b/docs/smartui-pdf-comparison.md
@@ -62,18 +62,15 @@ In the following section, we will walk you through the process of conducting you
 
 ## Getting Started with PDF Comparison
 
-  <iframe
-  src="https://app.storylane.io/share/cq92opbjnlxu"
-  width="100%"
-  height="100%"
-  allowFullScreen
-  loading="lazy"
-  importance="low"
-  title="LambdaTest Automation Testing Demo"
-  className="storylane-iframe"
-></iframe>
 
 
+<div className="storylane-iframe">
+  <script async src="https://js.storylane.io/js/v2/storylane.js"></script>
+  <div className="sl-embed">
+    <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/czorj4fbzohf?embed=inline" name="sl-embed" allow="fullscreen" allowfullscreen></iframe>
+  </div>
+</div>
+
 ## Step 1: Establishing a SmartUI Project
 
 To initiate a SmartUI PDF Comparison Project, adhere to the following instructions:
diff --git a/src/css/custom.css b/src/css/custom.css
index a66e11a33..4ecf0c903 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1881,4 +1881,5 @@ table th:not(:last-child), table td:not(:last-child){border-right: 1px solid #d4
 
 .support_container{display: flex;gap:100px}
 .docusaurus-theme-github-codeblock .theme-code-block{max-height: 500px;overflow: auto;}
-.storylane-iframe{min-height: 700px; margin-top: 50px; border-radius: 20px; margin: auto; max-width: 100%;}
\ No newline at end of file
+.storylane-iframe{position:relative;padding-bottom:calc(45.26% + 25px);width:100%;height:0;transform:scale(1)}
+.storylane-iframe .sl-demo{position:absolute;top:0;left:0;width:100%!important;height:100%!important;border:1px solid rgba(63,95,172,0.35);box-shadow: 0px 0px 18px rgba(26, 19, 72, 0.15);border-radius:10px;box-sizing:border-box;}
\ No newline at end of file