diff --git a/src/components/PostsHome.vue b/src/components/PostsHome.vue
index b3c4d43..63f49e5 100644
--- a/src/components/PostsHome.vue
+++ b/src/components/PostsHome.vue
@@ -1,5 +1,5 @@
 <template>
-  <section v-if="posts" class="w-full flex items-center justify-center my-20">
+  <section class="w-full flex items-center justify-center my-20">
     <div class="flex flex-col items-center text-center">
       <div class="flex flex-col items-center">
         <h2 class="font-bold text-3xl">
@@ -10,7 +10,7 @@
         </p>
       </div>
       <div class="my-8 lg:flex w-full lg:space-x-6">
-        <div v-for="post in posts">
+        <div v-if="posts" v-for="post in posts">
           <Post
             :title="post.title"
             :cover="post.cover"
diff --git a/src/components/ProjectsHome.vue b/src/components/ProjectsHome.vue
index f7f3090..9c9da69 100644
--- a/src/components/ProjectsHome.vue
+++ b/src/components/ProjectsHome.vue
@@ -1,5 +1,5 @@
 <template>
-  <section v-if="projects" class="w-full flex items-center justify-center my-20">
+  <section class="w-full flex items-center justify-center my-20">
     <div class="flex flex-col items-center text-center">
       <div class="flex flex-col items-center">
         <h2 class="font-bold text-3xl">
@@ -10,7 +10,7 @@
         </p>
       </div>
       <div class="my-8 lg:flex w-full lg:space-x-8">
-        <div v-for="project in projects">
+        <div v-if="projects" v-for="project in projects">
           <Project
             :title="project.title"
             :cover="project.cover"
diff --git a/src/pages/contact.vue b/src/pages/contact.vue
index 01e73f7..942a656 100644
--- a/src/pages/contact.vue
+++ b/src/pages/contact.vue
@@ -16,7 +16,7 @@
         {{ $t('contact.why.description') }}
       </h3>
     </section>
-    <section v-if="info && info.hiring.status && info.hiring.color" class="w-full lg:w-3/4 mb-10 mt-4 text-center">
+    <section class="w-full lg:w-3/4 mb-10 mt-4 text-center">
       <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-100">
         {{ $t('contact.available.title') }}
       </h1>
@@ -25,7 +25,7 @@
       </h3>
       <div class="my-4 text-indigo-600">
         {{ $t('contact.available.start') }}
-        <span class="py-1 px-2 font-bold rounded-full m-0.5" :class="getColor">{{ $t('hiring.status.' + info.hiring.status) }}</span>
+        <span v-if="info && info.hiring.status && info.hiring.color" class="py-1 px-2 font-bold rounded-full m-0.5" :class="getColor">{{ $t('hiring.status.' + info.hiring.status) }}</span>
         {{ $t('contact.available.end') }}
       </div>
     </section>
@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import {computed, ref, useAsync, useContext} from "@nuxtjs/composition-api";
+import {computed, ref, useAsync, useContext, watch} from "@nuxtjs/composition-api";
 import {InfoData, Form} from "../../@types/types";
 import {combineObject} from "windicss/types/utils/algorithm/compileStyleSheet";
 
@@ -56,6 +56,7 @@ export default {
           return `bg-green-200 text-green-700`
         case 'red':
           return `bg-red-200 text-red-700`
+
       }
     })