diff --git a/server/src/utils/wifiUtils.js b/server/src/utils/wifiUtils.js
index 4d92638..03afdd5 100644
--- a/server/src/utils/wifiUtils.js
+++ b/server/src/utils/wifiUtils.js
@@ -51,6 +51,7 @@ async function updateDBWithOnlineDevices() {
           },
           update: {
             ...device,
+            hostname: device.hostname || device.mac,
             user
           }
         })
diff --git a/web/src/views/WifiDevices.vue b/web/src/views/WifiDevices.vue
index a4791a5..d6ff00d 100644
--- a/web/src/views/WifiDevices.vue
+++ b/web/src/views/WifiDevices.vue
@@ -4,12 +4,20 @@
       :items="computedWifiDevices"
       :items-per-page.sync="itemsPerPage"
       :page="page"
+      :loading="$apollo.queries.wifiDevices.loading"
     >
       <template #header>
-        <v-toolbar flat>
-          Dispositivos Wi-Fi
-          <v-spacer />
+        <v-toolbar flat class="mb-2">
+          <v-text-field
+            v-model="search"
+            rounded
+            outlined
+            label="Buscar"
+            hint="MAC, IP, Usuário"
+            dense
+          />
           <v-btn
+            class="ml-2 mb-6"
             :loading="$apollo.queries.wifiDevices.loading"
             color="primary"
             text
@@ -20,25 +28,114 @@
         </v-toolbar>
       </template>
       <template #default="{ items }">
-        <v-row>
-          <v-col
-            v-for="item in items"
-            :key="item.mac"
-            cols="12"
-            md="4"
-            class="grow"
-          >
-            <v-card>
-              <v-card-text>
-                <Avatar :src="item.user.thumbnailPhoto" />
+        <v-expansion-panels popout multiple>
+          <v-expansion-panel v-for="item in items" :key="item.mac">
+            <v-expansion-panel-header>
+              <div>
+                <v-icon left :color="item.isOnline ? 'green darken-1' : ''">
+                  mdi-cellphone-wireless
+                </v-icon>
+                {{ item.hostname }} - {{ item.ip }}
+              </div>
+            </v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <v-list dense>
+                <v-list-item v-if="item.status === 'ONLINE'">
+                  <v-list-item-action>
+                    <v-icon color="green darken-1">mdi-wifi</v-icon>
+                  </v-list-item-action>
+                  <v-list-item-content>
+                    <v-list-item-title>
+                      {{ item.essid }} (próximo ao AP {{ item.apName }})
+                    </v-list-item-title>
+                    <v-list-item-subtitle> SSID </v-list-item-subtitle>
+                  </v-list-item-content>
+                </v-list-item>
 
-                {{ item.mac }}
-              </v-card-text>
-            </v-card>
-          </v-col>
-        </v-row>
+                <v-list-item v-else>
+                  <v-list-item-action>
+                    <v-icon>mdi-wifi-off</v-icon>
+                  </v-list-item-action>
+                  <v-list-item-content>
+                    <v-list-item-title>
+                      {{ item.essid }} (próximo ao AP {{ item.apName }})
+                    </v-list-item-title>
+                    <v-list-item-subtitle>
+                      Dispositivo off-line
+                    </v-list-item-subtitle>
+                  </v-list-item-content>
+                </v-list-item>
+
+                <v-list-item>
+                  <v-list-item-action>
+                    <v-icon>mdi-ip-network</v-icon>
+                  </v-list-item-action>
+                  <v-list-item-content>
+                    <v-list-item-title>
+                      {{ item.ip }}
+                    </v-list-item-title>
+                    <v-list-item-subtitle>
+                      Último endereço IP conhecido
+                    </v-list-item-subtitle>
+                  </v-list-item-content>
+                </v-list-item>
+                <v-list-item>
+                  <v-list-item-action>
+                    <v-icon>mdi-expansion-card-variant</v-icon>
+                  </v-list-item-action>
+                  <v-list-item-content>
+                    <v-list-item-title>
+                      {{ item.mac }}
+                    </v-list-item-title>
+                    <v-list-item-subtitle>
+                      {{ item.oui }}
+                    </v-list-item-subtitle>
+                  </v-list-item-content>
+                </v-list-item>
+                <v-list-item>
+                  <v-list-item-action>
+                    <v-icon>mdi-eye</v-icon>
+                  </v-list-item-action>
+                  <v-list-item-content>
+                    <v-list-item-title>
+                      {{ item.lastSeen | dateAndTime }}
+                    </v-list-item-title>
+                    <v-list-item-subtitle>
+                      Visto pela última vez
+                    </v-list-item-subtitle>
+                  </v-list-item-content>
+                </v-list-item>
+                <v-list-item>
+                  <v-list-item-action>
+                    <v-icon>mdi-check-decagram</v-icon>
+                  </v-list-item-action>
+                  <v-list-item-content>
+                    <v-list-item-title>
+                      {{ item.firstSeen | dateAndTime }}
+                    </v-list-item-title>
+                    <v-list-item-subtitle>
+                      Visto pela primeira vez
+                    </v-list-item-subtitle>
+                  </v-list-item-content>
+                </v-list-item>
+                <v-list-item>
+                  <v-list-item-action>
+                    <Avatar :src="item.user.thumbnailPhoto" size="24px" />
+                  </v-list-item-action>
+                  <v-list-item-content>
+                    <v-list-item-title>
+                      {{ item.user.displayName }}
+                    </v-list-item-title>
+                    <v-list-item-subtitle>
+                      {{ item.user.sAMAccountName }}
+                    </v-list-item-subtitle>
+                  </v-list-item-content>
+                </v-list-item>
+              </v-list>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+        </v-expansion-panels>
       </template>
-      <template #footer> Footer </template>
     </v-data-iterator>
   </v-container>
 </template>
@@ -51,6 +148,7 @@ export default {
   name: 'WifiDevices',
   components: { Avatar },
   data: () => ({
+    search: '',
     itemsPerPage: 24,
     itemsPerPageArray: [15, 30, 60, 120],
     page: 1
@@ -84,15 +182,26 @@ export default {
   },
   computed: {
     computedWifiDevices() {
-      return this.wifiDevices?.map(device => ({
-        ...device,
-        hostname: device.hostname || 'Desconhecido',
-        user: device.user || {
-          displayName: 'Não identificado',
-          sAMAccountName: null,
-          thumbnailPhoto: null
-        }
-      }))
+      const filter = this.search.toLowerCase()
+
+      return this.wifiDevices
+        ?.map(device => ({
+          ...device,
+          hostname: device.hostname || 'Desconhecido',
+          isOnline: device.status == 'ONLINE',
+          user: device.user || {
+            displayName: 'Não autenticado',
+            sAMAccountName: null,
+            thumbnailPhoto: null
+          }
+        }))
+        .filter(
+          ({ ip, mac, user }) =>
+            ip.includes(filter) ||
+            mac.includes(filter) ||
+            user.displayName.toLowerCase().includes(filter) ||
+            user.sAMAccountName?.includes(filter)
+        )
     }
   }
 }