diff --git a/public/config/experiences.ts b/public/config/experiences.ts
new file mode 100644
index 0000000..72da058
--- /dev/null
+++ b/public/config/experiences.ts
@@ -0,0 +1,4 @@
+/**
+ *  list of allowed ids.
+ */
+export const ALLOWED_IDS = ["demoModelViewer", "iceCore", "glacierInTime"];
diff --git a/src/app/demoModelViewer/modelViewer.module.css b/src/app/demoModelViewer/modelViewer.module.css
new file mode 100644
index 0000000..e71c21d
--- /dev/null
+++ b/src/app/demoModelViewer/modelViewer.module.css
@@ -0,0 +1,28 @@
+.mainContainer {
+  padding: 2rem;
+}
+
+.instructionText {
+  margin-bottom: 1rem;
+}
+
+.buttonWrapper {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.backButton {
+  display: inline-block;
+  padding: 12px 24px;
+  background-color: #0070f3;
+  color: white;
+  text-decoration: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: bold;
+  pointer-events: auto;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+  transition:
+    background-color 0.2s ease,
+    transform 0.1s ease;
+}
diff --git a/src/app/demoModelViewer/page.tsx b/src/app/demoModelViewer/page.tsx
index 8899978..3c407c6 100644
--- a/src/app/demoModelViewer/page.tsx
+++ b/src/app/demoModelViewer/page.tsx
@@ -1,28 +1,20 @@
 import Link from "next/link";
+import { Manrope } from "next/font/google";
 import ModelViewer from "../../components/ModelViewer";
+import styles from "./modelViewer.module.css";
+
+const manrope = Manrope({ subsets: ["latin"] });
 
 export default function Home() {
   return (
-    <main style={{ padding: "2rem", fontFamily: "sans-serif" }}>
-      <p>Interact with the object to rotate it</p>
+    <main className={`${styles.mainContainer} ${manrope.className}`}>
+      <p className={styles.instructionText}>
+        Interagisici con l`oggetto per ruotarlo
+      </p>
 
-      <div style={{ marginBottom: "20px", marginTop: "20px" }}>
-        <Link
-          href="/"
-          style={{
-            display: "inline-block",
-            padding: "12px 24px",
-            backgroundColor: "#0070f3",
-            color: "white",
-            textDecoration: "none",
-            borderRadius: "8px",
-            fontSize: "16px",
-            fontWeight: "bold",
-            pointerEvents: "auto",
-            boxShadow: "0 4px 6px rgba(0,0,0,0.3)",
-          }}
-        >
-          ← Back to the scanner
+      <div className={styles.buttonWrapper}>
+        <Link href="/" className={styles.backButton}>
+          ← Torna allo scanner
         </Link>
       </div>
 
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
index 718d6fe..9bc9938 100644
Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ
diff --git a/src/app/glacierInTime/glacierInTime.module.css b/src/app/glacierInTime/glacierInTime.module.css
new file mode 100644
index 0000000..f52c148
--- /dev/null
+++ b/src/app/glacierInTime/glacierInTime.module.css
@@ -0,0 +1,130 @@
+.container {
+  position: relative;
+  width: 100vw;
+  height: 100dvh;
+  overflow: hidden;
+  background-color: #000;
+}
+
+/* Invisible overlay to catch click*/
+.clickOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 8;
+  cursor: pointer;
+}
+
+/* Marker image */
+.markerImage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 80vw;
+  max-height: 80vh;
+  width: auto;
+  height: auto;
+  transition: opacity 0.6s ease-in-out;
+  pointer-events: none;
+  z-index: 5;
+}
+
+/* UI */
+.uiContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 40px 20px;
+  z-index: 10;
+  pointer-events: none;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+/* Higher text group*/
+.textGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.instructionText {
+  font-size: 1.2rem;
+  color: #fff;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
+  margin: 0;
+}
+
+.pulseText {
+  font-size: 1.5rem;
+  color: #fff;
+  font-weight: bold;
+  animation: pulse 2s infinite;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
+  pointer-events: none;
+}
+
+/* Lower button group*/
+.bottomGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.backButton {
+  pointer-events: auto;
+  display: inline-block;
+  padding: 12px 24px;
+  background-color: #0070f3;
+  color: white;
+  text-decoration: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: bold;
+  opacity: 0.8;
+  transition: opacity 0.2s ease;
+}
+
+.backButton:hover {
+  opacity: 1;
+}
+
+/* Iframe AR */
+.iframeStyle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: 1;
+}
+
+/* Animation */
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+}
diff --git a/src/app/glacierInTime/page.tsx b/src/app/glacierInTime/page.tsx
index 821e03c..b663f2a 100644
--- a/src/app/glacierInTime/page.tsx
+++ b/src/app/glacierInTime/page.tsx
@@ -10,10 +10,42 @@ import {
   getAdjustedARConfig,
   useIframeMessage,
 } from "@/utils/arHelper";
+import { BASE_PATH } from "@/utils/configHelper";
+
+import styles from "./glacierInTime.module.css";
 
-// Inizializza il font
+// Font initialization
 const manrope = Manrope({ subsets: ["latin"] });
-import { BASE_PATH } from "@/utils/configHelper";
+
+// Reveal animation
+const revealAnimation: CustomAnimation = {
+  name: "reveal",
+  config: {
+    type: "clip-z",
+    duration: 6000,
+    min: -1500,
+    max: 0,
+  },
+};
+
+const baseConfig: ARConfig = {
+  markerType: "nft",
+  markerUrl: `${BASE_PATH}/nft/glacier-in-time/glacier-in-time-target`,
+  modelUrl: `${BASE_PATH}/models/glacier-in-time/Wrapper.gltf`,
+  scale: [250, 250, 250],
+  rotation: [0, 180, 0],
+  position: [125, 0, -180],
+  enableInteraction: false,
+  customAnimation: revealAnimation,
+};
+
+const IOS_OFFSETS: AROffsets = {
+  x: -40,
+  y: 0,
+  z: 0,
+};
+
+const markerImageUrl = `${BASE_PATH}/models/glacier-in-time/Marker.jpg`;
 
 export default function GlacierInTimePage() {
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -22,34 +54,6 @@ export default function GlacierInTimePage() {
   const [isMarkerFound, setIsMarkerFound] = useState<boolean>(false);
   const [animationStarted, setAnimationStarted] = useState<boolean>(false);
 
-  // Reveal animation
-  const revealAnimation: CustomAnimation = {
-    name: "reveal",
-    config: {
-      type: "clip-z",
-      duration: 6000,
-      min: -1500,
-      max: 0,
-    },
-  };
-
-  const baseConfig: ARConfig = {
-    markerType: "nft",
-    markerUrl: `${BASE_PATH}/nft/glacier-in-time/glacier-in-time-target`,
-    modelUrl: `${BASE_PATH}/models/glacier-in-time/Wrapper.gltf`,
-    scale: [250, 250, 250],
-    rotation: [0, 180, 0],
-    position: [125, 0, -180],
-    enableInteraction: false,
-    customAnimation: revealAnimation,
-  };
-
-  const IOS_OFFSETS: AROffsets = {
-    x: -40,
-    y: 0,
-    z: 0,
-  };
-
   const config = getAdjustedARConfig(baseConfig, IOS_OFFSETS);
 
   let iframeSrc = `${BASE_PATH}/nft-ar.html?${buildARQueryString(config)}`;
@@ -57,8 +61,6 @@ export default function GlacierInTimePage() {
     iframeSrc += `&debug=1`;
   }
 
-  const markerImageUrl = `${BASE_PATH}/models/glacier-in-time/Marker.jpg`;
-
   // Listen for events from iframe
   useIframeMessage({
     setIsMarkerFound,
@@ -87,30 +89,10 @@ export default function GlacierInTimePage() {
   };
 
   return (
-    <div
-      className={manrope.className}
-      style={{
-        position: "relative",
-        width: "100vw",
-        height: "100dvh",
-        overflow: "hidden",
-        backgroundColor: "#000",
-      }}
-    >
+    <div className={`${styles.container} ${manrope.className}`}>
       {/* Invisible overlay to capture the click*/}
       {isMarkerFound && !animationStarted && (
-        <div
-          onClick={handleScreenTouch}
-          style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
-            zIndex: 8,
-            cursor: "pointer",
-          }}
-        />
+        <div onClick={handleScreenTouch} className={styles.clickOverlay} />
       )}
 
       {/* Overlay image */}
@@ -119,99 +101,28 @@ export default function GlacierInTimePage() {
         alt="Inquadra questa immagine"
         width={512}
         height={1024}
-        style={{
-          position: "absolute",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
-          maxWidth: "80vw",
-          maxHeight: "80vh",
-          width: "auto",
-          height: "auto",
-          opacity: isMarkerFound ? 0 : 0.4,
-          transition: "opacity 0.6s ease-in-out",
-          pointerEvents: "none",
-          zIndex: 5,
-        }}
+        className={styles.markerImage}
+        style={{ opacity: isMarkerFound ? 0 : 0.4 }}
         priority
       />
 
-      <div
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "space-between",
-          padding: "40px 20px",
-          zIndex: 10,
-          pointerEvents: "none",
-          textAlign: "center",
-          boxSizing: "border-box",
-        }}
-      >
-        <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+      <div className={styles.uiContainer}>
+        <div className={styles.textGroup}>
           {!isMarkerFound && (
-            <p
-              style={{
-                fontSize: "1.2rem",
-                color: "#fff",
-                textShadow: "1px 1px 3px rgba(0,0,0,0.8)",
-                margin: 0,
-              }}
-            >
-              Frame the image to start
+            <p className={styles.instructionText}>
+              Inquadra l`immagine per iniziare
             </p>
           )}
 
           {isMarkerFound && !animationStarted && (
-            <div
-              style={{
-                fontSize: "1.5rem",
-                color: "#fff",
-                fontWeight: "bold",
-                animation: "pulse 2s infinite",
-                textTransform: "uppercase",
-                letterSpacing: "1px",
-                textShadow: "2px 2px 6px rgba(0,0,0,0.9)",
-                pointerEvents: "none",
-              }}
-            >
-              Tocca per iniziare
-            </div>
+            <div className={styles.pulseText}>Tocca per iniziare</div>
           )}
         </div>
 
         {/* Go back button */}
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: "20px",
-            marginBottom: "20px",
-          }}
-        >
-          <Link
-            href="/"
-            style={{
-              pointerEvents: "auto",
-              display: "inline-block",
-              padding: "12px 24px",
-              backgroundColor: "#0070f3",
-              color: "white",
-              textDecoration: "none",
-              borderRadius: "8px",
-              fontSize: "16px",
-              fontWeight: "bold",
-              opacity: 0.8,
-            }}
-          >
-            ← Back to the scanner
+        <div className={styles.bottomGroup}>
+          <Link href="/" className={styles.backButton}>
+            ← Torna allo scanner
           </Link>
         </div>
       </div>
@@ -219,36 +130,10 @@ export default function GlacierInTimePage() {
       <iframe
         ref={iframeRef}
         src={iframeSrc}
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: "100%",
-          border: "none",
-          zIndex: 1,
-        }}
+        className={styles.iframeStyle}
         allow="camera; gyroscope; accelerometer; magnetometer; vr;"
         title="AR Scanner"
       />
-
-      {/* Pulse effect */}
-      <style jsx>{`
-        @keyframes pulse {
-          0% {
-            transform: scale(1);
-            opacity: 0.8;
-          }
-          50% {
-            transform: scale(1.05);
-            opacity: 1;
-          }
-          100% {
-            transform: scale(1);
-            opacity: 0.8;
-          }
-        }
-      `}</style>
     </div>
   );
 }
diff --git a/src/app/iceCore/iceCore.module.css b/src/app/iceCore/iceCore.module.css
new file mode 100644
index 0000000..f52c148
--- /dev/null
+++ b/src/app/iceCore/iceCore.module.css
@@ -0,0 +1,130 @@
+.container {
+  position: relative;
+  width: 100vw;
+  height: 100dvh;
+  overflow: hidden;
+  background-color: #000;
+}
+
+/* Invisible overlay to catch click*/
+.clickOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 8;
+  cursor: pointer;
+}
+
+/* Marker image */
+.markerImage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 80vw;
+  max-height: 80vh;
+  width: auto;
+  height: auto;
+  transition: opacity 0.6s ease-in-out;
+  pointer-events: none;
+  z-index: 5;
+}
+
+/* UI */
+.uiContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 40px 20px;
+  z-index: 10;
+  pointer-events: none;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+/* Higher text group*/
+.textGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.instructionText {
+  font-size: 1.2rem;
+  color: #fff;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
+  margin: 0;
+}
+
+.pulseText {
+  font-size: 1.5rem;
+  color: #fff;
+  font-weight: bold;
+  animation: pulse 2s infinite;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
+  pointer-events: none;
+}
+
+/* Lower button group*/
+.bottomGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.backButton {
+  pointer-events: auto;
+  display: inline-block;
+  padding: 12px 24px;
+  background-color: #0070f3;
+  color: white;
+  text-decoration: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: bold;
+  opacity: 0.8;
+  transition: opacity 0.2s ease;
+}
+
+.backButton:hover {
+  opacity: 1;
+}
+
+/* Iframe AR */
+.iframeStyle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: 1;
+}
+
+/* Animation */
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+}
diff --git a/src/app/iceCore/page.tsx b/src/app/iceCore/page.tsx
index eccfbd0..1cf1ef0 100644
--- a/src/app/iceCore/page.tsx
+++ b/src/app/iceCore/page.tsx
@@ -10,10 +10,29 @@ import {
   getAdjustedARConfig,
   useIframeMessage,
 } from "@/utils/arHelper";
+import styles from "./iceCore.module.css";
 import { BASE_PATH } from "@/utils/configHelper";
 
 const manrope = Manrope({ subsets: ["latin"] });
 
+const baseConfigNft: ARConfig = {
+  markerType: "nft",
+  markerUrl: `${BASE_PATH}/nft/ice-core/ice-core-target`,
+  modelUrl: `${BASE_PATH}/models/ice-core/Wrapper.gltf`,
+  scale: [1.5, 1.5, 1.5],
+  rotation: [80, 180, 0],
+  position: [135, 0, -125],
+  enableInteraction: false,
+};
+
+const IOS_OFFSETS: AROffsets = {
+  x: -40,
+  y: 0,
+  z: 0,
+};
+
+const markerImageUrl = `${BASE_PATH}/models/ice-core/Marker.jpg`;
+
 export default function IceCorePage() {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [animations, setAnimations] = useState<string[]>([]);
@@ -21,22 +40,6 @@ export default function IceCorePage() {
   const [isMarkerFound, setIsMarkerFound] = useState<boolean>(false);
   const [animationStarted, setAnimationStarted] = useState<boolean>(false);
 
-  const baseConfigNft: ARConfig = {
-    markerType: "nft",
-    markerUrl: `${BASE_PATH}/nft/ice-core/ice-core-target`,
-    modelUrl: `${BASE_PATH}/models/ice-core/Wrapper.gltf`,
-    scale: [1.5, 1.5, 1.5],
-    rotation: [80, 180, 0],
-    position: [135, 0, -125],
-    enableInteraction: false,
-  };
-
-  const IOS_OFFSETS: AROffsets = {
-    x: -40,
-    y: 0,
-    z: 0,
-  };
-
   const config = getAdjustedARConfig(baseConfigNft, IOS_OFFSETS);
 
   let iframeSrc = `${BASE_PATH}/nft-ar.html?${buildARQueryString(config)}`;
@@ -45,8 +48,6 @@ export default function IceCorePage() {
     iframeSrc += `&debug=1`;
   }
 
-  const markerImageUrl = `${BASE_PATH}/models/ice-core/Marker.jpg`;
-
   // Listen for events from iframe
   useIframeMessage({
     setIsMarkerFound,
@@ -74,30 +75,10 @@ export default function IceCorePage() {
   };
 
   return (
-    <div
-      className={manrope.className}
-      style={{
-        position: "relative",
-        width: "100vw",
-        height: "100dvh",
-        overflow: "hidden",
-        backgroundColor: "#000",
-      }}
-    >
+    <div className={`${styles.container} ${manrope.className}`}>
       {/* Invisible overlay to capture the click*/}
       {isMarkerFound && !animationStarted && (
-        <div
-          onClick={handleScreenTouch}
-          style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
-            zIndex: 8,
-            cursor: "pointer",
-          }}
-        />
+        <div onClick={handleScreenTouch} className={styles.clickOverlay} />
       )}
 
       {/* Overlay image */}
@@ -106,99 +87,28 @@ export default function IceCorePage() {
         alt="Inquadra questa immagine"
         width={512}
         height={1024}
-        style={{
-          position: "absolute",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
-          maxWidth: "80vw",
-          maxHeight: "80vh",
-          width: "auto",
-          height: "auto",
-          opacity: isMarkerFound ? 0 : 0.4,
-          transition: "opacity 0.6s ease-in-out",
-          pointerEvents: "none",
-          zIndex: 5,
-        }}
+        className={styles.markerImage}
+        style={{ opacity: isMarkerFound ? 0 : 0.4 }}
         priority
       />
 
-      <div
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "space-between",
-          padding: "40px 20px",
-          zIndex: 10,
-          pointerEvents: "none",
-          textAlign: "center",
-          boxSizing: "border-box",
-        }}
-      >
-        <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+      <div className={styles.uiContainer}>
+        <div className={styles.textGroup}>
           {!isMarkerFound && (
-            <p
-              style={{
-                fontSize: "1.2rem",
-                color: "#fff",
-                textShadow: "1px 1px 3px rgba(0,0,0,0.8)",
-                margin: 0,
-              }}
-            >
-              Frame the image to start
+            <p className={styles.instructionText}>
+              Inquadra l`immagine per iniziare
             </p>
           )}
 
           {isMarkerFound && !animationStarted && (
-            <div
-              style={{
-                fontSize: "1.5rem",
-                color: "#fff",
-                fontWeight: "bold",
-                animation: "pulse 2s infinite",
-                textTransform: "uppercase",
-                letterSpacing: "1px",
-                textShadow: "2px 2px 6px rgba(0,0,0,0.9)",
-                pointerEvents: "none",
-              }}
-            >
-              Tocca per iniziare
-            </div>
+            <div className={styles.pulseText}>Tocca per iniziare</div>
           )}
         </div>
 
         {/* Go back button */}
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: "20px",
-            marginBottom: "20px",
-          }}
-        >
-          <Link
-            href="/"
-            style={{
-              pointerEvents: "auto",
-              display: "inline-block",
-              padding: "12px 24px",
-              backgroundColor: "#0070f3",
-              color: "white",
-              textDecoration: "none",
-              borderRadius: "8px",
-              fontSize: "16px",
-              fontWeight: "bold",
-              opacity: 0.8,
-            }}
-          >
-            ← Back to the scanner
+        <div className={styles.bottomGroup}>
+          <Link href="/" className={styles.backButton}>
+            ← Torna allo scanner
           </Link>
         </div>
       </div>
@@ -206,36 +116,10 @@ export default function IceCorePage() {
       <iframe
         ref={iframeRef}
         src={iframeSrc}
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: "100%",
-          border: "none",
-          zIndex: 1,
-        }}
+        className={styles.iframeStyle}
         allow="camera; gyroscope; accelerometer; magnetometer; vr;"
         title="AR Scanner"
       />
-
-      {/* Pulse effect */}
-      <style jsx>{`
-        @keyframes pulse {
-          0% {
-            transform: scale(1);
-            opacity: 0.8;
-          }
-          50% {
-            transform: scale(1.05);
-            opacity: 1;
-          }
-          100% {
-            transform: scale(1);
-            opacity: 0.8;
-          }
-        }
-      `}</style>
     </div>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 85cfbda..bcf6c46 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,14 +2,14 @@
 
 import { useState, useEffect } from "react";
 import { Manrope } from "next/font/google";
-import styles from "./scanner.module.css";
+import styles from "./style.module.css";
 import { useQrScanner } from "../utils/useQrScanner";
 
 // Manrope font configuration
 const manrope = Manrope({ subsets: ["latin"] });
 
 export default function Page() {
-  const { videoRef, state, qrData, startCamera } = useQrScanner();
+  const { videoRef, status, message, qrData, startCamera } = useQrScanner();
   const [isScanning, setIsScanning] = useState(false);
 
   // 1. Trigger startCamera ONLY after the DOM has updated and the video is mounted
@@ -19,61 +19,23 @@ export default function Page() {
     }
     // We intentionally omit startCamera from the dependency array to avoid
     // infinite loops if the hook doesn't heavily memoize the function.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isScanning]);
 
   const handleStartCamera = () => {
     setIsScanning(true);
   };
 
-  // 2. Helper to determine if the camera failed to initialize
-  const isError =
-    state.toLowerCase().includes("error") ||
-    state.toLowerCase().includes("blocked");
+  const isError = status === "error";
 
   // If is not scanning, show the landing page.
   if (!isScanning) {
     return (
-      <div
-        className={manrope.className}
-        style={{
-          backgroundColor: "#ffffff",
-          color: "#000000",
-          minHeight: "100vh",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: "20px",
-          textAlign: "center",
-        }}
-      >
-        <h1 style={{ fontSize: "2rem", marginBottom: "1rem" }}>
-          Piattaforma WebAR di Uqido
-        </h1>
-        <p
-          style={{
-            fontSize: "1.1rem",
-            marginBottom: "2rem",
-            maxWidth: "400px",
-          }}
-        >
+      <div className={`${styles.landingContainer} ${manrope.className}`}>
+        <h1 className={styles.landingTitle}>Piattaforma WebAR di Uqido</h1>
+        <p className={styles.landingText}>
           Premi il pulsante e inquadra il QR code per accedere ai contenuti AR
         </p>
-        <button
-          onClick={handleStartCamera}
-          style={{
-            backgroundColor: "#000000",
-            color: "#ffffff",
-            border: "none",
-            borderRadius: "8px",
-            padding: "14px 28px",
-            fontSize: "1rem",
-            fontWeight: "bold",
-            cursor: "pointer",
-            boxShadow: "0 4px 6px rgba(0,0,0,0.1)",
-          }}
-        >
+        <button onClick={handleStartCamera} className={styles.button}>
           Attiva la camera
         </button>
       </div>
@@ -91,73 +53,53 @@ export default function Page() {
       />
 
       <div className={styles.overlay}>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: "10px",
-          }}
-        >
+        <div className={styles.statusWrapper}>
           <span
-            className={`${styles.statusBadge} ${
-              qrData ? styles.statusSuccess : ""
-            }`}
-            // Add some inline styling to highlight errors in red
-            style={
-              isError ? { backgroundColor: "#dc2626", color: "white" } : {}
-            }
+            className={`
+              ${styles.statusBadge} 
+              ${qrData ? styles.statusSuccess : ""} 
+              ${isError ? styles.statusError : ""}
+            `.trim()}
           >
-            {state}
+            {message}
           </span>
 
           {/* Render a Retry/Back button if the camera fails */}
           {isError && (
             <button
               onClick={() => window.location.reload()}
-              style={{
-                backgroundColor: "#ffffff",
-                color: "#000000",
-                border: "none",
-                borderRadius: "8px",
-                padding: "8px 16px",
-                fontSize: "0.9rem",
-                fontWeight: "bold",
-                cursor: "pointer",
-                boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
-              }}
+              className={styles.retryButton}
             >
-              Go Back / Retry
+              Indietro
             </button>
           )}
         </div>
 
+        {!qrData && !isError && (
+          <div className={styles.scannerGuide}>
+            <div className={styles.scannerFrame}></div>
+            <p className={styles.scannerText}>Inquadra il QR code al centro</p>
+          </div>
+        )}
+
         {qrData && (
           <div className={styles.resultBox}>
-            <h3 style={{ color: "#0f0" }}>✓ Read correctly!</h3>
-            <p style={{ color: "#aaa", fontSize: "12px" }}>
-              Automatic reset in 2 seconds...
+            <h3 className={styles.resultSuccessTitle}>
+              ✓ Letto correttamente!
+            </h3>
+            <p className={styles.resultHint}>
+              Reset in automatico in 2 secondi...
             </p>
-            <p
-              style={{
-                color: "#aaa",
-                fontSize: "14px",
-                wordBreak: "break-all",
-              }}
-            >
+            <p className={styles.resultUrl}>
               <strong>URL:</strong> {qrData.originalUrl}
             </p>
 
-            <div style={{ marginBottom: "20px" }}>
-              <strong style={{ color: "#fff" }}>Parameters found:</strong>
+            <div className={styles.resultParamsContainer}>
+              <strong className={styles.resultParamsTitle}>
+                Parametri trovati:
+              </strong>
               {Object.keys(qrData.parameters).length > 0 ? (
-                <ul
-                  style={{
-                    color: "#0f0",
-                    margin: "10px 0 0 0",
-                    paddingLeft: "20px",
-                  }}
-                >
+                <ul className={styles.resultParamsList}>
                   {Object.entries(qrData.parameters).map(([key, value]) => (
                     <li key={key}>
                       <b>{key}</b>: {value}
@@ -165,9 +107,7 @@ export default function Page() {
                   ))}
                 </ul>
               ) : (
-                <p style={{ color: "#aaa", fontSize: "14px" }}>
-                  No parameter founded.
-                </p>
+                <p className={styles.resultHint}>Parametri non trovati</p>
               )}
             </div>
           </div>
diff --git a/src/app/scanner.module.css b/src/app/scanner.module.css
deleted file mode 100644
index 78188d9..0000000
--- a/src/app/scanner.module.css
+++ /dev/null
@@ -1,67 +0,0 @@
-/* scanner.module.css */
-.container {
-  position: relative;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-  background-color: black;
-}
-
-.video {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  z-index: 1;
-}
-
-.overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  z-index: 2;
-  pointer-events: none;
-  display: flex;
-  flex-direction: column;
-}
-
-.statusBadge {
-  pointer-events: auto;
-  font-weight: bold;
-  color: #fff;
-  background-color: rgba(0, 0, 0, 0.7);
-  padding: 8px 12px;
-  border-radius: 8px;
-  backdrop-filter: blur(4px);
-}
-
-.statusSuccess {
-  color: #0f0; /* Verde quando trova qualcosa */
-}
-
-.resultBox {
-  pointer-events: auto;
-  margin-top: auto;
-  background-color: rgba(0, 0, 0, 0.85);
-  padding: 20px;
-  border-radius: 12px;
-  border: 1px solid #444;
-  backdrop-filter: blur(8px);
-}
-
-.button {
-  width: 100%;
-  padding: 15px;
-  background-color: #0070f3;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  font-size: 16px;
-  font-weight: bold;
-  cursor: pointer;
-}
diff --git a/src/app/style.module.css b/src/app/style.module.css
new file mode 100644
index 0000000..52f3fe3
--- /dev/null
+++ b/src/app/style.module.css
@@ -0,0 +1,228 @@
+.container {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-color: black;
+}
+
+.video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  z-index: 2;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Landing Page */
+.landingContainer {
+  background-color: #ffffff;
+  color: #000000;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  text-align: center;
+}
+
+.landingTitle {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.landingText {
+  font-size: 1.1rem;
+  margin-bottom: 2rem;
+  max-width: 400px;
+}
+
+/* Status message wrapper*/
+.statusWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  pointer-events: auto;
+}
+
+/* Central status badge */
+.statusBadge {
+  pointer-events: auto;
+  font-weight: bold;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 8px 12px;
+  border-radius: 8px;
+  backdrop-filter: blur(4px);
+}
+
+.statusSuccess {
+  color: #0f0;
+}
+
+.statusError {
+  background-color: #dc2626;
+  color: white;
+}
+
+.resultBox {
+  pointer-events: auto;
+  margin-top: auto;
+  background-color: rgba(0, 0, 0, 0.85);
+  padding: 20px;
+  border-radius: 12px;
+  border: 1px solid #444;
+  backdrop-filter: blur(8px);
+}
+
+/* =========================================
+   BUTTONS
+   ========================================= */
+
+/* ACTIVATE CAMERA BUTTON */
+.button {
+  background-color: #000000;
+  color: #ffffff;
+  border: none;
+  border-radius: 8px;
+  padding: 14px 28px;
+  font-size: 1rem;
+  font-weight: bold;
+  cursor: pointer;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition:
+    transform 0.2s ease,
+    opacity 0.2s ease;
+}
+
+.button:hover {
+  opacity: 0.8;
+}
+
+.retryButton {
+  background-color: #ffffff;
+  color: #000000;
+  border: none;
+  border-radius: 8px;
+  padding: 8px 16px;
+  font-size: 0.9rem;
+  font-weight: bold;
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* =========================================
+   TEXT AND QR RESULT
+   ========================================= */
+
+.resultSuccessTitle {
+  color: #0f0;
+  margin: 0 0 8px 0;
+}
+
+.resultHint {
+  color: #aaa;
+  font-size: 12px;
+  margin: 4px 0;
+}
+
+.resultUrl {
+  color: #aaa;
+  font-size: 14px;
+  word-break: break-all;
+  margin: 8px 0;
+}
+
+.resultParamsContainer {
+  margin-bottom: 20px;
+  margin-top: 16px;
+}
+
+.resultParamsTitle {
+  color: #fff;
+}
+
+.resultParamsList {
+  color: #0f0;
+  margin: 10px 0 0 0;
+  padding-left: 20px;
+}
+
+/* =========================================
+   SCANNER GUIDE (MIRINO E TESTO)
+   ========================================= */
+
+.scannerGuide {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.scannerFrame {
+  width: 250px;
+  height: 250px;
+  border: 3px solid rgba(255, 255, 255, 0.6);
+  border-radius: 20px;
+  box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.5);
+  position: relative;
+}
+
+.scannerFrame::before,
+.scannerFrame::after {
+  content: "";
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  border-color: #ffffff;
+  border-style: solid;
+}
+
+.scannerFrame::before {
+  top: -3px;
+  left: -3px;
+  border-width: 3px 0 0 3px;
+  border-top-left-radius: 20px;
+}
+
+.scannerFrame::after {
+  bottom: -3px;
+  right: -3px;
+  border-width: 0 3px 3px 0;
+  border-bottom-right-radius: 20px;
+}
+
+.scannerText {
+  color: #ffffff;
+  font-size: 1.1rem;
+  font-weight: 600;
+  text-align: center;
+  margin: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 10px 20px;
+  border-radius: 30px;
+  backdrop-filter: blur(4px);
+}
diff --git a/src/utils/arHelper.ts b/src/utils/arHelper.ts
index ba7d3cc..a1ef768 100644
--- a/src/utils/arHelper.ts
+++ b/src/utils/arHelper.ts
@@ -37,7 +37,9 @@ export function getAdjustedARConfig(
 ): ARConfig {
   if (typeof window === "undefined") return baseConfig;
 
-  const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
+  const isIOS =
+    /iPhone|iPad|iPod/i.test(navigator.userAgent) ||
+    (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
 
   if (isIOS) {
     return {
diff --git a/src/utils/useQrScanner.ts b/src/utils/useQrScanner.ts
index 6100c41..38e152c 100644
--- a/src/utils/useQrScanner.ts
+++ b/src/utils/useQrScanner.ts
@@ -1,9 +1,9 @@
 import { useRef, useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import jsQR from "jsqr";
+import { ALLOWED_IDS } from "../../public/config/experiences";
 
-// Define authorized IDs here
-const ALLOWED_IDS = ["demoModelViewer", "iceCore", "glacierInTime"];
+export type ScannerStatus = "idle" | "scanning" | "success" | "error";
 
 export function useQrScanner() {
   const router = useRouter();
@@ -19,7 +19,9 @@ export function useQrScanner() {
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const isMounted = useRef<boolean>(true);
 
-  const [state, setState] = useState<string>("Waiting for camera...");
+  const [status, setStatus] = useState<ScannerStatus>("idle");
+  const [message, setMessage] = useState<string>("Waiting for camera...");
+
   const [qrData, setQrData] = useState<{
     originalUrl: string;
     parameters: Record<string, string>;
@@ -39,7 +41,8 @@ export function useQrScanner() {
 
       // Only update state if the component is still mounted
       if (isMounted.current) {
-        setState("Scanning...");
+        setStatus("scanning");
+        setMessage("Scanning...");
       }
     }, 1500);
   }
@@ -55,15 +58,16 @@ export function useQrScanner() {
         // Validate the ID against the whitelist
         if (ALLOWED_IDS.includes(id)) {
           isProcessing.current = true;
-          setState(`ID "${id}" verified! Redirecting...`);
-
+          setStatus("success");
+          setMessage(`ID "${id}" verified! Redirecting...`);
           // Stop animation before navigating
           if (requestRef.current) cancelAnimationFrame(requestRef.current);
           router.push(`/${id}`);
           return;
         } else {
           // ID found but not authorized
-          setState(`Access Denied: ID "${id}" is not valid.`);
+          setStatus("error");
+          setMessage(`Access Denied: ID "${id}" is not valid.`);
           setQrData({ originalUrl: qrString, parameters });
 
           // Briefly pause to show the error before allowing next scan
@@ -72,11 +76,13 @@ export function useQrScanner() {
         }
       }
 
-      setState("QR detected but no ID parameter found.");
+      setStatus("error");
+      setMessage("QR detected but no ID parameter found.");
       setQrData({ originalUrl: qrString, parameters });
       pauseScanner();
     } catch (err) {
-      setState("QR does not contain a valid URL.");
+      setStatus("error");
+      setMessage("QR does not contain a valid URL.");
       setQrData({ originalUrl: qrString, parameters: {} });
       pauseScanner();
     }
@@ -122,7 +128,10 @@ export function useQrScanner() {
   async function startCamera() {
     try {
       if (!navigator.mediaDevices?.getUserMedia) {
-        setState("Camera API blocked or not supported. Check HTTPS/localhost.");
+        setStatus("error");
+        setMessage(
+          "Camera API blocked or not supported. Check HTTPS/localhost.",
+        );
         return;
       }
 
@@ -152,21 +161,23 @@ export function useQrScanner() {
         videoRef.current.setAttribute("playsinline", "true");
         await videoRef.current.play();
 
-        setState("Scanning...");
+        setStatus("scanning");
+        setMessage("Scanning...");
         requestRef.current = requestAnimationFrame(scanFrame);
       }
     } catch (err) {
+      setStatus("error");
       if (err instanceof DOMException && err.name === "NotFoundError") {
-        setState("Error: No camera found on this device.");
+        setMessage("Error: No camera found on this device.");
       } else if (
         err instanceof DOMException &&
         err.name === "NotAllowedError"
       ) {
-        setState(
+        setMessage(
           "Error: Camera permission denied. Please allow camera access.",
         );
       } else if (err instanceof Error) {
-        setState(`Camera error: ${err.message}`);
+        setMessage(`Camera error: ${err.message}`);
       }
       console.error("getUserMedia error:", err);
     }
@@ -196,5 +207,5 @@ export function useQrScanner() {
   }, []);
 
   // Expose startCamera to the component
-  return { videoRef, state, qrData, startCamera };
+  return { videoRef, status, message, qrData, startCamera };
 }