diff --git a/resources/assets/components/admin/partial/AdminSettingsCheckbox.vue b/resources/assets/components/admin/partial/AdminSettingsCheckbox.vue
new file mode 100644
index 000000000..bb8cfec96
--- /dev/null
+++ b/resources/assets/components/admin/partial/AdminSettingsCheckbox.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="card shadow-none border card-body">
+        <div class="form-group mb-0">
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox" :name="elementId" class="custom-control-input" :id="elementId" :checked="value" @change="$emit('change', !value)">
+                <label class="custom-control-label font-weight-bold" :for="elementId">{{ name }}</label>
+            </div>
+            <p class="mt-1 mb-0 small text-muted" v-html="description"></p>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            name: {
+                type: String
+            },
+
+            value: {
+                type: Boolean
+            },
+
+            description: {
+                type: String
+            }
+        },
+
+        computed: {
+            elementId: {
+                get() {
+                    let name = this.name;
+                    name = name.toLowerCase();
+                    name = name.replace(/[^a-z0-9 -]/g, ' ');
+                    name = name.replace(/\s+/g, '-');
+                    name = name.replace(/^-+|-+$/g, '');
+                    return 'fec_' + name;
+                }
+            }
+        }
+    }
+</script>
diff --git a/resources/assets/components/admin/partial/AdminSettingsInput.vue b/resources/assets/components/admin/partial/AdminSettingsInput.vue
new file mode 100644
index 000000000..25309134d
--- /dev/null
+++ b/resources/assets/components/admin/partial/AdminSettingsInput.vue
@@ -0,0 +1,74 @@
+<template>
+    <div :class="[ isCard ? 'card shadow-none border card-body' : '' ]">
+        <div
+            class="form-group"
+            :class="[ isInline ? 'd-flex align-items-center gap-1' : 'mb-1' ]">
+            <label :for="elementId" class="font-weight-bold mb-0">{{ name }}</label>
+            <input
+                :id="elementId"
+                class="form-control form-control-muted mb-0"
+                :placeholder="placeholder"
+                :value="value"
+                @input="$emit('change', $event.target.value)"
+                :disabled="isDisabled" />
+        </div>
+        <p v-if="description && description.length" class="help-text small text-muted mb-0" v-html="description">
+        </p>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            name: {
+                type: String
+            },
+
+            value: {
+                type: String
+            },
+
+            placeholder: {
+                type: String
+            },
+
+            description: {
+                type: String
+            },
+
+            isCard: {
+                type: Boolean,
+                default: true
+            },
+
+            isInline: {
+                type: Boolean,
+                default: false
+            },
+
+            isDisabled: {
+                type: Boolean,
+                default: false
+            }
+        },
+
+        computed: {
+            elementId: {
+                get() {
+                    let name = this.name;
+                    name = name.toLowerCase();
+                    name = name.replace(/[^a-z0-9 -]/g, ' ');
+                    name = name.replace(/\s+/g, '-');
+                    name = name.replace(/^-+|-+$/g, '');
+                    return 'fec_' + name;
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped="true">
+    .gap-1 {
+        gap: 1rem;
+    }
+</style>
diff --git a/resources/assets/components/admin/partial/AdminSettingsTabHeader.vue b/resources/assets/components/admin/partial/AdminSettingsTabHeader.vue
new file mode 100644
index 000000000..ac75d3f37
--- /dev/null
+++ b/resources/assets/components/admin/partial/AdminSettingsTabHeader.vue
@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <div class="d-flex justify-content-between align-items-center">
+            <div style="width:100px;"></div>
+            <div>
+                <h2 class="display-4 mb-0" style="font-weight: 800;">{{ title }}</h2>
+            </div>
+            <div>
+                <button
+                    class="btn btn-primary rounded-pill font-weight-bold px-5"
+                    :disabled="isSaving || saved"
+                    @click.prevent="save">
+                    <template v-if="isSaving === true"><b-spinner small class="mx-2" /></template>
+                    <template v-else>{{ buttonLabel }}</template>
+                </button>
+            </div>
+        </div>
+        <hr class="mt-3">
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            title: {
+                type: String
+            },
+            saving: {
+                type: Boolean
+            },
+            saved: {
+                type: Boolean
+            }
+        },
+
+        computed: {
+            buttonLabel: {
+                get() {
+                    if(this.saved) {
+                        return 'Saved';
+                    }
+                    if(this.saving) {
+                        return 'Saving';
+                    }
+
+                    return 'Save';
+                }
+            },
+            isSaving: {
+                get() {
+                    return this.saving;
+                }
+            }
+        },
+
+        methods: {
+            save($event) {
+                $event.currentTarget?.blur();
+                this.$emit('save');
+            }
+        }
+    }
+</script>