diff --git a/app/src/components/ModesCardorg.vue b/app/src/components/ModesCardorg.vue
index 5ee9b2a3afc3278728242e8faca9e8f9eb73dfe6..94baf2f435e5c82bc781a18fc3cdb761cdcaa621 100644
--- a/app/src/components/ModesCardorg.vue
+++ b/app/src/components/ModesCardorg.vue
@@ -7,6 +7,7 @@
       :x="50"
       :y="15"
       :z="1"
+      :scale="scale"
       :draggable="true"
       :resizable="true"
       style="background-color: #6fcf97"
@@ -138,6 +139,7 @@ export default {
 
   computed: mapState({
     hidetipsstate: (state) => state.hidetipsstate,
+    scale: (state) => state.ui.scale,
   }),
 
   methods: {
diff --git a/app/src/components/OnBoard.vue b/app/src/components/OnBoard.vue
index 877c6255ccd312d1b189d8702fd194319557f06a..499d97810ab31bf12bf002e1418b8afb419ae039 100644
--- a/app/src/components/OnBoard.vue
+++ b/app/src/components/OnBoard.vue
@@ -8,6 +8,7 @@
         :x="5"
         :y="15"
         :z="1"
+        :scale="scale"
         :draggable="true"
         :resizable="false"
         style="background-color: #6fcf97"
@@ -53,6 +54,7 @@
         :x="600"
         :y="15"
         :z="1"
+        :scale="scale"
         :draggable="true"
         :resizable="false"
         style="background-color: #6fcf97"
@@ -157,6 +159,7 @@
 import draggable from '@/experimental/Draggable'
 import Router from '@/router'
 import marked from 'marked'
+import { mapState } from 'vuex'
 
 export default {
   data: function () {
@@ -221,6 +224,9 @@ export default {
       this.$refs.microcosm.focus()
     },
   },
+  computed: mapState({
+        scale: (state) => state.ui.scale
+  }),
   components: {
     draggable,
   },
diff --git a/app/src/components/TipsLayer.vue b/app/src/components/TipsLayer.vue
index d9f9095b0d18cc7df3a7ffc6e84a673355a0c9fa..507088512217859d66feea4584abbbc652efc711 100644
--- a/app/src/components/TipsLayer.vue
+++ b/app/src/components/TipsLayer.vue
@@ -8,6 +8,7 @@
         :x="540"
         :y="15"
         :z="1"
+        :scale="scale"
         :draggable="true"
         :resizable="false"
         style="background-color: #6fcf97"
@@ -31,6 +32,7 @@
 <script>
 import marked from 'marked'
 import draggable from '@/experimental/Draggable'
+import { mapState } from 'vuex'
 export default {
   data: function () {
     return {
@@ -39,8 +41,9 @@ export default {
       tipsplease: true,
     }
   },
-
-  mounted() {},
+  computed: mapState({
+    scale: (state) => state.ui.scale,
+  }),
   filters: {
     marked: marked,
   },