diff --git a/app/calculation/page.tsx b/app/calculation/page.tsx
index 4cf9ffc1..5c2c2840 100644
--- a/app/calculation/page.tsx
+++ b/app/calculation/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,14 +13,9 @@ export default async function Page() {
   return (
     <main className="w-full h-screen bg-black">
       <div className="w-full h-full pt-12">
-        <iframe 
-          src={process.env.NEXT_PUBLIC_IFRAME_CALCULATION_URL}
-          className="w-full h-full border-none"
+        <ResponsiveIframe 
+          src={process.env.NEXT_PUBLIC_IFRAME_CALCULATION_URL || ''}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          style={{ 
-            marginTop: '-64px'
-          }}
-          allowFullScreen
         />
       </div>
     </main>
diff --git a/app/crm/page.tsx b/app/crm/page.tsx
index e0e2ee82..49cbe24d 100644
--- a/app/crm/page.tsx
+++ b/app/crm/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);
@@ -11,12 +12,10 @@ export default async function Page() {
 
   return (
     <main className="w-full h-screen bg-black">
-      <div className="w-full h-full pt-16">
-        <iframe 
-          src="https://connect.slm-lab.net/realms/cercle/protocol/openid-connect/auth?client_id=mediations.slm-lab.net&redirect_uri=https%3A%2F%2Fmediations.slm-lab.net%2F%3Fopenid_mode%3Dtrue&scope=openid%20profile%20email&response_type=code"
-          className="w-full h-full border-none"
+      <div className="w-full h-full pt-12">
+        <ResponsiveIframe 
+          src={process.env.NEXT_PUBLIC_IFRAME_CRM_URL || ''}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowFullScreen
         />
       </div>
     </main>
diff --git a/app/flow/page.tsx b/app/flow/page.tsx
index f07d95e7..bc81211c 100644
--- a/app/flow/page.tsx
+++ b/app/flow/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">
+      <div className="w-full h-full pt-12">
         <ResponsiveIframe 
           src={process.env.NEXT_PUBLIC_IFRAME_FLOW_URL || ''}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
diff --git a/app/gitelab/page.tsx b/app/gitelab/page.tsx
index cb8745b6..5788ed2d 100644
--- a/app/gitelab/page.tsx
+++ b/app/gitelab/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,14 +13,9 @@ export default async function Page() {
   return (
     <main className="w-full h-screen bg-black">
       <div className="w-full h-full pt-12">
-        <iframe 
-          src={process.env.NEXT_PUBLIC_IFRAME_GITE_URL}
-          className="w-full h-full border-none"
+        <ResponsiveIframe 
+          src={process.env.NEXT_PUBLIC_IFRAME_GITE_URL || ''}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          style={{ 
-            marginTop: '-64px'
-          }}
-          allowFullScreen
         />
       </div>
     </main>
diff --git a/app/learn/page.tsx b/app/learn/page.tsx
index 27b87a65..0138503f 100644
--- a/app/learn/page.tsx
+++ b/app/learn/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,14 +13,9 @@ export default async function Page() {
   return (
     <main className="w-full h-screen bg-black">
       <div className="w-full h-full pt-12">
-        <iframe 
-          src={process.env.NEXT_PUBLIC_IFRAME_LEARN_URL}
-          className="w-full h-full border-none"
+        <ResponsiveIframe 
+          src={process.env.NEXT_PUBLIC_IFRAME_LEARN_URL || ''}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          style={{ 
-            marginTop: '-64px'
-          }}
-          allowFullScreen
         />
       </div>
     </main>
diff --git a/app/parole/page.tsx b/app/parole/page.tsx
index 5ba8313d..95b44c3e 100644
--- a/app/parole/page.tsx
+++ b/app/parole/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,14 +13,9 @@ export default async function Page() {
   return (
     <main className="w-full h-screen bg-black">
       <div className="w-full h-full pt-12">
-        <iframe 
-          src={process.env.NEXT_PUBLIC_IFRAME_PAROLE_URL}
-          className="w-full h-full border-none"
+        <ResponsiveIframe 
+          src={process.env.NEXT_PUBLIC_IFRAME_PAROLE_URL || ''}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          style={{ 
-            marginTop: '-64px'
-          }}
-          allowFullScreen
         />
       </div>
     </main>