diff --git a/package-lock.json b/package-lock.json
index 3061d00..4b812f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2255,6 +2255,45 @@
         "@react-spring/shared": "9.0.0-rc.3"
       }
     },
+    "@react-three/drei": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-2.2.3.tgz",
+      "integrity": "sha512-ZnVybevJ494ql+KdIaQaWRV5xbM4Z8MLDFkdJxzcZopxOj94LKmDCg7gVfIJ2/5dRL/RpiZAm9r8GAV7rToEig==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "@react-spring/web": "^9.0.0-rc.3",
+        "detect-gpu": "^1.5.1",
+        "glsl-noise": "^0.0.0",
+        "lodash.omit": "^4.5.0",
+        "lodash.pick": "^4.4.0",
+        "react-merge-refs": "^1.0.0",
+        "stats.js": "^0.17.0",
+        "troika-three-text": "^0.34.0",
+        "utility-types": "^3.10.0",
+        "zustand": "^3.0.3"
+      },
+      "dependencies": {
+        "troika-three-text": {
+          "version": "0.34.1",
+          "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.34.1.tgz",
+          "integrity": "sha512-67nXL2cPFzkCFmfRTpo0ylH1OY7gqwzRSt1C+SgnG2/rAmFCExhvr+ND2TVX8U4kVctCLgfU/e7V8IOdZ3x/gQ==",
+          "requires": {
+            "troika-three-utils": "^0.34.0",
+            "troika-worker-utils": "^0.34.1"
+          }
+        },
+        "troika-three-utils": {
+          "version": "0.34.0",
+          "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.34.0.tgz",
+          "integrity": "sha512-6Dm6FzGFpuiehjKkm3wAV3e+SPnHQ+GxwXnHFToKLcQ1/gVDOIL69BWCosrlEUb0SUOQjQv6sd5QpNT6IIewpQ=="
+        },
+        "troika-worker-utils": {
+          "version": "0.34.1",
+          "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.34.1.tgz",
+          "integrity": "sha512-zLTSB6ISd/dpBMG6PFR2v7sqU2bqVwOUd45iWzcgcRE9+w/5YJN8h0+H5EmgRPIVe5xus0UZQKUgVH6FRA+YdQ=="
+        }
+      }
+    },
     "@rollup/plugin-node-resolve": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
@@ -5588,25 +5627,6 @@
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
     },
-    "drei": {
-      "version": "1.5.7",
-      "resolved": "https://registry.npmjs.org/drei/-/drei-1.5.7.tgz",
-      "integrity": "sha512-x7PQfvoSI1OqOwghZuZBhrNtaxMHh0bpVBLFYu39qwDghnBYgNIpNhoRtqK5FzRbcS1Rjdq0KWP0leSGKG/rsA==",
-      "requires": {
-        "@babel/runtime": "^7.11.2",
-        "@react-spring/web": "^9.0.0-rc.3",
-        "detect-gpu": "^1.3.0",
-        "glsl-noise": "^0.0.0",
-        "lodash.omit": "^4.5.0",
-        "lodash.pick": "^4.4.0",
-        "r3f-troika": "^0.31.1",
-        "react-merge-refs": "^1.0.0",
-        "stats.js": "^0.17.0",
-        "troika-three-text": "^0.31.0",
-        "utility-types": "^3.10.0",
-        "zustand": "^3.0.3"
-      }
-    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -13972,15 +13992,6 @@
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
       "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
     },
-    "r3f-troika": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/r3f-troika/-/r3f-troika-0.31.1.tgz",
-      "integrity": "sha512-d0AI2ZCpU5u9axqJ3I+KI786ltQNOJKimeuq+96Sir/sg0Nl2m5JNA9fBg+YEZ6fOR7+kcbyaycQcTbfTpYDDQ==",
-      "requires": {
-        "troika-three-utils": "^0.31.0",
-        "troika-worker-utils": "^0.31.0"
-      }
-    },
     "raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -16535,25 +16546,6 @@
         "punycode": "^2.1.1"
       }
     },
-    "troika-three-text": {
-      "version": "0.31.0",
-      "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.31.0.tgz",
-      "integrity": "sha512-JpRO+AC9mLZ49IymBwwwFLcasN0xjjQmSkGO9tlzlpeHpexsK4JB80qs6d6vhtt+vmfdJi27/m+WYhaR6+OzaQ==",
-      "requires": {
-        "troika-three-utils": "^0.31.0",
-        "troika-worker-utils": "^0.31.0"
-      }
-    },
-    "troika-three-utils": {
-      "version": "0.31.0",
-      "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.31.0.tgz",
-      "integrity": "sha512-IUy61i+Kv0EjievWhOmIkqjDa1acIO2J98oO2tZ+PpEfA+Q0syRknH4SN+iiYpa/MNJH1gQz0WfZF4Vk1/pumQ=="
-    },
-    "troika-worker-utils": {
-      "version": "0.31.0",
-      "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.31.0.tgz",
-      "integrity": "sha512-WxHhfFmy6dWBMACUnzInBlqlR601Dy3c9hiRp4aAN+ACzSldwsv1SHOqix4X2+6HTz/pBtHtfJVDbwJiO+lbCw=="
-    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
diff --git a/package.json b/package.json
index 3007000..63cc5cf 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@react-spring/three": "^9.0.0-rc.3",
+    "@react-three/drei": "^2.2.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
@@ -11,7 +12,6 @@
     "@types/node": "^12.12.54",
     "@types/react": "^16.9.47",
     "@types/react-dom": "^16.9.8",
-    "drei": "^1.3.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "^4.0.0",
diff --git a/public/gate_object_texture.png b/public/sprite/gate_object_texture.png
similarity index 100%
rename from public/gate_object_texture.png
rename to public/sprite/gate_object_texture.png
diff --git a/src/components/GateScene/GateMiddle.tsx b/src/components/GateScene/GateMiddle.tsx
index bb59311..8c2f1b7 100644
--- a/src/components/GateScene/GateMiddle.tsx
+++ b/src/components/GateScene/GateMiddle.tsx
@@ -1,8 +1,10 @@
 import React from "react";
 import gateText from "../../static/sprite/gate_pass.png";
 import gateTextUnderline from "../../static/sprite/gate_pass_underline.png";
-import gateBlueBinarySingularOne from "../../static/sprite/blue_binary_singular_one.png";
-import gateBlueBinarySingularZero from "../../static/sprite/blue_binary_singular_zero.png";
+import gateTextAccessPass from "../../static/sprite/you_got_an_access_pass.png";
+import changeSiteEnable from "../../static/sprite/change_site_enable.png";
+import gateLeftThing from "../../static/sprite/left_gate_thing.png";
+import gateRightThing from "../../static/sprite/right_gate_thing.png";
 import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import GateMiddleObject from "./GateMiddleObject";
@@ -10,6 +12,17 @@ import GateMiddleObject from "./GateMiddleObject";
 const GateMiddle = () => {
   const gatePassTexture = useLoader(THREE.TextureLoader, gateText);
   const gatePassUnderline = useLoader(THREE.TextureLoader, gateTextUnderline);
+  const gateAccessPassTexture = useLoader(
+    THREE.TextureLoader,
+    gateTextAccessPass
+  );
+  const changeSiteEnableTexture = useLoader(
+    THREE.TextureLoader,
+    changeSiteEnable
+  );
+
+  const gateLeftThingTexture = useLoader(THREE.TextureLoader, gateLeftThing);
+  const gateRightThingTexture = useLoader(THREE.TextureLoader, gateRightThing);
 
   return (
     <>
@@ -31,6 +44,59 @@ const GateMiddle = () => {
         />
       </sprite>
 
+      <sprite scale={[1.6, 0.1, 1]} position={[0, 0.8, 0.2]} renderOrder={3}>
+        <spriteMaterial
+          attach="material"
+          map={changeSiteEnableTexture}
+          transparent={true}
+          depthTest={false}
+        />
+      </sprite>
+
+      <sprite scale={[4.2, 0.01, 0]} position={[0, 0.79, 0.07]} renderOrder={3}>
+        <spriteMaterial
+          attach="material"
+          map={gatePassUnderline}
+          transparent={true}
+          depthTest={false}
+        />
+      </sprite>
+
+      <sprite
+        scale={[0.7, 0.35, 1]}
+        position={[-0.8, -0.8, 0.2]}
+        renderOrder={3}
+      >
+        <spriteMaterial
+          attach="material"
+          map={gateLeftThingTexture}
+          transparent={true}
+          depthTest={false}
+        />
+      </sprite>
+
+      <sprite
+        scale={[0.7, 0.35, 1]}
+        position={[0.8, -0.8, 0.2]}
+        renderOrder={3}
+      >
+        <spriteMaterial
+          attach="material"
+          map={gateRightThingTexture}
+          transparent={true}
+          depthTest={false}
+        />
+      </sprite>
+
+      <sprite scale={[1.25, 0.31, 1]} position={[0, -0.8, 0.2]} renderOrder={3}>
+        <spriteMaterial
+          attach="material"
+          map={gateAccessPassTexture}
+          transparent={true}
+          depthTest={false}
+        />
+      </sprite>
+
       <GateMiddleObject />
     </>
   );
diff --git a/src/components/GateScene/GateMiddleObject/Mirror.tsx b/src/components/GateScene/GateMiddleObject/Mirror.tsx
index 0705715..1110f5b 100644
--- a/src/components/GateScene/GateMiddleObject/Mirror.tsx
+++ b/src/components/GateScene/GateMiddleObject/Mirror.tsx
@@ -1,61 +1,48 @@
 import React, { useMemo, useRef } from "react";
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
+import mirrorTexture from "../../../static/sprite/gate_object_texture.png";
 
 const Mirror = () => {
+  const tex1 = useLoader(THREE.TextureLoader, mirrorTexture);
 
-  const cubeTexture = useLoader(
-    // @ts-ignore
-    THREE.CubeTextureLoader,
-    [
-      "gate_object_texture_2.png",
-      "gate_object_texture_2.png",
-      "gate_object_texture_2.png",
-      "gate_object_texture_2.png",
-      "gate_object_texture_2.png",
-      "gate_object_texture_2.png",
-      "gate_object_texture_2.png",
-    ],
-    (loader: THREE.CubeTextureLoader) => loader.setPath("../../../static")
-  );
-
-  const mirrorMaterial = useMemo(() => {
-    const loader = new THREE.CubeTextureLoader();
-    const texture = loader.load([
-      "gate_object_texture.png",
-      "gate_object_texture.png",
-      "gate_object_texture.png",
-      "gate_object_texture.png",
-      "gate_object_texture.png",
-      "gate_object_texture.png",
-    ]);
-    return new THREE.MeshBasicMaterial({
-      envMap: cubeTexture,
-      depthTest: false,
-      transparent: true,
-    });
-  }, []);
+  const texture = useMemo(() => {
+    let repeatX, repeatY;
+    tex1.wrapS = THREE.RepeatWrapping;
+    tex1.wrapT = THREE.RepeatWrapping;
+    repeatX = 88 / 256;
+    repeatY = 1;
+    tex1.repeat.set(repeatX, repeatY);
+    return tex1;
+  }, [tex1]);
 
   const mirrorRef = useRef<THREE.Object3D>();
+  const materialRef = useRef<THREE.MeshBasicMaterial>();
 
   useFrame(() => {
     if (mirrorRef.current) {
-      mirrorRef.current.rotation.y += 0.03;
+      mirrorRef.current.rotation.y -= 0.03;
+    }
+    if (materialRef.current) {
+      texture.offset.x += 0.01;
     }
-    mirrorMaterial.needsUpdate = true;
   });
 
   return (
-    <group ref={mirrorRef} position={[-0.1, -0.2, -0.2]}>
-      <mesh
-        renderOrder={4}
-        position={[0.2, 0.2, 0.2]}
-        scale={[0.4, 1, 0.05]}
-        material={mirrorMaterial}
-      >
-        <boxBufferGeometry attach="geometry"></boxBufferGeometry>
-      </mesh>
-    </group>
+    <>
+      <group ref={mirrorRef} position={[-0.1, -0.2, -0.2]}>
+        <mesh renderOrder={4} position={[0.2, 0.2, 0.2]} scale={[0.4, 1, 0.05]}>
+          <boxBufferGeometry attach="geometry" />
+          <meshBasicMaterial
+            ref={materialRef}
+            attach="material"
+            map={texture}
+            transparent={true}
+            depthTest={false}
+          />
+        </mesh>
+      </group>
+    </>
   );
 };
 
diff --git a/src/components/GateScene/GateSide.tsx b/src/components/GateScene/GateSide.tsx
index d5cd895..997ab66 100644
--- a/src/components/GateScene/GateSide.tsx
+++ b/src/components/GateScene/GateSide.tsx
@@ -2,7 +2,7 @@ import React, { useMemo, useRef } from "react";
 import blueBinary from "../../static/sprite/blue_binary.png";
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import { OrbitControls } from "drei";
+import { OrbitControls } from "@react-three/drei";
 
 const GateSide = () => {
   const blueBinaryTex = useLoader(THREE.TextureLoader, blueBinary);
diff --git a/src/scenes/GateScene.tsx b/src/scenes/GateScene.tsx
index 1e072a7..7ea3b0f 100644
--- a/src/scenes/GateScene.tsx
+++ b/src/scenes/GateScene.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import GateSide from "../components/GateScene/GateSide";
-import { OrbitControls } from "drei";
+import { OrbitControls } from "@react-three/drei";
 import GateMiddle from "../components/GateScene/GateMiddle";
 
 const GateScene = () => {
diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx
index 4ef6c48..34fb3fa 100644
--- a/src/scenes/MainScene.tsx
+++ b/src/scenes/MainScene.tsx
@@ -1,5 +1,5 @@
 import { a, useSpring } from "@react-spring/three";
-import { OrbitControls } from "drei";
+import { OrbitControls } from "@react-three/drei";
 import React, { Suspense, useEffect } from "react";
 import Site from "../components/MainScene/Site";
 import Lain from "../components/MainScene/Lain";
diff --git a/src/scenes/MediaScene.tsx b/src/scenes/MediaScene.tsx
index 5bdb35d..f6b3740 100644
--- a/src/scenes/MediaScene.tsx
+++ b/src/scenes/MediaScene.tsx
@@ -7,7 +7,7 @@ import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisua
 import MediaLoadingBar from "../components/MediaScene/MediaLoadingBar";
 import NodeNameContainer from "../components/MediaScene/NodeNameContainer";
 import Lof from "../components/MediaScene/Lof";
-import { OrbitControls } from "drei";
+import { OrbitControls } from "@react-three/drei";
 import Images from "../components/MediaScene/Images";
 
 const MediaScene = () => {