diff --git a/src/components/ChainTiers.vue b/src/components/ChainTiers.vue
index 117e3c0..59b97f8 100644
--- a/src/components/ChainTiers.vue
+++ b/src/components/ChainTiers.vue
@@ -3,10 +3,10 @@
     flat
     bordered
     square
-    :class="[getColWidth, 'bg-grey-3', '', 'border']"
+    :class="['bg-grey-3', 'q-ma-sm', 'border', 'col-2', 'text-center']"
   >
     <q-card-section>
-      <div class="text-subtitle1 text-uppercase text-center big-font">
+      <div class="text-subtitle1 text-uppercase text-center big-font q-pa-md">
         {{ title }}
       </div>
     </q-card-section>
@@ -36,6 +36,6 @@ const getColWidth = computed(() => {
 }
 
 .big-font {
-  font-size: 1.5rem;
+  font-size: 2.2rem;
 }
 </style>
diff --git a/src/components/DiagramRenderer.vue b/src/components/DiagramRenderer.vue
index e9b193b..0f4cc25 100644
--- a/src/components/DiagramRenderer.vue
+++ b/src/components/DiagramRenderer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="row q-gutter-sm q-mt-sm">
+  <div class="row">
     <ChainTiers
       v-for="tier in productionChains"
       :key="tier.tierName"
diff --git a/src/components/ProductionChain.vue b/src/components/ProductionChain.vue
index 14de177..2532d00 100644
--- a/src/components/ProductionChain.vue
+++ b/src/components/ProductionChain.vue
@@ -1,5 +1,6 @@
 <template>
   <div ref="diagram"></div>
+  <q-separator inset class="q-mb-sm" />
 </template>
 
 <script setup lang="ts">
@@ -31,8 +32,8 @@ watchEffect(() => {
 
 <style lang="scss">
 .icon-size {
-  width: 55px;
-  height: 55px;
+  width: 100px;
+  height: 100px;
 }
 
 .ratio-count {
@@ -52,7 +53,7 @@ watchEffect(() => {
 }
 
 .electricity-icon {
-  width: 22px;
+  width: 30px;
   margin-bottom: -5px;
 }