diff --git a/packages/products/src/shared/ui/general/dev/BenchmarkingMetrics.vue b/packages/products/src/shared/ui/general/dev/BenchmarkingMetrics.vue
index c0231adc..21f2769e 100644
--- a/packages/products/src/shared/ui/general/dev/BenchmarkingMetrics.vue
+++ b/packages/products/src/shared/ui/general/dev/BenchmarkingMetrics.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-  import { useFPS } from "@magic/utils/fps";
+import { useFPS } from "@magic/utils/fps";
+import GText from "../../graph-core/GText.vue";
 
-  const { fps, slowFrameCount, slowFrameRatio } = useFPS();
+const { fps, slowFrameCount, slowFrameRatio } = useFPS();
 </script>
 
 <template>
-  <div class="text-white text-end">
+  <GText class="text-end">
     <div>FPS: {{ fps }}</div>
     <div>Slow Frame Count: {{ slowFrameCount }}</div>
     <div>Slow Frame Ratio: {{ slowFrameRatio.toFixed(2) }}</div>
-  </div>
+  </GText>
 </template>
diff --git a/packages/products/src/shared/ui/general/dev/GraphAtMousePositionData.vue b/packages/products/src/shared/ui/general/dev/GraphAtMousePositionData.vue
index bb2c6e1b..c4dfbce9 100644
--- a/packages/products/src/shared/ui/general/dev/GraphAtMousePositionData.vue
+++ b/packages/products/src/shared/ui/general/dev/GraphAtMousePositionData.vue
@@ -1,26 +1,28 @@
 <script setup lang="ts">
-  import { nonNullGraph as graph } from "../../../../shared/globalGraph";
+import { nonNullGraph as graph } from "../../../../shared/globalGraph";
 
-  import { computed } from "vue";
 
-  const coords = computed(() => {
-    const {
-      coords: { x, y },
-    } = graph.value.graphAtMousePosition.value;
-    return { x: Math.round(x), y: Math.round(y) };
-  });
+import { computed } from "vue";
+import GText from "../../graph-core/GText.vue";
 
-  const hoveredItems = computed(() => {
-    const { items } = graph.value.graphAtMousePosition.value;
-    return items.map(
-      (item) => `${item.graphType} - ${item.shape.name} (${item.id})`
-    );
-  });
+const coords = computed(() => {
+  const {
+    coords: { x, y },
+  } = graph.value.graphAtMousePosition.value;
+  return { x: Math.round(x), y: Math.round(y) };
+});
+
+const hoveredItems = computed(() => {
+  const { items } = graph.value.graphAtMousePosition.value;
+  return items.map(
+    (item) => `${item.graphType} - ${item.shape.name} (${item.id})`
+  );
+});
 </script>
 
 <template>
-  <div class="text-white text-end">
+  <GText class="text-end">
     <div>Cursor At: (X = {{ coords.x }}, Y = {{ coords.y }})</div>
     <div>Items Hovered: {{ hoveredItems }}</div>
-  </div>
+  </GText>
 </template>