diff --git a/package.json b/package.json
index 0bce809..819e70a 100644
--- a/package.json
+++ b/package.json
@@ -45,11 +45,14 @@
     "@codemirror/lang-python": "^6.1.5",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@highlightjs/vue-plugin": "^2.1.0",
+    "chartjs": "^0.3.24",
     "codemirror": "^6.0.1",
     "electron-store": "^8.2.0",
     "highlight.js": "^11.9.0",
     "highlightjs": "^9.16.2",
+    "three": "^0.163.0",
     "vue-codemirror": "^6.1.1",
+    "vue-draggable": "^2.0.6",
     "vue-draggable-resizable": "^3.0.0",
     "vue-resizable": "^2.1.7",
     "vue-select": "^4.0.0-beta.6",
diff --git a/public/mrpodium.fbx b/public/mrpodium.fbx
new file mode 100644
index 0000000..3ff14ab
Binary files /dev/null and b/public/mrpodium.fbx differ
diff --git a/src/App.vue b/src/App.vue
index e9a79e2..7fe3c98 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,13 @@
 <template>
   <div class="container__app">
-    <div class="bg-primary-alt flex width-100 pt-3 pb-3 container__top-bar">
-      <div class="flex justify-center items-center pl-3">
-        <img src="/podium.svg" alt="Podium Logo" class="logo"/>
-        <div class="font-bold pl-2">
-          Podium
-        </div>
-      </div>
-      <div class="absolute flex justify-center items-center w-full top-0 pt-2">
-        <div class="heading__active-config">
-          Active Configuration
-        </div>
-        <div class="ml-3 container__configuration-select">
-        <VueSelect :options="['translation-chatbox-app','default']" class="item__configuration-select"></VueSelect>
-        </div>
-      </div>
-    </div>
+    <AppTopbar/>
     <div class="flex flex-1">
       <div class="flex-1">
         <LeftSidebar/>
       </div>
-      <CenterPanel/>
+      <div class="container__middle">
+      <PrimaryCenterView/>
+      </div>
       <div class="container__right-sidebar">
         <MessagesView :messages="messages"/>
         <UsersView :users="users"/>
@@ -32,16 +19,16 @@
 <script>
 
 
-import MessagesView from "./MessagesView.vue";
-import VueSelect from 'vue-select';
-import LeftSidebar from "./LeftSidebar.vue";
-import CenterPanel from "./CenterPanel.vue";
-import UsersView from "./UsersView.vue";
+import MessagesView from "./components/MessagesView.vue";
+import LeftSidebar from "./components/LeftSidebar.vue";
+import CenterPanel from "./components/PrimaryCenterView.vue";
+import UsersView from "./components/UsersView.vue";
 import {mapState} from "vuex";
+import AppTopbar from "./components/AppTopbar.vue";
 
 export default {
   name: 'App',
-  components: {UsersView, CenterPanel, LeftSidebar, MessagesView, VueSelect},
+  components: {CenterPanel, AppTopbar, UsersView, PrimaryCenterView, LeftSidebar, MessagesView},
   async mounted() {
     window.addEventListener('resize', this.handleResize);
     await this.$store.dispatch('getMessages');
@@ -88,26 +75,6 @@ select:hover {
   border-color: var(--primary-dark)
 }
 
-.container__configuration-select {
-  width: 400px;
-  max-width: 33vw;
-}
-
-.item__configuration-select {
-  font-size: 0.9rem;
-}
-
-.container__top-bar {
-  position: relative;
-  width: 100%;
-  z-index: 1000;
-}
-
-.heading__active-config {
-  font-size: 0.95em;
-  font-weight: 500;
-}
-
 .container__app {
   display: flex;
   flex-direction: column;
diff --git a/src/RegexColorInput.vue b/src/RegexColorInput.vue
deleted file mode 100644
index e9dae9e..0000000
--- a/src/RegexColorInput.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup>
-import {ref, watch} from 'vue';
-
-
-const inputText = ref('');
-const highlightedText = ref('');
-
-const highlightSyntax = () => {
-  // Regex pattern to identify capture groups
-  const captureGroupPattern = /\((?!\?)/g;
-
-  // Check if input text matches regex syntax
-  const isValid = validateRegexSyntax(inputText.value);
-
-  // Highlight syntax
-  if (isValid) {
-    const highlighted = inputText.value.replace(captureGroupPattern, '<span style="color: blue;">$&</span>');
-    highlightedText.value = highlighted;
-  } else {
-    // Highlight invalid syntax in red
-    highlightedText.value = `<span style="color: red;">${inputText.value}</span>`;
-  }
-};
-
-const validateRegexSyntax = (text) => {
-  try {
-    new RegExp(text);
-    return true;
-  } catch (error) {
-    return false;
-  }
-};
-
-watch(inputText, highlightSyntax);
-
-</script>
-
-<template>
-  <input type="text" v-model="inputText" @input="highlightSyntax" />
-  <div v-html="highlightedText"></div>
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/AppTopbar.vue b/src/components/AppTopbar.vue
new file mode 100644
index 0000000..a993908
--- /dev/null
+++ b/src/components/AppTopbar.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="bg-primary-alt flex width-100 pt-3 pb-3 container__top-bar">
+    <div class="flex justify-center items-center pl-3">
+      <img src="/podium.svg" alt="Podium Logo" class="logo"/>
+      <div class="font-bold pl-2">
+        Podium
+      </div>
+    </div>
+    <div class="absolute flex justify-center items-center w-full top-0 pt-2">
+      <div class="heading__active-config">
+        Active Configuration
+      </div>
+      <div class="ml-3 container__configuration-select">
+        <VueSelect :options="['translation-chatbox-app','default']" class="item__configuration-select"></VueSelect>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import VueSelect from 'vue-select'
+
+export default {
+  name: 'AppTopbar',
+  components: {VueSelect}
+}
+</script>
+<style>
+
+select {
+  border-radius: 8px;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  width: 400px;
+  max-width: 33vw;
+  height: 35px;
+  background-color: var(--primary-xtra-dark);
+  color: #ffffff;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+select:hover {
+  border-color: var(--primary-dark)
+}
+
+.container__configuration-select {
+  width: 400px;
+  max-width: 33vw;
+}
+
+.item__configuration-select {
+  font-size: 0.9rem;
+}
+
+.container__top-bar {
+  position: relative;
+  width: 100%;
+  z-index: 1000;
+}
+
+.heading__active-config {
+  font-size: 0.95em;
+  font-weight: 500;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/ConfigurationTab.vue b/src/components/ConfigurationTab.vue
similarity index 93%
rename from src/ConfigurationTab.vue
rename to src/components/ConfigurationTab.vue
index 2ebf944..cf01a25 100644
--- a/src/ConfigurationTab.vue
+++ b/src/components/ConfigurationTab.vue
@@ -15,7 +15,7 @@
         <div class="output__port-name">
           Output Port
         </div>
-        <input type="number" class="input__output-port"/>
+        <input type="number" class="input__output-port" v-model="outputPort"/>
       </div>
       <div class="item__consume-mode">
         <v-checkbox label="Consume Mode"></v-checkbox>
@@ -40,6 +40,8 @@ const dataSources = ref([
   { name: 'AQUASINE', type: 'youtube', connected: false, startingScore: 100 },
 ]);
 
+const outputPort = ref(8765);
+
 </script>
 <style scoped>
 .container__configuration-details {
@@ -98,14 +100,14 @@ input[type=number]::-webkit-outer-spin-button {
   font-size: 0.85em;
 }
 
-.item__consume-mode .v-checkbox {
+.item__consume-mode >>> .v-checkbox {
   font-size: 0.95rem;
   margin-top: -0.5rem;
   margin-bottom: -2rem;
   margin-left: -0.5rem;
 }
 
-.item__consume-mode .v-label {
+.item__consume-mode >>> .v-label {
   font-size: 0.85rem;
   color: var(--text) !important;
   opacity: 1;
diff --git a/src/DataSourceCard.vue b/src/components/DataSourceCard.vue
similarity index 100%
rename from src/DataSourceCard.vue
rename to src/components/DataSourceCard.vue
diff --git a/src/IconSectionHeader.vue b/src/components/IconSectionHeader.vue
similarity index 100%
rename from src/IconSectionHeader.vue
rename to src/components/IconSectionHeader.vue
diff --git a/src/InlineTag.vue b/src/components/InlineTag.vue
similarity index 100%
rename from src/InlineTag.vue
rename to src/components/InlineTag.vue
diff --git a/src/LeftSidebar.vue b/src/components/LeftSidebar.vue
similarity index 100%
rename from src/LeftSidebar.vue
rename to src/components/LeftSidebar.vue
diff --git a/src/MessagesView.vue b/src/components/MessagesView.vue
similarity index 69%
rename from src/MessagesView.vue
rename to src/components/MessagesView.vue
index d66bee5..9fcea22 100644
--- a/src/MessagesView.vue
+++ b/src/components/MessagesView.vue
@@ -5,15 +5,16 @@
         <div>
           Messages
         </div>
-        <v-icon icon="mdi-arrow-down-bold" class="ml-3" @click="toggleLock" :class="{'icon-disable': locked}"/>
+        <v-icon icon="mdi-pause" class="ml-3" @click="toggleLock" :class="{'icon-disable': locked}"/>
         <v-icon :icon="hidden ? 'mdi-eye' : 'mdi-eye-off'" class="ml-3" @click="toggleHidden"/>
+        <v-icon :icon="sortIcon" class="ml-3" @click="cycleSortType"/>
       </div>
       <div>
         Score
       </div>
     </div>
     <div class="overflow-y-scroll container__messages">
-      <div v-for="message in messages" class="bg3 item__message flex" v-if="!hidden">
+      <div v-for="message in sortedMessages" class="bg3 item__message flex" v-if="!hidden">
         <div class="flex w-full">
           <div class="p-2 container__message-item flex flex-col">
             <div v-if="!hidden">
@@ -74,6 +75,7 @@ export default {
     return {
       locked: false,
       hidden: false,
+      sortType: 'time',
     }
   },
   methods: {
@@ -86,6 +88,45 @@ export default {
     formatScore(score) {
       // 3 decimal places
       return score.toFixed(3);
+    },
+    cycleSortType() {
+      switch (this.sortType) {
+        case 'time':
+          this.sortType = 'score';
+          break;
+        case 'score':
+          this.sortType = 'score-desc';
+          break;
+        case 'score-desc':
+          this.sortType = 'time';
+          break;
+        default:
+          this.sortType = 'time';
+      }
+    }
+  },
+  computed: {
+    sortIcon() {
+      switch (this.sortType) {
+        case 'time':
+          return 'mdi-clock';
+        case 'score':
+          return 'mdi-sort-numeric-ascending';
+        case 'score-desc':
+          return 'mdi-sort-numeric-descending';
+      }
+      return 'mdi-help';
+    },
+    sortedMessages() {
+      switch (this.sortType) {
+        case 'time':
+          return this.messages;
+        case 'score':
+          return this.messages.slice().sort((a, b) => a.weight - b.weight);
+        case 'score-desc':
+          return this.messages.slice().sort((a, b) => b.weight - a.weight);
+      }
+      return this.messages;
     }
   }
 }
diff --git a/src/components/PresentationModeCenterView.vue b/src/components/PresentationModeCenterView.vue
new file mode 100644
index 0000000..96c0baf
--- /dev/null
+++ b/src/components/PresentationModeCenterView.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/CenterPanel.vue b/src/components/PrimaryCenterView.vue
similarity index 64%
rename from src/CenterPanel.vue
rename to src/components/PrimaryCenterView.vue
index d3e3415..fcd63df 100644
--- a/src/CenterPanel.vue
+++ b/src/components/PrimaryCenterView.vue
@@ -1,44 +1,42 @@
 <template>
-  <div class="container__middle">
     <div class="container__middle-column">
-    <div class="header__row-name">
-      <h1 class="header__configuration-name">translation-chatbox-app</h1>
-      <v-icon icon="mdi-pencil"></v-icon>
-    </div>
-    <div class="item__active-indicator">
-      <v-icon icon="mdi-check"></v-icon>
-      ACTIVE
-    </div>
-    <div class="info__date">
-      Last updated April 11th, 2024
-    </div>
-    <div class="item__description">
-      This is a translation chatbox app that uses the Google Translate API to translate messages in real-time.
-    </div>
-    <div class="container__tab-panel">
-      <div class="container__tab-row">
-        <div class="item__tab" @click="handleTabClick('wrench')">
-          <v-icon icon="mdi-wrench"></v-icon>
+      <div class="header__row-name">
+        <h1 class="header__configuration-name">translation-chatbox-app</h1>
+        <v-icon icon="mdi-pencil"></v-icon>
+      </div>
+      <div class="item__active-indicator">
+        <v-icon icon="mdi-check"></v-icon>
+        ACTIVE
+      </div>
+      <div class="info__date">
+        Last updated April 11th, 2024
+      </div>
+      <div class="item__description">
+        This is a translation chatbox app that uses the Google Translate API to translate messages in real-time.
+      </div>
+      <div class="container__tab-panel">
+        <div class="container__tab-row">
+          <div class="item__tab" @click="handleTabClick('wrench')">
+            <v-icon icon="mdi-wrench"></v-icon>
+          </div>
+          <div class="item__tab" @click="handleTabClick('tune')">
+            <v-icon icon="mdi-tune"></v-icon>
+          </div>
         </div>
-        <div class="item__tab" @click="handleTabClick('tune')">
-          <v-icon icon="mdi-tune"></v-icon>
+        <ConfigurationTab v-if="tab === 'wrench'"/>
+        <div v-else class="container__tab-panel">
+          <div class="card__title">Rule Tuning</div>
+          <TuningCard title="Regex" ruleId="08bdfaedb6"/>
         </div>
       </div>
-      <ConfigurationTab v-if="tab === 'wrench'"/>
-      <div v-else class="container__tab-panel">
-          <div class="card__title">Rule Settings</div>
-        <RegexConfigCard/>
-        </div>
     </div>
-    </div>
-  </div>
 </template>
 <script setup>
 import ConfigurationTab from "./ConfigurationTab.vue";
 import 'highlightjs/styles/github.css';
 
 import {ref} from 'vue';
-import RegexConfigCard from "./RegexConfigCard.vue";
+import TuningCard from "./TuningCard.vue";
 
 const tab = ref('wrench');
 
@@ -51,7 +49,7 @@ const handleTabClick = (tabName) => {
 
 
 .card__title {
-  font-size: 1em;
+  font-size: 1.5em;
   font-weight: 700;
   margin-top: 1rem;
   background-color: var(--bg3);
@@ -102,7 +100,7 @@ const handleTabClick = (tabName) => {
 
 .item__active-indicator {
   color: var(--primary);
-  margin-top: 0.25rem;
+  margin-top: 0.5rem;
   font-size: 0.85em;
   font-weight: 800;
   border-radius: 0.25rem;
diff --git a/src/RegexConfigCard.vue b/src/components/RegexConfigCard.vue
similarity index 100%
rename from src/RegexConfigCard.vue
rename to src/components/RegexConfigCard.vue
diff --git a/src/RuleTile.vue b/src/components/RuleTile.vue
similarity index 52%
rename from src/RuleTile.vue
rename to src/components/RuleTile.vue
index 83d39d1..6fa94d9 100644
--- a/src/RuleTile.vue
+++ b/src/components/RuleTile.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="tile__rule">
     <div class="row__rule">
-      <div class="tile__rule-header">
+      <div class="tile__rule-header" @click="toggleExpanded">
         <div class="handle__rule-tile">
           <v-icon icon="mdi-drag"></v-icon>
         </div>
@@ -10,7 +10,7 @@
           <span class="strong__rule-tile">DO </span>
           <span>{{ action.name }}</span>
         </div>
-        <v-icon :icon="!expanded ? 'mdi-chevron-right' : 'mdi-chevron-down'" @click="toggleExpanded"></v-icon>
+        <v-icon :icon="!expanded ? 'mdi-chevron-right' : 'mdi-chevron-down'"></v-icon>
       </div>
     </div>
     <div v-if="expanded" class="container__rule-details">
@@ -38,6 +38,7 @@
 <script setup>
 import {computed, ref} from "vue";
 import RegexConfigCard from "./RegexConfigCard.vue";
+import { conditionTypes, actionTypes } from "../rules.js";
 
 
 const props = defineProps({
@@ -47,112 +48,7 @@ const props = defineProps({
   }
 })
 
-const conditionTypes = [
-  {
-    id: 'none',
-    name: 'Always',
-    description: "Match all messages.",
-  },
-  {
-    id: 'contains',
-    name: 'Contains',
-    description: "Match messages that contain a specific string.",
-  },
-  {
-    id: 'exactMatch',
-    name: 'Exact Match',
-    description: "Match messages that are exactly the same as a specific string.",
-  },
-  {
-    id: 'fuzzyMatch',
-    name: 'Fuzzy Match',
-    description: "Match messages that are similar to a specific string.",
-  },
-  {
-    id: 'regex',
-    name: 'Regex',
-    description: "Match messages with a specific regex pattern.",
-  },
-  {
-    id: 'length',
-    name: 'Message Length',
-    description: "Match messages based on how long they are.",
-  },
-  {
-    id: 'score',
-    name: 'Current Message Score',
-    description: "Match messages based on the message's current score.",
-  },
-  {
-    id: 'userscore',
-    name: 'User Score',
-    description: "Match messages based on the user's score.",
-  },
-  {
-    id: 'userblacklist',
-    name: 'User Blacklist',
-    description: "Match messages from users on a blacklist.",
-  },
-  {
-    id: 'userwhitelist',
-    name: 'User Whitelist',
-    description: "Match messages from users on a whitelist.",
-  }
-]
-
-const actionTypes = [
-  {
-    id: 'nothing',
-    name: 'Do Nothing',
-    description: "Simply pass the message through without any modifications.",
-  },
-  {
-    id: 'replace',
-    name: 'Simple Replace',
-    description: "Replace a specific string with another string.",
-  },
-  {
-    id: 'regex',
-    name: 'Regex Replace',
-    description: "Replace a string using a regular expression.",
-  },
-  {
-    id: 'drop',
-    name: 'Drop Message',
-    description: "Drop the message and do not pass it through.",
-  },
-  {
-    id: 'set',
-    name: 'Set Score',
-    description: "Set the score of the message to a specific value.",
-  },
-  {
-    id: 'math',
-    name: 'Math',
-    description: "Modify message or user score using math operations.",
-    matchingKeywords: ['add', 'subtract', 'multiply', 'divide', 'modulo', 'power', 'root', 'function']
-  },
-  {
-    id: 'add',
-    name: 'Add to Score',
-    description: "A simple way to add or subtract from the message or user score.",
-  },
-  {
-    id: 'addtag',
-    name: 'Add Tag',
-    description: "Add a tag to the message or user.",
-  },
-  {
-    id: 'removetag',
-    name: 'Remove Tag',
-    description: "Remove a tag from the message or user.",
-  },
-  {
-    id: '7tvremove',
-    name: 'Remove 7TV emotes',
-    description: "Remove 7TV emotes from the message.",
-  }
-]
+
 
 const expanded = ref(false);
 const rule = ref(props.rule);
diff --git a/src/RulesCard.vue b/src/components/RulesCard.vue
similarity index 100%
rename from src/RulesCard.vue
rename to src/components/RulesCard.vue
diff --git a/src/components/TuningCard.vue b/src/components/TuningCard.vue
new file mode 100644
index 0000000..a476716
--- /dev/null
+++ b/src/components/TuningCard.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="card__regex-tuning">
+    <h1 class="header__card-title">{{ title }}</h1>
+    <div class="item__rule_id">Rule ID: {{ ruleId }}</div>
+    <div class="item__rule-description">
+      {{ description }}
+    </div>
+    <div>
+      <h2>Stats</h2>
+      <div>Matches</div>
+      <div v-if="!always">
+        4 / 50
+      </div>
+      <div v-else>
+        Always
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  ruleId: {
+    type: String,
+    required: true
+  },
+  always: {
+    type: Boolean,
+    default: false
+  },
+  description: {
+    type: String,
+    default: 'No description provided.'
+  }
+})
+</script>
+<style>
+
+
+.container__daemon-info code {
+  background-color: var(--bg3);
+  margin-left: 0;
+}
+
+.header__row-name h1 {
+  font-size: 1.5em;
+  margin: 0;
+  font-weight: 700;
+}
+
+.card__regex-tuning {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  background-color: var(--bg3);
+  width: 100%;
+  padding: 0.75rem;
+  border-radius: 0.25rem;
+}
+
+.header__card-title {
+  font-size: 1.5em;
+  font-weight: 700;
+  margin-bottom: -0.2rem;
+}
+
+.item__rule_id {
+  font-size: 0.85em;
+  font-weight: 500;
+  color: var(--text-mute);
+}
+
+.item__rule-description {
+  font-size: 0.85em;
+  font-weight: 500;
+  color: var(--text-mute);
+}
+</style>
\ No newline at end of file
diff --git a/src/UsersView.vue b/src/components/UsersView.vue
similarity index 82%
rename from src/UsersView.vue
rename to src/components/UsersView.vue
index 35a6ba1..b4c1624 100644
--- a/src/UsersView.vue
+++ b/src/components/UsersView.vue
@@ -5,7 +5,7 @@
         <div class="item__user-title">
           Users
         </div>
-        <v-icon icon="mdi-arrow-down-bold" class="ml-3" @click="toggleLock" :class="{'icon-disable': locked}"/>
+        <v-icon :icon="sortIcon" class="ml-3" @click="toggleSortType"/>
         <v-icon :icon="hidden ? 'mdi-eye' : 'mdi-eye-off'" class="ml-3" @click="toggleHidden"/>
       </div>
       <div class="item__user-title">
@@ -13,7 +13,7 @@
       </div>
     </div>
     <div class="overflow-y-scroll container__messages" v-if="!hidden">
-      <div v-for="user in users" class="bg3 item__message flex">
+      <div v-for="user in sortedUsers" class="bg3 item__message flex">
         <div class="flex w-full">
           <div class="p-3 container__message-item flex flex-col">
             <div v-if="!hidden">
@@ -70,20 +70,34 @@ export default {
   },
   data() {
     return {
-      locked: false,
-      hidden: false
+      hidden: false,
+      sortAscending: true
     }
   },
   methods: {
-    toggleLock() {
-      this.locked = !this.locked;
-    },
     toggleHidden() {
       this.hidden = !this.hidden;
     },
     formatScore(score) {
       // 3 decimal places
       return score.toFixed(3);
+    },
+    toggleSortType() {
+      this.sortAscending = !this.sortAscending;
+    }
+  },
+  computed: {
+    sortIcon() {
+      return this.sortAscending ? 'mdi-sort-numeric-ascending' : 'mdi-sort-numeric-descending';
+    },
+    reversedUsers() {
+      return this.users.slice().reverse();
+    },
+    sortedUsers() {
+      if (this.sortAscending) {
+        return this.users;
+      }
+      return this.reversedUsers;
     }
   }
 }
diff --git a/src/rules.js b/src/rules.js
new file mode 100644
index 0000000..d3ae21e
--- /dev/null
+++ b/src/rules.js
@@ -0,0 +1,136 @@
+export const conditionTypes = [
+    {
+        id: 'none',
+        name: 'Always',
+        description: "Match all messages.",
+    },
+    {
+        id: 'contains',
+        name: 'Contains',
+        description: "Match messages that contain a specific string.",
+    },
+    {
+        id: 'exactMatch',
+        name: 'Exact Match',
+        description: "Match messages that are exactly the same as a specific string.",
+    },
+    {
+        id: 'fuzzyMatch',
+        name: 'Fuzzy Match',
+        description: "Match messages that are similar to a specific string.",
+    },
+    {
+        id: 'regex',
+        name: 'Regex',
+        description: "Match messages with a specific regex pattern.",
+    },
+    {
+        id: 'length',
+        name: 'Message Length',
+        description: "Match messages based on how long they are.",
+    },
+    {
+        id: 'score',
+        name: 'Current Message Score',
+        description: "Match messages based on the message's current score.",
+    },
+    {
+        id: 'userscore',
+        name: 'User Score',
+        description: "Match messages based on the user's score.",
+    },
+    {
+        id: 'userblacklist',
+        name: 'User Blacklist',
+        description: "Match messages from users on a blacklist.",
+    },
+    {
+        id: 'userwhitelist',
+        name: 'User Whitelist',
+        description: "Match messages from users on a whitelist.",
+    },
+    {
+        id: 'everynth',
+        name: 'Every nth Message',
+        description: "Match every nth message.",
+    },
+    {
+        id: 'chance',
+        name: 'Random Chance',
+        description: "Match messages with a certain probability.",
+    },
+    {
+        id: 'seededchance',
+        name: 'Seeded Random Chance',
+        description: "Match messages with a certain probability based on the message's hash. This means a message will always have the same outcome.",
+    },
+    {
+        id: 'timebased',
+        name: 'Time-Based',
+        description: "Wait for a certain amount of time before matching a message.",
+    }
+]
+
+export const actionTypes = [
+    {
+        id: 'nothing',
+        name: 'Do Nothing',
+        description: "Simply pass the message through without any modifications.",
+    },
+    {
+        id: 'replace',
+        name: 'Simple Replace',
+        description: "Replace a specific string with another string.",
+    },
+    {
+        id: 'regex',
+        name: 'Regex Replace',
+        description: "Replace a string using a regular expression.",
+    },
+    {
+        id: 'drop',
+        name: 'Drop Message',
+        description: "Drop the message and do not pass it through.",
+    },
+    {
+        id: 'set',
+        name: 'Set Score',
+        description: "Set the score of the message to a specific value.",
+    },
+    {
+        id: 'math',
+        name: 'Math',
+        description: "Modify message or user score using math operations.",
+        matchingKeywords: ['add', 'subtract', 'multiply', 'divide', 'modulo', 'power', 'root', 'function']
+    },
+    {
+        id: 'add',
+        name: 'Add to Score',
+        description: "A simple way to add or subtract from the message or user score.",
+    },
+    {
+        id: 'addtag',
+        name: 'Add Tag',
+        description: "Add a tag to the message or user.",
+    },
+    {
+        id: 'removetag',
+        name: 'Remove Tag',
+        description: "Remove a tag from the message or user.",
+    },
+    {
+        id: '7tvremove',
+        name: 'Remove 7TV emotes',
+        description: "Remove 7TV emotes from the message.",
+    },
+    {
+        id: 'gptrank',
+        name: 'GPT Rank',
+        description: "Use ChatGPT to rank batches of messages based on a prompt.",
+    },
+    {
+        id: 'sentimentAnalysis',
+        name: 'Sentiment Analysis',
+        description: "Analyze the sentiment of a message.",
+    }
+]
\ No newline at end of file
diff --git a/src/service/daemon.py b/src/service/daemon.py
index ef6055a..9b41879 100644
--- a/src/service/daemon.py
+++ b/src/service/daemon.py
@@ -25,18 +25,29 @@
 BOT_USERNAME = 'AQUASINE'
 YOUTUBE_FETCH_INTERVAL = 1
 
-# read bot token from config.json. if it doesn't exist, tell the user to create it
-with open('config.json', 'r') as f:
-    config = json.load(f)
+# try to read bot token from saved-credentials.json
+try:
+    with open('saved-credentials.json', 'r') as f:
+        credentials = json.load(f)
+        BOT_TOKEN = credentials['TWITCH_OAUTH']
+except FileNotFoundError:
+    print("saved-credentials.json not found. Using config.json")
+    # read bot token from config.json. if it doesn't exist, tell the user to create it
     try:
-        BOT_TOKEN = config['TWITCH_OAUTH']
-    except KeyError:
-        print("config.json is missing the TWITCH_OAUTH key. Please create a bot account and add the OAuth token to config.json")
-        exit(1)
-    try:
-        OPENAI_KEY = config['OPENAI_KEY']
-    except KeyError:
-        print("config.json is missing the OPENAI_KEY key. Please create an OpenAI API key and add it to config.json")
+        with open('config.json', 'r') as f:
+            config = json.load(f)
+            try:
+                BOT_TOKEN = config['TWITCH_OAUTH']
+            except KeyError:
+                print("config.json is missing the TWITCH_OAUTH key. Please create a bot account and add the OAuth token to config.json")
+                exit(1)
+            try:
+                OPENAI_KEY = config['OPENAI_KEY']
+            except KeyError:
+                print("config.json is missing the OPENAI_KEY key. Please create an OpenAI API key and add it to config.json")
+                exit(1)
+    except FileNotFoundError:
+        print("config.json not found. Please create it with the TWITCH_OAUTH key for the bot account and the OPENAI_KEY key.")
         exit(1)
 
 gpt_client = GPTClient(OPENAI_KEY)
@@ -97,6 +108,7 @@ async def fetch_7tv_emotes():
 
         print("Ignoring the following emotes:", to_ignore)
 
+
 class Bot(twitchio.Client):
     def __init__(self):
         super().__init__(token=BOT_TOKEN, initial_channels=[])
@@ -297,6 +309,27 @@ async def reconnect():
     youtube.reconnect(0)
     connect_twitch()
 
+@app.route('/set_configuration', methods=['POST'])
+def set_configuration():
+    global active_configuration
+    data = request.json
+    # TODO: convert data to PodiumConfiguration
+    return 'ok'
+
+@app.route('/get_active_configuration')
+def get_active_configuration():
+    return active_configuration
+
+@app.route('/get_configurations')
+def get_configurations():
+    return configurations
+
+@app.route('/get_emotes')
+def get_emotes():
+    return emote_sets
+
+
+
 processing_thread = None
 gpt_thread = None
 yt_thread = None
diff --git a/src/service/gptclient.py b/src/service/gptclient.py
index 9935f7f..ad77493 100644
--- a/src/service/gptclient.py
+++ b/src/service/gptclient.py
@@ -113,7 +113,7 @@ async def process_queue(self):
                     break
                 await asyncio.sleep(time_between_full_checks)
             
-            print("Queue currently has " + str(len(self.queue)) + " entries")
+            print("GPT Rank queue currently has " + str(len(self.queue)) + " entries")
 
             # go through the queue and process any entries that are past the ttl
             now = time.time()
diff --git a/src/store/modules/configurations.js b/src/store/modules/configurations.js
index 88e4513..eecf649 100644
--- a/src/store/modules/configurations.js
+++ b/src/store/modules/configurations.js
@@ -43,6 +43,11 @@ const configurations = {
             }
         ]
     },
+    getters: {
+        activeConfigurationObject(state) {
+            return state.configurations.find(c => c.id === state.active);
+        }
+    },
     mutations: {
         setActiveConfiguration(state, payload) {
             state.active = payload;
diff --git a/src/style.css b/src/style.css
index ee6ac96..2ea4c7c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,4 +1,4 @@
-@import "vue-select/dist/vue-select.css";
+@import "vue-select.css";
 
 @tailwind base;
 @tailwind components;
diff --git a/tsconfig.json b/tsconfig.json
index 6d0f5ee..1411b90 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,7 +11,8 @@
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
-    "noEmit": true
+    "noEmit": true,
+    "allowJs": true,
   },
   "include": ["src"],
   "references": [