diff --git a/public/js/components/Tabs.js b/public/js/components/Tabs.js
index 84104b812..fed6957a0 100644
--- a/public/js/components/Tabs.js
+++ b/public/js/components/Tabs.js
@@ -6,12 +6,19 @@ export default {
 		accessibility
 	},
 	emits: [
-		'update:modelValue'
+		'update:modelValue',
+		'change',
+		'changed'
 	],
 	props: {
-		configUrl: String,
+		// TODO(chris): rename to config?
+		config: {
+			type: [String, Object],
+			required: true
+		},
 		default: String,
-		modelValue: [String, Number, Boolean, Array, Object, Date, Function, Symbol]
+		modelValue: [String, Number, Boolean, Array, Object, Date, Function, Symbol],
+		vertical: Boolean
 	},
 	data() {
 		return {
@@ -35,50 +42,85 @@ export default {
 			}
 		}
 	},
-	created() {
-		CoreRESTClient
-			.get(this.configUrl)
-			.then(result => CoreRESTClient.getData(result.data))
-			.then(result => {
-				const tabs = {};
-				// TODO(chris): check if result is array
-				Object.entries(result).forEach(([key, config]) => {
-					if (!config.component)
+	watch: {
+		config(n) {
+			this.initConfig(n);
+		}
+	},
+	methods: {
+		change(key) {
+			this.$emit("change", key)
+			this.current = key;
+			this.$nextTick(() => this.$emit("changed", key));
+		},
+		initConfig(config) {
+			if (!config)
+				return;
+			if (typeof config === 'string' || config instanceof String)
+				return CoreRESTClient.get(config)
+					.then(result => CoreRESTClient.getData(result.data))
+					.then(this.initConfig)
+					.catch(this.$fhcAlert.handleSystemError);
+
+			console.log(config);
+			const tabs = {};
+
+			if (Array.isArray(config)) {
+				config.forEach((item, key) => {
+					if (!item.component)
 						return console.error('Component missing for ' + key);
 
 					tabs[key] = {
-						component: Vue.markRaw(Vue.defineAsyncComponent(() => import(config.component))),
-						title: config.title || key,
-						config: config.config,
+						component: Vue.markRaw(Vue.defineAsyncComponent(() => import(item.component))),
+						title: item.title || key,
+						config: item.config,
 						key
 					}
 				});
+			} else {
+				Object.entries(config).forEach(([key, item]) => {
+					if (!item.component)
+						return console.error('Component missing for ' + key);
+
+					tabs[key] = {
+						component: Vue.markRaw(Vue.defineAsyncComponent(() => import(item.component))),
+						title: item.title || key,
+						config: item.config,
+						key
+					}
+				});
+			}
+
+			if (this.current === null || !tabs[this.current]) {
 				if (tabs[this.default])
 					this.current = this.default;
 				else
 					this.current = Object.keys(tabs)[0];
-				this.tabs = tabs;
-			})
-			.catch(this.$fhcAlert.handleSystemError);
+			}
+			this.tabs = tabs;
+		}
+	},
+	created() {
+		this.initConfig(this.config);
 	},
 	template: `
-	<div class="fhc-tabs d-flex flex-column">
-		<div class="nav nav-tabs">
+	<div class="fhc-tabs d-flex" :class="vertical ? 'align-items-stretch' : 'flex-column'" v-if="Object.keys(tabs).length">
+		<div class="nav" :class="vertical ? 'nav-pills flex-column' : 'nav-tabs'">
 			<div
 				v-for="tab in tabs"
 				:key="tab.key"
 				class="nav-item nav-link"
 				:class="{active: tab.key == current}"
-				@click="current=tab.key"
+				@click="change(tab.key)"
 				:aria-current="tab.key == current ? 'page' : ''"
-				v-accessibility:tab
+				v-accessibility:tab.[vertical]
 				>
 				{{tab.title}}
 			</div>
 		</div>
-		<div style="flex: 1 1 0%; height: 0%" class="border-bottom border-start border-end overflow-auto p-3">
+		<div :style="vertical ? '' : 'flex: 1 1 0%; height: 0%'" class="overflow-auto p-3" :class="vertical ? '' : 'border-bottom border-start border-end'">
 			<keep-alive>
-				<component :is="currentTab.component" v-model="value" :config="currentTab.config"></component>
+				<component ref="current" :is="currentTab.component" v-model="value" :config="currentTab.config"></component>
 			</keep-alive>
 		</div>
 	</div>`