diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 4719269..c07d56e 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -3,7 +3,6 @@ name: Deploy Website
 on:
   push:
     branches: [ main ]
-
   workflow_dispatch:
 
 jobs:
@@ -12,23 +11,28 @@ jobs:
 
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'  # or your preferred Node.js version
 
-      - name: Configure AWS
-        uses: aws-actions/configure-aws-credentials@v1
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v2
         with:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           aws-region: us-east-1
 
-      - name: Install Modules
-        run: yarn install
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
 
       - name: Build Application
         run: yarn run build
 
-      - name: Deploy To S3
-        run: aws s3 sync ./dist s3://${{ secrets.BUCKET_NAME }}
+      - name: Deploy to S3
+        run: aws s3 sync ./dist s3://${{ secrets.BUCKET_NAME }} --delete
 
-      - name: Create Cloudfront Invalidation
+      - name: Create CloudFront Invalidation
         run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*"
diff --git a/src/Experience.tsx b/src/Experience.tsx
index 67092de..f547032 100644
--- a/src/Experience.tsx
+++ b/src/Experience.tsx
@@ -2,7 +2,7 @@ import * as three from "three";
 import { useState, useRef } from "react"
 import { useFrame } from "@react-three/fiber";
 
-function Experience() {
+function Experience(positon: any) {
     // This reference gives us direct access to the THREE.Mesh object
     const cube = useRef<three.Mesh>(null);
 
@@ -16,16 +16,27 @@ function Experience() {
     });
 
     return (
+        <>
+        <mesh
+            // rotation={[0,0,0]}
+            scale={.75}
+            position={[-3, 0, 0]}
+        >
+            <sphereGeometry />
+            <meshBasicMaterial color={"purple"}/>
+        </mesh>
+            
         <mesh
             ref={cube}
-            scale={clicked ? 1.5 : 1}
+            scale={clicked ? 2 : 1}
             onClick={() => click(!clicked)}
             onPointerOver={(event) => (event.stopPropagation(), hover(true))}
             onPointerOut={() => hover(false)}
         >
-            <boxGeometry args={[1, 1, 1]} />
-            {hovered ? <meshNormalMaterial /> : <meshStandardMaterial color="hotpink" />}
+            <boxGeometry />
+            {hovered ? <meshBasicMaterial color={"purple"}/> : <meshBasicMaterial color={"yellow"} />}
         </mesh>
+        </>
     );
 }