diff --git a/packages/client/src/pages/Home/SelectionArea/AccountsSelectionArea.js b/packages/client/src/pages/Home/SelectionArea/AccountsSelectionArea.js
index 17beea983e..df6d59ac81 100644
--- a/packages/client/src/pages/Home/SelectionArea/AccountsSelectionArea.js
+++ b/packages/client/src/pages/Home/SelectionArea/AccountsSelectionArea.js
@@ -10,8 +10,6 @@ const SelectionArea = (props) => {
     setSelections(added, removed, clear);
   };
 
-  const itemHeight = viewAs === "table" ? 49 : 59;
-
   return isMobile ? (
     <></>
   ) : (
@@ -23,7 +21,6 @@ const SelectionArea = (props) => {
       itemClass="user-item"
       onMove={onMove}
       viewAs={viewAs}
-      itemHeight={itemHeight}
     />
   );
 };
diff --git a/packages/client/src/pages/Home/SelectionArea/FilesSelectionArea.js b/packages/client/src/pages/Home/SelectionArea/FilesSelectionArea.js
index db63c4966e..0ec7c04fd2 100644
--- a/packages/client/src/pages/Home/SelectionArea/FilesSelectionArea.js
+++ b/packages/client/src/pages/Home/SelectionArea/FilesSelectionArea.js
@@ -11,6 +11,7 @@ const SelectionArea = (props) => {
     getCountTilesInRow,
     isRooms,
     foldersLength,
+    filesLength,
     isInfoPanelVisible,
   } = props;
 
@@ -39,19 +40,26 @@ const SelectionArea = (props) => {
   };
 
   const selectableClass = viewAs === "tile" ? "files-item" : "window-item";
-  const itemHeight = viewAs === "table" ? 49 : viewAs === "row" ? 59 : null;
 
-  const countRowsOfFolders = Math.ceil(foldersLength / countTilesInRow);
-  const division = foldersLength % countTilesInRow;
-  const countOfMissingTiles = division ? countTilesInRow - division : 0;
+  const getCountOfMissingFilesTiles = (itemsLength) => {
+    const division = itemsLength % countTilesInRow;
+    return division ? countTilesInRow - division : 0;
+  };
 
-  // const itemsContainer = document.getElementsByClassName(itemsContainerClass);
-  // const folderHeaderHeight = itemsContainer[0]
-  //   .getElementsByClassName("folder_header")[0]
-  //   .parentElement.getBoundingClientRect().height;
-  // const filesHeaderHeight = itemsContainer[0]
-  //   .getElementsByClassName("files_header")[0]
-  //   .parentElement.getBoundingClientRect().height;
+  const arrayTypes = [
+    {
+      type: "file",
+      rowCount: Math.ceil(filesLength / countTilesInRow),
+      rowGap: 14,
+      countOfMissingTiles: getCountOfMissingFilesTiles(filesLength),
+    },
+    {
+      type: "folder",
+      rowCount: Math.ceil(foldersLength / countTilesInRow),
+      rowGap: 12,
+      countOfMissingTiles: getCountOfMissingFilesTiles(foldersLength),
+    },
+  ];
 
   return isMobile || dragging ? (
     <></>
@@ -64,24 +72,24 @@ const SelectionArea = (props) => {
       itemClass="files-item"
       onMove={onMove}
       viewAs={viewAs}
-      itemHeight={itemHeight}
       countTilesInRow={countTilesInRow}
       isRooms={isRooms}
-      countRowsOfFolders={countRowsOfFolders}
-      countOfMissingTiles={countOfMissingTiles}
-      folderTileGap={12}
-      fileTileGap={14}
-      foldersTileHeight={66}
-      filesTileHeight={222}
       folderHeaderHeight={35}
-      filesHeaderHeight={countRowsOfFolders ? 46 : 0}
+      defaultHeaderHeight={46}
+      arrayTypes={arrayTypes}
     />
   );
 };
 
 export default inject(({ auth, filesStore, treeFoldersStore }) => {
-  const { dragging, viewAs, setSelections, getCountTilesInRow, folders } =
-    filesStore;
+  const {
+    dragging,
+    viewAs,
+    setSelections,
+    getCountTilesInRow,
+    folders,
+    files,
+  } = filesStore;
   const { isRoomsFolder, isArchiveFolder } = treeFoldersStore;
   const { isVisible: isInfoPanelVisible } = auth.infoPanelStore;
 
@@ -94,6 +102,7 @@ export default inject(({ auth, filesStore, treeFoldersStore }) => {
     getCountTilesInRow,
     isRooms,
     foldersLength: folders.length,
+    filesLength: files.length,
     isInfoPanelVisible,
   };
 })(observer(SelectionArea));
diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/backup-list/index.js b/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/backup-list/index.js
index 00d1e6cf6f..f1f8a1fe52 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/backup-list/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/backup-list/index.js
@@ -170,18 +170,25 @@ const BackupListModalDialog = (props) => {
     setState((val) => ({ ...val, isChecked: !val.isChecked }));
   };
 
-  const { onModalClose, isVisibleDialog, t, isCopyingToLocal, theme, standalone } = props;
+  const {
+    onModalClose,
+    isVisibleDialog,
+    t,
+    isCopyingToLocal,
+    theme,
+    standalone,
+  } = props;
   const { filesList, isLoading, selectedFileIndex, isChecked } = state;
 
-    const helpContent = () => (
-      <>
-        <Text className="restore-backup_warning-description">
-          {t("RestoreBackupWarningText")}{" "}
-          {!standalone && (
-            <Text as="span" className="restore-backup_warning-link">
-              {t("RestoreBackupResetInfoWarningText")}
-            </Text>
-          )}
+  const helpContent = () => (
+    <>
+      <Text className="restore-backup_warning-description">
+        {t("RestoreBackupWarningText")}{" "}
+        {!standalone && (
+          <Text as="span" className="restore-backup_warning-link">
+            {t("RestoreBackupResetInfoWarningText")}
+          </Text>
+        )}
       </Text>
     </>
   );
@@ -212,7 +219,7 @@ const BackupListModalDialog = (props) => {
                 </Text>
                 <Link
                   id="delete-backups"
-                  onClick={this.onCleanBackupList}
+                  onClick={onCleanBackupList}
                   fontWeight={600}
                   style={{ textDecoration: "underline dotted" }}
                 >
@@ -226,8 +233,8 @@ const BackupListModalDialog = (props) => {
                 filesList.length > 0 ? (
                   <BackupListBody
                     filesList={filesList}
-                    onDeleteBackup={this.onDeleteBackup}
-                    onSelectFile={this.onSelectFile}
+                    onDeleteBackup={onDeleteBackup}
+                    onSelectFile={onSelectFile}
                     selectedFileIndex={selectedFileIndex}
                   />
                 ) : (
@@ -255,7 +262,7 @@ const BackupListModalDialog = (props) => {
             <Checkbox
               truncate
               className="backup-list_checkbox"
-              onChange={this.onChangeCheckbox}
+              onChange={onChangeCheckbox}
               isChecked={isChecked}
             />
             <Text as="span" className="backup-list_agreement-text">
@@ -276,7 +283,7 @@ const BackupListModalDialog = (props) => {
               primary
               size="normal"
               label={t("Common:Restore")}
-              onClick={this.onRestorePortal}
+              onClick={onRestorePortal}
               isDisabled={isCopyingToLocal || !isChecked}
             />
             <Button
diff --git a/packages/components/selection-area/SelectionArea.js b/packages/components/selection-area/SelectionArea.js
index f094001d09..a5428f8ac4 100644
--- a/packages/components/selection-area/SelectionArea.js
+++ b/packages/components/selection-area/SelectionArea.js
@@ -16,12 +16,19 @@ class SelectionArea extends React.Component {
     this.selectableNodes = new Set();
 
     this.elemRect = {};
+    this.arrayOfTypes = [];
   }
 
   componentDidMount() {
     document.addEventListener("mousedown", this.onTapStart);
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.isRooms !== prevProps.isRooms) {
+      this.arrayOfTypes = [];
+    }
+  }
+
   componentWillUnmount() {
     document.removeEventListener("mousedown", this.onTapStart);
   }
@@ -36,88 +43,76 @@ class SelectionArea extends React.Component {
   isIntersects = (itemIndex, itemType) => {
     const { right, left, bottom, top } = this.areaRect;
     const { scrollTop } = this.scrollElement;
-    const {
-      viewAs,
-      countTilesInRow,
-      countOfMissingTiles,
-      countRowsOfFolders,
-      folderTileGap,
-      fileTileGap,
-      foldersTileHeight,
-      filesTileHeight,
-      filesHeaderHeight,
-      theme,
-    } = this.props;
+    const { viewAs, countTilesInRow, defaultHeaderHeight, arrayTypes, theme } =
+      this.props;
 
     const isRtl = theme.interfaceDirection === "rtl";
 
-    const itemHeight = this.props.itemHeight ?? this.elemRect.height;
-
     let itemTop, itemBottom, itemLeft, itemRight;
 
-    // Tile view
     if (viewAs === "tile") {
+      let countOfMissingTiles = 0;
+      const itemGap = arrayTypes.find((x) => x.type === itemType).rowGap;
+
+      // TOP/BOTTOM item position
       if (itemIndex === 0) {
         itemTop = this.elemRect.top - scrollTop;
-        itemBottom = itemTop + itemHeight;
-      } else if (itemType === "file") {
-        const folderHeight = foldersTileHeight + folderTileGap;
-        const fileHeight = filesTileHeight + fileTileGap;
-
-        const nextRow = Math.floor(
-          (itemIndex + countOfMissingTiles) / countTilesInRow
-        );
-
-        itemTop =
-          this.elemRect.top +
-          folderHeight * countRowsOfFolders +
-          filesHeaderHeight +
-          fileHeight * (nextRow - countRowsOfFolders) -
-          scrollTop;
-
-        itemBottom = itemTop + fileHeight - folderTileGap;
+        itemBottom = itemTop + this.elemRect.height;
       } else {
-        const rowIndex = Math.trunc(itemIndex / countTilesInRow);
+        const indexOfType = this.arrayOfTypes.findIndex(
+          (x) => x.type === itemType
+        );
+        const headersCount = indexOfType === 0 ? 0 : indexOfType;
 
-        itemTop =
-          this.elemRect.top +
-          (itemHeight + folderTileGap) * rowIndex -
-          scrollTop;
-        itemBottom = itemTop + itemHeight;
+        itemTop = headersCount * defaultHeaderHeight;
+        const itemHeight = this.arrayOfTypes[indexOfType].itemHeight + itemGap;
+
+        if (!headersCount) {
+          const rowIndex = Math.trunc(itemIndex / countTilesInRow);
+
+          itemTop += this.elemRect.top + itemHeight * rowIndex - scrollTop;
+          itemBottom = itemTop + itemHeight - itemGap;
+        } else {
+          let prevRowsCount = 0;
+
+          for (let i = 0; i < indexOfType; i++) {
+            const item = arrayTypes.find(
+              (x) => x.type === this.arrayOfTypes[i].type
+            );
+
+            countOfMissingTiles += item.countOfMissingTiles;
+            prevRowsCount += item.rowCount;
+
+            itemTop +=
+              (this.arrayOfTypes[i].itemHeight + item.rowGap) * item.rowCount;
+          }
+
+          const nextRow =
+            Math.floor((itemIndex + countOfMissingTiles) / countTilesInRow) -
+            prevRowsCount;
+
+          itemTop += this.elemRect.top + itemHeight * nextRow - scrollTop;
+          itemBottom = itemTop + itemHeight - itemGap;
+        }
       }
 
-      // Set left/right for item
-      let fileIndex = itemIndex % countTilesInRow;
-      if (itemType === "file") {
-        fileIndex = (itemIndex + countOfMissingTiles) % countTilesInRow;
-      }
+      let columnIndex = (itemIndex + countOfMissingTiles) % countTilesInRow;
 
       // Mirror fileIndex for RTL interface (2, 1, 0 => 0, 1, 2)
       if (isRtl && viewAs === "tile") {
-        fileIndex = countTilesInRow - 1 - fileIndex;
+        columnIndex = countTilesInRow - 1 - columnIndex;
       }
 
-      if (fileIndex == 0) {
+      // LEFT/RIGHT item position
+      if (columnIndex == 0) {
         itemLeft = this.elemRect.left;
         itemRight = itemLeft + this.elemRect.width;
       } else {
         itemLeft =
-          this.elemRect.left + (this.elemRect.width + fileTileGap) * fileIndex;
+          this.elemRect.left + (this.elemRect.width + itemGap) * columnIndex;
         itemRight = itemLeft + this.elemRect.width;
       }
-    } else {
-      // Table/row view
 
-      if (itemIndex === 0) {
-        itemTop = this.elemRect.top - scrollTop;
-        itemBottom = itemTop + itemHeight;
-      } else {
-        itemTop = this.elemRect.top + itemHeight * itemIndex - scrollTop;
-        itemBottom = itemTop + itemHeight;
-      }
-    }
-
-    if (viewAs === "tile") {
       return (
         right > itemLeft &&
         left < itemRight &&
@@ -125,6 +120,15 @@ class SelectionArea extends React.Component {
         top < itemBottom
       );
     } else {
+      const itemHeight = this.elemRect.height;
+      if (itemIndex === 0) {
+        itemTop = this.elemRect.top - scrollTop;
+        itemBottom = itemTop + itemHeight;
+      } else {
+        itemTop = this.elemRect.top + itemHeight * itemIndex - scrollTop;
+        itemBottom = itemTop + itemHeight;
+      }
+
       return bottom > itemTop && top < itemBottom;
     }
   };
@@ -211,8 +215,13 @@ class SelectionArea extends React.Component {
       const itemType = splitItem[0];
       const itemIndex = splitItem[4];
 
-      // console.log("node", node);
-      // console.log("node", node.getBoundingClientRect());
+      //TODO: maybe do this line little bit better
+      if (this.arrayOfTypes.findIndex((x) => x.type === itemType) === -1) {
+        this.arrayOfTypes.push({
+          type: itemType,
+          itemHeight: node.getBoundingClientRect().height,
+        });
+      }
 
       const isIntersects = this.isIntersects(+itemIndex, itemType);
 
@@ -330,14 +339,12 @@ class SelectionArea extends React.Component {
       this.elemRect.left = scroll.scrollLeft + itemsContainerRect.left;
     }
 
-    if (viewAs === "tile") {
-      const elemRect = itemsContainer[0]
-        .getElementsByClassName(selectableClass)[0]
-        .getBoundingClientRect();
+    const elemRect = itemsContainer[0]
+      .getElementsByClassName(selectableClass)[0]
+      .getBoundingClientRect();
 
-      this.elemRect.width = elemRect.width;
-      this.elemRect.height = elemRect.height;
-    }
+    this.elemRect.width = elemRect.width;
+    this.elemRect.height = elemRect.height;
   };
 
   onMove = (e) => {