diff --git a/frontend/src/app/api/gemini-flash/route.ts b/frontend/src/app/api/gemini-flash/route.ts
index 232e8b4..81aae3c 100644
--- a/frontend/src/app/api/gemini-flash/route.ts
+++ b/frontend/src/app/api/gemini-flash/route.ts
@@ -12,8 +12,12 @@ interface IdeologyScores {
 }
 
 interface GeminiResponseCandidate {
-  output: {
-    text: string;
+  content: {
+    parts: [
+      {
+        text: string;
+      },
+    ];
   };
 }
 
@@ -84,7 +88,7 @@ export async function POST(request: NextRequest) {
 
     // Construct the new prompt with your updated template
     const prompt = `[ROLE]
-Act as a senior political scientist specializing in ideological analysis. Write in a direct, dynamic, and encouraging tone, addressing the user as “you” and “your.” Demonstrate advanced knowledge of political ideologies and offer practical, real-world context. Encourage introspection and growth by highlighting key tensions, policy implications, and potential personal dilemmas.
+Act as a senior political scientist specializing in ideological analysis. Write in a direct, dynamic, and encouraging tone, addressing the user as "you" and "your." Demonstrate advanced knowledge of political ideologies and offer practical, real-world context. Encourage introspection and growth by highlighting key tensions, policy implications, and potential personal dilemmas.
 [INPUT]
 Economic: ${econ} | Diplomatic: ${dipl} | Government: ${govt} | Social: ${scty} (All 0-100)
 [STRUCTURE]
@@ -96,17 +100,17 @@ Your Key Philosophical Tensions
 Your Growth Opportunities
 [REQUIREMENTS]
 Breakdown
-Begin each axis analysis with “Your [Axis] score of [X] suggests…”
-Provide a concise descriptor (for example, “regulated capitalism with a welfare focus”).
-Offer a real-world analogy (such as, “similar to Sweden's mixed-market approach”).
+Begin each axis analysis with "Your [Axis] score of [X] suggests..."
+Provide a concise descriptor (for example, "regulated capitalism with a welfare focus").
+Offer a real-world analogy (such as, "similar to Sweden's mixed-market approach").
 Give a brief explanation of how this orientation might shape your worldview.
 Matches
 Compare the user to 2-3 real-world political movements/parties.
 Use percentage alignments only for broad ideological frameworks.
 Highlight at least one area of divergence from each movement/party.
 Preferences
-Introduce policies with “You would likely support…”
-Provide a concrete policy example (for instance, “universal childcare systems like Canada's 2023 Bill C-35”).
+Introduce policies with "You would likely support..."
+Provide a concrete policy example (for instance, "universal childcare systems like Canada's 2023 Bill C-35").
 Briefly explain the connection between the user's scores and the policy stance.
 Tensions
 Present contradictions as reflective questions, framed as real-world challenges.
@@ -120,9 +124,9 @@ Aim for approximately 600 words (±50).
 Use AP style.
 Do not use markdown formatting.
 Avoid passive voice.
-Explain technical terms in parentheses, for example, “multilateralism (global cooperation).”
+Explain technical terms in parentheses, for example, "multilateralism (global cooperation)."
 Conclude with exactly 2 open-ended reflection questions for the user.
-Begin the response immediately with the header “1. Your Ideological Breakdown”`;
+Begin the response immediately with the header "1. Your Ideological Breakdown"`;
 
     // Prepare Gemini API URL and payload
     const apiKey = process.env.GEMINI_API_KEY;
@@ -157,9 +161,8 @@ Begin the response immediately with the header “1. Your Ideological Breakdown
     // Parse the response and extract the text from the first candidate
     const data = (await geminiResponse.json()) as GeminiResponse;
     const analysis =
-      data.candidates && data.candidates.length > 0
-        ? data.candidates[0].output.text
-        : "";
+      data.candidates?.[0]?.content?.parts?.[0]?.text ||
+      "No analysis available.";
 
     const response: ApiResponse = { analysis };
     return NextResponse.json(response);
diff --git a/frontend/src/app/insights/page.tsx b/frontend/src/app/insights/page.tsx
index e4a5f11..1bf5c8c 100644
--- a/frontend/src/app/insights/page.tsx
+++ b/frontend/src/app/insights/page.tsx
@@ -451,16 +451,17 @@ export default function InsightsPage() {
           onClick={() => setIsModalOpen(false)}
         >
           <motion.div
-            className="relative w-full max-w-4xl max-h-[90vh] bg-white/10 border border-white/20 rounded-3xl shadow-2xl p-8 overflow-hidden"
+            className="relative w-full max-w-md mx-4 bg-brand-tertiary border border-white/10 rounded-3xl shadow-2xl overflow-hidden backdrop-blur-xl"
             initial={{ scale: 0.95, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}
             exit={{ scale: 0.95, opacity: 0 }}
             transition={{ duration: 0.3 }}
             onClick={(e) => e.stopPropagation()}
           >
-            <div className="absolute inset-0 bg-gradient-to-br from-brand-tertiary/20 via-transparent to-transparent pointer-events-none" />
+            <div className="absolute inset-0 bg-[url('/patterns/grid.svg')] opacity-20" />
+            <div className="absolute inset-0 bg-gradient-to-br from-brand-tertiary via-transparent to-transparent pointer-events-none" />
 
-            <div className="relative p-6 pb-4 text-center border-b border-white/10 bg-white/5">
+            <div className="relative p-6 pb-4 text-center">
               <button
                 type="button"
                 onClick={() => setIsModalOpen(false)}
@@ -483,7 +484,7 @@ export default function InsightsPage() {
                   />
                 </svg>
               </button>
-              <h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-slate-100 to-slate-300">
+              <h2 className="text-2xl font-bold text-slate-100">
                 {isProUser
                   ? "Advanced Ideological Analysis"
                   : "Unlock Advanced Insights"}
@@ -498,16 +499,16 @@ export default function InsightsPage() {
                   </p>
                 </div>
               ) : (
-                <div className="w-full max-w-md mx-auto">
-                  <p className="text-white/90 mb-6">
+                <div className="w-full max-w-md mx-auto space-y-4">
+                  <p className="text-white text-lg">
                     Dive deeper into your ideological profile with Awaken Pro.
                     Get comprehensive analysis and personalized insights.
                   </p>
-                  <div className="flex justify-center">
+                  <div className="flex justify-center pt-2">
                     <FilledButton
                       variant="default"
                       onClick={() => router.push("/awaken-pro")}
-                      className="transform transition-all duration-300 hover:scale-105"
+                      className="bg-[#E36C59] hover:bg-[#E36C59]/90 transform transition-all duration-300 hover:scale-105"
                     >
                       Upgrade to Pro
                     </FilledButton>