diff --git a/content-scripts/modules/expandable-card.js b/content-scripts/modules/expandable-card.js
index d3944e0..9c28b2d 100644
--- a/content-scripts/modules/expandable-card.js
+++ b/content-scripts/modules/expandable-card.js
@@ -3,6 +3,7 @@
  * @param {Element} innerContent
  * @param {Number} max_size
  */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const toggleExpandableCard = (innerContent, max_size) => {
     function clickEvent() {
         /** @type {Keyframe[]} */
@@ -12,7 +13,7 @@ const toggleExpandableCard = (innerContent, max_size) => {
                 [{ transform: "rotate(0)" }, { transform: "rotate(180deg)" }],
                 { duration: 300, fill: "forwards", easing: "ease-in" },
             );
-            innerContent.style.maxHeight = `${max_size}px`;
+            innerContent.style.maxHeight = `9999px`;
         } else {
             this.dataset.expanded = "false";
             this.animate(
diff --git a/content-scripts/pages/class_page.js b/content-scripts/pages/class_page.js
index 081d9e6..aa500d6 100644
--- a/content-scripts/pages/class_page.js
+++ b/content-scripts/pages/class_page.js
@@ -16,13 +16,11 @@ const titleClick = (table, title) => {
     }
 };
 
-const createPhotosDialog = async (title, index) => {
+const createPhotosDialog = async (url, index) => {
     const dialog = document.createElement("dialog");
     const wrapper = document.createElement("div");
     const closeButton = document.createElement("span");
 
-    const url = getPhotosLink(title);
-
     const html = await fetchSigarraPage(url);
     const table = html.querySelector("#layout0 > table");
 
@@ -41,13 +39,16 @@ const createPhotosDialog = async (title, index) => {
     return dialog;
 };
 
-const createPhotosButton = (icon, dialog) => {
+const createPhotosButton = (icon, url, classIndex) => {
     const button = document.createElement("span");
     button.appendChild(icon);
     button.classList.add("photosButton");
 
-    button.addEventListener("click", (event) => {
+    button.addEventListener("click", async (event) => {
         event.stopPropagation();
+        // TODO: THIS IS EXTREMELY HACKY! the url ends up here so that we are able to retrieve the page and create the dialog at the same time, only when the button is pressed. if you are refactoring this page, THERE MUST BE A BETTER WAY!
+        const dialog = await createPhotosDialog(url, classIndex);
+        document.body.appendChild(dialog);
         dialog.showModal();
     });
 
@@ -55,10 +56,19 @@ const createPhotosButton = (icon, dialog) => {
 };
 
 const getPhotosLink = (title) => {
+    console.log(title);
+
     return title.children[2].href;
 };
 
-const editTitle = async (title, table, dialog, enrolled, enrolledText) => {
+const editTitle = async (
+    title,
+    table,
+    enrolled,
+    enrolledText,
+    classIndex,
+    url,
+) => {
     const titleText = document.createElement("h3");
     const enrolledQnt = document.createElement("h3");
     const leftSide = document.createElement("div");
@@ -79,7 +89,11 @@ const editTitle = async (title, table, dialog, enrolled, enrolledText) => {
     titleText.innerText = className;
     leftSide.appendChild(classLinks[0]); // email button
 
-    const photosButton = createPhotosButton(classLinks[1].children[0], dialog); // photos button
+    const photosButton = createPhotosButton(
+        classLinks[1].children[0],
+        url,
+        classIndex,
+    ); // photos button
     leftSide.appendChild(photosButton);
 
     enrolledQnt.classList.add("classTitle");
@@ -121,12 +135,12 @@ const groupClasses = async (enrolledTable) => {
         const groupElement = document.createElement("section");
         const tableWrapperElement = document.createElement("div");
         const titleWrapperElement = document.createElement("div");
-        const photosDialog = await createPhotosDialog(title, classIndex);
 
         parent.insertBefore(groupElement, title);
         groupElement.classList.add("classWrapper");
         tableWrapperElement.classList.add("tableWrapper");
         titleWrapperElement.classList.add("titleWrapper");
+        const url = getPhotosLink(title);
 
         title.remove();
         table.remove();
@@ -135,14 +149,14 @@ const groupClasses = async (enrolledTable) => {
         tableWrapperElement.appendChild(table);
         groupElement.appendChild(titleWrapperElement);
         groupElement.appendChild(tableWrapperElement);
-        groupElement.appendChild(photosDialog);
 
         editTitle(
             titleWrapperElement,
             tableWrapperElement,
-            photosDialog,
             enrolled,
             enrolledText,
+            classIndex,
+            url,
         );
         titleWrapperElement.dataset.expand = "true";