diff --git a/src/components/AlwaysRuleContent.vue b/src/components/AlwaysRuleContent.vue
new file mode 100644
index 0000000..668afb1
--- /dev/null
+++ b/src/components/AlwaysRuleContent.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>
+    Always is the default behavior. Change the rule to something else to have the action run conditionally.
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/CompactCheckbox.vue b/src/components/CompactCheckbox.vue
new file mode 100644
index 0000000..96cb456
--- /dev/null
+++ b/src/components/CompactCheckbox.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="checkbox__compact">
+    <v-checkbox :label="label" v-model="model"></v-checkbox>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+});
+
+const model = defineModel();
+
+</script>
+<style scoped>
+.checkbox__compact {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  font-size: 0.85em;
+}
+
+.checkbox__compact >>> .v-checkbox {
+  font-size: 0.95rem;
+  margin-top: -0.5rem;
+  margin-bottom: -2rem;
+  margin-left: -0.5rem;
+}
+
+.checkbox__compact >>> .v-label {
+  font-size: 0.85rem;
+  color: var(--text) !important;
+  opacity: 1;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/ConfigurationTab.vue b/src/components/ConfigurationTab.vue
index cf01a25..b64301d 100644
--- a/src/components/ConfigurationTab.vue
+++ b/src/components/ConfigurationTab.vue
@@ -9,21 +9,7 @@
     <IconSectionHeader icon="mdi-ruler">Rules</IconSectionHeader>
     <RulesCard/>
     <IconSectionHeader icon="mdi-cog">Output</IconSectionHeader>
-    <div class="container__output-card">
-      <div class="item__output-port">
-        <v-icon icon="mdi-connection"></v-icon>
-        <div class="output__port-name">
-          Output Port
-        </div>
-        <input type="number" class="input__output-port" v-model="outputPort"/>
-      </div>
-      <div class="item__consume-mode">
-        <v-checkbox label="Consume Mode"></v-checkbox>
-      </div>
-      <div class="item__consume-mode">
-        <v-checkbox label="Log to file"></v-checkbox>
-      </div>
-    </div>
+    <OutputCard :outputPort="outputPort"/>
     <div class="button__save">
       Save
       </div>
@@ -34,13 +20,13 @@ import DataSourceCard from "./DataSourceCard.vue";
 import {ref} from "vue";
 import RulesCard from "./RulesCard.vue";
 import IconSectionHeader from "./IconSectionHeader.vue";
+import OutputCard from "./OutputCard.vue";
 
 const dataSources = ref([
   { name: 'AQUASINE', type: 'ttv', connected: true, startingScore: 100 },
   { name: 'AQUASINE', type: 'youtube', connected: false, startingScore: 100 },
 ]);
 
-const outputPort = ref(8765);
 
 </script>
 <style scoped>
@@ -66,52 +52,7 @@ input[type=number]::-webkit-outer-spin-button {
   color: var(--text-mute);
 }
 
-.container__output-card {
-  background-color: var(--bg3);
-  padding: 0.75rem;
-  border-radius: 0.25rem;
-}
 
-.item__output-port {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.85em;
-  margin-bottom: 0.5rem;
-}
-
-.item__output-port .input__output-port {
-  border-radius: 8px;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  width: 50px;
-  height: 30px;
-  background-color: var(--bg2);
-  text-align: center;
-  border: 1px solid transparent;
-  transition: border-color 0.25s;
-}
-
-.item__consume-mode {
-  display: flex;
-  align-items: center;
-  justify-content: left;
-  font-size: 0.85em;
-}
-
-.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 {
-  font-size: 0.85rem;
-  color: var(--text) !important;
-  opacity: 1;
-}
 
 .button__save {
   display: flex;
diff --git a/src/components/ContainsRuleContent.vue b/src/components/ContainsRuleContent.vue
new file mode 100644
index 0000000..384bdef
--- /dev/null
+++ b/src/components/ContainsRuleContent.vue
@@ -0,0 +1,29 @@
+<script setup>
+import {ref} from "vue";
+import CompactCheckbox from "./CompactCheckbox.vue";
+
+const contains = ref('');
+const caseSensitive = ref(false);
+
+</script>
+
+<template>
+<div>
+  This will check each message to see if it contains the following input:
+  <input type="text" v-model="contains" class="input__contains" placeholder="Contains..." />
+  <CompactCheckbox label="Case Sensitive" v-model="caseSensitive"/>
+</div>
+</template>
+
+<style scoped>
+.input__contains {
+  width: 100%;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--bg4);
+  background-color: var(--bg2);
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
+  color: var(--text);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/DefaultRuleContent.vue b/src/components/DefaultRuleContent.vue
new file mode 100644
index 0000000..2155e8d
--- /dev/null
+++ b/src/components/DefaultRuleContent.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    This is the default rule content. If you are seeing this, then the selected rule type <code>{{ type }}</code> has not yet been implemented.
+  </div>
+</template>
+<script>
+export default {
+  name: 'DefaultRuleContent',
+  props: {
+    type: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/ExactMatchRuleContent.vue b/src/components/ExactMatchRuleContent.vue
new file mode 100644
index 0000000..c146b74
--- /dev/null
+++ b/src/components/ExactMatchRuleContent.vue
@@ -0,0 +1,30 @@
+<script setup>
+import {ref} from "vue";
+import CompactCheckbox from "./CompactCheckbox.vue";
+
+const contains = ref('');
+const caseSensitive = ref(false);
+
+</script>
+
+<template>
+<div>
+  This will check each message to see if it exactly matches the following input:
+  <input type="text" v-model="contains" class="input__contains" placeholder="Contains..." />
+  <CompactCheckbox label="Case Sensitive" v-model="caseSensitive"/>
+</div>
+</template>
+
+<style scoped>
+.input__contains {
+  width: 100%;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--bg4);
+  background-color: var(--bg2);
+  font-size: 1em;
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
+  color: var(--text);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/FuzzyMatchRuleContent.vue b/src/components/FuzzyMatchRuleContent.vue
new file mode 100644
index 0000000..a4c14cb
--- /dev/null
+++ b/src/components/FuzzyMatchRuleContent.vue
@@ -0,0 +1,26 @@
+<script setup>
+import {ref} from "vue";
+
+const contains = ref('');
+
+</script>
+
+<template>
+<div>
+  This will check each message to see if it matches the following input with some flexibility:
+  <input type="text" v-model="contains" class="input__contains" placeholder="Contains..." />
+</div>
+</template>
+
+<style scoped>
+.input__contains {
+  width: 100%;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--bg4);
+  background-color: var(--bg2);
+  font-size: 0.95em;
+  margin-top: 0.5rem;
+  color: var(--text);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/MessagesView.vue b/src/components/MessagesView.vue
index 7df266a..b43e0df 100644
--- a/src/components/MessagesView.vue
+++ b/src/components/MessagesView.vue
@@ -6,7 +6,7 @@
           Messages
         </div>
         <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="hidden ? 'mdi-eye-off' : 'mdi-eye'" class="ml-3" @click="toggleHidden"/>
         <v-icon :icon="sortIcon" class="ml-3" @click="cycleSortType"/>
       </div>
       <div>
@@ -144,6 +144,10 @@ export default {
   width: 100%;
 }
 
+.item__message:last-child {
+  border-bottom: none;
+}
+
 .item__score {
   background-color: var(--bg2);
   width: 80px;
diff --git a/src/components/OutputCard.vue b/src/components/OutputCard.vue
new file mode 100644
index 0000000..886be57
--- /dev/null
+++ b/src/components/OutputCard.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="container__output-card">
+    <div class="item__output-port">
+      <v-icon icon="mdi-connection"></v-icon>
+      <div class="output__port-name">
+        Output Port
+      </div>
+      <input type="number" class="input__output-port" v-model="outputPort"/>
+    </div>
+    <CompactCheckbox v-model="consumeMode" label="Consume Mode"/>
+    <CompactCheckbox v-model="logToFile" label="Log to file"/>
+  </div>
+</template>
+<script setup>
+import {ref} from "vue";
+import CompactCheckbox from "./CompactCheckbox.vue";
+
+const outputPort = ref(8765);
+const consumeMode = ref(false);
+const logToFile = ref(false);
+
+</script>
+<style scoped>
+
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.container__output-card {
+  background-color: var(--bg3);
+  padding: 0.75rem;
+  border-radius: 0.25rem;
+}
+
+.item__output-port {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.85em;
+  margin-bottom: 0.5rem;
+}
+
+.item__output-port .input__output-port {
+  border-radius: 8px;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  width: 50px;
+  height: 30px;
+  background-color: var(--bg2);
+  text-align: center;
+  border: 1px solid transparent;
+  transition: border-color 0.25s;
+}
+
+.item__consume-mode {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  font-size: 0.85em;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/PresentationModeCenterView.vue b/src/components/PresentationModeCenterView.vue
index 92155b4..be7af25 100644
--- a/src/components/PresentationModeCenterView.vue
+++ b/src/components/PresentationModeCenterView.vue
@@ -15,7 +15,8 @@ const worstChatter = computed(() => {
   if (users.value.length === 0) {
     return null;
   }
-  return users.value[users.value.length - 1];
+  return users.value[0]
+  // return users.value[users.value.length - 1];
 });
 
 onMounted(() => {
@@ -112,7 +113,7 @@ onMounted(() => {
     <div class="container__message-box-wrapper">
       <div class="container__message-box">
         <div>
-          Our worst chatter is:
+          Our best chatter is:
         </div>
         <div v-if="worstChatter">
 
diff --git a/src/components/PrimaryCenterView.vue b/src/components/PrimaryCenterView.vue
index a028c1f..fa90c42 100644
--- a/src/components/PrimaryCenterView.vue
+++ b/src/components/PrimaryCenterView.vue
@@ -27,6 +27,7 @@
         <div v-else class="container__tab-panel">
           <div class="card__title">Rule Tuning</div>
           <TuningCard title="Regex" ruleId="08bdfaedb6"/>
+
         </div>
       </div>
     </div>
diff --git a/src/components/RegexConfigCard.vue b/src/components/RegexRuleContent.vue
similarity index 89%
rename from src/components/RegexConfigCard.vue
rename to src/components/RegexRuleContent.vue
index 010d813..921b934 100644
--- a/src/components/RegexConfigCard.vue
+++ b/src/components/RegexRuleContent.vue
@@ -1,12 +1,5 @@
 <template>
   <div class="card__regex">
-    <div class="header__row-name">
-      <h1>Regex</h1>
-      <v-icon icon="mdi-pencil"></v-icon>
-    </div>
-    <div class="item__description">
-      Match messages with a specific regex pattern.
-    </div>
     <div class="container__regex-input">
       <codemirror v-model="regex" class="input__regex" @input="validateRegex"
                   :extensions="extensions" :options="{lineNumbers: false, theme: 'one-dark'}">
diff --git a/src/components/RuleConfigCard.vue b/src/components/RuleConfigCard.vue
new file mode 100644
index 0000000..a53379e
--- /dev/null
+++ b/src/components/RuleConfigCard.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="card__rule-component">
+    <div class="header__row-name">
+      <h1>{{ title }}</h1>
+      <v-icon icon="mdi-pencil"></v-icon>
+    </div>
+    <div class="item__description">
+      {{ description }}
+    </div>
+    <div class="container__config-content">
+      <AlwaysRuleContent v-if="type === 'always'"/>
+      <RegexRuleContent v-else-if="type === 'regex'"/>
+      <ContainsRuleContent v-else-if="type === 'contains'"/>
+      <ExactMatchRuleContent v-else-if="type === 'exactMatch'"/>
+      <FuzzyMatchRuleContent v-else-if="type === 'fuzzyMatch'"/>
+      <DefaultRuleContent v-else :type="type"/>
+    </div>
+  </div>
+</template>
+<script setup>
+import {defineProps} from 'vue';
+import DefaultRuleContent from "./DefaultRuleContent.vue";
+import RegexRuleContent from "./RegexRuleContent.vue";
+import AlwaysRuleContent from "./AlwaysRuleContent.vue";
+import ContainsRuleContent from "./ContainsRuleContent.vue";
+import ExactMatchRuleContent from "./ExactMatchRuleContent.vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  description: {
+    type: String,
+    default: 'No description provided.'
+  },
+  type: {
+    type: String,
+    default: 'default'
+  }
+})
+
+</script>
+<style scoped>
+
+.item__description {
+  font-size: 0.85em;
+  margin-top: 0.5rem;
+  font-weight: 500;
+}
+
+.card__rule-component {
+  font-size: 1em;
+  padding: 0.75rem;
+  border-radius: 0.25rem;
+  background-color: var(--bg3);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: 0.6rem;
+}
+
+.container__config-content {
+  margin-top: 0.5rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/RuleTile.vue b/src/components/RuleTile.vue
index 6fa94d9..ede19bf 100644
--- a/src/components/RuleTile.vue
+++ b/src/components/RuleTile.vue
@@ -16,11 +16,23 @@
     <div v-if="expanded" class="container__rule-details">
       <div class="row__rule-details-header">
         <h2>IF</h2>
-        <v-autocomplete v-model="condition" :items="conditionTypes" item-text="name" item-value="id"
-                        label="Condition Type" outlined></v-autocomplete>
+        <v-autocomplete v-model="condition" :items="conditionTypes" item-title="name" item-value="id"
+                        label="Condition Type" outlined>
+          <template v-slot:item="{props, item}">
+            <v-list-item class="item__rule-option" :title="item.title" :subtitle="item.raw.description" v-bind="props">
+            </v-list-item>
+          </template>
+        </v-autocomplete>
       </div>
       <div class="container__rule-action">
-        <RegexConfigCard/>
+        <RuleConfigCard v-if="conditionInfo" :title="conditionInfo.name" :description="conditionInfo.description"
+                        :type="condition">
+        </RuleConfigCard>
+        <div v-else>
+          <RuleConfigCard title="Error" :description="'Could not find rule of type ' + condition" type="'default'">
+          </RuleConfigCard>
+        </div>
+
       </div>
       <div class="row__rule-details-header">
         <h2>THEN</h2>
@@ -30,15 +42,15 @@
         </v-autocomplete>
       </div>
       <div class="container__rule-condition">
-        <RegexConfigCard/>
       </div>
     </div>
   </div>
 </template>
 <script setup>
 import {computed, ref} from "vue";
-import RegexConfigCard from "./RegexConfigCard.vue";
-import { conditionTypes, actionTypes } from "../rules.js";
+import RegexConfigCard from "./RegexRuleContent.vue";
+import {conditionTypes, actionTypes} from "../rules.js";
+import RuleConfigCard from "./RuleConfigCard.vue";
 
 
 const props = defineProps({
@@ -49,17 +61,21 @@ const props = defineProps({
 })
 
 
-
 const expanded = ref(false);
 const rule = ref(props.rule);
 
-const action = ref(rule.value.action ?? {
-  name: 'nothing',
-  type: 'none'
-});
+const action = ref(rule.value.action.name);
 
 const condition = ref(rule.value.condition);
 
+const actionInfo = computed(() => {
+  return actionTypes.find(a => a.id === action.value.id);
+})
+
+const conditionInfo = computed(() => {
+  return conditionTypes.find(c => c.id === condition.value);
+})
+
 const ruleText = computed(() => {
   if (condition.value) {
     return `IF ${condition.value} THEN ${action.value.name}`;
@@ -138,4 +154,9 @@ input[type=number]::-webkit-outer-spin-button {
   margin-bottom: 0.5rem;
   font-weight: 800;
 }
+
+.item__rule-option-title {
+  font-size: 0.95em;
+  font-weight: 700;
+}
 </style>
\ No newline at end of file
diff --git a/src/rules.js b/src/rules.js
index d3ae21e..e114806 100644
--- a/src/rules.js
+++ b/src/rules.js
@@ -1,6 +1,6 @@
 export const conditionTypes = [
     {
-        id: 'none',
+        id: 'always',
         name: 'Always',
         description: "Match all messages.",
     },
@@ -62,7 +62,7 @@ export const conditionTypes = [
     {
         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.",
+        description: "Match messages with a certain probability consistently based on the message's hash."
     },
     {
         id: 'timebased',
diff --git a/src/service/podium.py b/src/service/podium.py
index b139404..ab7cee0 100644
--- a/src/service/podium.py
+++ b/src/service/podium.py
@@ -8,6 +8,7 @@
     'brown'
 ])
 from nltk.sentiment.vader import SentimentIntensityAnalyzer
+from detoxify import Detoxify
 
 class PodiumConfiguration():
     def __init__(self, id, twitch_channels=[], youtube_channels={}, rules=[]):
@@ -132,6 +133,13 @@ def cond_contains_any(result, matches):
             return True
     return False
 
+detox = Detoxify('original')
+def cond_toxicity(result, threshold):
+    tox_result = detox.predict(result.message)
+    toxicity = tox_result['toxicity']
+    severe_toxicity = tox_result['severe_toxicity']
+    return toxicity >= threshold or severe_toxicity >= threshold
+
 def cond_regex(result, regex):
     return re.search(regex, result.message) is not None
 
diff --git a/src/store/store.js b/src/store/store.js
index 006d592..7d0e847 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -1,5 +1,6 @@
 import {createStore} from "vuex";
 
+const DEBUG_MESSAGES = false;
 const store = createStore({
     modules: {},
     state: {
@@ -38,7 +39,9 @@ const store = createStore({
                     commit('setConnection', {isConnected: false, connectionString: 'localhost:8765'});
                 });
                 socket.addEventListener('message', event => {
-                    console.log('Message from server ', event.data);
+                    if (DEBUG_MESSAGES) {
+                        console.log('Received message from server: ' + event.data);
+                    }
                     dispatch('pushMessage', event.data);
                 });
                 commit('setSocket', socket);
@@ -59,12 +62,16 @@ const store = createStore({
                 fetch('http://localhost:5000/get_users')
                     .then(response => response.json())
                     .then(data => {
-                        console.log('Users list: ', data)
+                        if (DEBUG_MESSAGES) {
+                            console.log('Users list: ', data)
+                        }
                         // sort users by user_score. data is an object of key-value pairs, convert to array
                         let users = Object.values(data);
                         users = users.sort((a, b) => b.user_score - a.user_score);
                         commit('setUsers', users);
-                        console.log('Sorted users: ', state.users)
+                        if (DEBUG_MESSAGES) {
+                            console.log('Sorted users: ', state.users)
+                        }
                     })
             }, 3000);
         },
diff --git a/src/style.css b/src/style.css
index 2dfe876..3fdbfa8 100644
--- a/src/style.css
+++ b/src/style.css
@@ -56,6 +56,12 @@ a {
 a:hover {
 }
 
+code {
+    font-family: 'Fira Code', 'Courier New', monospace;
+    font-size: 0.9em;
+    background-color: var(--bg1);
+}
+
 ::selection {
   background-color: var(--primary);
   color: var(--text);
@@ -139,7 +145,6 @@ button:focus-visible {
 }
 
 code {
-  background-color: #1a1a1a;
   padding: 2px 4px;
   margin: 0 4px;
   border-radius: 4px;