diff --git a/server/src/resolvers/PAHost.js b/server/src/resolvers/PAHost.js
index 50671fe..dfd4fde 100644
--- a/server/src/resolvers/PAHost.js
+++ b/server/src/resolvers/PAHost.js
@@ -1,7 +1,7 @@
 import { decryptKey } from '../lib/paloalto'
 
 const PAHost = {
-  key: parent => decryptKey(parent.encryptedKey).slice(0, 5) + '*****'
+  key: parent => `${decryptKey(parent.encryptedKey).slice(0, 5)}*****`
 }
 
 export { PAHost }
diff --git a/web/src/views/SystemAdministration/PaloAlto.vue b/web/src/views/SystemAdministration/PaloAlto.vue
index ffb730f..9a10d30 100644
--- a/web/src/views/SystemAdministration/PaloAlto.vue
+++ b/web/src/views/SystemAdministration/PaloAlto.vue
@@ -1,7 +1,90 @@
-<template><div>paloalto</div></template>
+<template>
+  <v-container fluid>
+    <v-toolbar flat>
+      <v-toolbar-title>Hosts cadastrados</v-toolbar-title>
+      <v-spacer />
+      <v-toolbar-items>
+        <v-btn text color="primary"
+          ><v-icon left>mdi-plus</v-icon> Adicionar</v-btn
+        >
+      </v-toolbar-items>
+    </v-toolbar>
+    <v-row>
+      <v-col
+        v-for="pAHost in pAHosts"
+        :key="pAHost.id"
+        cols="12"
+        sm="6"
+        md="4"
+        lg="3"
+      >
+        <v-card outlined class="rounded-xl light-shadow">
+          <v-card-title class="font-weight-light">
+            {{ pAHost.description || pAHost.cidr.split('/')[0] }}
+          </v-card-title>
+          <v-card-text>
+            <v-list>
+              <v-list-item v-for="info in infoTexts" :key="info.key">
+                <v-list-item-avatar>
+                  <v-icon>{{ info.icon }}</v-icon>
+                </v-list-item-avatar>
+                <v-list-item-content>
+                  <v-list-item-title>
+                    {{ pAHost[info.key] }}
+                  </v-list-item-title>
+                  <v-list-item-subtitle> {{ info.text }} </v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list>
+
+            {{ pAHost.note || 'Sem observações' }}
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer />
+            <v-btn disabled icon><v-icon>mdi-pencil</v-icon></v-btn>
+
+            <v-btn icon><v-icon>mdi-trash-can</v-icon></v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+    <v-banner icon="mdi-information" outlined rounded>
+      Os hosts cadastrados serão usados para mapeamento de ID de usuários, a fim
+      de evitar a necessidade da tela de autenticação do Captive Portal.
+    </v-banner>
+  </v-container>
+</template>
 
 <script>
-export default {}
+import gql from 'graphql-tag'
+
+const PAHOSTS_QUERY = gql`
+  {
+    pAHosts {
+      id
+      description
+      cidr
+      key
+      note
+      user
+      createdAt
+      updatedAt
+    }
+  }
+`
+export default {
+  name: 'PaloAlto',
+  data: () => ({
+    infoTexts: [
+      { key: 'cidr', text: 'IP (CIDR)', icon: 'mdi-ip' },
+      { key: 'key', text: 'Chave da API', icon: 'mdi-key' },
+      { key: 'user', text: 'Usuário da chave', icon: 'mdi-account' }
+    ]
+  }),
+  apollo: {
+    pAHosts: { query: PAHOSTS_QUERY, fetchPolicy: 'network-only' }
+  }
+}
 </script>
 
 <style></style>