diff --git a/html/src/app.js b/html/src/app.js
index 565b10cc..1872e486 100644
--- a/html/src/app.js
+++ b/html/src/app.js
@@ -2324,6 +2324,31 @@ speechSynthesis.getVoices();
         });
     };
 
+    /*
+        params: {
+            worldId: string,
+            type: string,
+            region: string,
+            ownerId: string,
+            roleIds: string[],
+            groupAccessType: string,
+            queueEnabled: boolean
+        }
+    */
+    API.createInstance = function (params) {
+        return this.call('instances', {
+            method: 'POST',
+            params
+        }).then((json) => {
+            var args = {
+                json,
+                params
+            };
+            this.$emit('INSTANCE', args);
+            return args;
+        });
+    };
+
     /*
         params: {
             worldId: string,
@@ -12034,9 +12059,12 @@ speechSynthesis.getVoices();
     $app.data.searchAvatarFilter = '';
     $app.data.searchAvatarSort = '';
     $app.data.searchAvatarFilterRemote = '';
+    $app.data.searchGroupResults = [];
+    $app.data.searchGroupParams = {};
     $app.data.isSearchUserLoading = false;
     $app.data.isSearchWorldLoading = false;
     $app.data.isSearchAvatarLoading = false;
+    $app.data.isSearchGroupLoading = false;
 
     API.$on('LOGIN', function () {
         $app.searchText = '';
@@ -12051,6 +12079,8 @@ speechSynthesis.getVoices();
         $app.searchAvatarFilter = '';
         $app.searchAvatarSort = '';
         $app.searchAvatarFilterRemote = '';
+        $app.searchGroupResults = [];
+        $app.searchGroupParams = {};
         $app.isSearchUserLoading = false;
         $app.isSearchWorldLoading = false;
         $app.isSearchAvatarLoading = false;
@@ -12065,6 +12095,7 @@ speechSynthesis.getVoices();
         this.searchAvatarResults = [];
         this.searchAvatarPage = [];
         this.searchAvatarPageNum = 0;
+        this.searchGroupResults = [];
     };
 
     $app.methods.search = function () {
@@ -12078,6 +12109,9 @@ speechSynthesis.getVoices();
             case '2':
                 this.searchAvatar();
                 break;
+            case '3':
+                this.searchGroup();
+                break;
         }
     };
 
@@ -12326,6 +12360,41 @@ speechSynthesis.getVoices();
         );
     };
 
+    $app.methods.searchGroup = async function () {
+        this.searchGroupParams = {
+            n: 10,
+            offset: 0,
+            query: this.replaceBioSymbols(this.searchText)
+        };
+        await this.moreSearchGroup();
+    };
+
+    $app.methods.moreSearchGroup = async function (go) {
+        var params = this.searchGroupParams;
+        if (go) {
+            params.offset += params.n * go;
+            if (params.offset < 0) {
+                params.offset = 0;
+            }
+        }
+        this.isSearchGroupLoading = true;
+        await API.groupSearch(params)
+            .finally(() => {
+                this.isSearchGroupLoading = false;
+            })
+            .then((args) => {
+                var map = new Map();
+                for (var json of args.json) {
+                    var ref = API.cachedGroups.get(json.id);
+                    if (typeof ref !== 'undefined') {
+                        map.set(ref.id, ref);
+                    }
+                }
+                this.searchGroupResults = Array.from(map.values());
+                return args;
+            });
+    };
+
     // #endregion
     // #region | App: Favorite
 
@@ -25025,6 +25094,52 @@ speechSynthesis.getVoices();
         });
     };
 
+    API.getUsersGroupInstances = function () {
+        return this.call(`users/${this.currentUser.id}/instances/groups`, {
+            method: 'GET'
+        }).then((json) => {
+            var args = {
+                json
+            };
+            this.$emit('GROUP:USER:INSTANCES', args);
+            return args;
+        });
+    };
+
+    /*
+        params: {
+            query: string,
+            n: number,
+            offset: number,
+            order: string,
+            sortBy: string
+        }
+    */
+    API.groupSearch = function (params) {
+        return this.call(`groups`, {
+            method: 'GET',
+            params
+        }).then((json) => {
+            var args = {
+                json,
+                params
+            };
+            this.$emit('GROUP:SEARCH', args);
+            return args;
+        });
+    };
+
+    API.$on('GROUP:SEARCH', function (args) {
+        for (var json of args.json) {
+            this.$emit('GROUP', {
+                json,
+                params: {
+                    groupId: json.id
+                }
+            });
+        }
+    });
+
     /*
         params: {
             groupId: string
diff --git a/html/src/localization/strings/en.json b/html/src/localization/strings/en.json
index dce1f25d..7d1af2d1 100644
--- a/html/src/localization/strings/en.json
+++ b/html/src/localization/strings/en.json
@@ -73,6 +73,9 @@
                 "sort_update": "Sort by update",
                 "sort_created": "Sort by created"
             },
+            "group": {
+                "header": "Group"
+            },
             "prev_page": "Prev",
             "next_page": "Next"
         },
diff --git a/html/src/mixins/tabs/search.pug b/html/src/mixins/tabs/search.pug
index f0e3811f..aa3741f2 100644
--- a/html/src/mixins/tabs/search.pug
+++ b/html/src/mixins/tabs/search.pug
@@ -71,3 +71,18 @@ mixin searchTab()
                 el-button-group(style="margin-top:15px")
                     el-button(v-if="searchAvatarPageNum" @click="moreSearchAvatar(-1)" icon="el-icon-back" size="small") {{ $t('view.search.prev_page') }}
                     el-button(v-if="searchAvatarResults.length > 10 && (searchAvatarPageNum + 1) * 10 < searchAvatarResults.length" @click="moreSearchAvatar(1)" icon="el-icon-right" size="small") {{ $t('view.search.next_page') }}
+            el-tab-pane(:label="$t('view.search.group.header')" v-loading="isSearchGroupLoading" style="min-height:60px")
+                .x-friend-list
+                    .x-friend-item(v-for="group in searchGroupResults" :key="group.id" @click="showGroupDialog(group.id)")
+                        template(v-once)
+                            .avatar
+                                img(v-lazy="group.iconUrl")
+                            .detail
+                                span.name
+                                    span(v-text="group.name")
+                                    span(style="margin-left:5px;font-weight:normal") ({{ group.memberCount }})
+                                    span(style="margin-left:5px;color:#909399;font-weight:normal;font-family:monospace;font-size:12px") {{ group.shortCode }}.{{ group.discriminator }}
+                                span.extra(v-text="group.description")
+                el-button-group(style="margin-top:15px")
+                    el-button(v-if="searchGroupParams.offset" @click="moreSearchGroup(-1)" icon="el-icon-back" size="small") {{ $t('view.search.prev_page') }}
+                    el-button(v-if="searchGroupResults.length" @click="moreSearchGroup(1)" icon="el-icon-right" size="small") {{ $t('view.search.next_page') }}
\ No newline at end of file