diff --git a/src/components/app/MembersList.vue b/src/components/app/MembersList.vue
index 3de407e..4cd8684 100644
--- a/src/components/app/MembersList.vue
+++ b/src/components/app/MembersList.vue
@@ -3,6 +3,7 @@
     <div class="header">
       <div class="title">Members</div>
     </div>
+      <div style="text-align: center">Soon!</div>
   </div>
 </template>
 
diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue
index b6e259e..8c3b2b5 100644
--- a/src/components/app/MessagePanel.vue
+++ b/src/components/app/MessagePanel.vue
@@ -2,7 +2,7 @@
   <div class="right-panel">
     <heading
       :uniqueID="recipients && recipients.length ? recipients[0].uniqueID : undefined"
-      :type="selectedChannelID && channel && !channel.server_id ? 1 : 0"
+      :type="selectedChannelID && channel && !channel.server_id ? 1 : channel && channel.server_id ? 2 : 0"
       :status-color="userStatusColor"
       :name="selectedChannelID ? channelName : `Welcome back, ${user.username}!` "
     />
@@ -22,6 +22,7 @@
           :message="msg.message"
           :files="msg.files"
           :status="msg.status"
+          :type="msg.type"
         />
         <uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue"/>
       </div>
diff --git a/src/components/app/MessagePanel/Heading.vue b/src/components/app/MessagePanel/Heading.vue
index c9463d3..904b7f4 100644
--- a/src/components/app/MessagePanel/Heading.vue
+++ b/src/components/app/MessagePanel/Heading.vue
@@ -10,6 +10,9 @@
     <div class="information">
       <div :class="{name: true, clickable: !!uniqueID }" @click="openUserInfoPanel">{{name}}</div>
     </div>
+    <div class="show-members-button" @click="toggleMembersPanel">
+      <i class="material-icons">view_list</i>
+    </div>
   </div>
 </template>
 
@@ -17,7 +20,7 @@
 import { bus } from "@/main";
 export default {
   props: [
-    "type", // 0: without online status; 1: with online status
+    "type", // 0: without online status; 1: with online status; 2: server.
     "statusColor", // only if type is set to 1;
     "name",
     "uniqueID"
@@ -29,6 +32,9 @@ export default {
     },
     toggleLeftMenu() {
       bus.$emit("toggleLeftMenu");
+    },
+    toggleMembersPanel() {
+      bus.$emit("toggleMembersPanel");
     }
   }
 };
@@ -51,6 +57,14 @@ export default {
   user-select: none;
   display: none;
 }
+.show-members-button{
+  display: inline-block;
+  margin-right: 5px;
+  margin-top: 3px;
+  user-select: none;
+  display: none;
+  color: white;
+}
 .show-menu-button .material-icons {
   color: rgb(207, 207, 207);
   transition: 0.3s;
@@ -94,6 +108,14 @@ export default {
   color: rgb(219, 219, 219);
   text-decoration: underline;
 }
+
+
+@media (max-width: 949px) {
+  .show-members-button {
+    display: block;
+  }
+}
+
 @media (max-width: 600px) {
   .show-menu-button {
     display: block;
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index 118c79b..6e4fce3 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -1,33 +1,50 @@
 <template>
-  <div :class="{message: true,  ownMessage: user.uniqueID === $props.uniqueID, ownMessageLeft: user.uniqueID === $props.uniqueID && (apperance && apperance.own_message_right === true)} ">
-    <profile-picture class="avatar" :admin="$props.admin" :url="userAvatar" size="50px" :hover="true" @click.native="openUserInformation"/>
-    <div class="triangle">
-      <div class="triangle-inner"></div>
-    </div>
-    <div class="content">
-      <div class="user-info">
-        <div class="username" @click="openUserInformation">{{this.$props.username}}</div>
-        <div class="date">{{getDate}}</div>
+  <div class="container">
+    <div v-if="!type || type === 0" :class="{message: true,  ownMessage: user.uniqueID === $props.uniqueID, ownMessageLeft: user.uniqueID === $props.uniqueID && (apperance && apperance.own_message_right === true)} " >
+      <profile-picture
+        class="avatar"
+        :admin="$props.admin"
+        :url="userAvatar"
+        size="50px"
+        :hover="true"
+        @click.native="openUserInformation"
+      />
+      <div class="triangle">
+        <div class="triangle-inner"></div>
       </div>
-      <div class="content-message" v-html="formatMessage"></div>
-
-      <div class="file-content" v-if="getFile">
-        <div class="icon">
-          <i class="material-icons">insert_drive_file</i>
+      <div class="content">
+        <div class="user-info">
+          <div class="username" @click="openUserInformation">{{this.$props.username}}</div>
+          <div class="date">{{getDate}}</div>
         </div>
-        <div class="information">
-          <div class="info">{{getFile.fileName}}</div>
-          <a :href="getFile.url" target="_blank">
-            <div class="download-button">Download</div>
-          </a>
+        <div class="content-message" v-html="formatMessage"></div>
+
+        <div class="file-content" v-if="getFile">
+          <div class="icon">
+            <i class="material-icons">insert_drive_file</i>
+          </div>
+          <div class="information">
+            <div class="info">{{getFile.fileName}}</div>
+            <a :href="getFile.url" target="_blank">
+              <div class="download-button">Download</div>
+            </a>
+          </div>
+        </div>
+
+        <div class="image-content" v-if="getImage">
+          <img :src="getImage" @click="imageClicked">
         </div>
       </div>
-
-      <div class="image-content" v-if="getImage">
-        <img :src="getImage" @click="imageClicked">
-      </div>
+      <div class="sending-status" v-html="statusMessage"></div>
+    </div>
+    <div v-if="type && (type === 1 || type === 2)" :class="{'presence-message': true,  green: type === 1, red: type === 2}" >
+      <span>
+        <span class="username" @click="openUserInformation">{{this.$props.username}}</span>
+        <span class="text" v-if="type === 1">has joined the server!</span>
+        <span class="text" v-if="type === 2">has left the server.</span>
+        <span class="date">{{getDate}}</span>
+      </span>
     </div>
-    <div class="sending-status" v-html="statusMessage"></div>
   </div>
 </template>
 
@@ -53,18 +70,19 @@ export default {
     "date",
     "uniqueID",
     "files",
-    "admin"
+    "admin",
+    "type"
   ],
   methods: {
     openUserInformation() {
-        this.$store.dispatch('setUserInformationPopout', this.uniqueID)
+      this.$store.dispatch("setUserInformationPopout", this.uniqueID);
     },
     imageClicked(event) {
       this.$store.dispatch("setImagePreviewURL", event.target.src);
     }
   },
   computed: {
-    ...mapState('settingsModule', ['apperance']),
+    ...mapState("settingsModule", ["apperance"]),
     getImage() {
       if (!this.$props.files || this.$props.files.length === 0)
         return undefined;
@@ -118,7 +136,27 @@ export default {
 
 <style scoped>
 
-.ownMessageLeft  {
+.presence-message {
+  margin: 10px;
+  padding: 10px;
+  display: table;
+  color: white;
+  overflow: hidden;
+  border-radius: 5px;
+  animation: showMessage 0.3s ease-in-out;
+}
+
+.presence-message .text {
+  margin-left: 5px;
+}
+.presence-message.green {
+  background: rgba(0, 128, 0, 0.534);
+}
+.presence-message.red {
+  background: rgba(128, 0, 0, 0.534);
+}
+
+.ownMessageLeft {
   flex-direction: row-reverse;
 }
 
@@ -127,17 +165,15 @@ export default {
   border-left: 7px solid rgba(184, 184, 184, 0.219);
   border-right: none !important;
 }
-.ownMessageLeft .avatar { 
-    margin-right: 0px;
-    margin-left: 5px;
+.ownMessageLeft .avatar {
+  margin-right: 0px;
+  margin-left: 5px;
 }
-.ownMessageLeft .sending-status{
+.ownMessageLeft .sending-status {
   margin-left: auto !important;
   margin-right: 4px !important;
 }
 
-
-
 .message {
   margin: 10px;
   display: flex;
@@ -259,7 +295,7 @@ export default {
   transition: 0.1s;
   cursor: default;
 }
-.username:hover{
+.username:hover {
   color: rgb(199, 199, 199);
   text-decoration: underline;
 }
diff --git a/src/components/app/Tabs/News.vue b/src/components/app/Tabs/News.vue
index a778257..70fd19b 100644
--- a/src/components/app/Tabs/News.vue
+++ b/src/components/app/Tabs/News.vue
@@ -13,24 +13,24 @@
             <strong>What's new?</strong>
             <br>
             <ul>
-              <li v-for="(wnew, index) in change.new" :key="index">{{wnew}}</li>
+              <li v-for="(wnew, index) in change.new" :key="index" v-html="wnew"></li>
             </ul>
           </div>
           <div v-if="change.fix">
             <strong>Issues fixed</strong>
             <br>
             <ul>
-              <li v-for="(wfix, index) in change.fix" :key="index">{{wfix}}</li>
+              <li v-for="(wfix, index) in change.fix" :key="index" v-html="wfix"></li>
             </ul>
           </div>
           <div v-if="change.next">
             <strong>Up next</strong>
             <br>
             <ul>
-              <li v-for="(wnext, index) in change.next" :key="index">{{wnext}}</li>
+              <li v-for="(wnext, index) in change.next" :key="index" v-html="wnext"></li>
             </ul>
           </div>
-          <div v-if="change.msg">{{change.msg}}</div>
+          <div v-if="change.msg" v-html="change.msg"></div>
         </div>
       </div>
     </div>
diff --git a/src/components/app/Tabs/Servers.vue b/src/components/app/Tabs/Servers.vue
index 6414bcd..e7db167 100644
--- a/src/components/app/Tabs/Servers.vue
+++ b/src/components/app/Tabs/Servers.vue
@@ -1,14 +1,20 @@
 <template>
   <div class="direct-message-tab">
-    <transition name="slidein">
+    <transition name="slide-left">
       <server-list
         class="left-panel"
         v-click-outside="hideLeftPanel"
-        v-show="$mq === 'mobile' && showLeftPanel || $mq === 'desktop'"
+        v-show="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')"
       />
     </transition>
     <message-panel/>
-    <members-list/>
+    <transition name="slide-right">
+      <members-list
+        class="members-panel"
+        v-click-outside="hideMembersPanel"
+        v-show="($mq === 'members_panel' || $mq === 'mobile') && showMembersPanel || ($mq === 'desktop')"
+      />
+    </transition>
   </div>
 </template>
 
@@ -27,7 +33,8 @@ export default {
   },
   data() {
     return {
-      showLeftPanel: false
+      showLeftPanel: false,
+      showMembersPanel: false
     };
   },
   methods: {
@@ -37,12 +44,22 @@ export default {
           this.showLeftPanel = false;
         }
       }
+    },
+    hideMembersPanel(event) {
+      if (this.showMembersPanel) {
+        if (event.target.closest(".show-members-button") == null) {
+          this.showMembersPanel = false;
+        }
+      }
     }
   },
   mounted() {
     bus.$on("toggleLeftMenu", () => {
       this.showLeftPanel = !this.showLeftPanel;
     });
+    bus.$on("toggleMembersPanel", () => {
+      this.showMembersPanel = !this.showMembersPanel;
+    });
     bus.$on("closeLeftMenu", () => {
       this.showLeftPanel = false;
     });
@@ -51,13 +68,31 @@ export default {
 </script>
 
 <style scoped>
-.slidein-enter-active,
-.slidein-leave-active {
+.slide-left-enter-active,
+.slide-left-leave-active {
   transition: 0.5s;
 }
-.slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ {
+.slide-left-enter, .slide-left-leave-to /* .fade-leave-active below version 2.1.8 */ {
   margin-left: -300px;
 }
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: 0.5s;
+}
+.slide-right-enter, .slide-right-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  margin-right: -300px;
+}
+
+
+@media (max-width: 949px) {
+  .members-panel {
+    position: absolute;
+    background-color: rgba(39, 39, 39, 0.97);
+    right: 0;
+  }
+}
+
 @media (max-width: 600px) {
   .left-panel {
     position: absolute;
diff --git a/src/router.js b/src/router.js
index 95b1231..926094c 100644
--- a/src/router.js
+++ b/src/router.js
@@ -17,6 +17,7 @@ const MainApp = () => import(/* webpackChunkName: "MainApp" */ "../src/views/App
 const HomePage = () => import(/* webpackChunkName: "HomePage" */ "../src/views/HomePage.vue");
 const GDriveCallback = () => import(/* webpackChunkName: "GDriveCallback" */ "../src/views/GDriveCallback.vue");
 const LoginPage = () => import(/* webpackChunkName: "LoginPage" */ "../src/views/LoginPage.vue");
+const InvitesPage = () => import(/* webpackChunkName: "Invites" */ "../src/views/Invites.vue");
 const RegisterPage = () => import(/* webpackChunkName: "RegisterPage" */ "../src/views/RegisterPage.vue");
 
 export const router = new VueRouter({
@@ -69,10 +70,11 @@ export const router = new VueRouter({
             }
           }),
           { store }
-        );
-        Vue.use(VueMq, {
-          breakpoints: {
+          );
+          Vue.use(VueMq, {
+            breakpoints: {
             mobile: 600,
+            members_panel: 950,
             desktop: Infinity
           }
         });
@@ -83,6 +85,11 @@ export const router = new VueRouter({
       path: "/GDrive_callback",
       name: "GDrive callback",
       component: GDriveCallback
-    }
+    },
+    {
+      path: "/invites/:invite_id",
+      name: "invites",
+      component: InvitesPage,
+    },
   ]
 });
diff --git a/src/utils/changelog.js b/src/utils/changelog.js
index 7da685b..293e91d 100644
--- a/src/utils/changelog.js
+++ b/src/utils/changelog.js
@@ -1,9 +1,9 @@
 
  const prototype =  {
-    version: 3,
-    title: "Make your own servers!",
-    shortTitle: "Servers",
-    date: "24/04/2019",
+    version: 4,
+    title: "",
+    shortTitle: "",
+    date: "23/05/2019",
     headColor: "rgba(155, 244, 66, 0.77)",
     new: [
       "",
@@ -13,6 +13,27 @@
   }
 
 const config = [
+  {
+    version: 4,
+    title: "Make your own servers! (Alpha)",
+    shortTitle: "Servers (Alpha)",
+    date: "23/05/2019",
+    headColor: "rgb(0, 102, 170, 0.77)",
+    new: [
+      "You can now make servers! Note that this is in alpha stage which means that it's not complete and there could be a ton of bugs everywhere :c get reporting!",
+      "Adjusted padding in some areas.",
+    ],
+    next: ["Members list for servers"],
+    msg:
+    `
+<div style='color: red;'>
+  Please note that this update could be unstable and could involve of resetting the database.
+</div>Join the official Nertivia server by clicking
+
+<a style="
+color: #27a3ff;
+" href='https://nertivia.supertiger.tk/invites/8SSrCF'>here</a>`
+  },
   {
     version: 3,
     title: "Page Re-designs",
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index d93ed15..e6a3cea 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -76,7 +76,7 @@ export default {
       this.showPopout = false;
     },
     logOut() {
-      localStorage.removeItem("hauthid");
+      this.$store.dispatch("logout");
       this.loggedIn = null;
     },
     loginPage() {
diff --git a/src/views/Invites.vue b/src/views/Invites.vue
new file mode 100644
index 0000000..84e2723
--- /dev/null
+++ b/src/views/Invites.vue
@@ -0,0 +1,257 @@
+<template>
+  <div id="app">
+    <div class="app-content">
+      <header-login v-on:isDay="isDayEvent"/>
+      <div class="content">
+        <transition appear name="fade-up">
+          <div :class="{box: true, red: server === undefined}" >
+            <spinner v-if="server === null"/>
+            <div v-if="server === undefined">
+              <div class="invalid">{{errorMsg}}</div>
+            </div>
+            <div class="server" v-if="server">
+              <profile-picture class="avatar" size="100px" :url="tempImage"/>
+              <div class="server-name">{{server.name}}</div>
+              <div class="buttons">
+                <div class="button join-button" @click="joinServerButton" v-if="loggedIn">Join {{server.name}}</div>
+                <div class="button join-button" v-else @click="loginButton">Login to join</div>
+              </div>
+            </div>
+          </div>
+        </transition>
+      </div>
+    </div>
+    <div class="background">
+      <div :class="{background: true, 'night-background': true, chosen: !isDay}">
+        <particlesJS class="particles"/>
+      </div>
+      <div class="background day-background"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import config from "@/config";
+import particlesJS from "@/components/ParticlesJS.vue";
+import HeaderLogin from "@/components/HeaderLoginTemplate.vue";
+import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
+import Spinner from "@/components/Spinner.vue";
+import ServerService from "@/services/ServerService";
+export default {
+  components: { HeaderLogin, particlesJS, Spinner, ProfilePicture},
+  data() {
+    return {
+      isDay: true,
+      server: null,
+      tempImage: config.domain + "/avatars/noob",
+      loggedIn: localStorage.getItem('hauthid'),
+      errorMsg: ""
+    };
+  },
+  methods: {
+    isDayEvent(data) {
+      this.isDay = data;
+    },
+    async joinServerButton(event) {
+      if (event.target.classList.contains("button-clicked")) return;
+      event.target.classList.add("button-clicked");
+      const inviteID = this.$route.params.invite_id;
+      if (!localStorage.getItem("hauthid")) {
+        return this.loggedIn = undefined; 
+      }
+      const { ok, error, result } = await ServerService.joinServer(inviteID)
+      if (ok) {
+        this.$router.push(`/app`);
+      } else {
+        event.target.classList.remove("button-clicked");
+        //409 404
+        if (error.response === undefined) {
+          this.errorMsg = "Cannot connect to server. Try again later.";
+        } else {
+          const status = error.response.status;
+          if (status === 409){
+            return this.$router.push(`/app`);
+          }
+          if (status === 404){
+            return this.errorMsg = "Invite does not exist.";
+          }
+          this.errorMsg = "Something went wrong. Try again later.";
+        }
+        this.server = undefined;
+      }
+    },
+    loginButton() {
+      const inviteID = this.$route.params.invite_id;
+      this.$router.push(`/login?to=invites&id=${inviteID}`);
+    }
+  },
+  async mounted() {
+    const inviteID = this.$route.params.invite_id;
+    const { ok, error, result } = await ServerService.getInviteDetail(inviteID);
+    if (ok) {
+      this.server = result.data;
+    } else {
+      if (error.response === undefined) {
+        this.errorMsg = "Cannot connect to server. Try again later.";
+      } else {
+        this.errorMsg = "The invite code is either invalid, expired or blocked.";
+      }
+      this.server = undefined;
+    }
+  }
+};
+</script>
+
+<style>
+html,
+body {
+  height: 100%;
+}
+</style>
+
+<style scoped>
+.fade-up-enter-active {
+  opacity: 0;
+  animation: bounce-in 0.5s;
+  animation-delay: 0.7s;
+}
+.fade-up-leave-active {
+  animation: bounce-in 0.5s reverse;
+}
+
+@keyframes bounce-in {
+  0% {
+    transform: translateX(30px);
+    opacity: 0;
+  }
+  50% {
+    transform: translateX(-10px);
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+#app {
+  display: flex;
+  flex-direction: column;
+  transition: background 10s;
+  color: white;
+  height: 100%;
+}
+.app-content {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  z-index: 9999;
+  padding-bottom: 100px;
+}
+.background {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  transition: background 10s;
+}
+
+.night-background {
+  opacity: 0;
+  transition: 10s;
+  background: linear-gradient(to bottom, #000000 0%, #606060 100%) !important;
+}
+.day-background {
+  opacity: 1;
+  background: linear-gradient(to bottom, #165dc0 0%, #5482bf 100%);
+  z-index: -1;
+}
+
+.night-background.chosen {
+  opacity: 1 !important;
+}
+
+.night-background .particles {
+  opacity: 1;
+}
+
+.content {
+  display: flex;
+  height: 100%;
+  margin: 10px;
+  flex-shrink: 0;
+}
+.box {
+  width: 100%;
+  max-width: 400px;
+  background: rgba(44, 44, 44, 0.774);
+  transition: 0.3s;
+  margin: auto;
+  margin-top: 20px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  padding-bottom: 20px;
+}
+.server {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+
+  height: 300px;
+}
+.invalid{
+  margin-top: 15px;
+}
+.red{
+  background: rgba(117, 10, 10, 0.774)
+}
+.avatar {
+  align-self: center;
+  margin-bottom: 10px;
+}
+
+.server-name {
+  text-align: center;
+  font-size: 25px;
+  margin-bottom: 40px;
+}
+
+.button {
+  padding: 10px;
+  background: rgba(25, 151, 255, 0.699);
+  border-radius: 5px;
+  user-select: none;
+  border: none;
+  color: white;
+  font-size: 17px;
+  outline: none;
+  transition: 0.2s;
+  box-shadow: 3px 3px rgba(23, 112, 255, 0.479);
+  align-self: center;
+  flex-shrink: 0;
+  text-align: center;
+
+}
+.button:hover {
+  background: rgb(25, 151, 255);
+}
+.button:focus {
+  background: rgb(25, 151, 255);
+}
+.button:active {
+  background: rgb(25, 151, 255);
+  transform: translate(3px, 3px);
+  box-shadow: 0px 0px rgba(0, 97, 207, 0.479);
+}
+
+.button-clicked {
+  background: rgb(126, 126, 126) !important;
+  transform: translate(3px, 3px) !important;
+  box-shadow: 0px 0px rgba(61, 61, 61, 0.479) !important;
+}
+</style>
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index 92b63c5..fe40231 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -117,6 +117,10 @@ export default {
         this.visible = false;
         this.$store.dispatch("token", result.data.token);
         setTimeout(_ => {
+          const {to, id} = this.$route.query;
+          if (to) {
+            return window.location.href = `/${to}/${id}`
+          }
           window.location.href = "/app";
         }, 1000);
       } else {