diff --git a/src/components/cards-modal/cards-modal.scss b/src/components/cards-modal/cards-modal.scss
index 1927285ef..a02494219 100644
--- a/src/components/cards-modal/cards-modal.scss
+++ b/src/components/cards-modal/cards-modal.scss
@@ -23,7 +23,7 @@
 
     background: white;
     border-radius: 8px;
-    width: 640px;
+    width: 656px;
 
     box-shadow: 0 0 0 4px $ui-blue-25percent;
 
diff --git a/src/views/ideas/ideas.jsx b/src/views/ideas/ideas.jsx
index d9cfbc69a..1f7d81486 100644
--- a/src/views/ideas/ideas.jsx
+++ b/src/views/ideas/ideas.jsx
@@ -113,9 +113,12 @@ const Ideas = () => {
     return (
         <div>
             <div className="banner-wrapper">
-                <img
-                    alt={intl.formatMessage({id: 'ideas.headerImageDescription'})}
-                    src="/images/ideas/banner.svg"
+                <iframe
+                    src="https://scratch.mit.edu/projects/1093752362/embed"
+                    width="485"
+                    height="402"
+                    allowfullscreen
+                    className="ideas-project"
                 />
                 <div className="banner-description">
                     <div className="title">
diff --git a/src/views/ideas/ideas.scss b/src/views/ideas/ideas.scss
index 632acbb61..45531ac6d 100644
--- a/src/views/ideas/ideas.scss
+++ b/src/views/ideas/ideas.scss
@@ -17,6 +17,10 @@ $base-bg: $ui-white;
     padding: 3rem 0;
     background-color: $ui-aqua;
 
+    .ideas-project {
+        border: none;
+    }
+
     .banner-description {
         display: flex;
         flex-direction: column;
@@ -259,7 +263,7 @@ $base-bg: $ui-white;
 //4 columns
 @media #{$small} {
     .banner-wrapper {
-        img {
+        .ideas-project {
             display: none;
         }
     }