diff --git a/zssnfront/src/App.vue b/zssnfront/src/App.vue
index d039be9..b646ce8 100644
--- a/zssnfront/src/App.vue
+++ b/zssnfront/src/App.vue
@@ -24,7 +24,7 @@
     </nav>
 
     <Itens v-show="page == 'itens'" />
-    <Sobreviventes v-if="page == 'sobreviventes'" />
+    <Sobreviventes v-show="page == 'sobreviventes'" />
     <Inventarios v-if="page == 'inventarios'" />
     <Comercio v-if="page == 'comercio'"/>
     <Relatorios v-if="page == 'relatorios'" />
@@ -58,7 +58,6 @@ export default {
     Sobreviventes,
     Inventarios,
     Relatorios,
-    Comercio,
     Comercio
 }
   
diff --git a/zssnfront/src/components/Comercio.vue b/zssnfront/src/components/Comercio.vue
index e1870b0..a8eb2d1 100644
--- a/zssnfront/src/components/Comercio.vue
+++ b/zssnfront/src/components/Comercio.vue
@@ -6,6 +6,8 @@
 
       <Message :msg="msg" v-show="msg"/>
 
+      <Loading :isLoading="isLoading"/>
+
       <div class="row two-inputs">
         
         <div class="col m6 s12">
@@ -29,20 +31,29 @@
               <span class="card-title">Sobrevivente: {{ sobrevivente1.sobrevivente }}</span>
               
               <span>Inventário</span>
-              <div class="collection">
-                <a href="#!" v-for="(item, index) in sobrevivente1.itens" :key="item.index" class="collection-item">
-                  {{ item.item.nome }}: {{item.item.pontos}} pontos <span class="badge">{{ item.quantidade }} 
-                  <button @click="addItem1(item, index)" class="waves-effect waves-light btn-small">Ofertar 1<i class="material-icons left">arrow_forward</i></button></span>
-                </a>
-              </div>
+              <ul class="collection">
+                <li v-for="(item, index) in sobrevivente1.itens" :key="item.index" class="collection-item">
+                  <div> <span class="item-name">{{ item.item.nome }}: {{item.quantidade}}x</span> 
+                    <a @click="addItem1(item, index)" href="#!" class="secondary-content">
+                      <i class="material-icons">arrow_forward</i>
+                      <span>Ofertar 1</span>
+                    </a>
+                  </div>
+                </li>
+              </ul>
               
               <span>Itens Ofertados:</span>
-              <div class="collection">
-                <a href="#!" v-for="(item, index) in comercio.sobrevivente1.itens" :key="item.index" class="collection-item">
-                  {{ item.item.nome }}: <span class="badge">Quantidade {{ item.quantidade }} 
-                  <button @click="removeItem1(index)" class=" btn-small">Retirar 1<i class="material-icons left">arrow_back</i></button></span>
-                </a>
-              </div>
+              <ul class="collection">
+                <li v-for="(item, index) in comercio.sobrevivente1.itens" :key="item.index" class="collection-item">
+                  <div> 
+                    <span class="item-name">{{ item.item.nome }}: {{item.quantidade}}x</span> 
+                    <a @click="removeItem1(index)" href="#!" class="secondary-content">
+                      <i class="material-icons">arrow_back</i>
+                      <span>Retirar 1</span>
+                    </a>
+                  </div>
+                </li>
+              </ul>
 
               <div class="center-align total-pontos white"><span class="">Total de Pontos Ofertados: {{ totalPontos1 }}</span></div>
             </div>
@@ -55,22 +66,28 @@
               <span class="card-title">Sobrevivente: {{ sobrevivente2.sobrevivente }}</span>
               
               <span>Inventário</span>
-              <div class="collection">
-                <a href="#!" v-for="(item, index) in sobrevivente2.itens" :key="item.index" class="collection-item ">
-                  {{ item.item.nome }}: {{item.item.pontos}} pontos 
-                  <span class="badge">{{ item.quantidade }}
-                    <button @click="addItem2(item, index)" class="waves-effect waves-light btn-small">Ofertar 1<i class="material-icons left">arrow_forward</i></button>
-                  </span>
-                </a>
-              </div>
+              <ul class="collection">
+                <li v-for="(item, index) in sobrevivente2.itens" :key="item.index" class="collection-item">
+                  <div> <span class="item-name">{{ item.item.nome }}: {{item.quantidade}}x</span> 
+                    <a @click="addItem2(item, index)" href="#!" class="secondary-content">
+                      <i class="material-icons">arrow_forward</i>
+                      <span>Ofertar 1</span>
+                    </a>
+                  </div>
+                </li>
+              </ul>
 
               <span>Itens Ofertados:</span>
-              <div class="collection">
-                <a href="#!" v-for="(item, index) in comercio.sobrevivente2.itens" :key="item.index" class="collection-item">
-                  {{ item.item.nome }}: <span class="badge">Quantidade {{ item.quantidade }}
-                  <button @click="removeItem2(index)" class="waves-effect waves-light btn-small">Retirar 1<i class="material-icons left">arrow_back</i></button></span>
-                </a>
-              </div>
+              <ul class="collection">
+                <li href="#!" v-for="(item, index) in comercio.sobrevivente2.itens" :key="item.index" class="collection-item">
+                  <div> <span class="item-name">{{ item.item.nome }}: {{item.quantidade}}x</span> 
+                    <a @click="removeItem2(index)" href="#!" class="secondary-content">
+                      <i class="material-icons">arrow_forward</i>
+                      <span>Retirar 1</span>
+                    </a>
+                  </div>
+                </li>
+              </ul>
               
               <div class="center-align total-pontos white"><span>Total de Pontos Ofertados: {{ totalPontos2 }}</span></div>
             </div>
@@ -92,6 +109,7 @@
   import Comercio from '../services/comercio';
   import Inventarios from '../services/inventarios';
   import Message from './Message.vue'
+  import Loading from './Loading.vue'
 
   export default {
     name: "Comercio",
@@ -114,12 +132,14 @@
             sobrevivente: "",
             itens: []
           }
-        }
+        },
+        isLoading: false
       }
     },
 
     components: {
-      Message
+      Message,
+      Loading
     },
 
     methods: {
@@ -135,6 +155,8 @@
       },
 
       buscar() {
+        this.isLoading = true
+
         this.sobrevivente1 = {}
         this.sobrevivente2 = {}
         this.totalPontos1 = 0
@@ -142,6 +164,7 @@
 
         if(this.id1 == this.id2 || this.id1 == "" || this.id2 == "" ){
           this.showMessage("Preencha os campos corretamente!")
+          this.isLoading = false
         } else {
 
           Inventarios.getInventario(this.id1).then(response => {
@@ -155,14 +178,17 @@
                 this.sobrevivente1 = response.data
                 this.sobrevivente2 = response2.data
 
+                this.isLoading = false
               }
             }).catch(err => {
+              this.isLoading = false
               this.showMessage("Erro ao buscar sobrevivente!")
               if(err.response.data.message) {
                 this.showMessage((err.response.data.message))
               }
             })
           }).catch(err => {
+            this.isLoading = false
             this.showMessage("Erro ao buscar sobrevivente!")
             if(err.response.data.message) {
               this.showMessage((err.response.data.message))
@@ -216,6 +242,7 @@
       },
 
       requestTroca() {
+        this.isLoading = true
         if(this.totalPontos1 == this.totalPontos2) {
           this.comercio.sobrevivente1.sobrevivente = this.sobrevivente1.sobreviventeId
 
@@ -224,6 +251,7 @@
           this.preComercio()
 
           Comercio.trocar(this.comercio).then(response => {
+            this.isLoading = false
             if(response.status == 200) {
               this.showMessage("Troca realizada com sucesso!")
               this.clearData()
@@ -236,6 +264,7 @@
             }
           })
         } else {
+          this.isLoading = false
           this.showMessage("A quantidade de pontos oferecidos é diferente!");
         }
         
@@ -295,5 +324,19 @@
     margin-left: 10px;
   }
 
+  .collection-tem span {
+    color: black !important;
+  }
+
+  .item-name {
+    color: #26a69a;
+  }
+
+  li .secondary-content {
+    display: flex;
+  }
+  .collection .collection-item {
+    padding: 7px 7px;
+  }
 </style>
 
diff --git a/zssnfront/src/components/Inventarios.vue b/zssnfront/src/components/Inventarios.vue
index 4c981bb..fe11a11 100644
--- a/zssnfront/src/components/Inventarios.vue
+++ b/zssnfront/src/components/Inventarios.vue
@@ -2,7 +2,9 @@
 
   <div class="container">
       
-      <h4 class="center-align subtitle-page"><i class="material-icons">domain</i> Inventários</h4>
+    <h4 class="center-align subtitle-page"><i class="material-icons">domain</i> Inventários</h4>
+
+    <Loading :isLoading="isLoading"/>
 
     <table class="center">
 
@@ -41,26 +43,34 @@
 <script>
 
     import Inventarios from '../services/inventarios'
+    import Loading from './Loading.vue'
 
     export default {
         name: "Inventarios",
 
         data() {
           return {
-              inventarios: []
+              inventarios: [],
+              isLoading: false
           }
         },
 
+        components: {
+          Loading
+        },
+
         mounted() {
           this.getInventarios()
         },
 
         methods: {
           getInventarios() {
+            this.isLoading = true
               Inventarios.listar().then(response => {
                   this.inventarios = response.data.inventarios
+                  this.isLoading = false
               }).catch(err => {
-
+                this.isLoading = false
               })
           }
         }
diff --git a/zssnfront/src/components/Itens.vue b/zssnfront/src/components/Itens.vue
index 89b0f43..3a111b5 100644
--- a/zssnfront/src/components/Itens.vue
+++ b/zssnfront/src/components/Itens.vue
@@ -6,6 +6,8 @@
 
       <Message :msg="msg" v-show="msg" />
 
+      <Loading :isLoading="isLoading"/>
+
       <form @submit.prevent="salvar">
 
         <div class="row">
@@ -77,6 +79,7 @@
 
   import Itens from '../services/itens';
   import Message from './Message.vue';
+  import Loading from './Loading.vue'
 
   export default {
     name: 'Itens',
@@ -90,12 +93,14 @@
         itens: [],
         errors: [],
         msg: "",
-        itemD: {}
+        itemD: {},
+        isLoading: false
       }
     },
 
     components: {
-      Message
+      Message,
+      Loading
     },
 
     mounted() {
@@ -110,12 +115,15 @@
       },
       
       listar() {
+        this.isLoading = true
         Itens.listar().then(response => {
           this.itens = response.data;
+          this.isLoading = false
         })
       },
 
       salvar() {
+        this.isLoading = true
         Itens.salvar(this.item).then(response => {
 
           if(response.status == 201) {
@@ -123,22 +131,29 @@
             this.item = {}
             this.showMessage("Item adicionado!")
           }
+
+          this.isLoading = false
           
         }).catch(err => { 
           this.showMessage("Erro ao salvar")
           this.errors = err.response.data
+          this.isLoading = false
         })
       },
 
       deletar() {
+        this.isLoading = true
         Itens.deletar(this.itemD).then(response => {
           if(response.status == 200) {
               this.listar()
               this.showMessage("Item deletado!")
-          }            
+          }    
+          
+          this.isLoading = false
           
         }).catch(err => {
           this.showMessage("Erro ao deletar")
+          this.isLoading = false
         })
         
       }
diff --git a/zssnfront/src/components/Loading.vue b/zssnfront/src/components/Loading.vue
new file mode 100644
index 0000000..e5ff728
--- /dev/null
+++ b/zssnfront/src/components/Loading.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="loading">
+        <div v-if="isLoading" class="preloader-wrapper big active">
+            <div class="spinner-layer spinner-blue-only">
+                <div class="circle-clipper left">
+                    <div class="circle"></div>
+                </div><div class="gap-patch">
+                    <div class="circle"></div>
+                </div><div class="circle-clipper right">
+                    <div class="circle"></div>
+                </div>
+            </div>
+            
+        </div>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        name: "Loading",
+        props: {
+            isLoading: false
+        }
+    }
+
+</script>
+
+<style>
+
+    .loading {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        margin: -25px 0 0 -25px;left: 50%;
+        top: 50%;
+        background-color: rgba(0, 0reen, 0lue, 0.5);
+    } 
+
+</style>
diff --git a/zssnfront/src/components/Relatorios.vue b/zssnfront/src/components/Relatorios.vue
index aeed8c3..7fd208b 100644
--- a/zssnfront/src/components/Relatorios.vue
+++ b/zssnfront/src/components/Relatorios.vue
@@ -2,6 +2,8 @@
 
     <div class="container">
         
+        <Loading :isLoading="isLoading"/>
+
         <h4 class="center-align subtitle-page"><i class="material-icons">report</i> Relatórios da ZSSN</h4>
 
         <label><b>Total de Sobreviventes</b></label>
@@ -32,16 +34,22 @@
 <script>
 
     import Sobreviventes from '../services/sobreviventes'
+    import Loading from './Loading.vue'
 
     export default {
         name: "Relatorios",
         
         data() {
             return {
-                relatorios: {}
+                relatorios: {},
+                isLoading: false
             }
         },
 
+        components: {
+            Loading
+        },  
+
         mounted() {
             this.getRelatorios()
         },
@@ -49,6 +57,7 @@
         methods: {
 
             getRelatorios() {
+                this.isLoading = true
                 Sobreviventes.getRelatorios().then(response => {
                     this.relatorios = response.data
 
@@ -65,8 +74,10 @@
                         e.pontos_perdidos = e.pontos_perdidos + " pontos"
                     });
 
+                    this.isLoading = false
                 }).catch(err => {
                     console.log(err)
+                    this.isLoading = false
                 })
             }
 
diff --git a/zssnfront/src/components/Sobreviventes.vue b/zssnfront/src/components/Sobreviventes.vue
index 435e77b..affb478 100644
--- a/zssnfront/src/components/Sobreviventes.vue
+++ b/zssnfront/src/components/Sobreviventes.vue
@@ -6,7 +6,9 @@
 
         <Message :msg="msg" v-show="msg" />
 
-        <form action="#" @submit.prevent="">
+        <Loading :isLoading="isLoading"/>
+
+        <form v-show="edit || add" action="#" @submit.prevent="">
 
             <div class="row">
                 <div class="input-field col l10 s12">
@@ -84,12 +86,14 @@
             </table>
 
             <div class="center-align save-button">
-                <button @click="clear()" class="waves-effect waves-light btn-small">Limpar<i class="material-icons left">clear</i></button>
+                <button @click="clear()" class="waves-effect waves-light btn-small">Fechar<i class="material-icons left">clear</i></button>
                 <button @click="saveOrEdit()" class="waves-effect waves-light btn-small blue modal-trigger">Salvar<i class="material-icons left">save</i></button>
             </div>
       </form>
 
-      <table class="center">
+        <a @click="showForm()" v-show="!add && !edit" class="waves-effect waves-light btn"><i class="material-icons left">add</i>Adicionar</a>
+      
+      <table v-show="!add && !edit" class="center">
 
         <thead>
 
@@ -113,7 +117,7 @@
           <tr v-for="sobrevivente in sobreviventes" :key="sobrevivente.id">
 
             <td>{{ sobrevivente.id }}</td>
-            <td>{{ sobrevivente.nome }}</td>
+            <td><a @click="moreInfo = sobrevivente" data-target="moreInfo" class="more-info-link modal-trigger">{{ sobrevivente.nome }}</a></td>
             <!-- <td>{{ sobrevivente.idade }}</td>
             <td>{{ sobrevivente.sexo.toUpperCase() }}</td> -->
             <!-- <td>{{ sobrevivente.latitude }}</td>
@@ -126,8 +130,8 @@
 
             <td >
                 <div class="center-align">
-                    <button @click="preEdit(sobrevivente)" class="waves-effect btn-small blue darken-1"><i class="material-icons">edit_location</i></button>
-                    <button @click="alertaInfeccao(sobrevivente)" class="waves-effect btn-small red darken-1"><i class="material-icons">warning</i></button>
+                    <button :disabled="sobrevivente.estaInfectado" @click="preEdit(sobrevivente)" class="waves-effect btn-small blue darken-1"><i class="material-icons">edit_location</i></button>
+                    <button @click="infected = sobrevivente" :disabled="sobrevivente.estaInfectado" data-target="modalContaminacao" class="waves-effect btn-small red darken-1 modal-trigger"><i class="material-icons">warning</i></button>
                 </div>
             </td>
 
@@ -137,7 +141,7 @@
       
       </table>
 
-        <!-- <div id="modalContaminacao" class="modal">
+        <div id="modalContaminacao" class="modal">
             <div class="modal-content">
                 <h4>Alerta de Contaminação!</h4>
                 <p>Digite o ID do informante da contaminação de {{ infected.nome }}:</p>
@@ -147,7 +151,20 @@
                 <a href="#!" class="modal-close waves-effect waves-green btn-flat">Cancelar</a>
                 <a @click="alertaInfeccao()" href="#!" class="modal-close waves-effect waves-green btn-flat">Confirmar</a>
             </div>
-        </div> -->
+        </div>
+
+        <div id="moreInfo" class="modal">
+            <div class="modal-content">
+                <h4>{{moreInfo.nome}}</h4>
+                <span><b>Idade:</b> {{moreInfo.idade}}</span><br>
+                <span><b>Sexo:</b> {{ moreInfo.sexo == "m" ? "Masculino" : "Feminino"}}</span><br>
+                <span><b>Latitude:</b> {{moreInfo.latitude}}</span><br>
+                <span><b>Longitude:</b> {{moreInfo.longitude}}</span><br>
+            </div>
+            <div class="modal-footer">
+                <a href="#!" class="modal-close waves-effect waves-green btn-flat">Fechar</a>
+            </div>
+        </div>
     </div>
 
 </template>
@@ -157,6 +174,7 @@
     import Sobreviventes from '../services/sobreviventes';
     import Itens from '../services/itens';
     import Message from './Message.vue'
+    import Loading from './Loading.vue'
 
     export default {
 
@@ -177,18 +195,25 @@
                 inventario: [],
                 msg: "",
                 edit: false,
+                add: false,
                 infected: {},
-                infoId: ""
+                infoId: "",
+                isLoading: false,
+                moreInfo: {}
             }
         },
 
         components: {
-            Message
+            Message,
+            Loading,
+        },
+
+        beforeCreate() {
+            this.isLoading = true
         },
 
         mounted() {
             this.listar()
-            this.listarItens()
         },
 
         methods: {
@@ -204,6 +229,7 @@
             },
             
             salvar() {
+                this.isLoading = true
                 this.itens.forEach(item => {
                     if(parseInt(item.quantidade) > 0)
                         this.inventario.push({
@@ -220,9 +246,11 @@
                         this.sobrevivente = {}
                         this.itens = []
                         this.inventario = []
+                        this.add = false
                         this.listarItens()
                     } else {
                         this.showMessage(response.data.message)
+                        this.isLoading = false
                     }
                 }).catch(err => {
                     if (err.response.data.message)  
@@ -230,21 +258,26 @@
                     else{
                         this.showMessage("Erro ao salvar")
                     }
+                    this.isLoading = false
                 })
 
             },
 
             editar() {
+                this.isLoading = true
                 Sobreviventes.atualizarLocalizacao(this.sobrevivente).then(response => {
                     if(response.status == 200) {
                         this.edit = false
                         this.showMessage(`Localização de ${this.sobrevivente.nome} atualizada!`)
                         this.sobrevivente = {}
+                        this.isLoading = false
                     } else {
                         this.showMessage(response.data.message)
+                        this.isLoading = false
                     }
                 }).catch(err => {
                     this.showMessage("Erro ao atualizar")
+                    this.isLoading = false
                 })
             },
 
@@ -257,17 +290,21 @@
             },
 
             listar() {
+                this.isLoading = true
                 Sobreviventes.listar().then(response => {
                     this.sobreviventes = response.data
+                    this.isLoading = false
                 })
             },
 
             listarItens() {
+                this.isLoading = true
                 Itens.listar().then(response => {
                     this.itens = response.data
                     this.itens.forEach(e => {
                         e.quantidade = 0
                     })
+                    this.isLoading = false
                 })
             },
 
@@ -279,25 +316,37 @@
 
             clear() {
                 this.edit = false
+                this.add = false
                 this.sobrevivente = {}
             },
 
-            alertaInfeccao(sobrevivente) {
-                this.infoId = prompt(`Digite o ID do informante da contaminação de ${sobrevivente.nome}:`)
-
-                if(!isNaN(this.infoId)) {
-
-                    Sobreviventes.alertInfected(this.infoId, sobrevivente.id).then(response => {
+            alertaInfeccao() {
+                
+                if(this.infoId != "") {
+                    Sobreviventes.alertInfected(this.infoId, this.infected.id).then(response => {
                         if(response.status == 200) {
                             this.showMessage(response.data.message)
                             this.listar()
+                            this.infoId = ""
+                            this.infected = {}
                         }
                     }).catch(err => {
-                            this.showMessage(err.message)
+                        if (err.response.data.message)  
+                            this.showMessage(err.response.data.message)
+                        else
+                            this.showMessage("Erro ao sinalizar contaminação!")
                     })
+
                 } else {
-                    this.showMessage("Digite um valor numerico!")
+                    this.showMessage("Digite um valor válido!")
                 }
+                
+            },
+
+            showForm() {
+                this.add = true;
+                this.itens = []
+                this.listarItens()
             }
 
         }
@@ -319,4 +368,19 @@
     .td-input {
         width: 50px;
     }
+
+    #moreInfo {
+        top: 30% !important;
+    }
+
+    @media screen and (min-width: 800px) {
+        #moreInfo {
+            max-width: 20%;
+        }
+    }
+
+    .more-info-link {
+        cursor: pointer;
+    }
+
 </style>
\ No newline at end of file