diff --git a/html/src/index.pug b/html/src/index.pug
index 25b996df..a4b5b406 100644
--- a/html/src/index.pug
+++ b/html/src/index.pug
@@ -106,12 +106,12 @@ html
                                         //- legacy
                                         el-popover(placement="right" width="500px" trigger="click")
                                             img.x-link(slot="reference" v-lazy="scope.row.avatar[1]" style="flex:none;width:160px;height:120px;border-radius:4px")
-                                            img(v-lazy="scope.row.avatar[1]" style="width:500px;height:375px")
+                                            img.x-link(v-lazy="scope.row.avatar[1]" style="width:500px;height:375px" @click="openExternalLink(scope.row.avatar[1])")
                                         span(style="position:relative;top:-50px;margin:0 5px")
                                             i.el-icon-right
                                         el-popover(placement="right" width="500px" trigger="click")
                                             img.x-link(slot="reference" v-lazy="scope.row.avatar[0]" style="flex:none;width:160px;height:120px;border-radius:4px")
-                                            img(v-lazy="scope.row.avatar[0]" style="width:500px;height:375px")
+                                            img.x-link(v-lazy="scope.row.avatar[0]" style="width:500px;height:375px" @click="openExternalLink(scope.row.avatar[0])")
                                 template(v-else-if="scope.row.type === 'Status'")
                                     el-tooltip(placement="top")
                                         template(#content)
@@ -366,7 +366,7 @@ html
                     template(#tool)
                         div(style="margin:0 0 10px;display:flex;align-items:center")
                             el-select(v-model="notificationTable.filters[0].value" multiple clearable collapse-tags style="flex:1" placeholder="Filter")
-                                el-option(v-once v-for="type in ['requestInvite', 'invite', 'friendRequest', 'message']" :key="type" :label="type" :value="type")
+                                el-option(v-once v-for="type in ['requestInvite', 'invite', 'requestInviteResponse', 'inviteResponse', 'friendRequest', 'message']" :key="type" :label="type" :value="type")
                             el-input(v-model="notificationTable.filters[1].value" placeholder="Search" style="flex:none;width:150px;margin:0 10px")
                             el-button(type="default" :loading="API.isNotificationsLoading" @click="API.refreshNotifications()" icon="el-icon-refresh" circle style="flex:none")
                     el-table-column(label="Date" prop="created_at" sortable="custom" width="100")
@@ -375,16 +375,26 @@ html
                                 template(#content)
                                     span {{ scope.row.created_at | formatDate('YYYY-MM-DD HH24:MI:SS') }}
                                 span {{ scope.row.created_at | formatDate('MM-DD HH24:MI') }}
-                    el-table-column(label="Type" prop="type" width="120")
+                    el-table-column(label="Type" prop="type" width="150")
                         template(v-once #default="scope")
                             el-tooltip(placement="top" v-if="scope.row.type === 'invite'")
                                 template(#content)
                                     span(v-text="API.parseInviteLocation(scope.row)")
                                 span.x-link(v-text="scope.row.type" @click="showWorldDialog(scope.row.details.worldId)")
                             span(v-else v-text="scope.row.type")
-                    el-table-column(label="User" prop="senderUsername")
+                    el-table-column(label="User" prop="senderUsername" width="150")
                         template(v-once #default="scope")
                             span.x-link(v-text="scope.row.senderUsername" @click="showUserDialog(scope.row.senderUserId)")
+                    el-table-column(label="Photo" width="100" prop="photo")
+                        template(v-once #default="scope")
+                            el-popover(v-if="scope.row.details.imageUrl" placement="right" width="500px" trigger="click")
+                                img.x-link(slot="reference" v-lazy="scope.row.details.imageUrl" style="flex:none;height:60px;border-radius:4px")
+                                img.x-link(v-lazy="scope.row.details.imageUrl" style="width:500px" @click="openExternalLink(scope.row.details.imageUrl)")
+                    el-table-column(label="Message" prop="message")
+                        template(v-once #default="scope")
+                            span(v-if="scope.row.message" v-text="scope.row.message")
+                            span(v-else-if='scope.row.details.responseMessage' v-text="scope.row.details.responseMessage")
+                            span(v-else-if='scope.row.details.inviteMessage' v-text="scope.row.details.inviteMessage")
                     el-table-column(label="Action" width="80" align="right")
                         template(v-once #default="scope")
                             el-button(v-if="scope.row.type === 'friendRequest'" type="text" icon="el-icon-check" size="mini" @click="acceptNotification(scope.row)")
@@ -747,7 +757,7 @@ html
                     div(style="display:flex")
                         el-popover(placement="right" width="500px" trigger="click")
                             img.x-link(slot="reference" v-lazy="userDialog.ref.currentAvatarThumbnailImageUrl" style="flex:none;width:160px;height:120px;border-radius:4px")
-                            img(v-lazy="userDialog.ref.currentAvatarImageUrl" style="width:500px;height:375px")
+                            img.x-link(v-lazy="userDialog.ref.currentAvatarImageUrl" style="width:500px;height:375px" @click="openExternalLink(userDialog.ref.currentAvatarImageUrl)")
                         div(style="flex:1;display:flex;align-items:center;margin-left:15px")
                             div(style="flex:1")
                                 div
@@ -779,7 +789,7 @@ html
                             div(v-if="userDialog.ref.userIcon" style="flex:none;margin-right:10px")
                                 el-popover(placement="right" width="500px" trigger="click")
                                     img.x-link(slot="reference" v-lazy="userDialog.ref.userIcon" style="flex:none;width:120px;height:120px;border-radius:4px")
-                                    img(v-lazy="userDialog.ref.userIcon" style="width:500px;height:500px;")
+                                    img.x-link(v-lazy="userDialog.ref.userIcon" style="width:500px;height:500px;" @click="openExternalLink(userDialog.ref.userIcon)")
                             div(style="flex:none")
                                 el-button(v-if="userDialog.isFavorite" @click="userDialogCommand('Delete Favorite')" type="warning" icon="el-icon-star-on" circle)
                                 el-button(v-else type="default" @click="userDialogCommand('Add Favorite')" icon="el-icon-star-off" circle)
@@ -922,7 +932,7 @@ html
                     div(style="display:flex")
                         el-popover(placement="right" width="500px" trigger="click")
                             img.x-link(slot="reference" v-lazy="worldDialog.ref.thumbnailImageUrl" style="flex:none;width:160px;height:120px;border-radius:4px")
-                            img(v-lazy="worldDialog.ref.imageUrl" style="width:500px;height:375px")
+                            img.x-link(v-lazy="worldDialog.ref.imageUrl" style="width:500px;height:375px" @click="openExternalLink(worldDialog.ref.imageUrl)")
                         div(style="flex:1;display:flex;align-items:center;margin-left:15px")
                             div(style="flex:1")
                                 div
@@ -1032,7 +1042,7 @@ html
                     div(style="display:flex")
                         el-popover(placement="right" width="500px" trigger="click")
                             img.x-link(slot="reference" v-lazy="avatarDialog.ref.thumbnailImageUrl" style="flex:none;width:160px;height:120px;border-radius:4px")
-                            img(v-lazy="avatarDialog.ref.imageUrl" style="width:500px;height:375px")
+                            img.x-link(v-lazy="avatarDialog.ref.imageUrl" style="width:500px;height:375px" @click="openExternalLink(avatarDialog.ref.imageUrl)")
                         div(style="flex:1;display:flex;align-items:center;margin-left:15px")
                             div(style="flex:1")
                                 div