diff --git a/classes/output/renderer.php b/classes/output/renderer.php
new file mode 100644
index 0000000..77f43aa
--- /dev/null
+++ b/classes/output/renderer.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace mod_exp360\output;
+
+defined('MOODLE_INTERNAL') || die();
+
+use plugin_renderer_base;
+
+class renderer extends plugin_renderer_base {
+
+    private static $modals_rendered = false;
+
+    public function render_activity($activity_id) {
+        $script = "<script data-activity-id='$activity_id' src='/mod/exp360/script.js'></script>";
+        return $script;
+    }
+
+    public function render_modals() {
+        if (self::$modals_rendered) {
+            return '';
+        }
+
+        self::$modals_rendered = true;
+
+        $modalHTML = '
+            <div id="fullScreenModal" class="modal" tabindex="-1"
+              aria-labelledby="modalLabel" aria-hidden="true">
+              <div style="background-color:#294084;" class="modal-dialog modal-fullscreen">
+                <div style="background-color:#294084;" class="modal-content">
+                  <div style="background-color:#294084;" class="modal-body"><iframe style="background-color:#294084;" id="modal-iframe"></iframe></div>
+                </div>
+              </div>
+            </div>
+            <div id="regularModal" style="background: rgb(255,255,255,.7);" class="modal" tabindex="-2"
+              aria-labelledby="modalLabel" aria-hidden="true">
+              <div style="background-color:#294084;height:90%;" class="modal-dialog modal-lg">
+                <div style="background-color:#294084;height:100%;" class="modal-content">
+                  <div style="background-color:#294084;" class="modal-body"><iframe style="background-color:#294084;width:100%;height:100%;" id="regular-modal-iframe"></iframe></div>
+                </div>
+              </div>
+            </div>
+        ';
+        return $modalHTML;
+    }
+}
\ No newline at end of file
diff --git a/lib.php b/lib.php
index da71247..5ac58af 100644
--- a/lib.php
+++ b/lib.php
@@ -45,16 +45,18 @@ function exp360_delete_instance($id)
 
 function mod_exp360_cm_info_dynamic(cm_info $cm)
 {
-    global $PAGE, $DB;
+    global $PAGE;
 
     if ($cm->modname !== 'exp360') {
         return;
     }
 
-    $script = "<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js'></script><script data-activity-id='$cm->id' src='/mod/exp360/script.js'></script>";
+    $renderer = $PAGE->get_renderer('mod_exp360');
+    $modals = $renderer->render_modals();
+    $script = $renderer->render_activity($cm->id);
 
     $cm->set_no_view_link();
-    $cm->set_content($script);
+    $cm->set_content($script . $modals);
 }
 
 /**