diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2de6b5..c5b79e0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 ## [Unreleased]
 
+## 4.0.0
+### Added
+* add compatibility with NC30
+
 ## 3.13.1
 ### Fixed
 * fix #354: remove the opener when the menu is always displayed
diff --git a/appinfo/info.xml b/appinfo/info.xml
index 79123d0..9acc9f2 100644
--- a/appinfo/info.xml
+++ b/appinfo/info.xml
@@ -32,7 +32,7 @@ Notice
 Because I believe in a free and decentralized Internet, [Gitnet](https://gitnet.fr) is **self-hosted at home**.
 In case of downtime, you can download **Custom Menu** from [here](https://kim.deblan.fr/~side_menu/).
 ]]></description>
-    <version>3.13.1</version>
+    <version>4.0.0</version>
     <licence>agpl</licence>
     <author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
     <namespace>SideMenu</namespace>
@@ -54,7 +54,7 @@ In case of downtime, you can download **Custom Menu** from [here](https://kim.de
     <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc25_big_menu.png</screenshot>
     <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc25_default_menu.png</screenshot>
     <dependencies>
-        <nextcloud min-version="25" max-version="29"/>
+        <nextcloud min-version="30" max-version="30"/>
         <php min-version="8.0"/>
     </dependencies>
     <settings>
diff --git a/css/sideMenu.css b/css/sideMenu.css
index 6971df0..66a1a8c 100644
--- a/css/sideMenu.css
+++ b/css/sideMenu.css
@@ -225,6 +225,11 @@
 .side-menu-category-title {
   padding-left: 10px;
   color: var(--side-menu-text-color, #fff);
+  font-weight: bold;
+  font-size: 20px;
+  margin-bottom: 12px;
+  line-height: 30px;
+  margin-top: 0;
 }
 
 .side-menu-loader {
diff --git a/package.json b/package.json
index 9298a83..d5799ac 100644
--- a/package.json
+++ b/package.json
@@ -11,9 +11,14 @@
 		"stylelint:fix": "./node_modules/.bin/stylelint src --fix"
 	},
 	"dependencies": {
+		"@nextcloud/axios": "^2.5.1",
+		"@nextcloud/browserslist-config": "^3.0.1",
+		"@nextcloud/event-bus": "^3.3.1",
+		"@nextcloud/initial-state": "^2.2.0",
+		"@nextcloud/l10n": "^3.1.0",
+		"@vueuse/core": "^11.1.0",
 		"axios": "^1.6.7",
-		"trim": "^1.0.1",
-		"vue": "^2.6.11"
+		"trim": "^1.0.1"
 	},
 	"browserslist": [
 		"extends @nextcloud/browserslist-config"
@@ -22,42 +27,46 @@
 		"node": ">=16.0.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.9.0",
-		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
-		"@babel/preset-env": "^7.9.0",
-		"@nextcloud/axios": "^2.3.0",
-		"@nextcloud/browserslist-config": "^2.3.0",
-		"@nextcloud/eslint-config": "^8.1.2",
-		"@nextcloud/initial-state": "^2.0.0",
-		"@nextcloud/l10n": "^2.1.0",
-		"@nextcloud/vue": "^7.12.1",
-		"babel-eslint": "^10.1.0",
-		"babel-loader": "^8.1.0",
-		"css-loader": "^6.10.0",
-		"eslint": "^8.0.0",
-		"eslint-config-standard": "^17.0.0",
-		"eslint-import-resolver-webpack": "^0.12.1",
-		"eslint-plugin-import": "^2.20.0",
-		"eslint-plugin-nextcloud": "^0.3.0",
-		"eslint-plugin-node": "^10.0.0",
-		"eslint-plugin-promise": "^6.0.0",
-		"eslint-plugin-standard": "^4.0.1",
-		"eslint-plugin-vue": "^9.0.0",
-		"eslint-webpack-plugin": "^3.0.0",
-		"file-loader": "^6.0.0",
-		"sass": "^1.49.9",
-		"sass-loader": "^13.0.2",
-		"stylelint": "^14.0.0",
-		"stylelint-config-recommended-scss": "^7.0.0",
-		"stylelint-scss": "^4.0.0",
-		"stylelint-webpack-plugin": "^3.3.0",
-		"url-loader": "^4.0.0",
-		"vue-loader": "^15",
-		"vue-style-loader": "^4.1.3",
-		"vue-template-compiler": "^2.7.13",
-		"webpack": "^5.0.0",
-		"webpack-cli": "^4.0.0",
-		"webpack-merge": "^4.2.2",
-		"webpack-node-externals": "^1.7.2"
+		"@babel/node": "^7.25.7",
+		"@babel/plugin-transform-private-methods": "^7.25.7",
+		"@babel/preset-typescript": "^7.24.7",
+		"@cypress/vue2": "^2.1.1",
+		"@cypress/webpack-preprocessor": "^6.0.2",
+		"@nextcloud/babel-config": "^1.2.0",
+		"@nextcloud/eslint-config": "^8.4.1",
+		"@nextcloud/stylelint-config": "^3.0.1",
+		"@nextcloud/typings": "^1.9.1",
+		"@nextcloud/webpack-vue-config": "^6.0.1",
+		"@simplewebauthn/types": "^10.0.0",
+		"@types/dockerode": "^3.3.29",
+		"@types/wait-on": "^5.3.4",
+		"@vue/tsconfig": "^0.5.1",
+		"babel-loader": "^9.2.1",
+		"babel-loader-exclude-node-modules-except": "^1.2.1",
+		"babel-plugin-module-resolver": "^5.0.2",
+		"colord": "^2.9.3",
+		"eslint-plugin-cypress": "^3.5.0",
+		"eslint-plugin-es": "^4.1.0",
+		"exports-loader": "^5.0.0",
+		"file-loader": "^6.2.0",
+		"handlebars-loader": "^1.7.3",
+		"jasmine-core": "~2.5.2",
+		"jasmine-sinon": "^0.4.0",
+		"jsdoc": "^4.0.2",
+		"raw-loader": "^4.0.2",
+		"sass": "^1.79.3",
+		"stylelint": "^16.9.0",
+		"stylelint-use-logical": "^2.1.2",
+		"ts-loader": "^9.5.0",
+		"ts-node": "^10.9.1",
+		"tslib": "^2.7.0",
+		"typescript": "^5.6.2",
+		"vue-loader": "^15.9.8",
+		"vue-template-compiler": "^2.7.16",
+		"wait-on": "^8.0.1",
+		"webpack": "^5.94.0",
+		"webpack-cli": "^5.0.2",
+		"webpack-merge": "^6.0.1",
+		"workbox-webpack-plugin": "^7.1.0"
 	}
 }
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 4e31f12..75001de 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -28,9 +28,9 @@
     <ul
       class="app-menu-main"
       :class="{ 'app-menu-main__hidden-label': hiddenLabels === 1, 'app-menu-main__show-hovered': hiddenLabels === 2 }"
-      v-if="apps !== null"
+      v-if="appList.length"
       >
-      <li v-for="app in mainAppList()"
+      <li v-for="app in mainAppList(state)"
         :key="app.id"
         :data-app-id="app.id"
         class="app-menu-entry"
@@ -50,8 +50,8 @@
         </a>
       </li>
     </ul>
-    <NcActions class="app-menu-more" :aria-label="t('core', 'More apps')" v-if="apps !== null">
-      <NcActionLink v-for="app in popoverAppList()"
+    <NcActions class="app-menu-more" :aria-label="t('core', 'More apps')">
+      <NcActionLink v-for="app in popoverAppList(state)"
         :key="app.id"
         :aria-label="appLabel(app)"
         :aria-current="app.active ? 'page' : false"
@@ -70,93 +70,132 @@
   </nav>
 </template>
 
-<script>
+<script lang="ts">
+import type { INavigationEntry } from '../types/navigation'
+
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
+import { n, t } from '@nextcloud/l10n'
+import { useElementSize } from '@vueuse/core'
+import { defineComponent, ref } from 'vue'
+import axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 
-export default {
+export default defineComponent({
   name: 'AppMenu',
+
   components: {
     NcActions, NcActionLink,
   },
+
+  setup() {
+    return {
+        t,
+        n,
+    }
+  },
+
   data() {
     return {
       apps: null,
-      appLimit: 0,
+      appList: [],
       observer: null,
       targetBlankApps: [],
-      hiddenLabels: true
+      hiddenLabels: true,
+      state: 1,
     }
   },
+
   mounted() {
-    const ncApps = loadState('core', 'apps', {})
-    this.apps = {}
-    let orders = {}
+    axios.get(generateOcsUrl('core/navigation', 2) + '/apps?format=json')
+	  .then(({ data }) => {
+        if (data.ocs.meta.statuscode !== 200) {
+          return
+        }
 
-    window.menuAppsOrder.forEach((app, order) => {
-      orders[app] = order + 1
+        this.setApps(data.ocs.data)
+	  })
+
+    let timeout = null
+
+    window.addEventListener('resize', () => {
+      timeout = window.setTimeout(() => {
+        this.update()
+      }, 300)
     })
-
-    Array.from(window.topMenuApps).forEach((id) => {
-      if (ncApps.hasOwnProperty(id)) {
-        this.apps[id] = ncApps[id]
-        this.apps[id].order = orders[id] || null
-      }
-    })
-
-    this.targetBlankApps = window.targetBlankApps
-    this.hiddenLabels = window.topMenuAppsMouseOverHiddenLabel
-    this.observer = new ResizeObserver(this.resize)
-    this.observer.observe(this.$el)
-    this.resize()
   },
+
   beforeDestroy() {
-    this.observer.disconnect()
+    unsubscribe('nextcloud:app-menu.refresh', this.setApps)
   },
+
   methods: {
+    update() {
+      ++this.state
+    },
+
+    mainAppList() {
+      return this.appList.slice(0, this.appLimit())
+    },
+
+    popoverAppList() {
+      return this.appList.slice(this.appLimit())
+    },
+
+    appLimit() {
+      const maxApps = Math.floor(this.$root.$el.offsetWidth / 60)
+
+      if (maxApps < this.appList.length) {
+        // Ensure there is space for the overflow menu
+        return Math.max(maxApps - 1, 0)
+      }
+
+      return maxApps
+    },
+
+    setNavigationCounter(id: string, counter: number) {
+      const app = this.appList.find(({ app }) => app === id)
+      if (app) {
+        this.$set(app, 'unread', counter)
+      } else {
+        logger.warn(`Could not find app "${id}" for setting navigation count`)
+      }
+    },
+
+    setApps(apps) {
+      this.appList = []
+      let orders = {}
+
+      window.menuAppsOrder.forEach((app, order) => {
+        orders[app] = order + 1
+      })
+
+      apps.forEach((app) => {
+        Array.from(window.topMenuApps).forEach((id) => {
+          if (app.id === id) {
+            app.order = orders[id] || null
+            this.appList.push(app)
+          }
+        })
+      })
+    },
+
     appLabel(app) {
       return app.name
         + (app.active ? ' (' + t('core', 'Currently open') + ')' : '')
         + (app.unread > 0 ? ' (' + n('core', '{count} notification', '{count} notifications', app.unread, { count: app.unread }) + ')' : '')
-    },
-    appList() {
-      let items = Object.values(this.apps)
+    }
 
-      items.sort((a, b) => {
-        return a.order < b.order ? -1 : 1;
-      })
-
-      return items
-    },
-    mainAppList() {
-      return this.appList().slice(0, this.appLimit)
-    },
-    popoverAppList() {
-      return this.appList().slice(this.appLimit)
-    },
-    setNavigationCounter(id, counter) {
-      this.$set(this.apps[id], 'unread', counter)
-    },
-    resize() {
-      const availableWidth = this.$el.offsetWidth
-      let appCount = Math.floor(availableWidth / 50) - 1
-      const popoverAppCount = this.appList.length - appCount
-      if (popoverAppCount === 1) {
-        appCount--
-      }
-      if (appCount < 1) {
-        appCount = 0
-      }
-      this.appLimit = appCount
-    },
     makeStyle(app) {
       if (app.order !== null) {
         return `order: ${app.order}`
       }
     }
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -304,7 +343,7 @@ $header-icon-size: 20px;
   filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
 
   &:not([aria-expanded="true"]) {
-    color: var(--color-primary-element-text);
+    color: var(--color-main-text);
 
     &:hover {
       opacity: 1;
diff --git a/src/SideMenu.js b/src/SideMenu.js
index e7b3675..22ac3f5 100644
--- a/src/SideMenu.js
+++ b/src/SideMenu.js
@@ -21,12 +21,10 @@ import SideMenu from './SideMenu.vue'
 import SideMenuBig from './SideMenuBig.vue'
 import SideMenuWithCategories from './SideMenuWithCategories.vue'
 import PageLoader from './PageLoader'
-import SMcreateElement from './lib/createElement'
 
 Vue.prototype.OC = OC
 Vue.prototype.t = OC.L10N.translate
 
-window.SMcreateElement = SMcreateElement
 window.PageLoader = PageLoader
 
 const mountSideMenuComponent = () => {
diff --git a/templates/js/script.php b/templates/js/script.php
index 77fcc95..f623d8f 100644
--- a/templates/js/script.php
+++ b/templates/js/script.php
@@ -1,5 +1,7 @@
 <?php
 
+header('Content-type: text/javascript');
+
 $display = 'default';
 
 if ($_['always-displayed']) {
@@ -12,6 +14,24 @@ if ($_['always-displayed']) {
 
 ?>
 
+const SMcreateElement = (tagName, attributes) => {
+  const element = document.createElement(tagName)
+
+  if (typeof attributes === 'object') {
+    for (let i in attributes) {
+      if (i === 'text') {
+        element.textContent = attributes[i]
+      } else if (i === 'html') {
+        element.innerHTML = attributes[i]
+      } else {
+        element.setAttribute(i, attributes[i])
+      }
+    }
+  }
+
+  return element
+}
+
 (function() {
   const sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'})
   const sideMenuOpener = SMcreateElement('button', {
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..cd22dba
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,33 @@
+{
+	"extends": "@vue/tsconfig/tsconfig.json",
+	"include": ["./src/**/*.js"],
+	"compilerOptions": {
+		"types": ["node", "vue", "vue-router"],
+		"outDir": "./js/",
+		"target": "ESNext",
+		"module": "ESNext",
+		// Set module resolution to bundler and `noEmit` to be able to set `allowImportingTsExtensions`, so we can import Typescript with .ts extension
+		"moduleResolution": "Bundler",
+		"allowImportingTsExtensions": true,
+		"noEmit": true,
+		// Allow ts to import js files
+		"allowJs": true,
+		"allowSyntheticDefaultImports": true,
+		"declaration": false,
+		"noImplicitAny": false,
+		"resolveJsonModule": true,
+		"strict": true,
+	},
+	"vueCompilerOptions": {
+		"target": 2.7
+	},
+	"ts-node": {
+		// these options are overrides used only by ts-node
+		// same as our --compilerOptions flag and our TS_NODE_COMPILER_OPTIONS environment variable
+		"compilerOptions": {
+			"moduleResolution": "node",
+			"module": "commonjs",
+			"verbatimModuleSyntax": false
+		}
+	}
+}
diff --git a/webpack.js b/webpack.js
index 6e3eac8..ec5e494 100644
--- a/webpack.js
+++ b/webpack.js
@@ -1,54 +1,70 @@
 const path = require('path')
-const { VueLoaderPlugin } = require('vue-loader')
-const StyleLintPlugin = require('stylelint-webpack-plugin')
+const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
+const {
+  VueLoaderPlugin
+} = require('vue-loader')
+// const StyleLintPlugin = require('stylelint-webpack-plugin')
 
 module.exports = {
-    devtool: "source-map",
-    entry: {
-        'admin': path.join(__dirname, 'src', 'admin.js'),
-        'sideMenu': path.join(__dirname, 'src', 'SideMenu.js'),
-    },
-    output: {
-        path: path.resolve(__dirname, './js'),
-        publicPath: '/js',
-        filename: '[name].js?v=[hash]',
-        chunkFilename: 'chunks/[name]-[hash].js',
-    },
-    module: {
-        rules: [
-            {
-                test: /\.css$/,
-                use: ['vue-style-loader', 'css-loader'],
-            },
-            {
-                test: /\.scss$/,
-                use: ['vue-style-loader', 'css-loader', 'sass-loader'],
-            },
-            {
-                test: /\.vue$/,
-                loader: 'vue-loader',
-            },
-            {
-                test: /\.js$/,
-                loader: 'babel-loader',
-                exclude: /node_modules/,
-            },
-            {
-                test: /\.(png|jpg|gif|svg)$/,
-                loader: 'url-loader',
-                options: {
-                    name: '[name].[ext]?[hash]',
-                    limit: 8192,
-                },
+  devtool: "source-map",
+  entry: {
+    'admin': path.join(__dirname, 'src', 'admin.js'),
+    'sideMenu': path.join(__dirname, 'src', 'SideMenu.js'),
+  },
+  output: {
+    path: path.resolve(__dirname, './js'),
+    publicPath: '/js',
+    filename: '[name].js?v=[hash]',
+    chunkFilename: 'chunks/[name]-[hash].js',
+  },
+  module: {
+    rules: [{
+        test: /\.css$/,
+        use: ['vue-style-loader', 'css-loader'],
+      },
+      {
+        test: /\.scss$/,
+        use: ['vue-style-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      },
+      {
+        test: /\.tsx?$/,
+        use: [
+          'babel-loader',
+          {
+            // Fix TypeScript syntax errors in Vue
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
             },
+          },
         ],
-    },
-    plugins: [
-        new VueLoaderPlugin(),
-        new StyleLintPlugin(),
+        exclude: BabelLoaderExcludeNodeModulesExcept([]),
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'url-loader',
+        options: {
+          name: '[name].[ext]?[hash]',
+          limit: 8192,
+        },
+      },
     ],
-    resolve: {
-        extensions: ['*', '.js', '.vue'],
-        symlinks: false,
-    },
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    // new StyleLintPlugin(),
+  ],
+  resolve: {
+    extensions: ['.*', '.js', '.vue'],
+    symlinks: false,
+  },
 }