diff --git a/public/config.json b/public/config.json
index 8a5b509..a2fc048 100644
--- a/public/config.json
+++ b/public/config.json
@@ -1,4 +1,14 @@
 {
+    "app_name": "shacl-vue",
+    "documentation_url": "",
+    "source_code_url": "",
+    "app_theme": {
+        "link_color": "#41b883",
+        "hover_color": "#1565C0",
+        "active_color": "#D32F2F",
+        "panel_color": "#41b883",
+        "logo": "shacl_vue_logo.svg"
+    },
     "shapes_url": "dlschemas_shacl.ttl",
     "use_default_shapes": false,
     "data_url": "dlschemas_data.ttl",
diff --git a/public/shacl_vue_logo.svg b/public/shacl_vue_logo.svg
new file mode 100644
index 0000000..ce1a35c
--- /dev/null
+++ b/public/shacl_vue_logo.svg
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   viewBox="0 0 285.89751 262.1539"
+   id="svg834"
+   sodipodi:docname="shacl_vue.svg"
+   inkscape:version="1.1.1 (c3084ef, 2021-09-22)"
+   width="285.89752"
+   height="262.1539"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs838" />
+  <sodipodi:namedview
+     id="namedview836"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="0.75363192"
+     inkscape:cx="291.9197"
+     inkscape:cy="173.82491"
+     inkscape:window-width="1440"
+     inkscape:window-height="798"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg834" />
+  <g
+     id="g2754"
+     transform="translate(11.355959,59.400927)">
+    <g
+       transform="matrix(1.2528809,0,0,-1.2528809,161.756,25.534666)"
+       id="g826">
+      <path
+         d="M 7.9816046,14.366888 -22.669,-39.264 -51.80895,13.963629 -124.39961,1.1902026 -64.014426,-102.75402 -22.669,-134.98693 16.856526,-102.29905 75.491,0 Z"
+         fill="#41b883"
+         id="path824"
+         sodipodi:nodetypes="ccccccccc" />
+    </g>
+    <path
+       d="m 177.13948,124.33174 c -1.01433,-1.7475 -2.13362,-3.39583 -3.3032,-4.97292 l 1.16512,0.60347 c 0,0 -7.15478,-10.55481 11.82765,-42.872165 18.99045,-32.315637 32.6578,-31.31742 32.6578,-31.31742 l -1.51727,-0.857315 c 10.2555,0.867244 20.8697,-1.25871 30.46551,-6.811558 24.98446,-14.434878 33.52289,-46.4070996 19.08384,-71.394159 -14.45325,-24.980208 -46.40635,-33.53732 -71.39616,-19.079296 -10.2605,5.92405 -17.68966,14.837073 -21.94932,24.972901 l -0.0211,-1.094122 c 0,0 -4.59706,13.157223 -42.11471,13.05612 -37.518469,-0.0892 -44.49225,-16.06568 -44.49225,-16.06568 l 0.05946,1.630424 c -0.474307,-0.96083 -0.910966,-1.913035 -1.455355,-2.83983 C 71.705321,-57.69925 39.739501,-66.251892 14.751627,-51.800941 -10.231185,-37.350139 -18.772981,-5.3924303 -4.3345275,19.600878 6.4396676,38.218001 26.929724,47.699726 47.018829,45.334443 l -0.641765,0.382212 c 0,0 14.900434,-1.950505 33.752499,30.987771 14.88658,25.997384 10.856459,39.850474 8.520432,44.538834 -10.837431,16.0513 -12.338042,37.50127 -1.992686,55.39619 14.439351,24.99056 46.410521,33.53331 71.391931,19.08742 24.98675,-14.44254 33.54164,-46.41193 19.09023,-71.39512 z M 123.5215,98.946902 C 119.14634,97.976804 108.03652,92.990545 93.706186,67.97784 78.195737,40.877414 81.26673,28.248728 82.722508,24.791009 c 2.71192,-3.604418 4.876699,-7.541415 6.542158,-11.656981 l 0.0088,0.302647 c 0,0 4.45834,-11.3658452 41.513284,-11.2739555 33.15981,0.092006 42.18099,9.8250965 43.71842,11.8628405 0.74887,1.696766 1.58368,3.361948 2.52788,4.99777 1.79858,3.107964 3.87009,5.961763 6.16058,8.541792 1.33209,5.182993 1.83231,17.845172 -12.12928,41.600364 -14.05944,23.942385 -26.64193,28.701958 -32.41631,29.556291 -4.98518,-0.666546 -10.08298,-0.588164 -15.12655,0.225125 z"
+       fill="#0c479c"
+       id="path924"
+       style="fill:#34495e;fill-opacity:1;stroke-width:0.702033" />
+    <g
+       id="g928"
+       transform="matrix(0.59546034,0.37185665,-0.37185665,0.59546034,48.20801,-177.45852)">
+      <path
+         d="m 294.631,32.4 c -21.659,23.694 -22.118,58.544 -1.246,78.264 -10.316,-9.935 -10.093,-30.608 0.33,-50.387 1.342,-1.774 5.224,-5.961 10.898,-4.055 0.569,0.194 0.951,0.245 1.17,0.213 1.284,0.278 2.601,0.439 3.96,0.381 8.622,-0.393 15.288,-7.684 14.898,-16.307 -0.175,-3.868 -1.78,-7.292 -4.26,-9.92 20.007,-13.107 42.968,-14.61 52.375,-6.016 l 0.359,0.025 C 351.625,4.97 316.493,8.476 294.631,32.4 Z"
+         fill="#ffffff"
+         id="path926" />
+    </g>
+    <g
+       id="g934"
+       transform="matrix(0.59546034,0.37185665,-0.37185665,0.59546034,48.20801,-177.45852)">
+      <path
+         d="m 76.205,251.381 c -0.184,-0.19 -0.371,-0.406 -0.562,-0.598 0.121,0.125 0.235,0.279 0.378,0.407 z"
+         fill="#ffffff"
+         id="path930" />
+      <path
+         d="m 76.894,172.52 c -21.663,23.694 -22.114,58.541 -1.251,78.264 -10.313,-9.935 -10.092,-30.608 0.331,-50.387 1.345,-1.778 5.231,-5.961 10.906,-4.055 0.565,0.195 0.946,0.242 1.167,0.212 1.283,0.275 2.603,0.44 3.959,0.377 8.623,-0.392 15.288,-7.684 14.899,-16.303 -0.179,-3.867 -1.782,-7.296 -4.252,-9.92 19.995,-13.107 42.959,-14.617 52.366,-6.021 l 0.355,0.03 c -21.483,-19.631 -56.623,-16.126 -78.48,7.803 z"
+         fill="#ffffff"
+         id="path932" />
+    </g>
+    <g
+       id="g940"
+       transform="matrix(0.59546034,0.37185665,-0.37185665,0.59546034,48.20801,-177.45852)">
+      <path
+         d="m 306.701,370.015 c -0.187,-0.191 -0.374,-0.404 -0.564,-0.594 0.117,0.125 0.237,0.279 0.378,0.402 z"
+         fill="#ffffff"
+         id="path936" />
+      <path
+         d="m 307.39,291.145 c -21.666,23.704 -22.118,58.553 -1.254,78.276 -10.317,-9.935 -10.09,-30.611 0.331,-50.388 1.344,-1.781 5.227,-5.96 10.906,-4.053 0.568,0.189 0.941,0.242 1.166,0.212 1.282,0.277 2.605,0.44 3.963,0.381 8.617,-0.396 15.28,-7.692 14.891,-16.32 -0.176,-3.864 -1.781,-7.288 -4.252,-9.917 20.002,-13.103 42.959,-14.61 52.37,-6.016 l 0.355,0.029 c -21.483,-19.631 -56.625,-16.123 -78.476,7.796 z"
+         fill="#ffffff"
+         id="path938" />
+    </g>
+  </g>
+</svg>
diff --git a/src/App.vue b/src/App.vue
index 115b32d..535b3f7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,106 +1,10 @@
 <template>
   <v-app>
-      <AppHeader />
-      <v-main>
-          <v-container fluid v-if="!explore">
-              <div class="banner">
-                  <div class="banner-column" style="text-align: left; margin-left: 8em;">
-                      <h1 style="color: #3451B2">shacl-vue (alpha)</h1>
-                      <h1>Automatic generation of user interfaces from SHACL</h1>
-                      <br>
-                      <div class="banner-buttons">
-                      <v-btn
-                          rounded="xl" size="large" style="margin-right: 1em"
-                          @click="startExploring()"
-                      >🚀 Explore</v-btn>
-                      <v-btn
-                          rounded="xl" size="large" style="margin-right: 1em"
-                          href="https://psychoinformatics-de.github.io/shacl-vue/docs/"
-                          target="_blank"
-                      ><v-icon>mdi-text-box</v-icon>&nbsp;&nbsp;Docs</v-btn>
-                      <v-btn
-                          rounded="xl" size="large"
-                          href="https://github.com/psychoinformatics-de/shacl-vue"
-                          target="_blank"
-                      ><v-icon>mdi-github</v-icon>&nbsp;&nbsp;Code</v-btn>
-                      </div>
-                  </div>
-                  <div class="banner-column" style="margin-right: 6em;">
-                      <v-img
-                      class="mx-auto"
-                      width="40%"
-                      src="./assets/shacl_vue.svg"
-                      ></v-img>
-                  </div>
-              </div> 
-          </v-container>
-          <v-container fluid v-if="explore">
-              <ShaclVue :configUrl="null"></ShaclVue>
-          </v-container>
-      </v-main>
+    <ShaclVue :configUrl="null"></ShaclVue>
   </v-app>
 </template>
 
 
 <script setup>
-  import { ref, provide } from 'vue'
-  const explore = ref(true)
-  function startExploring() {
-      explore.value = true;
-  }
-  const canSubmit = ref(true)
-  const submitButtonPressed = ref(false)
-  function submitFn() {
-      submitButtonPressed.value = true
-  }
-  provide('submitButtonPressed', submitButtonPressed)
-  provide('submitFn', submitFn)
-  provide('canSubmit', canSubmit)
 
-</script>
-
-<style scoped>
-  .banner {
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-      margin: auto;
-  }
-  .banner-column {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      margin: 4em;
-      color: #34495e;
-  }
-  .banner-column h1 {
-      font-size: 2.5em;
-  }
-  .banner-buttons {
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-      margin: auto;
-      margin-top: 1em;
-  }
-</style>
-
-<style>
-    a {
-        color: #41b883;
-        text-decoration: none;
-    }
-
-    a:hover {
-        color: #1565C0;
-        text-decoration: underline;
-    }
-
-    a:visited {
-        color: #42be86;
-    }
-
-    a:active {
-        color: #D32F2F;
-    }
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index 1b10151..5bbbf70 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -1,79 +1,23 @@
 <template>
-  <v-footer height="40" app>
-    <a
-      v-for="item in items"
-      :key="item.title"
-      :href="item.href"
-      :title="item.title"
+  <v-footer height="50">
+    <div
+      class="text-caption text-disabled"
+      style="text-align: center; margin: auto;"
+    >
+      <span class="d-none d-sm-inline-block">Powered by</span>
+      <a      
+      href="item.href"
+      title="shacl-vue"
       class="d-inline-block mx-2 social-link"
       rel="noopener noreferrer"
       target="_blank"
     >
-      <v-icon
-        :icon="item.icon"
-        :size="item.icon === '$vuetify' ? 24 : 16"
-      />
+      <v-icon size="24"><v-img src="/shacl_vue_logo.svg"></v-img></v-icon>
     </a>
-
-    <div
-      class="text-caption text-disabled"
-      style="position: absolute; right: 16px;"
-    >
-      &copy; 2016-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
-      —
-      <a
-        class="text-decoration-none on-surface"
-        href="https://vuetifyjs.com/about/licensing/"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        MIT License
-      </a>
+    <span class="d-none d-sm-inline-block">shacl-vue</span>
     </div>
   </v-footer>
 </template>
 
 <script setup>
-  const items = [
-    {
-      title: 'Vuetify Documentation',
-      icon: `$vuetify`,
-      href: 'https://vuetifyjs.com/',
-    },
-    {
-      title: 'Vuetify Support',
-      icon: 'mdi-shield-star-outline',
-      href: 'https://support.vuetifyjs.com/',
-    },
-    {
-      title: 'Vuetify X',
-      icon: `svg:M2.04875 3.00002L9.77052 13.3248L1.99998 21.7192H3.74882L10.5519 14.3697L16.0486 21.7192H22L13.8437 10.8137L21.0765 3.00002H19.3277L13.0624 9.76874L8.0001 3.00002H2.04875ZM4.62054 4.28821H7.35461L19.4278 20.4308H16.6937L4.62054 4.28821Z`,
-      href: 'https://x.com/vuetifyjs',
-    },
-    {
-      title: 'Vuetify GitHub',
-      icon: `mdi-github`,
-      href: 'https://github.com/vuetifyjs/vuetify',
-    },
-    {
-      title: 'Vuetify Discord',
-      icon: `mdi-discord`,
-      href: 'https://community.vuetifyjs.com/',
-    },
-    {
-      title: 'Vuetify Reddit',
-      icon: `mdi-reddit`,
-      href: 'https://reddit.com/r/vuetifyjs',
-    },
-  ]
 </script>
-
-<style scoped lang="sass">
-  .social-link :deep(.v-icon)
-    color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
-    text-decoration: none
-    transition: .2s ease-in-out
-
-    &:hover
-      color: rgba(25, 118, 210, 1)
-</style>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 5c9b4f8..5a36ae0 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -5,13 +5,13 @@
                 <v-img
                     :width="36"
                     cover
-                    src="../assets/shacl_vue.svg"
+                    :src="props.logo"
                     style="margin-left: 10px;"
                 ></v-img>
             </a>
         </template>
         <v-app-bar-title> 
-            <a @click="goToHome()" class="header-button"><code style="font-size: 1em;">shacl-vue</code></a>
+            <a @click="goToHome()" class="header-button"><code style="font-size: 1em;">{{ appName }}</code></a>
         </v-app-bar-title>
 
         <template v-slot:append>
@@ -37,28 +37,32 @@
                     ></v-btn>
                 </template>
             </v-tooltip>
-            <v-tooltip text="Documentation" location="bottom">
-                <template v-slot:activator="{ props }">
-                    <v-btn 
-                    icon="mdi-text-box"
-                    href="https://psychoinformatics-de.github.io/shacl-vue/docs/"
-                    target="_blank"
-                    v-bind="props"
-                    class="header-button"
-                    ></v-btn>
-                </template>
-            </v-tooltip>
-            <v-tooltip text="Source code" location="bottom">
-                <template v-slot:activator="{ props }">
-                    <v-btn 
-                    icon="mdi-code-not-equal-variant"
-                    href="https://github.com/psychoinformatics-de/shacl-vue"
-                    target="_blank"
-                    v-bind="props"
-                    class="header-button"
-                    ></v-btn>
-                </template>
-            </v-tooltip>
+            <span v-if="documentationUrl">
+                <v-tooltip text="Documentation" location="bottom">
+                    <template v-slot:activator="{ props }">
+                        <v-btn 
+                        icon="mdi-text-box"
+                        :href="documentationUrl"
+                        target="_blank"
+                        v-bind="props"
+                        class="header-button"
+                        ></v-btn>
+                    </template>
+                </v-tooltip>
+            </span>
+            <span v-if="sourceCodeUrl">
+                <v-tooltip text="Source code" location="bottom">
+                    <template v-slot:activator="{ props }">
+                        <v-btn 
+                        icon="mdi-code-not-equal-variant"
+                        :href="sourceCodeUrl"
+                        target="_blank"
+                        v-bind="props"
+                        class="header-button"
+                        ></v-btn>
+                    </template>
+                </v-tooltip>
+            </span>
         </template>
     </v-app-bar>
 
@@ -98,11 +102,18 @@
 <script setup>
     import { inject, onBeforeMount, ref} from 'vue'
     import { useToken } from '@/composables/tokens'
+
+    const props = defineProps({
+        logo: String
+    })
+
     const { token, setToken, clearToken } = useToken()
     const submitFn = inject('submitFn')
     const canSubmit = inject('canSubmit')
+    const appName = inject('appName')
+    const documentationUrl = inject('documentationUrl')
+    const sourceCodeUrl = inject('sourceCodeUrl')
     const visible = ref(false)
-    
     const tokenDialog = ref(false)
     const tokenExists = ref(false)
     const tokenval = ref("")
@@ -153,13 +164,10 @@
 <style scoped>
 
     .header-button {
-        color: black;
+        color: #1d1d1d;
     }
     .header-button:hover {
         text-decoration: none;
         cursor:pointer;
     }
-
-    
-
 </style>
\ No newline at end of file
diff --git a/src/components/ShaclVue.vue b/src/components/ShaclVue.vue
index 44e9b64..98fdd1a 100644
--- a/src/components/ShaclVue.vue
+++ b/src/components/ShaclVue.vue
@@ -1,101 +1,107 @@
 <template>
-    <span v-if="page_ready">
-        <v-card>
-            <v-layout>
-                <v-navigation-drawer
-                    theme="dark"
-                    color="#41b883"
-                    v-model="drawer"
-                    permanent
-                >
-                    <v-list nav selectable :disabled="formOpen" v-model:selected="selectedItem">
-                        <v-list-item  value="data"><h4>Data Types</h4></v-list-item>
-                        <!-- <v-text-field variant="outlined" append-inner-icon="mdi-magnify" density="compact"></v-text-field> -->
-                        <v-list-item
-                            v-for="node in idFilteredNodeShapeNames"
-                            :prepend-icon="getClassIcon(nodeShapeNames[node])"
-                            :title="node"
-                            @click="selectType(nodeShapeNames[node], true)">
-                        </v-list-item>
-                    </v-list>
-                </v-navigation-drawer>
-                <v-main style="min-height: 90vh">
-                    <v-container fluid>
-                        <v-row>
-                            <v-col
-                                :cols="formOpen ? 3 : 12"
-                                class="transition-all"
-                                :class="formOpen ? 'opacity-column' : ''"
-                            >
-                                
-                                <span v-if="selectedIRI">
-                                    <h2 class="mx-4 mb-4 truncate-heading">
-                                        {{ toCURIE(selectedIRI, allPrefixes) }}
-                                        &nbsp;&nbsp; <v-btn icon="mdi-plus" size="x-small" variant="tonal" @click="addInstanceItem()"></v-btn>
-                                    </h2>
-
-                                    <p class="mx-4 mb-4" v-html="formattedDescription"></p>
-                                    
-                                    <span v-if="classRecordsLoading">
-                                        <v-skeleton-loader type="list-item-avatar"></v-skeleton-loader>
-                                    </span>
-                                    <span v-else>
-                                        <div v-if="instanceItemsComp.length">
-                                            <span v-for="r in instanceItemsComp">
-                                                <NodeShapeViewer :classIRI="selectedIRI" :quad="r.props.quad" :key="selectedIRI + '-' + r.title + '-' + itemsTrigger" :formOpen="formOpen" :variant="r.title == queried_id ? 'outlined' : 'tonal'"></NodeShapeViewer>
-                                            </span>
-                                        </div>
-                                        <div v-else style="margin-top: 1em; margin-left: 1em;">
-                                            <em>No items</em>
-                                        </div>
-                                    </span>
-                                </span>
-                                <span v-else style="margin-top: 1em; margin-left: 1em;">
-                                    <em>Select a data type</em>
-                                </span>
-
-                            </v-col>
-                            <v-col v-if="formOpen" cols="9">
-                                <v-expansion-panels variant="accordion" v-model="currentOpenForm" class="custompanels">
-                                    <v-expansion-panel
-                                        v-for="(f, i) in openForms"
-                                        :key="f.shapeIRI + '-'+ f.nodeIDX + '-expansionpanel'"
-                                        :value="'panel' + (i+1).toString()"
-                                        :disabled="f.disabled"
+    <AppHeader v-if="config_ready" :logo="configVarsMain.appTheme.logo" />
+    <v-main>
+        <v-container fluid>
+            <span v-if="page_ready">
+                <v-card>
+                    <v-layout>
+                        <v-navigation-drawer
+                            theme="dark"
+                            :color="configVarsMain.appTheme.panel_color"
+                            v-model="drawer"
+                            permanent
+                        >
+                            <v-list nav selectable :disabled="formOpen" v-model:selected="selectedItem">
+                                <v-list-item  value="data"><h4>Data Types</h4></v-list-item>
+                                <!-- <v-text-field variant="outlined" append-inner-icon="mdi-magnify" density="compact"></v-text-field> -->
+                                <v-list-item
+                                    v-for="node in idFilteredNodeShapeNames"
+                                    :prepend-icon="getClassIcon(nodeShapeNames[node])"
+                                    :title="node"
+                                    @click="selectType(nodeShapeNames[node], true)">
+                                </v-list-item>
+                            </v-list>
+                        </v-navigation-drawer>
+                        <v-main style="min-height: 90vh">
+                            <v-container fluid>
+                                <v-row>
+                                    <v-col
+                                        :cols="formOpen ? 3 : 12"
+                                        class="transition-all"
+                                        :class="formOpen ? 'opacity-column' : ''"
                                     >
-                                        <v-expansion-panel-title> <h2><em>Editing: {{ toCURIE(f.shapeIRI, allPrefixes) }} </em></h2></v-expansion-panel-title>
-                                        <v-expansion-panel-text density="compact">
-                                            <span v-if="idRecordLoading">
+                                        
+                                        <span v-if="selectedIRI">
+                                            <h2 class="mx-4 mb-4 truncate-heading">
+                                                {{ toCURIE(selectedIRI, allPrefixes) }}
+                                                &nbsp;&nbsp; <v-btn icon="mdi-plus" size="x-small" variant="tonal" @click="addInstanceItem()"></v-btn>
+                                            </h2>
+
+                                            <p class="mx-4 mb-4" v-html="formattedDescription"></p>
+                                            
+                                            <span v-if="classRecordsLoading">
                                                 <v-skeleton-loader type="list-item-avatar"></v-skeleton-loader>
                                             </span>
                                             <span v-else>
-                                                <FormEditor :key="f.shapeIRI + '-'+ f.nodeIDX + '-form-' + f.formType" :shape_iri="f.shapeIRI" :node_idx="f.nodeIDX"></FormEditor>
+                                                <div v-if="instanceItemsComp.length">
+                                                    <span v-for="r in instanceItemsComp">
+                                                        <NodeShapeViewer :classIRI="selectedIRI" :quad="r.props.quad" :key="selectedIRI + '-' + r.title + '-' + itemsTrigger" :formOpen="formOpen" :variant="r.title == queried_id ? 'outlined' : 'tonal'"></NodeShapeViewer>
+                                                    </span>
+                                                </div>
+                                                <div v-else style="margin-top: 1em; margin-left: 1em;">
+                                                    <em>No items</em>
+                                                </div>
                                             </span>
-                                        </v-expansion-panel-text>
-                                    </v-expansion-panel>
-                                </v-expansion-panels>
-                            </v-col>
-                        </v-row>
-                    </v-container>
-                </v-main>
-            </v-layout>
-        </v-card>
-        <v-dialog v-model="submitDialog" max-width="500">
-            <SubmitComp></SubmitComp>
-        </v-dialog>
-        <v-dialog v-model="noSubmitDialog" max-width="500" @click:outside="noSubmitDialog = false">
-            <v-card>
-                <v-card-title>Nothing to submit</v-card-title>
-                <v-card-text>You have no changes to submit</v-card-text>
-                <v-card-actions>
-                    <v-btn @click="noSubmitDialog = false">Close</v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-    </span>
-    <span v-else>
-        <v-skeleton-loader type="article"></v-skeleton-loader>
-    </span>
+                                        </span>
+                                        <span v-else style="margin-top: 1em; margin-left: 1em;">
+                                            <em>Select a data type</em>
+                                        </span>
+
+                                    </v-col>
+                                    <v-col v-if="formOpen" cols="9">
+                                        <v-expansion-panels variant="accordion" v-model="currentOpenForm" class="custompanels">
+                                            <v-expansion-panel
+                                                v-for="(f, i) in openForms"
+                                                :key="f.shapeIRI + '-'+ f.nodeIDX + '-expansionpanel'"
+                                                :value="'panel' + (i+1).toString()"
+                                                :disabled="f.disabled"
+                                            >
+                                                <v-expansion-panel-title> <h2><em>Editing: {{ toCURIE(f.shapeIRI, allPrefixes) }} </em></h2></v-expansion-panel-title>
+                                                <v-expansion-panel-text density="compact">
+                                                    <span v-if="idRecordLoading">
+                                                        <v-skeleton-loader type="list-item-avatar"></v-skeleton-loader>
+                                                    </span>
+                                                    <span v-else>
+                                                        <FormEditor :key="f.shapeIRI + '-'+ f.nodeIDX + '-form-' + f.formType" :shape_iri="f.shapeIRI" :node_idx="f.nodeIDX"></FormEditor>
+                                                    </span>
+                                                </v-expansion-panel-text>
+                                            </v-expansion-panel>
+                                        </v-expansion-panels>
+                                    </v-col>
+                                </v-row>
+                            </v-container>
+                        </v-main>
+                    </v-layout>
+                </v-card>
+                <v-dialog v-model="submitDialog" max-width="500">
+                    <SubmitComp></SubmitComp>
+                </v-dialog>
+                <v-dialog v-model="noSubmitDialog" max-width="500" @click:outside="noSubmitDialog = false">
+                    <v-card>
+                        <v-card-title>Nothing to submit</v-card-title>
+                        <v-card-text>You have no changes to submit</v-card-text>
+                        <v-card-actions>
+                            <v-btn @click="noSubmitDialog = false">Close</v-btn>
+                        </v-card-actions>
+                    </v-card>
+                </v-dialog>
+            </span>
+            <span v-else>
+                <v-skeleton-loader type="article"></v-skeleton-loader>
+            </span>
+        </v-container>
+    </v-main>
+    <AppFooter />
 </template>
 
 
@@ -115,7 +121,8 @@
         getSubjectTriples,
         toIRI,
         addCodeTagsToText, 
-        findObjectByKey
+        findObjectByKey,
+        adjustHexColor
     } from '../modules/utils';
     import {SHACL, RDF, RDFS, DLTHINGS, XSD} from '@/modules/namespaces'
 
@@ -123,14 +130,30 @@
         configUrl: String
     })
 
+    const canSubmit = ref(true)
+    const submitButtonPressed = ref(false)
+    function submitFn() {
+        submitButtonPressed.value = true
+    }
+    provide('submitButtonPressed', submitButtonPressed)
+    provide('submitFn', submitFn)
+    provide('canSubmit', canSubmit)
+
+    const appName = ref("shacl-vue")
+    const documentationUrl = ref("https://psychoinformatics-de.github.io/shacl-vue/docs/")
+    const sourceCodeUrl = ref("https://github.com/psychoinformatics-de/shacl-vue")
+    provide('appName', appName)
+    provide('documentationUrl', documentationUrl)
+    provide('sourceCodeUrl', sourceCodeUrl)
+
     const activatedInstancesSelectEditor = ref(null)
     provide('activatedInstancesSelectEditor', activatedInstancesSelectEditor)
     const lastSavedNode = ref(null)
     provide('lastSavedNode', lastSavedNode)
     const itemsTrigger = ref(false)
     const queried_id = ref(null)
-    const showShapesWoID = ref(true)
-    const { config, configFetched, configError} = useConfig(props.configUrl);
+    const config_ready = ref(false)
+    const { config, configFetched, configError, configVarsMain, loadConfigVars} = useConfig(props.configUrl);
     const classRecordsLoading = ref(false)
     const idRecordLoading = ref(false)
     provide('config', config)
@@ -216,13 +239,9 @@
     provide('page_ready', page_ready)
     const allPrefixes = reactive({});
     provide('allPrefixes', allPrefixes)
-    const submitButtonPressed = inject('submitButtonPressed')
-    const canSubmit = inject('canSubmit')
     const noSubmitDialog = ref(false)
     const submitDialog = ref(false)
     provide('submitDialog', submitDialog)
-    const configPrefixes = ref({})
-    const configClassIcons = ref({})
 
     // When user clicks the submit button
     watch(submitButtonPressed, (newValue) => {
@@ -244,15 +263,16 @@
                 ID_IRI.value = config.value.id_iri
                 console.log(`ID_IRI is: ${ID_IRI.value}`)
             }
-            if (config.value.hasOwnProperty("show_shapes_wo_id")) {
-                showShapesWoID.value = config.value.show_shapes_wo_id
-            }
-            if (config.value.hasOwnProperty("prefixes")) {
-                configPrefixes.value = config.value.prefixes
-            }
-            if (config.value.hasOwnProperty("class_icons")) {
-                configClassIcons.value = config.value.class_icons
-            }
+            // Load all variables from config that are necessary for the main shaclvue component
+            loadConfigVars()
+            appName.value = configVarsMain.appName
+            documentationUrl.value = configVarsMain.documentationUrl
+            sourceCodeUrl.value = configVarsMain.sourceCodeUrl
+            document.documentElement.style.setProperty("--link-color", configVarsMain.appTheme.link_color);
+            document.documentElement.style.setProperty("--hover-color", configVarsMain.appTheme.hover_color);
+            document.documentElement.style.setProperty("--visited-color", adjustHexColor(configVarsMain.appTheme.link_color, -1));
+            document.documentElement.style.setProperty("--active-color", configVarsMain.appTheme.active_color);
+            config_ready.value = true
             await getGraphData()
             await getClassData()
             await getSHACLschema()
@@ -288,7 +308,7 @@
 
     const idFilteredNodeShapeNames = computed(() =>{
 
-        if (showShapesWoID.value === true) {
+        if (configVarsMain.showShapesWoID === true) {
             return nodeShapeNamesArray.value
         }
         var shapeNames = []
@@ -310,9 +330,9 @@
             // Get all prefixes and derive context from it
             Object.assign(allPrefixes, shapePrefixes, graphPrefixes, classPrefixes)
             var allPrefixKeys = Object.keys(allPrefixes)
-            Object.keys(configPrefixes.value).forEach(p => {
+            Object.keys(configVarsMain.prefixes).forEach(p => {
                 if (allPrefixKeys.indexOf(p) < 0) {
-                    allPrefixes[p] = configPrefixes.value[p]
+                    allPrefixes[p] = configVarsMain.prefixes[p]
                 }
             });
             console.log("ALL PREFIXES READY")
@@ -408,9 +428,9 @@
     }
 
     function getClassIcon(class_iri) {
-        if (configClassIcons.value) {
-            if (configClassIcons.value[class_iri] ) {
-                return configClassIcons.value[class_iri]
+        if (configVarsMain.classIcons) {
+            if (configVarsMain.classIcons[class_iri] ) {
+                return configVarsMain.classIcons[class_iri]
             }
         }
         return "mdi-circle-outline"
@@ -548,12 +568,6 @@
             "formType": formType,
             "disabled": false,
             "activatedInstancesSelectEditor": null,
-            // "activatedInstancesSelectEditor": {
-            //     nodeshape_iri: null,
-            //     node_iri: null,
-            //     predicate_iri: null,
-            //     predicate_idx: null,
-            // }
         })
     }
 
@@ -580,7 +594,7 @@
 
 <style>
     .code-style {
-        color: red;
+        color: #ff0000;
         background-color: #f5f5f5;
         padding: 0.1em 0.2em;
         font-family: monospace;
@@ -596,32 +610,27 @@
         margin: 0 !important;
         padding: 0 !important;
     }
-</style>
 
-<style scoped>
-    .banner {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        margin: auto;
+    a {
+        color: var(--link-color);
+        text-decoration: none;
     }
-    .banner-column {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        margin: 4em;
-        color: #34495e;
+
+    a:hover {
+        color: var(--hover-color);
+        text-decoration: underline;
     }
-    .banner-column h1 {
-        font-size: 2.5em;
+
+    a:visited {
+        color: var(--visited-color);
     }
-    .banner-buttons {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        margin: auto;
-        margin-top: 1em;
+
+    a:active {
+        color: var(--active-color);
     }
+</style>
+
+<style scoped>
     .truncate-heading {
         white-space: nowrap; /* Prevent text wrapping */
         overflow: hidden;    /* Hide overflowed text */
diff --git a/src/composables/configuration.js b/src/composables/configuration.js
index 82c8dcb..b45b5c9 100644
--- a/src/composables/configuration.js
+++ b/src/composables/configuration.js
@@ -3,10 +3,28 @@
  * Composable for managing the application configuration
  */
 
-import { ref, onMounted } from 'vue'
+import { isObject, snakeToCamel, snakeToPascal } from '@/modules/utils';
+import { ref, onMounted, reactive, toRaw } from 'vue'
 const basePath = import.meta.env.BASE_URL || '/';
 
+const mainVarsToLoad = {
+    "show_shapes_wo_id": true,
+    "prefixes": {},
+    "class_icons": {},
+    "app_name": "",
+    "documentation_url": "",
+    "source_code_url": "",
+    "app_theme": {
+        "link_color": "#41b883",
+        "hover_color": "#1565C0",
+        "active_color": "#D32F2F",
+        "panel_color": "#41b883",
+        "logo": "shacl_vue_logo.svg",
+    }
+}
+
 export function useConfig(url) {
+    console.log("Using config...")
     const defaultURL = `${basePath}config.json`
     var configURL
     if (url) {
@@ -21,13 +39,16 @@ export function useConfig(url) {
     const config = ref(null);
     const configFetched = ref(false);
     const configError = ref(false);
+    const configVarsMain = reactive({});
+    for (const [key, value] of Object.entries(mainVarsToLoad)) {
+        configVarsMain[snakeToCamel(key)] = value
+    }
 
     onMounted(async () => {
         try {
             const response = await fetch(configURL, {cache: "no-cache"});
             if (!response.ok) {
                 configError.value = true;
-                console.log(`Provided config file path: ${configURL}`)
                 throw new Error(`Error fetching config file: ${response.statusText}`);
             }
             config.value = await response.json();
@@ -40,9 +61,26 @@ export function useConfig(url) {
         }
     });
 
+    function loadConfigVars () {
+        // only supports one level of recursion into objects
+        for (const [key, val] of Object.entries(mainVarsToLoad)) {
+            if (config.value.hasOwnProperty(key)) {
+                if (isObject(config.value[key])) {
+                    configVarsMain[snakeToCamel(key)] = val
+                    for (const [k, v] of Object.entries(config.value[key])) {
+                        if (v) configVarsMain[snakeToCamel(key)][k] = v
+                    }
+                } else {
+                    configVarsMain[snakeToCamel(key)] = config.value[key]
+                }
+            }
+        }
+    }
     return {
         config,
         configFetched,
         configError,
+        configVarsMain,
+        loadConfigVars,
     };
 }
\ No newline at end of file
diff --git a/src/modules/utils.js b/src/modules/utils.js
index 07b8548..a7502f9 100644
--- a/src/modules/utils.js
+++ b/src/modules/utils.js
@@ -342,3 +342,26 @@ export function getPrefLabel(node, graphData, allPrefixes, from) {
   }
   return prefLabel
 }
+
+export function snakeToPascal(snakeStr) {
+  return snakeStr
+      .split('_')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join('');
+}
+
+export function snakeToCamel(snakeStr) {
+  return snakeStr
+      .split('_')
+      .map((word, index) => index === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1))
+      .join('');
+}
+
+export function adjustHexColor(hexColor, amount) {
+  // Remove the '#' if present
+  let colorInt = parseInt(hexColor.replace('#', ''), 16);
+  // Adjust the color value
+  colorInt = Math.max(0, Math.min(0xFFFFFF, colorInt + amount));
+  // Convert back to hex and ensure it's always 6 digits
+  return `#${colorInt.toString(16).padStart(6, '0')}`;
+}
\ No newline at end of file