diff --git a/web/src/views/UserPresence.vue b/web/src/views/UserPresence.vue
index a4eaa3e..6bfdf5f 100644
--- a/web/src/views/UserPresence.vue
+++ b/web/src/views/UserPresence.vue
@@ -1,28 +1,14 @@
 <template>
-  <div>
-    <v-toolbar height="115" flat tile>
+  <v-container fluid class="mb-12">
+    <v-toolbar class="mb-2" flat outlined>
       <v-text-field
         v-model="search"
-        class="mt-6 search"
         label="Pesquisar"
-        hint="Ex.: jose, pp, sala 102, 10.7."
-        prepend-icon="mdi-account-search"
+        prepend-inner-icon="mdi-account-search"
         clearable
-        outlined
-        rounded
-        style="max-width: 512px"
-      >
-        <v-progress-circular
-          v-if="$apollo.queries.userPresence.loading && search"
-          slot="prepend"
-          color="grey"
-          class="pa-0 ma-0"
-          :width="2"
-          :size="24"
-          indeterminate
-        />
-      </v-text-field>
-
+        hide-details
+        :loading="$apollo.queries.userPresence.loading"
+      />
       <v-dialog v-model="helpDialog" width="500px">
         <template #activator="{ on, attrs }">
           <v-btn class="ml-1" color="info" dark v-bind="attrs" icon v-on="on">
@@ -67,211 +53,198 @@
         </v-card>
       </v-dialog>
     </v-toolbar>
-    <v-progress-linear
-      height="2"
-      :indeterminate="$apollo.queries.userPresence.loading"
-    />
-    <v-container fluid class="mb-12">
-      <div v-if="stats" class="text-center my-4">
-        <span>
-          <v-chip color="online" class="mr-1" dark>
-            {{ stats.onlineUsers }}
-          </v-chip>
-          usuários online.
-        </span>
-        <v-scale-transition>
-          <span v-if="search && userPresence">
-            <v-chip color="primary" class="ml-2 mr-1" dark>
-              {{
-                userPresence.filter(presence => presence.status == 'ONLINE')
-                  .length
-              }}
-              de {{ userPresence.length }}
-            </v-chip>
-            na sua pesquisa.
-          </span>
-        </v-scale-transition>
-      </div>
 
-      <v-fade-transition
-        v-if="
-          !$apollo.queries.userPresence.loading || pagedUserPresences.length
-        "
-        class="layout row row--dense wrap"
-        group
+    <div v-if="stats" class="text-center my-4">
+      <span>
+        <v-chip color="online" class="mr-1" dark>
+          {{ stats.onlineUsers }}
+        </v-chip>
+        usuários online.
+      </span>
+      <v-scale-transition>
+        <span v-if="search && userPresence">
+          <v-chip color="primary" class="ml-2 mr-1" dark>
+            {{
+              userPresence.filter(presence => presence.status == 'ONLINE')
+                .length
+            }}
+            de {{ userPresence.length }}
+          </v-chip>
+          na sua pesquisa.
+        </span>
+      </v-scale-transition>
+    </div>
+
+    <v-fade-transition
+      v-if="!$apollo.queries.userPresence.loading || pagedUserPresences.length"
+      class="layout row row--dense wrap"
+      group
+    >
+      <v-col
+        v-for="userPresence in pagedUserPresences"
+        :key="userPresence.id"
+        cols="12"
+        md="6"
+        lg="4"
+        xl="3"
       >
-        <v-col
-          v-for="userPresence in pagedUserPresences"
-          :key="userPresence.id"
-          cols="12"
-          md="6"
-          lg="4"
-          xl="3"
+        <v-card
+          outlined
+          class="border-highlight light-shadow pa-0 ma-0"
+          :class="{
+            'user-online': userPresence.status == 'ONLINE',
+            'user-recent': userPresence.status == 'RECENT'
+          }"
         >
-          <v-card
-            outlined
-            class="border-highlight light-shadow"
-            :class="{
-              'user-online': userPresence.status == 'ONLINE',
-              'user-recent': userPresence.status == 'RECENT'
-            }"
-          >
+          <v-list three-line class="pa-0">
+            <v-list-item>
+              <v-list-item-avatar size="52px" style="overflow: visible">
+                <v-badge
+                  :color="color(userPresence.status)"
+                  bottom
+                  offset-x="18px"
+                  offset-y="18px"
+                >
+                  <Avatar :src="userPresence.thumbnailPhoto" size="52px" />
+                </v-badge>
+              </v-list-item-avatar>
+
+              <v-list-item-content>
+                <v-list-item-title>
+                  {{ userPresence.displayName }}
+                </v-list-item-title>
+
+                <template v-if="userPresence.status == 'ONLINE'">
+                  <v-list-item-subtitle>
+                    <span class="font-weight-medium">On-line</span>
+                  </v-list-item-subtitle>
+                  <v-list-item-subtitle>
+                    <span v-if="userPresence.local" class="font-weight-medium">
+                      {{ userPresence.local }}
+                    </span>
+                    <span v-else>
+                      Próximo ao AP
+                      {{ userPresence.apName }}
+                    </span>
+                  </v-list-item-subtitle>
+                </template>
+
+                <template v-if="userPresence.status == 'RECENT'">
+                  <v-list-item-subtitle>
+                    <span class="font-weight-medium">Visto recentemente</span>
+                  </v-list-item-subtitle>
+                  <v-list-item-subtitle>
+                    <span v-if="userPresence.local" class="font-weight-medium">
+                      {{ userPresence.local }}
+                    </span>
+                    <span v-else>
+                      Próximo ao AP
+                      {{ userPresence.apName }}
+                    </span>
+                  </v-list-item-subtitle>
+                </template>
+
+                <template v-if="userPresence.status == 'OFFLINE'">
+                  <v-list-item-subtitle>
+                    <span class="font-weight-medium">Off-line</span>
+                  </v-list-item-subtitle>
+                  <v-list-item-subtitle>
+                    <span class="font-weight-medium">
+                      Visto
+                      {{ userPresence.lastSeen | from }}
+                    </span>
+                  </v-list-item-subtitle>
+                </template>
+              </v-list-item-content>
+            </v-list-item>
+          </v-list>
+        </v-card>
+      </v-col>
+    </v-fade-transition>
+
+    <div v-else-if="!search">
+      <div class="layout row row--dense wrap">
+        <v-col v-for="i in pageSize" :key="i" cols="12" sm="6" md="4" lg="3">
+          <v-card outlined class="border-highlight light-shadow">
             <v-list three-line>
               <v-list-item>
-                <v-list-item-avatar size="52px" style="overflow: visible">
-                  <v-badge
-                    :color="color(userPresence.status)"
-                    bottom
-                    offset-x="18px"
-                    offset-y="18px"
-                  >
-                    <Avatar :src="userPresence.thumbnailPhoto" size="52px" />
-                  </v-badge>
+                <v-list-item-avatar>
+                  <v-skeleton-loader type="avatar" />
                 </v-list-item-avatar>
-
                 <v-list-item-content>
-                  <v-list-item-title>
-                    {{ userPresence.displayName }}
-                  </v-list-item-title>
-
-                  <template v-if="userPresence.status == 'ONLINE'">
-                    <v-list-item-subtitle>
-                      <span class="font-weight-medium">On-line</span>
-                    </v-list-item-subtitle>
-                    <v-list-item-subtitle>
-                      <span
-                        v-if="userPresence.local"
-                        class="font-weight-medium"
-                      >
-                        {{ userPresence.local }}
-                      </span>
-                      <span v-else>
-                        Próximo ao AP
-                        {{ userPresence.apName }}
-                      </span>
-                    </v-list-item-subtitle>
-                  </template>
-
-                  <template v-if="userPresence.status == 'RECENT'">
-                    <v-list-item-subtitle>
-                      <span class="font-weight-medium">Visto recentemente</span>
-                    </v-list-item-subtitle>
-                    <v-list-item-subtitle>
-                      <span
-                        v-if="userPresence.local"
-                        class="font-weight-medium"
-                      >
-                        {{ userPresence.local }}
-                      </span>
-                      <span v-else>
-                        Próximo ao AP
-                        {{ userPresence.apName }}
-                      </span>
-                    </v-list-item-subtitle>
-                  </template>
-
-                  <template v-if="userPresence.status == 'OFFLINE'">
-                    <v-list-item-subtitle>
-                      <span class="font-weight-medium">Off-line</span>
-                    </v-list-item-subtitle>
-                    <v-list-item-subtitle>
-                      <span class="font-weight-medium">
-                        Visto
-                        {{ userPresence.lastSeen | from }}
-                      </span>
-                    </v-list-item-subtitle>
-                  </template>
+                  <v-skeleton-loader
+                    type="paragraph"
+                    style="max-width: 300px"
+                  />
                 </v-list-item-content>
               </v-list-item>
             </v-list>
           </v-card>
         </v-col>
-      </v-fade-transition>
-
-      <div v-else-if="!search">
-        <div class="layout row row--dense wrap">
-          <v-col v-for="i in pageSize" :key="i" cols="12" sm="6" md="4" lg="3">
-            <v-card outlined class="border-highlight light-shadow">
-              <v-list three-line>
-                <v-list-item>
-                  <v-list-item-avatar>
-                    <v-skeleton-loader type="avatar" />
-                  </v-list-item-avatar>
-                  <v-list-item-content>
-                    <v-skeleton-loader
-                      type="paragraph"
-                      style="max-width: 300px"
-                    />
-                  </v-list-item-content>
-                </v-list-item>
-              </v-list>
-            </v-card>
-          </v-col>
-        </div>
       </div>
-      <v-alert
-        v-if="!pagedUserPresences.length && search"
-        icon="mdi-account-search"
-        color="info darken-2"
-        dark
+    </div>
+    <v-alert
+      v-if="!pagedUserPresences.length && search"
+      icon="mdi-account-search"
+      color="info darken-2"
+      dark
+    >
+      Sua pesquisa não encontrou nenhum usuário.
+    </v-alert>
+
+    <v-footer class="mt-6 light-shadow" absolute>
+      <span v-if="$vuetify.breakpoint.mdAndUp">
+        Ordenando por <em>"visto por último"</em>
+      </span>
+      <v-spacer />
+      <v-btn
+        :elevation="0"
+        :disabled="
+          !userPresence ||
+          resultSize >= userPresence.length ||
+          $apollo.queries.userPresence.loading
+        "
+        large
+        icon
+        @click="resultSize += pageSize"
       >
-        Sua pesquisa não encontrou nenhum usuário.
-      </v-alert>
+        <v-icon>mdi-plus</v-icon>
+      </v-btn>
+      <v-btn
+        class="ml-2"
+        icon
+        :elevation="0"
+        :disabled="
+          !userPresence ||
+          resultSize >= userPresence.length ||
+          $apollo.queries.userPresence.loading ||
+          resultSize <= pageSize
+        "
+        large
+        @click="resultSize -= pageSize"
+      >
+        <v-icon>mdi-minus</v-icon>
+      </v-btn>
+    </v-footer>
 
-      <v-footer class="mt-6 light-shadow" absolute>
-        <span v-if="$vuetify.breakpoint.mdAndUp">
-          Ordenando por <em>"visto por último"</em>
-        </span>
-        <v-spacer />
-        <v-btn
-          :elevation="0"
-          :disabled="
-            !userPresence ||
-            resultSize >= userPresence.length ||
-            $apollo.queries.userPresence.loading
-          "
-          large
-          icon
-          @click="resultSize += pageSize"
-        >
-          <v-icon>mdi-plus</v-icon>
-        </v-btn>
-        <v-btn
-          class="ml-2"
-          icon
-          :elevation="0"
-          :disabled="
-            !userPresence ||
-            resultSize >= userPresence.length ||
-            $apollo.queries.userPresence.loading ||
-            resultSize <= pageSize
-          "
-          large
-          @click="resultSize -= pageSize"
-        >
-          <v-icon>mdi-minus</v-icon>
-        </v-btn>
-      </v-footer>
+    <v-row class="mt-6">
+      <v-col cols="12" md="6">
+        <v-alert type="info" icon="mdi-alert" border="left" text>
+          A lista de usuários é obtida através do uso da rede
+          <strong>Wi-Fi</strong>. Ela pode não mostrar alguém presente ou
+          indicar alguém que deixou um dispositivo no campus. Use esta lista com
+          a <strong>devida cautela</strong>.
+        </v-alert>
+      </v-col>
 
-      <v-row class="mt-6">
-        <v-col cols="12" md="6">
-          <v-alert type="info" icon="mdi-alert" border="left" text>
-            A lista de usuários é obtida através do uso da rede
-            <strong>Wi-Fi</strong>. Ela pode não mostrar alguém presente ou
-            indicar alguém que deixou um dispositivo no campus. Use esta lista
-            com a <strong>devida cautela</strong>.
-          </v-alert>
-        </v-col>
-
-        <v-col cols="12" md="6">
-          <v-alert type="info" icon="mdi-update" text border="left">
-            A lista é atualizada automaticamente. Não é necessário
-            <strong>atualizar</strong> a página.
-          </v-alert>
-        </v-col>
-      </v-row>
-    </v-container>
-  </div>
+      <v-col cols="12" md="6">
+        <v-alert type="info" icon="mdi-update" text border="left">
+          A lista é atualizada automaticamente. Não é necessário
+          <strong>atualizar</strong> a página.
+        </v-alert>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>