diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b0301b7f..c9a57e6e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "@hookform/resolvers": "^3.9.0",
         "@radix-ui/react-slot": "^1.1.0",
-        "@react-three/drei": "^9.107.0",
+        "@react-three/drei": "^9.109.2",
+        "@react-three/fiber": "^8.16.8",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -39,6 +40,7 @@
         "react-spring": "^9.7.3",
         "remark-gfm": "^4.0.0",
         "tailwind-merge": "^2.4.0",
+        "three": "^0.167.1",
         "urdf-loader": "^0.12.1",
         "uuid": "^10.0.0",
         "web-vitals": "^2.1.4",
@@ -7504,7 +7506,7 @@
       "version": "8.16.8",
       "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.16.8.tgz",
       "integrity": "sha512-Lc8fjATtvQEfSd8d5iKdbpHtRm/aPMeFj7jQvp6TNHfpo8IQTW3wwcE1ZMrGGoUH+w2mnyS+0MK1NLPLnuzGkQ==",
-      "peer": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.17.8",
         "@types/react-reconciler": "^0.26.7",
@@ -8695,7 +8697,6 @@
       "version": "0.26.7",
       "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.26.7.tgz",
       "integrity": "sha512-mBDYl8x+oyPX/VBb3E638N0B7xG+SPk/EAMcVPeexqus/5aTpTphQi0curhhshOqRrc9t6OPoJfEUkbymse/lQ==",
-      "peer": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -10653,7 +10654,6 @@
           "url": "https://feross.org/support"
         }
       ],
-      "peer": true,
       "dependencies": {
         "base64-js": "^1.3.1",
         "ieee754": "^1.2.1"
@@ -12350,8 +12350,7 @@
     "node_modules/debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
-      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
-      "peer": true
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
     },
     "node_modules/debug": {
       "version": "4.3.6",
@@ -16826,7 +16825,6 @@
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.2.5.tgz",
       "integrity": "sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==",
-      "peer": true,
       "dependencies": {
         "@types/react-reconciler": "^0.28.0"
       },
@@ -16838,7 +16836,6 @@
       "version": "0.28.8",
       "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.8.tgz",
       "integrity": "sha512-SN9c4kxXZonFhbX4hJrZy37yw9e7EIxcpHCxQv5JUS18wDE5ovkQKlqQEkufdJCCMfuI9BnjUJvhYeJ9x5Ra7g==",
-      "peer": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -25550,7 +25547,6 @@
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.27.0.tgz",
       "integrity": "sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.21.0"
@@ -27489,7 +27485,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
       "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==",
-      "peer": true,
       "dependencies": {
         "debounce": "^1.2.1"
       },
@@ -28244,7 +28239,6 @@
       "version": "0.21.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
       "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -29800,10 +29794,10 @@
       }
     },
     "node_modules/three": {
-      "version": "0.167.0",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.167.0.tgz",
-      "integrity": "sha512-9Y1a66fpjqF3rhq7ivKTaKtjQLZ97Hj/lZ00DmZWaKHaQFH4uzYT1znwRDWQOcgMmCcOloQzo61gDmqO8l9xmA==",
-      "peer": true
+      "version": "0.167.1",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.167.1.tgz",
+      "integrity": "sha512-gYTLJA/UQip6J/tJvl91YYqlZF47+D/kxiWrbTon35ZHlXEN0VOo+Qke2walF1/x92v55H6enomymg4Dak52kw==",
+      "license": "MIT"
     },
     "node_modules/three-mesh-bvh": {
       "version": "0.7.6",
diff --git a/frontend/package.json b/frontend/package.json
index 6bebf138..90e2d05c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -5,7 +5,8 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@react-three/drei": "^9.107.0",
+    "@react-three/drei": "^9.109.2",
+    "@react-three/fiber": "^8.16.8",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -34,6 +35,7 @@
     "react-spring": "^9.7.3",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^2.4.0",
+    "three": "^0.167.1",
     "urdf-loader": "^0.12.1",
     "uuid": "^10.0.0",
     "web-vitals": "^2.1.4",
diff --git a/frontend/src/components/listing/ListingSTLs.tsx b/frontend/src/components/listing/ListingSTLs.tsx
index 0078ac91..7be51c96 100644
--- a/frontend/src/components/listing/ListingSTLs.tsx
+++ b/frontend/src/components/listing/ListingSTLs.tsx
@@ -1,3 +1,4 @@
+import { Canvas, useLoader } from "@react-three/fiber";
 import ListingFileUpload from "components/listing/ListingFileUpload";
 import { Button } from "components/ui/Button/Button";
 import { components } from "gen/api";
@@ -5,6 +6,28 @@ import { useAlertQueue } from "hooks/useAlertQueue";
 import { useAuthentication } from "hooks/useAuth";
 import { useState } from "react";
 import { FaCaretSquareDown, FaCaretSquareUp, FaTimes } from "react-icons/fa";
+import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
+
+const Model = ({ url }: { url: string }) => {
+  const stl = useLoader(STLLoader, url);
+  return <primitive object={stl} />;
+};
+
+interface SingleStlViewerProps {
+  url: string;
+}
+
+const SingleStlViewer = (props: SingleStlViewerProps) => {
+  const { url } = props;
+
+  return (
+    <Canvas onError={(error) => console.log(error)}>
+      <ambientLight />
+      <pointLight position={[10, 10, 10]} />
+      <Model url={url} />
+    </Canvas>
+  );
+};
 
 interface Props {
   listingId: string;
@@ -67,11 +90,12 @@ const ListingSTLs = (props: Props) => {
                   key={stl.artifact_id}
                   className="bg-background rounded-lg p-2 relative"
                 >
-                  <img
+                  {/* <img
                     src={stl.url}
                     alt={stl.name}
                     className="rounded-lg w-full aspect-square"
-                  />
+                  /> */}
+                  <SingleStlViewer url={stl.url} />
                   {edit && (
                     <Button
                       onClick={() => onDelete(stl.artifact_id)}