diff --git a/client/src/store/modules/system.js b/client/src/store/modules/system.js
index b93e8136..b0c7bec6 100644
--- a/client/src/store/modules/system.js
+++ b/client/src/store/modules/system.js
@@ -25,6 +25,15 @@ export default {
     },
   },
   actions: {
+    async GET_AVAILABLE_SHOWS(context) {
+      const response = await fetch(`${makeURL('/api/v1/shows')}`);
+      if (response.ok) {
+        const shows = await response.json();
+        context.commit('UPDATE_SHOWS', shows.shows);
+      } else {
+        log.error('Unable to get available shows');
+      }
+    },
     async GET_RAW_SETTINGS(context) {
       const response = await fetch(`${makeURL('/api/v1/settings/raw')}`);
       if (response.ok) {
@@ -81,6 +90,9 @@ export default {
     },
   },
   getters: {
+    AVAILABLE_SHOWS(state) {
+      return state.availableShows;
+    },
     SETTINGS(state) {
       return state.settings;
     },
diff --git a/client/src/views/config/ConfigView.vue b/client/src/views/config/ConfigView.vue
index 6c3a226c..351d7461 100644
--- a/client/src/views/config/ConfigView.vue
+++ b/client/src/views/config/ConfigView.vue
@@ -4,7 +4,10 @@
       <b-col>
         <h1>DigiScript Config</h1>
         <b-tabs content-class="mt-3">
-          <b-tab title="System" active>
+          <b-tab title="Shows" active>
+            <config-shows />
+          </b-tab>
+          <b-tab title="System">
             <config-system />
           </b-tab>
           <b-tab title="Settings">
@@ -23,9 +26,10 @@
 import ConfigSystem from '@/vue_components/config/ConfigSystem.vue';
 import ConfigSettings from '@/vue_components/config/ConfigSettings.vue';
 import ConfigUsers from '@/vue_components/config/ConfigUsers.vue';
+import ConfigShows from '@/vue_components/config/ConfigShows.vue';
 
 export default {
   name: 'ConfigView',
-  components: { ConfigUsers, ConfigSettings, ConfigSystem },
+  components: { ConfigShows, ConfigUsers, ConfigSettings, ConfigSystem },
 };
 </script>
diff --git a/client/src/vue_components/config/ConfigShows.vue b/client/src/vue_components/config/ConfigShows.vue
new file mode 100644
index 00000000..991d1630
--- /dev/null
+++ b/client/src/vue_components/config/ConfigShows.vue
@@ -0,0 +1,296 @@
+<template>
+  <b-container class="mx-0" fluid>
+    <template v-if="loaded">
+      <b-row>
+        <b-col>
+          <b-table
+            id="shows-table"
+            :items="AVAILABLE_SHOWS"
+            :fields="showFields"
+            :per-page="rowsPerPage"
+            :current-page="currentPage"
+          >
+            <template #head(btn)="data">
+              <b-button v-b-modal.show-config variant="success"> Setup New Show </b-button>
+            </template>
+            <template #cell(btn)="data">
+              <b-button
+                variant="primary"
+                :disabled="
+                  isSubmittingLoad || (CURRENT_SHOW != null && CURRENT_SHOW.id === data.item.id)
+                "
+                @click="loadShow(data.item)"
+              >
+                {{
+                  (CURRENT_SHOW != null && CURRENT_SHOW.id !== data.item.id) || CURRENT_SHOW == null
+                    ? 'Load Show'
+                    : 'Loaded'
+                }}
+              </b-button>
+            </template>
+          </b-table>
+          <b-pagination
+            v-show="AVAILABLE_SHOWS.length > rowsPerPage"
+            v-model="currentPage"
+            :total-rows="AVAILABLE_SHOWS.length"
+            :per-page="rowsPerPage"
+            aria-controls="shows-table"
+            class="justify-content-center"
+          />
+        </b-col>
+      </b-row>
+    </template>
+    <b-row v-else>
+      <b-col class="text-center">
+        <b-spinner label="Loading shows..." variant="primary" />
+      </b-col>
+    </b-row>
+    <b-modal
+      id="show-config"
+      ref="modal"
+      title="Setup New Show"
+      :ok-disabled="isSubmittingShow"
+      @show="resetForm"
+      @hidden="resetForm"
+      @ok="onSubmit"
+    >
+      <div>
+        <b-form ref="form" @submit.stop.prevent="onSubmit">
+          <b-form-group id="name-input-group" label="Name" label-for="name-input">
+            <b-form-input
+              id="name-input"
+              v-model="$v.formState.name.$model"
+              name="name-input"
+              :state="validateState('name')"
+              aria-describedby="name-feedback"
+            />
+
+            <b-form-invalid-feedback id="name-feedback">
+              This is a required field and must be less than 100 characters.
+            </b-form-invalid-feedback>
+          </b-form-group>
+
+          <b-form-group id="start-input-group" label="Start Date" label-for="start-input">
+            <b-form-input
+              id="start-input"
+              v-model="$v.formState.start.$model"
+              name="start-input"
+              type="date"
+              :state="validateState('start')"
+              aria-describedby="start-feedback"
+            />
+            <b-form-invalid-feedback id="start-feedback">
+              This is a required field and must be before or the same as the end date.
+            </b-form-invalid-feedback>
+          </b-form-group>
+
+          <b-form-group id="end-input-group" label="End Date" label-for="end-input">
+            <b-form-input
+              id="end-input"
+              v-model="$v.formState.end.$model"
+              name="end-input"
+              type="date"
+              :state="validateState('end')"
+              aria-describedby="end-feedback"
+            />
+            <b-form-invalid-feedback id="end-feedback">
+              This is a required field and must be after or the same as the start date.
+            </b-form-invalid-feedback>
+          </b-form-group>
+        </b-form>
+      </div>
+      <hr />
+      <div>
+        <b-button v-b-toggle.advanced-options-collapse>
+          <b-icon icon="gear-wide-connected" /> Advanced Options
+        </b-button>
+        <b-collapse id="advanced-options-collapse" style="margin-top: 0.5rem">
+          <b-card>
+            <b-form-group id="script-mode-group" label="Script Mode" label-for="script-mode-input">
+              <b-alert variant="secondary" show>
+                <p>Change the type of script for this show.</p>
+              </b-alert>
+              <b-form-select
+                id="script-mode-input"
+                v-model="$v.formState.script_mode.$model"
+                :options="SCRIPT_MODES"
+                :state="validateState('script_mode')"
+              />
+            </b-form-group>
+          </b-card>
+        </b-collapse>
+      </div>
+      <template #modal-footer="{ ok, cancel }">
+        <b-button variant="secondary" @click.stop="cancel()"> Cancel </b-button>
+        <b-button variant="primary" :disabled="isSubmittingShow" @click.stop="saveAndLoad">
+          Save and Load
+        </b-button>
+        <b-button variant="primary" :disabled="isSubmittingShow" @click.stop="ok()">
+          Save
+        </b-button>
+      </template>
+    </b-modal>
+  </b-container>
+</template>
+
+<script>
+import { required, maxLength } from 'vuelidate/lib/validators';
+import { mapGetters, mapActions } from 'vuex';
+import { makeURL } from '@/js/utils';
+import log from 'loglevel';
+
+export default {
+  name: 'ConfigShows',
+  data() {
+    return {
+      loaded: false,
+      showFields: [
+        { key: 'id', label: 'ID' },
+        'name',
+        'start_date',
+        'end_date',
+        'created_at',
+        { key: 'btn', label: '' },
+      ],
+      rowsPerPage: 15,
+      currentPage: 1,
+      isSubmittingLoad: false,
+      isSubmittingShow: false,
+      formState: {
+        name: null,
+        start: null,
+        end: null,
+        script_mode: null,
+      },
+    };
+  },
+  validations: {
+    formState: {
+      name: {
+        required,
+        maxLength: maxLength(100),
+      },
+      start: {
+        required,
+        beforeEnd: (value, vm) =>
+          value == null && vm.end != null ? false : new Date(value) <= new Date(vm.end),
+      },
+      end: {
+        required,
+        afterStart: (value, vm) =>
+          value == null && vm.start != null ? false : new Date(value) >= new Date(vm.start),
+      },
+      script_mode: {
+        required,
+      },
+    },
+  },
+  computed: {
+    ...mapGetters(['AVAILABLE_SHOWS', 'CURRENT_SHOW', 'SCRIPT_MODES']),
+  },
+  async mounted() {
+    await Promise.all([this.GET_AVAILABLE_SHOWS(), this.GET_SCRIPT_MODES()]);
+    this.loaded = true;
+  },
+  methods: {
+    async saveAndLoad(event) {
+      await this.saveShow(event, true);
+    },
+    async onSubmit(event) {
+      await this.saveShow(event, false);
+    },
+    async saveShow(event, load) {
+      this.$v.formState.$touch();
+      if (this.$v.formState.$anyError) {
+        event.preventDefault();
+        return;
+      }
+
+      if (this.isSubmittingShow) {
+        event.preventDefault();
+        return;
+      }
+
+      this.isSubmittingShow = true;
+
+      try {
+        const searchParams = new URLSearchParams({
+          load,
+        });
+        const response = await fetch(`${makeURL('/api/v1/show')}?${searchParams}`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(this.formState),
+        });
+        if (response.ok) {
+          await this.GET_AVAILABLE_SHOWS();
+          this.$toast.success('Created new show!');
+          this.$bvModal.hide('show-config');
+          this.resetForm();
+        } else {
+          this.$toast.error('Unable to save show');
+          log.error('Unable to create new show');
+          event.preventDefault();
+        }
+      } catch (error) {
+        this.$toast.error('Unable to save show');
+        log.error('Error creating new show:', error);
+        event.preventDefault();
+      } finally {
+        this.isSubmittingShow = false;
+      }
+    },
+    async loadShow(show) {
+      if (this.isSubmittingLoad) {
+        return;
+      }
+
+      this.isSubmittingLoad = true;
+
+      try {
+        const response = await fetch(`${makeURL('/api/v1/settings')}`, {
+          method: 'PATCH',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            current_show: show.id,
+          }),
+        });
+        if (response.ok) {
+          this.$toast.success('Loaded show!');
+          this.$bvModal.hide('show-load');
+        } else {
+          this.$toast.error('Unable to load show');
+          log.error('Unable to load show');
+        }
+      } catch (error) {
+        this.$toast.error('Unable to load show');
+        log.error('Error loading show:', error);
+      } finally {
+        this.isSubmittingLoad = false;
+      }
+    },
+    validateState(name) {
+      const { $dirty, $error } = this.$v.formState[name];
+      return $dirty ? !$error : null;
+    },
+    resetForm() {
+      this.formState = {
+        name: null,
+        start: null,
+        end: null,
+        script_mode: this.SCRIPT_MODES[0].value,
+      };
+      this.isSubmittingShow = false;
+
+      this.$nextTick(() => {
+        this.$v.$reset();
+      });
+    },
+    ...mapActions(['GET_AVAILABLE_SHOWS', 'GET_SCRIPT_MODES']),
+  },
+};
+</script>
diff --git a/client/src/vue_components/config/ConfigSystem.vue b/client/src/vue_components/config/ConfigSystem.vue
index bbb3743b..4a826896 100644
--- a/client/src/vue_components/config/ConfigSystem.vue
+++ b/client/src/vue_components/config/ConfigSystem.vue
@@ -2,42 +2,6 @@
   <div v-if="!loading" class="config">
     <b-table-simple>
       <b-tbody>
-        <b-tr>
-          <b-td>
-            <b>Current Show</b>
-          </b-td>
-          <b-td>
-            <p v-if="currentShowLoaded">
-              {{ $store.state.currentShow['name'] }}
-            </p>
-            <b v-else>No show loaded</b>
-          </b-td>
-          <b-td>
-            <b-button-group>
-              <b-button
-                v-b-modal.show-load
-                variant="outline-success"
-                :disabled="$store.state.system.availableShows.length === 0"
-              >
-                Load Show
-              </b-button>
-              <b-button v-b-modal.show-config variant="outline-success"> Setup New Show </b-button>
-            </b-button-group>
-          </b-td>
-        </b-tr>
-        <b-tr>
-          <b-td>
-            <b>Connected Clients</b>
-          </b-td>
-          <b-td>
-            {{ connectedClients.length }}
-          </b-td>
-          <b-td>
-            <b-button v-b-modal.connected-clients variant="outline-success">
-              View Clients
-            </b-button>
-          </b-td>
-        </b-tr>
         <b-tr>
           <b-td>
             <b>Version</b>
@@ -77,118 +41,21 @@
             </b-button>
           </b-td>
         </b-tr>
+        <b-tr>
+          <b-td>
+            <b>Connected Clients</b>
+          </b-td>
+          <b-td>
+            {{ connectedClients.length }}
+          </b-td>
+          <b-td>
+            <b-button v-b-modal.connected-clients variant="outline-success">
+              View Clients
+            </b-button>
+          </b-td>
+        </b-tr>
       </b-tbody>
     </b-table-simple>
-    <b-modal
-      id="show-config"
-      ref="modal"
-      title="Setup New Show"
-      :ok-disabled="isSubmittingShow"
-      @show="resetForm"
-      @hidden="resetForm"
-      @ok="onSubmit"
-    >
-      <div>
-        <b-form ref="form" @submit.stop.prevent="onSubmit">
-          <b-form-group id="name-input-group" label="Name" label-for="name-input">
-            <b-form-input
-              id="name-input"
-              v-model="$v.formState.name.$model"
-              name="name-input"
-              :state="validateState('name')"
-              aria-describedby="name-feedback"
-            />
-
-            <b-form-invalid-feedback id="name-feedback">
-              This is a required field and must be less than 100 characters.
-            </b-form-invalid-feedback>
-          </b-form-group>
-
-          <b-form-group id="start-input-group" label="Start Date" label-for="start-input">
-            <b-form-input
-              id="start-input"
-              v-model="$v.formState.start.$model"
-              name="start-input"
-              type="date"
-              :state="validateState('start')"
-              aria-describedby="start-feedback"
-            />
-            <b-form-invalid-feedback id="start-feedback">
-              This is a required field and must be before or the same as the end date.
-            </b-form-invalid-feedback>
-          </b-form-group>
-
-          <b-form-group id="end-input-group" label="End Date" label-for="end-input">
-            <b-form-input
-              id="end-input"
-              v-model="$v.formState.end.$model"
-              name="end-input"
-              type="date"
-              :state="validateState('end')"
-              aria-describedby="end-feedback"
-            />
-            <b-form-invalid-feedback id="end-feedback">
-              This is a required field and must be after or the same as the start date.
-            </b-form-invalid-feedback>
-          </b-form-group>
-        </b-form>
-      </div>
-      <hr />
-      <div>
-        <b-button v-b-toggle.advanced-options-collapse>
-          <b-icon icon="gear-wide-connected" /> Advanced Options
-        </b-button>
-        <b-collapse id="advanced-options-collapse" style="margin-top: 0.5rem">
-          <b-card>
-            <b-form-group id="script-mode-group" label="Script Mode" label-for="script-mode-input">
-              <b-alert variant="secondary" show>
-                <p>Change the type of script for this show.</p>
-              </b-alert>
-              <b-form-select
-                id="script-mode-input"
-                v-model="$v.formState.script_mode.$model"
-                :options="SCRIPT_MODES"
-                :state="validateState('script_mode')"
-              />
-            </b-form-group>
-          </b-card>
-        </b-collapse>
-      </div>
-      <template #modal-footer="{ ok, cancel }">
-        <b-button variant="secondary" @click.stop="cancel()"> Cancel </b-button>
-        <b-button variant="primary" :disabled="isSubmittingShow" @click.stop="saveAndLoad">
-          Save and Load
-        </b-button>
-        <b-button variant="primary" :disabled="isSubmittingShow" @click.stop="ok()">
-          Save
-        </b-button>
-      </template>
-    </b-modal>
-    <b-modal id="show-load" ref="load-modal" title="Load Show" size="lg">
-      <div class="overflow-auto">
-        <b-table
-          id="shows-table"
-          :items="$store.state.system.availableShows"
-          :fields="showFields"
-          :per-page="perPage"
-          :current-page="currentPageShows"
-          small
-        >
-          <template #cell(btn)="data">
-            <b-button variant="primary" :disabled="isSubmittingLoad" @click="loadShow(data.item)">
-              Load Show
-            </b-button>
-          </template>
-        </b-table>
-        <b-pagination
-          v-model="currentPageShows"
-          :total-rows="$store.state.system.availableShows.length"
-          :per-page="perPage"
-          aria-controls="shows-table"
-          class="justify-content-center"
-        />
-      </div>
-    </b-modal>
     <b-modal
       id="connected-clients"
       ref="connected-clients-modal"
@@ -196,7 +63,7 @@
       size="lg"
     >
       <b-table
-        id="shows-table"
+        id="connected-clients-table"
         :items="connectedClients"
         :fields="clientFields"
         :per-page="perPage"
@@ -207,7 +74,7 @@
         v-model="currentPageClients"
         :total-rows="connectedClients.length"
         :per-page="perPage"
-        aria-controls="shows-table"
+        aria-controls="connected-clients-table"
         class="justify-content-center"
       />
     </b-modal>
@@ -218,8 +85,6 @@
 </template>
 
 <script>
-import { required, maxLength } from 'vuelidate/lib/validators';
-import { mapMutations, mapActions, mapGetters } from 'vuex';
 import log from 'loglevel';
 
 import { makeURL } from '@/js/utils';
@@ -229,23 +94,6 @@ export default {
   data() {
     return {
       perPage: 5,
-      currentPageShows: 1,
-      isSubmittingShow: false,
-      isSubmittingLoad: false,
-      formState: {
-        name: null,
-        start: null,
-        end: null,
-        script_mode: null,
-      },
-      showFields: [
-        { key: 'id', label: 'ID' },
-        'name',
-        'start_date',
-        'end_date',
-        'created_at',
-        { key: 'btn', label: '' },
-      ],
       connectedClients: [],
       currentPageClients: 1,
       clientFields: [
@@ -270,43 +118,8 @@ export default {
       timeUpdateInterval: null,
     };
   },
-  validations: {
-    formState: {
-      name: {
-        required,
-        maxLength: maxLength(100),
-      },
-      start: {
-        required,
-        beforeEnd: (value, vm) =>
-          value == null && vm.end != null ? false : new Date(value) <= new Date(vm.end),
-      },
-      end: {
-        required,
-        afterStart: (value, vm) =>
-          value == null && vm.start != null ? false : new Date(value) >= new Date(vm.start),
-      },
-      script_mode: {
-        required,
-      },
-    },
-  },
-  computed: {
-    currentShowLoaded() {
-      return (
-        this.$store.state.system.settings.current_show != null &&
-        this.$store.state.currentShow != null
-      );
-    },
-    ...mapGetters(['SCRIPT_MODES']),
-  },
   async mounted() {
-    await Promise.all([
-      this.getAvailableShows(),
-      this.getConnectedClients(),
-      this.GET_SCRIPT_MODES(),
-      this.getVersionStatus(),
-    ]);
+    await Promise.all([this.getConnectedClients(), this.getVersionStatus()]);
     this.loading = false;
 
     // Start time update interval for reactive "time ago" display
@@ -322,123 +135,16 @@ export default {
     }
   },
   methods: {
-    async getAvailableShows() {
-      const response = await fetch(`${makeURL('/api/v1/shows')}`);
-      if (response.ok) {
-        const shows = await response.json();
-        this.UPDATE_SHOWS(shows.shows);
-      } else {
-        log.error('Unable to get available shows');
-      }
-    },
     async getConnectedClients() {
       const response = await fetch(`${makeURL('/api/v1/ws/sessions')}`);
       if (response.ok) {
         const sessions = await response.json();
         this.connectedClients = sessions.sessions;
       } else {
-        log.error('Unable to get available shows');
+        log.error('Unable to get available connected clients');
       }
       this.clientTimeout = setTimeout(this.getConnectedClients, 1000);
     },
-    validateState(name) {
-      const { $dirty, $error } = this.$v.formState[name];
-      return $dirty ? !$error : null;
-    },
-    resetForm() {
-      this.formState = {
-        name: null,
-        start: null,
-        end: null,
-        script_mode: this.SCRIPT_MODES[0].value,
-      };
-      this.isSubmittingShow = false;
-
-      this.$nextTick(() => {
-        this.$v.$reset();
-      });
-    },
-    async saveAndLoad(event) {
-      await this.saveShow(event, true);
-    },
-    async onSubmit(event) {
-      await this.saveShow(event, false);
-    },
-    async saveShow(event, load) {
-      this.$v.formState.$touch();
-      if (this.$v.formState.$anyError) {
-        event.preventDefault();
-        return;
-      }
-
-      if (this.isSubmittingShow) {
-        event.preventDefault();
-        return;
-      }
-
-      this.isSubmittingShow = true;
-
-      try {
-        const searchParams = new URLSearchParams({
-          load,
-        });
-        const response = await fetch(`${makeURL('/api/v1/show')}?${searchParams}`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(this.formState),
-        });
-        if (response.ok) {
-          const settings = await response.json();
-          await this.getAvailableShows();
-          this.$toast.success('Created new show!');
-          this.$bvModal.hide('show-config');
-          this.resetForm();
-        } else {
-          this.$toast.error('Unable to save show');
-          log.error('Unable to create new show');
-          event.preventDefault();
-        }
-      } catch (error) {
-        this.$toast.error('Unable to save show');
-        log.error('Error creating new show:', error);
-        event.preventDefault();
-      } finally {
-        this.isSubmittingShow = false;
-      }
-    },
-    async loadShow(show) {
-      if (this.isSubmittingLoad) {
-        return;
-      }
-
-      this.isSubmittingLoad = true;
-
-      try {
-        const response = await fetch(`${makeURL('/api/v1/settings')}`, {
-          method: 'PATCH',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            current_show: show.id,
-          }),
-        });
-        if (response.ok) {
-          this.$toast.success('Loaded show!');
-          this.$bvModal.hide('show-load');
-        } else {
-          this.$toast.error('Unable to load show');
-          log.error('Unable to load show');
-        }
-      } catch (error) {
-        this.$toast.error('Unable to load show');
-        log.error('Error loading show:', error);
-      } finally {
-        this.isSubmittingLoad = false;
-      }
-    },
     async getVersionStatus() {
       try {
         const response = await fetch(`${makeURL('/api/v1/version/status')}`);
@@ -526,8 +232,6 @@ export default {
       }
       return `${Math.floor(seconds / 86400)} days ago`;
     },
-    ...mapMutations(['UPDATE_SHOWS']),
-    ...mapActions(['GET_SCRIPT_MODES']),
   },
 };
 </script>