diff --git a/apps/red-ui/src/app/modules/file-preview/utils/sort-by-page-rotation.utils.ts b/apps/red-ui/src/app/modules/file-preview/utils/sort-by-page-rotation.utils.ts
index 6a18812ac..580b12147 100644
--- a/apps/red-ui/src/app/modules/file-preview/utils/sort-by-page-rotation.utils.ts
+++ b/apps/red-ui/src/app/modules/file-preview/utils/sort-by-page-rotation.utils.ts
@@ -1,10 +1,12 @@
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 
 export const sortTopLeftToBottomRight = (a1: AnnotationWrapper, a2: AnnotationWrapper): number => {
-    const A = a1.y;
-    const B = a1.y - a1.height;
-    const median = (A + B) / 2;
-    if (median > a2.y - a2.height && median < a2.y) {
+    const top = Math.min(a1.y, a2.y);
+    const bottom = Math.max(a1.y - a1.height, a2.y - a2.height);
+    const intersectionHeight = Math.max(0, top - bottom);
+    const a1IntersectionPercentage = (intersectionHeight / a1.height) * 100;
+    const a2IntersectionPercentage = (intersectionHeight / a2.height) * 100;
+    if (a1IntersectionPercentage || a2IntersectionPercentage) {
         return a1.x < a2.x ? -1 : 1;
     }
     if (a1.y > a2.y) {
@@ -17,10 +19,12 @@ export const sortTopLeftToBottomRight = (a1: AnnotationWrapper, a2: AnnotationWr
 };
 
 export const sortBottomLeftToTopRight = (a1: AnnotationWrapper, a2: AnnotationWrapper): number => {
-    const A = a1.x;
-    const B = a1.x + a1.width;
-    const median = (A + B) / 2;
-    if (median < a2.x + a2.width && median > a2.x) {
+    const top = Math.max(a1.x, a2.x);
+    const bottom = Math.min(a1.x + a1.width, a2.x + a2.width);
+    const intersectionHeight = Math.max(0, bottom - top);
+    const a1IntersectionPercentage = (intersectionHeight / a1.width) * 100;
+    const a2IntersectionPercentage = (intersectionHeight / a2.width) * 100;
+    if (a1IntersectionPercentage || a2IntersectionPercentage) {
         return a1.y < a2.y ? -1 : 1;
     }
     if (a1.x < a2.x) {
@@ -33,10 +37,12 @@ export const sortBottomLeftToTopRight = (a1: AnnotationWrapper, a2: AnnotationWr
 };
 
 export const sortBottomRightToTopLeft = (a1: AnnotationWrapper, a2: AnnotationWrapper): number => {
-    const A = a1.y;
-    const B = a1.y + a1.height;
-    const median = (A + B) / 2;
-    if (median < a2.y + a2.height && median > a2.y) {
+    const top = Math.max(a1.y, a2.y);
+    const bottom = Math.min(a1.y + a1.height, a2.y + a2.height);
+    const intersectionHeight = Math.max(0, bottom - top);
+    const a1IntersectionPercentage = (intersectionHeight / a1.height) * 100;
+    const a2IntersectionPercentage = (intersectionHeight / a2.height) * 100;
+    if (a1IntersectionPercentage || a2IntersectionPercentage) {
         return a1.x > a2.x ? -1 : 1;
     }
     if (a1.y < a2.y) {
@@ -47,12 +53,13 @@ export const sortBottomRightToTopLeft = (a1: AnnotationWrapper, a2: AnnotationWr
     }
     return a1.x > a2.x ? -1 : 1;
 };
-
 export const sortTopRightToBottomLeft = (a1: AnnotationWrapper, a2: AnnotationWrapper): number => {
-    const A = a1.x;
-    const B = a1.x - a1.width;
-    const median = (A + B) / 2;
-    if (median > a2.x - a2.width && median < a2.x) {
+    const top = Math.min(a1.x + a1.width, a2.x + a2.width);
+    const bottom = Math.max(a1.x, a2.x);
+    const intersectionHeight = Math.max(0, top - bottom);
+    const a1IntersectionPercentage = (intersectionHeight / a1.width) * 100;
+    const a2IntersectionPercentage = (intersectionHeight / a2.width) * 100;
+    if (a1IntersectionPercentage || a2IntersectionPercentage) {
         return a1.y > a2.y ? -1 : 1;
     }
     if (a1.x > a2.x) {