diff --git a/src/components/DevSession.vue b/src/components/DevSession.vue
index 914f318..41115a9 100644
--- a/src/components/DevSession.vue
+++ b/src/components/DevSession.vue
@@ -3,6 +3,7 @@
     <input
       :value="dev"
       @input="setDev"
+      @blur="check"
       type="text"
       :placeholder="placeholder"
     />
@@ -11,7 +12,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from '@vue/composition-api'
+import { defineComponent, ref, computed } from '@vue/composition-api'
 import { useGetters, useActions } from 'vuex-composition-helpers'
 import { GetterTree } from 'vuex'
 import { State, RootActions } from '@/store'
@@ -34,17 +35,24 @@ export default defineComponent({
 
     const placeholder = ref(`dev ${props.position}`)
 
-    const dev = (isDev1 ? dev1.value : dev2.value) || placeholder
+    const dev = computed(() => (isDev1 ? dev1.value : dev2.value))
 
     const setDev = (event: InputEvent) => {
       const name = (event.target as HTMLInputElement).value
       isDev1 ? setDev1(name) : setDev2(name)
     }
 
+    const check = () => {
+      if (!dev.value) {
+        isDev1 ? setDev1(placeholder.value) : setDev2(placeholder.value)
+      }
+    }
+
     return {
       placeholder,
       dev,
-      setDev
+      setDev,
+      check
     }
   }
 })
@@ -67,11 +75,11 @@ export default defineComponent({
     white-space: normal;
     background: none;
     line-height: 1;
-    font-family: $font-family;
+    font-family: $serif-font-family;
     box-sizing: content-box;
     color: $color;
     text-align: center;
-    font-size: 1.5rem;
+    font-size: 2.5rem;
     width: 100%;
 
     &:focus {