diff --git a/src/components/app/MemberTemplate.vue b/src/components/app/MemberTemplate.vue
index 7c768ce..82c0d55 100644
--- a/src/components/app/MemberTemplate.vue
+++ b/src/components/app/MemberTemplate.vue
@@ -51,7 +51,7 @@ export default {
     },
     roleColor() {
       if (!this.member || !this.member.roles) return undefined;
-      const roles = this.$store.getters["servers/roles"][this.serverID];
+      const roles = this.$store.getters["servers/selectedServerRoles"];
       if (!roles) return undefined;
 
       const filter = roles.filter(r => this.member.roles.includes(r.id));
diff --git a/src/components/app/MembersList.vue b/src/components/app/MembersList.vue
index 762dd1f..9af9a1d 100644
--- a/src/components/app/MembersList.vue
+++ b/src/components/app/MembersList.vue
@@ -101,7 +101,7 @@ export default {
       return roleMembers;
     },
     noneRoleOnlineMembers() {
-      const roles = this.$store.getters["servers/roles"][this.selectedServerID];
+      const roles = this.$store.getters["servers/selectedServerRoles"];
       return this.onlineMembers.filter(sm => {
         if (!sm.roles || !sm.roles.length) {
           return sm;
@@ -113,7 +113,7 @@ export default {
       });
     },
     serverRoles() {
-      const roles = this.$store.getters["servers/roles"][this.selectedServerID];
+      const roles = this.$store.getters["servers/selectedServerRoles"];
       let newRolesWithMembers = [];
 
       if (!roles) return undefined;
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index ef62857..8d9403d 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -313,9 +313,7 @@ export default {
       };
     },
     roles() {
-      return this.$store.getters["servers/roles"][
-        this.$store.getters["servers/selectedServerID"]
-      ];
+      return this.$store.getters["servers/selectedServerRoles"];
     },
     serverMember() {
       const serverMembers = this.$store.getters["servers/serverMembers"];
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageRoles.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageRoles.vue
index 957c8aa..0f07bb4 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageRoles.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageRoles.vue
@@ -11,15 +11,25 @@
           <div class="material-icons">add</div>
           <div>Add Role</div>
         </div>
-        <div
-          class="role"
-          v-for="(role, index) in roles"
-          :key="role.id"
-          :class="{ selected: index === selectedRoleIndex }"
-          @click="roleClick($event, index)"
+        <draggable
+          v-model="roles"
+          :animation="200"
+          :delay="mobile ? 400 : 0"
+          ghost-class="ghost"
+          @end="onEnd"
         >
-          <div class="name" :style="{ color: role.color }">{{ role.name }}</div>
-        </div>
+          <div
+            class="role"
+            v-for="(role, index) in roles"
+            :key="role.id"
+            :class="{ selected: index === selectedRoleIndex }"
+            @click="roleClick($event, index)"
+          >
+            <div class="name" :style="{ color: role.color }">
+              {{ role.name }}
+            </div>
+          </div>
+        </draggable>
       </div>
       <div class="details" v-if="roles && roles[selectedRoleIndex]">
         <div class="input role-input">
@@ -86,20 +96,30 @@
 <script>
 import ServerService from "@/services/ServerService";
 import ErrorsListTemplate from "@/components/app/errorsListTemplate";
+import { isMobile } from "@/utils/Mobile";
+import draggable from "vuedraggable";
+
 export default {
-  components: { ErrorsListTemplate },
+  components: { ErrorsListTemplate, draggable },
   data() {
     return {
       deleteButtonConfirmed: false,
       deleteClicked: false,
       selectedRoleIndex: 0,
       errors: null,
+      mobile: isMobile(),
       update: {
         name: null
       }
     };
   },
   methods: {
+    async onEnd(test) {
+      const newIndex = test.newIndex;
+      const role = this.roles[newIndex];
+      const sendObj = { roleID: role.id, order: newIndex };
+      await ServerService.updateRolesPosition(this.server.server_id, sendObj);
+    },
     async addRole() {
       await ServerService.createRole(this.server.server_id, {});
     },
@@ -172,8 +192,23 @@ export default {
       const serverID = this.$store.state.popoutsModule.serverSettings.serverID;
       return this.$store.getters["servers/servers"][serverID];
     },
-    roles() {
-      return this.$store.getters["servers/roles"][this.server.server_id];
+    roles: {
+      get() {
+        const roles = this.$store.getters["servers/roles"][
+          this.server.server_id
+        ];
+        return [...roles].sort((a, b) => {
+          return a.order - b.order;
+        });
+      },
+      set(value) {
+        this.$store.dispatch(
+          "servers/setServerRoles",
+          value.map((v, i) => {
+            return { ...v, ...{ order: i } };
+          })
+        );
+      }
     },
     channels() {
       const serverID = this.$store.state.popoutsModule.serverSettings.serverID;
@@ -199,6 +234,18 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.sortable-drag {
+  opacity: 0;
+}
+.ghost::before {
+  content: "";
+  position: absolute;
+  background: white;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 3px;
+}
 .server-avatar {
   background: grey;
   height: 90px;
@@ -218,10 +265,11 @@ export default {
   overflow: auto;
 }
 .role {
+  position: relative;
   padding: 5px;
   user-select: none;
   cursor: pointer;
-  transition: 0.3s;
+  transition: background 0.3s;
   display: flex;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/src/services/ServerService.js b/src/services/ServerService.js
index e0ccd08..849bf52 100644
--- a/src/services/ServerService.js
+++ b/src/services/ServerService.js
@@ -84,6 +84,9 @@ export default {
       instance().patch(`/servers/${serverID}/roles/${roleID}`, data)
     );
   },
+  updateRolesPosition(serverID, data) {
+    return wrapper(instance().patch(`/servers/${serverID}/roles`, data));
+  },
   applyRoleToMember(serverID, roleID, memberID) {
     return wrapper(
       instance().patch(
diff --git a/src/store/modules/serversModule.js b/src/store/modules/serversModule.js
index 2c86377..98048a3 100644
--- a/src/store/modules/serversModule.js
+++ b/src/store/modules/serversModule.js
@@ -23,6 +23,13 @@ const getters = {
   },
   selectedServerID(state) {
     return state.selectedServerID;
+  },
+  selectedServerRoles() {
+    const serverRoles = state.roles[state.selectedServerID];
+    if (!serverRoles) return [];
+    return serverRoles.sort((a, b) => {
+      return a.order - b.order;
+    });
   }
 };
 
@@ -62,6 +69,12 @@ const actions = {
       server_id: role.server_id
     });
   },
+  setServerRoles({ commit }, rolesArr) {
+    commit("UPDATE_SERVER_ROLES", {
+      roles: rolesArr,
+      server_id: rolesArr[0].server_id
+    });
+  },
   deleteRole({ commit, state }, { server_id, role_id }) {
     const serverRoles = [...state.roles[server_id]].filter(
       r => r.id !== role_id
diff --git a/src/store/modules/socketIOModule.js b/src/store/modules/socketIOModule.js
index f3a663e..e4c636d 100644
--- a/src/store/modules/socketIOModule.js
+++ b/src/store/modules/socketIOModule.js
@@ -498,6 +498,10 @@ const actions = {
   ["socket_serverMember:removeRole"](context, { role_id, uniqueID, server_id }) {
     // eslint-disable-next-line prettier/prettier
     context.dispatch("servers/removeMemberRole", { role_id, uniqueID, server_id });
+  },
+  ["socket_server:updateRoles"](context, { roles }) {
+    // eslint-disable-next-line prettier/prettier
+    context.dispatch("servers/setServerRoles", roles);
   }
 };