diff --git a/src/App.vue b/src/App.vue
index f99a068..64fcfe4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="layout" class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+  <component :is="layout" class="text-gray-700 dark:text-gray-200">
     <router-view />
   </component>
 </template>
@@ -7,11 +7,17 @@
 // <Footer />
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { AppDefsAction } from '~/store/types'
 // import AppLayout from '~/layouts/AppLayout.vue'
 import { useHead } from '@vueuse/head'
 // https://github.com/vueuse/head
 // you can use this to manipulate the document head in any components,
 // they will be rendered correctly in the html results with vite-ssg
+
+import defs from '../assets/defs.json'
+
+const store = useStore()
 useHead({
   title: 'Status',
   meta: [
@@ -23,4 +29,9 @@ const appLayout = 'AppLayout'
 const layout = computed(() => {
   return `${currentRoute.value.meta.layout || appLayout}`
 })
+onBeforeMount(() => {
+	if (defs) {
+		store.dispatch(AppDefsAction.addDefs, { key: 'ui', defs })
+	}
+})
 </script>
\ No newline at end of file
diff --git a/src/styles/main.css b/src/styles/main.css
index 6829bd1..c53bccb 100755
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -10,6 +10,24 @@ html.dark {
   background: #121212;
 }
 
+.markdown-body {
+	margin: 2em;
+}
+.markdown-body p {
+	margin-top: 1em;;
+	font-size: 1em;
+}
+
+.markdown-body pre {
+	padding: 2em;
+	background: rgba(243,244,246);
+}
+.dark .markdown-body pre {
+	background: rgba(75, 85, 99,var(--tw-bg-opacity))
+}
+.markdown-body a {
+	color: rgba(37, 99, 235);
+}
 .btn {
   @apply px-4 py-1 rounded inline-block
     bg-teal-600 text-white cursor-pointer