diff --git a/docs/todo.todo b/docs/todo.todo
index 7749c4c..cc87168 100644
--- a/docs/todo.todo
+++ b/docs/todo.todo
@@ -13,9 +13,6 @@ loop over to import the images from json file?
 fix link to homepage (loading into new tab)
 doc this
 
-doc div with background css
-
-apply anno wiki theme
 
 watchEffect(() => {
     if (mermaidGraph.value != null) {
diff --git a/src/assets/annoIcons/Beer.webp b/src/assets/annoIcons/Beer.webp
new file mode 100644
index 0000000..882d476
Binary files /dev/null and b/src/assets/annoIcons/Beer.webp differ
diff --git a/src/assets/annoIcons/Hops.webp b/src/assets/annoIcons/Hops.webp
new file mode 100644
index 0000000..adf1f99
Binary files /dev/null and b/src/assets/annoIcons/Hops.webp differ
diff --git a/src/assets/annoIcons/Malt.webp b/src/assets/annoIcons/Malt.webp
new file mode 100644
index 0000000..a8cc17e
Binary files /dev/null and b/src/assets/annoIcons/Malt.webp differ
diff --git a/src/assets/annoIcons/Soap.webp b/src/assets/annoIcons/Soap.webp
new file mode 100644
index 0000000..fd476b7
Binary files /dev/null and b/src/assets/annoIcons/Soap.webp differ
diff --git a/src/assets/annoIcons/Tallow.webp b/src/assets/annoIcons/Tallow.webp
new file mode 100644
index 0000000..ab25f42
Binary files /dev/null and b/src/assets/annoIcons/Tallow.webp differ
diff --git a/src/assets/annoIcons/Weapons.webp b/src/assets/annoIcons/Weapons.webp
new file mode 100644
index 0000000..486b2e4
Binary files /dev/null and b/src/assets/annoIcons/Weapons.webp differ
diff --git a/src/components/ChainTiers.vue b/src/components/ChainTiers.vue
new file mode 100644
index 0000000..eb0de3d
--- /dev/null
+++ b/src/components/ChainTiers.vue
@@ -0,0 +1,25 @@
+<template>
+  <q-card flat bordered square class="col-2 bg-grey-3 q-ma-sm border">
+    <q-card-section>
+      <div class="text-subtitle1 text-uppercase text-center">
+        {{ title }}
+      </div>
+    </q-card-section>
+
+    <q-separator inset class="q-mb-sm" />
+
+    <slot></slot>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string;
+}>();
+</script>
+
+<style lang="scss">
+.border {
+  border: 0.1rem solid #2e3f4e;
+}
+</style>
diff --git a/src/components/DiagramRenderer.vue b/src/components/DiagramRenderer.vue
index 37e47c1..d17379e 100644
--- a/src/components/DiagramRenderer.vue
+++ b/src/components/DiagramRenderer.vue
@@ -1,262 +1,93 @@
 <template>
   <div class="row">
-    <q-card flat bordered square class="col-2 bg-grey-3">
-      <q-card-section>
-        <div class="text-subtitle1 text-uppercase text-center">
-          Building Materials
-        </div>
-      </q-card-section>
+    <ChainTiers title="Building Materials">
+      <ProductionChain
+        :production-chain="
+          productionChains.buildingMaterials[0].productionChain
+        "
+        :mermaid-definition="
+          productionChains.buildingMaterials[0].mermaidDefinition
+        "
+      ></ProductionChain>
+      <ProductionChain
+        :production-chain="
+          productionChains.buildingMaterials[1].productionChain
+        "
+        :mermaid-definition="
+          productionChains.buildingMaterials[1].mermaidDefinition
+        "
+      ></ProductionChain>
+      <ProductionChain
+        :production-chain="
+          productionChains.buildingMaterials[2].productionChain
+        "
+        :mermaid-definition="
+          productionChains.buildingMaterials[2].mermaidDefinition
+        "
+      ></ProductionChain>
+    </ChainTiers>
 
-      <q-separator inset class="q-mb-sm" />
+    <ChainTiers title="Farmers | Workers">
+      <ProductionChain
+        :production-chain="productionChains.farmersWorkers[0].productionChain"
+        :mermaid-definition="
+          productionChains.farmersWorkers[0].mermaidDefinition
+        "
+      ></ProductionChain>
+      <ProductionChain
+        :production-chain="productionChains.farmersWorkers[1].productionChain"
+        :mermaid-definition="
+          productionChains.farmersWorkers[1].mermaidDefinition
+        "
+      ></ProductionChain>
+      <ProductionChain
+        :production-chain="productionChains.farmersWorkers[2].productionChain"
+        :mermaid-definition="
+          productionChains.farmersWorkers[2].mermaidDefinition
+        "
+      ></ProductionChain>
+      <ProductionChain
+        :production-chain="productionChains.farmersWorkers[3].productionChain"
+        :mermaid-definition="
+          productionChains.farmersWorkers[3].mermaidDefinition
+        "
+      ></ProductionChain>
+      <ProductionChain
+        :production-chain="productionChains.farmersWorkers[4].productionChain"
+        :mermaid-definition="
+          productionChains.farmersWorkers[4].mermaidDefinition
+        "
+      ></ProductionChain>
+      <ProductionChain
+        :production-chain="productionChains.farmersWorkers[5].productionChain"
+        :mermaid-definition="
+          productionChains.farmersWorkers[5].mermaidDefinition
+        "
+      ></ProductionChain>
+    </ChainTiers>
 
-      <div ref="timber"></div>
-      <div ref="bricks"></div>
-      <div ref="steelBeams"></div>
-    </q-card>
-    <q-card flat bordered square class="col-2 bg-grey-3">
-      <q-card-section>
-        <div class="text-subtitle1 text-uppercase text-center">
-          Farmers | Workers
-        </div>
-      </q-card-section>
+    <ChainTiers title="Engineers">
+      <ProductionChain
+        :production-chain="productionChains.engineers[0].productionChain"
+        :mermaid-definition="productionChains.engineers[0].mermaidDefinition"
+      ></ProductionChain>
+    </ChainTiers>
 
-      <q-separator inset class="q-mb-sm" />
-
-      <div ref="schnapps"></div>
-      <div ref="workClothes"></div>
-      <div ref="sausages"></div>
-      <div ref="bread"></div>
-    </q-card>
-    <q-card flat bordered square class="col-2 bg-grey-3">
-      <q-card-section>
-        <div class="text-subtitle1 text-uppercase text-center">Engineers</div>
-      </q-card-section>
-
-      <q-separator inset class="q-mb-sm" />
-
-      <div ref="highWheeler"></div>
-    </q-card>
+    <ChainTiers title="Weapons">
+      <ProductionChain
+        :production-chain="productionChains.weapons[0].productionChain"
+        :mermaid-definition="productionChains.weapons[0].mermaidDefinition"
+      ></ProductionChain>
+    </ChainTiers>
   </div>
 </template>
 
 <script setup lang="ts">
-import mermaid from 'mermaid';
-import { onMounted, ref, watchEffect } from 'vue';
+import { productionChains } from './production-chains';
 
-// Icons
-import lightningIcon from '../assets/annoIcons/Lightning.png';
-
-// Building Materials Icons
-import woodIcon from '../assets/annoIcons/Wood.webp';
-import timberIcon from '../assets/annoIcons/Timber.webp';
-import clayIcon from '../assets/annoIcons/Clay.webp';
-import bricksIcon from '../assets/annoIcons/Bricks.webp';
-import charcoalKilnIcon from '../assets/annoIcons/Charcoal_kiln.webp';
-import coalIcon from '../assets/annoIcons/Coal.webp';
-import ironIcon from '../assets/annoIcons/Iron.webp';
-import steelIcon from '../assets/annoIcons/Steel.webp';
-import steelBeamsIcon from '../assets/annoIcons/Steel_beams.webp';
-
-// Farmers & Workers Icons
-import potatoIcon from '../assets/annoIcons/Potato.webp';
-import schnappsIcon from '../assets/annoIcons/Schnapps.webp';
-import woolIcon from '../assets/annoIcons/Wool.webp';
-import workClothesIcon from '../assets/annoIcons/Work_clothes.webp';
-import pigIcon from '../assets/annoIcons/Pigs.webp';
-import sausageIcon from '../assets/annoIcons/Sausages.webp';
-import grainIcon from '../assets/annoIcons/Grain.webp';
-import flourIcon from '../assets/annoIcons/Flour.webp';
-import breadIcon from '../assets/annoIcons/Bread.webp';
-
-//
-import caoutchoucIcon from '../assets/annoIcons/Caoutchouc.webp';
-import highWheelerIcon from '../assets/annoIcons/High_wheeler.webp';
-
-// HTML Refs
-const timber = ref<HTMLInputElement | null>(null);
-const steelBeams = ref<HTMLInputElement | null>(null);
-const schnapps = ref<HTMLInputElement | null>(null);
-const workClothes = ref<HTMLInputElement | null>(null);
-const bricks = ref<HTMLInputElement | null>(null);
-const sausages = ref<HTMLInputElement | null>(null);
-const bread = ref<HTMLInputElement | null>(null);
-
-const highWheeler = ref<HTMLInputElement | null>(null);
-
-// Initalise mermaid
-onMounted(() => {
-  mermaid.initialize({
-    startOnLoad: false,
-    logLevel: 'fatal',
-    securityLevel: 'loose',
-    theme: 'neutral',
-    flowchart: { htmlLabels: true }
-  });
-});
-
-watchEffect(() => {
-  if (timber.value != null) {
-    mermaid.render(
-      'timber',
-      `flowchart LR; Wood(<img src='${woodIcon}' class='icon-size' /><span class='ratio-count'>1</span>)-->Timber(<img src='${timberIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`,
-      (svgCode: string) => {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        timber.value!.innerHTML = svgCode;
-      }
-    );
-  }
-});
-
-watchEffect(() => {
-  if (bricks.value != null) {
-    mermaid.render(
-      'bricks',
-      `flowchart LR; Clay(<img src='${clayIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Bricks(<img src='${bricksIcon}' class='icon-size' /><span class='ratio-count'>2</span>)`,
-      (svgCode: string) => {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        bricks.value!.innerHTML = svgCode;
-      }
-    );
-  }
-});
-
-watchEffect(() => {
-  if (steelBeams.value != null) {
-    mermaid.render(
-      'steelBeams',
-      `flowchart LR; CharcoalKiln(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Iron(<img src='${ironIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Steel(<span class='icon-flex-row'><img src='${steelIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>1</span></span></span>) --> SteelBeams(<img src='${steelBeamsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`,
-      (svgCode: string) => {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        steelBeams.value!.innerHTML = svgCode;
-      }
-    );
-  }
-});
-
-watchEffect(() => {
-  if (schnapps.value != null) {
-    mermaid.render(
-      'schnapps',
-      `flowchart LR; Potato(<img src='${potatoIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Schnapps(<img src='${schnappsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`,
-      (svgCode: string) => {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        schnapps.value!.innerHTML = svgCode;
-      }
-    );
-  }
-});
-
-watchEffect(() => {
-  if (workClothes.value != null) {
-    mermaid.render(
-      'workClothes',
-      `flowchart LR; Wool(<img src='${woolIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> WorkClothes(<img src='${workClothesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`,
-      (svgCode: string) => {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        workClothes.value!.innerHTML = svgCode;
-      }
-    );
-  }
-});
-
-watchEffect(() => {
-  if (workClothes.value != null) {
-    mermaid.render(
-      'workClothes',
-      `flowchart LR; Wool(<img src='${woolIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> WorkClothes(<img src='${workClothesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`,
-      (svgCode: string) => {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        workClothes.value!.innerHTML = svgCode;
-      }
-    );
-  }
-});
-
-watchEffect(() => {
-  if (workClothes.value != null) {
-    mermaid.render(
-      'workClothes',
-      `flowchart LR; Wool(<img src='${woolIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> WorkClothes(<img src='${workClothesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`,
-      (svgCode: string) => {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        workClothes.value!.innerHTML = svgCode;
-      }
-    );
-  }
-});
-
-watchEffect(() => {
-  if (sausages.value != null) {
-    mermaid.render(
-      'sausages',
-      `flowchart LR; Pig(<img src='${pigIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Sausages(<img src='${sausageIcon}' class='icon-size' /><span class='ratio-count'>2</span>)`,
-      (svgCode: string) => {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        sausages.value!.innerHTML = svgCode;
-      }
-    );
-  }
-});
-
-watchEffect(() => {
-  if (bread.value != null) {
-    mermaid.render(
-      'bread',
-      `flowchart LR; Grain(<img src='${grainIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Flour(<img src='${flourIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Bread(<img src='${breadIcon}' class='icon-size' /><span class='ratio-count'>2</span>)`,
-      (svgCode: string) => {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        bread.value!.innerHTML = svgCode;
-      }
-    );
-  }
-});
-
-watchEffect(() => {
-  if (highWheeler.value != null) {
-    mermaid.render(
-      'highWheeler',
-      `flowchart LR; Iron(<img src='${ironIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Coal(<img src='${coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Steel(<img src='${steelIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> HighWheeler(<span class='icon-flex-row'><img src='${highWheelerIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${lightningIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>); Caoutchouc(<img src='${caoutchoucIcon}' class='icon-size' /><span class='ratio-count'>4</span>) --> HighWheeler`,
-      (svgCode: string) => {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        highWheeler.value!.innerHTML = svgCode;
-      }
-    );
-  }
-});
+// Components
+import ChainTiers from 'components/ChainTiers.vue';
+import ProductionChain from 'components/ProductionChain.vue';
 </script>
 
-<style lang="scss">
-.icon-size {
-  width: 40px;
-  height: 40px;
-}
-
-.ratio-count {
-  font-weight: bold;
-  text-align: center;
-}
-
-.efficiency-perc {
-  font-weight: bold;
-  color: $green-9 !important;
-}
-
-.electricity-container {
-  margin-bottom: -5px;
-}
-
-.electricity-icon {
-  width: 22px;
-  margin-bottom: -5px;
-}
-
-.icon-flex-row {
-  display: flex;
-  flex-direction: row;
-}
-
-.icon-flex-col {
-  display: flex;
-  flex-direction: column;
-}
-</style>
+<style lang="scss"></style>
diff --git a/src/components/ProductionChain.vue b/src/components/ProductionChain.vue
new file mode 100644
index 0000000..ce5bc29
--- /dev/null
+++ b/src/components/ProductionChain.vue
@@ -0,0 +1,77 @@
+<template>
+  <div ref="diagram"></div>
+</template>
+
+<script setup lang="ts">
+import mermaid from 'mermaid';
+import { onMounted, ref, watchEffect } from 'vue';
+
+// HTML Refs
+const diagram = ref<HTMLInputElement | null>(null);
+
+// Props
+const props = defineProps<{
+  productionChain: string;
+  mermaidDefinition: string;
+}>();
+
+// Mermaid
+onMounted(() => {
+  mermaid.initialize({
+    startOnLoad: false,
+    logLevel: 'fatal',
+    securityLevel: 'loose',
+    theme: 'neutral',
+    flowchart: { htmlLabels: true }
+  });
+});
+
+watchEffect(() => {
+  if (diagram.value != null) {
+    mermaid.render(
+      props.productionChain,
+      props.mermaidDefinition,
+      (svgCode: string) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        diagram.value!.innerHTML = svgCode;
+      }
+    );
+  }
+});
+</script>
+
+<style lang="scss">
+.icon-size {
+  width: 40px;
+  height: 40px;
+}
+
+.ratio-count {
+  font-weight: bold;
+  text-align: center;
+}
+
+.efficiency-perc {
+  font-weight: bold;
+  color: $green-9 !important;
+}
+
+.electricity-container {
+  margin-bottom: -5px;
+}
+
+.electricity-icon {
+  width: 22px;
+  margin-bottom: -5px;
+}
+
+.icon-flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.icon-flex-col {
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/src/components/models.ts b/src/components/models.ts
deleted file mode 100644
index cb0ff5c..0000000
--- a/src/components/models.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {};
diff --git a/src/components/production-chains.ts b/src/components/production-chains.ts
new file mode 100644
index 0000000..53cfec7
--- /dev/null
+++ b/src/components/production-chains.ts
@@ -0,0 +1,93 @@
+// Icons
+import lightningIcon from '../assets/annoIcons/Lightning.png';
+
+// Building Materials
+import woodIcon from '../assets/annoIcons/Wood.webp';
+import timberIcon from '../assets/annoIcons/Timber.webp';
+import clayIcon from '../assets/annoIcons/Clay.webp';
+import bricksIcon from '../assets/annoIcons/Bricks.webp';
+import charcoalKilnIcon from '../assets/annoIcons/Charcoal_kiln.webp';
+import coalIcon from '../assets/annoIcons/Coal.webp';
+import ironIcon from '../assets/annoIcons/Iron.webp';
+import steelIcon from '../assets/annoIcons/Steel.webp';
+import steelBeamsIcon from '../assets/annoIcons/Steel_beams.webp';
+
+// Farmers & Workers
+import potatoIcon from '../assets/annoIcons/Potato.webp';
+import schnappsIcon from '../assets/annoIcons/Schnapps.webp';
+import woolIcon from '../assets/annoIcons/Wool.webp';
+import workClothesIcon from '../assets/annoIcons/Work_clothes.webp';
+import pigIcon from '../assets/annoIcons/Pigs.webp';
+import sausageIcon from '../assets/annoIcons/Sausages.webp';
+import grainIcon from '../assets/annoIcons/Grain.webp';
+import flourIcon from '../assets/annoIcons/Flour.webp';
+import breadIcon from '../assets/annoIcons/Bread.webp';
+import pigsIcon from '../assets/annoIcons/Pigs.webp';
+import tallowIcon from '../assets/annoIcons/Tallow.webp';
+import soapIcon from '../assets/annoIcons/Soap.webp';
+import breweryIcon from '../assets/annoIcons/Beer.webp';
+import malthouseIcon from '../assets/annoIcons/Malt.webp';
+import hopFarmIcon from '../assets/annoIcons/Hops.webp';
+
+// Engineers
+import caoutchoucIcon from '../assets/annoIcons/Caoutchouc.webp';
+import highWheelerIcon from '../assets/annoIcons/High_wheeler.webp';
+
+// Weapons
+import weaponsIcon from '../assets/annoIcons/Weapons.webp';
+
+// Production Chains
+export const productionChains = {
+  buildingMaterials: [
+    {
+      productionChain: 'timber',
+      mermaidDefinition: `flowchart LR; Wood(<img src='${woodIcon}' class='icon-size' /><span class='ratio-count'>1</span>)-->Timber(<img src='${timberIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+    },
+    {
+      productionChain: 'bricks',
+      mermaidDefinition: `flowchart LR; Clay(<img src='${clayIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Bricks(<img src='${bricksIcon}' class='icon-size' /><span class='ratio-count'>2</span>)`
+    },
+    {
+      productionChain: 'steelBeams',
+      mermaidDefinition: `flowchart LR; CharcoalKiln(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Iron(<img src='${ironIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Steel(<span class='icon-flex-row'><img src='${steelIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>1</span></span></span>) --> SteelBeams(<img src='${steelBeamsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+    }
+  ],
+  farmersWorkers: [
+    {
+      productionChain: 'workClothes',
+      mermaidDefinition: `flowchart LR; Wool(<img src='${woolIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> WorkClothes(<img src='${workClothesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+    },
+    {
+      productionChain: 'schnapps',
+      mermaidDefinition: `flowchart LR; Potato(<img src='${potatoIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Schnapps(<img src='${schnappsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+    },
+    {
+      productionChain: 'sausages',
+      mermaidDefinition: `flowchart LR; Pig(<img src='${pigIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Sausages(<img src='${sausageIcon}' class='icon-size' /><span class='ratio-count'>2</span>)`
+    },
+    {
+      productionChain: 'bread',
+      mermaidDefinition: `flowchart LR; Grain(<img src='${grainIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Flour(<img src='${flourIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Bread(<img src='${breadIcon}' class='icon-size' /><span class='ratio-count'>2</span>)`
+    },
+    {
+      productionChain: 'soap',
+      mermaidDefinition: `flowchart LR; Pigs(<img src='${pigsIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Tallow(<img src='${tallowIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Soap(<img src='${soapIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+    },
+    {
+      productionChain: 'beer',
+      mermaidDefinition: `flowchart LR; Grain(<img src='${grainIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Malthouse(<img src='${malthouseIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Brewery(<img src='${breweryIcon}' class='icon-size' /><span class='ratio-count'>2</span>); HopFarm(<img src='${hopFarmIcon}' class='icon-size' /><span class='ratio-count'>3</span>) --> Brewery`
+    }
+  ],
+  engineers: [
+    {
+      productionChain: 'highWheeler',
+      mermaidDefinition: `flowchart LR; Coal(<img src='${coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Iron(<img src='${ironIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Steel(<img src='${steelIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> HighWheeler(<span class='icon-flex-row'><img src='${highWheelerIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${lightningIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>); Caoutchouc(<img src='${caoutchoucIcon}' class='icon-size' /><span class='ratio-count'>4</span>) --> HighWheeler`
+    }
+  ],
+  weapons: [
+    {
+      productionChain: 'weapons',
+      mermaidDefinition: `flowchart LR; charcoalKiln(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Iron(<span class='icon-flex-row'><img src='${ironIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Steel(<span class='icon-flex-row'><img src='${steelIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Weapons(<img src='${weaponsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+    }
+  ]
+};
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 2ffd9b1..319995d 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -12,7 +12,7 @@
         />
 
         <!-- TODO: add link to git -->
-        <q-toolbar-title> Anno 1800 Production Chain Renderer </q-toolbar-title>
+        <q-toolbar-title> Anno 1800 Production Chains </q-toolbar-title>
 
         <q-icon name="lab la-github" color="black" size="2.2rem"></q-icon>
       </q-toolbar>
@@ -50,6 +50,6 @@ function toggleLeftDrawer() {
 
 <style lang="scss">
 .border-black-bottom-med {
-  border-bottom: 0.15rem solid black;
+  border-bottom: 0.15rem solid #2e3f4e;
 }
 </style>