diff --git a/curriculum/challenges/english/blocks/lecture-best-practices-for-responsive-web-design/672cf06c8f46f9eb04db9832.md b/curriculum/challenges/english/blocks/lecture-best-practices-for-responsive-web-design/672cf06c8f46f9eb04db9832.md
index 0652a2a95c2..3b4d0ad7c7c 100644
--- a/curriculum/challenges/english/blocks/lecture-best-practices-for-responsive-web-design/672cf06c8f46f9eb04db9832.md
+++ b/curriculum/challenges/english/blocks/lecture-best-practices-for-responsive-web-design/672cf06c8f46f9eb04db9832.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-the-mobile-first-approach-in-responsive-web-design
 ---
 
-# --description--
+# --interactive--
 
 The mobile-first approach is a design philosophy and development strategy in responsive web design that prioritizes creating websites for mobile devices before designing for larger screens. This approach has gained significant traction in recent years, becoming a cornerstone of modern web development practices.
 
@@ -25,12 +25,18 @@ Designers must make critical decisions about what content is absolutely essentia
 
 Implementing a mobile-first approach typically involves using CSS media queries to progressively enhance the design for larger screens. Here's an example of how this might look in practice:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<div class="container">
+  <h1>Responsive Design</h1>
+  <p>This is a simple example of responsive design using media queries.</p>
+</div>
+```
+
 ```css
 /* Base styles for mobile */
-body {
-  font-size: 16px;
-}
-
 .container {
   width: 100%;
   padding: 10px;
@@ -39,7 +45,7 @@ body {
 /* Styles for larger screens */
 @media screen and (min-width: 768px) {
   body {
-    font-size: 18px;
+    font-size: 1.2rem;
   }
 
   .container {
@@ -56,6 +62,8 @@ body {
 }
 ```
 
+:::
+
 In this example, we start with base styles suitable for mobile devices. We then use media queries with `min-width` to add or modify styles for larger screens. This exemplifies the essence of mobile-first design in CSS: beginning with styles for the smallest screens and then progressively enhancing for larger ones.
 
 The mobile-first approach also aligns well with search engine optimization (SEO) strategies. Google, for instance, uses mobile-first indexing, meaning it predominantly uses the mobile version of the content for indexing and ranking.