diff --git a/public/gear.glb b/public/gear.glb
index 9504715..65656bd 100644
Binary files a/public/gear.glb and b/public/gear.glb differ
diff --git a/src/Renderer.tsx b/src/Renderer.tsx
index 4e09cb3..0065c88 100644
--- a/src/Renderer.tsx
+++ b/src/Renderer.tsx
@@ -1,7 +1,8 @@
 import { Canvas, useFrame, useLoader } from '@react-three/fiber';
-import { Clone, ContactShadows, OrbitControls } from '@react-three/drei'
+import { Circle, Clone, ContactShadows, OrbitControls } from '@react-three/drei'
 import { Suspense, useRef } from 'react';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { AmbientLight } from 'three';
 
 function Gear(props: any) {
   const gltf = useLoader(GLTFLoader, './gear.glb');
@@ -27,6 +28,8 @@ function Renderer() {
     <div className='flex flex-col h-screen gradient'>
       <Canvas camera={{ position: [-8, 5, 8] }}>
         <Suspense fallback={null}>
+          <ambientLight />
+          <directionalLight />
           <Gear />
           <ContactShadows
             scale={60}
@@ -35,7 +38,10 @@ function Renderer() {
             blur={2}
             resolution={512}
           />
-          <OrbitControls target={[0, 0, 0]} maxPolarAngle={Math.PI / 2} />
+          <Circle args={[10]} position={[0,-2.001,0]}  rotation-x={-Math.PI / 2} receiveShadow>
+            <meshBasicMaterial color={[0.8,0.8,0.8]}/>
+          </Circle>
+          <OrbitControls target={[0, 0, 0]} maxPolarAngle={Math.PI / 2.0} />
         </Suspense>
       </Canvas>
     </div>