diff --git a/frontend/src/app/particles/particles.component.ts b/frontend/src/app/particles/particles.component.ts
index b93eb53..c4a667d 100644
--- a/frontend/src/app/particles/particles.component.ts
+++ b/frontend/src/app/particles/particles.component.ts
@@ -225,12 +225,11 @@ export class ParticlesComponent implements OnInit, AfterViewInit {
 
   // Create the intersection plane
   private createIntersectionPlane(): void {
-    // Make the plane larger to cover 1 block above and below the player (3 blocks tall total)
-    const planeGeometry = new THREE.PlaneGeometry(2, 3);
+    const planeGeometry = new THREE.PlaneGeometry(3, 3);
     const planeMaterial = new THREE.MeshBasicMaterial({
-      color: 0x00ff00,
+      color: 0x00AA00,
       transparent: true,
-      opacity: 0.2,
+      opacity: 0.05,
       side: THREE.DoubleSide
     });
 
@@ -297,11 +296,6 @@ export class ParticlesComponent implements OnInit, AfterViewInit {
     }
   }
 
-  // Legacy handler for backward compatibility
-  private onMouseClick(event: MouseEvent): void {
-    // This is now handled by onMouseUp
-  }
-
   // Add a particle at the specified position
   private addParticle(x: number, y: number, z: number): void {
     // Create a visual representation of the particle
@@ -362,18 +356,24 @@ export class ParticlesComponent implements OnInit, AfterViewInit {
         this.camera.position.z
       );
 
-      // Determine which quadrant the camera is in (0-90, 90-180, 180-270, 270-360 degrees)
-      const quadrant = Math.floor((cameraAngle + Math.PI) / (Math.PI / 2)) % 4;
+      // Determine which quadrant the camera is in with a 45-degree offset
+      // Adding Math.PI/4 (45 degrees) to the angle before determining the quadrant
+      // This shifts the quadrant boundaries by 45 degrees
+      const quadrant = Math.floor((cameraAngle + Math.PI + Math.PI / 4) / (Math.PI / 2)) % 4;
 
       // Rotate the plane to face the camera
       if (quadrant === 0) {
         this.intersectionPlane.rotation.y = 0; // Camera in front
+        this.updateFrameMaterial(0x00AA00);
       } else if (quadrant === 1) {
         this.intersectionPlane.rotation.y = Math.PI / 2; // Camera on right
+        this.updateFrameMaterial(0x0000AA);
       } else if (quadrant === 2) {
         this.intersectionPlane.rotation.y = Math.PI; // Camera behind
+        this.updateFrameMaterial(0x00AA00);
       } else {
         this.intersectionPlane.rotation.y = -Math.PI / 2; // Camera on left
+        this.updateFrameMaterial(0x0000AA);
       }
 
     }
@@ -381,6 +381,15 @@ export class ParticlesComponent implements OnInit, AfterViewInit {
     this.renderer.render(this.scene, this.camera);
   }
 
+  public updateFrameMaterial(color: number) {
+    this.intersectionPlane.material = new THREE.MeshBasicMaterial({
+      color: color,
+      transparent: true,
+      opacity: 0.05,
+      side: THREE.DoubleSide
+    });
+  }
+
   // Add a new frame
   public addFrame(): void {
     const frameId = `frame${this.frames.length + 1}`;