diff --git a/app/blob/page.jsx b/app/blob/page.jsx
index 1bd11a4e..37fe8f93 100644
--- a/app/blob/page.jsx
+++ b/app/blob/page.jsx
@@ -1,24 +1,10 @@
 'use client'
 
 import dynamic from 'next/dynamic'
-
+import { View } from '@react-three/drei'
 const Blob = dynamic(() => import('@/components/canvas/Examples').then((mod) => mod.Blob), { ssr: false })
-const View = dynamic(() => import('@/components/canvas/View').then((mod) => mod.View), {
-  ssr: false,
-  loading: () => (
-    <div className='flex h-96 w-full flex-col items-center justify-center'>
-      <svg className='-ml-1 mr-3 h-5 w-5 animate-spin text-black' fill='none' viewBox='0 0 24 24'>
-        <circle className='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='4' />
-        <path
-          className='opacity-75'
-          fill='currentColor'
-          d='M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
-        />
-      </svg>
-    </div>
-  ),
-})
-const Common = dynamic(() => import('@/components/canvas/View').then((mod) => mod.Common), { ssr: false })
+
+const Common = dynamic(() => import('@/components/canvas/Common').then((mod) => mod.Common), { ssr: false })
 
 export default function Page() {
   return (
diff --git a/app/page.jsx b/app/page.jsx
index a26a93b7..a7544222 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -2,26 +2,12 @@
 
 import dynamic from 'next/dynamic'
 import { Suspense } from 'react'
+import { View } from '@react-three/drei'
 
 const Logo = dynamic(() => import('@/components/canvas/Examples').then((mod) => mod.Logo), { ssr: false })
 const Dog = dynamic(() => import('@/components/canvas/Examples').then((mod) => mod.Dog), { ssr: false })
 const Duck = dynamic(() => import('@/components/canvas/Examples').then((mod) => mod.Duck), { ssr: false })
-const View = dynamic(() => import('@/components/canvas/View').then((mod) => mod.View), {
-  ssr: false,
-  loading: () => (
-    <div className='flex h-96 w-full flex-col items-center justify-center'>
-      <svg className='-ml-1 mr-3 h-5 w-5 animate-spin text-black' fill='none' viewBox='0 0 24 24'>
-        <circle className='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='4' />
-        <path
-          className='opacity-75'
-          fill='currentColor'
-          d='M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
-        />
-      </svg>
-    </div>
-  ),
-})
-const Common = dynamic(() => import('@/components/canvas/View').then((mod) => mod.Common), { ssr: false })
+const Common = dynamic(() => import('@/components/canvas/Common').then((mod) => mod.Common), { ssr: false })
 
 export default function Page() {
   return (
@@ -51,19 +37,19 @@ export default function Page() {
           <p className='mb-8 text-gray-600'>Drag, scroll, pinch, and rotate the canvas to explore the 3D scene.</p>
         </div>
         <div className='relative my-12 h-48 w-full py-6 sm:w-1/2 md:mb-40'>
-          <View orbit className='relative h-full  sm:h-48 sm:w-full'>
+          <View className='relative h-full  sm:h-48 sm:w-full'>
             <Suspense fallback={null}>
               <Dog scale={2} position={[0, -1.6, 0]} rotation={[0.0, -0.3, 0]} />
-              <Common color={'lightpink'} />
+              <Common color={'lightpink'} orbit />
             </Suspense>
           </View>
         </div>
         {/* second row */}
         <div className='relative my-12 h-48 w-full py-6 sm:w-1/2 md:mb-40'>
-          <View orbit className='relative h-full animate-bounce sm:h-48 sm:w-full'>
+          <View className='relative h-full animate-bounce sm:h-48 sm:w-full'>
             <Suspense fallback={null}>
               <Duck route='/blob' scale={2} position={[0, -1.6, 0]} />
-              <Common color={'lightblue'} />
+              <Common color={'lightblue'} orbit />
             </Suspense>
           </View>
         </div>
diff --git a/package.json b/package.json
index 6907035d..1ef3de76 100644
--- a/package.json
+++ b/package.json
@@ -18,15 +18,14 @@
   },
   "dependencies": {
     "@ducanh2912/next-pwa": "^10.0.0",
-    "@react-three/drei": "^9.92.7",
-    "@react-three/fiber": "^8.15.12",
+    "@react-three/drei": "^9.120.6",
+    "@react-three/fiber": "^8.17.10",
     "glsl-random": "^0.0.5",
     "next": "^14.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "three": "^0.160.0",
-    "three-stdlib": "^2.28.9",
-    "tunnel-rat": "^0.1.2"
+    "three": "^0.172.0",
+    "three-stdlib": "^2.28.9"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^14.0.4",
diff --git a/src/components/canvas/Common.jsx b/src/components/canvas/Common.jsx
new file mode 100644
index 00000000..4583b2fc
--- /dev/null
+++ b/src/components/canvas/Common.jsx
@@ -0,0 +1,15 @@
+'use client'
+
+import { Suspense } from 'react'
+import { PerspectiveCamera, OrbitControls } from '@react-three/drei'
+
+export const Common = ({ color, orbit }) => (
+  <Suspense fallback={null}>
+    {color && <color attach='background' args={[color]} />}
+    {orbit && <OrbitControls />}
+    <ambientLight />
+    <pointLight position={[20, 30, 10]} intensity={3} decay={0.2} />
+    <pointLight position={[-10, -10, -10]} color='blue' decay={0.2} />
+    <PerspectiveCamera makeDefault fov={40} position={[0, 0, 6]} />
+  </Suspense>
+)
diff --git a/src/components/canvas/Scene.jsx b/src/components/canvas/Scene.jsx
index 6b41e692..83dd073c 100644
--- a/src/components/canvas/Scene.jsx
+++ b/src/components/canvas/Scene.jsx
@@ -1,18 +1,14 @@
 'use client'
 
 import { Canvas } from '@react-three/fiber'
-import { Preload } from '@react-three/drei'
-import { r3f } from '@/helpers/global'
+import { Preload, View } from '@react-three/drei'
 import * as THREE from 'three'
 
 export default function Scene({ ...props }) {
   // Everything defined in here will persist between route changes, only children are swapped
   return (
-    <Canvas {...props}
-      onCreated={(state) => (state.gl.toneMapping = THREE.AgXToneMapping)}
-    >
-      {/* @ts-ignore */}
-      <r3f.Out />
+    <Canvas {...props} onCreated={(state) => (state.gl.toneMapping = THREE.AgXToneMapping)}>
+      <View.Port />
       <Preload all />
     </Canvas>
   )
diff --git a/src/components/canvas/View.jsx b/src/components/canvas/View.jsx
deleted file mode 100644
index ad5cd940..00000000
--- a/src/components/canvas/View.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client'
-
-import { forwardRef, Suspense, useImperativeHandle, useRef } from 'react'
-import { OrbitControls, PerspectiveCamera, View as ViewImpl } from '@react-three/drei'
-import { Three } from '@/helpers/components/Three'
-
-export const Common = ({ color }) => (
-  <Suspense fallback={null}>
-    {color && <color attach='background' args={[color]} />}
-    <ambientLight />
-    <pointLight position={[20, 30, 10]} intensity={3} decay={0.2} />
-    <pointLight position={[-10, -10, -10]} color='blue' decay={0.2} />
-    <PerspectiveCamera makeDefault fov={40} position={[0, 0, 6]} />
-  </Suspense>
-)
-
-const View = forwardRef(({ children, orbit, ...props }, ref) => {
-  const localRef = useRef(null)
-  useImperativeHandle(ref, () => localRef.current)
-
-  return (
-    <>
-      <div ref={localRef} {...props} />
-      <Three>
-        <ViewImpl track={localRef}>
-          {children}
-          {orbit && <OrbitControls />}
-        </ViewImpl>
-      </Three>
-    </>
-  )
-})
-View.displayName = 'View'
-
-export { View }
diff --git a/src/helpers/components/Three.jsx b/src/helpers/components/Three.jsx
deleted file mode 100644
index 15121319..00000000
--- a/src/helpers/components/Three.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-'use client'
-
-import { r3f } from '@/helpers/global'
-
-export const Three = ({ children }) => {
-  return <r3f.In>{children}</r3f.In>
-}
diff --git a/src/helpers/global.js b/src/helpers/global.js
deleted file mode 100644
index df081e5b..00000000
--- a/src/helpers/global.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import tunnel from 'tunnel-rat'
-
-export const r3f = tunnel()