diff --git a/frontend/src/app/particles/services/renderer.service.ts b/frontend/src/app/particles/services/renderer.service.ts
index 3e54c94..8438ca5 100644
--- a/frontend/src/app/particles/services/renderer.service.ts
+++ b/frontend/src/app/particles/services/renderer.service.ts
@@ -1,6 +1,6 @@
-import { ElementRef, Injectable } from '@angular/core';
+import {ElementRef, Injectable} from '@angular/core';
 import * as THREE from 'three';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
 
 /**
  * Service responsible for managing the Three.js rendering environment
@@ -24,7 +24,7 @@ export class RendererService {
 
     // Get container dimensions
     const containerWidth = container.nativeElement.clientWidth;
-    const containerHeight = 400; // Fixed height as defined in CSS
+    const containerHeight = container.nativeElement.clientHeight;
 
     // Create camera
     this.camera = new THREE.PerspectiveCamera(75, containerWidth / containerHeight, 0.1, 1000);
@@ -45,8 +45,8 @@ export class RendererService {
     this.controls = new OrbitControls(this.camera, this.renderer.domElement);
     this.controls.enableDamping = true;
     this.controls.dampingFactor = 0.05;
-    this.controls.minDistance = 2;
-    this.controls.maxDistance = 10;
+    this.controls.minDistance = 0.5;
+    this.controls.maxDistance = 4;
     this.controls.target.set(0, 1, 0);
     this.controls.update();