diff --git a/apps/common/mobile/lib/controller/Themes.js b/apps/common/mobile/lib/controller/Themes.js
index 2c076a15f..f71656086 100644
--- a/apps/common/mobile/lib/controller/Themes.js
+++ b/apps/common/mobile/lib/controller/Themes.js
@@ -1,5 +1,5 @@
 import { Dom7 } from 'framework7'
-import { LocalStorage } from "../../utils/LocalStorage";
+import { LocalStorage } from "../../utils/LocalStorage.mjs";
 
 class ThemesController {
     constructor() {
diff --git a/apps/common/mobile/lib/controller/collaboration/Collaboration.jsx b/apps/common/mobile/lib/controller/collaboration/Collaboration.jsx
index 31e8b7b5f..f7eee5b16 100644
--- a/apps/common/mobile/lib/controller/collaboration/Collaboration.jsx
+++ b/apps/common/mobile/lib/controller/collaboration/Collaboration.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { f7 } from 'framework7-react';
 import {observer, inject} from "mobx-react"
-import { LocalStorage } from '../../../utils/LocalStorage';
+import { LocalStorage } from '../../../utils/LocalStorage.mjs';
 import { withTranslation } from 'react-i18next';
 
 class CollaborationController extends Component {
diff --git a/apps/common/mobile/lib/controller/collaboration/Comments.jsx b/apps/common/mobile/lib/controller/collaboration/Comments.jsx
index 47a72a6b6..55eae7387 100644
--- a/apps/common/mobile/lib/controller/collaboration/Comments.jsx
+++ b/apps/common/mobile/lib/controller/collaboration/Comments.jsx
@@ -3,7 +3,7 @@ import { inject, observer } from "mobx-react";
 import { f7 } from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device';
 import { withTranslation} from 'react-i18next';
-import { LocalStorage } from '../../../utils/LocalStorage';
+import { LocalStorage } from '../../../utils/LocalStorage.mjs';
 
 import {AddComment, EditComment, AddReply, EditReply, ViewComments, ViewCurrentComments} from '../../view/collaboration/Comments';
 
diff --git a/apps/common/mobile/lib/controller/collaboration/Review.jsx b/apps/common/mobile/lib/controller/collaboration/Review.jsx
index 3fe87e560..d6db4d966 100644
--- a/apps/common/mobile/lib/controller/collaboration/Review.jsx
+++ b/apps/common/mobile/lib/controller/collaboration/Review.jsx
@@ -4,7 +4,7 @@ import {observer, inject} from "mobx-react"
 import { withTranslation } from 'react-i18next';
 
 import {PageReview, PageReviewChange} from "../../view/collaboration/Review";
-import {LocalStorage} from "../../../utils/LocalStorage";
+import {LocalStorage} from "../../../utils/LocalStorage.mjs";
 
 class InitReview extends Component {
     constructor(props){
diff --git a/apps/common/mobile/utils/LocalStorage.js b/apps/common/mobile/utils/LocalStorage.mjs
similarity index 100%
rename from apps/common/mobile/utils/LocalStorage.js
rename to apps/common/mobile/utils/LocalStorage.mjs
diff --git a/apps/documenteditor/mobile/src/app.js b/apps/documenteditor/mobile/src/app.js
index 69b8ca7a6..9a7e2378d 100644
--- a/apps/documenteditor/mobile/src/app.js
+++ b/apps/documenteditor/mobile/src/app.js
@@ -3,7 +3,8 @@ import React, { Suspense } from 'react';
 import { createRoot } from 'react-dom/client';
 
 // Import Framework7
-import Framework7 from 'framework7/lite-bundle';
+// framework7/lite-bundle
+import Framework7 from 'framework7';
 import { Dom7 } from 'framework7';
 window.$$ = Dom7;
 
@@ -22,13 +23,13 @@ import('./less/app.less');
 
 // Import App Component
 
-import App from './view/app';
+import App from './view/app.jsx';
 import { I18nextProvider } from 'react-i18next';
-import i18n from './lib/i18n';
+import i18n from './lib/i18n.js';
 
-import { Provider } from 'mobx-react'
-import { stores } from './store/mainStore'
-import { LocalStorage } from '../../../common/mobile/utils/LocalStorage';
+import { Provider } from 'mobx-react';
+import { stores } from './store/mainStore.js';
+// import { LocalStorage } from '../../../common/mobile/utils/LocalStorage';
 
 const container = document.getElementById('app');
 const root = createRoot(container); 
diff --git a/apps/documenteditor/mobile/src/controller/ContextMenu.jsx b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx
index 546d3e169..bf43216aa 100644
--- a/apps/documenteditor/mobile/src/controller/ContextMenu.jsx
+++ b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { f7 } from 'framework7-react';
 import { inject, observer } from "mobx-react";
 import { withTranslation} from 'react-i18next';
-import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage';
+import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage.mjs';
 
 import ContextMenuController from '../../../../common/mobile/lib/controller/ContextMenu';
 import { idContextMenuElement } from '../../../../common/mobile/lib/view/ContextMenu';
diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx
index 3706d958b..1d391185c 100644
--- a/apps/documenteditor/mobile/src/controller/Main.jsx
+++ b/apps/documenteditor/mobile/src/controller/Main.jsx
@@ -3,7 +3,7 @@ import React, {Component, Fragment} from 'react';
 import {inject} from "mobx-react";
 import { f7 } from "framework7-react";
 import { withTranslation } from 'react-i18next';
-import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage';
+import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage.mjs';
 import CollaborationController from '../../../../common/mobile/lib/controller/collaboration/Collaboration.jsx';
 import {InitReviewController as ReviewController} from '../../../../common/mobile/lib/controller/collaboration/Review.jsx';
 import { onAdvancedOptions } from './settings/Download.jsx';
diff --git a/apps/documenteditor/mobile/src/controller/Toolbar.jsx b/apps/documenteditor/mobile/src/controller/Toolbar.jsx
index e863f8922..e896757d8 100644
--- a/apps/documenteditor/mobile/src/controller/Toolbar.jsx
+++ b/apps/documenteditor/mobile/src/controller/Toolbar.jsx
@@ -3,7 +3,7 @@ import { inject, observer } from 'mobx-react';
 import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import ToolbarView from "../view/Toolbar";
-import {LocalStorage} from "../../../../common/mobile/utils/LocalStorage";
+import {LocalStorage} from "../../../../common/mobile/utils/LocalStorage.mjs";
 
 const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'storeFocusObjects', 'storeToolbarSettings','storeDocumentInfo')(observer(props => {
     const {t} = useTranslation();
diff --git a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx
index a57ec57e1..1d2f86028 100644
--- a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx
+++ b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { ApplicationSettings } from "../../view/settings/ApplicationSettings";
-import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
+import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage.mjs';
 import {observer, inject} from "mobx-react";
 import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js';
 
diff --git a/apps/documenteditor/mobile/src/controller/settings/Settings.jsx b/apps/documenteditor/mobile/src/controller/settings/Settings.jsx
index 809bd1e28..8a319d35b 100644
--- a/apps/documenteditor/mobile/src/controller/settings/Settings.jsx
+++ b/apps/documenteditor/mobile/src/controller/settings/Settings.jsx
@@ -5,7 +5,7 @@ import { observer, inject } from "mobx-react";
 import {Device} from '../../../../../common/mobile/utils/device';
 
 import SettingsView from "../../view/settings/Settings";
-import {LocalStorage} from "../../../../../common/mobile/utils/LocalStorage";
+import {LocalStorage} from "../../../../../common/mobile/utils/LocalStorage.mjs";
 
 const Settings = props => {
     useEffect(() => {
diff --git a/apps/documenteditor/mobile/src/store/appOptions.js b/apps/documenteditor/mobile/src/store/appOptions.js
index b71e1ccce..1dc50245c 100644
--- a/apps/documenteditor/mobile/src/store/appOptions.js
+++ b/apps/documenteditor/mobile/src/store/appOptions.js
@@ -1,5 +1,5 @@
 import {makeObservable, action, observable} from 'mobx';
-import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage';
+import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage.mjs';
 
 export class storeAppOptions {
     constructor() {
diff --git a/apps/documenteditor/mobile/src/store/applicationSettings.js b/apps/documenteditor/mobile/src/store/applicationSettings.js
index 16649d877..724084f0e 100644
--- a/apps/documenteditor/mobile/src/store/applicationSettings.js
+++ b/apps/documenteditor/mobile/src/store/applicationSettings.js
@@ -1,5 +1,5 @@
 import {makeObservable, action, observable} from 'mobx';
-import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage';
+import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage.mjs';
 
 export class storeApplicationSettings {
     constructor() {
diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
index 0a5506da0..01897e754 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
 import HighlightColorPalette from '../../../../../common/mobile/lib/component/HighlightColorPalette.jsx';
-import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
+import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage.mjs';
 
 const PageFonts = props => {
     const isAndroid = Device.android;
diff --git a/vendor/framework7-react/babel.config.js b/vendor/framework7-react/babel.config.js
index b6def8dbb..e1552254f 100644
--- a/vendor/framework7-react/babel.config.js
+++ b/vendor/framework7-react/babel.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+const config = {
   presets: [
     '@babel/preset-react',
     ['@babel/preset-env', {
@@ -12,3 +12,5 @@ module.exports = {
     ['@babel/plugin-proposal-class-properties',{'loose':false}],
   ],
 };
+
+export default config;
\ No newline at end of file
diff --git a/vendor/framework7-react/build/build.js b/vendor/framework7-react/build/build.js
index 5c0985858..50828275f 100644
--- a/vendor/framework7-react/build/build.js
+++ b/vendor/framework7-react/build/build.js
@@ -1,6 +1,6 @@
-const webpack = require('webpack');
-const rm = require('rimraf');
-const config = require('./webpack.config.js');
+import webpack from 'webpack';
+import rm from 'rimraf';
+import config from "./webpack.config.js";
 
 const env = process.env.NODE_ENV || 'development';
 const target = process.env.TARGET || 'web';
diff --git a/vendor/framework7-react/build/webpack.config.js b/vendor/framework7-react/build/webpack.config.js
index ec3d574cb..83780098d 100644
--- a/vendor/framework7-react/build/webpack.config.js
+++ b/vendor/framework7-react/build/webpack.config.js
@@ -1,15 +1,14 @@
-const webpack = require('webpack');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+import webpack from 'webpack';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
+import TerserPlugin from "terser-webpack-plugin";
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from "url";
 
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const WorkboxPlugin = require('workbox-webpack-plugin');
-const fs = require('fs')
-
-const path = require('path');
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 function resolvePath(dir) {
   return path.join(__dirname, '..', dir);
@@ -22,7 +21,7 @@ const editor = process.env.TARGET_EDITOR == 'cell' ? 'spreadsheeteditor' :
 const targetPatch = process.env.TARGET_EDITOR || 'word';
 const addonPath = process.env.ADDON_ENV || 'path';
 
-module.exports = {
+const config = {
   mode: env,
   entry: {
     app: `../../apps/${editor}/mobile/src/app.js`,
@@ -260,4 +259,6 @@ module.exports = {
                         //resource.request = `../../../${addonPath}/patch.jsx` : resource
     ),
   ],
-};
\ No newline at end of file
+};
+
+export default config;
\ No newline at end of file
diff --git a/vendor/framework7-react/package.json b/vendor/framework7-react/package.json
index f7ad68807..0d0d39ab3 100644
--- a/vendor/framework7-react/package.json
+++ b/vendor/framework7-react/package.json
@@ -18,6 +18,7 @@
     "build-slide": "cross-env NODE_ENV=development TARGET_EDITOR=slide node ./build/build.js",
     "build-cell": "cross-env NODE_ENV=development TARGET_EDITOR=cell node ./build/build.js"
   },
+  "type": "module",
   "browserslist": [
     "Android >= 7",
     "IOS >= 11",
@@ -28,9 +29,9 @@
   ],
   "dependencies": {
     "dom7": "^3.0.0",
-    "framework7": "^6.0.4",
+    "framework7": "^7.0.8",
     "framework7-icons": "^3.0.1",
-    "framework7-react": "^6.0.4",
+    "framework7-react": "^7.0.8",
     "i18next": "^21.8.9",
     "i18next-fetch-backend": "^5.0.0",
     "postcss": "^8.4.12",
@@ -40,7 +41,8 @@
     "react-i18next": "^11.8.5",
     "react-transition-group": "^4.4.5",
     "swiper": "^8.2.4",
-    "template7": "^1.4.2"
+    "template7": "^1.4.2",
+    "url": "^0.11.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",