diff --git a/src/dashboard/scoreko-dev/views/Graphics.vue b/src/dashboard/scoreko-dev/views/Graphics.vue
index a351c4d..b99440f 100644
--- a/src/dashboard/scoreko-dev/views/Graphics.vue
+++ b/src/dashboard/scoreko-dev/views/Graphics.vue
@@ -188,13 +188,18 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
   background-size: 20px 20px;
   background-position: 0 0, 0 10px, 10px -10px, -10px 0;
   overflow: hidden;
+  position: relative;
 }
 
 .graphics-preview__frame {
-  width: 1920px;
-  height: 1080px;
+  --preview-zoom: 0.85;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: calc(100% / var(--preview-zoom));
+  height: calc(100% / var(--preview-zoom));
   border: 0;
-  transform: scale(calc(100cqw / 1920));
-  transform-origin: top left;
+  transform: translate(-50%, -50%) scale(var(--preview-zoom));
+  transform-origin: center;
 }
 </style>