diff --git a/.env.example b/.env.example
index 3098642..749ff22 100644
--- a/.env.example
+++ b/.env.example
@@ -6,4 +6,5 @@ VUE_APP_MATOMO_URL=https://analytics.flowinity.com
 VUE_APP_MATOMO_TRACKER=flow
 VUE_APP_MATOMO_DOMAINS=*.troplo.com
 VUE_APP_MATOMO_ENABLED=true
-VUE_APP_SENTRY_ENABLED=true
\ No newline at end of file
+VUE_APP_SENTRY_ENABLED=true
+VUE_APP_BASE_URL=
\ No newline at end of file
diff --git a/backend/lib/authorize_socket.js b/backend/lib/authorize_socket.js
index 68284b9..34fb4a7 100644
--- a/backend/lib/authorize_socket.js
+++ b/backend/lib/authorize_socket.js
@@ -34,12 +34,36 @@ module.exports = async function (socket, next) {
           next()
         }
       } else {
-        //
+        socket.user = {
+          id: null,
+          username: "Not Authenticated"
+        }
+        socket.compassUser = {
+          id: null,
+          username: "BC-NOAUTH"
+        }
+        next()
       }
     } else {
-      //
+      socket.user = {
+        id: null,
+        username: "Not Authenticated"
+      }
+      socket.compassUser = {
+        id: null,
+        username: "BC-NOAUTH"
+      }
+      next()
     }
   } catch (error) {
-    //
+    socket.user = {
+      id: null,
+      username: "Not Authenticated"
+    }
+    socket.compassUser = {
+      id: null,
+      username: "BC-NOAUTH"
+    }
+    next()
   }
 }
diff --git a/backend/lib/socket.js b/backend/lib/socket.js
index dcfc010..561fbf4 100644
--- a/backend/lib/socket.js
+++ b/backend/lib/socket.js
@@ -15,88 +15,115 @@ module.exports = {
           id: socket.user.id
         }
       })
-      socket.join(user.id)
-      socket.emit("siteState", {
-        release: process.env.RELEASE,
-        notification: process.env.NOTIFICATION,
-        notificationType: process.env.NOTIFICATION_TYPE,
-        latestVersion: require("../../package.json").version
-      })
-      const friends = await Friend.findAll({
-        where: {
-          userId: user.id,
-          status: "accepted"
-        }
-      })
-      await user.update({
-        status:
-          user.storedStatus === "invisible" ? "offline" : user.storedStatus
-      })
-      friends.forEach((friend) => {
-        io.to(friend.friendId).emit("userStatus", {
-          userId: user.id,
+      if (user && socket.user.id) {
+        console.log(socket.user.id)
+        socket.join(user.id)
+        socket.emit("siteState", {
+          release: process.env.RELEASE,
+          notification: process.env.NOTIFICATION,
+          notificationType: process.env.NOTIFICATION_TYPE,
+          latestVersion: require("../../package.json").version
+        })
+        const friends = await Friend.findAll({
+          where: {
+            userId: user.id,
+            status: "accepted"
+          }
+        })
+        await user.update({
           status:
             user.storedStatus === "invisible" ? "offline" : user.storedStatus
         })
-      })
-      socket.on("ping", () => {
-        socket.emit("pong")
-      })
-      socket.on("idle", async () => {
-        const user = await User.findOne({
-          where: {
-            id: socket.user.id
-          }
-        })
-        if (user.storedStatus === "online") {
-          friends.forEach((friend) => {
-            io.to(friend.friendId).emit("userStatus", {
-              userId: user.id,
-              status: "away"
-            })
-          })
-          io.to(user.id).emit("userStatus", {
-            userId: user.id,
-            status: "away"
-          })
-          await user.update({
-            status: "away"
-          })
-        }
-      })
-      socket.on("online", async () => {
-        const user = await User.findOne({
-          where: {
-            id: socket.user.id
-          }
-        })
-        if (user.storedStatus === "online") {
-          friends.forEach((friend) => {
-            io.to(friend.friendId).emit("userStatus", {
-              userId: user.id,
-              status: "online"
-            })
-          })
-          io.to(user.id).emit("userStatus", {
-            userId: user.id,
-            status: "online"
-          })
-          await user.update({
-            status: "online"
-          })
-        }
-      })
-      socket.on("disconnect", async function () {
         friends.forEach((friend) => {
           io.to(friend.friendId).emit("userStatus", {
             userId: user.id,
+            status:
+              user.storedStatus === "invisible" ? "offline" : user.storedStatus
+          })
+        })
+        socket.on("ping", () => {
+          socket.emit("pong")
+        })
+        socket.on("bcBots/deleteMessage", (e) => {
+          if (socket.user.bot) {
+            socket.to(e.userId).emit("deleteMessage", e)
+          } else {
+            socket.emit("bcBots/deleteMessage", {
+              error: "You cannot perform this action."
+            })
+          }
+        })
+        socket.on("idle", async () => {
+          const user = await User.findOne({
+            where: {
+              id: socket.user.id
+            }
+          })
+          if (user.storedStatus === "online") {
+            friends.forEach((friend) => {
+              io.to(friend.friendId).emit("userStatus", {
+                userId: user.id,
+                status: "away"
+              })
+            })
+            io.to(user.id).emit("userStatus", {
+              userId: user.id,
+              status: "away"
+            })
+            await user.update({
+              status: "away"
+            })
+          }
+        })
+        socket.on("online", async () => {
+          const user = await User.findOne({
+            where: {
+              id: socket.user.id
+            }
+          })
+          if (user.storedStatus === "online") {
+            friends.forEach((friend) => {
+              io.to(friend.friendId).emit("userStatus", {
+                userId: user.id,
+                status: "online"
+              })
+            })
+            io.to(user.id).emit("userStatus", {
+              userId: user.id,
+              status: "online"
+            })
+            await user.update({
+              status: "online"
+            })
+          }
+        })
+        socket.on("disconnect", async function () {
+          friends.forEach((friend) => {
+            io.to(friend.friendId).emit("userStatus", {
+              userId: user.id,
+              status: "offline"
+            })
+          })
+          await user.update({
             status: "offline"
           })
         })
-        await user.update({
-          status: "offline"
+      } else {
+        socket.join(-1)
+        socket.emit("siteState", {
+          release: process.env.RELEASE,
+          notification: process.env.NOTIFICATION,
+          notificationType: process.env.NOTIFICATION_TYPE,
+          latestVersion: require("../../package.json").version
         })
-      })
+        socket.emit("unauthorized", {
+          message: "Please reauth."
+        })
+        console.log("Unauthenticated user")
+        socket.on("reAuth", async () => {
+          socket.disconnect()
+        })
+      }
     })
     console.log("WS OK")
     app.set("io", io)
diff --git a/backend/migrations/20220706061900-nicknames.js b/backend/migrations/20220706061900-nicknames.js
new file mode 100644
index 0000000..126ba1c
--- /dev/null
+++ b/backend/migrations/20220706061900-nicknames.js
@@ -0,0 +1,43 @@
+"use strict"
+
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable("Nicknames", {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.BIGINT
+      },
+      userId: {
+        allowNull: false,
+        type: Sequelize.BIGINT
+      },
+      nickname: {
+        allowNull: false,
+        type: Sequelize.STRING
+      },
+      friendId: {
+        allowNull: false,
+        type: Sequelize.BIGINT
+      },
+      createdAt: {
+        allowNull: false,
+        type: Sequelize.DATE
+      },
+      updatedAt: {
+        allowNull: false,
+        type: Sequelize.DATE
+      }
+    })
+  },
+
+  async down(queryInterface, Sequelize) {
+    /**
+     * Add reverting commands here.
+     *
+     * Example:
+     * await queryInterface.dropTable('users');
+     */
+  }
+}
diff --git a/backend/migrations/20220712133850-bot.js b/backend/migrations/20220712133850-bot.js
new file mode 100644
index 0000000..bd3f124
--- /dev/null
+++ b/backend/migrations/20220712133850-bot.js
@@ -0,0 +1,20 @@
+"use strict"
+
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.addColumn("Users", "bot", {
+      type: Sequelize.BOOLEAN,
+      allowNull: false,
+      defaultValue: false
+    })
+  },
+
+  async down(queryInterface, Sequelize) {
+    /**
+     * Add reverting commands here.
+     *
+     * Example:
+     * await queryInterface.dropTable('users');
+     */
+  }
+}
diff --git a/backend/models/nicknames.js b/backend/models/nicknames.js
new file mode 100644
index 0000000..49dd326
--- /dev/null
+++ b/backend/models/nicknames.js
@@ -0,0 +1,55 @@
+"use strict"
+const { Model } = require("sequelize")
+module.exports = (sequelize, DataTypes) => {
+  class Nickname extends Model {
+    /**
+     * Helper method for defining associations.
+     * This method is not a part of Sequelize lifecycle.
+     * The `models/index` file will call this method automatically.
+     */
+    // eslint-disable-next-line no-unused-vars
+    static associate(models) {
+      Nickname.belongsTo(models.User, {
+        foreignKey: "userId",
+        as: "user"
+      })
+      Nickname.belongsTo(models.User, {
+        foreignKey: "friendId",
+        as: "userNickname"
+      })
+    }
+  }
+  Nickname.init(
+    {
+      userId: {
+        allowNull: false,
+        type: DataTypes.BIGINT
+      },
+      nickname: {
+        allowNull: false,
+        type: DataTypes.STRING,
+        validate: {
+          notEmpty: true,
+          len: [1, 20]
+        }
+      },
+      friendId: {
+        allowNull: false,
+        type: DataTypes.BIGINT
+      },
+      createdAt: {
+        allowNull: false,
+        type: DataTypes.DATE
+      },
+      updatedAt: {
+        allowNull: false,
+        type: DataTypes.DATE
+      }
+    },
+    {
+      sequelize,
+      modelName: "Nickname"
+    }
+  )
+  return Nickname
+}
diff --git a/backend/models/users.js b/backend/models/users.js
index 79e0cd6..6d59f94 100644
--- a/backend/models/users.js
+++ b/backend/models/users.js
@@ -16,6 +16,10 @@ module.exports = (sequelize, DataTypes) => {
         as: "friends",
         foreignKey: "userId"
       })
+      User.hasOne(models.Nickname, {
+        foreignKey: "friendId",
+        as: "nickname"
+      })
     }
   }
   User.init(
@@ -135,6 +139,11 @@ module.exports = (sequelize, DataTypes) => {
       avatar: {
         type: DataTypes.STRING,
         allowNull: true
+      },
+      bot: {
+        type: DataTypes.BOOLEAN,
+        allowNull: false,
+        defaultValue: false
       }
     },
     {
diff --git a/backend/routes/communications.js b/backend/routes/communications.js
index 463160a..629aa32 100644
--- a/backend/routes/communications.js
+++ b/backend/routes/communications.js
@@ -8,7 +8,8 @@ const {
   ChatAssociation,
   Message,
   Friend,
-  Attachment
+  Attachment,
+  Nickname
 } = require("../models")
 const { Op } = require("sequelize")
 const rateLimit = require("express-rate-limit")
@@ -57,25 +58,62 @@ router.get("/", auth, async (req, res, next) => {
         {
           model: Chat,
           as: "chat",
+          attributes: [
+            "id",
+            "name",
+            "updatedAt",
+            "createdAt",
+            "userId",
+            "type"
+          ],
           include: [
+            {
+              model: User,
+              as: "users",
+              attributes: ["username", "avatar", "id", "status", "bot"],
+              include: [
+                {
+                  model: Nickname,
+                  as: "nickname",
+                  required: false,
+                  attributes: ["nickname"],
+                  where: {
+                    userId: req.user.id
+                  }
+                }
+              ]
+            },
             {
               model: ChatAssociation,
               as: "associations",
-              attributes: {
-                exclude: ["lastRead"]
-              },
+              order: [["lastRead", "DESC"]],
               include: [
                 {
                   model: User,
                   as: "user",
                   attributes: [
                     "username",
-                    "name",
                     "avatar",
                     "id",
                     "createdAt",
                     "updatedAt",
-                    "status"
+
+                    "status",
+
+                    "admin",
+                    "status",
+                    "bot"
+                  ],
+                  include: [
+                    {
+                      model: Nickname,
+                      as: "nickname",
+                      attributes: ["nickname"],
+                      required: false,
+                      where: {
+                        userId: req.user.id
+                      }
+                    }
                   ]
                 }
               ]
@@ -83,42 +121,136 @@ router.get("/", auth, async (req, res, next) => {
             {
               model: Message,
               as: "lastMessages",
-              limit: 50,
+              limit: 30,
               order: [["id", "DESC"]],
-              attributes: ["id", "content", "createdAt", "updatedAt", "userId"]
-            },
-            {
-              model: User,
-              as: "users",
-              attributes: [
-                "username",
-                "name",
-                "avatar",
-                "id",
-                "createdAt",
-                "updatedAt",
-                "status"
-              ]
+              attributes: ["id", "createdAt", "updatedAt", "userId"]
             }
           ]
         },
         {
           model: User,
           as: "user",
-          attributes: ["id", "username", "name", "createdAt", "updatedAt"]
+          attributes: ["id", "username", "createdAt", "updatedAt", "status"],
+          include: [
+            {
+              model: Nickname,
+              as: "nickname",
+              attributes: ["nickname"],
+              required: false,
+              where: {
+                userId: req.user.id
+              }
+            }
+          ]
+        }
+      ]
+    })
+    chats.sort((a, b) => {
+      if (a.chat.lastMessages.length > 0 && b.chat.lastMessages.length > 0) {
+        return b.chat.lastMessages[0].id - a.chat.lastMessages[0].id
+      } else if (a.chat.lastMessages.length > 0) {
+        return -1
+      } else if (b.chat.lastMessages.length > 0) {
+        return 1
+      } else {
+        return b.chat.id - a.chat.id
+      }
+    })
+    res.json(
+      chats.map((chat) => {
+        return {
+          ...chat.dataValues,
+          unread: chat.chat.lastMessages.filter(
+            (message) => message.id > chat.lastRead
+          ).length,
+          chat: {
+            ...chat.chat.dataValues,
+            lastMessages: null
+          }
+        }
+      })
+    )
+  } catch (err) {
+    next(err)
+  }
+})
+
+router.get("/mutual/:id/friends", auth, async (req, res, next) => {
+  try {
+    const userFriends = await Friend.findAll({
+      where: {
+        userId: req.params.id
+      }
+    })
+    const friends = await Friend.findAll({
+      where: {
+        friendId: userFriends.map((friend) => friend.friendId),
+        userId: req.user.id
+      },
+      include: [
+        {
+          model: User,
+          as: "user2",
+          attributes: [
+            "id",
+            "username",
+            "avatar",
+
+            "createdAt",
+            "updatedAt",
+
+            "admin",
+
+            "status"
+          ],
+          include: [
+            {
+              model: Nickname,
+              as: "nickname",
+              attributes: ["nickname"],
+              required: false,
+              where: {
+                userId: req.user.id
+              }
+            }
+          ]
+        }
+      ]
+    })
+    res.json(friends.map((friend) => friend.user2))
+  } catch (err) {
+    next(err)
+  }
+})
+
+router.get("/mutual/:id/groups", auth, async (req, res, next) => {
+  try {
+    const userGroups = await ChatAssociation.findAll({
+      where: {
+        userId: req.params.id
+      }
+    })
+    // find all groups that the req.params.id is a member of and that the req.user.id is a member of
+    const groups = await ChatAssociation.findAll({
+      where: {
+        userId: req.user.id,
+        chatId: userGroups.map((group) => group.chatId)
+      },
+      include: [
+        {
+          model: Chat,
+          as: "chat",
+          where: {
+            type: "group"
+          }
         }
       ]
     })
     res.json(
-      chats.sort((a, b) => {
-        if (a.chat.lastMessages.length > 0 && b.chat.lastMessages.length > 0) {
-          return b.chat.lastMessages[0].id - a.chat.lastMessages[0].id
-        } else if (a.chat.lastMessages.length > 0) {
-          return -1
-        } else if (b.chat.lastMessages.length > 0) {
-          return 1
-        } else {
-          return b.chat.id - a.chat.id
+      groups.map((group) => {
+        return {
+          ...group.dataValues.chat.dataValues,
+          associationId: group.id
         }
       })
     )
@@ -132,6 +264,7 @@ router.delete(
   auth,
   async (req, res, next) => {
     try {
+      const io = req.app.get("io")
       const chat = await ChatAssociation.findOne({
         where: {
           id: req.params.id,
@@ -146,7 +279,7 @@ router.delete(
               {
                 model: User,
                 as: "users",
-                attributes: ["id", "username", "name", "createdAt", "updatedAt"]
+                attributes: ["id", "username", "createdAt", "updatedAt"]
               }
             ]
           }
@@ -156,7 +289,14 @@ router.delete(
         where: {
           id: req.params.associationId,
           chatId: chat.chat.id
-        }
+        },
+        include: [
+          {
+            model: User,
+            as: "user",
+            attributes: ["id", "username", "createdAt", "updatedAt"]
+          }
+        ]
       })
       if (!chat) {
         throw Errors.chatNotFoundOrNotAdmin
@@ -166,6 +306,100 @@ router.delete(
       }
       await association.destroy()
       res.sendStatus(204)
+      const message = await Message.create({
+        userId: 0,
+        chatId: chat.chat.id,
+        content: `${association.user.username} has been removed by ${req.user.username}.`,
+        type: "leave"
+      })
+      const associations = await ChatAssociation.findAll({
+        where: {
+          chatId: chat.chat.id
+        },
+        include: [
+          {
+            model: User,
+            as: "user",
+            attributes: [
+              "username",
+              "name",
+              "avatar",
+              "id",
+              "createdAt",
+              "updatedAt"
+            ]
+          }
+        ]
+      })
+      const messageLookup = await Message.findOne({
+        where: {
+          id: message.id
+        },
+        include: [
+          {
+            model: Attachment,
+            as: "attachments"
+          },
+          {
+            model: Message,
+            as: "reply",
+            include: [
+              {
+                model: User,
+                as: "user",
+                attributes: [
+                  "username",
+                  "name",
+
+                  "avatar",
+                  "id",
+                  "createdAt",
+                  "updatedAt"
+                ]
+              }
+            ]
+          },
+          {
+            model: Chat,
+            as: "chat",
+            include: [
+              {
+                model: User,
+                as: "users",
+                attributes: [
+                  "username",
+                  "name",
+
+                  "avatar",
+                  "id",
+                  "createdAt",
+                  "updatedAt"
+                ]
+              }
+            ]
+          },
+          {
+            model: User,
+            as: "user",
+            attributes: [
+              "username",
+              "name",
+
+              "avatar",
+              "id",
+              "createdAt",
+              "updatedAt"
+            ]
+          }
+        ]
+      })
+      associations.forEach((association) => {
+        io.to(association.userId).emit("message", {
+          ...messageLookup.dataValues,
+          associationId: association.id,
+          keyId: `${message.id}-${message.updatedAt.toISOString()}`
+        })
+      })
     } catch (err) {
       next(err)
     }
@@ -187,7 +421,7 @@ router.put("/association/:id/:associationId", auth, async (req, res, next) => {
             {
               model: User,
               as: "users",
-              attributes: ["id", "username", "name", "createdAt", "updatedAt"]
+              attributes: ["id", "username", "createdAt", "updatedAt"]
             }
           ]
         }
@@ -234,7 +468,7 @@ router.post("/association/:id", auth, async (req, res, next) => {
             {
               model: User,
               as: "users",
-              attributes: ["id", "username", "name", "createdAt", "updatedAt"]
+              attributes: ["id", "username", "createdAt", "updatedAt"]
             }
           ]
         }
@@ -284,6 +518,26 @@ router.post("/association/:id", auth, async (req, res, next) => {
           "One or more users are already in this chat"
         )
       }
+      const associations = await ChatAssociation.findAll({
+        where: {
+          chatId: chat.chatId
+        },
+        include: [
+          {
+            model: User,
+            as: "user",
+            attributes: [
+              "username",
+              "name",
+
+              "avatar",
+              "id",
+              "createdAt",
+              "updatedAt"
+            ]
+          }
+        ]
+      })
       for (let i = 0; i < req.body.users.length; i++) {
         const c1 = await ChatAssociation.create({
           chatId: chat.chat.id,
@@ -305,11 +559,12 @@ router.post("/association/:id", auth, async (req, res, next) => {
                   attributes: [
                     "username",
                     "name",
+
                     "avatar",
                     "id",
                     "createdAt",
                     "updatedAt",
-                    ,
+
                     "status"
                   ]
                 }
@@ -318,11 +573,86 @@ router.post("/association/:id", auth, async (req, res, next) => {
             {
               model: User,
               as: "user",
-              attributes: ["id", "username", "name", "createdAt", "updatedAt"]
+              attributes: ["id", "username", "createdAt", "updatedAt"]
             }
           ]
         })
         io.to(req.body.users[i]).emit("chatAdded", association)
+        const message = await Message.create({
+          userId: 0,
+          chatId: chat.chatId,
+          content: `${association.user.username} has been added by ${req.user.username}.`,
+          type: "join"
+        })
+        const messageLookup = await Message.findOne({
+          where: {
+            id: message.id
+          },
+          include: [
+            {
+              model: Attachment,
+              as: "attachments"
+            },
+            {
+              model: Message,
+              as: "reply",
+              include: [
+                {
+                  model: User,
+                  as: "user",
+                  attributes: [
+                    "username",
+                    "name",
+
+                    "avatar",
+                    "id",
+                    "createdAt",
+                    "updatedAt"
+                  ]
+                }
+              ]
+            },
+            {
+              model: Chat,
+              as: "chat",
+              include: [
+                {
+                  model: User,
+                  as: "users",
+                  attributes: [
+                    "username",
+                    "name",
+
+                    "avatar",
+                    "id",
+                    "createdAt",
+                    "updatedAt"
+                  ]
+                }
+              ]
+            },
+            {
+              model: User,
+              as: "user",
+              attributes: [
+                "username",
+                "name",
+
+                "avatar",
+                "id",
+                "createdAt",
+                "updatedAt"
+              ]
+            }
+          ]
+        })
+        associations.forEach((association) => {
+          io.to(association.userId).emit("message", {
+            ...messageLookup.dataValues,
+            associationId: association.id,
+            keyId: `${message.id}-${message.updatedAt.toISOString()}`
+          })
+        })
       }
       res.sendStatus(204)
     } else {
@@ -343,26 +673,12 @@ router.get("/friends", auth, async (req, res, next) => {
         {
           model: User,
           as: "user",
-          attributes: [
-            "id",
-            "username",
-            "name",
-            "avatar",
-            "createdAt",
-            "updatedAt"
-          ]
+          attributes: ["id", "username", "avatar", "createdAt", "updatedAt"]
         },
         {
           model: User,
           as: "user2",
-          attributes: [
-            "id",
-            "username",
-            "name",
-            "avatar",
-            "createdAt",
-            "updatedAt"
-          ]
+          attributes: ["id", "username", "avatar", "createdAt", "updatedAt"]
         }
       ]
     })
@@ -383,23 +699,10 @@ router.get("/users", auth, async (req, res, next) => {
         "avatar",
         "createdAt",
         "updatedAt",
+
         "status",
         "admin"
-      ],
-      where: {
-        [Op.or]: [
-          {
-            privacy: {
-              communications: {
-                enabled: true
-              }
-            }
-          },
-          {
-            admin: true
-          }
-        ]
-      }
+      ]
     })
     res.json(users)
   } catch (err) {
@@ -511,12 +814,12 @@ router.put("/friends/:id", auth, async (req, res, next) => {
           {
             model: User,
             as: "user",
-            attributes: ["id", "username", "name", "createdAt", "updatedAt"]
+            attributes: ["id", "username", "createdAt", "updatedAt"]
           },
           {
             model: User,
             as: "user2",
-            attributes: ["id", "username", "name", "createdAt", "updatedAt"]
+            attributes: ["id", "username", "createdAt", "updatedAt"]
           }
         ]
       })
@@ -549,12 +852,12 @@ router.get("/search", auth, async (req, res, next) => {
         {
           model: User,
           as: "user",
-          attributes: ["id", "username", "name", "createdAt", "updatedAt"]
+          attributes: ["id", "username", "createdAt", "updatedAt"]
         },
         {
           model: User,
           as: "user2",
-          attributes: ["id", "username", "name", "createdAt", "updatedAt"]
+          attributes: ["id", "username", "createdAt", "updatedAt"]
         }
       ]
     })
@@ -608,7 +911,7 @@ router.get("/:id", auth, async (req, res, next) => {
         {
           model: User,
           as: "user",
-          attributes: ["id", "username", "name", "createdAt", "updatedAt"]
+          attributes: ["id", "username", "createdAt", "updatedAt"]
         }
       ]
     })
@@ -726,7 +1029,18 @@ router.put("/:id/message/edit", auth, async (req, res, next) => {
             {
               model: User,
               as: "users",
-              attributes: ["id"]
+              attributes: ["id"],
+              include: [
+                {
+                  model: Nickname,
+                  as: "nickname",
+                  required: false,
+                  attributes: ["nickname"],
+                  where: {
+                    userId: req.user.id
+                  }
+                }
+              ]
             },
             {
               model: Message,
@@ -872,6 +1186,7 @@ router.get("/:id/search", auth, async (req, res, next) => {
 
 router.delete("/association/:id", auth, async (req, res, next) => {
   try {
+    const io = req.app.get("io")
     const chat = await ChatAssociation.findOne({
       where: {
         userId: req.user.id,
@@ -881,6 +1196,101 @@ router.delete("/association/:id", auth, async (req, res, next) => {
     if (chat) {
       await chat.destroy()
       res.sendStatus(204)
+      const message = await Message.create({
+        userId: 0,
+        chatId: chat.chatId,
+        content: `${req.user.username} has left the group.`,
+        type: "leave"
+      })
+      const associations = await ChatAssociation.findAll({
+        where: {
+          chatId: chat.chatId
+        },
+        include: [
+          {
+            model: User,
+            as: "user",
+            attributes: [
+              "username",
+              "name",
+
+              "avatar",
+              "id",
+              "createdAt",
+              "updatedAt"
+            ]
+          }
+        ]
+      })
+      const messageLookup = await Message.findOne({
+        where: {
+          id: message.id
+        },
+        include: [
+          {
+            model: Attachment,
+            as: "attachments"
+          },
+          {
+            model: Message,
+            as: "reply",
+            include: [
+              {
+                model: User,
+                as: "user",
+                attributes: [
+                  "username",
+                  "name",
+
+                  "avatar",
+                  "id",
+                  "createdAt",
+                  "updatedAt"
+                ]
+              }
+            ]
+          },
+          {
+            model: Chat,
+            as: "chat",
+            include: [
+              {
+                model: User,
+                as: "users",
+                attributes: [
+                  "username",
+                  "name",
+
+                  "avatar",
+                  "id",
+                  "createdAt",
+                  "updatedAt"
+                ]
+              }
+            ]
+          },
+          {
+            model: User,
+            as: "user",
+            attributes: [
+              "username",
+              "name",
+
+              "avatar",
+              "id",
+              "createdAt",
+              "updatedAt"
+            ]
+          }
+        ]
+      })
+      associations.forEach((association) => {
+        io.to(association.userId).emit("message", {
+          ...messageLookup.dataValues,
+          associationId: association.id,
+          keyId: `${message.id}-${message.updatedAt.toISOString()}`
+        })
+      })
     } else {
       throw Errors.invalidParameter("chat association id")
     }
@@ -1053,6 +1463,17 @@ router.post(
                     "id",
                     "createdAt",
                     "updatedAt"
+                  ],
+                  include: [
+                    {
+                      model: Nickname,
+                      as: "nickname",
+                      required: false,
+                      attributes: ["nickname"],
+                      where: {
+                        userId: req.user.id
+                      }
+                    }
                   ]
                 }
               ]
@@ -1087,16 +1508,24 @@ router.post(
                 "id",
                 "createdAt",
                 "updatedAt"
+              ],
+              include: [
+                {
+                  model: Nickname,
+                  as: "nickname",
+                  required: false,
+                  attributes: ["nickname"],
+                  where: {
+                    userId: req.user.id
+                  }
+                }
               ]
             }
           ]
         })
         const associations = await ChatAssociation.findAll({
           where: {
-            chatId: chat.chat.id,
-            userId: {
-              [Op.ne]: req.user.id
-            }
+            chatId: chat.chat.id
           },
           include: [
             {
@@ -1110,17 +1539,38 @@ router.post(
                 "id",
                 "createdAt",
                 "updatedAt"
+              ],
+              include: [
+                {
+                  model: Nickname,
+                  as: "nickname",
+                  required: false,
+                  attributes: ["nickname"],
+                  where: {
+                    userId: req.user.id
+                  }
+                }
               ]
             }
           ]
         })
-        associations.forEach((association) => {
+        for (const association of associations) {
           io.to(association.userId).emit("message", {
             ...messageLookup.dataValues,
+            user: {
+              ...messageLookup.user.dataValues,
+              nickname: await Nickname.findOne({
+                where: {
+                  userId: association.userId,
+                  friendId: messageLookup.dataValues.user.dataValues.id
+                },
+                attributes: ["nickname"]
+              })
+            },
             associationId: association.id,
             keyId: `${message.id}-${message.updatedAt.toISOString()}`
           })
-        })
+        }
         res.json({
           ...messageLookup.dataValues,
           keyId: `${message.id}-${message.updatedAt.toISOString()}`
@@ -1189,7 +1639,9 @@ router.post("/:id/message", auth, limiter, async (req, res, next) => {
                 "avatar",
                 "id",
                 "createdAt",
-                "updatedAt"
+                "updatedAt",
+
+                "bot"
               ]
             }
           ]
@@ -1200,10 +1652,13 @@ router.post("/:id/message", auth, limiter, async (req, res, next) => {
           attributes: [
             "username",
             "name",
+
             "avatar",
             "id",
             "createdAt",
-            "updatedAt"
+            "updatedAt",
+
+            "bot"
           ]
         }
       ]
@@ -1223,12 +1678,18 @@ router.post("/:id/message", auth, limiter, async (req, res, next) => {
           throw Errors.invalidParameter("reply id")
         }
       }
+      let embeds
+      if (req.user.bot) {
+        embeds = req.body.embeds
+      } else {
+        embeds = []
+      }
       const message = await Message.create({
         content: req.body.message,
         userId: req.user.id,
         chatId: chat.chat.id,
         attachments: [],
-        embeds: [],
+        embeds,
         replyId: reply.id
       })
       const messageLookup = await Message.findOne({
@@ -1254,7 +1715,20 @@ router.post("/:id/message", auth, limiter, async (req, res, next) => {
                   "avatar",
                   "id",
                   "createdAt",
-                  "updatedAt"
+                  "updatedAt",
+
+                  "bot"
+                ],
+                include: [
+                  {
+                    model: Nickname,
+                    as: "nickname",
+                    required: false,
+                    attributes: ["nickname"],
+                    where: {
+                      userId: req.user.id
+                    }
+                  }
                 ]
               },
               {
@@ -1277,7 +1751,9 @@ router.post("/:id/message", auth, limiter, async (req, res, next) => {
                   "avatar",
                   "id",
                   "createdAt",
-                  "updatedAt"
+                  "updatedAt",
+
+                  "bot"
                 ]
               }
             ]
@@ -1292,17 +1768,27 @@ router.post("/:id/message", auth, limiter, async (req, res, next) => {
               "avatar",
               "id",
               "createdAt",
-              "updatedAt"
+              "updatedAt",
+
+              "bot"
+            ],
+            include: [
+              {
+                model: Nickname,
+                as: "nickname",
+                required: false,
+                attributes: ["nickname"],
+                where: {
+                  userId: req.user.id
+                }
+              }
             ]
           }
         ]
       })
       const associations = await ChatAssociation.findAll({
         where: {
-          chatId: chat.chat.id,
-          userId: {
-            [Op.ne]: req.user.id
-          }
+          chatId: chat.chat.id
         },
         include: [
           {
@@ -1315,7 +1801,9 @@ router.post("/:id/message", auth, limiter, async (req, res, next) => {
               "avatar",
               "id",
               "createdAt",
-              "updatedAt"
+              "updatedAt",
+
+              "bot"
             ]
           }
         ]
@@ -1325,13 +1813,23 @@ router.post("/:id/message", auth, limiter, async (req, res, next) => {
           chatId: chat.chat.id
         }
       })
-      associations.forEach((association) => {
+      for (const association of associations) {
         io.to(association.userId).emit("message", {
           ...messageLookup.dataValues,
+          user: {
+            ...messageLookup.user.dataValues,
+            nickname: await Nickname.findOne({
+              where: {
+                userId: association.userId,
+                friendId: messageLookup.dataValues.user.dataValues.id
+              },
+              attributes: ["nickname"]
+            })
+          },
           associationId: association.id,
           keyId: `${message.id}-${message.updatedAt.toISOString()}`
         })
-      })
+      }
       res.json({
         ...messageLookup.dataValues,
         keyId: `${message.id}-${message.updatedAt.toISOString()}`
@@ -1356,6 +1854,58 @@ router.post("/:id/message", auth, limiter, async (req, res, next) => {
   }
 })
 
+router.post("/nickname/:id", auth, async (req, res, next) => {
+  try {
+    const user = await User.findOne({
+      where: {
+        id: req.params.id
+      }
+    })
+    if (!user) {
+      throw Errors.invalidParameter("user id")
+    }
+    if (!req.body.nickname?.length) {
+      await Nickname.destroy({
+        where: {
+          userId: req.user.id,
+          friendId: req.params.id
+        }
+      })
+      res.json({
+        nickname: user.username,
+        userId: user.id
+      })
+      return
+    }
+    if (req.body.nickname.length > 20) {
+      throw Errors.invalidParameter("nickname", "Maximum length is 20")
+    }
+    const nickname = await Nickname.findOne({
+      where: {
+        userId: req.user.id,
+        friendId: req.params.id
+      }
+    })
+    if (nickname) {
+      await nickname.update({
+        nickname: req.body.nickname
+      })
+      res.json({
+        nickname: req.body.nickname
+      })
+    } else {
+      const nickname = await Nickname.create({
+        userId: req.user.id,
+        friendId: req.params.id,
+        nickname: req.body.nickname
+      })
+      res.json(nickname)
+    }
+  } catch (err) {
+    next(err)
+  }
+})
+
 router.get("/:id/messages", auth, async (req, res, next) => {
   try {
     const chat = await ChatAssociation.findOne({
@@ -1378,7 +1928,10 @@ router.get("/:id/messages", auth, async (req, res, next) => {
                 "avatar",
                 "id",
                 "createdAt",
-                "updatedAt"
+                "updatedAt",
+
+                "admin",
+                "bot"
               ]
             }
           ]
@@ -1386,7 +1939,7 @@ router.get("/:id/messages", auth, async (req, res, next) => {
         {
           model: User,
           as: "user",
-          attributes: ["id", "username", "name", "createdAt", "updatedAt"]
+          attributes: ["id", "username", "createdAt", "updatedAt"]
         }
       ]
     })
@@ -1410,7 +1963,20 @@ router.get("/:id/messages", auth, async (req, res, next) => {
               "avatar",
               "id",
               "createdAt",
-              "updatedAt"
+              "updatedAt",
+
+              "bot"
+            ],
+            include: [
+              {
+                model: Nickname,
+                as: "nickname",
+                attributes: ["nickname"],
+                required: false,
+                where: {
+                  userId: req.user.id
+                }
+              }
             ]
           },
           {
@@ -1427,7 +1993,9 @@ router.get("/:id/messages", auth, async (req, res, next) => {
                   "avatar",
                   "id",
                   "createdAt",
-                  "updatedAt"
+                  "updatedAt",
+
+                  "bot"
                 ]
               },
               {
@@ -1487,7 +2055,7 @@ router.put("/:id/typing", auth, async (req, res, next) => {
         {
           model: User,
           as: "user",
-          attributes: ["id", "username", "name", "createdAt", "updatedAt"]
+          attributes: ["id", "username", "createdAt", "updatedAt"]
         }
       ]
     })
@@ -1549,6 +2117,34 @@ router.post("/create", auth, async (req, res, next) => {
         status: "accepted"
       }
     })
+    if (type === "direct") {
+      const chats = await Chat.findAll({
+        where: {
+          userId: req.user.id,
+          type: "direct"
+        },
+        include: [
+          {
+            model: ChatAssociation,
+            as: "associations"
+          }
+        ]
+      })
+      const chat = chats.find((chat) => {
+        return chat.associations.find((association) => {
+          return association.userId === req.body.users[0]
+        })
+      })
+      if (chat) {
+        res.json({
+          ...chat.associations.find((association) => {
+            return association.userId === req.user.id
+          }).dataValues,
+          existing: true
+        })
+        return
+      }
+    }
     if (friends.length !== req.body.users.length) {
       throw Errors.invalidParameter(
         "User",
@@ -1586,6 +2182,39 @@ router.post("/create", auth, async (req, res, next) => {
             model: Chat,
             as: "chat",
             include: [
+              {
+                model: ChatAssociation,
+                as: "associations",
+                order: [["lastRead", "DESC"]],
+                include: [
+                  {
+                    model: User,
+                    as: "user",
+                    attributes: [
+                      "username",
+                      "avatar",
+                      "id",
+                      "createdAt",
+                      "updatedAt",
+
+                      "status",
+
+                      "admin"
+                    ],
+                    include: [
+                      {
+                        model: Nickname,
+                        as: "nickname",
+                        attributes: ["nickname"],
+                        required: false,
+                        where: {
+                          userId: req.user.id
+                        }
+                      }
+                    ]
+                  }
+                ]
+              },
               {
                 model: User,
                 as: "users",
@@ -1597,6 +2226,7 @@ router.post("/create", auth, async (req, res, next) => {
                   "id",
                   "createdAt",
                   "updatedAt",
+
                   "status"
                 ]
               }
@@ -1605,13 +2235,80 @@ router.post("/create", auth, async (req, res, next) => {
           {
             model: User,
             as: "user",
-            attributes: ["id", "username", "name", "createdAt", "updatedAt"]
+            attributes: ["id", "username", "createdAt", "updatedAt"]
           }
         ]
       })
       io.to(req.body.users[i]).emit("chatAdded", association)
     }
-    res.json(chat)
+    const association = await ChatAssociation.findOne({
+      where: {
+        userId: req.user.id,
+        chatId: chat.id
+      },
+      include: [
+        {
+          model: Chat,
+          as: "chat",
+          include: [
+            {
+              model: ChatAssociation,
+              as: "associations",
+              order: [["lastRead", "DESC"]],
+              include: [
+                {
+                  model: User,
+                  as: "user",
+                  attributes: [
+                    "username",
+                    "avatar",
+                    "id",
+                    "createdAt",
+                    "updatedAt",
+
+                    "status",
+
+                    "admin"
+                  ],
+                  include: [
+                    {
+                      model: Nickname,
+                      as: "nickname",
+                      attributes: ["nickname"],
+                      required: false,
+                      where: {
+                        userId: req.user.id
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              model: User,
+              as: "users",
+              attributes: [
+                "username",
+                "name",
+
+                "avatar",
+                "id",
+                "createdAt",
+                "updatedAt",
+
+                "status"
+              ]
+            }
+          ]
+        },
+        {
+          model: User,
+          as: "user",
+          attributes: ["id", "username", "createdAt", "updatedAt"]
+        }
+      ]
+    })
+    res.json(association)
   } catch (err) {
     next(err)
   }
diff --git a/backend/routes/user.js b/backend/routes/user.js
index b08b8aa..52e89fb 100644
--- a/backend/routes/user.js
+++ b/backend/routes/user.js
@@ -342,40 +342,6 @@ router.put("/settings/:type", auth, async (req, res, next) => {
       return false
     }
   }
-  async function checkPassword(password) {
-    return new Promise((resolve, reject) => {
-      axios
-        .post(
-          "http://localhost:23994/services/admin.svc/GetApiKey",
-          {
-            password: password,
-            schoolId: req.body.schoolId,
-            sussiId: req.user.sussiId
-          },
-          {
-            headers: {
-              compassInstance:
-                req.header("compassInstance") ||
-                req.query.compassInstance ||
-                "devices"
-            }
-          }
-        )
-        .then((resp) => {
-          if (resp.data.d) {
-            resolve(true)
-            return true
-          } else {
-            resolve(false)
-            return false
-          }
-        })
-        .catch((e) => {
-          reject(e)
-          return false
-        })
-    })
-  }
   try {
     const io = req.app.get("io")
     if (req.params.type === "full") {
@@ -452,66 +418,6 @@ router.put("/settings/:type", auth, async (req, res, next) => {
       } else {
         throw Errors.invalidParameter("Password or Code")
       }
-    } else if (req.params.type === "totpConfirm") {
-      const user = await User.findOne({
-        where: {
-          id: req.user.id
-        }
-      })
-      if (user.totp) {
-        const verified = speakeasy.totp.verify({
-          secret: user.totp,
-          encoding: "base32",
-          token: req.body.code
-        })
-        if (verified) {
-          await User.update(
-            {
-              totpEnabled: true
-            },
-            {
-              where: {
-                id: req.user.id
-              }
-            }
-          )
-          res.sendStatus(204)
-        } else {
-          throw Errors.invalidTotp
-        }
-      } else {
-        throw Errors.unknown
-      }
-    } else if (req.params.type === "bcSessionsEnable") {
-      /*
-      const match = await checkPassword(req.body.password)
-      if (match) {
-        await User.update(
-          {
-            bcSessionsEnabled: true
-          },
-          {
-            where: {
-              id: req.user.id
-            }
-          }
-        )
-        const session = await Session.create({
-          session:
-            "BETTERCOMPASS-" +
-            cryptoRandomString({
-              length: 64
-            }),
-          compassUserId: req.user.compassUserId,
-          sussiId: req.user.sussiId,
-          instance: req.user.instance,
-          other: {},
-          userId: req.user.id
-        })
-      } else {
-        throw Errors.invalidCredentials
-      }*/
-      throw Errors.experimentsOptIn
     } else if (req.params.type === "password") {
       const user = await User.findOne({
         where: {
diff --git a/package.json b/package.json
index d46fcd0..0793a13 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@mdi/js": "^6.6.95",
     "@sentry/tracing": "^6.19.3",
     "@sentry/vue": "^6.19.3",
+    "@tauri-apps/api": "^1.0.2",
     "apollo-boost": "^0.4.9",
     "axios": "^0.26.1",
     "brace": "^0.11.1",
diff --git a/src/App.vue b/src/App.vue
index 93d285e..1c60a6f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -404,27 +404,6 @@
     </v-dialog>
     <v-main>
       <Header></Header>
-      <v-container
-        v-if="
-          $store.state.user?.compact === 'nagPending' &&
-          $vuetify.breakpoint.lgAndDown &&
-          !$vuetify.breakpoint.mobile
-        "
-      >
-        <v-alert dense text color="info" dismissible v-model="compactModeNag">
-          Introducing <strong>Compact Mode</strong>, a better experience for
-          lower resolution devices.
-          <v-btn
-            to="/settings/appearance"
-            text
-            color="primary"
-            outlined
-            class="ml-1"
-          >
-            Settings
-          </v-btn>
-        </v-alert>
-      </v-container>
       <v-container
         v-if="$store.state.site.latestVersion > $store.state.versioning.version"
         id="update-notify-banner"
@@ -466,10 +445,9 @@
 <style></style>
 <script>
 import AjaxErrorHandler from "@/lib/errorHandler"
-import Vue from "vue"
-import Vuetify from "@/plugins/vuetify"
 import { VueFinalModal } from "vue-final-modal"
 import Header from "@/components/Header"
+import Vue from "vue"
 export default {
   name: "App",
   components: {
@@ -580,35 +558,6 @@ export default {
         return index.charAt(0).toUpperCase() + index.slice(1)
       }
     },
-    computeColor(event) {
-      if (this.$vuetify?.theme?.themes) {
-        if (event.color === "#003300") {
-          return this.$vuetify.theme.themes[
-            this.$store.state.user.theme || "dark"
-          ].calendarActivityType8
-        } else if (event.color === "#133897") {
-          return this.$vuetify.theme.themes[
-            this.$store.state.user.theme || "dark"
-          ].calendarExternalActivity
-        } else if (event.activityType === 7 || event.color === "#f4dcdc") {
-          return this.$vuetify.theme.themes[
-            this.$store.state.user.theme || "dark"
-          ].calendarActivityType7
-        } else if (event.color === "#dce6f4") {
-          return this.$vuetify.theme.themes[
-            this.$store.state.user.theme || "dark"
-          ].calendarNormalActivity
-        } else if (event.activityType === 10) {
-          return this.$vuetify.theme.themes[
-            this.$store.state.user.theme || "dark"
-          ].calendarActivityType10
-        } else {
-          return this.$vuetify.theme.themes[
-            this.$store.state.user.theme || "dark"
-          ].calendarNormalActivity
-        }
-      }
-    },
     editorInit() {
       require("brace/ext/language_tools")
       require("brace/mode/css")
@@ -617,19 +566,6 @@ export default {
       require("brace/theme/chrome")
       require("brace/snippets/css")
     },
-    baseRole() {
-      if (this.$store.state.user?.baseRole) {
-        return (
-          this.$store.state.user.baseRole
-            .toLowerCase()
-            .charAt(0)
-            .toUpperCase() +
-          this.$store.state.user.baseRole.toLowerCase().slice(1)
-        )
-      } else {
-        return "Not Authenticated"
-      }
-    },
     saveSettings() {
       this.loading = true
       this.$vuetify.theme.dark = this.$store.state.user?.theme === "dark"
@@ -643,15 +579,6 @@ export default {
           AjaxErrorHandler(this.$store)(e)
         })
     },
-    completeGuidedWizard() {
-      this.loadingGuidedWizard = true
-      this.$store.dispatch("saveOnlineSettings", {
-        guidedWizard: false
-      })
-      this.$store.dispatch("getUserInfo").then(() => {
-        this.loadingGuidedWizard = false
-      })
-    },
     getThemes() {
       this.axios.get("/api/v1/themes").then((res) => {
         this.themes = res.data.map((theme) => {
@@ -692,25 +619,27 @@ export default {
         .catch((e) => {
           AjaxErrorHandler(this.$store)(e)
         })
-    },
-    retryConnection() {
-      this.connectionLoading = true
-      this.$store.dispatch("getState").finally(() => {
-        this.connectionLoading = false
-      })
-    },
-    validate(value, defaultValue) {
-      if (value === undefined || value === null) {
-        return defaultValue
-      } else {
-        return value
-      }
     }
   },
   mounted() {
+    Vue.axios.defaults.headers.common["Authorization"] =
+      localStorage.getItem("session")
+    if (this.$vuetify.breakpoint.mobile) {
+      this.$store.state.drawer = false
+    }
     if (localStorage.getItem("cssTipsDismissed")) {
       this.cssTips = false
     }
+    if (localStorage.getItem("userPanel")) {
+      this.$store.state.userPanel = JSON.parse(
+        localStorage.getItem("userPanel")
+      )
+    } else {
+      this.$store.state.userPanel = true
+    }
+    if (this.$vuetify.breakpoint.mobile) {
+      this.$store.state.userPanel = false
+    }
     window.addEventListener("offline", () => {
       this.$store.commit("setOnline", false)
       this.$store.dispatch("getState")
@@ -721,56 +650,11 @@ export default {
       this.$store.dispatch("getUserInfo")
     })
     this.$socket.connect()
-    Vue.axios.defaults.headers.common["CompassAPIKey"] =
-      localStorage.getItem("apiKey")
-    Vue.axios.defaults.headers.common["Authorization"] =
-      localStorage.getItem("bcToken")
     document.title = this.$route.name
       ? this.$route.name + " - " + this.$store.state.site.name
       : this.$store.state.site.name
     this.$store.commit("setLoading", true)
     this.$vuetify.theme.dark = this.$store.state.user?.theme === "dark" || true
-    this.axios.defaults.headers.common["compassInstance"] =
-      localStorage.getItem("schoolInstance")
-    this.axios.defaults.headers.common["compassSchoolId"] =
-      localStorage.getItem("schoolId")
-    if (JSON.parse(localStorage.getItem("userCache"))?.id) {
-      const user = JSON.parse(localStorage.getItem("userCache"))
-      const name = user.themeObject.id
-      const dark = user.themeObject.theme.dark
-      const light = user.themeObject.theme.light
-      if (user.accentColor) {
-        user.themeObject.theme.dark.primary = user.accentColor
-        user.themeObject.theme.light.primary = user.accentColor
-      }
-      if (JSON.parse(localStorage.getItem("subjectsCache"))) {
-        this.$store.commit(
-          "setSubjects",
-          JSON.parse(localStorage.getItem("subjectsCache"))
-        )
-      }
-      Vuetify.framework.theme.themes.dark = dark
-      Vuetify.framework.theme.themes.light = light
-      Vuetify.framework.theme.themes.name = name
-      Vuetify.framework.theme.themes.primaryType =
-        user.themeObject.theme.primaryType
-      this.$store.commit(
-        "setUser",
-        JSON.parse(localStorage.getItem("userCache"))
-      )
-    }
-    if (localStorage.getItem("calendarCache")?.length) {
-      this.$store.commit(
-        "setCalendar",
-        JSON.parse(localStorage.getItem("calendarCache")).map((event) => {
-          return {
-            ...event,
-            start: new Date(event.start),
-            end: new Date(event.finish)
-          }
-        })
-      )
-    }
     this.$store.dispatch("getState")
     this.$store.dispatch("checkAuth").catch(() => {
       this.$store.dispatch("logout")
@@ -853,9 +737,6 @@ export default {
           this.$store.state.site.notification = state.notification
           this.$store.state.site.notificationType = state.notificationType
         })
-        setInterval(() => {
-          this.$socket.emit("ping")
-        }, 10000)
         // eslint-disable-next-line no-undef
         if (JSON.parse(process.env.VUE_APP_MATOMO_ENABLED)) {
           // eslint-disable-next-line no-undef
@@ -870,11 +751,8 @@ export default {
       })
   },
   watch: {
-    compactModeNag(val) {
-      if (!val) {
-        this.$store.state.user.compact = "disabled"
-        this.$store.dispatch("saveOnlineSettings")
-      }
+    "$store.state.userPanel"(val) {
+      localStorage.setItem("userPanel", val)
     },
     cssTips(val) {
       localStorage.setItem("cssTipsDismissed", !val)
@@ -908,7 +786,7 @@ export default {
     search() {
       if (this.search) {
         if (this.search.id) {
-          this.$router.push("/activity/activity/" + this.search.id)
+          this.$router.push("/communications/" + this.search.id)
           this.$store.commit("setSearch", false)
           this.search = null
           this.$nextTick(() => {
diff --git a/src/components/CommsInput.vue b/src/components/CommsInput.vue
new file mode 100644
index 0000000..ce6fe0f
--- /dev/null
+++ b/src/components/CommsInput.vue
@@ -0,0 +1,292 @@
+<template>
+  <div>
+    <v-toolbar
+      elevation="0"
+      outlined
+      height="40"
+      color="card"
+      v-if="file"
+      style="cursor: pointer; overflow: hidden"
+      class="mb-2"
+    >
+      <v-toolbar-title>
+        <v-icon> mdi-attachment </v-icon>
+        {{ file.name }}
+      </v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-btn icon @click="file = null" small>
+        <v-icon> mdi-close </v-icon>
+      </v-btn>
+    </v-toolbar>
+    <v-textarea
+      style="margin-bottom: 5px"
+      autofocus
+      label="Type a message"
+      placeholder="Keep it civil"
+      type="text"
+      ref="message-input"
+      :id="edit ? 'edit-input' : 'message-input'"
+      outlined
+      append-outer-icon="mdi-send"
+      auto-grow
+      @keyup.up="editLastMessage"
+      @keyup.esc="handleEsc"
+      @click:append-outer="handleMessage()"
+      @keydown.enter.exact.prevent="handleMessage()"
+      v-model="message"
+      @paste="handlePaste"
+      @change="handleChange"
+      rows="1"
+      single-line
+      dense
+      hide-details
+      @keydown.enter.shift.exact.prevent="newLine($event)"
+    >
+      <template v-slot:append-outer>
+        <v-btn
+          icon
+          small
+          @click="handleMessage()"
+          v-if="!edit"
+          :retain-focus-on-click="false"
+          class="no-focus"
+        >
+          <v-icon> mdi-send </v-icon>
+        </v-btn>
+      </template>
+      <template v-slot:prepend>
+        <v-file-input
+          style="margin-top: -18px"
+          single-line
+          hide-input
+          v-model="file"
+          @change="getURLForImage"
+          v-if="!edit"
+        ></v-file-input>
+      </template>
+    </v-textarea>
+  </div>
+</template>
+
+<script>
+import AjaxErrorHandler from "@/lib/errorHandler"
+
+export default {
+  name: "CommsInput",
+  props: {
+    replying: {
+      type: Object,
+      default: null
+    },
+    edit: {
+      type: Object,
+      default: null
+    },
+    autoScroll: {
+      type: Function,
+      default: () => {}
+    },
+    editLastMessage: {
+      type: Function,
+      default: () => {}
+    },
+    endEdit: {
+      type: Function,
+      default: () => {}
+    },
+    endSend: {
+      type: Function,
+      default: () => {}
+    },
+    chat: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      message: "",
+      file: null,
+      blobURL: null
+    }
+  },
+  methods: {
+    handleMessage() {
+      if (this.edit) {
+        this.editMessage()
+      } else {
+        this.sendMessage()
+      }
+    },
+    editMessage() {
+      if (this.message.length > 0) {
+        this.axios
+          .put(
+            process.env.VUE_APP_BASE_URL +
+              "/api/v1/communications/" +
+              this.$route.params.id +
+              "/message/edit",
+            {
+              id: this.edit.id,
+              content: this.message
+            }
+          )
+          .then(() => {
+            this.edit.editing = false
+            this.edit.id = null
+            this.edit.content = ""
+            this.focusInput()
+            this.endEdit()
+            // response will be handled via WebSocket
+          })
+          .catch((e) => {
+            AjaxErrorHandler(this.$store)(e)
+          })
+      }
+    },
+    newLine(event) {
+      this.message = event.target.value + "\n"
+    },
+    handleEsc() {
+      if (!this.edit) {
+        if (this.replying) {
+          this.endSend()
+        }
+      } else {
+        this.endEdit()
+      }
+    },
+    getURLForImage() {
+      const file = this.file
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        this.blobURL = e.target.result
+      }
+      reader.readAsDataURL(file)
+    },
+    handleChange() {
+      if (this.$store.state.user.bcUser.storedStatus !== "invisible") {
+        if (this.typingDate) {
+          const now = new Date()
+          if (now - this.typingDate > 5000) {
+            this.typingDate = now
+            this.axios.put(
+              process.env.VUE_APP_BASE_URL +
+                "/api/v1/communications/" +
+                this.chat.id +
+                "/typing"
+            )
+          }
+        } else {
+          this.typingDate = new Date()
+          this.axios.put(
+            process.env.VUE_APP_BASE_URL +
+              "/api/v1/communications/" +
+              this.chat.id +
+              "/typing"
+          )
+        }
+      }
+    },
+    handlePaste(data) {
+      if (data.clipboardData.items.length) {
+        const item = data.clipboardData.items[0]
+        if (item.kind === "file") {
+          this.file = item.getAsFile()
+          this.getURLForImage()
+        }
+      }
+    },
+    focusInput() {
+      const input = document.getElementById("message-input")
+      input.focus()
+    },
+    sendMessage() {
+      this.focusInput()
+      let message = this.message
+      this.message = ""
+      if (this.file || message.length > 0) {
+        const emojis = require("../lib/emojis.json")
+        message = message.replaceAll(
+          /:([a-zA-Z0-9_\-+]+):/g,
+          (match, group1) => {
+            const emoji = emojis.find((emoji) => {
+              return emoji.aliases.includes(group1)
+            })
+            if (emoji) {
+              return emoji.emoji
+            } else {
+              return match
+            }
+          }
+        )
+        if (!this.file) {
+          this.axios
+            .post(
+              process.env.VUE_APP_BASE_URL +
+                "/api/v1/communications/" +
+                this.$route.params.id +
+                "/message",
+              {
+                message: message,
+                replyId: this.replying?.id
+              }
+            )
+            .then(() => {
+              this.focusInput()
+              this.message = ""
+              this.autoScroll()
+              this.endSend()
+            })
+            .catch((e) => {
+              console.log(e)
+              AjaxErrorHandler(this.$store)(e)
+            })
+        } else {
+          const formData = new FormData()
+          formData.append("message", message)
+          if (this.replying) {
+            formData.append("replyId", this.replying.id)
+          }
+          formData.append("file", this.file)
+          this.axios
+            .post(
+              process.env.VUE_APP_BASE_URL +
+                "/api/v1/communications/" +
+                this.$route.params.id +
+                "/formData/message",
+              formData,
+              {
+                headers: {
+                  "Content-Type": "multipart/form-data"
+                }
+              }
+            )
+            .then(() => {
+              this.focusInput()
+              this.message = ""
+              this.autoScroll()
+              this.endSend()
+              this.file = null
+            })
+            .catch((e) => {
+              console.log(e)
+              AjaxErrorHandler(this.$store)(e)
+            })
+        }
+      }
+    }
+  },
+  mounted() {
+    if (this.edit) {
+      this.message = this.edit.content
+    }
+  }
+}
+</script>
+
+<style scoped>
+.no-focus:focus::before {
+  opacity: 0 !important;
+}
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 12026f5..3c8a01f 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -3,6 +3,39 @@
     <v-overlay :value="!$store.state.wsConnected" absolute>
       <v-progress-circular indeterminate size="64"></v-progress-circular>
     </v-overlay>
+    <NicknameDialog :nickname="nickname" />
+    <v-menu
+      v-model="context.user.value"
+      :position-x="context.user.x"
+      :position-y="context.user.y"
+      absolute
+      offset-y
+      class="rounded-l"
+    >
+      <v-list class="rounded-l" v-if="context.user.item">
+        <v-list-item
+          v-if="context.user.item.type === 'direct'"
+          @click="
+            nickname.user = context.user.item
+            nickname.dialog = true
+          "
+        >
+          <v-list-item-title>Change Friend Nickname</v-list-item-title>
+        </v-list-item>
+        <v-list-item @click="groupSettings(context.user.id)">
+          <v-list-item-title>Group Settings</v-list-item-title>
+        </v-list-item>
+        <v-list-item
+          @click="
+            leave.item = context.user.item
+            leave.dialog = true
+          "
+          color="error"
+        >
+          <v-list-item-title>Leave Group</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
     <v-dialog
       v-model="settings.addMembers.dialog"
       max-width="400px"
@@ -263,6 +296,38 @@
       </v-card>
     </v-dialog>
     <v-app-bar app color="bg">
+      <v-app-bar-nav-icon
+        @click.stop="$store.state.drawer = !$store.state.drawer"
+        v-if="$vuetify.breakpoint.mobile"
+      ></v-app-bar-nav-icon>
+      <button
+        style="display: none"
+        v-shortkey="['ctrl', 'k']"
+        @shortkey="$store.commit('setSearch', true)"
+      >
+        Debug
+      </button>
+      <button
+        style="display: none"
+        v-shortkey="['meta', 'k']"
+        @shortkey="$store.commit('setSearch', true)"
+      >
+        Debug
+      </button>
+      <button
+        style="display: none"
+        v-shortkey="['ctrl', 'alt', 'd']"
+        @shortkey="$store.dispatch('toggleCSS')"
+      >
+        Style Toggle
+      </button>
+      <button
+        style="display: none"
+        v-shortkey="['f9']"
+        @shortkey="$store.dispatch('toggleCSS')"
+      >
+        Style Toggle
+      </button>
       <template v-if="$route.name === 'Communications'">
         <v-toolbar-title v-if="$store.state.selectedChat?.chat?.type">
           {{
@@ -271,7 +336,6 @@
               : $store.state.selectedChat?.chat?.name
           }}
         </v-toolbar-title>
-
         <v-spacer></v-spacer>
         <v-btn
           icon
@@ -279,11 +343,7 @@
         >
           <v-icon>mdi-magnify</v-icon>
         </v-btn>
-        <v-btn
-          icon
-          @click="$store.state.userPanel = !$store.state.userPanel"
-          v-if="selected?.chat?.type === 'group'"
-        >
+        <v-btn icon @click="$store.state.userPanel = !$store.state.userPanel">
           <v-icon>mdi-account-group</v-icon>
         </v-btn>
       </template>
@@ -293,148 +353,147 @@
         </v-toolbar-title>
       </template>
     </v-app-bar>
-    <v-navigation-drawer color="bg" floating app style="max-height: 100%">
+    <v-navigation-drawer
+      color="bg"
+      floating
+      app
+      style="max-height: 100%"
+      v-model="$store.state.drawer"
+      :width="$vuetify.breakpoint.mobile ? 270 : 320"
+    >
       <v-container>
-        <v-btn
-          color="toolbar"
-          to="/communications/friends"
-          block
-          class="mb-3 rounded-xl"
-          elevation="2"
-        >
-          <v-icon left>mdi-account-multiple</v-icon>
-          Friends
-        </v-btn>
-        <v-text-field
-          class="rounded-xl"
-          filled
-          solo
-          label="Search..."
-          append-icon="mdi-magnify"
-          background-color="toolbar"
-          style="margin-bottom: -18px"
-          elevation="2"
-        ></v-text-field>
-        <v-toolbar color="toolbar" class="rounded-xl mb-3" elevation="2">
-          <v-toolbar-title class="subtitle-1">
-            CHATS ({{ $store.state.chats.length }})
-          </v-toolbar-title>
-          <v-spacer></v-spacer>
-          <v-btn icon @click="dialogs.new = true">
-            <v-icon>mdi-plus</v-icon>
-          </v-btn>
-        </v-toolbar>
-        <v-card height="100%" color="transparent" class="mt-2" elevation="0">
-          <v-list height="100%" two-line color="transparent" elevation="0">
-            <v-list-item-group v-model="selected">
-              <template v-for="(item, index) in $store.state.chats">
-                <v-list-item
-                  :key="item.title"
-                  :to="'/communications/' + item.id"
+        <v-list dense nav id="comms-sidebar-list">
+          <template v-if="$vuetify.breakpoint.mobile">
+            <v-btn
+              color="toolbar"
+              to="/communications/friends"
+              width="48%"
+              class="mb-3 mr-1 rounded-xl"
+              elevation="2"
+            >
+              <v-icon left>mdi-account-multiple</v-icon>
+              Friends
+            </v-btn>
+            <v-btn
+              color="toolbar"
+              width="48%"
+              class="mb-3 ml-1 rounded-xl"
+              elevation="2"
+              @click="dialogs.new = true"
+            >
+              <v-icon left>mdi-plus</v-icon>
+              New
+            </v-btn>
+          </template>
+          <template v-else>
+            <v-btn
+              color="toolbar"
+              to="/communications/friends"
+              block
+              class="mb-3 rounded-xl"
+              elevation="2"
+            >
+              <v-icon left>mdi-account-multiple</v-icon>
+              Friends
+            </v-btn>
+            <v-text-field
+              class="rounded-xl"
+              filled
+              solo
+              label="Search..."
+              append-icon="mdi-magnify"
+              background-color="toolbar"
+              style="margin-bottom: -18px"
+              elevation="2"
+            ></v-text-field>
+            <v-toolbar color="toolbar" class="rounded-xl mb-3" elevation="2">
+              <v-toolbar-title class="subtitle-1">
+                CHATS ({{ $store.state.chats.length }})
+              </v-toolbar-title>
+              <v-spacer></v-spacer>
+              <v-btn icon @click="dialogs.new = true">
+                <v-icon>mdi-plus</v-icon>
+              </v-btn>
+            </v-toolbar></template
+          >
+          <v-list v-for="item in $store.state.chats" :key="item.id">
+            <template>
+              <v-list-item
+                :to="'/communications/' + item.id"
+                @contextmenu="
+                  show($event, 'user', getDirectRecipient(item), item.id)
+                "
+              >
+                <v-badge
+                  bordered
+                  bottom
+                  :color="getStatus(item)"
+                  v-if="item.chat.type === 'direct'"
+                  dot
+                  offset-x="24"
+                  offset-y="20"
                 >
-                  <v-badge
-                    bordered
-                    bottom
-                    :color="getStatus(item)"
-                    v-if="item.chat.type === 'direct'"
-                    dot
-                    offset-x="24"
-                    offset-y="26"
+                  <v-list-item-avatar
+                    :color="$vuetify.theme.themes.dark.primary"
                   >
-                    <v-list-item-avatar
-                      :color="$vuetify.theme.themes.dark.primary"
-                    >
-                      <v-icon v-if="item.chat.type === 'group'">
-                        mdi-account-group
-                      </v-icon>
-                      <v-img
-                        v-else-if="
-                          item.chat.type === 'direct' &&
-                          getDirectRecipient(item).avatar
-                        "
-                        :src="'/usercontent/' + getDirectRecipient(item).avatar"
-                      />
-                      <v-icon v-else-if="item.chat.type === 'direct'">
-                        mdi-account
-                      </v-icon>
-                    </v-list-item-avatar>
-                  </v-badge>
-                  <v-badge dot color="none" v-else>
-                    <v-list-item-avatar
-                      :color="$vuetify.theme.themes.dark.primary"
-                    >
-                      <v-icon v-if="item.chat.type === 'group'">
-                        mdi-account-group
-                      </v-icon>
-                    </v-list-item-avatar>
-                  </v-badge>
-                  <template>
-                    <v-list-item-content>
-                      <v-list-item-title v-if="item.chat.type === 'direct'">
-                        {{ getDirectRecipient(item).username }}
-                        <v-badge
-                          v-if="
-                            getLastRead(item).count >= 1 &&
-                            $route.params.id !== item.id.toString()
-                          "
-                          color="red"
-                          class="ml-2"
-                          :content="getLastRead(item).count"
-                        >
-                        </v-badge>
-                      </v-list-item-title>
-                      <v-list-item-title v-else>
-                        {{ item.chat.name }}
-                        <v-badge
-                          v-if="
-                            getLastRead(item).count >= 1 &&
-                            $route.params.id !== item.id.toString()
-                          "
-                          color="red"
-                          class="ml-2"
-                          :content="getLastRead(item).count"
-                        >
-                        </v-badge>
-                      </v-list-item-title>
+                    <v-icon v-if="item.chat.type === 'group'">
+                      mdi-account-group
+                    </v-icon>
+                    <v-img
+                      v-else-if="
+                        item.chat.type === 'direct' &&
+                        getDirectRecipient(item).avatar
+                      "
+                      :src="
+                        $store.state.baseURL +
+                        '/usercontent/' +
+                        getDirectRecipient(item).avatar
+                      "
+                    />
+                    <v-icon v-else-if="item.chat.type === 'direct'">
+                      mdi-account
+                    </v-icon>
+                  </v-list-item-avatar>
+                </v-badge>
+                <v-badge dot color="none" v-else>
+                  <v-list-item-avatar
+                    :color="$vuetify.theme.themes.dark.primary"
+                  >
+                    <v-icon v-if="item.chat.type === 'group'">
+                      mdi-account-group
+                    </v-icon>
+                  </v-list-item-avatar>
+                </v-badge>
+                <template>
+                  <v-list-item-content>
+                    <v-list-item-title v-if="item.chat.type === 'direct'">
+                      {{ getDirectRecipient(item).name }}
+                    </v-list-item-title>
+                    <v-list-item-title v-else>
+                      <span> {{ item.chat.name }} </span>
+                    </v-list-item-title>
 
-                      <v-list-item-subtitle v-if="item.chat.type === 'group'">
-                        {{ item.chat.users.length }} Members
-                      </v-list-item-subtitle>
-                    </v-list-item-content>
-                    <v-list-item-action>
-                      <v-icon
-                        @click="
-                          leave.item = item
-                          leave.dialog = true
-                        "
-                      >
-                        mdi-exit-to-app
-                      </v-icon>
-                    </v-list-item-action>
-                    <v-list-item-action>
-                      <v-icon
-                        @click="
-                          settings.item = item
-                          settings.dialog = true
-                        "
-                      >
-                        mdi-cog
-                      </v-icon>
-                    </v-list-item-action>
-                  </template>
-                </v-list-item>
-
-                <v-divider
-                  v-if="index < $store.state.chats.length - 1"
-                  :key="index"
-                ></v-divider>
-              </template>
-            </v-list-item-group>
+                    <v-list-item-subtitle v-if="item.chat.type === 'group'">
+                      {{ item.chat.users.length }} Members
+                    </v-list-item-subtitle>
+                  </v-list-item-content>
+                  <v-list-item-action
+                    v-if="
+                      item.unread >= 1 &&
+                      $route.params.id !== item.id.toString()
+                    "
+                  >
+                    <v-badge color="red" inline :content="item.unread">
+                    </v-badge>
+                  </v-list-item-action>
+                </template>
+              </v-list-item>
+            </template>
           </v-list>
-        </v-card>
+        </v-list>
       </v-container>
       <template v-slot:append>
-        <v-card tile color="card" elevation="0">
+        <v-card tile color="bg" elevation="0">
           <v-overlay :value="!$store.state.wsConnected" absolute>
             <v-progress-circular indeterminate size="48"></v-progress-circular>
           </v-overlay>
@@ -522,11 +581,19 @@
 
 <script>
 import AjaxErrorHandler from "@/lib/errorHandler"
+import NicknameDialog from "@/components/NicknameDialog"
+import Vue from "vue"
 
 export default {
   name: "Header",
+  components: { NicknameDialog },
   data() {
     return {
+      nickname: {
+        dialog: false,
+        nickname: "",
+        user: {}
+      },
       copyTooltip: false,
       settings: {
         dialog: false,
@@ -538,6 +605,28 @@ export default {
         },
         item: null
       },
+      context: {
+        user: {
+          value: false,
+          x: null,
+          y: null,
+          item: null,
+          id: 0
+        },
+        userPopout: {
+          value: false,
+          x: null,
+          y: null,
+          item: null,
+          id: 0
+        },
+        message: {
+          value: false,
+          x: null,
+          y: null,
+          item: null
+        }
+      },
       selected: [2],
       loading: true,
       leave: {
@@ -556,6 +645,23 @@ export default {
     }
   },
   methods: {
+    groupSettings(id) {
+      this.settings.item = this.$store.state.chats.find(
+        (chat) => chat.id === id
+      )
+      this.settings.dialog = true
+    },
+    show(e, context, item, id) {
+      e.preventDefault()
+      this.context[context].value = false
+      this.context[context].x = e.clientX
+      this.context[context].y = e.clientY
+      this.context[context].item = item
+      this.context[context].id = id
+      this.$nextTick(() => {
+        this.context[context].value = true
+      })
+    },
     setStatus(status) {
       const previousStatus = {
         status: this.$store.state.user.status,
@@ -740,13 +846,30 @@ export default {
       }
     },
     getDirectRecipient(item) {
-      const user = item.chat.users.find(
+      let user = item.chat.users.find(
         (user) => user.id !== this.$store.state.user.id
       )
       if (user) {
-        return user
+        if (user.nickname?.nickname) {
+          user.name = user.nickname.nickname
+        } else {
+          user.name = user.username
+        }
+        return {
+          ...user,
+          type: item.chat.type
+        }
       } else {
-        return item.chat.users[0]
+        let user = item.chat.users[0]
+        if (user.nickname?.nickname) {
+          user.name = user.nickname.nickname
+        } else {
+          user.name = user.username
+        }
+        return {
+          ...user,
+          type: item.chat.type
+        }
       }
     },
     createConversation() {
@@ -756,7 +879,6 @@ export default {
           users: this.newConversation.users
         })
         .then(() => {
-          this.getChats()
           this.newConversation.name = ""
           this.newConversation.users = []
           this.newConversation.loading = false
@@ -774,10 +896,10 @@ export default {
     searchUsers() {
       this.newConversation.loading = true
       this.axios
-        .get("/api/v1/communications/search?query=" + this.newConversation.name)
+        .get("/api/v1/communications/search?query=")
         .then((res) => {
           this.newConversation.loading = false
-          this.newConversation.results.push(...res.data)
+          this.newConversation.results = res.data
         })
         .catch(() => {
           this.newConversation.loading = false
@@ -785,12 +907,10 @@ export default {
     },
     searchUsersForGroupAdmin() {
       this.axios
-        .get(
-          "/api/v1/communications/search?query=" + this.settings.addMembers.name
-        )
+        .get("/api/v1/communications/search?query=")
         .then((res) => {
           if (this.settings.item) {
-            this.settings.addMembers.results.push(...res.data)
+            this.settings.addMembers.results = res.data
             this.settings.addMembers.results =
               this.settings.addMembers.results.filter(
                 (user) =>
@@ -802,6 +922,8 @@ export default {
     }
   },
   mounted() {
+    Vue.axios.defaults.headers.common["Authorization"] =
+      localStorage.getItem("session")
     this.searchUsers()
     this.searchUsersForGroupAdmin()
     this.$store.dispatch("getChats")
@@ -834,7 +956,6 @@ export default {
       )
       if (chat) {
         const index = this.$store.state.chats.indexOf(chat)
-        this.$store.state.chats[index].chat.lastMessages.unshift(message)
         this.$store.state.chats.splice(index, 1)
         this.$store.state.chats.unshift(chat)
       }
diff --git a/src/components/NicknameDialog.vue b/src/components/NicknameDialog.vue
new file mode 100644
index 0000000..8f825b5
--- /dev/null
+++ b/src/components/NicknameDialog.vue
@@ -0,0 +1,84 @@
+<template>
+  <v-dialog v-model="nickname.dialog" width="500px">
+    <v-card>
+      <v-card-title>
+        <span class="headline">{{ nickname.user.username }}</span>
+      </v-card-title>
+      <v-card-text>
+        <v-text-field
+          v-model="nickname.nickname"
+          label="Nickname"
+          required
+          @keyup.enter="setFriendNickname"
+        ></v-text-field>
+        <small>Friend nicknames only show to you.</small>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+          color="blue darken-1"
+          text
+          @click="
+            nickname.dialog = false
+            nickname.nickname = ''
+            nickname.user = {}
+          "
+        >
+          Cancel
+        </v-btn>
+        <v-btn color="blue darken-1" text @click="setFriendNickname">
+          Apply
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import AjaxErrorHandler from "@/lib/errorHandler"
+
+export default {
+  name: "NicknameDialog",
+  props: ["nickname"],
+  methods: {
+    setFriendNickname() {
+      this.axios
+        .post(
+          process.env.VUE_APP_BASE_URL +
+            "/api/v1/communications/nickname/" +
+            this.nickname.user.id,
+          {
+            nickname: this.nickname.nickname
+          }
+        )
+        .then((res) => {
+          this.$store.state.chats.forEach((item) => {
+            item.chat.associations.forEach((a) => {
+              if (a.user.id === this.nickname.user.id) {
+                a.user.nickname = {
+                  nickname: res.data.nickname
+                }
+              }
+            })
+            item.chat.users.forEach((u) => {
+              if (u.id === this.nickname.user.id) {
+                u.nickname = {
+                  nickname: res.data.nickname
+                }
+              }
+            })
+          })
+          this.nickname.dialog = false
+          this.nickname.nickname = ""
+          this.nickname.user = {}
+          this.$toast.success("Nickname changed successfully.")
+        })
+        .catch((e) => {
+          AjaxErrorHandler(this.$store)(e)
+        })
+    }
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/lib/errorHandler.js b/src/lib/errorHandler.js
index d2b98b6..4d4c3d7 100644
--- a/src/lib/errorHandler.js
+++ b/src/lib/errorHandler.js
@@ -2,8 +2,14 @@ module.exports = function (vuex) {
   return function (res, ignorePathErrorCb) {
     let errors = []
 
-    if (res.response === undefined || res.response.data.errors === undefined) {
-      if (res.response.status === 429) {
+    if (
+      res?.response === undefined ||
+      res?.response?.data?.errors === undefined
+    ) {
+      if (vuex.state.site.release === "dev") {
+        console.error(res)
+      }
+      if (res?.response?.status === 429) {
         vuex._vm.$toast.error(
           "You are being rate limited, retry in " +
             res.response.headers["ratelimit-reset"] +
diff --git a/src/store/index.js b/src/store/index.js
index ed498ee..1d255f7 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,17 +4,37 @@ import Vuetify from "../plugins/vuetify"
 import AjaxErrorHandler from "@/lib/errorHandler"
 
 Vue.use(Vuex)
-
+function getDirectRecipient(context, item) {
+  let user = item.chat.users.find((user) => user.id !== context.state.user.id)
+  if (user) {
+    if (user.nickname?.nickname) {
+      user.name = user.nickname.nickname
+    } else {
+      user.name = user.username
+    }
+    return user
+  } else {
+    let user = item.chat.users[0]
+    if (user.nickname?.nickname) {
+      user.name = user.nickname.nickname
+    } else {
+      user.name = user.username
+    }
+    return user
+  }
+}
 export default new Vuex.Store({
   state: {
     online: true,
     selectedChat: null,
     chats: [],
+    baseURL: process.env.VUE_APP_BASE_URL,
     versioning: {
       date: process.env.VUE_APP_BUILD_DATE,
       version: process.env.VUE_APP_VERSION,
       release: process.env.RELEASE
     },
+    drawer: true,
     site: {
       release: "stable",
       loading: true
@@ -97,7 +117,7 @@ export default new Vuex.Store({
       state.modals.search = value
     },
     addChat(state, chat) {
-      state.chats.push(chat)
+      state.chats.unshift(chat)
     },
     updateQuickSwitchCache(state, value) {
       state.quickSwitchCache.push({
@@ -119,34 +139,16 @@ export default new Vuex.Store({
       })
     },
     getCommunicationsUnread(context) {
-      Vue.axios.defaults.headers.common["Authorization"] =
-        localStorage.getItem("session")
-      Vue.axios.get("/api/v1/communications").then((res) => {
-        context.state.communicationNotifications = 0
-        res.data.forEach((item) => {
-          const message = item.chat.lastMessages.find(
-            (message) => message.id === item.lastRead
-          )
-          const lastMessage = item.chat.lastMessages.find(
-            (message) => message.userId !== context.state.user.id
-          )
-          let count
-          if (message && lastMessage) {
-            const index = item.chat.lastMessages.indexOf(message)
-            const indexLast = item.chat.lastMessages.indexOf(lastMessage)
-            let value = index - indexLast
-            if (value < 0) {
-              value = 0
-            }
-            count = value
-          } else if (!message) {
-            count = item.chat.lastMessages.length
-          } else {
-            count = 0
-          }
-          context.state.communicationNotifications += count
+      Vue.axios
+        .get(process.env.VUE_APP_BASE_URL + "/api/v1/communications")
+        .then((res) => {
+          context.commit("setChats", res.data)
+          context.dispatch("updateQuickSwitch")
+          context.state.communicationNotifications = 0
+          res.data.forEach((item) => {
+            context.state.communicationNotifications += item.unread
+          })
         })
-      })
     },
     discardTheme(context) {
       context.state.themeEngine.theme = {
@@ -323,9 +325,12 @@ export default new Vuex.Store({
       })
       context.state.chats.forEach((chat) => {
         context.commit("updateQuickSwitchCache", {
-          ...chat,
-          customType: 2,
-          route: "/communications/" + chat.id
+          id: chat.id,
+          subjectLongName:
+            chat.chat.type === "group"
+              ? chat.chat.name
+              : getDirectRecipient(context, chat).name,
+          customType: 3
         })
       })
     },
diff --git a/src/views/Communications/CommunicationsChat.vue b/src/views/Communications/CommunicationsChat.vue
index 4ceb859..bc26752 100644
--- a/src/views/Communications/CommunicationsChat.vue
+++ b/src/views/Communications/CommunicationsChat.vue
@@ -1,5 +1,219 @@
 <template>
   <div id="communications-chat" @dragover.prevent @drop.prevent>
+    <v-menu
+      v-model="context.message.value"
+      :position-x="context.message.x"
+      :position-y="context.message.y"
+      absolute
+      offset-y
+      class="rounded-l"
+    >
+      <v-list class="rounded-l" v-if="context.message.item">
+        <v-list-item @click="replying = context.message.item">
+          <v-list-item-title>Reply to Message</v-list-item-title>
+        </v-list-item>
+        <v-list-item
+          @click="
+            edit.content = context.message.item.content
+            edit.editing = true
+            edit.id = context.message.item.id
+          "
+          v-if="
+            context.message.item.userId === $store.state.user.id &&
+            edit.id !== context.message.item.id
+          "
+        >
+          <v-list-item-title>Edit Message</v-list-item-title>
+        </v-list-item>
+        <v-list-item
+          v-if="context.message.item.userId === $store.state.user.id"
+          @click="deleteMessage(context.message.item)"
+        >
+          <v-list-item-title>Delete Message</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+    <v-dialog v-model="context.userPopout.value" max-width="650px">
+      <v-card v-if="context.userPopout.item" class="user-popout" height="600px">
+        <v-toolbar color="toolbar" height="100">
+          <v-avatar size="64" class="mr-3 mb-2 mt-2">
+            <v-img
+              :src="
+                $store.state.baseURL +
+                '/usercontent/' +
+                context.userPopout.item.avatar
+              "
+              v-if="context.userPopout.item.avatar"
+              class="elevation-1"
+            />
+            <v-icon v-else class="elevation-1"> mdi-account </v-icon>
+          </v-avatar>
+          <v-toolbar-title>
+            {{ getName(context.userPopout.item) }}
+            <v-tooltip top v-if="context.userPopout.item.admin">
+              <template v-slot:activator="{ on }">
+                <v-btn icon v-on="on" small>
+                  <v-icon> mdi-crown </v-icon>
+                </v-btn>
+              </template>
+              <span>Colubrina Instance Administrator</span>
+            </v-tooltip>
+            <v-tooltip top v-if="context.userPopout.item.id < 35">
+              <template v-slot:activator="{ on }">
+                <v-btn icon v-on="on" small>
+                  <v-icon> mdi-alpha-a-circle </v-icon>
+                </v-btn>
+              </template>
+              <span>Early User</span>
+            </v-tooltip>
+            <v-tooltip top v-if="context.userPopout.item.bot">
+              <template v-slot:activator="{ on }">
+                <v-btn icon v-on="on" small>
+                  <v-icon> mdi-robot </v-icon>
+                </v-btn>
+              </template>
+              <span>Bot</span>
+            </v-tooltip>
+            <div class="subheading subtitle-1 text--lighten-2">
+              <template v-if="context.userPopout.item.nickname"
+                >{{ context.userPopout.item.username }}:</template
+              >{{ context.userPopout.item.instance }}
+            </div>
+          </v-toolbar-title>
+        </v-toolbar>
+        <v-tabs :show-arrows="false" fixed-tabs background-color="card">
+          <v-tab>
+            <v-icon>mdi-account-multiple</v-icon>&nbsp; Mutual Friends
+          </v-tab>
+          <v-tab>
+            <v-icon>mdi-account-group</v-icon>&nbsp; Mutual Groups
+          </v-tab>
+          <v-tab-item
+            :style="
+              'background-color: ' +
+              $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light'].card
+            "
+          >
+            <v-list
+              :height="400"
+              :style="
+                'background-color: ' +
+                $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light']
+                  .card
+              "
+            >
+              <v-overlay
+                :value="context.userPopout.item.loading.mutualFriends"
+                absolute
+              >
+                <v-progress-circular
+                  indeterminate
+                  size="64"
+                ></v-progress-circular>
+              </v-overlay>
+              <v-list-item
+                v-for="item in context.userPopout.item.mutualFriends"
+                :key="item.id"
+                @click="openUserPanel(item)"
+              >
+                <v-list-item-title>
+                  <v-avatar size="24">
+                    <v-img
+                      :src="
+                        $store.state.baseURL + '/usercontent/' + item.avatar
+                      "
+                      v-if="item.avatar"
+                      class="elevation-1"
+                    />
+                    <v-icon v-else class="elevation-1"> mdi-account </v-icon>
+                  </v-avatar>
+                  {{ getName(item) }}
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-tab-item>
+          <v-tab-item
+            :style="
+              'background-color: ' +
+              $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light'].card
+            "
+          >
+            <v-list
+              :height="400"
+              :style="
+                'background-color: ' +
+                $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light']
+                  .card
+              "
+            >
+              <v-overlay
+                :value="context.userPopout.item.loading.mutualFriends"
+                absolute
+              >
+                <v-progress-circular
+                  indeterminate
+                  size="64"
+                ></v-progress-circular>
+              </v-overlay>
+              <v-list-item
+                v-for="item in context.userPopout.item.mutualGroups"
+                :key="item.id"
+                @click="$router.push('/communications/' + item.associationId)"
+              >
+                <v-list-item-title>
+                  {{ item.name }}
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-tab-item>
+        </v-tabs>
+        <v-card-actions
+          :style="
+            'background-color: ' +
+            $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light'].card
+          "
+        >
+          <v-spacer></v-spacer>
+          <v-btn color="primary" text @click="context.userPopout.value = false">
+            Close
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-dialog v-model="nickname.dialog" width="500px">
+      <v-card>
+        <v-card-title>
+          <span class="headline">{{ nickname.user.username }}</span>
+        </v-card-title>
+        <v-card-text>
+          <v-text-field
+            v-model="nickname.nickname"
+            label="Nickname"
+            required
+            @keyup.enter="setFriendNickname"
+            autofocus
+          ></v-text-field>
+          <small>Friend nicknames only show to you.</small>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="
+              nickname.dialog = false
+              nickname.nickname = ''
+              nickname.user = {}
+            "
+          >
+            Cancel
+          </v-btn>
+          <v-btn color="blue darken-1" text @click="setFriendNickname">
+            Apply
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
     <v-dialog
       v-model="preview.dialog"
       elevation="0"
@@ -23,19 +237,78 @@
         </v-container>
       </v-card>
     </v-dialog>
-
-    <v-row v-if="!loading" @drop="handleDrag">
-      <v-col id="chat-col">
-        <v-app>
-          <v-card class="rounded-xl" color="card">
-            <v-card-text>
-              <v-list two-line elevation="0" ref="message-list">
-                <template v-for="(message, index) in messages">
+    <v-card
+      color="card"
+      v-if="loading"
+      style="overflow: scroll; height: calc(100vh - 24px - 40px - 40px)"
+    >
+      <v-overlay :value="loading" absolute>
+        <v-progress-circular indeterminate size="64"></v-progress-circular>
+      </v-overlay>
+    </v-card>
+    <v-navigation-drawer
+      v-model="$store.state.userPanel"
+      color="bg"
+      floating
+      v-if="!loading && $vuetify.breakpoint.mobile"
+      app
+      right
+    >
+      <v-list two-line color="card">
+        <v-list-item-group class="rounded-xl">
+          <template v-for="item in associations">
+            <v-list-item
+              :key="item.title"
+              @contextmenu="show($event, 'user', item.user)"
+              @click="openUserPanel(item.user)"
+              :id="'user-popout-' + item.userId"
+            >
+              <v-badge
+                bordered
+                bottom
+                :color="getStatus(item.user)"
+                dot
+                offset-x="24"
+                offset-y="26"
+              >
+                <v-list-item-avatar :color="$vuetify.theme.themes.dark.primary">
+                  <v-img
+                    v-if="item.user.avatar"
+                    :src="
+                      $store.state.baseURL + '/usercontent/' + item.user.avatar
+                    "
+                  />
+                  <v-icon v-else> mdi-account </v-icon>
+                </v-list-item-avatar>
+              </v-badge>
+              <template>
+                <v-list-item-content>
+                  <v-list-item-title>
+                    {{ getName(item.user) }}
+                  </v-list-item-title>
+                </v-list-item-content>
+              </template>
+            </v-list-item>
+          </template>
+        </v-list-item-group>
+      </v-list>
+    </v-navigation-drawer>
+    <v-row v-if="!loading" @drop="handleDrag" no-gutters>
+      <v-col class="flex-grow-1 flex-shrink-1" id="chat-col">
+        <v-card
+          class="d-flex flex-column fill-height rounded-xl"
+          style="overflow: auto; height: calc(100vh - 24px - 40px - 40px)"
+          color="card"
+          elevation="0"
+        >
+          <v-card-text class="flex-grow-1 overflow-y-auto">
+            <v-list two-line color="card" ref="message-list">
+              <template v-for="(message, index) in messages">
+                <template v-if="!message.type">
                   <v-toolbar
                     @click="jumpToMessage(message.replyId)"
                     :key="message.keyId + '-reply-toolbar'"
                     elevation="0"
-                    outlined
                     height="40"
                     color="card"
                     v-if="message.reply"
@@ -44,7 +317,11 @@
                     <v-icon class="mr-2">mdi-reply</v-icon>
                     <v-avatar size="24" class="mr-2">
                       <v-img
-                        :src="'/usercontent/' + message.reply.user.avatar"
+                        :src="
+                          $store.state.baseURL +
+                          '/usercontent/' +
+                          message.reply.user.avatar
+                        "
                         v-if="message.reply.user.avatar"
                         class="elevation-1"
                       />
@@ -70,10 +347,15 @@
                       'text-xs-left': message.userId !== $store.state.user.id
                     }"
                     :id="'message-' + index"
+                    @contextmenu="show($event, 'message', message)"
                   >
                     <v-avatar size="48" class="mr-2">
                       <v-img
-                        :src="'/usercontent/' + message.user.avatar"
+                        :src="
+                          $store.state.baseURL +
+                          '/usercontent/' +
+                          message.user.avatar
+                        "
                         v-if="message.user.avatar"
                         class="elevation-1"
                       />
@@ -81,7 +363,21 @@
                     </v-avatar>
                     <v-list-item-content>
                       <v-list-item-subtitle>
-                        {{ message.user.username }}
+                        {{ getName(message.user) }}
+                        <v-chip
+                          v-if="message.user.bot"
+                          color="calendarNormalActivity"
+                          small
+                        >
+                          <v-icon small>mdi-robot</v-icon>&nbsp;
+                        </v-chip>
+                        <small>
+                          {{
+                            $date(message.createdAt).format(
+                              "hh:mm A, DD/MM/YYYY"
+                            )
+                          }}
+                        </small>
                         <v-tooltip top v-if="message.edited">
                           <template v-slot:activator="{ on, attrs }">
                             <span v-on="on" v-bind="attrs">
@@ -119,15 +415,20 @@
                           v-for="(embed, index) in message.embeds"
                           :key="index"
                           :id="'embed-' + index"
+                          no-gutters
                         >
                           <v-card
                             elevaion="0"
-                            color="bg"
-                            max-width="25%"
-                            width="25%"
-                            class="ml-3"
+                            :color="
+                              embed.type === 'embed-v1'
+                                ? embed.backgroundColor
+                                : 'bg'
+                            "
+                            :max-width="400"
+                            :min-width="!$vuetify.breakpoint.mobile ? 300 : 0"
+                            class="ml-1 rounded-xl mb-1 mr-1"
                           >
-                            <v-container>
+                            <v-container fluid>
                               <v-row v-if="embed.type === 'openGraph'">
                                 <v-col
                                   cols="12"
@@ -175,6 +476,29 @@
                                   </p>
                                 </v-col>
                               </v-row>
+                              <v-row
+                                v-else-if="embed.type === 'compass'"
+                                @click="$router.push(embed.path)"
+                                style="cursor: pointer"
+                              >
+                                <v-container
+                                  :style="
+                                    'background: url(/' +
+                                    embed.compass.banner +
+                                    ')'
+                                  "
+                                  style="color: white"
+                                  class="rounded"
+                                >
+                                  <h4>BetterCompass</h4>
+                                  <h3>
+                                    {{ embed.compass.name }}
+                                  </h3>
+                                  <p>
+                                    {{ embed.compass.displayName }}
+                                  </p>
+                                </v-container>
+                              </v-row>
                               <template v-else-if="embed.type === 'image'">
                                 <v-hover v-slot="{ hover }">
                                   <div>
@@ -221,6 +545,97 @@
                                   </v-btn>
                                 </v-card-actions>
                               </template>
+                              <v-row v-else-if="embed.type === 'embed-v1'">
+                                <v-col
+                                  cols="12"
+                                  class="text-xs-center"
+                                  v-if="embed.headerImage"
+                                >
+                                  <v-img
+                                    :src="
+                                      embed.openGraph.headerImage?.url ||
+                                      embed.openGraph.headerImage[0]?.url
+                                    "
+                                    class="elevation-1"
+                                    contain
+                                    :aspect-ratio="16 / 9"
+                                  >
+                                    <template v-slot:placeholder>
+                                      <v-row
+                                        class="fill-height ma-0"
+                                        align="center"
+                                        justify="center"
+                                      >
+                                        <v-progress-circular
+                                          indeterminate
+                                          color="grey lighten-5"
+                                        ></v-progress-circular>
+                                      </v-row>
+                                    </template>
+                                  </v-img>
+                                </v-col>
+                                <v-col cols="12" class="text-xs-center">
+                                  <h4 v-if="embed.title">
+                                    {{ embed.title }}
+                                  </h4>
+                                  <p v-if="embed.description">
+                                    {{ embed.description }}
+                                  </p>
+                                  <v-row
+                                    v-for="(graph, index) in embed.graphs"
+                                    :key="'graph-' + index"
+                                  >
+                                    <v-col cols="12" class="text-xs-center">
+                                      <h3>
+                                        {{ graph.name }}
+                                      </h3>
+                                      <Chart
+                                        :chart-data="graph.data"
+                                        v-if="graph.data"
+                                        :options="graphOptions"
+                                      ></Chart>
+                                      <p v-else>
+                                        Chart data could not be loaded.
+                                      </p>
+                                    </v-col>
+                                  </v-row>
+                                  <v-row
+                                    v-for="(field, index) in embed.fields"
+                                    :key="'field-' + index"
+                                    :id="'field-' + index"
+                                    class="mt-1"
+                                  >
+                                    <v-col
+                                      cols="12"
+                                      class="text-xs-center"
+                                      style="white-space: pre-wrap"
+                                    >
+                                      <h4>{{ field.name }}</h4>
+                                      <p>{{ field.value }}</p>
+                                    </v-col>
+                                  </v-row>
+                                  <a
+                                    :href="embed.link.url"
+                                    v-if="embed.link"
+                                    target="_blank"
+                                    style="text-decoration: none"
+                                  >
+                                    <h3>
+                                      {{ embed.link.title }}
+                                    </h3>
+                                  </a>
+                                  <small v-if="embed.footer">
+                                    {{ embed.footer }}
+                                  </small>
+                                </v-col>
+                              </v-row>
+                              <v-row v-else>
+                                <v-container>
+                                  <h4>
+                                    You must update Colubrina to see this embed.
+                                  </h4>
+                                </v-container>
+                              </v-row>
                             </v-container>
                           </v-card>
                         </v-row>
@@ -232,7 +647,7 @@
                           :id="'attachment-' + index"
                           max-width="40%"
                           elevaion="0"
-                          color="bg"
+                          color="card"
                         >
                           <v-hover
                             v-slot="{ hover }"
@@ -248,7 +663,11 @@
                                 @click="setImagePreview(attachment)"
                                 contain
                                 :aspect-ratio="16 / 9"
-                                :src="'/usercontent/' + attachment.attachment"
+                                :src="
+                                  $store.state.baseURL +
+                                  '/usercontent/' +
+                                  attachment.attachment
+                                "
                               >
                                 <template v-slot:placeholder>
                                   <v-row
@@ -291,7 +710,11 @@
                             <v-btn
                               text
                               icon
-                              :href="'/usercontent/' + attachment.attachment"
+                              :href="
+                                $store.state.baseURL +
+                                '/usercontent/' +
+                                attachment.attachment
+                              "
                               target="_blank"
                             >
                               <v-icon> mdi-download </v-icon>
@@ -299,26 +722,71 @@
                           </v-card-actions>
                         </v-card>
                       </template>
-                      <v-text-field
-                        v-model="edit.content"
-                        v-if="edit.editing && edit.id === message.id"
-                        autofocus
-                        :value="message.content"
-                        label="Type a message"
-                        placeholder="Type a message"
-                        type="text"
-                        ref="edit-input"
-                        outlined
-                        append-outer-icon="mdi-send"
-                        @keyup.enter="editMessage(message)"
-                        @keydown.esc="
-                          edit.content = ''
-                          edit.editing = false
-                          edit.id = null
-                          focusInput()
-                        "
-                        @click:append-outer="editMessage(message)"
-                      />
+                      <CommsInput
+                        :edit="edit"
+                        :chat="chat"
+                        :auto-scroll="autoScroll"
+                        :end-edit="endEdit"
+                        v-if="edit.id === message.id"
+                      ></CommsInput>
+                    </v-list-item-content>
+                    <v-list-item-action v-if="!$vuetify.breakpoint.mobile">
+                      <v-list-item-subtitle>
+                        <v-btn
+                          icon
+                          v-if="message.userId === $store.state.user.id"
+                          @click="deleteMessage(message)"
+                        >
+                          <v-icon> mdi-delete </v-icon>
+                        </v-btn>
+                        <v-btn
+                          icon
+                          @click="
+                            edit.content = message.content
+                            edit.editing = true
+                            edit.id = message.id
+                          "
+                          v-if="
+                            message.userId === $store.state.user.id &&
+                            edit.id !== message.id
+                          "
+                        >
+                          <v-icon> mdi-pencil </v-icon>
+                        </v-btn>
+                        <v-btn
+                          icon
+                          @click="
+                            edit.content = ''
+                            edit.editing = false
+                            edit.id = null
+                          "
+                          v-if="
+                            message.userId === $store.state.user.id &&
+                            edit.id === message.id
+                          "
+                        >
+                          <v-icon> mdi-close </v-icon>
+                        </v-btn>
+                        <v-btn
+                          icon
+                          @click="
+                            replying = message
+                            focusInput()
+                          "
+                        >
+                          <v-icon> mdi-reply </v-icon>
+                        </v-btn>
+                      </v-list-item-subtitle>
+                    </v-list-item-action>
+                  </v-list-item>
+                </template>
+                <template v-else-if="message.type === 'leave'">
+                  <v-list-item :key="message.keyId" :id="'message-' + index">
+                    <v-icon color="red" class="mr-2 ml-1">
+                      mdi-arrow-left
+                    </v-icon>
+                    <v-list-item-content>
+                      {{ message.content }}
                     </v-list-item-content>
                     <v-list-item-action>
                       <v-list-item-subtitle>
@@ -375,113 +843,145 @@
                     </v-list-item-action>
                   </v-list-item>
                 </template>
-              </v-list>
-              <v-app-bar app bottom height="100px" color="bg" elevation="0">
-                <v-toolbar
-                  elevation="0"
-                  outlined
-                  height="40"
-                  color="card"
-                  v-if="file"
-                  style="cursor: pointer"
-                  class="mb-2"
-                >
-                  <v-toolbar-title>
-                    <v-icon> mdi-attachment </v-icon>
-                    {{ file.name }}
-                  </v-toolbar-title>
-                  <v-spacer></v-spacer>
-                  <v-btn icon @click="file = null">
-                    <v-icon> mdi-close </v-icon>
-                  </v-btn>
-                </v-toolbar>
-                <v-toolbar
-                  @click="jumpToMessage(replying?.id)"
-                  elevation="0"
-                  outlined
-                  height="40"
-                  color="card"
-                  v-if="replying"
-                  style="cursor: pointer"
-                  class="mb-2"
-                >
-                  <v-icon class="mr-2">mdi-reply</v-icon>
-                  <v-avatar size="24" class="mr-2">
-                    <v-img
-                      :src="'/usercontent/' + replying.user.avatar"
-                      v-if="replying.user.avatar"
-                      class="elevation-1"
-                    />
-                    <v-icon v-else class="elevation-1"> mdi-account </v-icon>
-                  </v-avatar>
-                  <template v-if="replying.attachments.length">
-                    <v-icon class="mr-2">mdi-file-image</v-icon>
-                  </template>
-                  <template
-                    v-if="!replying.content && replying.attachments.length"
-                  >
-                    Click to view attachment
-                  </template>
-                  {{ replying.content.substring(0, 100) }}
-                  <v-spacer></v-spacer>
-                  <v-btn icon @click="replying = null" class="mr-2">
-                    <v-icon> mdi-close </v-icon>
-                  </v-btn>
-                </v-toolbar>
-                <v-text-field
-                  v-model="message"
-                  autofocus
-                  solo
-                  label="Type a message"
-                  placeholder="Type a message"
-                  type="text"
-                  ref="message-input"
-                  outlined
-                  append-outer-icon="mdi-send"
-                  auto-grow
-                  @keyup.enter="sendMessage"
-                  @keyup.up="editLastMessage"
-                  @keyup.esc="handleEsc"
-                  @click:append-outer="sendMessage"
-                  @paste="handlePaste"
-                >
-                  <template v-slot:prepend>
-                    <v-file-input
-                      single-line
-                      hide-input
-                      v-model="file"
-                      @change="getURLForImage"
-                    ></v-file-input>
-                  </template>
-                </v-text-field>
-                <p
-                  style="margin-top: -17px; position: absolute"
-                  v-if="usersTyping.length"
-                >
-                  {{ usersTyping.map((user) => user.username).join(", ") }}
-                  {{ usersTyping.length > 1 ? " are" : " is" }} typing...
-                </p>
-              </v-app-bar>
-            </v-card-text>
-          </v-card>
-        </v-app>
+                <template v-else-if="message.type === 'join'">
+                  <v-list-item :key="message.keyId" :id="'message-' + index">
+                    <v-icon color="success" class="mr-2 ml-1">
+                      mdi-arrow-right
+                    </v-icon>
+                    <v-list-item-content>
+                      {{ message.content }}
+                    </v-list-item-content>
+                    <v-list-item-action>
+                      <v-list-item-subtitle>
+                        {{
+                          $date(message.createdAt).format("DD/MM/YYYY hh:mm A")
+                        }}
+                      </v-list-item-subtitle>
+                      <v-list-item-subtitle>
+                        <v-btn
+                          icon
+                          v-if="message.userId === $store.state.user.id"
+                          @click="deleteMessage(message)"
+                        >
+                          <v-icon> mdi-delete </v-icon>
+                        </v-btn>
+                        <v-btn
+                          icon
+                          @click="
+                            edit.content = message.content
+                            edit.editing = true
+                            edit.id = message.id
+                          "
+                          v-if="
+                            message.userId === $store.state.user.id &&
+                            edit.id !== message.id
+                          "
+                        >
+                          <v-icon> mdi-pencil </v-icon>
+                        </v-btn>
+                        <v-btn
+                          icon
+                          @click="
+                            edit.content = ''
+                            edit.editing = false
+                            edit.id = null
+                          "
+                          v-if="
+                            message.userId === $store.state.user.id &&
+                            edit.id === message.id
+                          "
+                        >
+                          <v-icon> mdi-close </v-icon>
+                        </v-btn>
+                        <v-btn
+                          icon
+                          @click="
+                            replying = message
+                            focusInput()
+                          "
+                        >
+                          <v-icon> mdi-reply </v-icon>
+                        </v-btn>
+                      </v-list-item-subtitle>
+                    </v-list-item-action>
+                  </v-list-item>
+                </template>
+              </template>
+            </v-list>
+          </v-card-text>
+          <v-card-text>
+            <v-toolbar
+              @click="jumpToMessage(replying?.id)"
+              elevation="0"
+              height="35"
+              color="card"
+              v-if="replying"
+              style="cursor: pointer; overflow: hidden"
+              class="mb-2"
+            >
+              <v-icon class="mr-2">mdi-reply</v-icon>
+              <v-avatar size="24" class="mr-2">
+                <v-img
+                  :src="
+                    $store.state.baseURL +
+                    '/usercontent/' +
+                    replying.user.avatar
+                  "
+                  v-if="replying.user.avatar"
+                  class="elevation-1"
+                />
+                <v-icon v-else class="elevation-1"> mdi-account </v-icon>
+              </v-avatar>
+              <template v-if="replying.attachments.length">
+                <v-icon class="mr-2">mdi-file-image</v-icon>
+              </template>
+              <template v-if="!replying.content && replying.attachments.length">
+                Click to view attachment
+              </template>
+              {{ replying.content.substring(0, 100) }}
+              <v-spacer></v-spacer>
+              <v-btn icon @click="replying = null" class="mr-2" small>
+                <v-icon> mdi-close </v-icon>
+              </v-btn>
+            </v-toolbar>
+            <v-toolbar
+              height="29"
+              color="transparent"
+              elevation="0"
+              style="margin-bottom: -12px; padding-top: 0"
+            >
+              <p v-if="usersTyping.length" style="float: left">
+                {{ usersTyping.map((user) => getName(user)).join(", ") }}
+                {{ usersTyping.length > 1 ? " are" : " is" }} typing...
+              </p>
+            </v-toolbar>
+            <CommsInput
+              :chat="chat"
+              :replying="replying"
+              :editLastMessage="editLastMessage"
+              :autoScroll="autoScroll"
+              :endSend="endSend"
+            ></CommsInput>
+          </v-card-text>
+        </v-card>
       </v-col>
-      <v-navigation-drawer
-        app
-        right
-        floating
+      <v-col
         cols="3"
         class=""
         id="search-col"
-        v-if="$store.state.searchPanel"
+        v-if="searchPanel && !$vuetify.breakpoint.mobile"
       >
-        <v-card class="d-flex flex-column fill-height rounded-xl" color="card">
-          <v-toolbar color="toolbar" class="flex-grow-0 flex-shrink-0">
+        <v-card
+          class="d-flex flex-column fill-height rounded-xl"
+          style="overflow: scroll; height: calc(100vh - 24px - 40px - 40px)"
+          color="card"
+        >
+          <v-toolbar color="transparent" class="flex-grow-0 flex-shrink-0">
             <v-toolbar-title>
               Search ({{ search.pager.totalItems || 0 }})
             </v-toolbar-title>
             <v-spacer></v-spacer>
-            <v-btn icon @click="$store.state.searchPanel = false">
+            <v-btn icon @click="searchPanel = false">
               <v-icon>mdi-close</v-icon>
             </v-btn>
           </v-toolbar>
@@ -508,7 +1008,11 @@
                   <v-icon class="mr-2">mdi-reply</v-icon>
                   <v-avatar size="24" class="mr-2">
                     <v-img
-                      :src="'/usercontent/' + message.reply.user.avatar"
+                      :src="
+                        $store.state.baseURL +
+                        '/usercontent/' +
+                        message.reply.user.avatar
+                      "
                       v-if="message.reply.user.avatar"
                       class="elevation-1"
                     />
@@ -538,7 +1042,11 @@
                 >
                   <v-avatar size="48" class="mr-2">
                     <v-img
-                      :src="'/usercontent/' + message.user.avatar"
+                      :src="
+                        $store.state.baseURL +
+                        '/usercontent/' +
+                        message.user.avatar
+                      "
                       v-if="message.user.avatar"
                       class="elevation-1"
                     />
@@ -546,7 +1054,7 @@
                   </v-avatar>
                   <v-list-item-content>
                     <v-list-item-subtitle>
-                      {{ message.user.username }}
+                      {{ getName(message.user) }}
                       <small>
                         {{
                           $date(message.createdAt).format("DD/MM/YYYY hh:mm A")
@@ -592,7 +1100,7 @@
                       >
                         <v-card
                           elevaion="0"
-                          color="bg"
+                          color="card"
                           max-width="25%"
                           width="25%"
                           class="ml-3"
@@ -723,7 +1231,7 @@
                         :id="'attachment-' + index"
                         max-width="40%"
                         elevaion="0"
-                        color="bg"
+                        color="card"
                       >
                         <v-hover
                           v-slot="{ hover }"
@@ -739,7 +1247,11 @@
                               @click="setImagePreview(attachment)"
                               contain
                               :aspect-ratio="16 / 9"
-                              :src="'/usercontent/' + attachment.attachment"
+                              :src="
+                                $store.state.baseURL +
+                                '/usercontent/' +
+                                attachment.attachment
+                              "
                             >
                               <template v-slot:placeholder>
                                 <v-row
@@ -778,7 +1290,11 @@
                           <v-btn
                             text
                             icon
-                            :href="'/usercontent/' + attachment.attachment"
+                            :href="
+                              $store.state.baseURL +
+                              '/usercontent/' +
+                              attachment.attachment
+                            "
                             target="_blank"
                           >
                             <v-icon> mdi-download </v-icon>
@@ -812,25 +1328,46 @@
             </v-list>
           </v-card-text>
         </v-card>
-      </v-navigation-drawer>
-      <v-navigation-drawer
-        right
-        app
-        floating
-        background-color="bg"
-        color="bg"
-        width="20%"
-        class=""
-        id="search-col"
-        v-if="$store.state.userPanel && chat.chat.type === 'group'"
+      </v-col>
+      <v-col
+        cols="3"
+        class="ml-2"
+        id="user-col"
+        v-if="$store.state.userPanel && !$vuetify.breakpoint.mobile"
       >
         <v-card
           class="d-flex flex-column fill-height rounded-xl"
-          :max-height="viewport()"
-          :min-height="viewport()"
+          elevation="0"
+          style="overflow: scroll; height: calc(100vh - 24px - 40px - 40px)"
           color="card"
         >
-          <v-toolbar color="bg" class="flex-grow-0 flex-shrink-0">
+          <v-menu
+            v-model="context.user.value"
+            :position-x="context.user.x"
+            :position-y="context.user.y"
+            absolute
+            offset-y
+            class="rounded-l"
+          >
+            <v-list class="rounded-l" v-if="context.user.item">
+              <v-list-item
+                @click="
+                  nickname.dialog = true
+                  nickname.user = context.user.item
+                "
+              >
+                <v-list-item-title
+                  >Change Friend Nickname for
+                  {{ context.user.item.username }}</v-list-item-title
+                >
+              </v-list-item>
+            </v-list>
+          </v-menu>
+          <v-toolbar
+            color="transparent"
+            class="flex-grow-0 flex-shrink-0"
+            elevation="2"
+          >
             <v-toolbar-title> Members </v-toolbar-title>
             <v-spacer></v-spacer>
             <v-btn icon @click="$store.state.userPanel = false">
@@ -839,8 +1376,13 @@
           </v-toolbar>
           <v-list two-line color="card">
             <v-list-item-group class="rounded-xl">
-              <template v-for="item in chat.chat.associations">
-                <v-list-item :key="item.title">
+              <template v-for="item in associations">
+                <v-list-item
+                  :key="item.title"
+                  @contextmenu="show($event, 'user', item.user)"
+                  @click="openUserPanel(item.user)"
+                  :id="'user-popout-' + item.userId"
+                >
                   <v-badge
                     bordered
                     bottom
@@ -854,7 +1396,11 @@
                     >
                       <v-img
                         v-if="item.user.avatar"
-                        :src="'/usercontent/' + item.user.avatar"
+                        :src="
+                          $store.state.baseURL +
+                          '/usercontent/' +
+                          item.user.avatar
+                        "
                       />
                       <v-icon v-else> mdi-account </v-icon>
                     </v-list-item-avatar>
@@ -862,7 +1408,31 @@
                   <template>
                     <v-list-item-content>
                       <v-list-item-title>
-                        {{ item.user.username }}
+                        {{ getName(item.user) }}
+                        <v-tooltip top v-if="item.user.admin">
+                          <template v-slot:activator="{ on }">
+                            <v-btn icon v-on="on" small>
+                              <v-icon> mdi-crown </v-icon>
+                            </v-btn>
+                          </template>
+                          <span>Colubrina Instance Administrator</span>
+                        </v-tooltip>
+                        <v-tooltip top v-if="item.user.bot">
+                          <template v-slot:activator="{ on }">
+                            <v-btn icon v-on="on" small>
+                              <v-icon> mdi-robot </v-icon>
+                            </v-btn>
+                          </template>
+                          <span>Bot</span>
+                        </v-tooltip>
+                        <v-tooltip top v-if="item.user.id < 35">
+                          <template v-slot:activator="{ on }">
+                            <v-btn icon v-on="on" small>
+                              <v-icon> mdi-alpha-a-circle </v-icon>
+                            </v-btn>
+                          </template>
+                          <span>Early User</span>
+                        </v-tooltip>
                       </v-list-item-title>
                     </v-list-item-content>
                   </template>
@@ -872,17 +1442,73 @@
           </v-list>
           <br />
         </v-card>
-      </v-navigation-drawer>
+      </v-col>
     </v-row>
   </div>
 </template>
 <script>
 import AjaxErrorHandler from "@/lib/errorHandler"
+import CommsInput from "@/components/CommsInput"
+import { Line as Chart } from "vue-chartjs/legacy"
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement
+} from "chart.js"
 
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement
+)
 export default {
   name: "CommunicationsChat",
+  components: { CommsInput, Chart },
   props: ["chat", "loading", "items"],
   data: () => ({
+    graphOptions: {
+      responsive: true,
+      maintainAspectRatio: false,
+      title: {
+        display: false
+      }
+    },
+    page: 1,
+    nickname: {
+      dialog: false,
+      nickname: "",
+      user: {}
+    },
+    context: {
+      user: {
+        value: false,
+        x: null,
+        y: null,
+        item: null
+      },
+      userPopout: {
+        value: false,
+        x: null,
+        y: null,
+        item: null,
+        id: 0
+      },
+      message: {
+        value: false,
+        x: null,
+        y: null,
+        item: null
+      }
+    },
     search: {
       query: "",
       results: [],
@@ -950,18 +1576,136 @@ export default {
     userPanel: true
   }),
   computed: {
-    getDirectRecipient() {
-      const user = this.chat.chat.users.find(
-        (user) => user.id !== this.$store.state.user.id
-      )
-      if (user) {
-        return user
-      } else {
-        return this.chat.chat.users[0]
-      }
+    associations() {
+      return this.chat.chat.associations.slice().sort((a, b) => {
+        if (a.lastRead > b.lastRead) {
+          return -1
+        } else if (a.lastRead < b.lastRead) {
+          return 1
+        } else {
+          return 0
+        }
+      })
     }
   },
   methods: {
+    markAsRead() {
+      if (this.items) {
+        try {
+          const unread = this.$store.state.chats.find(
+            (item) => item.id === JSON.parse(this.$route.params.id)
+          ).unread
+          this.items.find(
+            (item) => item.id === JSON.parse(this.$route.params.id)
+          ).unread = 0
+          this.$store.state.communicationNotifications -= unread
+        } catch {
+          return
+        }
+      }
+    },
+    endSend() {
+      this.replying = null
+    },
+    focusInput() {
+      const input = document.getElementById("message-input")
+      if (input) {
+        input.focus()
+      }
+    },
+    openUserPanel(user) {
+      this.context.userPopout.item = user
+      this.context.userPopout.item.mutualGroups = []
+      this.context.userPopout.item.mutualFriends = []
+      this.context.userPopout.item.loading = {
+        mutualGroups: true,
+        mutualFriends: true
+      }
+      this.context.userPopout.value = true
+      this.axios
+        .get(
+          process.env.VUE_APP_BASE_URL +
+            "/api/v1/communications/mutual/" +
+            user.id +
+            "/groups"
+        )
+        .then((res) => {
+          this.context.userPopout.item.mutualGroups = res.data
+          this.context.userPopout.item.loading.mutualGroups = false
+        })
+        .catch((e) => {
+          AjaxErrorHandler(this.$store)(e)
+        })
+      this.axios
+        .get(
+          process.env.VUE_APP_BASE_URL +
+            "/api/v1/communications/mutual/" +
+            user.id +
+            "/friends"
+        )
+        .then((res) => {
+          this.context.userPopout.item.mutualFriends = res.data
+          this.context.userPopout.item.loading.mutualFriends = false
+        })
+        .catch((e) => {
+          AjaxErrorHandler(this.$store)(e)
+        })
+    },
+    getName(user) {
+      if (user.nickname?.nickname) {
+        return user.nickname.nickname
+      } else {
+        return user.username
+      }
+    },
+    setFriendNickname() {
+      this.axios
+        .post(
+          process.env.VUE_APP_BASE_URL +
+            "/api/v1/communications/nickname/" +
+            this.context.user.item.id,
+          {
+            nickname: this.nickname.nickname
+          }
+        )
+        .then((res) => {
+          this.context.user.value = false
+          this.nickname.dialog = false
+          this.nickname.nickname = ""
+          this.nickname.user = {}
+          this.$toast.success("Nickname changed successfully.")
+          this.items.forEach((item) => {
+            item.chat.associations.forEach((a) => {
+              if (a.user.id === this.context.user.item.id) {
+                a.user.nickname = {
+                  nickname: res.data.nickname
+                }
+              }
+            })
+            item.chat.users.forEach((u) => {
+              if (u.id === this.context.user.item.id) {
+                u.nickname = {
+                  nickname: res.data.nickname
+                }
+              }
+            })
+          })
+        })
+        .catch((e) => {
+          AjaxErrorHandler(this.$store)(e)
+        })
+    },
+    show(e, context, item) {
+      e.preventDefault()
+      this.context[context].value = false
+      this.context[context].x = e.clientX
+      this.context[context].y = e.clientY
+      this.context[context].item = item
+      this.context[context].id = item.id
+      this.$nextTick(() => {
+        this.context[context].value = true
+      })
+    },
     getStatus(item) {
       if (item.status === "online") {
         return "green"
@@ -978,12 +1722,18 @@ export default {
     doSearch() {
       if (this.search.query.length) {
         this.axios
-          .get("/api/v1/communications/" + this.$route.params.id + "/search", {
-            params: {
-              query: this.search.query,
-              page: this.search.page
+          .get(
+            process.env.VUE_APP_BASE_URL +
+              "/api/v1/communications/" +
+              this.$route.params.id +
+              "/search",
+            {
+              params: {
+                query: this.search.query,
+                page: this.search.page
+              }
             }
-          })
+          )
           .then((res) => {
             this.search.results = res.data.messages
             this.search.pager = res.data.pager
@@ -995,7 +1745,7 @@ export default {
     },
     setImagePreview(attachment) {
       const link = attachment.attachment
-        ? attachment.attachment
+        ? this.$store.state.baseURL + "/usercontent/" + attachment.attachment
         : attachment.mediaProxyLink
       this.preview.src = link
       const img = new Image()
@@ -1012,15 +1762,6 @@ export default {
         this.file = e.dataTransfer.files[0]
       }
     },
-    handlePaste(data) {
-      if (data.clipboardData.items.length) {
-        const item = data.clipboardData.items[0]
-        if (item.kind === "file") {
-          this.file = item.getAsFile()
-          this.getURLForImage()
-        }
-      }
-    },
     friendlySize(size) {
       if (size < 1024) {
         return size + " bytes"
@@ -1032,18 +1773,11 @@ export default {
         return (size / 1073741824).toFixed(2) + " GB"
       }
     },
-    getURLForImage() {
-      const file = this.file
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        this.blobURL = e.target.result
-      }
-      reader.readAsDataURL(file)
-    },
     deleteMessage(message) {
       this.axios
         .delete(
-          "/api/v1/communications/" +
+          process.env.VUE_APP_BASE_URL +
+            "/api/v1/communications/" +
             this.$route.params.id +
             "/message/" +
             message.id
@@ -1080,22 +1814,11 @@ export default {
         console.log("Could not auto scroll (Jump to message)")
       }
     },
-    handleEsc() {
-      if (this.replying) {
-        this.replying = null
-      }
-    },
-    viewport() {
-      return window.innerHeight - 25
-    },
     typing() {
       this.usersTyping = this.usersTyping.filter((user) => {
         return this.$date().isBefore(user.timeout)
       })
     },
-    focusInput() {
-      this.$refs["message-input"].$refs.input.focus()
-    },
     editLastMessage() {
       // find last message sent by current user
       const lastMessage = this.messages
@@ -1108,27 +1831,11 @@ export default {
         this.edit.id = lastMessage.id
       }
     },
-    editMessage() {
-      if (this.edit.content.length > 0) {
-        this.axios
-          .put(
-            "/api/v1/communications/" + this.$route.params.id + "/message/edit",
-            {
-              id: this.edit.id,
-              content: this.edit.content
-            }
-          )
-          .then(() => {
-            this.edit.editing = false
-            this.edit.id = null
-            this.edit.content = ""
-            this.$refs["message-input"].$refs.input.focus()
-            // response will be handled via WebSocket
-          })
-          .catch((e) => {
-            AjaxErrorHandler(this.$store)(e)
-          })
-      }
+    endEdit() {
+      this.edit.editing = false
+      this.edit.content = ""
+      this.edit.id = ""
+      this.focusInput()
     },
     autoScroll(smooth = true) {
       this.$nextTick(() => {
@@ -1159,12 +1866,14 @@ export default {
     getMessages() {
       this.axios
         .get(
-          "/api/v1/communications/" +
+          process.env.VUE_APP_BASE_URL +
+            "/api/v1/communications/" +
             this.$route.params.id +
             "/messages?limit=50"
         )
         .then((res) => {
           this.messages = res.data
+          this.markRead()
           this.$nextTick(() => {
             this.autoScroll(false)
           })
@@ -1175,102 +1884,30 @@ export default {
     },
     markRead() {
       this.axios.put(
-        "/api/v1/communications/" + this.$route.params.id + "/read"
+        process.env.VUE_APP_BASE_URL +
+          "/api/v1/communications/" +
+          this.$route.params.id +
+          "/read"
       )
-    },
-    sendMessage() {
-      if (this.message.length > 0 || this.file) {
-        const emojis = require("../../lib/emojis.json")
-        this.message = this.message.replaceAll(
-          /:([a-zA-Z0-9_\-+]+):/g,
-          (match, group1) => {
-            const emoji = emojis.find((emoji) => {
-              return emoji.aliases.includes(group1)
-            })
-            if (emoji) {
-              return emoji.emoji
-            } else {
-              return match
-            }
-          }
-        )
-        if (!this.file) {
-          this.axios
-            .post(
-              "/api/v1/communications/" + this.$route.params.id + "/message",
-              {
-                message: this.message,
-                replyId: this.replying?.id
-              }
-            )
-            .then((res) => {
-              this.messages.push(res.data)
-              this.message = ""
-              this.autoScroll()
-              this.replying = null
-              const chat = this.items.find(
-                (item) => item.chatId === this.chat.chatId
-              )
-              if (chat) {
-                const index = this.items.indexOf(chat)
-                this.items.splice(index, 1)
-                this.items.unshift(chat)
-              }
-            })
-            .catch((e) => {
-              AjaxErrorHandler(this.$store)(e)
-            })
-        } else {
-          const formData = new FormData()
-          formData.append("message", this.message)
-          if (this.replying) {
-            formData.append("replyId", this.replying.id)
-          }
-          formData.append("file", this.file)
-          this.axios
-            .post(
-              "/api/v1/communications/" +
-                this.$route.params.id +
-                "/formData/message",
-              formData,
-              {
-                headers: {
-                  "Content-Type": "multipart/form-data"
-                }
-              }
-            )
-            .then((res) => {
-              this.messages.push(res.data)
-              this.message = ""
-              this.autoScroll()
-              this.replying = null
-              this.file = null
-              const chat = this.items.find(
-                (item) => item.chatId === this.chat.chatId
-              )
-              if (chat) {
-                const index = this.items.indexOf(chat)
-                this.items.splice(index, 1)
-                this.items.unshift(chat)
-              }
-            })
-            .catch((e) => {
-              AjaxErrorHandler(this.$store)(e)
-            })
-        }
-      }
+      this.markAsRead()
     }
   },
   mounted() {
+    /*  // check if document.querySelector(`#message-${lastIndex}`) is scrolled to the top, and load new messages
+    window.addEventListener("scroll", () => {
+      const lastIndex = this.messages.length - 1
+      const lastMessage = document.querySelector(`#message-${lastIndex}`)
+      if (lastMessage && lastMessage.getBoundingClientRect().top < 0) {
+        this.page += 1
+        this.getMessages()
+      }
+    })*/
     setInterval(() => {
       this.typing()
     }, 1000)
     this.getMessages()
-    this.markRead()
     if (localStorage.getItem("userPanel")) {
-      this.$store.state.userPanel = JSON.parse(
-        localStorage.getItem("userPanel")
-      )
+      this.userPanel = JSON.parse(localStorage.getItem("userPanel"))
     } else {
       localStorage.setItem("userPanel", true)
     }
@@ -1282,10 +1919,14 @@ export default {
       this.message = drafts[this.$route.params.id]
     }
     this.$socket.on("message", (message) => {
-      if (message.chatId === this.chat.chat.id) {
+      console.log(this.chat)
+      if (message.chatId === this.chat.chatId) {
         this.messages.push(message)
         this.autoScroll()
         this.markRead()
+        if (this.messages.length > 50) {
+          this.messages.shift()
+        }
       }
     })
     this.$socket.on("editMessage", (message) => {
@@ -1333,26 +1974,8 @@ export default {
     userPanel() {
       localStorage.setItem("userPanel", JSON.stringify(this.userPanel))
     },
-    message() {
-      if (this.$store.state.user.storedStatus !== "invisible") {
-        if (this.typingDate) {
-          const now = new Date()
-          if (now - this.typingDate > 5000) {
-            this.typingDate = now
-            this.axios.put(
-              "/api/v1/communications/" + this.$route.params.id + "/typing"
-            )
-          }
-        } else {
-          this.typingDate = new Date()
-          this.axios.put(
-            "/api/v1/communications/" + this.$route.params.id + "/typing"
-          )
-        }
-      }
-    },
     "$route.params.id"(val, oldVal) {
-      this.$refs["message-input"].$refs.input.focus()
+      this.focusInput()
       let drafts = {}
       if (localStorage.getItem("drafts")) {
         drafts = JSON.parse(localStorage.getItem("drafts"))
@@ -1360,13 +1983,14 @@ export default {
       if (this.message || drafts[oldVal]) {
         drafts[oldVal] = this.message
         localStorage.setItem("drafts", JSON.stringify(drafts))
+      } else if (!this.message && drafts[oldVal]) {
+        drafts[oldVal] = ""
       }
       this.message = drafts[val] || ""
       this.messages = []
       this.usersTyping = []
       this.replying = null
       this.getMessages()
-      this.markRead()
     }
   }
 }
diff --git a/src/views/Communications/CommunicationsFriends.vue b/src/views/Communications/CommunicationsFriends.vue
index b2e4dc6..5523ea4 100644
--- a/src/views/Communications/CommunicationsFriends.vue
+++ b/src/views/Communications/CommunicationsFriends.vue
@@ -21,16 +21,13 @@
                   <v-list-item-avatar
                     @click="userProfile(user)"
                     style="cursor: pointer"
+                    :color="$vuetify.theme.themes.dark.primary"
                   >
-                    <v-list-item-avatar
-                      :color="$vuetify.theme.themes.dark.primary"
-                    >
-                      <v-img
-                        :src="'/usercontent/' + user.avatar"
-                        v-if="user.avatar"
-                      />
-                      <v-icon v-else> mdi-account </v-icon>
-                    </v-list-item-avatar>
+                    <v-img
+                      :src="'/usercontent/' + user.avatar"
+                      v-if="user.avatar"
+                    />
+                    <v-icon v-else> mdi-account </v-icon>
                   </v-list-item-avatar>
 
                   <v-list-item-content
@@ -90,16 +87,15 @@
                   v-for="friend in computePendingIncoming"
                   :key="friend.id"
                 >
-                  <v-list-item-avatar @click="userProfile(friend.user2)">
-                    <v-list-item-avatar
-                      :color="$vuetify.theme.themes.dark.primary"
-                    >
-                      <img
-                        :src="'/usercontent/' + friend.user2.avatar"
-                        v-if="friend.user2.avatar"
-                      />
-                      <v-icon v-else> mdi-account </v-icon>
-                    </v-list-item-avatar>
+                  <v-list-item-avatar
+                    @click="userProfile(friend.user2)"
+                    :color="$vuetify.theme.themes.dark.primary"
+                  >
+                    <v-img
+                      :src="'/usercontent/' + friend.user2.avatar"
+                      v-if="friend.user2.avatar"
+                    />
+                    <v-icon v-else> mdi-account </v-icon>
                   </v-list-item-avatar>
 
                   <v-list-item-content @click="userProfile(friend.user2)">
@@ -136,16 +132,13 @@
                   <v-list-item-avatar
                     @click="userProfile(friend.user2)"
                     style="cursor: pointer"
+                    :color="$vuetify.theme.themes.dark.primary"
                   >
-                    <v-list-item-avatar
-                      :color="$vuetify.theme.themes.dark.primary"
-                    >
-                      <img
-                        :src="'/usercontent/' + friend.user2.avatar"
-                        v-if="friend.user2.avatar"
-                      />
-                      <v-icon v-else> mdi-account </v-icon>
-                    </v-list-item-avatar>
+                    <v-img
+                      :src="'/usercontent/' + friend.user2.avatar"
+                      v-if="friend.user2.avatar"
+                    />
+                    <v-icon v-else> mdi-account </v-icon>
                   </v-list-item-avatar>
 
                   <v-list-item-content
@@ -175,16 +168,13 @@
                   <v-list-item-avatar
                     @click="userProfile(friend.user2)"
                     style="cursor: pointer"
+                    :color="$vuetify.theme.themes.dark.primary"
                   >
-                    <v-list-item-avatar
-                      :color="$vuetify.theme.themes.dark.primary"
-                    >
-                      <img
-                        :src="'/usercontent/' + friend.user2.avatar"
-                        v-if="friend.user2.avatar"
-                      />
-                      <v-icon v-else> mdi-account </v-icon>
-                    </v-list-item-avatar>
+                    <v-img
+                      :src="'/usercontent/' + friend.user2.avatar"
+                      v-if="friend.user2.avatar"
+                    />
+                    <v-icon v-else> mdi-account </v-icon>
                   </v-list-item-avatar>
 
                   <v-list-item-content>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index a5e4fc8..a1fe804 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -118,6 +118,7 @@ export default {
           this.$store.commit("setToken", res.data.session)
           await this.$store.dispatch("getUserInfo")
           this.loading = false
+          this.$socket.disconnect()
           this.$socket.connect()
           this.$router.push("/")
         })
diff --git a/src/views/Register.vue b/src/views/Register.vue
index 40b01e6..5c22dfe 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -1,27 +1,5 @@
 <template>
   <div id="login" v-if="!$store.state.user?.bcUser?.id">
-    <v-dialog v-model="totpDialog" max-width="500px">
-      <v-card color="card">
-        <v-toolbar color="toolbar">
-          <v-toolbar-title> Two-Factor Authentication </v-toolbar-title>
-        </v-toolbar>
-        <v-container>
-          <v-card-text
-            >You are seeing this because you have enabled Two-Factor
-            Authentication on BetterCompass.<br />
-            Please check your phone, or authenticator app to obtain the 6 digit
-            code and enter it here.</v-card-text
-          >
-          <v-otp-input
-            length="6"
-            @keyup.enter="doLogin()"
-            @finish="doLogin()"
-            v-model="totp"
-            :disabled="loading"
-          ></v-otp-input>
-        </v-container>
-      </v-card>
-    </v-dialog>
     <div :class="{ outer: !$vuetify.breakpoint.mobile }">
       <div :class="{ middle: !$vuetify.breakpoint.mobile }">
         <div :class="{ innerLogin: !$vuetify.breakpoint.mobile }">
@@ -121,6 +99,7 @@ export default {
           this.$store.commit("setToken", res.data.session)
           await this.$store.dispatch("getUserInfo")
           this.loading = false
+          this.$socket.disconnect()
           this.$socket.connect()
           this.$router.push("/")
         })
diff --git a/src/views/Settings/SettingsAppearance.vue b/src/views/Settings/SettingsAppearance.vue
index 1b2e1ed..0e98367 100644
--- a/src/views/Settings/SettingsAppearance.vue
+++ b/src/views/Settings/SettingsAppearance.vue
@@ -179,12 +179,7 @@ export default {
           sheet: "#181818",
           text: "#000000",
           dark: "#151515",
-          bg: "#151515",
-          calendarNormalActivity: "#3f51b5",
-          calendarActivityType7: "#f44336",
-          calendarActivityType8: "#4caf50",
-          calendarActivityType10: "#ff9800",
-          calendarExternalActivity: "#2196f3"
+          bg: "#151515"
         },
         light: {
           primary: "#0190ea",
@@ -199,68 +194,14 @@ export default {
           sheet: "#f8f8f8",
           text: "#000000",
           dark: "#f8f8f8",
-          bg: "#f8f8f8",
-          calendarNormalActivity: "#3f51b5",
-          calendarActivityType7: "#f44336",
-          calendarActivityType8: "#4caf50",
-          calendarActivityType10: "#ff9800",
-          calendarExternalActivity: "#2196f3"
+          bg: "#f8f8f8"
         }
       },
       createTheme: false,
       createThemeCSS: false,
       name: "",
       creatorType: "create",
-      themes: [],
-      fakeEvents: [
-        {
-          name: "English",
-          content: "English",
-          color: "#dce6f4",
-          start: new Date().setHours(9, 0, 0, 0),
-          end: new Date().setHours(10, 0, 0, 0),
-          timed: true,
-          activityType: 1,
-          activityId: 0,
-          calendarId: 0
-        },
-        {
-          name: "Maths",
-          content: "Maths",
-          color: "#f4dcdc",
-          start: new Date().setHours(10, 0, 0, 0),
-          end: new Date().setHours(11, 0, 0, 0),
-          timed: true,
-          activityType: 1,
-          activityId: 0,
-          instanceId: 0,
-          calendarId: 0
-        },
-        {
-          name: "Lunch Break",
-          content: "Lunch Break",
-          color: "#dce6f4",
-          start: new Date().setHours(11, 0, 0, 0),
-          end: new Date().setHours(11, 30, 0, 0),
-          timed: true,
-          activityType: 1,
-          activityId: 0,
-          instanceId: 0,
-          calendarId: 0
-        },
-        {
-          name: "Excursion",
-          content: "Excursion",
-          color: "#dce6f4",
-          start: new Date().setHours(11, 0, 0, 0),
-          end: new Date().setHours(13, 30, 0, 0),
-          timed: true,
-          activityType: 1,
-          activityId: 0,
-          instanceId: 0,
-          calendarId: 0
-        }
-      ]
+      themes: []
     }
   },
   computed: {
@@ -308,33 +249,6 @@ div {
       document.head.appendChild(style)
       this.$store.dispatch("saveOnlineSettings")
     },
-    computeColor(event) {
-      if (event.color === "#003300") {
-        return this.$vuetify.theme.themes[
-          this.$store.state.user.theme || "dark"
-        ].calendarActivityType8
-      } else if (event.color === "#133897") {
-        return this.$vuetify.theme.themes[
-          this.$store.state.user.theme || "dark"
-        ].calendarExternalActivity
-      } else if (event.activityType === 7 || event.color === "#f4dcdc") {
-        return this.$vuetify.theme.themes[
-          this.$store.state.user.theme || "dark"
-        ].calendarActivityType7
-      } else if (event.color === "#dce6f4") {
-        return this.$vuetify.theme.themes[
-          this.$store.state.user.theme || "dark"
-        ].calendarNormalActivity
-      } else if (event.activityType === 10) {
-        return this.$vuetify.theme.themes[
-          this.$store.state.user.theme || "dark"
-        ].calendarActivityType10
-      } else {
-        return this.$vuetify.theme.themes[
-          this.$store.state.user.theme || "dark"
-        ].calendarNormalActivity
-      }
-    },
     editorInit() {
       require("brace/ext/language_tools")
       require("brace/mode/css")
@@ -357,18 +271,7 @@ div {
         sheet: "#" + Math.floor(Math.random() * 16777215).toString(16),
         text: "#" + Math.floor(Math.random() * 16777215).toString(16),
         dark: "#" + Math.floor(Math.random() * 16777215).toString(16),
-        bg: "#" + Math.floor(Math.random() * 16777215).toString(16),
-        calendarNormalActivity:
-          "#" + Math.floor(Math.random() * 16777215).toString(16),
-        calendarActivityType7:
-          "#" + Math.floor(Math.random() * 16777215).toString(16),
-        calendarActivityType8:
-          "#" + Math.floor(Math.random() * 16777215).toString(16),
-        calendarActivityType10:
-          "#" + Math.floor(Math.random() * 16777215).toString(16),
-        calendarExternalActivity: Math.floor(Math.random() * 16777215).toString(
-          16
-        )
+        bg: "#" + Math.floor(Math.random() * 16777215).toString(16)
       }
       this.creator.dark = {
         primary: "#" + Math.floor(Math.random() * 16777215).toString(16),
@@ -383,18 +286,7 @@ div {
         sheet: "#" + Math.floor(Math.random() * 16777215).toString(16),
         text: "#" + Math.floor(Math.random() * 16777215).toString(16),
         dark: "#" + Math.floor(Math.random() * 16777215).toString(16),
-        bg: "#" + Math.floor(Math.random() * 16777215).toString(16),
-        calendarNormalActivity:
-          "#" + Math.floor(Math.random() * 16777215).toString(16),
-        calendarActivityType7:
-          "#" + Math.floor(Math.random() * 16777215).toString(16),
-        calendarActivityType8:
-          "#" + Math.floor(Math.random() * 16777215).toString(16),
-        calendarActivityType10:
-          "#" + Math.floor(Math.random() * 16777215).toString(16),
-        calendarExternalActivity: Math.floor(Math.random() * 16777215).toString(
-          16
-        )
+        bg: "#" + Math.floor(Math.random() * 16777215).toString(16)
       }
     },
     doDeleteTheme(theme) {
@@ -500,17 +392,7 @@ div {
       a.dispatchEvent(e)
     },
     friendlyName(index) {
-      if (index === "calendarNormalActivity") {
-        return "Standard Class"
-      } else if (index === "calendarActivityType7") {
-        return "Relief Event"
-      } else if (index === "calendarActivityType8") {
-        return "Generic Type 8"
-      } else if (index === "calendarActivityType10") {
-        return "Learning Task"
-      } else if (index === "calendarExternalActivity") {
-        return "External Activity"
-      } else if (index === "bg") {
+      if (index === "bg") {
         return "Background"
       } else if (index === "dark") {
         return "Sidebar & Header"
@@ -581,7 +463,6 @@ div {
     }
   },
   mounted() {
-    console.log(document.querySelectorAll(".editor__toolbar"))
     this.defineAccent = this.$store.state.user.accentColor !== null
     this.accent = this.$store.state.user.accentColor
     this.name = this.$vuetify.theme.themes.name
diff --git a/yarn.lock b/yarn.lock
index 70866ab..761120e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1194,6 +1194,11 @@
   resolved "https://registry.yarnpkg.com/@soda/get-current-script/-/get-current-script-1.0.2.tgz#a53515db25d8038374381b73af20bb4f2e508d87"
   integrity sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==
 
+"@tauri-apps/api@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@tauri-apps/api/-/api-1.0.2.tgz#5228720e35d50fd08df87067dc29e7306c1f7a10"
+  integrity sha512-yuNW0oeJ1/ZA7wNF1KgxhHrSu5viPVzY/UgUczzN5ptLM8dH15Juy5rEGkoHfeXGju90Y/l22hi3BtIrp/za+w==
+
 "@types/body-parser@*":
   version "1.19.2"
   resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.2.tgz#aea2059e28b7658639081347ac4fab3de166e6f0"