diff --git a/app/src/components/AuthForm.vue b/app/src/components/AuthForm.vue
index ad3d1a6..9bc0865 100644
--- a/app/src/components/AuthForm.vue
+++ b/app/src/components/AuthForm.vue
@@ -90,7 +90,7 @@ const handleChange = () => {
     class="bg-bg border-8 border-bg-primary flex flex-1 flex-col items-center justify-center rounded-3xl p-10"
   >
     <h1 class="text-text-primary text-3xl font-black mb-2">{{ title }}</h1>
-    <div class="text-error inline-flex justify-center items-center xl:hidden">
+    <div class="text-error inline-flex justify-center items-center md:hidden">
       <font-awesome-icon
         :icon="['fas', 'circle-exclamation']"
         class="px-1 text-sm"
diff --git a/app/src/components/QuestMap.vue b/app/src/components/QuestMap.vue
index e668479..56013d6 100644
--- a/app/src/components/QuestMap.vue
+++ b/app/src/components/QuestMap.vue
@@ -15,8 +15,8 @@ import { DAG } from '@linux-odyssey/utils'
 import api from '../utils/api'
 import { NodeImage } from '../img/svg.js'
 
-const marginX = 200
-const marginY = 65
+const marginX = 500
+const marginY = 300
 const chartContainer = ref(null)
 let chartInstance = null
 const fullwidth = window.screen.width
@@ -71,9 +71,10 @@ const genOption = (nodes, edges) => ({
       symbol: () => {
         return NodeImage
       },
-      symbolSize: [fullwidth / 10, fullwidth / 25],
+      symbolSize: [fullwidth / 13, fullwidth / 30],
       roam: 'move',
-      zoom: 1,
+      zoom: 1.5,
+      center: ['150%', '50%'],
       label: {
         show: true,
         fontSize: fullwidth / 90,
@@ -103,7 +104,7 @@ const genOption = (nodes, edges) => ({
           if (unlocked) {
             return '#ADADB5'
           }
-          return '454552'
+          return '#505050'
         },
       },
     },