diff --git a/app/[section]/page.tsx b/app/[section]/page.tsx
index 0736fa5b..527a8ada 100644
--- a/app/[section]/page.tsx
+++ b/app/[section]/page.tsx
@@ -1,4 +1,8 @@
 import { notFound } from 'next/navigation'
+import { getServerSession } from 'next-auth/next';
+import { authOptions } from '@/app/api/auth/[...nextauth]/route';
+import { ResponsiveIframe } from '@/app/components/responsive-iframe';
+import { redirect } from 'next/navigation';
 
 const menuItems = {
   board: "https://example.com/board",
@@ -10,21 +14,37 @@ const menuItems = {
   missions: "https://example.com/missions"
 }
 
-export default async function SectionPage({ params }: { params: { section: string } }) {
-  const { section } = params;
-  const iframeUrl = menuItems[section as keyof typeof menuItems]
-  
-  if (!iframeUrl) {
-    notFound()
+// Fix the params type issue by using generateMetadata or a different approach
+export async function generateMetadata({ params }: { params: { section: string } }) {
+  return {
+    title: `${params.section.charAt(0).toUpperCase() + params.section.slice(1)}`,
   }
+}
+
+export default async function SectionPage({ params }: { params: { section: string } }) {
+  // Ensure authentication first
+  const session = await getServerSession(authOptions);
+  if (!session) {
+    redirect("/signin");
+  }
+
+  // Get section from params
+  const section = params.section;
+  
+  // Check if section exists in our menu items
+  if (!(section in menuItems)) {
+    notFound();
+  }
+
+  // Create the proxy URL instead of direct iframe URL
+  const proxyUrl = `/api/proxy/${section}`;
 
   return (
     <div className="w-full h-[calc(100vh-8rem)]">
-      <iframe 
-        src={iframeUrl}
+      <ResponsiveIframe 
+        src={proxyUrl}
         className="w-full h-full border-none"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowFullScreen
       />
     </div>
   )