diff --git a/packages/phoenix-event-display/src/loaders/objects/phoenix-objects.ts b/packages/phoenix-event-display/src/loaders/objects/phoenix-objects.ts
index e26a1d08f..14f3f065e 100644
--- a/packages/phoenix-event-display/src/loaders/objects/phoenix-objects.ts
+++ b/packages/phoenix-event-display/src/loaders/objects/phoenix-objects.ts
@@ -383,7 +383,7 @@ export class PhoenixObjects {
    * @param caloCells Parameters for the Planar Calorimeter.
    * @returns Planar Calorimeter object.
    */
-   public static getPlanarCaloCell(caloCells: any, plane: any): Object3D {
+   public static getPlanarCaloCell(caloCells: any): Object3D {
     let position = caloCells.pos;
     if (!position) {
       return;
@@ -391,10 +391,14 @@ export class PhoenixObjects {
 
     const length = caloCells.energy * 0.22;
     const size = caloCells.cellSize;
+    const plane = caloCells.plane;
 
     // geometry
     const geometry = new BoxBufferGeometry(size, size, length);
 
+    // there is a need of an outer box to place the proper one inside of it
+    const outerBox = new Object3D();
+
     // material
     const material = new MeshPhongMaterial({
       color: caloCells.color ?? EVENT_DATA_TYPE_COLORS.PlanarCaloCells,
@@ -403,16 +407,25 @@ export class PhoenixObjects {
     // object
     const box = new Mesh(geometry, material);
 
-    const boxPosition = new Vector3(position[0], position[1], plane[3] * 100);
+    // adding the original box to the outter created one, for proper translation / rotation purposes
+    outerBox.add(box);
+
+    // creating the box in the z direction, and moving it by d, along the z
+    const boxPosition = new Vector3(position[0], position[1], (plane[3]) + (length/2));
 
     box.position.copy(boxPosition);
 
-    //box.lookAt(new Vector3(0, 0, 1));
-    box.userData = Object.assign({}, caloCells);
-    box.name = 'PlanarCaloCell';
-    caloCells.uuid = box.uuid;
+    // transforming the box from the z axis to the x,y,z of the plane
+    let qrot = new Quaternion();
+    qrot.setFromUnitVectors(new Vector3(0, 0, 1), new Vector3(plane[0], plane[1], plane[2]));
+    
+    outerBox.quaternion.copy(qrot);
+
+    outerBox.userData = Object.assign({}, caloCells);
+    outerBox.name = 'PlanarCaloCell';
+    caloCells.uuid = outerBox.uuid;
 
-    return box;
+    return outerBox;
   }
 
   /**
diff --git a/packages/phoenix-event-display/src/loaders/phoenix-loader.ts b/packages/phoenix-event-display/src/loaders/phoenix-loader.ts
index 44d82500a..2c2f796c7 100644
--- a/packages/phoenix-event-display/src/loaders/phoenix-loader.ts
+++ b/packages/phoenix-event-display/src/loaders/phoenix-loader.ts
@@ -1,4 +1,4 @@
-import { Group, Object3D } from 'three';
+import { Group, Object3D, Vector3 } from 'three';
 import { GUI } from 'dat.gui';
 import { EventDataLoader } from './event-data-loader';
 import { UIManager } from '../managers/ui-manager';
@@ -261,7 +261,7 @@ export class PhoenixLoader implements EventDataLoader {
     }
 
     if (eventData.PlanarCaloCells) {
-      // (Optional) Cuts can be added to any physics object.
+      //(Optional) Cuts can be added to any physics object.
       // const cuts = [
       //   new Cut('energy', 0, 10000)
       // ];
@@ -295,15 +295,6 @@ export class PhoenixLoader implements EventDataLoader {
         }
       };
 
-      // this.addObjectType(
-      //   eventData.PlanarCaloCells,
-      //   PhoenixObjects.getPlanarCaloCell,
-      //   'PlanarCaloCells',
-      //   false,
-      //   cuts,
-      //   addPlanarCaloCellsOptions
-      // );
-
       const { typeFolder, typeFolderPM } = this.ui.addEventDataTypeFolder(
         'PlanarCaloCells'
       );
@@ -327,20 +318,25 @@ export class PhoenixLoader implements EventDataLoader {
           return;
         }
 
+        /** 
+         * creating, adding, normalizing the plane normal Vector into a Unit one, once,
+         * hence avoiding doing the same thing for every cell inside the object itself, thus less calculations to be done, thus better performance.
+         */ 
         const plane = eventData.PlanarCaloCells[collectionName]['plane'];
-
-        const getPlane = (caloCells: any) => {
-          return PhoenixObjects.getPlanarCaloCell(caloCells, plane);
-        };
+        let unitVector = new Vector3(plane[0], plane[1], plane[2]);
+        unitVector.normalize();
+        eventData.PlanarCaloCells[collectionName]['cells'].forEach(cell => cell['plane'] = [unitVector.x, unitVector.y, unitVector.z, plane[3]]);
 
         this.addCollection(
           objectCollection,
           collectionName,
-          getPlane,
+          PhoenixObjects.getPlanarCaloCell,
           objectGroup,
           false
         );
 
+        eventData.PlanarCaloCells[collectionName]['cells'].forEach(cell => delete cell['plane']);
+
         //cuts = cuts?.filter((cut) => cut.field in objectCollection[0]);
         this.ui.addCollection({ typeFolder, typeFolderPM }, collectionName);
       }