diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 31c6b0fc..27daeca8 100644
--- a/app/mail/page.tsx
+++ b/app/mail/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,9 @@ 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_MAIL_URL}
-          className="w-full h-full border-none"
+        <ResponsiveIframe 
+          src={process.env.NEXT_PUBLIC_IFRAME_MAIL_URL || ''}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
-          style={{ 
-            marginTop: '-64px',
-            marginLeft: '-180px',
-            width: 'calc(100% + 500px)',
-            position: 'relative',
-            right: '-160px'
-          }}
-          allowFullScreen
         />
       </div>
     </main>
diff --git a/app/parole/page.tsx b/app/parole/page.tsx
index 95b44c3e..e423fd1f 100644
--- a/app/parole/page.tsx
+++ b/app/parole/page.tsx
@@ -12,7 +12,7 @@ export default async function Page() {
 
   return (
     <main className="w-full h-screen bg-black">
-      <div className="w-full h-full pt-12">
+      <div className="w-full h-full px-4 pt-12 pb-4">
         <ResponsiveIframe 
           src={process.env.NEXT_PUBLIC_IFRAME_PAROLE_URL || ''}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"