diff --git a/frontend/src/app/particles/particles.component.html b/frontend/src/app/particles/particles.component.html
index 09a05ff..55658c2 100644
--- a/frontend/src/app/particles/particles.component.html
+++ b/frontend/src/app/particles/particles.component.html
@@ -12,10 +12,10 @@
         <div #rendererContainer class="renderer-container column row"></div>
         <div class="plane-controls">
           <label>Plane Position (Z-axis):</label>
-          <mat-slider min="0" max="16" step="1" #planeSlider>
+          <mat-slider [min]="minOffset" [max]="maxOffset" step="1" #planeSlider>
             <input matSliderThumb [(ngModel)]="planePosition" (input)="updatePlanePosition($event)">
           </mat-slider>
-          <span>{{ planePosition }}/16 blocks</span>
+          <span>{{ planePosition }} offset from center</span>
         </div>
       </div>
       <div class="row">
diff --git a/frontend/src/app/particles/particles.component.ts b/frontend/src/app/particles/particles.component.ts
index 5885c38..c769d1f 100644
--- a/frontend/src/app/particles/particles.component.ts
+++ b/frontend/src/app/particles/particles.component.ts
@@ -13,15 +13,15 @@ import {MatIconModule} from '@angular/material/icon';
 import {HeaderComponent} from '../header/header.component';
 
 // Services
-import { RendererService } from './services/renderer.service';
-import { PlayerModelService } from './services/player-model.service';
-import { IntersectionPlaneService } from './services/intersection-plane.service';
-import { ParticleManagerService } from './services/particle-manager.service';
-import { InputHandlerService } from './services/input-handler.service';
-import { FrameManagerService } from './services/frame-manager.service';
+import {RendererService} from './services/renderer.service';
+import {PlayerModelService} from './services/player-model.service';
+import {IntersectionPlaneService} from './services/intersection-plane.service';
+import {ParticleManagerService} from './services/particle-manager.service';
+import {InputHandlerService} from './services/input-handler.service';
+import {FrameManagerService} from './services/frame-manager.service';
 
 // Models
-import { ParticleType, ParticleData } from './models/particle.model';
+import {ParticleData, ParticleType} from './models/particle.model';
 
 @Component({
   selector: 'app-particles',
@@ -119,6 +119,18 @@ export class ParticlesComponent implements OnInit, AfterViewInit, OnDestroy {
     return this.intersectionPlaneService.getPlanePosition();
   }
 
+  public set planePosition(newPlanePosition: number) {
+    this.intersectionPlaneService.updatePlanePosition(newPlanePosition);
+  }
+
+  public get maxOffset(): number {
+    return this.intersectionPlaneService.getMaxOffset();
+  }
+
+  public get minOffset(): number {
+    return this.intersectionPlaneService.getMinOffset();
+  }
+
   /**
    * Get the selected color
    */
diff --git a/frontend/src/app/particles/services/intersection-plane.service.ts b/frontend/src/app/particles/services/intersection-plane.service.ts
index af92f74..16d9646 100644
--- a/frontend/src/app/particles/services/intersection-plane.service.ts
+++ b/frontend/src/app/particles/services/intersection-plane.service.ts
@@ -22,7 +22,7 @@ enum PlaneOrientation {
 })
 export class IntersectionPlaneService {
   private intersectionPlane!: THREE.Mesh;
-  private planePosition: number = 8; // Position in 1/16th of a block
+  private planePosition: number = 0; // Position in 1/16th of a block
   private currentOrientation: PlaneOrientation = PlaneOrientation.HORIZONTAL_FRONT;
 
   constructor(private rendererService: RendererService) {
@@ -95,7 +95,7 @@ export class IntersectionPlaneService {
   /**
    * Updates the plane orientation based on camera position
    */
-  updatePlaneOrientation(camera: THREE.Camera): void {
+  public updatePlaneOrientation(camera: THREE.Camera): void {
     if (!this.intersectionPlane) return;
 
     this.currentOrientation = this.determinePlaneOrientation(camera);
@@ -134,17 +134,19 @@ export class IntersectionPlaneService {
         break;
     }
 
-    // Update position after rotation change
+
+    //Restrict plane position to the new bounds and update it
+    this.planePosition = Math.max(this.getMinOffset(), Math.min(this.getMaxOffset(), this.planePosition));
     this.updatePlanePosition(this.planePosition);
   }
 
   /**
    * Updates the plane position based on slider value
    */
-  updatePlanePosition(value: number): void {
+  public updatePlanePosition(value: number): void {
     this.planePosition = value;
     // Convert from 1/16th block to Three.js units
-    const position = (this.planePosition / 16) - 0.5; // Center at 0
+    const position = (this.planePosition / 16)
 
     this.intersectionPlane.position.y = 0.8;
     this.intersectionPlane.position.x = 0;
@@ -188,14 +190,32 @@ export class IntersectionPlaneService {
   /**
    * Gets the intersection plane
    */
-  getIntersectionPlane(): THREE.Mesh {
+  public getIntersectionPlane(): THREE.Mesh {
     return this.intersectionPlane;
   }
 
   /**
    * Gets the current plane position
    */
-  getPlanePosition(): number {
+  public getPlanePosition(): number {
     return this.planePosition;
   }
+
+  public getMaxOffset(): number {
+    switch (this.currentOrientation) {
+      case PlaneOrientation.VERTICAL_ABOVE:
+      case PlaneOrientation.VERTICAL_BELOW:
+        return 16;
+      case PlaneOrientation.HORIZONTAL_FRONT:
+      case PlaneOrientation.HORIZONTAL_BEHIND:
+        return 8;
+      case PlaneOrientation.HORIZONTAL_RIGHT:
+      case PlaneOrientation.HORIZONTAL_LEFT:
+        return 8;
+    }
+  }
+
+  public getMinOffset(): number {
+    return this.getMaxOffset() * -1;
+  }
 }