diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1cd5e4e..eeb631b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,8 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@react-three/drei": "^10.0.6",
+        "@react-three/fiber": "^9.1.2",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.2.0",
@@ -27,6 +29,7 @@
         "rehype-raw": "^7.0.0",
         "rehype-sanitize": "^6.0.0",
         "remark-gfm": "^4.0.1",
+        "three": "^0.175.0",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
       },
@@ -2792,6 +2795,24 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw=="
     },
+    "node_modules/@mediapipe/tasks-vision": {
+      "version": "0.10.17",
+      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz",
+      "integrity": "sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@monogrid/gainmap-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.1.0.tgz",
+      "integrity": "sha512-Obb0/gEd/HReTlg8ttaYk+0m62gQJmCblMOjHSMHRrBP2zdfKMHLCRbh/6ex9fSUJMKdjjIEiohwkbGD3wj2Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "promise-worker-transferable": "^1.0.4"
+      },
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -2908,6 +2929,96 @@
         }
       }
     },
+    "node_modules/@react-three/drei": {
+      "version": "10.0.6",
+      "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-10.0.6.tgz",
+      "integrity": "sha512-QtiAv/a1BaP+ZYfp8BphV8BMSO0O1BNhIPye3Zqm5iDqgX6JeiknPR6f2UmzUdBfPLwjZEaqjfULgJFvTUWgkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mediapipe/tasks-vision": "0.10.17",
+        "@monogrid/gainmap-js": "^3.0.6",
+        "@use-gesture/react": "^10.3.1",
+        "camera-controls": "^2.9.0",
+        "cross-env": "^7.0.3",
+        "detect-gpu": "^5.0.56",
+        "glsl-noise": "^0.0.0",
+        "hls.js": "^1.5.17",
+        "maath": "^0.10.8",
+        "meshline": "^3.3.1",
+        "stats-gl": "^2.2.8",
+        "stats.js": "^0.17.0",
+        "suspend-react": "^0.1.3",
+        "three-mesh-bvh": "^0.8.3",
+        "three-stdlib": "^2.35.6",
+        "troika-three-text": "^0.52.0",
+        "tunnel-rat": "^0.1.2",
+        "use-sync-external-store": "^1.4.0",
+        "utility-types": "^3.11.0",
+        "zustand": "^5.0.1"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": "^9.0.0",
+        "react": "^19",
+        "react-dom": "^19",
+        "three": ">=0.159"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.1.2.tgz",
+      "integrity": "sha512-k8FR9yVHV9kIF3iuOD0ds5hVymXYXfgdKklqziBVod9ZEJ8uk05Zjw29J/omU3IKeUfLNAIHfxneN3TUYM4I2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8",
+        "@types/react-reconciler": "^0.28.9",
+        "@types/webxr": "*",
+        "base64-js": "^1.5.1",
+        "buffer": "^6.0.3",
+        "its-fine": "^2.0.0",
+        "react-reconciler": "^0.31.0",
+        "react-use-measure": "^2.1.7",
+        "scheduler": "^0.25.0",
+        "suspend-react": "^0.1.3",
+        "use-sync-external-store": "^1.4.0",
+        "zustand": "^5.0.3"
+      },
+      "peerDependencies": {
+        "expo": ">=43.0",
+        "expo-asset": ">=8.4",
+        "expo-file-system": ">=11.0",
+        "expo-gl": ">=11.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "react-native": ">=0.78",
+        "three": ">=0.156"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "expo-asset": {
+          "optional": true
+        },
+        "expo-file-system": {
+          "optional": true
+        },
+        "expo-gl": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3350,6 +3461,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "license": "MIT"
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -3449,6 +3566,12 @@
         "dompurify": "*"
       }
     },
+    "node_modules/@types/draco3d": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
+      "integrity": "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==",
+      "license": "MIT"
+    },
     "node_modules/@types/eslint": {
       "version": "8.56.12",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
@@ -3624,6 +3747,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
+      "license": "MIT"
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
@@ -3665,6 +3794,15 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/react-reconciler": {
+      "version": "0.28.9",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
+      "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-router": {
       "version": "5.1.20",
       "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
@@ -3744,6 +3882,26 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.3",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
+      "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.175.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.175.0.tgz",
+      "integrity": "sha512-ldMSBgtZOZ3g9kJ3kOZSEtZIEITmJOzu8eKVpkhf036GuNkM4mt0NXecrjCn5tMm1OblOF7dZehlaDypBfNokw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -3754,6 +3912,12 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
     },
+    "node_modules/@types/webxr": {
+      "version": "0.5.22",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.22.tgz",
+      "integrity": "sha512-Vr6Stjv5jPRqH690f5I5GLjVk8GSsoQSYJ2FVd/3jJF7KaqfwPi3ehfBS96mlQ2kPCwZaX6U0rG2+NGHBKkA/A==",
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.0.tgz",
@@ -3998,6 +4162,24 @@
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="
     },
+    "node_modules/@use-gesture/core": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==",
+      "license": "MIT"
+    },
+    "node_modules/@use-gesture/react": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@use-gesture/core": "10.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
@@ -4129,6 +4311,12 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.60",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.60.tgz",
+      "integrity": "sha512-8B/tdfRFKdrnejqmvq95ogp8tf52oZ51p3f4QD5m5Paey/qlX4Rhhy5Y8tgFMi7Ms70HzcMMw3EQjH/jdhTwlA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -4928,6 +5116,26 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -4948,6 +5156,15 @@
         "node": ">= 8.0.0"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -5097,6 +5314,30 @@
         "node-int64": "^0.4.0"
       }
     },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -5201,6 +5442,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camera-controls": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-2.10.1.tgz",
+      "integrity": "sha512-KnaKdcvkBJ1Irbrzl8XD6WtZltkRjp869Jx8c0ujs9K+9WD+1D7ryBsCiVqJYUqt6i/HR5FxT7RLASieUD+Q5w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.126.1"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -5708,6 +5958,24 @@
         "node": ">=10"
       }
     },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -6294,6 +6562,15 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-gpu": {
+      "version": "5.0.70",
+      "resolved": "https://registry.npmjs.org/detect-gpu/-/detect-gpu-5.0.70.tgz",
+      "integrity": "sha512-bqerEP1Ese6nt3rFkwPnGbsUF9a4q+gMmpTVVOEzoCyeCc+y7/RvJnQZJx1JwhgQI5Ntg0Kgat8Uu7XpBqnz1w==",
+      "license": "MIT",
+      "dependencies": {
+        "webgl-constants": "^1.1.1"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -6513,6 +6790,12 @@
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
     },
+    "node_modules/draco3d": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
+      "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -7657,6 +7940,12 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -8294,6 +8583,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/glsl-noise": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz",
+      "integrity": "sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==",
+      "license": "MIT"
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -8599,6 +8894,12 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.2.tgz",
+      "integrity": "sha512-rx+pETSCJEDThm/JCm8CuadcAC410cVjb1XVXFNDKFuylaayHk1+tFxhkjvnMDAfqsJHxZXDAJ3Uc2d5xQyWlQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -8900,6 +9201,26 @@
         "node": ">=4"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -8908,6 +9229,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/immer": {
       "version": "9.0.21",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
@@ -9346,6 +9673,12 @@
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
     },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+      "license": "MIT"
+    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -9633,6 +9966,18 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/its-fine": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-2.0.0.tgz",
+      "integrity": "sha512-KLViCmWx94zOvpLwSlsx6yOCeMhZYaxrJV87Po5k/FoZzcPSahvK5qJ7fYhS61sZi5ikmh2S3Hz55A2l3U69ng==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-reconciler": "^0.28.9"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
     "node_modules/jackspeak": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
@@ -10758,6 +11103,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -10877,6 +11231,16 @@
         "lz-string": "bin/bin.js"
       }
     },
+    "node_modules/maath": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.8.tgz",
+      "integrity": "sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/three": ">=0.134.0",
+        "three": ">=0.134.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -11243,6 +11607,21 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshline": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/meshline/-/meshline-3.3.1.tgz",
+      "integrity": "sha512-/TQj+JdZkeSUOl5Mk2J7eLcYTLiQm2IDzmlSvYm7ov15anEcDJ92GHqqazxTSreeNgfnYu24kiEvvv0WlbCdFQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.137"
+      }
+    },
+    "node_modules/meshoptimizer": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+      "license": "MIT"
+    },
     "node_modules/methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
@@ -13815,6 +14194,12 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+      "license": "ISC"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -13880,6 +14265,16 @@
         "asap": "~2.0.6"
       }
     },
+    "node_modules/promise-worker-transferable": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/promise-worker-transferable/-/promise-worker-transferable-1.0.4.tgz",
+      "integrity": "sha512-bN+0ehEnrXfxV2ZQvU2PetO0n4gqBD4ulq3MI1WOPLgr7/Mg9yRQkX5+0v1vagr74ZTsl7XtzlaYDo2EuCeYJw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "is-promise": "^2.1.0",
+        "lie": "^3.0.2"
+      }
+    },
     "node_modules/prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -14235,6 +14630,21 @@
         "react": ">=18"
       }
     },
+    "node_modules/react-reconciler": {
+      "version": "0.31.0",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.31.0.tgz",
+      "integrity": "sha512-7Ob7Z+URmesIsIVRjnLoDGwBEG/tVitidU0nMsqX/eeJaLY89RISO/10ERe0MqmzuKUUB1rmY+h1itMbUHg9BQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.25.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -14361,6 +14771,21 @@
         }
       }
     },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -15631,6 +16056,32 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/stats-gl": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/stats-gl/-/stats-gl-2.4.2.tgz",
+      "integrity": "sha512-g5O9B0hm9CvnM36+v7SFl39T7hmAlv541tU81ME8YeSb3i1CIP5/QdDeSB3A0la0bKNHpxpwxOVRo2wFTYEosQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/three": "*",
+        "three": "^0.170.0"
+      },
+      "peerDependencies": {
+        "@types/three": "*",
+        "three": "*"
+      }
+    },
+    "node_modules/stats-gl/node_modules/three": {
+      "version": "0.170.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.170.0.tgz",
+      "integrity": "sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ==",
+      "license": "MIT"
+    },
+    "node_modules/stats.js": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz",
+      "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==",
+      "license": "MIT"
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -16047,6 +16498,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/suspend-react": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz",
+      "integrity": "sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=17.0"
+      }
+    },
     "node_modules/svg-parser": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
@@ -16388,6 +16848,44 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.175.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.175.0.tgz",
+      "integrity": "sha512-nNE3pnTHxXN/Phw768u0Grr7W4+rumGg/H6PgeseNJojkJtmeHJfZWi41Gp2mpXl1pg1pf1zjwR4McM1jTqkpg==",
+      "license": "MIT"
+    },
+    "node_modules/three-mesh-bvh": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.8.3.tgz",
+      "integrity": "sha512-4G5lBaF+g2auKX3P0yqx+MJC6oVt6sB5k+CchS6Ob0qvH0YIhuUk1eYr7ktsIpY+albCqE80/FVQGV190PmiAg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
+    "node_modules/three-stdlib": {
+      "version": "2.35.15",
+      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.35.15.tgz",
+      "integrity": "sha512-2XbhiOV7jVCchUoWxTmsj5dNhTe8eYb58Nyrfoa2F2yL+6h/+2VRaU2gENljRW1d/P1mk4/uwNzbdkKWV3hwzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/draco3d": "^1.4.0",
+        "@types/offscreencanvas": "^2019.6.4",
+        "@types/webxr": "^0.5.2",
+        "draco3d": "^1.4.1",
+        "fflate": "^0.6.9",
+        "potpack": "^1.0.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.128.0"
+      }
+    },
+    "node_modules/three-stdlib/node_modules/fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
+      "license": "MIT"
+    },
     "node_modules/throat": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz",
@@ -16464,6 +16962,36 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/troika-three-text": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.52.4.tgz",
+      "integrity": "sha512-V50EwcYGruV5rUZ9F4aNsrytGdKcXKALjEtQXIOBfhVoZU9VAqZNIoGQ3TMiooVqFAbR1w15T+f+8gkzoFzawg==",
+      "license": "MIT",
+      "dependencies": {
+        "bidi-js": "^1.0.2",
+        "troika-three-utils": "^0.52.4",
+        "troika-worker-utils": "^0.52.0",
+        "webgl-sdf-generator": "1.1.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-three-utils": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.52.4.tgz",
+      "integrity": "sha512-NORAStSVa/BDiG52Mfudk4j1FG4jC4ILutB3foPnfGbOeIs9+G5vZLa0pnmnaftZUGm4UwSoqEpWdqvC7zms3A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-worker-utils": {
+      "version": "0.52.0",
+      "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.52.0.tgz",
+      "integrity": "sha512-W1CpvTHykaPH5brv5VHLfQo9D1OYuo0cSBEUQFFT/nBUzM8iD6Lq2/tgG/f1OelbAS1WtaTPQzE5uM49egnngw==",
+      "license": "MIT"
+    },
     "node_modules/trough": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
@@ -16537,6 +17065,43 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "node_modules/tunnel-rat": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/tunnel-rat/-/tunnel-rat-0.1.2.tgz",
+      "integrity": "sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "zustand": "^4.3.2"
+      }
+    },
+    "node_modules/tunnel-rat/node_modules/zustand": {
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.6.tgz",
+      "integrity": "sha512-ibr/n1hBzLLj5Y+yUcU7dYw8p6WnIVzdJbnX+1YpaScvZVF2ziugqHs+LAmHw4lWO9c/zRj+K1ncgWDQuthEdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/turbo-stream": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
@@ -16911,6 +17476,15 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -16935,6 +17509,15 @@
       "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
       "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA=="
     },
+    "node_modules/utility-types": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
+      "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
@@ -17078,6 +17661,17 @@
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
       "integrity": "sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg=="
     },
+    "node_modules/webgl-constants": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-constants/-/webgl-constants-1.1.1.tgz",
+      "integrity": "sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg=="
+    },
+    "node_modules/webgl-sdf-generator": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
+      "integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==",
+      "license": "MIT"
+    },
     "node_modules/webidl-conversions": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
@@ -17892,6 +18486,35 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zustand": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.3.tgz",
+      "integrity": "sha512-14fwWQtU3pH4dE0dOpdMiWjddcH+QzKIgk1cl8epwSE7yag43k/AD/m4L6+K7DytAOr9gGBe3/EXj9g7cdostg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 4797f83..ba4040a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@react-three/drei": "^10.0.6",
+    "@react-three/fiber": "^9.1.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -22,6 +24,7 @@
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
+    "three": "^0.175.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
diff --git a/frontend/src/pages/Welcome.tsx b/frontend/src/pages/Welcome.tsx
index e095c03..3a45a76 100644
--- a/frontend/src/pages/Welcome.tsx
+++ b/frontend/src/pages/Welcome.tsx
@@ -1,13 +1,197 @@
 // Welcome.tsx
-import React from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 
 function Welcome() {
+    const aboutSectionRef = useRef<HTMLDivElement>(null);
+    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+    const [activeFaq, setActiveFaq] = useState<number | null>(null);
+
+    // FAQ data
+    const faqItems = [
+        {
+            question: 'What is quantum encryption?',
+            answer: 'Quantum encryption uses principles of quantum mechanics to create unbreakable encryption keys. Unlike traditional encryption, it is secured by the laws of physics themselves.'
+        },
+        {
+            question: 'How secure is Quantum Email?',
+            answer: 'Quantum Email uses state-of-the-art quantum encryption technology that is theoretically impossible to break, even with future quantum computers.'
+        },
+        {
+            question: 'Can I use Quantum Email with my existing email?',
+            answer: 'Yes! Quantum Email integrates seamlessly with your existing email accounts while adding an extra layer of quantum security.'
+        },
+        {
+            question: 'What happens if someone tries to intercept my email?',
+            answer: 'Any attempt to intercept or measure the quantum state of your email will immediately alter it, making it impossible for attackers to steal your information without detection.'
+        }
+    ];
+
+
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            setMousePosition({ x: e.clientX, y: e.clientY });
+            document.documentElement.style.setProperty('--mouse-x', `${e.clientX}px`);
+            document.documentElement.style.setProperty('--mouse-y', `${e.clientY}px`);
+        };
+
+        const handleScroll = () => {
+            const scrolled = window.scrollY;
+            document.documentElement.style.setProperty('--scroll-y', `${scrolled}px`);
+            
+            document.querySelectorAll('.parallax-section').forEach((section) => {
+                const rect = section.getBoundingClientRect();
+                const centerY = rect.top + rect.height / 2;
+                const viewportHeight = window.innerHeight;
+                const distanceFromCenter = centerY - viewportHeight / 2;
+                const parallaxOffset = distanceFromCenter * 0.1;
+                
+                section.setAttribute('style', `transform: translateY(${parallaxOffset}px)`);
+            });
+        };
+
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('scroll', handleScroll);
+        
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+    const [showBackToTop, setShowBackToTop] = useState(false);
+
+    useEffect(() => {
+        // Intersection Observer for fade-in animations
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('animate-fade-in');
+                        observer.unobserve(entry.target);
+                    }
+                });
+            },
+            { threshold: 0.1 }
+        );
+
+        // Observe all sections
+        document.querySelectorAll('.animate-on-scroll').forEach((section) => {
+            observer.observe(section);
+        });
+
+        // Back to Top button visibility
+        const handleScroll = () => {
+            setShowBackToTop(window.scrollY > 500);
+        };
+
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+
+    const scrollToTop = () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });    
+    };
+
     const handleGoogleLogin = () => {
         window.location.href = 'http://localhost:8080/auth/google';
     };
 
+    const scrollToAbout = () => {
+        aboutSectionRef.current?.scrollIntoView({ behavior: 'smooth' });
+    };
+
     return (
-        <div className="bg-gray-950 min-h-screen flex flex-col">
+        <div className="min-h-screen flex flex-col bg-gradient-to-b from-gray-950 via-gray-900 to-gray-950 relative overflow-hidden">
+            {/* Quantum Particle Effects */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                {/* Quantum tunneling effect */}
+                <div className="quantum-tunneling absolute inset-0">
+                    {[...Array(4)].map((_, i) => (
+                        <div key={`tunnel-${i}`} className={`tunnel-container absolute tunnel-${i}`}>
+                            <div className="tunnel-particle absolute w-2 h-2 bg-pink-500/40 rounded-full" />
+                            <div className="tunnel-barrier absolute rounded-lg bg-gray-800/30" />
+                        </div>
+                    ))}
+                </div>
+
+                {/* Superposition states */}
+                <div className="quantum-superposition absolute inset-0">
+                    {[...Array(3)].map((_, i) => (
+                        <div key={`superposition-${i}`} className={`superposition-state absolute superposition-${i}`}>
+                            <div className="state-up absolute w-1.5 h-1.5 bg-yellow-400/40 rounded-full" />
+                            <div className="state-down absolute w-1.5 h-1.5 bg-yellow-400/40 rounded-full" />
+                            <div className="state-connector absolute w-px bg-gradient-to-b from-yellow-400/30 to-transparent" />
+                        </div>
+                    ))}
+                </div>
+
+                {/* Energy level transitions */}
+                <div className="quantum-energy-levels absolute inset-0">
+                    {[...Array(4)].map((_, i) => (
+                        <div key={`energy-${i}`} className={`energy-level absolute energy-${i}`}>
+                            <div className="level-line absolute h-px bg-gradient-to-r from-blue-400/20 via-purple-400/20 to-blue-400/20" />
+                            <div className="electron absolute w-1.5 h-1.5 bg-blue-400/40 rounded-full" />
+                        </div>
+                    ))}
+                </div>
+
+                {/* Regular quantum particles */}
+                <div className="quantum-particles absolute inset-0">
+                    {[...Array(20)].map((_, i) => (
+                        <div
+                            key={`particle-${i}`}
+                            className={`particle absolute w-2 h-2 bg-blue-500/30 rounded-full particle-${i} interactive-particle`}
+                        />
+                    ))}
+                </div>
+                
+                {/* Orbital particles */}
+                <div className="quantum-orbitals absolute inset-0">
+                    {[...Array(3)].map((_, i) => (
+                        <div
+                            key={`orbital-${i}`}
+                            className={`orbital-ring absolute rounded-full border border-purple-500/20 orbital-${i}`}
+                        >
+                            <div className="orbital-particle absolute w-1.5 h-1.5 bg-purple-500/40 rounded-full" />
+                        </div>
+                    ))}
+                </div>
+
+                {/* Entangled particle pairs */}
+                <div className="quantum-entangled absolute inset-0">
+                    {[...Array(5)].map((_, i) => (
+                        <div key={`entangled-${i}`} className={`entangled-pair absolute entangled-${i}`}>
+                            <div className="entangled-particle-1 absolute w-2 h-2 bg-green-400/30 rounded-full" />
+                            <div className="entangled-connector absolute h-px transform origin-left" />
+                            <div className="entangled-particle-2 absolute w-2 h-2 bg-green-400/30 rounded-full" />
+                        </div>
+                    ))}
+                </div>
+
+                {/* Wave function collapse effect */}
+                <div className="quantum-waves absolute inset-0">
+                    {[...Array(3)].map((_, i) => (
+                        <div
+                            key={`wave-${i}`}
+                            className={`wave-ring absolute rounded-full border-2 border-cyan-500/10 wave-${i}`}
+                        />
+                    ))}
+                </div>
+            </div>
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(59,130,246,0.1),transparent_70%)] pointer-events-none blur-3xl"></div>
+            {/* Back to Top Button */}
+            <button
+                onClick={scrollToTop}
+                aria-label="Scroll to top of page"
+                title="Back to top"
+                className={`fixed bottom-8 right-8 bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full shadow-lg transition-all duration-300 transform hover:scale-110 z-50 ${showBackToTop ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10 pointer-events-none'}`}
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
+                </svg>
+            </button>
             <header className="p-6 flex justify-between items-center">
                 <div className="flex items-center">
                     <div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center mr-3">
@@ -19,7 +203,7 @@ function Welcome() {
                 </div>
                 <button
                     onClick={handleGoogleLogin}
-                    className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors duration-200 flex items-center"
+                    className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25"
                 >
                     <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
                         <path d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z"/>
@@ -27,10 +211,11 @@ function Welcome() {
                     Sign in with Google
                 </button>
             </header>
-            <main className="flex-grow flex flex-col items-center justify-center px-4">
-                <div className="max-w-4xl mx-auto text-center">
-                    <h1 className="text-4xl md:text-6xl font-bold text-white mb-6">
-                        Welcome to <span className="bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">Quantum Email</span>
+            <main className="flex-grow flex flex-col items-center px-4">
+                <div className="h-[90vh] flex items-center justify-center">
+                    <div className="max-w-4xl mx-auto text-center">
+                    <h1 className="text-4xl md:text-6xl font-bold text-white mb-6 animate-fade-in-up">
+                        Welcome to <span className="bg-gradient-to-r from-blue-500 via-purple-500 to-purple-600 bg-clip-text text-transparent animate-gradient">Quantum Email</span>
                     </h1>
                     <p className="text-gray-400 text-lg md:text-xl mb-8 max-w-2xl mx-auto">
                         Experience the next generation of secure email with quantum encryption technology.
@@ -39,20 +224,164 @@ function Welcome() {
                     <div className="flex flex-col sm:flex-row gap-4 justify-center">
                         <button
                             onClick={handleGoogleLogin}
-                            className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg text-lg font-medium transition-colors duration-200 flex items-center justify-center"
+                            className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg text-lg font-medium transition-all duration-200 flex items-center justify-center hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 group"
                         >
                             <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mr-2" viewBox="0 0 24 24" fill="currentColor">
                                 <path d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z"/>
                             </svg>
                             Get Started with Google
                         </button>
-                        <button className="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-lg text-lg font-medium transition-colors duration-200">
+                        <button 
+                            onClick={scrollToAbout}
+                            className="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-lg text-lg font-medium transition-colors duration-200 flex items-center group"
+                        >
                             Learn More
+                            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 ml-2 transform group-hover:translate-y-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+                            </svg>
                         </button>
                     </div>
+                    </div>
+                </div>
+
+                <div ref={aboutSectionRef} className="w-full max-w-6xl mx-auto px-8 py-24 min-h-[80vh] flex flex-col justify-center bg-gray-900/50 animate-on-scroll opacity-0 transform translate-y-4 transition-all duration-700">
+                    <h2 className="text-3xl font-bold text-white text-center mb-8">About Quantum Email</h2>
+                    <div className="grid md:grid-cols-2 gap-12 px-4">
+                        <div className="space-y-6">
+                            <div className="bg-gray-900 p-6 rounded-xl transform hover:scale-105 transition-all duration-300 hover:shadow-xl hover:shadow-blue-500/10">
+                                <h3 className="text-xl font-semibold text-white mb-3 flex items-center group">
+                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mr-2 text-blue-500 transform group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                                    </svg>
+                                    What is Quantum Email?
+                                </h3>
+                                <p className="text-gray-400 group-hover:text-gray-300 transition-colors">Quantum Email is a revolutionary communication platform that leverages quantum encryption technology to provide unbreakable security for your emails. Unlike traditional email services, we use quantum key distribution (QKD) to ensure that your messages remain private and secure, even against future quantum computer attacks.</p>
+                            </div>
+                            <div className="bg-gray-900 p-6 rounded-xl transform hover:scale-105 transition-all duration-300 hover:shadow-xl hover:shadow-purple-500/10">
+                                <h3 className="text-xl font-semibold text-white mb-3 flex items-center group">
+                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mr-2 text-purple-500 transform group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                                    </svg>
+                                    Why Choose Us?
+                                </h3>
+                                <p className="text-gray-400 group-hover:text-gray-300 transition-colors">We offer military-grade security with the simplicity of regular email. Our platform is designed for individuals and organizations who value privacy and need to protect sensitive communications from current and future threats.</p>
+                            </div>
+                        </div>
+                        <div className="space-y-6">
+                            <div className="bg-gray-900 p-6 rounded-xl transform hover:scale-105 transition-all duration-300 hover:shadow-xl hover:shadow-green-500/10">
+                                <h3 className="text-xl font-semibold text-white mb-3 flex items-center group">
+                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mr-2 text-green-500 transform group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+                                    </svg>
+                                    How It Works
+                                </h3>
+                                <p className="text-gray-400 group-hover:text-gray-300 transition-colors">Our system uses quantum properties to generate and distribute encryption keys. When you send an email, the content is encrypted using these quantum-generated keys. Any attempt to intercept or measure these keys would alter their state, making it impossible for attackers to steal your information without detection.</p>
+                            </div>
+                            <div className="bg-gray-900 p-6 rounded-xl transform hover:scale-105 transition-all duration-300 hover:shadow-xl hover:shadow-yellow-500/10">
+                                <h3 className="text-xl font-semibold text-white mb-3 flex items-center group">
+                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mr-2 text-yellow-500 transform group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                    </svg>
+                                    Real-Time Security
+                                </h3>
+                                <p className="text-gray-400 group-hover:text-gray-300 transition-colors">Experience instant encryption and decryption of your emails with our quantum-based system. Our platform continuously monitors for security breaches and automatically alerts you of any unauthorized access attempts, providing real-time protection for your communications.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="w-full max-w-6xl mx-auto px-4 py-16 min-h-[80vh] flex flex-col justify-center animate-on-scroll opacity-0 transform translate-y-4 transition-all duration-700">
+                    <h2 className="text-3xl font-bold text-white text-center mb-8">Quantum vs Traditional Email Security</h2>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto mt-8">
+                        <div className="bg-gray-900/80 backdrop-blur-sm p-8 rounded-xl transform hover:scale-105 transition-all duration-300 cursor-pointer h-full border border-gray-800 hover:border-blue-500/50 hover:shadow-lg hover:shadow-blue-500/10">
+                            <h3 className="text-2xl font-bold text-white mb-4 flex items-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 mr-3 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                                </svg>
+                                Real-time Security
+                            </h3>
+                            <div className="space-y-6">
+                                <div className="p-4 bg-gray-800/80 backdrop-blur-sm rounded-lg hover:bg-gray-800 transition-all duration-200 hover:shadow-md hover:shadow-blue-500/5 border border-gray-700/50">
+                                    <h4 className="text-blue-400 font-semibold mb-2">Current Protection</h4>
+                                    <p className="text-gray-400">Uses complex math problems that are hard for today's computers to solve. Like having a super complicated password that takes years to guess.</p>
+                                </div>
+                                <div className="p-4 bg-gray-800/80 backdrop-blur-sm rounded-lg hover:bg-gray-800 transition-all duration-200 hover:shadow-md hover:shadow-blue-500/5 border border-gray-700/50">
+                                    <h4 className="text-blue-400 font-semibold mb-2">How It Works</h4>
+                                    <p className="text-gray-400">Scrambles your messages using mathematical locks (encryption). The security depends on how difficult these math problems are to solve.</p>
+                                </div>
+                                <div className="p-4 bg-gray-800/80 backdrop-blur-sm rounded-lg hover:bg-gray-800 transition-all duration-200 hover:shadow-md hover:shadow-blue-500/5 border border-gray-700/50">
+                                    <h4 className="text-yellow-500 font-semibold mb-2 flex items-center">
+                                        <span className="mr-2">⚠️</span>Future Risk
+                                    </h4>
+                                    <p className="text-gray-400">Quantum computers could potentially break these mathematical locks, making traditional email security vulnerable in the future.</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="bg-gray-900/80 backdrop-blur-sm p-8 rounded-xl transform hover:scale-105 transition-all duration-300 cursor-pointer h-full border border-gray-800 hover:border-blue-500/50 hover:shadow-lg hover:shadow-blue-500/10">
+                            <h3 className="text-2xl font-bold text-white mb-4 flex items-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 mr-3 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                                </svg>
+                                Quantum Email Security
+                            </h3>
+                            <div className="space-y-6">
+                                <div className="p-4 bg-gray-800/80 backdrop-blur-sm rounded-lg hover:bg-gray-800 transition-all duration-200 hover:shadow-md hover:shadow-blue-500/5 border border-gray-700/50">
+                                    <h4 className="text-green-400 font-semibold mb-2">Unbreakable Protection</h4>
+                                    <p className="text-gray-400">Uses the laws of physics instead of math. It's like having a lock that physically breaks if someone tries to peek at it.</p>
+                                </div>
+                                <div className="p-4 bg-gray-800/80 backdrop-blur-sm rounded-lg hover:bg-gray-800 transition-all duration-200 hover:shadow-md hover:shadow-blue-500/5 border border-gray-700/50">
+                                    <h4 className="text-green-400 font-semibold mb-2">Self-Protecting</h4>
+                                    <p className="text-gray-400">If someone tries to intercept your message, the quantum properties automatically change, making the stolen information useless and alerting you immediately.</p>
+                                </div>
+                                <div className="p-4 bg-gray-800/80 backdrop-blur-sm rounded-lg hover:bg-gray-800 transition-all duration-200 hover:shadow-md hover:shadow-blue-500/5 border border-gray-700/50">
+                                    <h4 className="text-green-500 font-semibold mb-2 flex items-center">
+                                        <span className="mr-2">✓</span>Future-Proof
+                                    </h4>
+                                    <p className="text-gray-400">Safe against both current and future computers - even quantum computers can't break it because it's protected by the laws of physics themselves.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </main>
-            <footer className="py-6 px-4 text-center text-gray-500 text-sm">
+            {/* FAQ Section */}
+            <div className="w-full max-w-4xl mx-auto px-4 py-16 parallax-section">
+                <h2 className="text-3xl font-bold text-white text-center mb-12">Frequently Asked Questions</h2>
+                <div className="space-y-4">
+                    {faqItems.map((item, index) => (
+                        <div
+                            key={index}
+                            className="bg-gray-900/80 backdrop-blur-sm rounded-lg overflow-hidden transition-all duration-300"
+                        >
+                            <button
+                                className="w-full px-6 py-4 text-left flex justify-between items-center text-white hover:bg-gray-800/50"
+                                onClick={() => setActiveFaq(activeFaq === index ? null : index)}
+                            >
+                                <span className="font-semibold">{item.question}</span>
+                                <svg
+                                    className={`w-5 h-5 transform transition-transform ${activeFaq === index ? 'rotate-180' : ''}`}
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    stroke="currentColor"
+                                >
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                                </svg>
+                            </button>
+                            <div
+                                className={`px-6 transition-all duration-300 ease-in-out overflow-hidden ${
+                                    activeFaq === index ? 'max-h-48 py-4' : 'max-h-0'
+                                }`}
+                            >
+                                <p className="text-gray-400">{item.answer}</p>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+
+
+            <footer className="py-6 px-4 text-center text-gray-500 text-sm border-t border-gray-800/50 backdrop-blur-sm">
                 <p>© {new Date().getFullYear()} Quantum Email. All rights reserved.</p>
                 <p>Secured with quantum encryption technology</p>
             </footer>
@@ -60,4 +389,209 @@ function Welcome() {
     );
 }
 
+// Add these styles to the top of your CSS file or in your global styles
+const styles = `
+    /* Parallax and interactive effects */
+    :root {
+        --mouse-x: 0px;
+        --mouse-y: 0px;
+        --scroll-y: 0px;
+    }
+
+    .interactive-particle {
+        transition: transform 0.1s ease-out;
+    }
+
+    .interactive-particle:hover {
+        transform: scale(1.5);
+    }
+
+    @media (hover: hover) {
+        .interactive-particle {
+            transform: translate(
+                calc((var(--mouse-x) - 50vw) / -50),
+                calc((var(--mouse-y) - 50vh) / -50)
+            );
+        }
+    }
+
+    .parallax-section {
+        transform: translateY(calc(var(--scroll-y) * -0.1));
+        transition: transform 0.1s ease-out;
+        will-change: transform;
+    }
+    /* Quantum tunneling effect */
+    .tunnel-0 { top: 20%; left: 5%; width: 200px; height: 40px; animation: tunnelContainer 12s linear infinite; }
+    .tunnel-1 { top: 40%; left: 15%; width: 180px; height: 40px; animation: tunnelContainer 15s linear infinite; animation-delay: -3s; }
+    .tunnel-2 { top: 60%; left: 8%; width: 220px; height: 40px; animation: tunnelContainer 14s linear infinite; animation-delay: -6s; }
+    .tunnel-3 { top: 80%; left: 12%; width: 190px; height: 40px; animation: tunnelContainer 13s linear infinite; animation-delay: -9s; }
+
+    .tunnel-container {
+        transform: rotate(-15deg);
+    }
+
+    .tunnel-container .tunnel-particle {
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        animation: tunneling 4s ease-in-out infinite;
+    }
+
+    .tunnel-container .tunnel-barrier {
+        left: 40%;
+        top: 0;
+        width: 20%;
+        height: 100%;
+        animation: barrierPulse 4s ease-in-out infinite;
+    }
+
+    /* Superposition states */
+    .superposition-0 { top: 30%; right: 15%; height: 100px; animation: superpositionFloat 10s ease-in-out infinite; }
+    .superposition-1 { top: 50%; right: 25%; height: 80px; animation: superpositionFloat 12s ease-in-out infinite; animation-delay: -4s; }
+    .superposition-2 { top: 70%; right: 20%; height: 90px; animation: superpositionFloat 11s ease-in-out infinite; animation-delay: -7s; }
+
+    .superposition-state .state-up { top: 0; left: 50%; transform: translateX(-50%); }
+    .superposition-state .state-down { bottom: 0; left: 50%; transform: translateX(-50%); }
+    .superposition-state .state-connector { left: 50%; transform: translateX(-50%); height: 100%; }
+
+    /* Energy level transitions */
+    .energy-0 { top: 25%; right: 40%; width: 120px; }
+    .energy-1 { top: 35%; right: 45%; width: 140px; }
+    .energy-2 { top: 45%; right: 42%; width: 130px; }
+    .energy-3 { top: 55%; right: 38%; width: 150px; }
+
+    .energy-level .level-line { width: 100%; top: 50%; }
+    .energy-level .electron { top: 50%; transform: translateY(-50%); animation: electronJump 6s ease-in-out infinite; }
+
+    @keyframes tunneling {
+        0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.8; }
+        50% { transform: translateY(-50%) translateX(100%); opacity: 0.3; }
+    }
+
+    @keyframes barrierPulse {
+        0%, 100% { opacity: 0.3; }
+        50% { opacity: 0.1; }
+    }
+
+    @keyframes tunnelContainer {
+        0% { transform: rotate(-15deg) translateX(-100%); }
+        100% { transform: rotate(-15deg) translateX(100vw); }
+    }
+
+    @keyframes superpositionFloat {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-20px); }
+    }
+
+    @keyframes electronJump {
+        0%, 100% { left: 0; }
+        25% { left: 33%; transform: translateY(-50%) translateY(-20px); }
+        50% { left: 66%; }
+        75% { left: 100%; transform: translateY(-50%) translateY(20px); }
+    }
+
+    /* Regular quantum particles */
+    .particle-0 { top: 10%; left: 20%; animation: float 8s linear infinite; animation-delay: -2s; }
+    .particle-1 { top: 30%; left: 40%; animation: float 12s linear infinite; animation-delay: -4s; }
+    .particle-2 { top: 50%; left: 60%; animation: float 7s linear infinite; animation-delay: -1s; }
+    .particle-3 { top: 70%; left: 80%; animation: float 10s linear infinite; animation-delay: -3s; }
+    .particle-4 { top: 90%; left: 10%; animation: float 9s linear infinite; animation-delay: -5s; }
+    .particle-5 { top: 15%; left: 85%; animation: float 11s linear infinite; animation-delay: -2.5s; }
+    .particle-6 { top: 35%; left: 25%; animation: float 8.5s linear infinite; animation-delay: -1.5s; }
+    .particle-7 { top: 55%; left: 45%; animation: float 13s linear infinite; animation-delay: -4.5s; }
+    .particle-8 { top: 75%; left: 65%; animation: float 7.5s linear infinite; animation-delay: -3.5s; }
+    .particle-9 { top: 95%; left: 5%; animation: float 10.5s linear infinite; animation-delay: -2.8s; }
+    .particle-10 { top: 5%; left: 95%; animation: float 9.5s linear infinite; animation-delay: -1.8s; }
+    .particle-11 { top: 25%; left: 75%; animation: float 11.5s linear infinite; animation-delay: -4.2s; }
+    .particle-12 { top: 45%; left: 35%; animation: float 8.2s linear infinite; animation-delay: -3.2s; }
+    .particle-13 { top: 65%; left: 55%; animation: float 12.5s linear infinite; animation-delay: -2.2s; }
+    .particle-14 { top: 85%; left: 15%; animation: float 7.8s linear infinite; animation-delay: -1.2s; }
+    .particle-15 { top: 18%; left: 88%; animation: float 10.8s linear infinite; animation-delay: -4.8s; }
+    .particle-16 { top: 38%; left: 28%; animation: float 9.2s linear infinite; animation-delay: -3.8s; }
+    .particle-17 { top: 58%; left: 48%; animation: float 11.2s linear infinite; animation-delay: -2.5s; }
+    .particle-18 { top: 78%; left: 68%; animation: float 8.8s linear infinite; animation-delay: -1.8s; }
+    .particle-19 { top: 98%; left: 8%; animation: float 10.2s linear infinite; animation-delay: -4.5s; }
+
+    @keyframes float {
+        0% { transform: translate(0, 0) scale(1); opacity: 0; }
+        25% { opacity: 0.5; }
+        50% { transform: translate(100px, -100px) scale(1.5); opacity: 0.3; }
+        75% { opacity: 0.5; }
+        100% { transform: translate(0, 0) scale(1); opacity: 0; }
+    }
+
+    @keyframes fade-in {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+
+    .animate-fade-in {
+        animation: fade-in 0.8s ease-out forwards;
+    }
+
+    .quantum-particles .particle {
+        box-shadow: 0 0 15px 3px rgba(59, 130, 246, 0.3);
+    }
+
+    /* Orbital rings */
+    .orbital-0 { width: 150px; height: 150px; top: 20%; left: 10%; animation: rotate 20s linear infinite; }
+    .orbital-1 { width: 200px; height: 200px; top: 60%; left: 70%; animation: rotate 25s linear infinite reverse; }
+    .orbital-2 { width: 300px; height: 300px; top: 40%; left: 40%; animation: rotate 30s linear infinite; }
+
+    .orbital-ring .orbital-particle {
+        top: -2px;
+        left: 50%;
+        animation: glow 2s ease-in-out infinite;
+    }
+
+    /* Entangled particle pairs */
+    .entangled-0 { top: 25%; left: 15%; width: 100px; animation: entangle 15s ease-in-out infinite; }
+    .entangled-1 { top: 45%; left: 75%; width: 150px; animation: entangle 18s ease-in-out infinite; animation-delay: -5s; }
+    .entangled-2 { top: 65%; left: 25%; width: 120px; animation: entangle 20s ease-in-out infinite; animation-delay: -8s; }
+    .entangled-3 { top: 15%; left: 65%; width: 180px; animation: entangle 22s ease-in-out infinite; animation-delay: -12s; }
+    .entangled-4 { top: 75%; left: 45%; width: 140px; animation: entangle 17s ease-in-out infinite; animation-delay: -3s; }
+
+    .entangled-pair .entangled-particle-1 { left: 0; }
+    .entangled-pair .entangled-particle-2 { right: 0; }
+    .entangled-pair .entangled-connector {
+        left: 8px;
+        top: 4px;
+        right: 8px;
+        background: linear-gradient(90deg, rgba(74, 222, 128, 0.2), rgba(74, 222, 128, 0));
+    }
+
+    /* Wave function collapse rings */
+    .wave-0 { width: 100px; height: 100px; top: 30%; left: 20%; animation: waveCollapse 10s ease-in-out infinite; }
+    .wave-1 { width: 150px; height: 150px; top: 50%; left: 60%; animation: waveCollapse 12s ease-in-out infinite; animation-delay: -4s; }
+    .wave-2 { width: 200px; height: 200px; top: 70%; left: 40%; animation: waveCollapse 14s ease-in-out infinite; animation-delay: -8s; }
+
+    @keyframes rotate {
+        from { transform: translate(-50%, -50%) rotate(0deg); }
+        to { transform: translate(-50%, -50%) rotate(360deg); }
+    }
+
+    @keyframes glow {
+        0%, 100% { transform: scale(1); opacity: 0.4; }
+        50% { transform: scale(1.5); opacity: 0.8; }
+    }
+
+    @keyframes entangle {
+        0%, 100% { transform: rotate(0deg) scale(1); }
+        50% { transform: rotate(180deg) scale(0.8); }
+    }
+
+    @keyframes waveCollapse {
+        0% { transform: translate(-50%, -50%) scale(0.1); opacity: 0.8; }
+        50% { transform: translate(-50%, -50%) scale(1); opacity: 0.2; }
+        100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
+    }
+`;
+
+// Add styles to head
+if (typeof document !== 'undefined') {
+    const styleSheet = document.createElement('style');
+    styleSheet.textContent = styles;
+    document.head.appendChild(styleSheet);
+}
+
 export default Welcome;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 1490793..38ab572 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -4,7 +4,34 @@ module.exports = {
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      animation: {
+        'fade-in-up': 'fadeInUp 0.8s ease-out',
+        'gradient': 'gradient 8s linear infinite',
+      },
+      keyframes: {
+        fadeInUp: {
+          '0%': {
+            opacity: '0',
+            transform: 'translateY(20px)'
+          },
+          '100%': {
+            opacity: '1',
+            transform: 'translateY(0)'
+          },
+        },
+        gradient: {
+          '0%, 100%': {
+            'background-size': '200% 200%',
+            'background-position': 'left center'
+          },
+          '50%': {
+            'background-size': '200% 200%',
+            'background-position': 'right center'
+          }
+        },
+      },
+    },
   },
   plugins: [],
 }