diff --git a/packages/app/constants/settings/index.js b/packages/app/constants/settings/index.js
index 10395dda..4789f170 100755
--- a/packages/app/constants/settings/index.js
+++ b/packages/app/constants/settings/index.js
@@ -1,26 +1,139 @@
-const settingsPaths = import.meta.glob("/constants/settings/*/index.jsx")
+async function composeSettingsByGroups() {
+    console.time("load settings")
 
-export default async () => {
-    const settings = {}
+    /* @vite-ignore */
+    let _settings = import.meta.glob("/constants/settings/*/index.jsx")
 
-    for (const [key, value] of Object.entries(settingsPaths)) {
-        const path = key.split("/").slice(-2)
+    _settings = Object.entries(_settings).map(([route, moduleFile]) => {
+        const path = route.split("/").slice(-2)
         const name = path[0]
 
         if (name === "components" || name === "index") {
-            continue
+            return null
         }
 
-        if (!settings[name]) {
-            settings[name] = {}
+        return moduleFile
+    })
+
+    _settings = _settings.filter((moduleFile) => moduleFile)
+
+    _settings = await Promise.all(_settings.map((moduleFile) => moduleFile()))
+
+    _settings = _settings.map((moduleFile) => {
+        return moduleFile.default || moduleFile
+    })
+
+    _settings = _settings.sort((a, b) => {
+        if (a.group === "bottom") {
+            return 1
         }
 
-        let setting = await value()
+        if (b.group === "bottom") {
+            return -1
+        }
 
-        setting = setting.default || setting
+        return 0
+    })
 
-        settings[name] = setting
+    _settings = _settings.reduce((acc, settingModule) => {
+        if (typeof acc[settingModule.group] !== "object") {
+            acc[settingModule.group] = []
+        }
+
+        acc[settingModule.group].push(settingModule)
+
+        return acc
+    }, {})
+
+    _settings = Object.entries(_settings).map(([group, groupModule]) => {
+        // filter setting by platform
+        groupModule = groupModule.map((subGroup) => {
+            if (Array.isArray(subGroup.settings)) {
+                subGroup.settings = subGroup.settings.filter((setting) => {
+                    if (!app.isMobile && setting.desktop === false) {
+                        return false
+                    }
+
+                    if (app.isMobile && setting.mobile === false) {
+                        return false
+                    }
+
+                    return true
+                })
+            }
+
+            return subGroup
+        })
+
+        return {
+            group,
+            groupModule: groupModule
+        }
+    })
+
+    // order groups
+    _settings = _settings.map((group) => {
+        group.groupModule = group.groupModule.sort((a, b) => {
+            if (typeof a.order === undefined) {
+                // find index
+                a.order = group.groupModule.indexOf(a)
+            }
+
+            if (typeof b.order === undefined) {
+                // find index
+                b.order = group.groupModule.indexOf(b)
+            }
+
+            return a.order - b.order
+        })
+
+        return group
+    })
+
+    console.timeEnd("load settings")
+
+    return _settings
+}
+
+function composeTabsFromGroups(settingsGroups) {
+    return settingsGroups.reduce((acc, entry) => {
+        entry.groupModule.forEach((item) => {
+            if (item.id) {
+                acc[item.id] = item
+            }
+        })
+
+        return acc
+    }, {})
+}
+
+function composeGroupsFromSettingsTab(settings) {
+    if (!Array.isArray(settings)) {
+        console.error("settings is not an array")
+        return []
     }
 
-    return settings
+    return settings.reduce((acc, setting) => {
+        if (setting.group) {
+            if (typeof acc[setting.group] === "undefined") {
+                acc[setting.group] = []
+            }
+
+            acc[setting.group].push(setting)
+        }
+
+        return acc
+    }, {})
+}
+
+const composedSettingsByGroups = await composeSettingsByGroups()
+const composedTabs = composeTabsFromGroups(composedSettingsByGroups)
+
+export {
+    composedSettingsByGroups,
+    composedTabs,
+
+    composeSettingsByGroups,
+    composeTabsFromGroups,
+    composeGroupsFromSettingsTab,
 }
\ No newline at end of file