diff --git a/package-lock.json b/package-lock.json
index 993daad..8390eed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,8 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.22.1",
         "react-tilt": "^1.0.2",
-        "react-vertical-timeline-component": "^3.6.0"
+        "react-vertical-timeline-component": "^3.6.0",
+        "three": "^0.161.0"
       },
       "devDependencies": {
         "@types/react": "^18.2.56",
@@ -1459,7 +1460,6 @@
       "version": "18.2.19",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.19.tgz",
       "integrity": "sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==",
-      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -1477,6 +1477,24 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
       "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
     },
+    "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==",
+      "peer": true
+    },
+    "node_modules/@types/three": {
+      "version": "0.161.2",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.161.2.tgz",
+      "integrity": "sha512-DazpZ+cIfBzbW/p0zm6G8CS03HBMd748A3R1ZOXHpqaXZLv2I5zNgQUrRG//UfJ6zYFp2cUoCQaOLaz8ubH07w==",
+      "peer": true,
+      "dependencies": {
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "fflate": "~0.6.10",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
     "node_modules/@types/webxr": {
       "version": "0.5.14",
       "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.14.tgz",
@@ -3831,6 +3849,12 @@
         "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==",
+      "peer": true
+    },
     "node_modules/micromatch": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
@@ -5264,6 +5288,11 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.161.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.161.0.tgz",
+      "integrity": "sha512-LC28VFtjbOyEu5b93K0bNRLw1rQlMJ85lilKsYj6dgTu+7i17W+JCCEbvrpmNHF1F3NAUqDSWq50UD7w9H2xQw=="
+    },
     "node_modules/three-mesh-bvh": {
       "version": "0.7.3",
       "resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.7.3.tgz",
diff --git a/package.json b/package.json
index 0af6d97..1e7cc47 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.1",
     "react-tilt": "^1.0.2",
-    "react-vertical-timeline-component": "^3.6.0"
+    "react-vertical-timeline-component": "^3.6.0",
+    "three": "^0.161.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.56",
diff --git a/src/components/canvas/Computers.jsx b/src/components/canvas/Computers.jsx
index 1d6c2bc..de17699 100644
--- a/src/components/canvas/Computers.jsx
+++ b/src/components/canvas/Computers.jsx
@@ -1,9 +1,26 @@
-import React from 'react'
+import { Suspense, useEffect, useState } from 'react';
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls, Preload, useGLTF } from '@react-three/drei';
+
+import CanvasLocader from '../Loader.jsx';
 
 const Computers = () => {
-  return (
-    <div>Computers</div>
-  )
+    // public folder is the default root: 
+    // https://github.com/vitejs/vite/discussions/14201#discussioncomment-7233423
+    const computer = useGLTF('./desktop_pc/scene.gltf')  // .gltf file: 3d model file
+
+
+    return (
+        <mesh>
+            {/*create light or we wouldn't see anything*/}
+            <hemisphereLight intensity={0.15} groundColor="black" />
+            {/*create refelction light*/}
+            <printLight intensity={1} />
+            <primitive
+                object={computer.scene}
+            />
+        </mesh>
+    )
 }
 
-export default Computers
\ No newline at end of file
+export default Computers
diff --git a/tutorial.md b/tutorial.md
index a979346..358e1cf 100644
--- a/tutorial.md
+++ b/tutorial.md
@@ -57,3 +57,8 @@ npm install --legacy-peer-deps @react-three/fiber @react-three/drei maath react-
 ```bash
 npm run dev
 ```
+
+- issue 1: [<font color=red>ERROR</font>] Could not resolve "three"
+```bash
+npm install three
+```