diff --git a/app/contacts/page.tsx b/app/contacts/page.tsx
index 0aae46a1..54aae814 100644
--- a/app/contacts/page.tsx
+++ b/app/contacts/page.tsx
@@ -1,6 +1,7 @@
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { redirect } from "next/navigation";
+import { ResponsiveIframe } from "@/app/components/responsive-iframe";
 
 export default async function Page() {
   const session = await getServerSession(authOptions);
@@ -12,19 +13,16 @@ export default async function Page() {
   return (
     <main className="w-full h-screen bg-black">
       <div className="w-full h-full px-4 pt-12 pb-4">
-        <iframe 
-          src={process.env.NEXT_PUBLIC_IFRAME_CONTACTS_URL}
-          className="w-full h-full border-none"
+        <ResponsiveIframe 
+          src={process.env.NEXT_PUBLIC_IFRAME_CONTACTS_URL || ''}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
-          style={{ 
+          className="relative"
+          style={{
             marginTop: '-64px',
             marginLeft: '-180px',
             width: 'calc(100% + 500px)',
-            position: 'relative',
             right: '-160px'
           }}
-          allowFullScreen
         />
       </div>
     </main>
diff --git a/app/diary/page.tsx b/app/diary/page.tsx
index 9a9f3218..b65e907b 100644
--- a/app/diary/page.tsx
+++ b/app/diary/page.tsx
@@ -1,6 +1,7 @@
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { redirect } from "next/navigation";
+import { ResponsiveIframe } from "@/app/components/responsive-iframe";
 
 export default async function Page() {
   const session = await getServerSession(authOptions);
@@ -12,19 +13,16 @@ export default async function Page() {
   return (
     <main className="w-full h-screen bg-black">
       <div className="w-full h-full px-4 pt-12 pb-4">
-        <iframe 
-          src={process.env.NEXT_PUBLIC_IFRAME_DIARY_URL}
-          className="w-full h-full border-none"
+        <ResponsiveIframe 
+          src={process.env.NEXT_PUBLIC_IFRAME_DIARY_URL || ''}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
-          style={{ 
+          className="relative"
+          style={{
             marginTop: '-64px',
             marginLeft: '-180px',
             width: 'calc(100% + 500px)',
-            position: 'relative',
             right: '-160px'
           }}
-          allowFullScreen
         />
       </div>
     </main>
diff --git a/app/drive/page.tsx b/app/drive/page.tsx
index f0c7877f..841e5459 100644
--- a/app/drive/page.tsx
+++ b/app/drive/page.tsx
@@ -1,6 +1,7 @@
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { redirect } from "next/navigation";
+import { ResponsiveIframe } from "@/app/components/responsive-iframe";
 
 export default async function Page() {
   const session = await getServerSession(authOptions);
@@ -12,19 +13,16 @@ export default async function Page() {
   return (
     <main className="w-full h-screen bg-black">
       <div className="w-full h-full px-4 pt-12 pb-4">
-        <iframe 
-          src={process.env.NEXT_PUBLIC_IFRAME_DRIVE_URL}
-          className="w-full h-full border-none"
+        <ResponsiveIframe 
+          src={process.env.NEXT_PUBLIC_IFRAME_DRIVE_URL || ''}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
-          style={{ 
+          className="relative"
+          style={{
             marginTop: '-64px',
             marginLeft: '-180px',
             width: 'calc(100% + 500px)',
-            position: 'relative',
             right: '-160px'
           }}
-          allowFullScreen
         />
       </div>
     </main>