diff --git a/packages/web/app/feedback/page.tsx b/packages/web/app/feedback/page.tsx
index c8a7e8fe..141c08df 100644
--- a/packages/web/app/feedback/page.tsx
+++ b/packages/web/app/feedback/page.tsx
@@ -2,10 +2,10 @@
 
 // Import necessary modules and components
 import ThreeCardLayout from "../../components/ThreeCardLayout";
-import { supabase } from "../../lib/supabase/supabaseClient";
 // import NextButton from '@/components/NextButton';
 import { ICard } from "@/lib/api";
 import { TABLES } from "@/lib/supabase/db";
+import { supabase } from "@/lib/supabase/supabaseClient";
 import { useEffect, useState } from "react";
 
 export const dynamic = "force-dynamic";
@@ -13,15 +13,15 @@ export const dynamic = "force-dynamic";
 export default function UserFeedback() {
   // const [currentIndex, setCurrentIndex] = useState<number>(randint(0,177));
   const [userName, setUserName] = useState("");
-  const [currentIndex, setCurrentIndex] = useState<number>(0);
   const [answered, setAnswered] = useState<Set<number>>(new Set());
   const [fullData, setFullData] = useState<Array<Array<ICard>> | null>(null);
+  const [cards, setCards] = useState<ICard[]>([]);
 
   const [cardArray, setCardArray] = useState<Array<Array<ICard>> | null>(null);
 
   // Not the best way to do it-- we really should make each of these a new page and the next/prev buttons
   // should be linked to the next/prev page. But this is a quick fix for now.
-  const question_idArray = Array.from({ length: 291 }, (_, index) => index);
+  // const question_idArray = Array.from({ length: 291 }, (_, index) => index);
 
   // const handlePrevClick = () => {
   //   if (fullData) {
@@ -35,6 +35,10 @@ export default function UserFeedback() {
   //   }
   // };
 
+  const randQuestionId = () => {
+    return Math.floor(Math.random() * 291);
+  };
+
   const shuffleArray = (array: Number[]) => {
     for (let i = array.length - 1; i > 0; i--) {
       const j = Math.floor(Math.random() * (i + 1));
@@ -42,18 +46,19 @@ export default function UserFeedback() {
     }
     return array;
   };
-  
-  const shuffledQuestionIds = shuffleArray(question_idArray);
 
+  // const shuffledQuestionIds = shuffleArray(question_idArray);
+  const [currentIndex, setCurrentIndex] = useState<number>(0);
+  // console.log(`index ${currentIndex}, val ${shuffledQuestionIds[0]}`);
   const handleNextClick = () => {
-    if (fullData) {
-      setCardArray(fullData);
-      //wraps around
-      setCurrentIndex((currentIndex + 1) % question_idArray.length);
-      setAnswered(new Set());
-    } else {
-      alert("Please wait for the rest of the cards to finish loading...");
-    }
+    // if (fullData) {
+    setCardArray(fullData);
+    //wraps around
+    setCurrentIndex(currentIndex + 1);
+    setAnswered(new Set());
+    // } else {
+    //   alert("Please wait for the rest of the cards to finish loading...");
+    // }
   };
 
   //const handleNameChange = (e) => {
@@ -63,14 +68,16 @@ export default function UserFeedback() {
 
   useEffect(() => {
     const getCard = async () => {
+      const randId = randQuestionId();
+      console.log("Fetching cards " + randId);
       try {
         const cardsArray: Array<Array<ICard>> = [];
-        const { data: cards, error } = await supabase
+        const { data: newCards, error } = await supabase
           .from(TABLES.FEEDBACK_CARDS)
           .select("*")
-          .eq("question_id", shuffledQuestionIds[0]);
-        if (cards) {
-          cardsArray.push(cards);
+          .eq("question_id", randId);
+        if (newCards) {
+          setCards(newCards);
         }
         setCardArray(cardsArray);
         console.log(cards);
@@ -78,38 +85,38 @@ export default function UserFeedback() {
         console.error("Error fetching cards: ", error);
         // Handle the error appropriately in your UI
       }
-      getCards();
+      // getCards();
     };
     getCard();
-  }, []); // Run this effect only once when the component mounts
+  }, [currentIndex]); // Run this effect only once when the component mounts
 
-  const getCards = async () => {
-    const cardsArray: Array<Array<ICard>> = [];
-    try {
-      for (let i = 1; i < question_idArray.length; i++) {
-        const { data: cards, error } = await supabase
-          .from(TABLES.FEEDBACK_CARDS)
-          .select("*")
-          .eq("question_id", shuffledQuestionIds[i]);
+  // const getCards = async () => {
+  //   const cardsArray: Array<Array<ICard>> = [];
+  //   try {
+  //     for (let i = 1; i < question_idArray.length; i++) {
+  //       const { data: cards, error } = await supabase
+  //         .from(TABLES.FEEDBACK_CARDS)
+  //         .select("*")
+  //         .eq("question_id", shuffledQuestionIds[i]);
 
-        if (error) {
-          console.error("Error fetching cards: ", error);
-          // Handle the error appropriately in your UI
-        }
-        console.log(cards);
+  //       if (error) {
+  //         console.error("Error fetching cards: ", error);
+  //         // Handle the error appropriately in your UI
+  //       }
+  //       // console.log(cards);
 
-        if (cards) {
-          cardsArray.push(cards);
-        }
-      }
-      setFullData(cardsArray);
-      // console.log(fullData);
-      //setCurrentIndex(Math.floor(Math.random() * cardsArray.length));
-    } catch (error) {
-      console.error("Error fetching cards: ", error);
-      // Handle the error appropriately in your UI
-    }
-  };
+  //       if (cards) {
+  //         cardsArray.push(cards);
+  //       }
+  //     }
+  //     setFullData(cardsArray);
+  //     // console.log(fullData);
+  //     //setCurrentIndex(Math.floor(Math.random() * cardsArray.length));
+  //   } catch (error) {
+  //     console.error("Error fetching cards: ", error);
+  //     // Handle the error appropriately in your UI
+  //   }
+  // };
 
   if (!cardArray) {
     return <div>Loading...</div>;
@@ -134,7 +141,7 @@ export default function UserFeedback() {
           </div>
         </div>
         <ThreeCardLayout
-          cards={cardArray[currentIndex]}
+          cards={cards}
           userName={userName}
           answered={answered}
           setAnswered={setAnswered}
diff --git a/packages/web/components/Citation.tsx b/packages/web/components/Citation.tsx
index 23e47aef..64958a91 100644
--- a/packages/web/components/Citation.tsx
+++ b/packages/web/components/Citation.tsx
@@ -9,6 +9,7 @@ import "./Citation.css";
 interface CitationProps {
   citation: any;
   index: number;
+  fullscreen?: boolean;
 }
 
 const citationKeyMap: { [key: string]: string } = {
@@ -18,7 +19,11 @@ const citationKeyMap: { [key: string]: string } = {
   source_url: "Source URL",
 };
 
-const Citation = ({ citation: originalCitation, index }: CitationProps) => {
+const Citation = ({
+  citation: originalCitation,
+  index,
+  fullscreen = false,
+}: CitationProps) => {
   const hasMetadata = Object.values(originalCitation).some(
     (value) => value !== null && value !== ""
   );
@@ -35,7 +40,11 @@ const Citation = ({ citation: originalCitation, index }: CitationProps) => {
 
   const isYoutube = isYouTubeURL(source_url) && getYouTubeThumbnail(source_url);
   return (
-    <div className="mb-6 w-full space-y-1 rounded-2xl p-2 text-primary lg:w-1/2">
+    <div
+      className={`mb-6 w-full space-y-1 rounded-2xl p-2 text-primary ${
+        fullscreen ? "" : "lg:w-1/2"
+      }`}
+    >
       <div>
         <p className="font-bold lg:text-lg">
           #{index + 1}: {title}
diff --git a/packages/web/components/ThreeCardLayout.tsx b/packages/web/components/ThreeCardLayout.tsx
index 95a902e2..5fd40aec 100644
--- a/packages/web/components/ThreeCardLayout.tsx
+++ b/packages/web/components/ThreeCardLayout.tsx
@@ -13,8 +13,8 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useState } from "react";
-import CommentBox from "./CommentBoxes";
 import Citation from "./Citation";
+import CommentBox from "./CommentBoxes";
 
 const criteria = [
   { id: "Accuracy", description: "Accuracy" },
@@ -195,29 +195,48 @@ export default function ThreeCardLayout({
                           {element.response}
                         </p>
                       ))}
-                      {card.citations && card.citations.length > 0 && (
-                        <div className="dropdown-container">
-                          <div
-                            className="dropdown-header"
-                            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-                          >
-                            Citations
-                            <FontAwesomeIcon
-                              className={`ml-2 h-[16px] w-[16px] transition-transform transform ${
-                                isDropdownOpen ? 'rotate-180' : ''
-                              }`}
-                              icon={faChevronDown}
-                            />
-                          </div>
-                          {isDropdownOpen && (
-                            <div className="dropdown-content">
-                              {card.citations.map((citation, index) => (
-                                <Citation citation={citation} index={index} key={index} />
-                              ))}
-                            </div>
-                          )}
+                    {card.citations && card.citations.length > 0 && (
+                      <div className="dropdown-container">
+                        <div
+                          className="dropdown-header"
+                          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                        >
+                          Citations
+                          <FontAwesomeIcon
+                            className={`ml-2 h-[16px] w-[16px] transform transition-transform ${
+                              isDropdownOpen ? "rotate-180" : ""
+                            }`}
+                            icon={faChevronDown}
+                          />
                         </div>
-                      )}
+                        {isDropdownOpen && (
+                          <div className="dropdown-content">
+                            {card.citations.map((citation, index) => {
+                              const {
+                                URL: source_url,
+                                Name: source_name,
+                                Title: source_title,
+                                Published: source_publish_date,
+                              } = citation as any;
+                              const adaptedCitation = {
+                                source_name,
+                                source_publish_date,
+                                source_title,
+                                source_url,
+                              };
+                              return (
+                                <Citation
+                                  citation={adaptedCitation}
+                                  index={index}
+                                  key={index}
+                                  fullscreen={true}
+                                />
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    )}
                   </div>
                 </div>