diff --git a/docs/todo.todo b/docs/todo.todo
index 128689b..7749c4c 100644
--- a/docs/todo.todo
+++ b/docs/todo.todo
@@ -13,7 +13,9 @@ loop over to import the images from json file?
 fix link to homepage (loading into new tab)
 doc this
 
-div with background css
+doc div with background css
+
+apply anno wiki theme
 
 watchEffect(() => {
     if (mermaidGraph.value != null) {
diff --git a/src/components/DiagramRenderer.vue b/src/components/DiagramRenderer.vue
index 238d5d5..6e2e0db 100644
--- a/src/components/DiagramRenderer.vue
+++ b/src/components/DiagramRenderer.vue
@@ -1,8 +1,18 @@
 <template>
   <div>
-    <div ref="timber"></div>
-    <div ref="steelBeams"></div>
-    <div ref="highWheeler"></div>
+    <q-card flat bordered>
+      <q-card-section>
+        <div class="text-subtitle1 text-uppercase text-center">
+          Farmers | Workers
+        </div>
+      </q-card-section>
+
+      <q-separator inset class="q-mb-sm" />
+
+      <div ref="timber"></div>
+      <div ref="steelBeams"></div>
+      <div ref="highWheeler"></div>
+    </q-card>
   </div>
 </template>
 
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 498ada5..2ffd9b1 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -31,7 +31,7 @@
     </q-drawer>
 
     <q-page-container>
-      <router-view />
+      <router-view class="bg-grey-2" />
     </q-page-container>
   </q-layout>
 </template>
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index 5532a47..51d72fe 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-page class="row items-center justify-evenly">
+  <q-page class="row items-center justify-evenly full-height">
     <diagram-renderer />
   </q-page>
 </template>