diff --git a/src/components/app/TypingStatus.vue b/src/components/app/TypingStatus.vue
index 5db49f2..95d638a 100644
--- a/src/components/app/TypingStatus.vue
+++ b/src/components/app/TypingStatus.vue
@@ -34,14 +34,12 @@ export default {
           return `<strong>${this.escapeHtml(
             arr[0].username
           )}</strong> is typing...`;
-          break;
         case arr.length == 2:
           return `<strong>${this.escapeHtml(
             arr[0].username
           )}</strong> and <strong>${this.escapeHtml(
             arr[1].username
           )}</strong> are typing...`;
-          break;
         case arr.length == 3:
           return `<strong>${this.escapeHtml(
             arr[0].username
@@ -50,10 +48,8 @@ export default {
           )}</strong> and <strong>${this.escapeHtml(
             arr[2].username
           )}</strong> are typing...`;
-          break;
         case arr.length > 3:
           return `<strong>${arr.length}</strong> people are typing...`;
-          break;
         default:
           break;
       }
diff --git a/src/store/modules/channelModule.js b/src/store/modules/channelModule.js
index a9e47af..880a35f 100644
--- a/src/store/modules/channelModule.js
+++ b/src/store/modules/channelModule.js
@@ -4,6 +4,8 @@ import Vue from "vue";
 
 const state = {
   selectedChannelID: null,
+  DMChannelID: null,
+  serverChannelID: null,
   channelName: null,
   channels: {}
 };
@@ -30,6 +32,12 @@ const actions = {
   setChannelName(context, name) {
     context.commit("setChannelName", name);
   },
+  setDMChannelID(context, channelID) {
+    context.commit("setDMChannelID", channelID);
+  },
+  setServerChannelID(context, channelID) {
+    context.commit("setServerChannelID", channelID);
+  },
   updateChannelLastMessage(context, channelID) {
     context.commit("updateChannelLastMessage", channelID);
   }
@@ -48,6 +56,12 @@ const mutations = {
   selectedChannelID(state, channelID) {
     state.selectedChannelID = channelID;
   },
+  setDMChannelID(state, channelID) {
+    state.DMChannelID = channelID;
+  },
+  setServerChannelID(state, channelID) {
+    state.serverChannelID = channelID;
+  },
   setChannelName(state, name) {
     state.channelName = name;
   }
diff --git a/src/store/modules/messageModule.js b/src/store/modules/messageModule.js
index c00548c..385a737 100644
--- a/src/store/modules/messageModule.js
+++ b/src/store/modules/messageModule.js
@@ -15,16 +15,21 @@ const getters = {
 };
 
 const actions = {
+  // server channel
   async openChannel(context, channel) {
     context.commit("setChannelName", channel.name);
     const messages = context.state.messages[channel.channelID];
-    if (messages) return context.commit("selectedChannelID", channel.channelID);
+    if (messages) {
+      context.commit("selectedChannelID", channel.channelID);
+      context.commit("setServerChannelID", channel.channelID);
+      return;
+    }
     context.commit("selectedChannelID", "loading")
-    getMessages(context, channel.channelID);
+    getMessages(context, channel.channelID, true);
 
   },
+  //dm channel
   async openChat(context, { uniqueID, channelID, channelName }) {
-
     if (channelName) context.commit("setChannelName", channelName);
 
     const channels = context.rootState.channelModule.channels;
@@ -35,6 +40,7 @@ const actions = {
     const channel = channels[channelID];
     
     if (channelID) {
+      context.commit("setDMChannelID", channelID);
       context.commit("selectedChannelID", channelID); 
     } else {
       context.commit("selectedChannelID", "Loading");
@@ -47,7 +53,7 @@ const actions = {
     const { ok, error, result } = await channelService.post(uniqueID);
     if (ok) {
       context.commit("channel", result.data.channel);
-      getMessages(context, result.data.channel.channelID);
+      getMessages(context, result.data.channel.channelID, false);
     } else {
       // TODO handle this
       console.log(error);
@@ -74,10 +80,15 @@ const actions = {
   }
 };
 
-async function getMessages(context, channelID) {
+async function getMessages(context, channelID, isServerChannel) {
   const { ok, error, result } = await messagesService.get(channelID);
   if (ok) {
     context.commit("selectedChannelID", channelID);
+    if (isServerChannel) {
+      context.commit("setServerChannelID", channelID);
+    } else {
+      context.commit("setDMChannelID", channelID);
+    }
     context.commit("messages", {
       channelID: result.data.channelID,
       messages: result.data.messages.reverse()
diff --git a/src/views/App.vue b/src/views/App.vue
index 78681a9..09fc1b4 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -89,10 +89,29 @@ export default {
     };
   },
   methods: {
+    switchChannel(isServer) {
+      const serverChannelID = this.$store.state.channelModule.serverChannelID;
+      const DMChannelID = this.$store.state.channelModule.DMChannelID;
+
+      if (isServer) {
+        this.$store.dispatch('selectedChannelID', serverChannelID)
+        const channel = this.$store.state.channelModule.channels[serverChannelID];
+        this.$store.dispatch("setChannelName", channel ? channel.name : "")
+      } else {
+        const channel = this.$store.state.channelModule.channels[DMChannelID];
+        this.$store.dispatch("setChannelName", channel ? channel.recipients[0].username : "");
+        this.$store.dispatch('selectedChannelID', DMChannelID)
+      }
+    },
     switchTab(index) {
       localStorage.setItem("currentTab", index);
       this.currentTab = index;
-    }
+      if (index == 1) { //1: direct message tab.
+        this.switchChannel(false)
+      } else if (index === 2) { //2: server tab
+        this.switchChannel(true)
+      }
+    },
   },
   mounted() {
     // check if changelog is updated