diff --git a/dist/index.js b/dist/index.js
index 993c8c41..8e2eb5a0 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -333,6 +333,29 @@
       }
     };
   };
+  var IndexManager = class {
+    itemToString;
+    sortedStrings = [];
+    // methods
+    update = (items) => {
+      this.sortedStrings = [];
+      let strings = [];
+      for (const item of items) {
+        const string = this.itemToString(item);
+        strings.push(string);
+      }
+      this.sortedStrings = strings.sort(localeCompare);
+    };
+    getIndex = (item) => {
+      const string = this.itemToString(item);
+      const index = this.sortedStrings.indexOf(string);
+      return index;
+    };
+    // init
+    constructor(itemToString) {
+      this.itemToString = itemToString;
+    }
+  };
   function stringify(data) {
     return JSON.stringify(data, null, 4);
   }
@@ -1330,6 +1353,7 @@
         this.primaryChannelInput.value
       );
       this.primaryChannel.value = this.chatViewModel.chatModel.info.primaryChannel;
+      this.chatViewModel.chatListViewModel.updateIndices();
     };
     addSecondaryChannel = () => {
       this.secondaryChannels.add(this.newSecondaryChannelInput.value);
@@ -1549,6 +1573,10 @@
     resetColor = () => {
       this.displayedColor.value = this.settingsPageViewModel.color.value;
     };
+    updateIndex = () => {
+      const index = this.chatListViewModel.indexManager.getIndex(this);
+      this.index.value = index;
+    };
     // load
     loadPageSelection = () => {
       const path = StorageModel.getPath(
@@ -1594,6 +1622,9 @@
     // state
     newChatPrimaryChannel = new State("");
     chatViewModels = new ListState();
+    indexManager = new IndexManager(
+      (chatViewModel) => chatViewModel.settingsPageViewModel.primaryChannel.value
+    );
     selectedChat = new State(void 0);
     // guards
     cannotCreateChat = createProxyState(
@@ -1607,6 +1638,10 @@
       );
       this.newChatPrimaryChannel.value = "";
       const chatViewModel = this.createChatViewModel(chatModel);
+      this.trackChat(chatViewModel);
+      this.updateIndices();
+    };
+    trackChat = (chatViewModel) => {
       this.chatViewModels.add(chatViewModel);
     };
     untrackChat = (chatViewModel) => {
@@ -1621,6 +1656,12 @@
         this
       );
     };
+    updateIndices = () => {
+      this.indexManager.update([...this.chatViewModels.value.values()]);
+      for (const chatViewModel of this.chatViewModels.value) {
+        chatViewModel.updateIndex();
+      }
+    };
     // view
     openChat = (chatViewModel) => {
       this.selectedChat.value = chatViewModel;
@@ -1633,8 +1674,9 @@
       this.chatViewModels.clear();
       for (const chatModel of this.chatListModel.chatModels.values()) {
         const chatViewModel = this.createChatViewModel(chatModel);
-        this.chatViewModels.add(chatViewModel);
+        this.trackChat(chatViewModel);
       }
+      this.updateIndices();
     };
     // init
     constructor(chatListModel2, storageModel2, settingsViewModel2) {
diff --git a/src/Model/Utility/utility.ts b/src/Model/Utility/utility.ts
index 37ff00c0..5bc72d88 100644
--- a/src/Model/Utility/utility.ts
+++ b/src/Model/Utility/utility.ts
@@ -28,6 +28,37 @@ export class HandlerManager<T> {
   };
 }
 
+// sorting
+export class IndexManager<T> {
+  private itemToString: (item: T) => string;
+
+  sortedStrings: string[] = [];
+
+  // methods
+  update = (items: T[]): void => {
+    this.sortedStrings = [];
+
+    let strings: string[] = [];
+    for (const item of items) {
+      const string: string = this.itemToString(item);
+      strings.push(string);
+    }
+
+    this.sortedStrings = strings.sort(localeCompare);
+  };
+
+  getIndex = (item: T): number => {
+    const string: string = this.itemToString(item);
+    const index: number = this.sortedStrings.indexOf(string);
+    return index;
+  };
+
+  // init
+  constructor(itemToString: (item: T) => string) {
+    this.itemToString = itemToString;
+  }
+}
+
 // string
 export function stringify(data: any): string {
   return JSON.stringify(data, null, 4);
diff --git a/src/ViewModel/Chat/chatListViewModel.ts b/src/ViewModel/Chat/chatListViewModel.ts
index b4f5e84e..de84e7ef 100644
--- a/src/ViewModel/Chat/chatListViewModel.ts
+++ b/src/ViewModel/Chat/chatListViewModel.ts
@@ -3,6 +3,7 @@ import * as React from "bloatless-react";
 import ChatListModel from "../../Model/Chat/chatListModel";
 import ChatModel from "../../Model/Chat/chatModel";
 import ChatViewModel from "./chatViewModel";
+import { IndexManager } from "../../Model/Utility/utility";
 import SettingsViewModel from "../Global/settingsViewModel";
 import StorageModel from "../../Model/Global/storageModel";
 
@@ -14,6 +15,10 @@ export default class ChatListViewModel {
   // state
   newChatPrimaryChannel: React.State<string> = new React.State("");
   chatViewModels: React.ListState<ChatViewModel> = new React.ListState();
+  indexManager: IndexManager<ChatViewModel> = new IndexManager(
+    (chatViewModel: ChatViewModel) =>
+      chatViewModel.settingsPageViewModel.primaryChannel.value
+  );
 
   selectedChat: React.State<ChatViewModel | undefined> = new React.State<
     ChatViewModel | undefined
@@ -33,6 +38,11 @@ export default class ChatListViewModel {
     this.newChatPrimaryChannel.value = "";
 
     const chatViewModel: ChatViewModel = this.createChatViewModel(chatModel);
+    this.trackChat(chatViewModel);
+    this.updateIndices();
+  };
+
+  trackChat = (chatViewModel: ChatViewModel): void => {
     this.chatViewModels.add(chatViewModel);
   };
 
@@ -50,6 +60,13 @@ export default class ChatListViewModel {
     );
   };
 
+  updateIndices = (): void => {
+    this.indexManager.update([...this.chatViewModels.value.values()]);
+    for (const chatViewModel of this.chatViewModels.value) {
+      chatViewModel.updateIndex();
+    }
+  };
+
   // view
   openChat = (chatViewModel: ChatViewModel): void => {
     this.selectedChat.value = chatViewModel;
@@ -64,8 +81,9 @@ export default class ChatListViewModel {
     this.chatViewModels.clear();
     for (const chatModel of this.chatListModel.chatModels.values()) {
       const chatViewModel = this.createChatViewModel(chatModel);
-      this.chatViewModels.add(chatViewModel);
+      this.trackChat(chatViewModel);
     }
+    this.updateIndices();
   };
 
   // init
diff --git a/src/ViewModel/Chat/chatViewModel.ts b/src/ViewModel/Chat/chatViewModel.ts
index 34fc8fca..941e94ec 100644
--- a/src/ViewModel/Chat/chatViewModel.ts
+++ b/src/ViewModel/Chat/chatViewModel.ts
@@ -54,6 +54,11 @@ export default class ChatViewModel {
     this.displayedColor.value = this.settingsPageViewModel.color.value;
   };
 
+  updateIndex = (): void => {
+    const index: number = this.chatListViewModel.indexManager.getIndex(this);
+    this.index.value = index;
+  };
+
   // load
   loadPageSelection = (): void => {
     const path: string[] = StorageModel.getPath(
diff --git a/src/ViewModel/Pages/settingsPageViewModel.ts b/src/ViewModel/Pages/settingsPageViewModel.ts
index 93c50d20..d3082be2 100644
--- a/src/ViewModel/Pages/settingsPageViewModel.ts
+++ b/src/ViewModel/Pages/settingsPageViewModel.ts
@@ -42,6 +42,8 @@ export default class SettingsPageViewModel {
     );
     this.primaryChannel.value =
       this.chatViewModel.chatModel.info.primaryChannel;
+
+    this.chatViewModel.chatListViewModel.updateIndices();
   };
 
   addSecondaryChannel = (): void => {